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