Skip to content

Commit

Permalink
Clean-up more styles for dark mode. (CFM-239)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arlen
arlen committed Jun 13, 2023
1 parent 14cf5ff commit 60120f0
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 16 deletions.
12 changes: 6 additions & 6 deletions app/templates/element/javascript.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
42 changes: 41 additions & 1 deletion app/webroot/css/co-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -653,13 +654,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;
Expand Down Expand Up @@ -942,6 +949,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;
Expand Down Expand Up @@ -1167,6 +1177,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,
Expand All @@ -1175,6 +1187,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;
Expand Down Expand Up @@ -1370,6 +1385,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;
Expand Down Expand Up @@ -1639,6 +1658,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;
Expand Down Expand Up @@ -1753,10 +1775,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;
Expand Down
74 changes: 65 additions & 9 deletions app/webroot/css/co-color.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) */
Expand Down Expand Up @@ -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;
}

0 comments on commit 60120f0

Please sign in to comment.