From 95a66655a7bc5e319376ec28e253451cb3240f2c Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Fri, 9 Jun 2023 17:36:07 -0400 Subject: [PATCH] Clean-up more styles for dark mode. (CFM-239) --- app/templates/element/javascript.php | 12 ++--- app/webroot/css/co-base.css | 42 +++++++++++++++- app/webroot/css/co-color.css | 74 ++++++++++++++++++++++++---- 3 files changed, 112 insertions(+), 16 deletions(-) diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index 5cf9718fb..313ece78e 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -155,12 +155,12 @@ // Use select2 library everywhere except // - duet-date - $("select").not("#limit").not(".duet-date__select--month").not(".duet-date__select--year").select2({ - width: '100%', - tags: true, - placeholder: "-- Select --", - allowClear: true - }); + // $("select").not("#limit").not(".duet-date__select--month").not(".duet-date__select--year").select2({ + // width: '100%', + // tags: true, + // placeholder: "-- Select --", + // allowClear: true + // }); // Generic row click handling // First capture mouse location to test if we're clicking or drag-selecting (for copy) diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index debc528f2..33d54c3e2 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -191,6 +191,7 @@ body.cos.select #top-bar { width: 100%; border-radius: 0; border: 1px solid var(--cmg-color-bg-006); + color: var(--cmg-color-body-txt); } #global-search-button { background-color: var(--cmg-color-btn-bg-001); @@ -635,13 +636,19 @@ ul.form-list li.alert-banner .co-alert { #cm-person-subnav-links { margin-top: -2em; } +.cm-subnav-tabs .nav-tabs { + border-bottom-color: var(--cmg-color-bg-006); +} .cm-subnav-tabs .nav-link { text-transform: uppercase; padding: 1em 1.5em; color: var(--cmg-color-link); } +.cm-subnav-tabs .nav-link.active, .cm-subnav-links .nav-link.active { color: var(--cmg-color-body-txt); + background-color: var(--cmg-color-body-bg); + border-color: var(--cmg-color-bg-006) var(--cmg-color-bg-006) var(--cmg-color-body-bg) var(--cmg-color-bg-006); } .cm-subnav-links ul.list-inline { margin: 0.5em 0 0 0; @@ -924,6 +931,9 @@ table.index-table .form-check { color: var(--cmg-color-txt-inverse); text-align: center; } +html.dark-mode #pagination { + background-color: var(--cmg-color-bg-003); +} #pagination ul, #pagination li { /* override defaults */ display: inline-block; @@ -1149,6 +1159,8 @@ ul.form-list input[type="password"] { border-radius: 0; border: 1px solid var(--cmg-color-bg-007); padding: 4px 6px; + color: var(--cmg-color-body-txt); + background-color: var(--cmg-color-body-bg); } ul.form-list input[type="text"]:focus, ul.form-list input[type="number"]:focus, @@ -1157,6 +1169,9 @@ ul.form-list input[type="password"]:focus { } ul.form-list select { font-size: 0.9em; + color: var(--cmg-color-body-txt); + background-color: var(--cmg-color-body-bg); + border-color: var(--cmg-color-bg-007); } ul.form-list li.fields-submit .required { font-style: italic; @@ -1352,6 +1367,10 @@ ul.form-list .cm-time-picker-vals li { #dialog .modal-footer { border-top: none; } +.btn-close { + background-color: var(--cmg-color-txt-inverse); + border: 1px solid var(--cmg-color-bg-007); +} /* MVEA MODAL */ .mvea-modal .modal-dialog { max-width: 90vw; @@ -1621,6 +1640,9 @@ table.list-mode .read-only-link-container { height: 2.2rem; } /* BUTTONS */ +button, .btn, .btn:hover { + color: var(--cmg-color-body-txt); +} .btn { text-transform: uppercase; font-weight: 500; @@ -1735,10 +1757,28 @@ table.list-mode .read-only-link-container { color: var(--cmg-color-btn-bg-003); border: 1px solid var(--cmg-color-btn-bg-003); } -/* Bootstrap Accordion */ +/* Other Bootstrapisms */ +.accordion-item { + background-color: var(--cmg-color-body-bg); + border-color: var(--cmg-color-bg-006); +} +.accordion-button { + color: var(--cmg-color-link); + background-color: var(--cmg-color-body-bg); +} .accordion-button:not(.collapsed) { + color: var(--cmg-color-link); background-color: var(--cmg-color-bg-001); } +.dropdown-menu, .dropdown-item { + color: var(--cmg-color-body-txt); +} +.card, +.modal-content { + color: var(--cmg-color-body-txt); + background-color: var(--cmg-color-body-bg); + border-color: var(--cmg-color-bg-006); +} /* FOOTER */ footer { text-align: center; diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css index 6f5366828..b5d54eda9 100644 --- a/app/webroot/css/co-color.css +++ b/app/webroot/css/co-color.css @@ -32,13 +32,8 @@ * :root sets the global defaults. body.dark-mode sets the dark mode defaults. */ +/* COmanage Light Color Scheme (default) */ :root { - /* COmanage Light Color Scheme (default) */ - - /* White and Black */ - --cmg-color-white: #fff; /* white */ - --cmg-color-black: #000; /* black */ - /* Basics */ --cmg-color-body-bg: #fff; /* Body background color (white) */ --cmg-color-body-txt: #222; /* Body text color (dark gray) */ @@ -111,8 +106,69 @@ --duet-z-index: 600; } +/* COmange Dark Color Scheme */ html.dark-mode { - /* COmange Dark Color Scheme */ - --cmg-color-body-bg: #222; - --cmg-color-body-txt: #f2f2f2; + /* Basics */ + --cmg-color-body-bg: #121212; /* Body background color (very dark gray) */ + --cmg-color-body-txt: #86868b; /* Body text color (light gray) */ + --cmg-color-headings: #a6a6ab; /* Headings color, material icons, de-emphasized links (light gray) */ + --cmg-color-txt-soft: #666; /* Disabled text or form fields (light gray) */ + --cmg-color-txt-inverse: #ddd; /* Default color for inverted text (i.e. on dark backgrounds) - this remains similar */ + + /* Banner and Spinner */ + --cmg-color-banner: #22222a; /* Registry v5.x banner color (dark gray/blue) */ + --cmg-color-spinner: #4880bb; /* spinner / loading animation (blue) */ + + /* Links (primary) */ + --cmg-color-link: #4880bb; /* primary hyperlink color (a less saturated blue); */ + --cmg-color-link-hover: #4880bb; /* primary hyperlink hover color (blue); */ + + /* Buttons */ + --cmg-color-btn-bg-001: #0d4573; /* primary button background color (blue), submit buttons, .btn-primary, pagination */ + --cmg-color-btn-bg-002: #333; /* primary button hover color (black) */ + --cmg-color-btn-bg-003: #444; /* common background color (gray) */ + --cmg-color-btn-004: #c33; /* button (red) */ + + /* General Background and Border Colors (Grayscale) */ + --cmg-color-bg-001: #121212; /* background color */ + --cmg-color-bg-002: #151515; /* background color */ + --cmg-color-bg-003: #181818; /* background color */ + --cmg-color-bg-004: #1a1a1a; /* background color */ + --cmg-color-bg-005: #222; /* background color */ + --cmg-color-bg-006: #333; /* border color */ + --cmg-color-bg-007: #444; /* border color */ + --cmg-color-bg-008: #555; /* border color */ + --cmg-color-bg-009: #222; /* data-list background color */ + + /* Highlights: Alerts, Notices, and Badges */ + --cmg-color-highlight-001: #bc6262; /* forms: required and error icons (red) */ + --cmg-color-highlight-002: #ffd; /* forms: focused input (yellow) */ + + --cmg-color-highlight-003: #0B3556; /* alert: info text color (blue) */ + --cmg-color-highlight-004: #d4ecff; /* search bar active (blue) */ + --cmg-color-highlight-005: #212529; /* badge light (light gray) */ + + --cmg-color-highlight-006: #7aad7e; /* alert: success (green) */ + --cmg-color-highlight-007: #28a745; /* alert: success text color, badge outline (green) */ + --cmg-color-highlight-008: #acf4b2; /* alert: success border color (green) */ + + --cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */ + --cmg-color-highlight-010: #41412e; /* alert: warning text color (yellow) */ + --cmg-color-highlight-011: #f6f5ae; /* alert: warning border color (yellow) */ + + --cmg-color-highlight-012: #ffd4d4; /* alert: danger (red) */ + --cmg-color-highlight-013: #e33; /* title for deleted/archived (red) */ + --cmg-color-highlight-014: #dc3545; /* danger badge (red) */ + --cmg-color-highlight-015: #842029; /* alert: danger text color (red) */ + --cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */ + + /* Duet Date Picker Colors */ + --duet-color-primary: #06c; + --duet-color-text: #222; + --duet-color-text-active: #fff; + --duet-color-placeholder: #666; + --duet-color-button: #f5f5f5; + --duet-color-surface: #fff; + --duet-color-overlay: rgba(0, 0, 0, 0.8); + --duet-color-border: #222; }