mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-10 01:28:36 +02:00
start styling for dark theme
This commit is contained in:
parent
68a696e86f
commit
db06b60704
@ -495,7 +495,7 @@
|
||||
"message": "Theme"
|
||||
},
|
||||
"themeDesc": {
|
||||
"message": "Change the application's color theme. You must re-open the window."
|
||||
"message": "Change the application's color theme."
|
||||
},
|
||||
"dark": {
|
||||
"message": "Dark",
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div class="center-content">
|
||||
<div class="content">
|
||||
<img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
|
||||
<img alt="Bitwarden" class="img-responsive logo-image" />
|
||||
<p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
|
||||
<a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
|
||||
|
BIN
src/popup/images/logo-dark@2x.png
Normal file
BIN
src/popup/images/logo-dark@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.1 KiB |
BIN
src/popup/images/logo-white@2x.png
Normal file
BIN
src/popup/images/logo-white@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
Before Width: | Height: | Size: 8.2 KiB |
@ -7,10 +7,8 @@
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: $background-color;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color;
|
||||
line-height: $line-height-base;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@ -19,6 +17,13 @@ body {
|
||||
width: 375px !important;
|
||||
height: 600px !important;
|
||||
overflow: hidden;
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
|
||||
&.body-sm {
|
||||
width: 375px !important;
|
||||
@ -38,7 +43,10 @@ body {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
color: $text-color;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -54,16 +62,24 @@ img {
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken($brand-primary, 6%);
|
||||
@include themify($themes) {
|
||||
color: darken(themed('primaryColor'), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
color: $text-color;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor');
|
||||
background-color: themed('inputBackgroundColor');
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
@ -293,7 +309,10 @@ content {
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: $background-color;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
}
|
||||
|
||||
&.no-header {
|
||||
top: 0;
|
||||
@ -319,6 +338,9 @@ content {
|
||||
|
||||
.fa {
|
||||
margin-bottom: 10px;
|
||||
color: $list-icon-color;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('disabledIconColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,44 +1,62 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.btn {
|
||||
background-color: $button-background-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 7px 15px;
|
||||
border: 1px solid $button-border-color;
|
||||
border: 1px solid #000000;
|
||||
font-size: $font-size-base;
|
||||
color: $button-color;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('buttonBackgroundColor');
|
||||
border-color: themed('buttonBorderColor');
|
||||
color: themed('buttonColor');
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: $button-color-primary;
|
||||
@include themify($themes) {
|
||||
color: themed('buttonPrimaryColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $button-color-danger;
|
||||
@include themify($themes) {
|
||||
color: themed('buttonDangerColor');
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
cursor: pointer;
|
||||
background-color: darken($button-background-color, 1.5%);
|
||||
border-color: darken($button-border-color, 17%);
|
||||
color: darken($button-color, 10%);
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed('buttonBackgroundColor'), 1.5%);
|
||||
border-color: darken(themed('buttonBorderColor'), 17%);
|
||||
color: darken(themed('buttonColor'), 10%);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: darken($button-color-primary, 6%);
|
||||
@include themify($themes) {
|
||||
color: darken(themed('buttonPrimaryColor'), 6%);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: darken($button-color-danger, 6%);
|
||||
@include themify($themes) {
|
||||
color: darken(themed('buttonDangerColor'), 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]) {
|
||||
cursor: pointer;
|
||||
background-color: darken($button-background-color, 6%);
|
||||
border-color: darken($button-border-color, 25%);
|
||||
outline: 0;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: darken(themed('buttonBackgroundColor'), 6%);
|
||||
border-color: darken(themed('buttonBorderColor'), 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
@ -1,14 +1,5 @@
|
||||
@import "variables.scss";
|
||||
|
||||
/*
|
||||
html.browser_firefox, html.browser_edge {
|
||||
body {
|
||||
width: 320px !important;
|
||||
height: 568px !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
html.browser_safari {
|
||||
header {
|
||||
.search .fa {
|
||||
|
@ -5,35 +5,45 @@ small, .small {
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: $brand-danger !important;
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $brand-success !important;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: $brand-info !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: $brand-warning !important;
|
||||
@include themify($themes) {
|
||||
color: themed('successColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted !important;
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-default {
|
||||
color: $text-color !important;
|
||||
@include themify($themes) {
|
||||
color: themed('textColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: $brand-primary-accent;
|
||||
.text-danger {
|
||||
@include themify($themes) {
|
||||
color: themed('dangerColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-info {
|
||||
@include themify($themes) {
|
||||
color: themed('infoColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
@include themify($themes) {
|
||||
color: themed('warningColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@ -126,8 +136,18 @@ app-root > #loading {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: $text-muted;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
app-vault-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
@include themify($themes) {
|
||||
content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
|
||||
}
|
||||
}
|
||||
|
@ -27,7 +27,7 @@ app-home {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 282px;
|
||||
width: 284px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -40,19 +40,25 @@ app-home {
|
||||
}
|
||||
|
||||
a.settings-icon {
|
||||
color: #bbbbbb;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('primaryColor');
|
||||
}
|
||||
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
|
@ -45,7 +45,10 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
&.toast-danger, &.toast-error {
|
||||
background-image: none !important;
|
||||
background-color: $brand-danger;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('dangerColor');
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f0e7";
|
||||
@ -55,7 +58,10 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
&.toast-warning {
|
||||
background-image: none !important;
|
||||
background-color: $brand-warning;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('warningColor');
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f071";
|
||||
@ -64,7 +70,10 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
&.toast-info {
|
||||
background-image: none !important;
|
||||
background-color: $brand-info;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('infoColor');
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f05a";
|
||||
@ -73,7 +82,10 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
&.toast-success {
|
||||
background-image: none !important;
|
||||
background-color: $brand-success;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('successColor');
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f00C";
|
||||
|
@ -78,6 +78,7 @@ $themes: (
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: 'dark',
|
||||
),
|
||||
dark: (
|
||||
textColor: #ffffff,
|
||||
@ -95,7 +96,7 @@ $themes: (
|
||||
headerInputColor: #ffffff,
|
||||
headerInputPlaceholderColor: #707070,
|
||||
listItemBackgroundColor: #363636,
|
||||
listItemBackgroundHoverColor: #464646,
|
||||
listItemBackgroundHoverColor: #3c3c3c,
|
||||
groupingsActiveColor: #292929,
|
||||
disabledIconColor: #c7c7cd,
|
||||
headingColor: #a3a3a3,
|
||||
@ -111,7 +112,7 @@ $themes: (
|
||||
inputPlaceholderColor: #707070,
|
||||
buttonBackgroundColor: #363636,
|
||||
buttonBorderColor: #1f1f1f,
|
||||
buttonColor: #ffffff,
|
||||
buttonColor: #e0e0e0,
|
||||
buttonPrimaryColor: #46ace7,
|
||||
buttonDangerColor: #ff3e24,
|
||||
primaryColor: #52bdfb,
|
||||
@ -120,6 +121,7 @@ $themes: (
|
||||
successColor: $brand-success,
|
||||
infoColor: $brand-info,
|
||||
warningColor: $brand-warning,
|
||||
logoSuffix: 'white',
|
||||
),
|
||||
);
|
||||
|
||||
|
@ -105,6 +105,7 @@ export class OptionsComponent implements OnInit {
|
||||
async saveTheme() {
|
||||
await this.storageService.save(ConstantsService.themeKey, this.theme);
|
||||
this.analytics.eventTrack.next({ action: 'Set Theme ' + this.theme });
|
||||
window.setTimeout(() => window.location.reload(), 200);
|
||||
}
|
||||
|
||||
private callAnalytics(name: string, enabled: boolean) {
|
||||
|
Loading…
Reference in New Issue
Block a user