Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-10 01:28:36 +02:00
Code Issues Projects Releases Wiki Activity

dark theme styling

Browse Source
This commit is contained in:
Kyle Spearrin 2018-05-31 15:45:03 -04:00
parent 324ea5114d
commit 8659cc96cb
4 changed files with 175 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/popup/scss/base.scss
View File

@ -120,11 +120,16 @@ content::-webkit-scrollbar-thumb {
} }
header { header {
background-color: $brand-primary;
min-height: 44px; min-height: 44px;
max-height: 44px; max-height: 44px;
color: white;
display: flex; display: flex;
border-bottom: 1px solid #000000;
@include themify($themes) {
color: themed('headerColor');
background-color: themed('headerBackgroundColor');
border-bottom-color: themed('headerBorderColor');
}
.left, .right { .left, .right {
flex: 1; flex: 1;
@ -147,9 +152,7 @@ header {
} }
app-pop-out > button, div > button, div > a { app-pop-out > button, div > button, div > a {
background: $brand-primary;
border: none; border: none;
color: white;
padding: 0 10px; padding: 0 10px;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -157,9 +160,16 @@ header {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@include themify($themes) {
color: themed('headerColor');
background-color: themed('headerBackgroundColor');
}
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.1); @include themify($themes) {
color: white; background-color: themed('headerBackgroundHoverColor');
color: themed('headerColor');
}
} }
&:focus { &:focus {
@ -198,26 +208,37 @@ header {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 20px; left: 20px;
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');
}
} }
} }
} }
@ -242,14 +263,18 @@ header {
.tabs { .tabs {
width: 100%; width: 100%;
height: 55px; height: 55px;
background-color: white; border-top: 1px solid #000000;
border-top: 1px solid $border-color-dark;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
overflow: hidden; overflow: hidden;
@include themify($themes) {
background-color: themed('tabBackgroundColor');
border-top-color: themed('borderColorDark');
}
ul { ul {
width: 100%; width: 100%;
list-style: none; list-style: none;
@ -268,14 +293,19 @@ header {
display: block; display: block;
padding: 7px 0; padding: 7px 0;
text-decoration: none; text-decoration: none;
color: $gray-light;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@include themify($themes) {
color: themed('mutedColor');
}
&:hover, &:focus { &:hover, &:focus {
background-color: $list-item-hover; @include themify($themes) {
background-color: themed('listItemBackgroundHoverColor');
}
} }
i { i {
@ -287,7 +317,9 @@ header {
&.active { &.active {
a { a {
color: $brand-primary; @include themify($themes) {
color: themed('primaryColor');
}
} }
} }
} }

127
src/popup/scss/box.scss
View File

@ -10,15 +10,22 @@
.box-header { .box-header {
margin: 0 10px 5px 10px; margin: 0 10px 5px 10px;
color: $gray-light;
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
@include themify($themes) {
color: themed('headingColor');
}
} }
.box-content { .box-content {
background: $box-background-color; border-top: 1px solid #000000;
border-top: 1px solid $border-color-dark; border-bottom: 1px solid #000000;
border-bottom: 1px solid $border-color-dark;
@include themify($themes) {
background-color: themed('boxBackgroundColor');
border-color: themed('borderColorDark');
}
&.box-content-padded { &.box-content-padded {
padding: 10px 15px; padding: 10px 15px;
@ -37,7 +44,11 @@
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) {
border-bottom-color: themed('boxBorderColor');
}
} }
&:last-child { &:last-child {
@ -54,7 +65,9 @@
} }
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
background-color: $box-background-hover-color; @include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
}
} }
&.pre { &.pre {
@ -64,20 +77,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 {
@ -109,8 +131,11 @@
> 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');
}
} }
} }
@ -122,14 +147,19 @@
&.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 {
@ -176,7 +206,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 {
@ -186,8 +218,11 @@
select { select {
width: 100%; width: 100%;
border: 1px solid darken($border-color-dark, 7%);
border-radius: $border-radius; border-radius: $border-radius;
@include themify($themes) {
border-color: themed('inputBorderColor');
}
} }
.action-buttons { .action-buttons {
@ -199,17 +234,26 @@
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');
}
} }
} }
@ -230,13 +274,18 @@
} }
.row-sub-icon, .row-sub-label + i.fa { .row-sub-icon, .row-sub-label + i.fa {
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');
}
} }
.icon { .icon {
@ -246,7 +295,10 @@
min-width: 34px; min-width: 34px;
height: 100%; height: 100%;
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;
@ -282,9 +334,12 @@
} }
.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;
@ -301,11 +356,15 @@
&.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');
}
} }
} }
} }
@ -326,28 +385,40 @@
.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');
}
} }
&.list { &.list {
.box-content { .box-content {
.box-content-row { .box-content-row {
padding: 3px 10px; padding: 3px 10px;
color: $text-color;
text-decoration: none; text-decoration: none;
@include themify($themes) {
color: themed('textColor');
}
&.padded { &.padded {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
background-color: $list-item-hover; @include themify($themes) {
background-color: themed('listItemBackgroundHoverColor');
}
} }
&:focus { &:focus {
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');
}
} }
.action-buttons { .action-buttons {

19
src/popup/scss/plugins.scss
View File

@ -99,6 +99,11 @@ $fa-font-path: "~font-awesome/fonts";
.swal-modal { .swal-modal {
border-radius: $border-radius; border-radius: $border-radius;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
color: themed('textColor');
}
.swal-icon { .swal-icon {
margin: 15px auto 0 auto; margin: 15px auto 0 auto;
} }
@ -129,12 +134,18 @@ $fa-font-path: "~font-awesome/fonts";
padding: 10px 10px 15px 10px; padding: 10px 10px 15px 10px;
margin: 0; margin: 0;
font-size: $font-size-large; font-size: $font-size-large;
color: $text-color;
@include themify($themes) {
color: themed('textColor');
}
} }
.swal-text { .swal-text {
color: $text-color;
font-size: $font-size-base; font-size: $font-size-base;
@include themify($themes) {
color: themed('textColor');
}
} }
.swal-footer { .swal-footer {
@ -143,6 +154,10 @@ $fa-font-path: "~font-awesome/fonts";
.swal-button { .swal-button {
@extend .btn; @extend .btn;
&:focus {
box-shadow: none;
}
} }
.swal-button--confirm { .swal-button--confirm {

26
src/popup/scss/variables.scss
View File

@ -39,26 +39,24 @@ $button-color-danger: darken($brand-danger, 10%);
$themes: ( $themes: (
light: ( light: (
textColor: $text-color, textColor: $text-color,
borderColor: $border-color,
borderColorDark: $border-color-dark, borderColorDark: $border-color-dark,
backgroundColor: $background-color, backgroundColor: $background-color,
backgroundColorAlt: $background-color-alt, backgroundColorAlt: #ffffff,
headerColor: #ffffff,
headerBackgroundColor: $brand-primary, headerBackgroundColor: $brand-primary,
headerBorderColor: darken($brand-primary, 7%), headerBackgroundHoverColor: rgba(255, 255, 255, 0.1),
headerBorderColor: $brand-primary,
headerInputBackgroundColor: darken($brand-primary, 8%), headerInputBackgroundColor: darken($brand-primary, 8%),
headerInputBackgroundFocusColor: darken($brand-primary, 10%), headerInputBackgroundFocusColor: darken($brand-primary, 10%),
headerInputColor: #ffffff, headerInputColor: #ffffff,
headerInputPlaceholderColor: lighten($brand-primary, 35%), headerInputPlaceholderColor: lighten($brand-primary, 35%),
listItemBackgroundColor: $background-color,
listItemBackgroundHoverColor: $list-item-hover, 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%), tabBackgroundColor: #ffffff,
disabledIconColor: $list-icon-color, disabledIconColor: $list-icon-color,
headingColor: $gray-light, headingColor: $gray-light,
headingButtonColor: lighten($gray-light, 30%),
headingButtonHoverColor: $gray-light,
labelColor: $gray-light, labelColor: $gray-light,
mutedColor: $text-muted, mutedColor: $text-muted,
totpStrokeColor: $brand-primary, totpStrokeColor: $brand-primary,
@ -82,26 +80,24 @@ $themes: (
), ),
dark: ( dark: (
textColor: #ffffff, textColor: #ffffff,
borderColor: #2f2f2f, borderColorDark: #111111,
borderColorDark: #2f2f2f, backgroundColor: #222222,
backgroundColor: #363636,
backgroundColorAlt: #3d3d3d, backgroundColorAlt: #3d3d3d,
boxBackgroundColor: #363636, boxBackgroundColor: #363636,
boxBackgroundHoverColor: #3f3f3f, boxBackgroundHoverColor: #3f3f3f,
boxBorderColor: #2f2f2f, boxBorderColor: #2f2f2f,
tabBackgroundColor: #3d3d3d,
headerColor: #ffffff,
headerBackgroundColor: #363636, headerBackgroundColor: #363636,
headerBorderColor: #272727, headerBackgroundHoverColor: #313131,
headerBorderColor: #111111,
headerInputBackgroundColor: #222222, headerInputBackgroundColor: #222222,
headerInputBackgroundFocusColor: #1d1d1d, headerInputBackgroundFocusColor: #1d1d1d,
headerInputColor: #ffffff, headerInputColor: #ffffff,
headerInputPlaceholderColor: #707070, headerInputPlaceholderColor: #707070,
listItemBackgroundColor: #363636,
listItemBackgroundHoverColor: #3c3c3c, listItemBackgroundHoverColor: #3c3c3c,
groupingsActiveColor: #292929,
disabledIconColor: #c7c7cd, disabledIconColor: #c7c7cd,
headingColor: #a3a3a3, headingColor: #a3a3a3,
headingButtonColor: #a3a3a3,
headingButtonHoverColor: #ffffff,
labelColor: #a3a3a3, labelColor: #a3a3a3,
mutedColor: #a3a3a3, mutedColor: #a3a3a3,
totpStrokeColor: #cacaca, totpStrokeColor: #cacaca,