Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00
Code Issues Projects Releases Wiki Activity

dark theme styles

Browse Source
This commit is contained in:
Kyle Spearrin 2018-05-30 15:21:41 -04:00
parent a0b59ab9bd
commit 829d0f22cc
11 changed files with 358 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/scss/base.scss
View File

@ -8,16 +8,24 @@
html, body { html, body {
height: 100%; height: 100%;
background-color: $background-color-alt2;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color;
line-height: $line-height-base; line-height: $line-height-base;
} }
body {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColorAlt2');
}
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
color: $text-color;
@include themify($themes) {
color: themed('textColor');
}
} }
p { p {
@ -36,13 +44,22 @@ a {
color: $brand-primary; color: $brand-primary;
text-decoration: none; text-decoration: none;
@include themify($themes) {
color: themed('primaryColor');
}
&:hover, &:focus { &:hover, &:focus {
color: darken($brand-primary, 6%); @include themify($themes) {
color: darken(themed('primaryColor'), 6%);
}
} }
} }
input, select, textarea { input, select, textarea {
color: $text-color; @include themify($themes) {
color: themed('textColor');
background-color: themed('inputBackgroundColor');
}
} }
input, select, textarea, button { input, select, textarea, button {

83
src/scss/box.scss
View File

@ -5,21 +5,26 @@
.box-header { .box-header {
margin: 0 10px 5px 10px; margin: 0 10px 5px 10px;
color: $gray-light;
text-transform: uppercase; text-transform: uppercase;
@include themify($themes) {
color: themed('headingColor');
}
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: $gray-light;
text-transform: uppercase; text-transform: uppercase;
@include themify($themes) {
color: themed('headingColor');
}
} }
} }
.box-content { .box-content {
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
background-color: $box-background-color;
@include themify($themes) { @include themify($themes) {
background-color: themed('boxBackgroundColor'); background-color: themed('boxBackgroundColor');
@ -42,7 +47,7 @@
bottom: 0; bottom: 0;
height: 1px; height: 1px;
width: calc(100% - 10px); width: calc(100% - 10px);
border-bottom: 1px solid $box-border-color; border-bottom: 1px solid #000000;
@include themify($themes) { @include themify($themes) {
border-bottom-color: themed('boxBorderColor'); border-bottom-color: themed('boxBorderColor');
@ -67,8 +72,6 @@
} }
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
background-color: $box-background-hover-color;
@include themify($themes) { @include themify($themes) {
background-color: themed('boxBackgroundHoverColor'); background-color: themed('boxBackgroundHoverColor');
} }
@ -81,20 +84,29 @@
.row-label, label { .row-label, label {
font-size: $font-size-small; font-size: $font-size-small;
color: $text-muted;
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: 5px; margin-bottom: 5px;
@include themify($themes) {
color: themed('mutedColor');
}
} }
.text, .detail { .text, .detail {
display: block; display: block;
color: $text-color;
@include themify($themes) {
color: themed('textColor');
}
} }
.detail { .detail {
font-size: $font-size-small; font-size: $font-size-small;
color: $text-muted;
@include themify($themes) {
color: themed('mutedColor');
}
} }
.img-right { .img-right {
@ -126,22 +138,30 @@
> a { > a {
padding: 8px 8px 8px 4px; padding: 8px 8px 8px 4px;
color: $brand-danger;
margin: 0; margin: 0;
@include themify($themes) {
color: themed('dangerColor');
}
} }
} }
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
label, .row-label { label, .row-label {
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color;
display: inline; display: inline;
width: initial; width: initial;
margin-bottom: 0; margin-bottom: 0;
@include themify($themes) {
color: themed('textColor');
}
} }
> span { > span {
color: $text-muted; @include themify($themes) {
color: themed('mutedColor');
}
} }
> input { > input {
@ -188,7 +208,9 @@
background-color: transparent; background-color: transparent;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: lighten($gray-light, 35%); @include themify($themes) {
color: themed('inputPlaceholderColor');
}
} }
&:focus { &:focus {
@ -198,8 +220,11 @@
select { select {
width: 100%; width: 100%;
border: 1px solid darken($border-color-dark, 7%); border: 1px solid #000000;
border-radius: $border-radius; border-radius: $border-radius;
@include themify($themes) {
border-color: themed('inputBorderColor');
}
} }
.action-buttons { .action-buttons {
@ -211,17 +236,25 @@
padding: 10px 8px; padding: 10px 8px;
background: none; background: none;
border: none; border: none;
color: $brand-primary; @include themify($themes) {
color: themed('boxRowButtonColor');
}
&:hover, &:focus { &:hover, &:focus {
color: darken($brand-primary, 10%); @include themify($themes) {
color: themed('boxRowButtonHoverColor');
}
} }
&.disabled { &.disabled {
color: $list-icon-color; @include themify($themes) {
color: themed('disabledIconColor');
}
&:hover { &:hover {
color: $list-icon-color; @include themify($themes) {
color: themed('disabledIconColor');
}
} }
} }
@ -242,13 +275,18 @@
} }
.row-sub-icon { .row-sub-icon {
color: $list-icon-color; @include themify($themes) {
color: themed('disabledIconColor');
}
} }
.row-sub-label { .row-sub-label {
margin: 0 15px; margin: 0 15px;
color: $gray-light;
white-space: nowrap; white-space: nowrap;
@include themify($themes) {
color: themed('mutedColor');
}
} }
} }
@ -267,6 +305,9 @@
.box-footer { .box-footer {
margin: 5px 10px; margin: 5px 10px;
font-size: $font-size-small; font-size: $font-size-small;
color: $text-muted;
@include themify($themes) {
color: themed('mutedColor');
}
} }
} }

42
src/scss/buttons.scss
View File

@ -1,44 +1,62 @@
@import "variables.scss"; @import "variables.scss";
.btn, #vault .footer button, .modal-footer button { .btn, #vault .footer button, .modal-footer button {
background-color: $button-backgound-color;
border-radius: $border-radius; border-radius: $border-radius;
padding: 7px 15px; padding: 7px 15px;
border: 1px solid $button-border-color; border: 1px solid #000000;
font-size: $font-size-base; font-size: $font-size-base;
color: $button-color;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@include themify($themes) {
background-color: themed('buttonBackgroundColor');
border-color: themed('buttonBorderColor');
color: themed('buttonColor');
}
&.primary { &.primary {
color: $button-color-primary; @include themify($themes) {
color: themed('buttonPrimaryColor');
}
} }
&.danger { &.danger {
color: $button-color-danger; @include themify($themes) {
color: themed('buttonDangerColor');
}
} }
&:hover:not([disabled]) { &:hover:not([disabled]) {
cursor: pointer; cursor: pointer;
background-color: darken($button-backgound-color, 1.5%);
border-color: darken($button-border-color, 17%); @include themify($themes) {
color: darken($button-color, 10%); background-color: darken(themed('buttonBackgroundColor'), 1.5%);
border-color: darken(themed('buttonBorderColor'), 17%);
color: darken(themed('buttonColor'), 10%);
}
&.primary { &.primary {
color: darken($button-color-primary, 6%); @include themify($themes) {
color: darken(themed('buttonPrimaryColor'), 6%);
}
} }
&.danger { &.danger {
color: darken($button-color-danger, 6%); @include themify($themes) {
color: darken(themed('buttonDangerColor'), 6%);
}
} }
} }
&:focus:not([disabled]) { &:focus:not([disabled]) {
cursor: pointer; cursor: pointer;
background-color: darken($button-backgound-color, 6%);
border-color: darken($button-border-color, 25%);
outline: 0; outline: 0;
@include themify($themes) {
background-color: darken(themed('buttonBackgroundColor'), 6%);
border-color: darken(themed('buttonBorderColor'), 25%);
}
} }
&[disabled] { &[disabled] {

6
src/scss/environment.scss
View File

@ -2,6 +2,10 @@
html.os_windows { html.os_windows {
body { body {
border-top: 1px solid $border-color-dark; border-top: 1px solid #000000;
@include themify($themes) {
border-top-color: themed('borderColorDark');
}
} }
} }

44
src/scss/list.scss
View File

@ -3,12 +3,15 @@
.list > a { .list > a {
display: block; display: block;
padding: 3px 10px; padding: 3px 10px;
background-color: white;
text-decoration: none; text-decoration: none;
color: $text-color;
position: relative; position: relative;
z-index: 1; z-index: 1;
@include themify($themes) {
color: themed('textColor');
background-color: themed('listItemBackgroundColor');
}
&:after { &:after {
content: ""; content: "";
display: table; display: table;
@ -22,7 +25,11 @@
bottom: 0; bottom: 0;
height: 1px; height: 1px;
width: calc(100% - 10px); width: calc(100% - 10px);
border-bottom: 1px solid $border-color; border-bottom: 1px solid #000000;
@include themify($themes) {
border-bottom-color: themed('borderColor');
}
} }
&:last-child:before { &:last-child:before {
@ -31,17 +38,27 @@
} }
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
background-color: $list-item-hover; @include themify($themes) {
background-color: themed('listItemBackgroundHoverColor');
}
} }
&.active { &.active {
border-left: 5px solid $brand-primary; border-left: 5px solid #000000;
padding-left: 5px; padding-left: 5px;
@include themify($themes) {
border-left-color: themed('primaryColor');
}
} }
&:focus:not(.active) { &:focus:not(.active) {
border-left: 5px solid $text-muted; border-left: 5px solid #000000;
padding-left: 5px; padding-left: 5px;
@include themify($themes) {
border-left-color: themed('mutedColor');
}
} }
.text, .detail { .text, .detail {
@ -49,12 +66,18 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: block;
color: $text-color;
@include themify($themes) {
color: themed('textColor');
}
} }
.detail { .detail {
font-size: $font-size-small; font-size: $font-size-small;
color: $gray-light;
@include themify($themes) {
color: themed('mutedColor');
}
} }
.icon { .icon {
@ -65,7 +88,10 @@
height: 36px; height: 36px;
width: 34px; width: 34px;
margin-left: -5px; margin-left: -5px;
color: $text-muted;
@include themify($themes) {
color: themed('mutedColor');
}
img { img {
border-radius: $border-radius; border-radius: $border-radius;

45
src/scss/misc.scss
View File

@ -5,19 +5,27 @@ small {
} }
.text-primary { .text-primary {
color: $brand-primary !important; @include themify($themes) {
color: themed('primaryColor') !important;
}
} }
.text-success { .text-success {
color: $brand-success !important; @include themify($themes) {
color: themed('successColor') !important;
}
} }
.text-muted { .text-muted {
color: $text-muted !important; @include themify($themes) {
color: themed('mutedColor') !important;
}
} }
.text-default { .text-default {
color: $text-color !important; @include themify($themes) {
color: themed('textColor') !important;
}
} }
.text-center { .text-center {
@ -79,9 +87,12 @@ p.lead {
} }
.totp-circle { .totp-circle {
stroke: $brand-primary;
fill: none; fill: none;
@include themify($themes) {
stroke: themed('totpStrokeColor');
}
&.inner { &.inner {
stroke-width: 3; stroke-width: 3;
stroke-dasharray: 78.6; stroke-dasharray: 78.6;
@ -98,11 +109,15 @@ p.lead {
&.low { &.low {
.totp-sec, .totp-code { .totp-sec, .totp-code {
color: $brand-danger; @include themify($themes) {
color: themed('dangerColor');
}
} }
.totp-circle { .totp-circle {
stroke: $brand-danger; @include themify($themes) {
stroke: themed('dangerColor');
}
} }
} }
} }
@ -148,9 +163,13 @@ form, .form {
} }
input, select, textarea { input, select, textarea {
border: 1px solid darken($border-color-dark, 7%); border: 1px solid #000000;
border-radius: $border-radius; border-radius: $border-radius;
display: block; display: block;
@include themify($themes) {
border-color: themed('inputBorderColor');
}
} }
} }
@ -172,8 +191,11 @@ form, .form {
.help-block { .help-block {
margin-top: 3px; margin-top: 3px;
color: $text-muted;
display: block; display: block;
@include themify($themes) {
color: themed('mutedColor');
}
} }
} }
@ -184,5 +206,8 @@ app-root > #loading {
align-items: center; align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
color: $text-muted;
@include themify($themes) {
color: themed('mutedColor');
}
} }

17
src/scss/modal.scss
View File

@ -20,7 +20,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default; $modal-title-line-height: $line-height-base !default;
$modal-content-bg: $background-color-alt !default; //$modal-content-bg: $background-color-alt !default;
$modal-content-border-color: rgba($black, .2) !default; $modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: 1px !default; $modal-content-border-width: 1px !default;
$modal-content-box-shadow-xs: none; $modal-content-box-shadow-xs: none;
@ -157,7 +157,7 @@ $close-text-shadow: 0 1px 0 $white !default;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog // counteract the pointer-events: none; in the .modal-dialog
pointer-events: auto; pointer-events: auto;
background-color: $modal-content-bg; //background-color: $modal-content-bg;
background-clip: padding-box; background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color; border: $modal-content-border-width solid $modal-content-border-color;
//@include border-radius($border-radius-lg); //@include border-radius($border-radius-lg);
@ -166,6 +166,10 @@ $close-text-shadow: 0 1px 0 $white !default;
box-shadow: $modal-content-box-shadow-xs; box-shadow: $modal-content-box-shadow-xs;
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: 0; outline: 0;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
}
} }
// Modal background // Modal background
@ -198,6 +202,10 @@ $close-text-shadow: 0 1px 0 $white !default;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
//@include border-top-radius($border-radius-lg); //@include border-top-radius($border-radius-lg);
@include themify($themes) {
border-bottom-color: themed('borderColorDark');
}
.close { .close {
padding: $modal-header-padding $modal-inner-padding; padding: $modal-header-padding $modal-inner-padding;
// auto on the left force icon to the right even when there is no .modal-title // auto on the left force icon to the right even when there is no .modal-title
@ -239,6 +247,11 @@ $close-text-shadow: 0 1px 0 $white !default;
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding; padding: $modal-inner-padding;
border-top: $modal-footer-border-width solid $modal-footer-border-color; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include themify($themes) {
border-top-color: themed('borderColorDark');
}
// Easily place margin between footer elements // Easily place margin between footer elements
button { button {
margin-right: 10px; margin-right: 10px;

5
src/scss/pages.scss
View File

@ -100,9 +100,12 @@
} }
&:hover, &:focus { &:hover, &:focus {
color: $brand-primary;
text-decoration: none; text-decoration: none;
@include themify($themes) {
color: themed('primaryColor');
}
span { span {
visibility: visible; visibility: visible;
} }

20
src/scss/plugins.scss
View File

@ -37,7 +37,10 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-danger, &.toast-error { &.toast-danger, &.toast-error {
background-image: none !important; background-image: none !important;
background-color: $brand-danger;
@include themify($themes) {
background-color: themed('dangerColor');
}
&:before { &:before {
content: "\f0e7"; content: "\f0e7";
@ -47,7 +50,10 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-warning { &.toast-warning {
background-image: none !important; background-image: none !important;
background-color: $brand-warning;
@include themify($themes) {
background-color: themed('warningColor');
}
&:before { &:before {
content: "\f071"; content: "\f071";
@ -56,7 +62,10 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-info { &.toast-info {
background-image: none !important; background-image: none !important;
background-color: $brand-info;
@include themify($themes) {
background-color: themed('infoColor');
}
&:before { &:before {
content: "\f05a"; content: "\f05a";
@ -65,7 +74,10 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-success { &.toast-success {
background-image: none !important; background-image: none !important;
background-color: $brand-success;
@include themify($themes) {
background-color: themed('successColor');
}
&:before { &:before {
content: "\f00C"; content: "\f00C";

80
src/scss/variables.scss
View File

@ -31,7 +31,7 @@ $box-background-hover-color: $list-item-hover;
$box-border-color: $border-color; $box-border-color: $border-color;
$button-border-color: darken($border-color-dark, 12%); $button-border-color: darken($border-color-dark, 12%);
$button-backgound-color: white; $button-background-color: white;
$button-color: lighten($text-color, 40%); $button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%); $button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%); $button-color-danger: darken($brand-danger, 10%);
@ -44,20 +44,82 @@ $themes: (
backgroundColor: $background-color, backgroundColor: $background-color,
backgroundColorAlt: $background-color-alt, backgroundColorAlt: $background-color-alt,
backgroundColorAlt2: $background-color-alt2, backgroundColorAlt2: $background-color-alt2,
headerBackgroundColor: $brand-primary,
headerInputBackgroundColor: darken($brand-primary, 8%),
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
headerInputColor: #ffffff,
headerInputPlaceholderColor: lighten($brand-primary, 35%),
listItemBackgroundColor: $background-color,
listItemBackgroundHoverColor: $list-item-hover,
boxBackgroundColor: $box-background-color, boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color, boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color, boxBorderColor: $box-border-color,
groupingsActiveColor: darken($background-color-alt, 5%),
disabledIconColor: $list-icon-color,
headingColor: $gray-light,
headingButtonColor: lighten($gray-light, 30%),
headingButtonHoverColor: $gray-light,
labelColor: $gray-light,
mutedColor: $text-muted,
totpStrokeColor: $brand-primary,
boxRowButtonColor: $brand-primary,
boxRowButtonHoverColor: darken($brand-primary, 10%),
inputBorderColor: darken($border-color-dark, 7%),
inputBackgroundColor: #ffffff,
inputPlaceholderColor: lighten($gray-light, 35%),
buttonBackgroundColor: $button-background-color,
buttonBorderColor: $button-border-color,
buttonColor: $button-color,
buttonPrimaryColor: $button-color-primary,
buttonDangerColor: $button-color-danger,
primaryColor: $brand-primary,
primaryAccentColor: $brand-primary-accent,
dangerColor: $brand-danger,
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
), ),
dark: ( dark: (
textColor: #ffffff, textColor: #ffffff,
borderColor: #000000, borderColor: #2f2f2f,
borderColorDark: #000000, borderColorDark: #2f2f2f,
backgroundColor: #5f5f5f, backgroundColor: #363636,
backgroundColorAlt: #5f5f5f, backgroundColorAlt: #3d3d3d,
backgroundColorAlt2: #5f5f5f, backgroundColorAlt2: #222222,
boxBackgroundColor: #5f5f5f, boxBackgroundColor: #363636,
boxBackgroundHoverColor: #707070, boxBackgroundHoverColor: #3f3f3f,
boxBorderColor: #000000, boxBorderColor: #2f2f2f,
headerBackgroundColor: #363636,
headerInputBackgroundColor: #222222,
headerInputBackgroundFocusColor: #1d1d1d,
headerInputColor: #ffffff,
headerInputPlaceholderColor: #707070,
listItemBackgroundColor: #363636,
listItemBackgroundHoverColor: #464646,
groupingsActiveColor: #292929,
disabledIconColor: #c7c7cd,
headingColor: #a3a3a3,
headingButtonColor: #a3a3a3,
headingButtonHoverColor: #ffffff,
labelColor: #a3a3a3,
mutedColor: #a3a3a3,
totpStrokeColor: #cacaca,
boxRowButtonColor: #cacaca,
boxRowButtonHoverColor: #ffffff,
inputBorderColor: #222222,
inputBackgroundColor: #363636,
inputPlaceholderColor: #707070,
buttonBackgroundColor: #363636,
buttonBorderColor: #1f1f1f,
buttonColor: #ffffff,
buttonPrimaryColor: #52bdfb,
buttonDangerColor: #ff3e24,
primaryColor: #52bdfb,
primaryAccentColor: #3ea1da,
dangerColor: #ff3e24,
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
), ),
); );

88
src/scss/vault.scss
View File

@ -17,8 +17,7 @@
width: 22%; width: 22%;
min-width: 175px; min-width: 175px;
max-width: 250px; max-width: 250px;
background-color: $background-color-alt; border-right: 1px solid #000000;
border-right: 1px solid $border-color-dark;
@include themify($themes) { @include themify($themes) {
background-color: themed('backgroundColorAlt'); background-color: themed('backgroundColorAlt');
@ -31,22 +30,30 @@
} }
h2 { h2 {
color: $gray-light;
text-transform: uppercase; text-transform: uppercase;
font-size: $font-size-base; font-size: $font-size-base;
font-weight: normal; font-weight: normal;
margin-bottom: 5px; margin-bottom: 5px;
display: flex; display: flex;
@include themify($themes) {
color: themed('headingColor');
}
button { button {
margin-left: auto; margin-left: auto;
background: none; background: none;
border: none; border: none;
color: lighten($gray-light, 30%); @include themify($themes) {
color: themed('headingButtonColor');
}
&:hover, &:focus { &:hover, &:focus {
color: $gray-light;
cursor: pointer; cursor: pointer;
@include themify($themes) {
color: themed('headingButtonHoverColor');
}
} }
} }
} }
@ -83,17 +90,25 @@
li { li {
a { a {
padding: 5px 0; padding: 5px 0;
color: $text-color;
display: flex; display: flex;
align-items: center; align-items: center;
@include themify($themes) {
color: themed('textColor');
}
span { span {
visibility: hidden; visibility: hidden;
margin-left: auto; margin-left: auto;
color: lighten($gray-light, 30%);
@include themify($themes) {
&:hover { color: themed('headingButtonColor');
color: $text-muted; }
&:hover, &:focus {
@include themify($themes) {
color: themed('headingButtonHoverColor');
}
} }
} }
@ -105,11 +120,14 @@
} }
&.active { &.active {
background-color: darken($background-color-alt, 5%);
margin-left: -15px; margin-left: -15px;
margin-right: -5px; margin-right: -5px;
padding-left: 15px; padding-left: 15px;
padding-right: 5px; padding-right: 5px;
@include themify($themes) {
background-color: themed('groupingsActiveColor');
}
} }
} }
} }
@ -119,8 +137,7 @@
width: 28%; width: 28%;
min-width: 200px; min-width: 200px;
max-width: 350px; max-width: 350px;
background-color: $background-color; border-right: 1px solid #000000;
border-right: 1px solid $border-color-dark;
@include themify($themes) { @include themify($themes) {
background-color: themed('backgroundColor'); background-color: themed('backgroundColor');
@ -138,7 +155,10 @@
.fa { .fa {
margin-bottom: 10px; margin-bottom: 10px;
color: $list-icon-color;
@include themify($themes) {
color: themed('disabledIconColor');
}
} }
} }
} }
@ -146,8 +166,7 @@
> #details { > #details {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
background-color: $background-color-alt2;
@include themify($themes) { @include themify($themes) {
background-color: themed('backgroundColorAlt2'); background-color: themed('backgroundColorAlt2');
} }
@ -208,12 +227,16 @@
.header { .header {
min-height: 44px; min-height: 44px;
max-height: 44px; max-height: 44px;
background-color: $brand-primary;
flex: 0 0 auto; flex: 0 0 auto;
border-bottom: 1px solid darken($brand-primary, 7%); border-bottom: 1px solid #000000;
display: flex; display: flex;
align-items: center; align-items: center;
@include themify($themes) {
background-color: themed('headerBackgroundColor');
border-bottom-color: darken(themed('headerBackgroundColor'), 7%);
}
&.header-search { &.header-search {
.search { .search {
padding: 0 7px; padding: 0 7px;
@ -225,26 +248,37 @@
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 15px; left: 15px;
color: lighten($brand-primary, 30%);
@include themify($themes) {
color: themed('headerInputPlaceholderColor');
}
} }
input { input {
width: 100%; width: 100%;
margin: 0; margin: 0;
background: darken($brand-primary, 8%);
border: none; border: none;
color: white;
padding: 5px 10px 5px 30px; padding: 5px 10px 5px 30px;
border-radius: $border-radius; border-radius: $border-radius;
@include themify($themes) {
background-color: themed('headerInputBackgroundColor');
color: themed('headerInputColor');
}
&:focus { &:focus {
border-radius: $border-radius; border-radius: $border-radius;
outline: none; outline: none;
background: darken($brand-primary, 10%);
@include themify($themes) {
background-color: themed('headerInputBackgroundFocusColor');
}
} }
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: lighten($brand-primary, 35%); @include themify($themes) {
color: themed('headerInputPlaceholderColor');
}
} }
} }
} }
@ -260,13 +294,17 @@
.footer { .footer {
height: 50px; height: 50px;
background-color: $background-color-alt;
flex: 0 0 auto; flex: 0 0 auto;
border-top: 1px solid $border-color-dark; border-top: 1px solid #000000;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 15px; padding: 0 15px;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
border-top-color: themed('borderColorDark');
}
button { button {
margin-right: 10px; margin-right: 10px;