Dark Theme (#1017)

* 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>
2025-12-20 10:13:31 +00:00 · 2021-09-29 23:06:20 +01:00
parent aa58749b34
commit 0c02cfea2f
37 changed files with 2259 additions and 1053 deletions
--- a/src/scss/callouts.scss
+++ b/src/scss/callouts.scss
@@ -0,0 +1,83 @@
+.callout {
+    border-left-width: 5px !important;
+    border-radius: $card-inner-border-radius;
+    margin-bottom: $alert-margin-bottom;
+    padding: $alert-padding-y $alert-padding-x;
+    @include themify($themes) {
+        background-color: themed('calloutBackground');
+        border: 1px solid themed('borderColor');
+        color: themed('calloutColor');
+    }
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        @include themify($themes) {
+            border-left-color: themed('primary');
+        }
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('primary');
+            }
+        }
+    }
+
+    &.callout-info {
+        @include themify($themes) {
+            border-left-color: themed('info');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('info');
+            }
+        }
+    }
+
+    &.callout-danger {
+        @include themify($themes) {
+            border-left-color: themed('danger');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('danger');
+            }
+        }
+    }
+
+    &.callout-success {
+        @include themify($themes) {
+            border-left-color: themed('success');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('success');
+            }
+        }
+    }
+
+    &.callout-warning {
+        @include themify($themes) {
+            border-left-color: themed('warning');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('warning');
+            }
+        }
+    }
+
+    .enforced-policy-options ul {
+        margin-bottom: 0px;
+    }
+}