bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 01:03:35 +00:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

88
src/scss/vault.scss
View File

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