-
+
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index c0b8ed19..57147e0a 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -3969,24 +3969,6 @@
"removeSelectedUsersConfirmation": {
"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": {
"message": "Confirm Selected"
},
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 5bfc2f3b..598fea83 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,5 +1,77 @@
@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/_functions";
@@ -47,9 +119,9 @@ html {
body {
min-width: 1010px;
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
+
+ &.layout_frontend {
+ background-color: #ecf0f5;
}
&.full-width:not(.layout_frontend) {
@@ -74,15 +146,6 @@ h1, h2, h3, h4, h5 {
small {
font-size: 80%;
}
- @include themify($themes) {
- color: themed('textColor');
- }
-}
-
-a {
- @include themify($themes) {
- color: themed('linkColor');
- }
}
input, select, textarea {
@@ -91,36 +154,6 @@ 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 {
margin-top: 4rem;
}
@@ -132,22 +165,9 @@ input, select, textarea {
.dropdown-menu {
min-width: 200px;
max-width: 300px;
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
-
- .dropdown-item {
- @include themify($themes) {
- color: themed('textColor');
- }
- }
.dropdown-item-text {
line-height: 1.3;
- @include themify($themes) {
- color: themed('textColor');
- }
span, small {
display: block;
@@ -192,27 +212,14 @@ input, select, textarea {
}
.list-group-item.active {
+ border-left: 3px solid theme-color("primary");
font-weight: bold;
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 {
font-weight: bold;
text-transform: uppercase;
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
small {
font-weight: normal;
@@ -272,16 +279,10 @@ input, select, textarea {
}
.modal-body {
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
h3, .section-header > * {
font-weight: normal;
text-transform: uppercase;
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
}
}
.modal .list-group-flush {
@@ -295,11 +296,8 @@ input, select, textarea {
.modal-footer {
justify-content: flex-start;
+ background-color: $input-bg;
@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 {
@@ -310,34 +308,10 @@ input[type="search"]::-webkit-search-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-"] {
- &:not(:hover):not(.btn-outline-danger):not(.dropdown-toggle) {
- @include themify($themes) {
- 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;
- }
+ &:not(:hover) {
+ border-color: $secondary;
+ background-color: #fbfbfb;
}
}
@@ -349,21 +323,10 @@ input[type="search"]::-webkit-search-cancel-button {
outline-style: auto;
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 {
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
&:hover:not(:disabled) {
color: $body-color;
@@ -409,10 +372,6 @@ input[type="search"]::-webkit-search-cancel-button {
&.focus {
z-index: 100;
}
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
}
.fa-icon-above-input {
@@ -420,10 +379,6 @@ input[type="search"]::-webkit-search-cancel-button {
}
.table.table-list {
- @include themify($themes) {
- color: themed('textColor');
- }
-
thead th {
border-top: none;
}
@@ -445,9 +400,7 @@ input[type="search"]::-webkit-search-cancel-button {
}
small, > .fa, .icon {
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
}
}
@@ -500,20 +453,11 @@ input[type="search"]::-webkit-search-cancel-button {
}
td.table-list-strike {
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
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 {
font-size: $font-size-lg;
}
@@ -537,59 +481,11 @@ input[type="search"]::-webkit-search-cancel-button {
}
.password-number {
- @include themify($themes) {
- color: themed('pwNumber');
- }
+ color: #007fde;
}
.password-special {
- @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');
- }
+ color: #c40800;
}
app-vault-groupings, app-org-vault-groupings, .groupings {
@@ -601,9 +497,7 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
h3 {
font-weight: normal;
text-transform: uppercase;
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
}
ul:last-child {
@@ -611,16 +505,11 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
}
.card-body a {
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
+ color: $body-color;
&:hover {
&.text-muted {
- @include themify($themes) {
- color: themed('iconHover') !important;
- }
+ color: $body-color !important;
}
}
}
@@ -644,15 +533,11 @@ app-vault-groupings, app-org-vault-groupings, .groupings {
li.active {
> a:first-of-type, > div a:first-of-type {
font-weight: bold;
- @include themify($themes) {
- color: themed('linkColor');
- }
+ color: theme-color("primary");
}
> .fa, > div > .fa {
- @include themify($themes) {
- color: themed('linkColor');
- }
+ color: theme-color("primary");
}
}
}
@@ -720,9 +605,7 @@ app-user-billing {
}
#web-authn-frame {
- @include themify($themes) {
- background: themed('imgLoading') 0 0 no-repeat;
- }
+ background: url('../images/loading.svg') 0 0 no-repeat;
height: 290px;
iframe {
@@ -733,11 +616,8 @@ app-user-billing {
}
#bt-dropin-container {
-/* @include themify($themes) {
- background: themed('imgLoading') 0 0 no-repeat;
- }
- */min-height: 50px;
- background: url('../images/loading-white.svg') 0 0 no-repeat;
+ background: url('../images/loading.svg') 0 0 no-repeat;
+ min-height: 50px;
}
.braintree-placeholder, .braintree-sheet__header {
@@ -758,18 +638,6 @@ app-user-billing {
border: none;
}
-[data-braintree-id="upper-container"]::before {
- @include themify($themes) {
- background-color: themed('backgroundColor');
- }
-}
-
-#totpImage {
- @include themify($themes) {
- filter: themed('imgFilter');
- }
-}
-
.totp {
.totp-code {
@extend .text-monospace;
@@ -834,10 +702,7 @@ app-user-billing {
border: 1px solid $card-border-color;
border-left-width: 5px;
border-radius: $card-inner-border-radius;
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- }
+ background-color: #fafafa;
.callout-heading {
margin-top: 0;
@@ -901,9 +766,7 @@ app-user-billing {
> small {
display: block;
- @include themify($themes) {
- color: themed('textMuted');
- }
+ color: $text-muted;
font-weight: normal;
}
@@ -927,18 +790,6 @@ 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 {
padding-top: 0.55rem;
@@ -960,11 +811,8 @@ input[type="radio"], input[type="checkbox"] {
}
.org-nav {
- @include themify($themes) {
- color: themed('textColor');
- background-color: themed('backgroundColor');
- border-bottom: 1px solid themed('borderColor');
- }
+ background-color: $input-bg;
+ border-bottom: 1px solid $border-color;
height: 100px;
min-height: 100px;
@@ -976,18 +824,14 @@ input[type="radio"], input[type="checkbox"] {
border-bottom: none;
a {
- @include themify($themes) {
- color: themed('textColor');
- }
+ color: $body-color;
&:not(.active) {
border-color: transparent;
}
&.active {
- @include themify($themes) {
- border-top: 3px solid themed('primary');
- }
+ border-top: 3px solid theme-color("primary");
font-weight: bold;
padding-top: calc(#{$nav-link-padding-y} - 2px);
}
@@ -1006,24 +850,12 @@ input[type="radio"], input[type="checkbox"] {
}
}
}
-.nav-tabs .nav-link.active {
- @include themify($themes) {
- background: themed('navActiveBackground');
- border-color: themed('borderColor');
- }
-}
-img.logo, .logo#loginLogo {
+img.logo {
width: 284px;
height: 43px;
margin: 0 auto;
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 {
@@ -1037,15 +869,12 @@ img.logo, .logo#loginLogo {
.cdk-drag-preview {
z-index: $zindex-tooltip !important;
opacity: 0.8;
- /*background-color: $white;*/
+ background-color: $white;
border-radius: $border-radius;
- @include themify($themes) {
- background: themed('cdkDraggingBackground');
- }
}
.cursor-move {
cursor: move !important;
}
-@import "./register-layout";
\ No newline at end of file
+@import "./register-layout";
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
deleted file mode 100644
index 8084633f..00000000
--- a/src/scss/variables.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-$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);
-}
\ No newline at end of file
diff --git a/src/services/htmlStorage.service.ts b/src/services/htmlStorage.service.ts
index 771c917f..2af52b9e 100644
--- a/src/services/htmlStorage.service.ts
+++ b/src/services/htmlStorage.service.ts
@@ -5,7 +5,7 @@ import { ConstantsService } from 'jslib/services';
export class HtmlStorageService implements StorageService {
private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableFullWidth',
- ConstantsService.themeKey, ConstantsService.localeKey, ConstantsService.autoConfirmFingerprints,
+ ConstantsService.localeKey, ConstantsService.autoConfirmFingerprints,
ConstantsService.vaultTimeoutKey, ConstantsService.vaultTimeoutActionKey, ConstantsService.ssoCodeVerifierKey,
ConstantsService.ssoStateKey, 'ssoOrgIdentifier']);
private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];
@@ -26,12 +26,6 @@ export class HtmlStorageService implements StorageService {
if (vaultTimeoutAction == null) {
await this.save(ConstantsService.vaultTimeoutActionKey, 'lock');
}
-
- // Default theme to match the browser if the theme isn't set
- const theme = await this.get
(ConstantsService.themeKey);
- if (theme == null) {
- await this.save(ConstantsService.themeKey, 'themeDefaultSet');
- }
}
get(key: string): Promise {
diff --git a/webpack.config.js b/webpack.config.js
index ae959b37..9aad2138 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,7 +28,7 @@ const moduleRules = [
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
- exclude: /loading(|-white).svg/,
+ exclude: /loading.svg/,
use: [{
loader: 'file-loader',
options: {