зеркало из https://github.com/github/octobox.git
Dark mode (#769)
* First pass at Dark mode Also opens up the possiblity of adding more themes in the future as well * * Add the default theme back into schema * * add darkly theme * * add default vars from BS * * begin adding custom color spaces (may remove later) * drop in standard colours where possible * * set light/dark theme colours for responsidve dropdown * * use standard theme colours for dropdown-menu on sm screens * * fix color sync on navbar collapse * * fix up notifications colours using list-action colourscheme * * add star options * update notification colours * * use main body text colo9ur as basis for keys * * update svg active nav colours * * add dividers * * fix up icons in navbar betweeen light and dark * * move new variables and overrides into theme * * standardise search menu behaviour * precompile theme css for swapping * add precompile instructions Has a bit of a loading order problem :/ * * fix precomp filesnames * * fix ordering of imports * re-add defautls to darkly * invert navbar color mixin * * patch a few styles * override dark/light navbars * * fix svg colours in sidebar * * fix up a few hangers in view templates * add svg colours (inc. buttons) * * sswitch to default, light theme if we dont have a user * * let's make things a little less monochromatic * * PR review fixes * * move all var declarations to theme
This commit is contained in:
Andrew Nesbitt
GitHub
Родитель
bcd0d0e8cd
Коммит
ce54a8f343
|
|
@ -1,14 +1,4 @@
|
|||
$table-bg-active: #fafafa;
|
||||
$font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
$jumbotron-bg: #fff;
|
||||
$subscribed-color: #a128ca;
|
||||
$subscribed-text-color: #fff;
|
||||
$team_mention-color: #5d477e;
|
||||
$team_mention-text-color: #fff;
|
||||
$text-color: #333;
|
||||
$security_alert-color: #800000;
|
||||
$security_alert-text-color: #fff;
|
||||
|
||||
@import 'variables';
|
||||
@import 'bootstrap-custom';
|
||||
@import "patterns/blankslate";
|
||||
|
||||
|
|
@ -44,7 +34,7 @@ html {
|
|||
.nav-item{
|
||||
max-width: 100%;
|
||||
&:hover{
|
||||
background-color: #eee;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,11 +61,21 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
fill: $body-color;
|
||||
&.active svg{
|
||||
fill: $nav-pills-link-active-color;
|
||||
&.octicon-star{
|
||||
stroke: $nav-pills-link-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
color: $text-muted;
|
||||
a{
|
||||
color: #666;
|
||||
color: color-yiq($body-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,8 +125,8 @@ html {
|
|||
|
||||
.turbolinks-progress-bar {
|
||||
height: 2px !important;
|
||||
background-color: #77b6ff !important;
|
||||
box-shadow: 0 0 10px rgba(#77b6ff, 0.7) !important;
|
||||
background-color: theme-color("primary") !important;
|
||||
box-shadow: 0 0 10px rgba(theme-color("primary"), 0.7) !important;
|
||||
}
|
||||
|
||||
.octobox-icon {
|
||||
|
|
@ -143,14 +143,26 @@ html {
|
|||
.navbar-main {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-brand {
|
||||
.navbar{
|
||||
.octobox-icon {
|
||||
fill: #fff;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:hover {
|
||||
.octobox-icon {
|
||||
fill: #fff;
|
||||
&.navbar-light, &.bg-light{
|
||||
#search input{
|
||||
background: rgba($navbar-light-color,0.125);
|
||||
color: $navbar-light-color
|
||||
}
|
||||
.opencollective, .search-help, .octobox-icon{
|
||||
fill: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
&.navbar-dark, &.bg-dark {
|
||||
#search input{
|
||||
background: rgba($navbar-dark-color,0.125);
|
||||
color: $navbar-dark-color
|
||||
}
|
||||
.opencollective, .search-help, .octobox-icon{
|
||||
fill: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,56 +196,79 @@ html {
|
|||
}
|
||||
#search {
|
||||
input {
|
||||
background: rgba(255,255,255,0.125);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-nav .dropdown .dropdown-menu {
|
||||
display: block;
|
||||
position: static;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
> a {
|
||||
color: #ddd;
|
||||
line-height: 20px;
|
||||
padding: 5px 15px 5px 25px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.navbar{
|
||||
form {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
.form-control{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> a,
|
||||
.dropdown-header {
|
||||
padding: 5px 15px 5px 25px;
|
||||
> .navbar-collapse .dropdown-menu {
|
||||
display: block;
|
||||
position: static;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
> a {
|
||||
line-height: 20px;
|
||||
padding: 5px 15px 5px 25px;
|
||||
}
|
||||
> a,
|
||||
.dropdown-header {
|
||||
padding: 5px 15px 5px 25px;
|
||||
}
|
||||
}
|
||||
.dropdown-divider {
|
||||
border-top-color: #444;
|
||||
&.navbar-dark{
|
||||
.navbar-collapse.show{
|
||||
border-top: solid 1px $navbar-dark-color;
|
||||
}
|
||||
.dropdown-menu{
|
||||
> a{
|
||||
color: $navbar-dark-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .dropdown-divider {
|
||||
border-top-color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-light{
|
||||
.navbar-collapse.show{
|
||||
border-top: solid 1px $navbar-light-color;
|
||||
}
|
||||
.dropdown-menu{
|
||||
> a{
|
||||
color: $navbar-light-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .dropdown-divider {
|
||||
border-top-color: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar form {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
.form-control{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.show{
|
||||
border-top: solid 1px #444;
|
||||
}
|
||||
|
||||
.table > tbody > tr:first-child > td {
|
||||
|
|
@ -241,11 +276,11 @@ html {
|
|||
}
|
||||
|
||||
.label-muted {
|
||||
background-color: #ccc;
|
||||
background-color: $label-muted-color;
|
||||
}
|
||||
|
||||
.label-default {
|
||||
background-color: #333;
|
||||
background-color: $label-default-color;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
|
|
@ -256,27 +291,36 @@ html {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-notifications {
|
||||
td{
|
||||
padding: 0.6rem;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
background-color: $list-group-action-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.table-notifications tr td:first-child {
|
||||
border-left: 2px solid #fff;
|
||||
border-left: 2px solid $list-group-bg;
|
||||
}
|
||||
.table-notifications tr:hover td:first-child {
|
||||
border-left: 2px solid $table-hover-bg;
|
||||
border-left: 2px solid $list-group-action-hover-color;
|
||||
}
|
||||
.table-notifications tr.active td:first-child {
|
||||
border-left: 2px solid $table-bg-active;
|
||||
border-left: 2px solid $list-group-action-active-bg;
|
||||
}
|
||||
.table-notifications tr.active:hover td:first-child {
|
||||
border-left: 2px solid #ededed;
|
||||
border-left: 2px solid $list-group-action-hover-color;
|
||||
}
|
||||
td.current {
|
||||
border-left: 2px solid #64beff !important;
|
||||
border-left: 2px solid $list-group-active-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
table.keyboard-mappings {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
table.keyboard-mappings tr > td {
|
||||
|
|
@ -285,7 +329,6 @@ table.keyboard-mappings tr > td {
|
|||
|
||||
td.keys {
|
||||
padding-right: 10px;
|
||||
color: #767676;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -295,13 +338,12 @@ td.keys {
|
|||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
background-color: rgba($body-color,0.1);
|
||||
border: solid 1px rgba($body-color,0.2);
|
||||
border-bottom-color: rgba($body-color,0.3);
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
box-shadow: inset 0 -1px 0 rgba($body-color,0.4);
|
||||
}
|
||||
|
||||
.sync{
|
||||
|
|
@ -312,27 +354,17 @@ td.keys {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-notifications {
|
||||
td{
|
||||
padding: 0.6rem;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
background-color: #FAFAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.nav-filters {
|
||||
.divider {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid $nav-divider-color;
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
&.double {
|
||||
border-top: 3px double #ddd;
|
||||
border-top: 3px double $nav-divider-color;
|
||||
}
|
||||
}
|
||||
> li > a {
|
||||
|
|
@ -415,9 +447,9 @@ td.keys {
|
|||
display: block;
|
||||
}
|
||||
&.table > tbody > tr.active {
|
||||
background: #fafafa;
|
||||
background: $list-group-action-active-bg;
|
||||
&:hover {
|
||||
background: #ededed;
|
||||
background: $list-group-action-active-bg;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -426,7 +458,7 @@ td.keys {
|
|||
padding: 0;
|
||||
}
|
||||
.notification {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid $list-group-border-color;
|
||||
position: relative;
|
||||
padding: 10px 10px 10px 40px;
|
||||
&:first-child {
|
||||
|
|
@ -469,6 +501,7 @@ td.keys {
|
|||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
|
@ -511,6 +544,16 @@ td.keys {
|
|||
}
|
||||
|
||||
// SVG text classes
|
||||
.btn {
|
||||
fill: $body-color;
|
||||
}
|
||||
|
||||
.text-default {
|
||||
fill: $body-color;
|
||||
&.sidebar-icon {
|
||||
fill: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
fill: $text-muted;
|
||||
|
|
@ -539,77 +582,69 @@ td.keys {
|
|||
fill: theme-color("secondary");
|
||||
}
|
||||
|
||||
|
||||
.text-default {
|
||||
fill: $text-color;
|
||||
&.sidebar-icon {
|
||||
fill: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-subscribed{
|
||||
background-color: $subscribed-color;
|
||||
color: $subscribed-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $subscribed-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken( $subscribed-color, 10% );
|
||||
}
|
||||
}
|
||||
|
||||
.text-subscribed{
|
||||
fill: $subscribed-color;
|
||||
fill: $label-subscribed-color;
|
||||
&.sidebar-icon {
|
||||
fill: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-team_mention{
|
||||
background-color: $team_mention-color;
|
||||
color: $team_mention-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $team_mention-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken( $team_mention-color, 10% );
|
||||
fill: color-yiq($label-subscribed-color);
|
||||
}
|
||||
}
|
||||
|
||||
.text-team_mention{
|
||||
fill: $team_mention-color;
|
||||
fill: $label-team_mention-color;
|
||||
&.sidebar-icon {
|
||||
fill: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-security_alert{
|
||||
background-color: $security_alert-color;
|
||||
color: $security_alert-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $security_alert-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken( $security_alert-color, 10% );
|
||||
fill: color-yiq($label-team_mention-color);
|
||||
}
|
||||
}
|
||||
|
||||
.text-security_alert{
|
||||
fill: $security_alert-color;
|
||||
fill: $label-security_alert-color;
|
||||
&.sidebar-icon {
|
||||
fill: $text-muted;
|
||||
fill: color-yiq($label-security_alert-color);
|
||||
}
|
||||
}
|
||||
|
||||
.flex-content{
|
||||
.octicon-star {
|
||||
fill: none;
|
||||
stroke: #aaa;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
fill: #aaa;
|
||||
}
|
||||
&.star-active {
|
||||
fill: #f0ad4e;
|
||||
stroke: #f0ad4e;
|
||||
}
|
||||
.octicon-star {
|
||||
fill: $icon-star-fill;
|
||||
stroke: $icon-star-stroke;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
fill: $icon-star-hover-fill;
|
||||
}
|
||||
&.star-active {
|
||||
fill: $icon-star-active-fill;
|
||||
stroke: $icon-star-active-stroke;
|
||||
}
|
||||
}
|
||||
|
||||
// badges
|
||||
|
||||
.badge-subscribed{
|
||||
background-color: $label-subscribed-color;
|
||||
color: $label-subscribed-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $label-subscribed-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken( $label-subscribed-color, 10% );
|
||||
}
|
||||
}
|
||||
|
||||
.badge-team_mention{
|
||||
background-color: $label-team_mention-color;
|
||||
color: $label-team_mention-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $label-team_mention-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken( $label-team_mention-color, 10% );
|
||||
}
|
||||
}
|
||||
|
||||
.badge-security_alert{
|
||||
background-color: $label-security_alert-color;
|
||||
color: $label-security_alert-text-color;
|
||||
&[href]:hover, &[href]:focus {
|
||||
color: $label-security_alert-text-color;
|
||||
text-decoration: none;
|
||||
background-color: darken($label-security_alert-color, 10% );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -620,7 +655,6 @@ td.keys {
|
|||
.card-notifications {
|
||||
margin-bottom: 20px;
|
||||
.card-header {
|
||||
background-color: #f6f6f6;
|
||||
padding: 6px 8px;
|
||||
.pagination{
|
||||
margin: 6px 0px 0px;
|
||||
|
|
@ -651,25 +685,13 @@ td.keys {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.opencollective{
|
||||
fill: #ddd;
|
||||
}
|
||||
.nav-link.active svg{
|
||||
fill: white;
|
||||
&.octicon-star{
|
||||
stroke: white;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.notification-open{
|
||||
fill: #5cb85c;
|
||||
fill: $notification-open;
|
||||
}
|
||||
.notification-closed{
|
||||
fill: #d9534f;
|
||||
}
|
||||
.octicon.inverse{
|
||||
fill: #fff;
|
||||
fill: $notification-closed;
|
||||
}
|
||||
|
||||
.hidden-button {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -688,18 +710,18 @@ td.keys {
|
|||
}
|
||||
|
||||
.private-repo{
|
||||
fill: #dbab09;
|
||||
fill: icon-private-repo-color;
|
||||
}
|
||||
|
||||
.search-help{
|
||||
position: relative;
|
||||
left: -35px;
|
||||
fill: #aaa;
|
||||
fill: $body-color;
|
||||
}
|
||||
|
||||
.btn-outline-dark{
|
||||
&:hover, &:active {
|
||||
fill: #fff;
|
||||
fill: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
$notification-open: #5cb85c !default;
|
||||
$notification-closed: #d9534f !default;
|
||||
$notification-merged: #a128ca !default;
|
||||
|
||||
$label-default-color: #333 !default;
|
||||
$label-muted-color: #ccc !default;
|
||||
$label-subscribed-color: #a128ca !default;
|
||||
$label-subscribed-text-color: #fff !default;
|
||||
$label-team_mention-color: #5d477e !default;
|
||||
$label-team_mention-text-color: #fff !default;
|
||||
$label-security_alert-color: #800000 !default;
|
||||
$label-security_alert-text-color: #fff !default;
|
||||
|
||||
$icon-private-repo-color: #dbab09 !default;
|
||||
$icon-star-fill: none !default;
|
||||
$icon-star-stroke: #aaa !default;
|
||||
$icon-star-hover-fill: $icon-star-stroke !default;
|
||||
$icon-star-hover-stroke: $icon-star-stroke !default;
|
||||
$icon-star-active-fill: #f0ad4e !default;
|
||||
$icon-star-active-stroke: $icon-star-active-fill !default;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
@import "themes/darkly/variables";
|
||||
@import "application";
|
||||
@import "themes/darkly/bootswatch";
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
background: mix($body-bg, $black, 95%) !important;
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-dark-color;
|
||||
border-color: $navbar-dark-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-dark-toggler-icon-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
a {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
background: mix($body-bg, $white, 95%) !important;
|
||||
.navbar-brand {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
border-color: $navbar-light-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-light-toggler-icon-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
a {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "themes/default/variables";
|
||||
@import "application";
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
// Darkly 4.1.3
|
||||
// Bootswatch
|
||||
|
||||
|
||||
// Variables ===================================================================
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;
|
||||
@import url($web-font-path);
|
||||
|
||||
// Navbar ======================================================================
|
||||
|
||||
.bg-primary {
|
||||
.navbar-nav .active > .nav-link {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: $success;
|
||||
&.navbar-dark .navbar-nav {
|
||||
.nav-link:focus,
|
||||
.nav-link:hover,
|
||||
.active > .nav-link {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons =====================================================================
|
||||
|
||||
// Typography ==================================================================
|
||||
|
||||
.blockquote {
|
||||
&-footer {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables ======================================================================
|
||||
|
||||
.table {
|
||||
|
||||
&-primary {
|
||||
&, > th, > td {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
&, > th, > td {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
&, > th, > td {
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
&-dark {
|
||||
&, > th, > td {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
&, > th, > td {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
&, > th, > td {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
&, > th, > td {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
&, > th, > td {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
&, > th, > td {
|
||||
background-color: $table-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-hover {
|
||||
|
||||
.table-primary:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-secondary:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($secondary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-light:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($light, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-success:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($success, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-info:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($info, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-danger:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($danger, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-warning:hover {
|
||||
&, > th, > td {
|
||||
background-color: darken($warning, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-active:hover {
|
||||
&, > th, > td {
|
||||
background-color: $table-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Forms =======================================================================
|
||||
|
||||
.input-group-addon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Navs ========================================================================
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
|
||||
.nav-link,
|
||||
.nav-link.active,
|
||||
.nav-link.active:focus,
|
||||
.nav-link.active:hover,
|
||||
.nav-item.open .nav-link,
|
||||
.nav-item.open .nav-link:focus,
|
||||
.nav-item.open .nav-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators ==================================================================
|
||||
|
||||
.close {
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border: none;
|
||||
color: $white;
|
||||
|
||||
a,
|
||||
.alert-link {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&-#{$color} {
|
||||
@if $enable-gradients {
|
||||
background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
|
||||
} @else {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars ===============================================================
|
||||
|
||||
// Containers ==================================================================
|
||||
|
||||
|
||||
.list-group-item-action {
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $gray-700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-group-item-heading {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
// Darkly 4.1.3
|
||||
// Bootswatch
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #ebebeb !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #999 !default;
|
||||
$gray-700: #444 !default;
|
||||
$gray-800: #303030 !default;
|
||||
$gray-900: #222 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #375a7f !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #E74C3C !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #F39C12 !default;
|
||||
$green: #00bc8c !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #3498DB !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-800 !default;
|
||||
$dark: $gray-500 !default;
|
||||
|
||||
$yiq-contrasted-threshold: 175 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #222233 !default;
|
||||
$body-color: $white !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: #AACCFF !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
$font-size-base: 0.9375rem !default;
|
||||
|
||||
$h1-font-size: 3rem !default;
|
||||
$h2-font-size: 2.5rem !default;
|
||||
$h3-font-size: 2rem !default;
|
||||
$text-muted: $gray-300 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-accent-bg: $gray-800 !default;
|
||||
|
||||
$table-border-color: $gray-700 !default;
|
||||
|
||||
$table-dark-bg: $gray-500 !default;
|
||||
$table-dark-border-color: darken($gray-500, 7.5%) !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-border-color: transparent !default;
|
||||
|
||||
$input-group-addon-color: $gray-500 !default;
|
||||
$input-group-addon-bg: $gray-700 !default;
|
||||
|
||||
$custom-file-color: $gray-500 !default;
|
||||
$custom-file-border-color: $gray-700 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: mix($body-bg, $white, 95%) !default;
|
||||
$dropdown-border-color: mix($body-bg, $white, 80%) !default;
|
||||
$dropdown-divider-bg: mix($body-bg, $white, 80%) !default;
|
||||
|
||||
$dropdown-link-color: $white !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-disabled-color: $gray-500 !default;
|
||||
$nav-divider-color: $gray-700 !default;
|
||||
$nav-tabs-border-color: $gray-700 !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
$nav-tabs-link-active-color: $white !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-dark-hover-color: $success !default;
|
||||
|
||||
$navbar-light-color: rgba($white,.5) !default;
|
||||
$navbar-light-hover-color: $white !default;
|
||||
$navbar-light-active-color: $white !default;
|
||||
$navbar-light-disabled-color: rgba($white,.3) !default;
|
||||
$navbar-light-toggler-border-color: rgba($white,.1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: lighten($body-bg, 5%) !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: mix($body-bg, $white, 80%) !default;
|
||||
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: lighten($body-bg, 15%) !default;
|
||||
$pagination-hover-border-color: mix($body-bg, $white, 80%) !default;
|
||||
|
||||
$pagination-active-bg: $pagination-hover-bg !default;
|
||||
$pagination-active-border-color: $pagination-hover-border-color !default;
|
||||
|
||||
$pagination-disabled-color: $white !default;
|
||||
$pagination-disabled-bg: darken($body-bg, 3%) !default;
|
||||
$pagination-disabled-border-color: darken($pagination-active-border-color, 3%) !default;
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-bg: $body-bg !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: lighten($body-bg, 5%) !default;
|
||||
$card-bg: lighten($body-bg, 1%) !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $gray-800 !default;
|
||||
|
||||
$popover-header-bg: $gray-700 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: mix($body-bg, $white, 95%) !default;
|
||||
$modal-content-border-color: mix($body-bg, $white, 80%) !default;
|
||||
|
||||
$modal-header-border-color: mix($body-bg, $white, 80%) !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 0.625rem !default;
|
||||
$progress-font-size: 0.625rem !default;
|
||||
$progress-bg: $gray-700 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $card-bg !default;
|
||||
$list-group-border-color: lighten($body-bg, 20%) !default;
|
||||
$list-group-action-active-bg: lighten($body-bg, 3%) !default;
|
||||
$list-group-hover-bg: lighten($body-bg, 5%) !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: $gray-700 !default;
|
||||
|
||||
// Close
|
||||
|
||||
$close-color: $white !default;
|
||||
$close-text-shadow: none !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$table-bg-active: #fafafa !default;
|
||||
$jumbotron-bg: #fff !default;
|
||||
|
|
@ -103,6 +103,6 @@ class UsersController < ApplicationController
|
|||
params[:user][:personal_access_token] = nil
|
||||
end
|
||||
|
||||
params.require(:user).permit(:personal_access_token, :refresh_interval)
|
||||
params.require(:user).permit(:personal_access_token, :refresh_interval, :theme)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -45,4 +45,9 @@ module ApplicationHelper
|
|||
elastic src-d alphagov vuejs rails algolia
|
||||
shopify WordPress golang)
|
||||
end
|
||||
|
||||
def current_theme
|
||||
current_user.try(:theme) || 'light'
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -198,9 +198,9 @@ module NotificationsHelper
|
|||
link_to root_path(path_params), class: (active ? "nav-link active filter #{link_class}" : "nav-link filter #{link_class}") do
|
||||
yield
|
||||
if active && not_repo_in_active_org(param)
|
||||
concat content_tag(:span, octicon('x', :height => 16), class: 'badge')
|
||||
concat content_tag(:span, octicon('x', :height => 16), class: 'badge badge-light')
|
||||
elsif count.present?
|
||||
concat content_tag(:span, count, class: 'badge')
|
||||
concat content_tag(:span, count, class: 'badge badge-light')
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<script>window.bugsnagClient = bugsnag({ apiKey: '<%= Rails.application.secrets.bugsnag_js_api_key %>', releaseStage: '<%= ENV["RAILS_ENV"] %>' })</script>
|
||||
<% end %>
|
||||
|
||||
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= stylesheet_link_tag current_theme, media: 'all', 'data-turbolinks-track': 'reload' %>
|
||||
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
|
||||
|
||||
<meta property="og:title" content="Octobox">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card-header sticky-top">
|
||||
<% if @notifications.to_a.any? %>
|
||||
<div class="per-page btn-group float-right d-none d-md-block" data-toggle="tooltip" data-placement="left" title="Notifications per page">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<button type="button" class="btn btn-sm btn-outline-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<%= @per_page %>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
<%= octicon 'three-bars', :height => 16 %>
|
||||
</button>
|
||||
<% if @notifications.to_a.any? %>
|
||||
<label class="btn btn-outline-light select-all mb-0" for="select_all">
|
||||
<label class="btn select-all mb-0" for="select_all">
|
||||
<input id="select_all" type="checkbox" class='js-select_all' aria-label='Select All'>
|
||||
</label>
|
||||
<%= select_all_button(@cur_selected, @total) %>
|
||||
<% end %>
|
||||
<%= link_to sync_notifications_path(filters.merge(async: Octobox.background_jobs_enabled?)), class: "btn btn-sm btn-outline-secondary btn-outline-dark js-sync #{'js-async' if Octobox.background_jobs_enabled?}", 'data-toggle' => 'tooltip', 'data-placement' => 'bottom', 'data-turbolinks' => false, 'data-animation' => 'false', 'data-position' => 'bottom', 'title' => 'Sync', 'aria-label' => 'Sync' do %>
|
||||
<%= link_to sync_notifications_path(filters.merge(async: Octobox.background_jobs_enabled?)), class: "btn btn-sm btn-outline-dark js-sync #{'js-async' if Octobox.background_jobs_enabled?}", 'data-toggle' => 'tooltip', 'data-placement' => 'bottom', 'data-turbolinks' => false, 'data-animation' => 'false', 'data-position' => 'bottom', 'title' => 'Sync', 'aria-label' => 'Sync' do %>
|
||||
<%= octicon 'sync', height: 16, class: "#{'spinning' if initial_sync? || current_user.syncing?}" %>
|
||||
<% end %>
|
||||
<%= archive_selected_button unless archive_selected? %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="container">
|
||||
<div class="container user-settings">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="pt-3">Settings</h1>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
Version:
|
||||
<%= link_to @latest_git_sha[0..6], Octobox.config.source_repo + "/commit/#{@latest_git_sha}", target: '_blank', rel: "noopener", title: "Current Git commit SHA" %>
|
||||
<%= link_to Octobox.config.source_repo + "/compare/#{@latest_git_sha}..master", target: '_blank', rel: "noopener", title: "Compare with latest commits on master" do %>
|
||||
<%= octicon 'git-compare', height: 16 %>
|
||||
<%= octicon 'git-compare', height: 16, class:'text-default' %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
|
@ -17,9 +17,8 @@
|
|||
</div>
|
||||
<hr>
|
||||
|
||||
<% if Octobox.refresh_interval_enabled? || Octobox.personal_access_tokens_enabled? %>
|
||||
|
||||
<%= form_for current_user do |f| %>
|
||||
<%= form_for current_user do |f| %>
|
||||
<% if Octobox.refresh_interval_enabled? || Octobox.personal_access_tokens_enabled? %>
|
||||
<% if Octobox.refresh_interval_enabled? %>
|
||||
<div class="card mb-3">
|
||||
<h5 class="card-header">
|
||||
|
|
@ -39,7 +38,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
||||
<% if Octobox.personal_access_tokens_enabled? %>
|
||||
|
|
@ -67,9 +65,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
<% end %>
|
||||
|
||||
<div class="card mb-3">
|
||||
<h5 class="card-header">
|
||||
Theme
|
||||
</h5>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<%= f.select :theme, [['Light', 'light'], ['Dark', 'dark']], {}, class: 'form-control w-25' %>
|
||||
</div>
|
||||
|
||||
<%= submit_tag 'Save', class: 'btn btn-primary' %>
|
||||
<%= link_to 'Cancel', root_path, class: 'btn btn-light' %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="card mb-3">
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
|
|||
|
||||
# Precompile additional assets.
|
||||
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
|
||||
# Rails.application.config.assets.precompile += %w( search.js )
|
||||
Rails.application.config.assets.precompile += %w( light.css dark.css )
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
class AddThemeToUsers < ActiveRecord::Migration[5.2]
|
||||
def change
|
||||
add_column :users, :theme, :string, default: 'light'
|
||||
end
|
||||
end
|
||||
|
|
@ -112,6 +112,7 @@ ActiveRecord::Schema.define(version: 2018_09_11_133519) do
|
|||
t.string "encrypted_app_token"
|
||||
t.string "encrypted_app_token_iv"
|
||||
t.string "sync_job_id"
|
||||
t.string "theme", default: "light"
|
||||
t.index ["api_token"], name: "index_users_on_api_token", unique: true
|
||||
t.index ["github_id"], name: "index_users_on_github_id", unique: true
|
||||
end
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче