github.styl: Improvements to repo view

* Fix .sunken-menu background gradients and borders (finally!)
* Make .breadcrumb blue
* Lighten background of .counter
* Fix background color of .commit-desc
* Make .entry-title blue
* Fix some .octicon selectors
* Fix color of .octicon-clippy
pull/4/head
Adam Porter 9 years ago
parent dfee38012e
commit 2482817c53

@ -31,6 +31,9 @@ pre {
background-color: #002b36 !important;
color: #839496 !important;
}
.breadcrumb .repo-root.js-repo-root a {
color: #268bd2 !important;
}
.breadcrumb strong.final-path {
color: #839496 !important;
}
@ -38,7 +41,7 @@ pre {
color: #93a1a1 !important;
}
.counter {
background-color: #586e75 !important;
background-color: #094352 !important;
color: #93a1a1 !important;
}
.diffstat-bar {
@ -308,7 +311,8 @@ pre {
.full-commit * {
text-shadow: none !important;
}
.full-commit .commit-desc pre {
.commit-desc pre {
background-color: transparent !important;
color: #839496 !important;
}
.completeness-indicator-success {
@ -385,6 +389,9 @@ pre {
background-image: linear-gradient(#859900, #424d00) !important;
color: #93a1a1 !important;
}
.entry-title a {
color: #268bd2 !important;
}
.header {
background-color: #073642 !important;
border-bottom-color: #586e75 !important;
@ -417,24 +424,13 @@ a.label {
.octicon-repo {
color: #93a1a1 !important;
}
.octicon,
.octicon.octicon-git-compare,
.octicon-repo-forked {
color: #93a1a1 !important;
}
.octicon.type-icon-state-closed,
.octicon.octicon-git-compare.type-icon-state-closed,
.octicon-repo-forked.type-icon-state-closed {
.octicon.octicon-git-compare.type-icon-state-closed {
color: #dc322f !important;
}
.octicon.type-icon-state-merged,
.octicon.octicon-git-compare.type-icon-state-merged,
.octicon-repo-forked.type-icon-state-merged {
.octicon.octicon-git-compare.type-icon-state-merged {
color: #6c71c4 !important;
}
.octicon.type-icon-state-open,
.octicon.octicon-git-compare.type-icon-state-open,
.octicon-repo-forked.type-icon-state-open {
.octicon.octicon-git-compare.type-icon-state-open {
color: #859900 !important;
}
.octicon-check {
@ -444,7 +440,7 @@ a.label {
color: #dc322f !important;
}
.octicon-clippy {
color: #268bd2 !important;
color: #93a1a1 !important;
}
.octicon-git-pull-request,
.octicon-diff {
@ -539,24 +535,28 @@ a.label {
background-color: #002b36 !important;
}
.sunken-menu {
background-image: linear-gradient(to right, #002b36 0%, #073642 8px) !important;
background-image: linear-gradient(to right, #073642 0%, #002b36 8px) !important;
box-shadow: 1px 0px 0px #073642 inset;
}
.sunken-menu:before {
background-image: linear-gradient(#002b36, rgba(7,66,54,0)) !important;
background-image: linear-gradient(#002b36, transparent) !important;
}
.sunken-menu:after {
background-image: linear-gradient(rgba(7,66,54,0), #002b36) !important;
background-image: linear-gradient(transparent, #002b36) !important;
}
.sunken-menu-item {
border-color: #002b36 !important;
}
.sunken-menu-item.selected {
background-color: #073642 !important;
background-color: #002b36 !important;
border-color: #094352 !important;
color: #93a1a1 !important;
}
.sunken-menu-item.selected:after {
background-color: #cb4b16 !important;
}
.sunken-menu-separator {
background-image: radial-gradient(farthest-side at left top, #073642, rgba(7,66,54,0));
.sunken-menu-separator:before {
background-image: linear-gradient(to right, #073642 70%, #002b36 100%) !important;
}
.state {
color: #93a1a1 !important;

@ -31,6 +31,9 @@ pre {
background-color: #fdf6e3 !important;
color: #657b83 !important;
}
.breadcrumb .repo-root.js-repo-root a {
color: #268bd2 !important;
}
.breadcrumb strong.final-path {
color: #657b83 !important;
}
@ -38,7 +41,7 @@ pre {
color: #586e75 !important;
}
.counter {
background-color: #93a1a1 !important;
background-color: #e9e1c8 !important;
color: #586e75 !important;
}
.diffstat-bar {
@ -308,7 +311,8 @@ pre {
.full-commit * {
text-shadow: none !important;
}
.full-commit .commit-desc pre {
.commit-desc pre {
background-color: transparent !important;
color: #657b83 !important;
}
.completeness-indicator-success {
@ -385,6 +389,9 @@ pre {
background-image: linear-gradient(#859900, #424d00) !important;
color: #93a1a1 !important;
}
.entry-title a {
color: #268bd2 !important;
}
.header {
background-color: #eee8d5 !important;
border-bottom-color: #93a1a1 !important;
@ -417,24 +424,13 @@ a.label {
.octicon-repo {
color: #93a1a1 !important;
}
.octicon,
.octicon.octicon-git-compare,
.octicon-repo-forked {
color: #93a1a1 !important;
}
.octicon.type-icon-state-closed,
.octicon.octicon-git-compare.type-icon-state-closed,
.octicon-repo-forked.type-icon-state-closed {
.octicon.octicon-git-compare.type-icon-state-closed {
color: #dc322f !important;
}
.octicon.type-icon-state-merged,
.octicon.octicon-git-compare.type-icon-state-merged,
.octicon-repo-forked.type-icon-state-merged {
.octicon.octicon-git-compare.type-icon-state-merged {
color: #6c71c4 !important;
}
.octicon.type-icon-state-open,
.octicon.octicon-git-compare.type-icon-state-open,
.octicon-repo-forked.type-icon-state-open {
.octicon.octicon-git-compare.type-icon-state-open {
color: #859900 !important;
}
.octicon-check {
@ -444,7 +440,7 @@ a.label {
color: #dc322f !important;
}
.octicon-clippy {
color: #268bd2 !important;
color: #586e75 !important;
}
.octicon-git-pull-request,
.octicon-diff {
@ -539,24 +535,28 @@ a.label {
background-color: #fdf6e3 !important;
}
.sunken-menu {
background-image: linear-gradient(to right, #fdf6e3 0%, #eee8d5 8px) !important;
background-image: linear-gradient(to right, #eee8d5 0%, #fdf6e3 8px) !important;
box-shadow: 1px 0px 0px #eee8d5 inset;
}
.sunken-menu:before {
background-image: linear-gradient(#fdf6e3, rgba(238,213,232,0)) !important;
background-image: linear-gradient(#fdf6e3, transparent) !important;
}
.sunken-menu:after {
background-image: linear-gradient(rgba(238,213,232,0), #fdf6e3) !important;
background-image: linear-gradient(transparent, #fdf6e3) !important;
}
.sunken-menu-item {
border-color: #fdf6e3 !important;
}
.sunken-menu-item.selected {
background-color: #eee8d5 !important;
background-color: #fdf6e3 !important;
border-color: #e9e1c8 !important;
color: #586e75 !important;
}
.sunken-menu-item.selected:after {
background-color: #cb4b16 !important;
}
.sunken-menu-separator {
background-image: radial-gradient(farthest-side at left top, #eee8d5, rgba(238,213,232,0));
.sunken-menu-separator:before {
background-image: linear-gradient(to right, #eee8d5 70%, #fdf6e3 100%) !important;
}
.state {
color: #586e75 !important;

@ -24,6 +24,9 @@ pre {
background-color: #073642 !important;
color: #839496 !important;
}
.breadcrumb .repo-root.js-repo-root a {
color: #268bd2 !important;
}
.breadcrumb strong.final-path {
color: #839496 !important;
}
@ -31,7 +34,7 @@ pre {
color: #93a1a1 !important;
}
.counter {
background-color: #586e75 !important;
background-color: #094352 !important;
color: #93a1a1 !important;
}
.diffstat-bar {
@ -301,7 +304,8 @@ pre {
.full-commit * {
text-shadow: none !important;
}
.full-commit .commit-desc pre {
.commit-desc pre {
background-color: transparent !important;
color: #839496 !important;
}
.completeness-indicator-success {
@ -378,6 +382,9 @@ pre {
background-image: linear-gradient(#859900, #424d00) !important;
color: #93a1a1 !important;
}
.entry-title a {
color: #268bd2 !important;
}
.header {
background-color: #073642 !important;
border-bottom-color: #586e75 !important;
@ -410,24 +417,13 @@ a.label {
.octicon-repo {
color: #93a1a1 !important;
}
.octicon,
.octicon.octicon-git-compare,
.octicon-repo-forked {
color: #93a1a1 !important;
}
.octicon.type-icon-state-closed,
.octicon.octicon-git-compare.type-icon-state-closed,
.octicon-repo-forked.type-icon-state-closed {
.octicon.octicon-git-compare.type-icon-state-closed {
color: #dc322f !important;
}
.octicon.type-icon-state-merged,
.octicon.octicon-git-compare.type-icon-state-merged,
.octicon-repo-forked.type-icon-state-merged {
.octicon.octicon-git-compare.type-icon-state-merged {
color: #6c71c4 !important;
}
.octicon.type-icon-state-open,
.octicon.octicon-git-compare.type-icon-state-open,
.octicon-repo-forked.type-icon-state-open {
.octicon.octicon-git-compare.type-icon-state-open {
color: #859900 !important;
}
.octicon-check {
@ -437,7 +433,7 @@ a.label {
color: #dc322f !important;
}
.octicon-clippy {
color: #268bd2 !important;
color: #93a1a1 !important;
}
.octicon-git-pull-request,
.octicon-diff {
@ -532,24 +528,28 @@ a.label {
background-color: #002b36 !important;
}
.sunken-menu {
background-image: linear-gradient(to right, #002b36 0%, #073642 8px) !important;
background-image: linear-gradient(to right, #073642 0%, #002b36 8px) !important;
box-shadow: 1px 0px 0px #073642 inset;
}
.sunken-menu:before {
background-image: linear-gradient(#002b36, rgba(7,66,54,0)) !important;
background-image: linear-gradient(#002b36, transparent) !important;
}
.sunken-menu:after {
background-image: linear-gradient(rgba(7,66,54,0), #002b36) !important;
background-image: linear-gradient(transparent, #002b36) !important;
}
.sunken-menu-item {
border-color: #002b36 !important;
}
.sunken-menu-item.selected {
background-color: #073642 !important;
background-color: #002b36 !important;
border-color: #094352 !important;
color: #93a1a1 !important;
}
.sunken-menu-item.selected:after {
background-color: #cb4b16 !important;
}
.sunken-menu-separator {
background-image: radial-gradient(farthest-side at left top, #073642, rgba(7,66,54,0));
.sunken-menu-separator:before {
background-image: linear-gradient(to right, #073642 70%, #002b36 100%) !important;
}
.state {
color: #93a1a1 !important;

@ -24,6 +24,9 @@ pre {
background-color: #eee8d5 !important;
color: #657b83 !important;
}
.breadcrumb .repo-root.js-repo-root a {
color: #268bd2 !important;
}
.breadcrumb strong.final-path {
color: #657b83 !important;
}
@ -31,7 +34,7 @@ pre {
color: #586e75 !important;
}
.counter {
background-color: #93a1a1 !important;
background-color: #e9e1c8 !important;
color: #586e75 !important;
}
.diffstat-bar {
@ -301,7 +304,8 @@ pre {
.full-commit * {
text-shadow: none !important;
}
.full-commit .commit-desc pre {
.commit-desc pre {
background-color: transparent !important;
color: #657b83 !important;
}
.completeness-indicator-success {
@ -378,6 +382,9 @@ pre {
background-image: linear-gradient(#859900, #424d00) !important;
color: #93a1a1 !important;
}
.entry-title a {
color: #268bd2 !important;
}
.header {
background-color: #eee8d5 !important;
border-bottom-color: #93a1a1 !important;
@ -410,24 +417,13 @@ a.label {
.octicon-repo {
color: #93a1a1 !important;
}
.octicon,
.octicon.octicon-git-compare,
.octicon-repo-forked {
color: #93a1a1 !important;
}
.octicon.type-icon-state-closed,
.octicon.octicon-git-compare.type-icon-state-closed,
.octicon-repo-forked.type-icon-state-closed {
.octicon.octicon-git-compare.type-icon-state-closed {
color: #dc322f !important;
}
.octicon.type-icon-state-merged,
.octicon.octicon-git-compare.type-icon-state-merged,
.octicon-repo-forked.type-icon-state-merged {
.octicon.octicon-git-compare.type-icon-state-merged {
color: #6c71c4 !important;
}
.octicon.type-icon-state-open,
.octicon.octicon-git-compare.type-icon-state-open,
.octicon-repo-forked.type-icon-state-open {
.octicon.octicon-git-compare.type-icon-state-open {
color: #859900 !important;
}
.octicon-check {
@ -437,7 +433,7 @@ a.label {
color: #dc322f !important;
}
.octicon-clippy {
color: #268bd2 !important;
color: #586e75 !important;
}
.octicon-git-pull-request,
.octicon-diff {
@ -532,24 +528,28 @@ a.label {
background-color: #fdf6e3 !important;
}
.sunken-menu {
background-image: linear-gradient(to right, #fdf6e3 0%, #eee8d5 8px) !important;
background-image: linear-gradient(to right, #eee8d5 0%, #fdf6e3 8px) !important;
box-shadow: 1px 0px 0px #eee8d5 inset;
}
.sunken-menu:before {
background-image: linear-gradient(#fdf6e3, rgba(238,213,232,0)) !important;
background-image: linear-gradient(#fdf6e3, transparent) !important;
}
.sunken-menu:after {
background-image: linear-gradient(rgba(238,213,232,0), #fdf6e3) !important;
background-image: linear-gradient(transparent, #fdf6e3) !important;
}
.sunken-menu-item {
border-color: #fdf6e3 !important;
}
.sunken-menu-item.selected {
background-color: #eee8d5 !important;
background-color: #fdf6e3 !important;
border-color: #e9e1c8 !important;
color: #586e75 !important;
}
.sunken-menu-item.selected:after {
background-color: #cb4b16 !important;
}
.sunken-menu-separator {
background-image: radial-gradient(farthest-side at left top, #eee8d5, rgba(238,213,232,0));
.sunken-menu-separator:before {
background-image: linear-gradient(to right, #eee8d5 70%, #fdf6e3 100%) !important;
}
.state {
color: #586e75 !important;

@ -2,6 +2,9 @@
// ** Misc
.breadcrumb .repo-root.js-repo-root
a
color blue
.breadcrumb strong.final-path
color()
@ -9,7 +12,7 @@
color emphasized
.counter
background-color highlight-extra
background-color color-background-highlight-extra-less
color emphasized
.diffstat-bar
@ -271,8 +274,9 @@
*
text-shadow none i
.commit-desc pre
color()
.commit-desc pre
background-color transparent i
color()
// ** completeness-indicator
.completeness-indicator-success
@ -358,6 +362,10 @@
background-image linear-gradient(green, darken(green, 50%)) i
color base1
.entry-title
a
color blue i
.header
background-color highlight
border-bottom-color color-background-highlight-extra i
@ -392,8 +400,8 @@ a.label
.octicon, .octicon-repo
color base1
.octicon, .octicon.octicon-git-compare, .octicon-repo-forked
color base1
.octicon.octicon-git-compare
//color color-background-highlight
&.type-icon-state-closed
color red
@ -410,7 +418,7 @@ a.label
color red
.octicon-clippy
color blue
color emphasized
.octicon-git-pull-request, .octicon-diff
color()
@ -505,37 +513,28 @@ a.label
// *** sunken-menu
.sunken-menu
background-image: linear-gradient(to right, color-background 0%, color-background-highlight 8px) i
background-image linear-gradient(to right, color-background-highlight 0%, color-background 8px) i
box-shadow 1px 0px 0px color-background-highlight inset
&:before
background-image: linear-gradient(color-background, rgba(red(color-background-highlight),
blue(color-background-highlight),
green(color-background-highlight),
0)) i
background-image linear-gradient(color-background, transparent) i
&:after
background-image: linear-gradient(rgba(red(color-background-highlight),
blue(color-background-highlight),
green(color-background-highlight),
0),
color-background) i
background-image linear-gradient(transparent, color-background) i
.sunken-menu-item
border-color color-background
&.selected
background-color highlight
background-color()
border-color color-background-highlight-extra-less
color emphasized
&:after
background-color orange
.sunken-menu-separator
background-image: radial-gradient(farthest-side at left top,
color-background-highlight,
rgba(red(color-background-highlight),
blue(color-background-highlight),
green(color-background-highlight),
0))
.sunken-menu-separator:before
background-image linear-gradient(to right, color-background-highlight 70%, color-background 100%) i
// ** states
.state

Loading…
Cancel
Save