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:
parent
1bacc8b774
commit
cf24113924
@ -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">
|
||||||
|
@ -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'));
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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">
|
||||||
|
6
src/images/loading-white.svg
Normal file
6
src/images/loading-white.svg
Normal 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>
|
@ -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>
|
||||||
|
BIN
src/images/logo-white@2x.png
Normal file
BIN
src/images/logo-white@2x.png
Normal file
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 |
@ -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>
|
||||||
|
@ -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"
|
||||||
},
|
},
|
||||||
|
@ -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
150
src/scss/variables.scss
Normal 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);
|
||||||
|
}
|
@ -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> {
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user