bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

Revert "Theme Support with a Dark Mode (#974)" (#1011)

Browse Source 
This reverts commit cf24113924.
This commit is contained in:
Chad Scharf
2021-06-03 15:49:14 -04:00
committed by GitHub
parent 2f8a721033
commit a554c0e660
15 changed files with 114 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
src/scss/styles.scss
View File

@@ -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";
@import "./register-layout";

150
src/scss/variables.scss
View File

@@ -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);
}