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-19 17:53:39 +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/tables.scss
+++ b/src/scss/tables.scss
@@ -0,0 +1,123 @@
+.table.table-list {
+    @include themify($themes) {
+        color: themed('textColor');
+    }
+
+    &.table td, .table th {
+        &:not(tr:first-child td) {
+            @include themify($themes) {
+                border-top: 1px solid themed('tableSeparator');
+            }
+        }
+    }
+
+    thead th {
+        border-top: none;
+    }
+
+    tr:first-child {
+        td {
+            border: none;
+        }
+    }
+
+    td {
+        vertical-align: middle;
+        @include themify($themes) {
+            color: themed('textColor');
+        }
+
+        & > a {
+            @include themify($themes) {
+                color: themed('tableLinkColor');
+            }
+            &:hover {
+                @include themify($themes) {
+                    color: themed('tableLinkColorHover');
+                }
+            }
+        }
+
+        &.reduced-lh {
+            line-height: 1;
+            
+            small {
+                font-size: 80%;
+            }
+        }
+
+        small, > .fa, .icon {
+            @include themify($themes) {
+                color: themed('textMuted');
+            }
+        }
+
+        .fa-globe {
+            @include themify($themes) {
+                color: themed('iconColor');
+            }
+        }
+    }
+
+    td.wrap {
+        word-break: break-all;
+    }
+
+    td.table-list-options {
+        height: 50px;
+        max-width: 76px;
+        text-align: right;
+        width: 76px;
+
+        &.wider {
+            max-width: 100px;
+            width: 100px;
+        }
+
+        .btn {
+            line-height: 1;
+            transition: initial;
+        }
+
+        .dropdown-menu {
+            line-height: $line-height-base;
+        }
+    }
+
+    tr:not(:hover) td.table-list-options {
+        > .dropdown:not(.show) button:not(:focus):not(:active), > button:not(:focus):not(:active) {
+            @extend .sr-only;
+        }
+    }
+
+    td.table-list-icon {
+        max-width: 45px;
+        text-align: center;
+        width: 45px;
+        
+        img {
+            @extend .rounded;
+            @extend .img-fluid;
+            max-height: 24px;
+        }
+    }
+
+    td.table-list-checkbox {
+        max-width: 35px;
+        width: 35px;
+    }
+
+    td.table-list-strike {
+        text-decoration: line-through;
+        @include themify($themes) {
+            color: themed('textMuted');
+        }
+    }
+}
+
+.table-hover tbody tr:hover {
+    @include themify($themes) {
+        background-color: themed('tableRowHover');
+        color: themed('tableColorHover');
+    }
+}