bitwarden/web
1
0
Fork 0
mirror of https://github.com/bitwarden/web synced 2026-01-04 09:33:32 +00:00
Code Issues Releases Wiki Activity

Dark Theme (#1017)

Browse Source 
* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

* Icon styling

* Fix theme not saving

* Update English

* Update messages.json

* dropdown and login logo

* btn-link and totp fix

* Organisation Styling

* Update webauthn-fallback.ts

* Fix contrast issues

* Add Paypal Container and Loading svg file

* Password Generator contrast fix

* Dark Mode Fix buttons and foreground

* Fix button hover

* Fix Styles after rebase

* Add hover on nav dropdown-item

* Disable Theme Preview

* Options Fix for Default Theme Changes

* Updated Colour Scheme

* Toast fix

* Button and Text Styling

* Options Update and Messages Fix

* Added Search Icon and Fixed Callout styling

* Add theme styling to Stripe

* Refactor logic for setting color

* Reorder logic to avoid race condition

* PayPal Loading and Misc Fix

* text-state bug fix

* Badge Colour Fix

* Remove PayPal Tagline

The colour cannot be styled so it's not visible on a dark theme

* Adding the Styling from #1131

* Update to New Design

* Form and Nav restyle

* Modal Opacity and Callout

* Nav Colours

* Missing Borders

* Light theme fix

* Improved border for listgroup

* Change Org Nav Colour

* Save theme to localStorage for persistence

* Undo change to Wired image

* !Important removal and tweaks

* Fix regression with navbar

* Light theme by default

* Refactor to use getEffectiveTheme

* Refactor theme constants to use enum

* Set theme in index.html before app loads

* Use scss selector to set logo image

* Export Sass to TS

* Update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Danny Murphy
2021-09-29 23:06:20 +01:00
committed by GitHub
parent aa58749b34
commit 0c02cfea2f
37 changed files with 2259 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/scss/plugins.scss
View File

@@ -1,107 +1,127 @@
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@import "~angular2-toaster/toaster";
@import "~sweetalert2/src/sweetalert2.scss";
.toast-container {
&.toast-top-right {
top: 76px;
#duo-frame {
height: 330px;
@include themify($themes) {
background: themed('imgLoading') 0 0 no-repeat;
}
.toast-close-button {
margin-right: 4px;
font-size: 18px;
iframe {
border: none;
height: 100%;
width: 100%;
}
}
#web-authn-frame {
height: 290px;
@include themify($themes) {
background: themed('imgLoading') 0 0 no-repeat;
}
.toast {
opacity: 1 !important;
background-image: none !important;
border-radius: $border-radius;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
iframe {
border: none;
height: 100%;
width: 100%;
}
}
&:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
#hcaptcha_iframe {
border: none;
transition: height 0.25s linear;
width: 100%;
}
&:before {
font-family: FontAwesome;
font-size: 25px;
line-height: 20px;
float: left;
color: #ffffff;
margin: auto 0 auto 15px;
}
.list-group-2fa {
.logo-2fa {
min-width: 100px;
}
}
.toast-content {
padding: 15px;
}
.progress {
@include themify($themes) {
background-color: themed('pwStrengthBackground');
}
}
.toaster-icon {
display: none;
}
// Braintree
.toast-message {
p {
margin-bottom: 0.5rem;
#bt-dropin-container {
min-height: 50px;
@include themify($themes) {
background: themed("loadingSvg") center center no-repeat;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.braintree-placeholder, .braintree-sheet__header {
display: none;
}
&.toast-danger, &.toast-error {
background-image: none !important;
background-color: $danger;
.braintree-sheet__content--button {
min-height: 0;
padding: 0;
text-align: left;
}
&:before {
content: "\f0e7";
}
}
.braintree-sheet__container {
margin-bottom: 0;
}
&.toast-warning {
background-image: none !important;
background-color: $warning;
.braintree-sheet {
border: none;
}
&:before {
content: "\f071";
}
}
[data-braintree-id="upper-container"]::before {
@include themify($themes) {
background-color: themed('backgroundColor');
}
}
&.toast-info {
background-image: none !important;
background-color: $info;
.card [data-braintree-id="upper-container"]::before {
@include themify($themes) {
background-color: themed('foregroundColor');
}
}
&:before {
content: "\f05a";
}
}
[data-braintree-id="paypal-button"] {
@include themify($themes) {
background-color: themed('backgroundColor');
}
}
&.toast-success {
background-image: none !important;
background-color: $success;
.card [data-braintree-id="paypal-button"] {
@include themify($themes) {
background-color: themed('foregroundColor');
}
}
&:before {
content: "\f00C";
}
}
.paypal-button-text {
@include themify($themes) {
color: themed('textColor');
}
}
// SweetAlert2
[class*="swal2-"] {
&:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
@include themify($themes) {
background-color: themed('backgroundColor');
color: themed('textColor');
}
}
}
.swal2-container {
background-color: rgba(0,0,0,.3);
}
.swal2-popup {
padding: 15px 0 0;
background-color: $modal-content-bg;
color: $body-color;
@include themify($themes) {
background-color: themed('backgroundColor');
color: themed('textColor');
}
border: $modal-content-border-width solid #9a9a9a;
@include border-radius($modal-content-border-radius);
padding: 15px 0 0;
width: 34em; // slightly bigger than the hardcoded 478px in v1.
.swal2-header {
@@ -118,7 +138,9 @@ $fa-font-path: "~font-awesome/fonts";
.swal2-content {
padding-bottom: 15px;
font-size: $font-size-base;
border-bottom: $modal-footer-border-width solid $modal-footer-border-color;
@include themify($themes) {
border-bottom: $modal-footer-border-width solid themed('separator');
}
}
i.swal-custom-icon {
@@ -128,41 +150,37 @@ $fa-font-path: "~font-awesome/fonts";
}
.swal2-title {
padding: 10px 0 15px;
margin: 0;
font-size: $font-size-lg;
color: $body-color;
margin: 0;
padding: 10px 0 15px;
@include themify($themes) {
color: themed('headingColor');
}
}
.swal2-content {
font-size: $font-size-base;
color: $body-color;
padding: 0 15px 15px;
@include themify($themes) {
color: themed('textColor');
}
}
.swal2-actions {
padding: 15px;
margin: 0;
background-color: $input-bg;
@include border-radius($modal-content-border-radius);
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: $font-size-base;
justify-content: flex-start;
margin: 0;
padding: 15px;
@include themify($themes) {
background-color: themed('backgroundColor');
}
button {
margin-right: 10px;
@extend .btn;
&.swal2-confirm {
@extend .btn-primary;
font-weight: bold;
}
&.swal2-cancel {
@extend .btn-outline-secondary;
background-color: #ffffff;
}
}
}