1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-06 09:20:43 +01:00

Theme Support with a Dark Mode (#974)

* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

Missed the swal2 styling and improved the table theming

* Icon styling

* Fix theme not saving

* Update English

Remove colour to make it more translatable between English and American

* Update messages.json

* Login logo

* dropdown and login logo

* btn-link and totp fix

Added a border for extra readability on the btn-link

* Organisation Styling

* Update messages.json

* Update webauthn-fallback.ts

Add missing semicolon and enable console.error bypass for tslint

* Fix contrast issues

Update the blue to match the browser extension and lighten the grey for text-muted variable

* Add Paypal Container and Loading svg file

* Update jslib

* Password Generator contrast fix
This commit is contained in:
Danny Murphy 2021-06-02 19:38:04 +01:00 committed by GitHub
parent 1bacc8b774
commit cf24113924
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 510 additions and 114 deletions

View File

@ -1,7 +1,7 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate> <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
<div class="row justify-content-md-center mt-5"> <div class="row justify-content-md-center mt-5">
<div class="col-5"> <div class="col-5">
<img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden"> <div id="loginLogo" class="logo mb-2" alt="Bitwarden"></div>
<p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p> <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
<div class="card d-block"> <div class="card d-block">
<div class="card-body"> <div class="card-body">

View File

@ -167,11 +167,18 @@ export function initFactory(): Function {
authService.init(); authService.init();
const htmlEl = window.document.documentElement; const htmlEl = window.document.documentElement;
htmlEl.classList.add('locale_' + i18nService.translationLocale); htmlEl.classList.add('locale_' + i18nService.translationLocale);
let theme = await storageService.get<string>(ConstantsService.themeKey); const theme = await storageService.get<string>(ConstantsService.themeKey);
if (theme == null) { if (theme == null) {
theme = 'light'; htmlEl.classList.add('themeDefaultSet');
} else {
htmlEl.classList.add(theme);
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches && htmlEl.classList.contains('themeDefaultSet')) {
htmlEl.classList.add('themeDark');
}
if (window.matchMedia('(prefers-color-scheme: light)').matches && htmlEl.classList.contains('themeDefaultSet')) {
htmlEl.classList.add('themeLight');
} }
htmlEl.classList.add('theme_' + theme);
stateService.save(ConstantsService.disableFaviconKey, stateService.save(ConstantsService.disableFaviconKey,
await storageService.get<boolean>(ConstantsService.disableFaviconKey)); await storageService.get<boolean>(ConstantsService.disableFaviconKey));
stateService.save('enableGravatars', await storageService.get<boolean>('enableGravatars')); stateService.save('enableGravatars', await storageService.get<boolean>('enableGravatars'));

View File

@ -87,6 +87,17 @@
</div> </div>
<small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small> <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
</div> </div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="theme">{{'theme' | i18n}}</label>
<select id="theme" name="theme" [(ngModel)]="theme" class="form-control" (ngModelChange)="themeChanged($event)">
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
<small class="form-text text-muted">{{'themeDesc' | i18n}}</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
{{'save' | i18n}} {{'save' | i18n}}
</button> </button>

View File

@ -26,9 +26,11 @@ export class OptionsComponent implements OnInit {
disableIcons: boolean; disableIcons: boolean;
enableGravatars: boolean; enableGravatars: boolean;
enableFullWidth: boolean; enableFullWidth: boolean;
theme: string;
locale: string; locale: string;
vaultTimeouts: any[]; vaultTimeouts: any[];
localeOptions: any[]; localeOptions: any[];
themeOptions: any[];
private startingLocale: string; private startingLocale: string;
@ -60,6 +62,11 @@ export class OptionsComponent implements OnInit {
localeOptions.sort(Utils.getSortFunction(i18nService, 'name')); localeOptions.sort(Utils.getSortFunction(i18nService, 'name'));
localeOptions.splice(0, 0, { name: i18nService.t('default'), value: null }); localeOptions.splice(0, 0, { name: i18nService.t('default'), value: null });
this.localeOptions = localeOptions; this.localeOptions = localeOptions;
this.themeOptions = [
{ name: i18nService.t('themeDefault'), value: 'themeDefaultSet' },
{ name: i18nService.t('themeLight'), value: 'themeLight' },
{ name: i18nService.t('themeDark'), value: 'themeDark' },
];
} }
async ngOnInit() { async ngOnInit() {
@ -69,6 +76,7 @@ export class OptionsComponent implements OnInit {
this.enableGravatars = await this.storageService.get<boolean>('enableGravatars'); this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth'); this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey); this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
this.theme = await this.storageService.get<string>(ConstantsService.themeKey);
} }
async submit() { async submit() {
@ -80,6 +88,7 @@ export class OptionsComponent implements OnInit {
await this.stateService.save('enableGravatars', this.enableGravatars); await this.stateService.save('enableGravatars', this.enableGravatars);
await this.storageService.save('enableFullWidth', this.enableFullWidth); await this.storageService.save('enableFullWidth', this.enableFullWidth);
this.messagingService.send('setFullWidth'); this.messagingService.send('setFullWidth');
await this.storageService.save('theme', this.theme);
await this.storageService.save(ConstantsService.localeKey, this.locale); await this.storageService.save(ConstantsService.localeKey, this.locale);
if (this.locale !== this.startingLocale) { if (this.locale !== this.startingLocale) {
window.location.reload(); window.location.reload();
@ -101,4 +110,22 @@ export class OptionsComponent implements OnInit {
} }
this.vaultTimeoutAction = newValue; this.vaultTimeoutAction = newValue;
} }
async themeChanged(themeUpdate: string) {
const theme = ['themeDefaultSet', 'themeDark', 'themeLight'];
const htmlEl = window.document.documentElement;
theme.forEach(element => {
htmlEl.classList.remove(element);
});
if (themeUpdate === 'themeDefaultSet') {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
htmlEl.classList.add('themeDark', themeUpdate);
}
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
htmlEl.classList.add('themeLight', themeUpdate);
}
} else {
htmlEl.classList.add(themeUpdate);
}
}
} }

View File

@ -103,7 +103,7 @@
</div> </div>
<div class="col-6 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}"> <div class="col-6 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
<div *ngIf="!cipher.login.totp || !totpCode"> <div *ngIf="!cipher.login.totp || !totpCode">
<img src="../../images/totp-countdown.png" title="{{'verificationCodeTotp' | i18n}}" <img src="../../images/totp-countdown.png" id="totpImage" title="{{'verificationCodeTotp' | i18n}}"
class="ml-2"> class="ml-2">
<a href="#" appStopClick class="badge badge-primary ml-3" (click)="premiumRequired()" <a href="#" appStopClick class="badge badge-primary ml-3" (click)="premiumRequired()"
*ngIf="!organization && !cipher.organizationId && !canAccessPremium"> *ngIf="!organization && !cipher.organizationId && !canAccessPremium">

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="#fbfbfb" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle">
Loading...
</text>
</svg>

View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif" <text fill="#333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
font-size="18" text-anchor="middle"> font-size="18" text-anchor="middle">
Loading... Loading...
</text> </text>

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -19,7 +19,7 @@
<app-root> <app-root>
<div class="mt-5 d-flex justify-content-center"> <div class="mt-5 d-flex justify-content-center">
<div> <div>
<img src="./images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden"> <div id="loginLogo" class="mb-4 logo" alt="Bitwarden"></div>
<p class="text-center"> <p class="text-center">
<i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading" aria-hidden="true"></i> <i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading" aria-hidden="true"></i>
</p> </p>

View File

@ -3969,6 +3969,24 @@
"removeSelectedUsersConfirmation": { "removeSelectedUsersConfirmation": {
"message": "Are you sure you want to remove the selected users?" "message": "Are you sure you want to remove the selected users?"
}, },
"usersHasBeenRemoved": {
"message": "The selected users have been removed."
},
"theme": {
"message": "Theme"
},
"themeDesc": {
"message": "Choose a theme for your web vault. This setting will preview the theme however it still requires you to save."
},
"themeDefault": {
"message": "Default"
},
"themeDark": {
"message": "Dark"
},
"themeLight": {
"message": "Light"
},
"confirmSelected": { "confirmSelected": {
"message": "Confirm Selected" "message": "Confirm Selected"
}, },

View File

@ -1,77 +1,5 @@
@import "../css/webfonts.css"; @import "../css/webfonts.css";
@import "variables.scss";
$primary: #175DDC;
$primary-accent: #1252A3;
$secondary: #ced4da;
$secondary-alt: #1A3B66;
$success: #00a65a;
$info: #555555;
$warning: #bf7e16;
$danger: #dd4b39;
$theme-colors: (
"primary-accent": $primary-accent,
"secondary-alt": $secondary-alt,
);
$body-bg: #ffffff;
$body-color: #333333;
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
$h1-font-size: 1.7rem;
$h2-font-size: 1.3rem;
$h3-font-size: 1rem;
$h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: 1rem;
$small-font-size: 90%;
$font-size-lg: 1.15rem;
$code-font-size: 100%;
$navbar-padding-y: .75rem;
$grid-gutter-width: 20px;
$card-spacer-y: .6rem;
$list-group-item-padding-y: .6rem;
$list-group-active-color: $body-color;
$list-group-active-bg: #ffffff;
$list-group-active-border-color: rgba(#000000, .125);
$dropdown-link-color: $body-color;
$dropdown-link-hover-bg: rgba(#000000, .06);
$dropdown-link-active-color: $dropdown-link-color;
$dropdown-link-active-bg: rgba(#000000, .1);
$dropdown-item-padding-x: 1rem;
$navbar-brand-font-size: 35px;
$navbar-brand-height: 35px;
$navbar-brand-padding-y: 0;
$navbar-dark-color: rgba(#ffffff, .7);
$navbar-dark-hover-color: rgba(#ffffff, .9);
$navbar-nav-link-padding-x: 0.8rem;
$input-bg: #fbfbfb;
$input-focus-bg: #ffffff;
$input-disabled-bg: #e0e0e0;
$input-placeholder-color: #b4b4b4;
$table-accent-bg: rgba(#000000, .02);
$table-hover-bg: rgba(#000000, .03);
$modal-backdrop-opacity: 0.3;
$btn-font-weight: 600;
$lead-font-weight: normal;
$grid-breakpoints: (
xs: 0,
sm: 1px,
md: 2px,
lg: 3px,
xl: 4px
);
//@import "~bootstrap/scss/bootstrap"; //@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/_functions"; @import "~bootstrap/scss/_functions";
@ -119,9 +47,9 @@ html {
body { body {
min-width: 1010px; min-width: 1010px;
@include themify($themes) {
&.layout_frontend { color: themed('textColor');
background-color: #ecf0f5; background-color: themed('backgroundColor');
} }
&.full-width:not(.layout_frontend) { &.full-width:not(.layout_frontend) {
@ -146,6 +74,15 @@ h1, h2, h3, h4, h5 {
small { small {
font-size: 80%; font-size: 80%;
} }
@include themify($themes) {
color: themed('textColor');
}
}
a {
@include themify($themes) {
color: themed('linkColor');
}
} }
input, select, textarea { input, select, textarea {
@ -154,6 +91,36 @@ input, select, textarea {
} }
} }
.text-body {
@include themify($themes) {
color: themed('textColor') !important;
}
}
.bg-primary {
@include themify($themes) {
background-color: themed('bgPrimaryColor') !important;
}
}
.bg-warning {
@include themify($themes) {
background-color: themed('warning') !important;
}
}
.border-primary {
@include themify($themes) {
border-color: themed('borderPrimaryColor') !important;
}
}
.border-warning {
@include themify($themes) {
border-color: themed('warning') !important;
}
}
.secondary-header, .spaced-header { .secondary-header, .spaced-header {
margin-top: 4rem; margin-top: 4rem;
} }
@ -165,9 +132,22 @@ input, select, textarea {
.dropdown-menu { .dropdown-menu {
min-width: 200px; min-width: 200px;
max-width: 300px; max-width: 300px;
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
.dropdown-item {
@include themify($themes) {
color: themed('textColor');
}
}
.dropdown-item-text { .dropdown-item-text {
line-height: 1.3; line-height: 1.3;
@include themify($themes) {
color: themed('textColor');
}
span, small { span, small {
display: block; display: block;
@ -212,14 +192,27 @@ input, select, textarea {
} }
.list-group-item.active { .list-group-item.active {
border-left: 3px solid theme-color("primary");
font-weight: bold; font-weight: bold;
padding-left: calc(#{$list-group-item-padding-x} - 3px); padding-left: calc(#{$list-group-item-padding-x} - 3px);
border-color: rgba(0,0,0,0.125);
@include themify($themes) {
border-left: 3px solid themed('borderPrimaryColor');
}
}
.text-muted {
@include themify($themes) {
color: themed('textMuted') !important;
}
} }
.card-header, .modal-header { .card-header, .modal-header {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
small { small {
font-weight: normal; font-weight: normal;
@ -279,10 +272,16 @@ input, select, textarea {
} }
.modal-body { .modal-body {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
h3, .section-header > * { h3, .section-header > * {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
} }
} }
.modal .list-group-flush { .modal .list-group-flush {
@ -296,8 +295,11 @@ input, select, textarea {
.modal-footer { .modal-footer {
justify-content: flex-start; justify-content: flex-start;
background-color: $input-bg;
@include border-radius($modal-content-border-radius); @include border-radius($modal-content-border-radius);
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
} }
label:not(.form-check-label):not(.btn), label.bold { label:not(.form-check-label):not(.btn), label.bold {
@ -308,10 +310,34 @@ input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button; -webkit-appearance: searchfield-cancel-button;
} }
.btn-primary {
@include themify($themes) {
border-color: themed('buttonBorderColor');
background-color: themed('buttonBackgroundColor');
}
&:hover {
@include themify($themes) {
border-color: themed('buttonBorderColorHover');
background-color: themed('buttonBackgroundColorHover');
}
color: #FFFFFF;
}
}
.btn[class*="btn-outline-"] { .btn[class*="btn-outline-"] {
&:not(:hover) { &:not(:hover):not(.btn-outline-danger):not(.dropdown-toggle) {
border-color: $secondary; @include themify($themes) {
background-color: #fbfbfb; border-color: themed('buttonBorderColor');
background-color: themed('backgroundColor');
color: themed('buttonTextColor');
}
}
&:hover:not(.btn-outline-danger):not(.dropdown-toggle) {
@include themify($themes) {
border-color: themed('buttonBorderColorHover');
background-color: themed('buttonBackgroundColorHover');
color: #fff;
}
} }
} }
@ -323,10 +349,21 @@ input[type="search"]::-webkit-search-cancel-button {
outline-style: auto; outline-style: auto;
outline-width: 1px; outline-width: 1px;
} }
&:not(.text-danger):not(.cursor-move) {
@include themify($themes) {
border-color: themed('buttonBorderColor');
color: themed('buttonBackgroundColor');
}
}
@include themify($themes) {
color: themed('buttonBackgroundColor');
}
} }
.btn-outline-secondary { .btn-outline-secondary {
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: $body-color; color: $body-color;
@ -372,6 +409,10 @@ input[type="search"]::-webkit-search-cancel-button {
&.focus { &.focus {
z-index: 100; z-index: 100;
} }
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
} }
.fa-icon-above-input { .fa-icon-above-input {
@ -379,6 +420,10 @@ input[type="search"]::-webkit-search-cancel-button {
} }
.table.table-list { .table.table-list {
@include themify($themes) {
color: themed('textColor');
}
thead th { thead th {
border-top: none; border-top: none;
} }
@ -400,7 +445,9 @@ input[type="search"]::-webkit-search-cancel-button {
} }
small, > .fa, .icon { small, > .fa, .icon {
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
} }
} }
@ -453,11 +500,20 @@ input[type="search"]::-webkit-search-cancel-button {
} }
td.table-list-strike { td.table-list-strike {
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
text-decoration: line-through; text-decoration: line-through;
} }
} }
.table-hover tbody tr:hover {
@include themify($themes) {
color: themed('tableHover');
background-color: rgba(0, 0, 0, 0.03)
}
}
.text-lg { .text-lg {
font-size: $font-size-lg; font-size: $font-size-lg;
} }
@ -481,11 +537,59 @@ input[type="search"]::-webkit-search-cancel-button {
} }
.password-number { .password-number {
color: #007fde; @include themify($themes) {
color: themed('pwNumber');
}
} }
.password-special { .password-special {
color: #c40800; @include themify($themes) {
color: themed('pwSpecial');
}
}
.card {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
border-color: themed('borderColor');
}
}
.card-body {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
}
.badge[class*="badge-"] {
@include themify($themes) {
color: #FFFFFF;
background-color: themed('buttonBackgroundColor');
}
}
[class*="swal2-"] {
&:not(.swal2-container) {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
}
}
.close {
@include themify($themes) {
color: themed('textColor');
}
}
.dropdown-menu, .dropdown-item {
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
} }
app-vault-groupings, app-org-vault-groupings, .groupings { app-vault-groupings, app-org-vault-groupings, .groupings {
@ -497,7 +601,9 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
h3 { h3 {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
} }
ul:last-child { ul:last-child {
@ -505,11 +611,16 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
} }
.card-body a { .card-body a {
color: $body-color; @include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
&:hover { &:hover {
&.text-muted { &.text-muted {
color: $body-color !important; @include themify($themes) {
color: themed('iconHover') !important;
}
} }
} }
} }
@ -533,11 +644,15 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
li.active { li.active {
> a:first-of-type, > div a:first-of-type { > a:first-of-type, > div a:first-of-type {
font-weight: bold; font-weight: bold;
color: theme-color("primary"); @include themify($themes) {
color: themed('linkColor');
}
} }
> .fa, > div > .fa { > .fa, > div > .fa {
color: theme-color("primary"); @include themify($themes) {
color: themed('linkColor');
}
} }
} }
} }
@ -605,7 +720,9 @@ app-user-billing {
} }
#web-authn-frame { #web-authn-frame {
background: url('../images/loading.svg') 0 0 no-repeat; @include themify($themes) {
background: themed('imgLoading') 0 0 no-repeat;
}
height: 290px; height: 290px;
iframe { iframe {
@ -616,8 +733,11 @@ app-user-billing {
} }
#bt-dropin-container { #bt-dropin-container {
background: url('../images/loading.svg') 0 0 no-repeat; /* @include themify($themes) {
min-height: 50px; background: themed('imgLoading') 0 0 no-repeat;
}
*/min-height: 50px;
background: url('../images/loading-white.svg') 0 0 no-repeat;
} }
.braintree-placeholder, .braintree-sheet__header { .braintree-placeholder, .braintree-sheet__header {
@ -638,6 +758,18 @@ app-user-billing {
border: none; border: none;
} }
[data-braintree-id="upper-container"]::before {
@include themify($themes) {
background-color: themed('backgroundColor');
}
}
#totpImage {
@include themify($themes) {
filter: themed('imgFilter');
}
}
.totp { .totp {
.totp-code { .totp-code {
@extend .text-monospace; @extend .text-monospace;
@ -702,7 +834,10 @@ app-user-billing {
border: 1px solid $card-border-color; border: 1px solid $card-border-color;
border-left-width: 5px; border-left-width: 5px;
border-radius: $card-inner-border-radius; border-radius: $card-inner-border-radius;
background-color: #fafafa; @include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
}
.callout-heading { .callout-heading {
margin-top: 0; margin-top: 0;
@ -766,7 +901,9 @@ app-user-billing {
> small { > small {
display: block; display: block;
color: $text-muted; @include themify($themes) {
color: themed('textMuted');
}
font-weight: normal; font-weight: normal;
} }
@ -790,6 +927,18 @@ app-user-billing {
} }
} }
.form-control {
@include themify($themes) {
color: themed('textColor');
background-color: themed('inputBackgroundColor');
border-color: themed('inputBorderColor');
}
}
input[type="radio"], input[type="checkbox"] {
cursor: pointer;
}
.form-control.stripe-form-control { .form-control.stripe-form-control {
padding-top: 0.55rem; padding-top: 0.55rem;
@ -811,8 +960,11 @@ app-user-billing {
} }
.org-nav { .org-nav {
background-color: $input-bg; @include themify($themes) {
border-bottom: 1px solid $border-color; color: themed('textColor');
background-color: themed('backgroundColor');
border-bottom: 1px solid themed('borderColor');
}
height: 100px; height: 100px;
min-height: 100px; min-height: 100px;
@ -824,14 +976,18 @@ app-user-billing {
border-bottom: none; border-bottom: none;
a { a {
color: $body-color; @include themify($themes) {
color: themed('textColor');
}
&:not(.active) { &:not(.active) {
border-color: transparent; border-color: transparent;
} }
&.active { &.active {
border-top: 3px solid theme-color("primary"); @include themify($themes) {
border-top: 3px solid themed('primary');
}
font-weight: bold; font-weight: bold;
padding-top: calc(#{$nav-link-padding-y} - 2px); padding-top: calc(#{$nav-link-padding-y} - 2px);
} }
@ -850,12 +1006,24 @@ app-user-billing {
} }
} }
} }
.nav-tabs .nav-link.active {
@include themify($themes) {
background: themed('navActiveBackground');
border-color: themed('borderColor');
}
}
img.logo { img.logo, .logo#loginLogo {
width: 284px; width: 284px;
height: 43px; height: 43px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
@include themify($themes) {
background: themed('loginLogo') no-repeat center center;
background-size: cover;
}
background: url("../images/logo-dark@2x.png") no-repeat center center;
background-size: cover;
} }
.min-height-fix { .min-height-fix {
@ -869,8 +1037,11 @@ img.logo {
.cdk-drag-preview { .cdk-drag-preview {
z-index: $zindex-tooltip !important; z-index: $zindex-tooltip !important;
opacity: 0.8; opacity: 0.8;
background-color: $white; /*background-color: $white;*/
border-radius: $border-radius; border-radius: $border-radius;
@include themify($themes) {
background: themed('cdkDraggingBackground');
}
} }
.cursor-move { .cursor-move {

150
src/scss/variables.scss Normal file
View File

@ -0,0 +1,150 @@
$primary: #175DDC;
$primary-accent: #1252A3;
$secondary: #ced4da;
$secondary-alt: #1A3B66;
$success: #00a65a;
$info: #555555;
$warning: #bf7e16;
$danger: #dd4b39;
$theme-colors: (
"primary-accent": $primary-accent,
"secondary-alt": $secondary-alt,
);
$body-bg: #ffffff;
$body-color: #333333;
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
$h1-font-size: 1.7rem;
$h2-font-size: 1.3rem;
$h3-font-size: 1rem;
$h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: 1rem;
$small-font-size: 90%;
$font-size-lg: 1.15rem;
$code-font-size: 100%;
$navbar-padding-y: .75rem;
$grid-gutter-width: 20px;
$card-spacer-y: .6rem;
$list-group-item-padding-y: .6rem;
$list-group-active-color: $body-color;
$list-group-active-bg: #ffffff;
$list-group-active-border-color: rgba(#000000, .125);
$dropdown-link-color: $body-color;
$dropdown-link-hover-bg: rgba(#000000, .06);
$dropdown-link-active-color: $dropdown-link-color;
$dropdown-link-active-bg: rgba(#000000, .1);
$dropdown-item-padding-x: 1rem;
$navbar-brand-font-size: 35px;
$navbar-brand-height: 35px;
$navbar-brand-padding-y: 0;
$navbar-dark-color: rgba(#ffffff, .7);
$navbar-dark-hover-color: rgba(#ffffff, .9);
$navbar-nav-link-padding-x: 0.8rem;
$input-bg: #fbfbfb;
$input-focus-bg: #ffffff;
$input-disabled-bg: #e0e0e0;
$input-placeholder-color: #b4b4b4;
$table-accent-bg: rgba(#000000, .02);
$table-hover-bg: rgba(#000000, .03);
$modal-backdrop-opacity: 0.3;
$btn-font-weight: 600;
$lead-font-weight: normal;
$grid-breakpoints: (
xs: 0,
sm: 1px,
md: 2px,
lg: 3px,
xl: 4px
);
$text-color: #333333;
$border-color: #ced4da;
$themes: (
Light: (
primary: $primary,
textColor: $text-color,
textMuted: #6c757d,
linkColor: $primary,
iconHover: $body-color,
borderColor: $border-color,
backgroundColor: $body-bg,
inputBackgroundColor: #fbfbfb,
inputBorderColor: $border-color,
bgPrimaryColor: $primary,
borderPrimaryColor: $primary,
buttonBorderColor: $secondary,
buttonBackgroundColor: $primary,
buttonBackgroundColorHover: $primary,
buttonBorderColorHover: $primary,
buttonTextColor: $primary,
warning: $warning,
loginLogo: url("../images/logo-dark@2x.png"),
totpFilter: invert(0) grayscale(0),
imgLoading: url('../images/loading.svg'),
cdkDraggingBackground: #FFFFFF,
tableHover: #333333,
navActiveBackground: #FFFFFF,
pwNumber: #007fde,
pwSpecial: #c40800
),
Dark: (
primary: $secondary-alt,
textColor: #fbfbfb,
textMuted: #C1C4C8,
linkColor: #46ace7,
iconHover: #555555,
borderColor: #111111,
backgroundColor: #222222,
inputBackgroundColor: #1A1A1A,
inputBorderColor: #111111,
bgPrimaryColor: $secondary-alt,
borderPrimaryColor: $secondary-alt,
buttonBorderColor: $secondary-alt,
buttonBackgroundColor: $secondary-alt,
buttonBackgroundColorHover: $primary-accent,
buttonBorderColorHover: $secondary-alt,
buttonTextColor: $secondary,
warning: $warning,
loginLogo: url("../images/logo-white@2x.png"),
imgFilter: invert(1) grayscale(1),
imgLoading: url('../images/loading-white.svg'),
cdkDraggingBackground: #000000,
tableHover: $secondary,
navActiveBackground: #1A1A1A,
pwNumber: #51b5ff,
pwSpecial: #ff8c87
),
);
@mixin themify($themes: $themes) {
@each $theme, $map in $themes {
html.theme#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}

View File

@ -5,7 +5,7 @@ import { ConstantsService } from 'jslib/services';
export class HtmlStorageService implements StorageService { export class HtmlStorageService implements StorageService {
private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions', private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth', ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth',
ConstantsService.localeKey, ConstantsService.autoConfirmFingerprints, ConstantsService.themeKey, ConstantsService.localeKey, ConstantsService.autoConfirmFingerprints,
ConstantsService.vaultTimeoutKey, ConstantsService.vaultTimeoutActionKey, ConstantsService.ssoCodeVerifierKey, ConstantsService.vaultTimeoutKey, ConstantsService.vaultTimeoutActionKey, ConstantsService.ssoCodeVerifierKey,
ConstantsService.ssoStateKey, 'ssoOrgIdentifier']); ConstantsService.ssoStateKey, 'ssoOrgIdentifier']);
private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_']; private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];
@ -26,6 +26,12 @@ export class HtmlStorageService implements StorageService {
if (vaultTimeoutAction == null) { if (vaultTimeoutAction == null) {
await this.save(ConstantsService.vaultTimeoutActionKey, 'lock'); await this.save(ConstantsService.vaultTimeoutActionKey, 'lock');
} }
// Default theme to match the browser if the theme isn't set
const theme = await this.get<string>(ConstantsService.themeKey);
if (theme == null) {
await this.save(ConstantsService.themeKey, 'themeDefaultSet');
}
} }
get<T>(key: string): Promise<T> { get<T>(key: string): Promise<T> {

View File

@ -28,7 +28,7 @@ const moduleRules = [
}, },
{ {
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: /loading.svg/, exclude: /loading(|-white).svg/,
use: [{ use: [{
loader: 'file-loader', loader: 'file-loader',
options: { options: {