diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
index 634f7a87f..26ff9fcbf 100644
--- a/app/resources/locales/en_US/menu.po
+++ b/app/resources/locales/en_US/menu.po
@@ -162,9 +162,24 @@ msgstr "Switch CO"
msgid "menu.advanced"
msgstr "Advanced Menu"
+msgid "menu.darkmode"
+msgstr "Dark mode"
+
+msgid "menu.density.small"
+msgstr "Density small"
+
+msgid "menu.density.medium"
+msgstr "Density medium"
+
+msgid "menu.density.large"
+msgstr "Density large"
+
msgid "menu.main"
msgstr "Main Menu"
+msgid "menu.settings"
+msgstr "Settings"
+
msgid "menu.user"
msgstr "User Menu"
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index 0933962e4..5cf9718fb 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -252,6 +252,19 @@
});
+ // SETTINGS (from User Menu)
+ // Dark Mode toggle
+ $("#dark-mode-toggle").click(function(e) {
+ e.preventDefault();
+ $('html').toggleClass('dark-mode');
+ });
+
+ // Test for dark mode OS preference, and add the 'dark-mode' body class by default if it is present.
+ const darkModeOsEnabled = window.matchMedia("(prefers-color-scheme: dark)");
+ if(darkModeOsEnabled.matches) {
+ $('html').addClass('dark-mode');
+ }
+
});
// Define default text for confirm dialog
diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php
index 980a9368e..0040ae7a2 100644
--- a/app/templates/element/menuTop.php
+++ b/app/templates/element/menuTop.php
@@ -67,11 +67,11 @@ class="dropdown-toggle top-menu-button"
Settings
1): // More than one CO is available, so present the switch button ?>
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
index 2f220b2f7..2e4f07940 100644
--- a/app/templates/layout/default.php
+++ b/app/templates/layout/default.php
@@ -41,6 +41,7 @@
Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+ Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
Html->charset(); ?>
<?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?>
diff --git a/app/templates/layout/error.php b/app/templates/layout/error.php
index 5e1b83a58..d67e68fb1 100644
--- a/app/templates/layout/error.php
+++ b/app/templates/layout/error.php
@@ -41,6 +41,7 @@
Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+ Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
Html->charset() ?>
<?= $this->fetch('title') ?>
diff --git a/app/templates/layout/iframe.php b/app/templates/layout/iframe.php
index 13aae2d7b..8ef538067 100644
--- a/app/templates/layout/iframe.php
+++ b/app/templates/layout/iframe.php
@@ -41,6 +41,7 @@
Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+ Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
Html->charset(); ?>
<?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index b1e9adc8e..d152e5ee0 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -32,12 +32,13 @@ html * {
font-family: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif;
}
body {
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
+ background-color: var(--cmg-color-body-bg);
-webkit-overflow-scrolling: touch; /* for dialog boxes */
font-size: 14px; /* base font size */
}
h1,h2,h3,h4,h5 {
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
}
h1 {
font-size: 2em;
@@ -59,12 +60,12 @@ h3 {
margin: 0;
}
a {
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
text-decoration: none;
}
#main a:active,
#main a:hover {
- color: var(--cmg-color-blue-002);
+ color: var(--cmg-color-link-hover);
text-decoration: underline;
}
#main a.ui-widget:active,
@@ -82,8 +83,8 @@ a {
}
#skip-to-content {
position: relative;
- background-color: var(--cmg-color-blue-001);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-link);
+ color: var(--cmg-color-txt-inverse);
padding: 0 1em 0.25em ;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
@@ -93,7 +94,7 @@ a {
#skip-to-content:focus {
top: 0;
transition: top 0.1s ease-in 0s, background 0.5s linear 0s;
- background-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-link-hover);
}
/* HEADER */
#banner {
@@ -102,8 +103,8 @@ a {
align-items: end;
padding: 1em;
margin: 0;
- background-color: var(--cmg-color-blue-002);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-banner);
+ color: var(--cmg-color-txt-inverse);
}
#logo-title-wrapper {
white-space: nowrap;
@@ -115,7 +116,7 @@ a {
margin: 0;
}
#banner a {
- color: var(--cmg-color-white);
+ color: var(--cmg-color-txt-inverse);
text-decoration: none;
}
#user-defined-links-top ul {
@@ -141,7 +142,7 @@ a {
justify-content: space-between;
align-items: center;
padding: 0;
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
min-height: 47px;
}
body.logged-out #top-bar,
@@ -174,11 +175,11 @@ body.cos.select #top-bar {
/* GLOBAL SEARCH */
#global-search {
width: 100%;
- background-color: var(--cmg-color-lightgray-003);
+ background-color: var(--cmg-color-bg-003);
border-radius: 0;
border: none;
- border-top: 1px solid var(--cmg-color-lightgray-006);
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-top: 1px solid var(--cmg-color-bg-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
}
#global-search form {
display: flex;
@@ -189,19 +190,19 @@ body.cos.select #top-bar {
padding-left: 0.5em;
width: 100%;
border-radius: 0;
- border: 1px solid var(--cmg-color-lightgray-006);
+ border: 1px solid var(--cmg-color-bg-006);
}
#global-search-button {
- background-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-btn-bg-001);
color: white;
border-radius: 0 3px 3px 0;
}
#global-search-clear {
display: none; /* will only appear if input holds a value */
- background-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-btn-bg-001);
border-radius: 0;
- color: var(--cmg-color-white);
- border-right: 1px dotted var(--cmg-color-gray-004);
+ color: var(--cmg-color-txt-inverse);
+ border-right: 1px dotted var(--cmg-color-highlight-005);
}
#q.hasValue + #global-search-clear {
display: inline-block;
@@ -226,7 +227,7 @@ body.cos.select #top-bar {
display: none;
}
#top-menu li a.dropdown-toggle {
- color: var(--cmg-color-white);
+ color: var(--cmg-color-txt-inverse);
}
#top-menu li a.dropdown-toggle:hover {
text-decoration: none;
@@ -239,9 +240,9 @@ body.cos.select #top-bar {
vertical-align: middle;
}
#user-panel {
- color: var(--cmg-color-gray-001);
- background-color: var(--cmg-color-lightgray-002);
- border: 1px solid var(--cmg-color-lightgray-005);
+ color: var(--cmg-color-body-txt);
+ background-color: var(--cmg-color-bg-002);
+ border: 1px solid var(--cmg-color-bg-005);
padding: 0;
margin: 9px 0 0;
min-width: 100vw;
@@ -263,7 +264,7 @@ body.cos.select #top-bar {
word-wrap:break-word;
}
#user-panel-user-info { /* mobile only styling */
- border-top: 1px solid var(--cmg-color-lightgray-006);
+ border-top: 1px solid var(--cmg-color-bg-006);
padding: 1em;
}
#user-panel-user-info .material-icons {
@@ -271,20 +272,20 @@ body.cos.select #top-bar {
font-size: 5em;
}
#user-panel .co-info-topbox {
- background-color: var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
margin-top: 2em;
}
#user-panel .co-info-topbox strong {
font-weight: normal;
}
#user-panel #co-profile-link:hover {
- background-color: var(--cmg-color-lightgray-005);
+ background-color: var(--cmg-color-bg-005);
}
#user-panel #co-profile-link .material-icons {
vertical-align: middle;
margin-right: 0.25em;
font-size: 16px;
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
}
#user-panel h2 {
font-size: 1.1em;
@@ -293,7 +294,7 @@ body.cos.select #top-bar {
}
#user-panel #panel-orgid-container {
margin-top: 2em;
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--cmg-color-bg-006);
padding-top: 1em;
}
#user-panel #panel-orgid-container h2 {
@@ -313,7 +314,7 @@ body.cos.select #top-bar {
#user-panel #user-panel-switch-co {
clear: both;
text-align: center;
- border-top: 1px solid var(--cmg-color-lightgray-006);
+ border-top: 1px solid var(--cmg-color-bg-006);
margin-top: 2.5em;
padding: 0;
}
@@ -369,23 +370,23 @@ body.cos.select #top-bar {
border-radius: 0;
}
.co-alert.alert-success {
- background-color: var(--cmg-color-green-001);
- border-color: var(--cmg-color-green-003);
+ background-color: var(--cmg-color-highlight-006);
+ border-color: var(--cmg-color-highlight-008);
}
.co-alert.alert-warning {
- background-color: var(--cmg-color-yellow-001);
- color: var(--cmg-color-yellow-002);
- border-color: var(--cmg-color-yellow-003);
+ background-color: var(--cmg-color-highlight-009);
+ color: var(--cmg-color-highlight-010);
+ border-color: var(--cmg-color-highlight-011);
}
.co-alert.alert-danger {
- background-color: var(--cmg-color-red-001);
- color: var(--cmg-color-red-006);
- border-color: var(--cmg-color-red-007);
+ background-color: var(--cmg-color-highlight-012);
+ color: var(--cmg-color-highlight-015);
+ border-color: var(--cmg-color-highlight-016);
}
.co-alert.alert-information {
- background-color: var(--cmg-color-blue-006);
- color: var(--cmg-color-blue-005);
- border-color: var(--cmg-color-blue-001);
+ background-color: var(--cmg-color-highlight-004);
+ color: var(--cmg-color-highlight-003);
+ border-color: var(--cmg-color-link);
}
.co-alert .alert-icon {
margin-right: 0.1rem;
@@ -414,9 +415,9 @@ ul.form-list li.alert-banner .co-alert {
display: none;
position: absolute;
z-index: 20;
- border-right: 1px solid var(--cmg-color-lightgray-006);
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
- background-color: var(--cmg-color-white);
+ border-right: 1px solid var(--cmg-color-bg-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
+ background-color: var(--cmg-color-body-bg);
}
#navigation-drawer.visible {
display: block;
@@ -436,7 +437,7 @@ ul.form-list li.alert-banner .co-alert {
list-style: none;
}
#main-menu > li {
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
display: flex;
justify-content: space-between;
align-items: center;
@@ -447,17 +448,17 @@ ul.form-list li.alert-banner .co-alert {
margin: 0;
padding: 1rem;
text-decoration: none;
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
position: relative;
overflow:hidden;
width: 100%;
}
#main-menu > li a:hover,
#main-menu > li a:focus {
- background-color: var(--cmg-color-lightgray-005);
+ background-color: var(--cmg-color-bg-005);
}
#main-menu a.selected {
- background-color: var(--cmg-color-lightgray-007);
+ background-color: var(--cmg-color-bg-007);
}
#main-menu .material-icons {
margin-right: 6px;
@@ -478,15 +479,15 @@ ul.form-list li.alert-banner .co-alert {
z-index: 200;
padding: 1rem;
width: 100vw;
- border-right: 1px solid var(--cmg-color-lightgray-006);
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-right: 1px solid var(--cmg-color-bg-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
text-align: left;
- background-color: var(--cmg-color-white);
- -webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003);
- box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003);
+ background-color: var(--cmg-color-body-bg);
+ -webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003);
+ box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003);
}
#main-menu .menu-panel a {
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
}
#main-menu .menu-panel li a:hover,
#main-menu .menu-panel li a:focus {
@@ -503,23 +504,23 @@ ul.form-list li.alert-banner .co-alert {
position: absolute;
right: 0;
top: 0;
- color: #666;
+ color: var(--cmg-color-txt-soft);
padding: 1rem;
line-height: 1.2rem;
}
#main-menu .menu-panel-primary-link-text h3 {
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
padding: 0;
font-weight: 500;
}
#main-menu a.menu-panel-primary-link {
display: flex;
align-items: center;
- border: 1px solid var(--cmg-color-white);
+ border: 1px solid var(--cmg-color-body-bg);
}
#main-menu .menu-panel-links a.menu-panel-primary-link:hover {
background-color: transparent;
- border: 1px solid var(--cmg-color-lightgray-006);
+ border: 1px solid var(--cmg-color-bg-006);
}
#main-menu .menu-panel-links a.menu-panel-primary-link:hover h3 {
text-decoration: underline;
@@ -540,7 +541,7 @@ ul.form-list li.alert-banner .co-alert {
font-size: 2.5rem;
margin-right: 0.75rem;
display: inline;
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
}
#main-menu .menu-panel-links li {
margin-bottom: 1em;
@@ -574,7 +575,7 @@ ul.form-list li.alert-banner .co-alert {
font-size: 0.9em;
}
.menu-panel-link-desc {
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
}
.menu-panel .az-link {
position: absolute;
@@ -620,8 +621,8 @@ ul.form-list li.alert-banner .co-alert {
}
.pageTitle .deleted,
.pageTitle .archived {
- background-color: var(--cmg-color-red-003);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-highlight-013);
+ color: var(--cmg-color-txt-inverse);
font-size: 0.7em;
font-weight: 600;
letter-spacing: 0.8px;
@@ -630,7 +631,7 @@ ul.form-list li.alert-banner .co-alert {
text-transform: uppercase;
}
.pageTitle .archived {
- background-color: var(--cmg-color-gray-003);
+ background-color: var(--cmg-color-txt-soft);
}
/* SUBNAVIGATION & TABS */
.supertitle {
@@ -655,10 +656,10 @@ ul.form-list li.alert-banner .co-alert {
.cm-subnav-tabs .nav-link {
text-transform: uppercase;
padding: 1em 1.5em;
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
}
.cm-subnav-links .nav-link.active {
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
}
.cm-subnav-links ul.list-inline {
margin: 0.5em 0 0 0;
@@ -671,11 +672,11 @@ ul.form-list li.alert-banner .co-alert {
padding: 0 1.5em 0.5em 0;
}
#external-id-role {
- border-top: 1px solid var(--cmg-color-lightgray-006);
+ border-top: 1px solid var(--cmg-color-bg-006);
}
#external-id-role h3 {
padding: 0.5rem 1rem;
- background-color: var(--cmg-color-lightgray-003);
+ background-color: var(--cmg-color-bg-003);
}
#external-id-role-nav {
margin-left: 1rem;
@@ -712,21 +713,21 @@ ul.form-list li.alert-banner .co-alert {
}
#search-results li.search-result {
padding: 0;
- border: 1px dashed var(--cmg-color-lightgray-008);
+ border: 1px dashed var(--cmg-color-bg-008);
}
#search-results li.search-result a {
display: block;
padding: 1em;
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
height: 100%;
}
#search-results li.search-result a:hover,
#search-results li.search-result a:focus-visible {
text-decoration: none;
- background-color: var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
}
#search-results .search-result-name {
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
}
#search-results .search-result-match-info {
font-size: 0.8em;
@@ -738,7 +739,7 @@ ul.form-list li.alert-banner .co-alert {
.top-filters {
margin-top: 0.5em;
padding: 0;
- border: 1px solid var(--cmg-color-lightgray-005);
+ border: 1px solid var(--cmg-color-bg-005);
}
#content .top-filters legend button.cm-toggle {
position: absolute;
@@ -748,7 +749,7 @@ ul.form-list li.alert-banner .co-alert {
}
#content .top-filters legend .material-icons {
font-size: 1.4em;
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
}
#content .top-filters legend button.cm-toggle .material-icons {
font-size: 34px;
@@ -759,14 +760,14 @@ ul.form-list li.alert-banner .co-alert {
position: relative;
padding: 0.5em 0.5em 0;
margin: 0;
- background-color: var(--cmg-color-lightgray-001);
+ background-color: var(--cmg-color-bg-001);
}
.top-filters.open fieldset {
padding-bottom: 0.5em;
}
.top-filters legend {
width: 100%;
- background-color: var(--cmg-color-lightgray-001);
+ background-color: var(--cmg-color-bg-001);
line-height: 1.8em;
cursor: pointer;
font-size: 1em;
@@ -790,8 +791,8 @@ ul.form-list li.alert-banner .co-alert {
margin: 0 0 0.5em 0;
height: 28px;
padding: 2px 4px;
- border: 1px solid var(--cmg-color-lightgray-006);
- background-color: var(--cmg-color-white);
+ border: 1px solid var(--cmg-color-bg-006);
+ background-color: var(--cmg-color-body-bg);
}
.top-filters label {
margin-bottom: 0;
@@ -804,7 +805,7 @@ ul.form-list li.alert-banner .co-alert {
}
.top-filters input[type=text]:focus,
.side-search input[type=text]:focus {
- background-color: var(--cmg-color-yellow-004);
+ background-color: var(--cmg-color-highlight-002);
}
.top-filters .submit-button,
.top-filters .clear-button {
@@ -842,11 +843,11 @@ ul.form-list li.alert-banner .co-alert {
box-shadow: none;
text-transform: none;
font-size: 0.8em;
- border: 1px solid var(--cmg-color-lightgray-007);
+ border: 1px solid var(--cmg-color-bg-007);
}
.top-filters-active-filter.btn.btn-sm:hover {
- background-color: var(--cmg-color-lightgray-006);
- color: black !important;
+ background-color: var(--cmg-color-bg-006);
+ color: var(--cmg-color-btn-bg-002) !important;
}
.top-filters-active-filter-title::after {
content: ": ";
@@ -857,10 +858,10 @@ ul.form-list li.alert-banner .co-alert {
.top-filters-active-filters-remove button {
margin-left: 2em;
font-size: 0.9em;
- background-color: var(--cmg-color-lightgray-003);
+ background-color: var(--cmg-color-bg-003);
}
.top-filters-active-filters-remove button:hover {
- background-color: var(--cmg-color-lightgray-005);
+ background-color: var(--cmg-color-bg-005);
}
.filter-datepicker-lbl {
white-space: nowrap;
@@ -878,11 +879,11 @@ ul.form-list li.alert-banner .co-alert {
padding-left: 2em;
}
.config-menu a .material-icons {
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
margin-right: 0.5em;
}
#platform-menu {
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
padding-bottom: 1em;
}
/* INDEX ACTION COMMAND MENUS */
@@ -898,18 +899,18 @@ a.action-menu-toggle {
padding: 0.5em 1em;
}
#main .field-actions a.dropdown-item:hover {
- color: var(--cmg-color-black);
+ color: var(--cmg-color-btn-bg-002);
text-decoration: none;
}
.dropdown-item.active,
.dropdown-item:active {
- background-color: var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
}
a.dropdown-item.deletebutton {
- color: var(--cmg-color-red-002);
+ color: var(--cmg-color-highlight-001);
}
.dropdown-item.bottom-border {
- border-bottom: 1px solid var(--cmg-color-lightgray-005);
+ border-bottom: 1px solid var(--cmg-color-bg-005);
}
/* INDEX ACTION BULK EDIT */
.field-actions.top-links #bulk-edit-switch-container {
@@ -937,8 +938,8 @@ table.index-table .form-check {
margin: 0;
min-height: 1.5em;
padding: 0.5em 1em;
- background-color: var(--cmg-color-blue-002);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-btn-bg-001);
+ color: var(--cmg-color-txt-inverse);
text-align: center;
}
#pagination ul,
@@ -949,10 +950,10 @@ table.index-table .form-check {
padding: 0;
}
#pagination a {
- color: var(--cmg-color-white);
+ color: var(--cmg-color-txt-inverse);
}
#pagination a:hover {
- color: var(--cmg-color-lightgray-002);
+ color: var(--cmg-color-bg-002);
text-decoration: underline;
}
#pagination .paginationNumbers a {
@@ -985,8 +986,8 @@ table.index-table .form-check {
margin: 0;
padding: 2px;
font-size: 0.9em;
- background-color: var(--cmg-color-lightgray-004);
- border: 1px solid var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
+ border: 1px solid var(--cmg-color-bg-004);
border-radius: 0.25rem;
text-align: center;
}
@@ -998,8 +999,8 @@ table.index-table .form-check {
line-height: unset;
width: unset;
height: unset;
- border: 1px solid var(--cmg-color-lightgray-001);
- background-color: var(--cmg-color-lightgray-001);
+ border: 1px solid var(--cmg-color-bg-001);
+ background-color: var(--cmg-color-bg-001);
}
#pagination .pagination-form option {
padding: 0;
@@ -1020,14 +1021,14 @@ table.index-table .form-check {
top: 1px;
}
#pagination .btn-primary {
- background-color: var(--cmg-color-blue-002);
- border-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-btn-bg-001);
+ border-color: var(--cmg-color-btn-bg-001);
}
#pagination .btn-primary:hover,
#pagination .btn-primary:focus,
#pagination .btn-primary:active {
- background-color: var(--cmg-color-gray-001) !important;
- border-color: var(--cmg-color-black);
+ background-color: var(--cmg-color-body-txt) !important;
+ border-color: var(--cmg-color-btn-bg-002);
}
#pagination div.submit,
#pagination div.select {
@@ -1080,7 +1081,7 @@ h2.card-title {
}
h2.card-title a {
display: block;
- color: var(--cmg-color-gray-002);
+ color: var(--cmg-color-headings);
}
#main h2.card-title a:hover {
text-decoration: none;
@@ -1088,7 +1089,7 @@ h2.card-title a {
.field-data-container .id-col {
text-align: right;
padding-right: 1em;
- color: var(--cmg-color-gray-003);
+ color: var(--cmg-color-txt-soft);
font-size: 0.8em;
}
/* DATA LISTS */
@@ -1098,10 +1099,10 @@ ul.data-list {
ul.data-list li {
margin: 0 0 2px;
padding: 2px 0 3px 0;
- background-color: var(--cmg-color-lightgray-003);
+ background-color: var(--cmg-color-bg-003);
}
ul.data-list li:nth-child(2n) {
- background-color: var(--cmg-color-lightgray-009); /* note that this is slightly lighter than the .form-list zebra */
+ background-color: var(--cmg-color-bg-009); /* note that this is slightly lighter than the .form-list zebra */
}
ul.data-table li {
background-color: unset;
@@ -1123,21 +1124,21 @@ above. ***/
ul.form-list {
clear: both;
padding: 0;
- border-top: 1px solid var(--cmg-color-lightgray-005);
+ border-top: 1px solid var(--cmg-color-bg-005);
}
.cm-time-picker-vals ul li,
ul.form-list li {
- background-color: var(--cmg-color-lightgray-001);
- border-left: 1px solid var(--cmg-color-lightgray-005);
- border-bottom: 1px solid var(--cmg-color-lightgray-005);
- border-right: 1px solid var(--cmg-color-lightgray-005);
+ background-color: var(--cmg-color-bg-001);
+ border-left: 1px solid var(--cmg-color-bg-005);
+ border-bottom: 1px solid var(--cmg-color-bg-005);
+ border-right: 1px solid var(--cmg-color-bg-005);
margin: 0;
padding: 0.75em;
list-style: none;
}
.cm-time-picker-vals ul li:nth-child(even),
ul.form-list li:nth-child(even) {
- background-color: var(--cmg-color-white);
+ background-color: var(--cmg-color-body-bg);
}
ul.form-list li.fields-submit {
background-color: unset;
@@ -1154,7 +1155,7 @@ ul.form-list .field-desc {
font-style: italic;
}
ul.form-list .fields-header {
- background-color: var(--cmg-color-white);
+ background-color: var(--cmg-color-body-bg);
}
ul.form-list input[type="text"],
ul.form-list input[type="number"],
@@ -1164,13 +1165,13 @@ ul.form-list input[type="password"] {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
- border: 1px solid var(--cmg-color-lightgray-007);
+ border: 1px solid var(--cmg-color-bg-007);
padding: 4px 6px;
}
ul.form-list input[type="text"]:focus,
ul.form-list input[type="number"]:focus,
ul.form-list input[type="password"]:focus {
- background-color: var(--cmg-color-yellow-004);
+ background-color: var(--cmg-color-highlight-002);
}
ul.form-list select {
font-size: 0.9em;
@@ -1184,18 +1185,18 @@ ul.field-children {
}
ul.field-children li {
margin: 0;
- border-left: 1px solid var(--cmg-color-lightgray-007);
- border-right: 1px solid var(--cmg-color-lightgray-007);
- border-bottom: 1px solid var(--cmg-color-lightgray-007);
+ border-left: 1px solid var(--cmg-color-bg-007);
+ border-right: 1px solid var(--cmg-color-bg-007);
+ border-bottom: 1px solid var(--cmg-color-bg-007);
}
ul.field-children li:nth-child(1) {
- border-top: 1px solid var(--cmg-color-lightgray-007);
+ border-top: 1px solid var(--cmg-color-bg-007);
}
ul.field-children li:nth-child(odd) {
- background-color: var(--cmg-color-lightgray-002);
+ background-color: var(--cmg-color-bg-002);
}
ul.field-children li:nth-child(even) {
- background-color: var(--cmg-color-lightgray-006);
+ background-color: var(--cmg-color-bg-006);
}
ul.form-list li.field-stack .field-name,
ul.form-list li.field-stack .field-info {
@@ -1249,7 +1250,7 @@ ul.form-list .field-suppliment {
box-shadow: none;
}
.duet-date__toggle:focus {
- border: 1px dotted var(--cmg-color-black);
+ border: 1px dotted var(--cmg-color-btn-bg-002);
box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* override Duet to be same as Bootstrap */
}
table.duet-date__table tr th:first-child,
@@ -1299,8 +1300,8 @@ ul.fields li.fields-datepicker .field-info {
z-index: 100;
right: 0;
width: auto;
- background-color: white;
- border: 1px solid var(--cmg-color-lightgray-006);
+ background-color: var(--cmg-color-body-bg);
+ border: 1px solid var(--cmg-color-bg-006);
text-align: center;
border-radius: 4px;
align-items: center;
@@ -1308,7 +1309,7 @@ ul.fields li.fields-datepicker .field-info {
}
.cm-time-picker-title {
padding: 0.25em;
- border-bottom: 1px solid var(--cmg-color-lightgray-005);
+ border-bottom: 1px solid var(--cmg-color-bg-005);
font-size: 1.1em;
}
.cm-time-picker-vals ul {
@@ -1337,8 +1338,8 @@ ul.form-list .cm-time-picker-vals li {
margin: 0;
}
.cm-time-picker-vals button:focus {
- background-color: var(--cmg-color-blue-002);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-btn-bg-001);
+ color: var(--cmg-color-txt-inverse);
border-radius: 14px;
}
.cm-time-picker-colon {
@@ -1358,12 +1359,12 @@ ul.form-list .cm-time-picker-vals li {
position: absolute;
border: none;
right: 2.5em;
- color: var(--cmg-color-gray-003);
+ color: var(--cmg-color-txt-soft);
background-color: unset;
}
/* DIALOG BOX */
#dialog .modal-header {
- background-color: var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
border-bottom: none;
}
#dialog .modal-footer {
@@ -1375,7 +1376,7 @@ ul.form-list .cm-time-picker-vals li {
}
.mvea-modal .modal-header {
padding: 0.5rem 1rem;
- background-color: var(--cmg-color-lightgray-004);
+ background-color: var(--cmg-color-bg-004);
border-bottom: none;
}
.mvea-modal .modal-content {
@@ -1422,7 +1423,7 @@ address {
font-size: 0.9em;
}
.required {
- color: var(--cmg-color-red-002);
+ color: var(--cmg-color-highlight-001);
}
.center {
text-align: center;
@@ -1434,7 +1435,7 @@ address {
overflow-wrap: anywhere;
}
.text-muted-cmg {
- color: var(--cmg-color-gray-003) !important;
+ color: var(--cmg-color-txt-soft) !important;
}
.cm-id-display {
margin-left: 1em;
@@ -1448,11 +1449,11 @@ address {
}
.warn-level-a,
.warn-level-a td {
- background-color: var(--cmg-color-red-001);
+ background-color: var(--cmg-color-highlight-012);
}
.warn-level-b,
.warn-level-b td {
- background-color: var(--cmg-color-yellow-001);
+ background-color: var(--cmg-color-highlight-009);
}
/* Sortable table headings and icons */
a.asc,
@@ -1469,18 +1470,18 @@ a.desc::after {
border: 4px solid transparent;
}
a.asc::after {
- border-bottom-color: var(--cmg-color-blue-001);
+ border-bottom-color: var(--cmg-color-link);
margin-bottom: 3px;
}
a.desc::after {
- border-top-color: var(--cmg-color-blue-001);
+ border-top-color: var(--cmg-color-link);
margin-bottom: -3px;
}
/* CO GRID LAYOUT; currently used only on CO Selection */
.co-grid {
clear: both;
max-width: 100%;
- border-bottom: 1px solid var(--cmg-color-lightgray-005);
+ border-bottom: 1px solid var(--cmg-color-bg-005);
}
.co-grid .col {
margin: 0;
@@ -1490,7 +1491,7 @@ a.desc::after {
font-weight: bold;
}
.co-grid .co-row {
- border-top: 1px solid var(--cmg-color-lightgray-005);
+ border-top: 1px solid var(--cmg-color-bg-005);
}
code,
.fixed-width * {
@@ -1500,8 +1501,8 @@ code,
table {
width: 100%;
border-collapse: collapse;
- border-left: 1px solid var(--cmg-color-lightgray-005);
- border-right: 1px solid var(--cmg-color-lightgray-005);
+ border-left: 1px solid var(--cmg-color-bg-005);
+ border-right: 1px solid var(--cmg-color-bg-005);
}
.table-container {
overflow: auto;
@@ -1512,11 +1513,10 @@ th, td {
text-align: left;
}
th {
- background-color: var(--cmg-color-lightgray-003);
- color: var(--cmg-color-black);
+ background-color: var(--cmg-color-bg-003);
}
td {
- border-bottom: 1px solid var(--cmg-color-lightgray-005);
+ border-bottom: 1px solid var(--cmg-color-bg-005);
}
th:first-child,
td:first-child {
@@ -1539,10 +1539,10 @@ tr.noborder td {
border: none;
}
td.indented {
- border-left: 3em solid var(--cmg-color-white);
+ border-left: 3em solid var(--cmg-color-body-bg);
}
table.index-table tr:hover td {
- background-color: var(--cmg-color-lightgray-001);
+ background-color: var(--cmg-color-bg-001);
cursor: pointer;
}
table.index-table.with-actions th:nth-child(2),
@@ -1554,7 +1554,7 @@ table.index-table.with-actions td:nth-child(2) {
}
.linked-row:hover,
.linked-row:hover td {
- background-color: var(--cmg-color-lightgray-001) !important;
+ background-color: var(--cmg-color-bg-001) !important;
}
table.list-mode .read-only-link-container {
display: flex;
@@ -1562,7 +1562,7 @@ table.list-mode .read-only-link-container {
align-items: center;
}
.linked-row .read-only-icon {
- color: var(--cmg-color-gray-003);
+ color: var(--cmg-color-txt-soft);
padding: 0 0.5em;
}
/* LOADING ANIMATION & SKELETONS */
@@ -1582,8 +1582,8 @@ table.list-mode .read-only-link-container {
padding: 2em 0;
line-height: 0;
text-align: center;
- background-color: var(--cmg-color-white);
- border: 1px solid var(--cmg-color-lightgray-006);
+ background-color: var(--cmg-color-body-bg);
+ border: 1px solid var(--cmg-color-bg-006);
border-radius: 60px;
}
#co-loading-redirect {
@@ -1604,7 +1604,7 @@ table.list-mode .read-only-link-container {
#co-loading-redirect span,
.co-loading-mini span {
animation: 1.2s linear infinite both loading;
- background-color: var(--cmg-color-blue-003);
+ background-color: var(--cmg-color-spinner);
display: inline-block;
}
#co-loading span {
@@ -1647,7 +1647,7 @@ table.list-mode .read-only-link-container {
padding: 0.5em 1.5em;
}
.btn:focus {
- border: 1px dotted var(--cmg-color-black);
+ border: 1px dotted var(--cmg-color-btn-bg-002);
}
.btn.btn-sm {
font-size: 0.9em;
@@ -1655,45 +1655,45 @@ table.list-mode .read-only-link-container {
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
- background-color: var(--cmg-color-blue-002);
- color: var(--cmg-color-white);
- border-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-btn-bg-001);
+ color: var(--cmg-color-txt-inverse);
+ border-color: var(--cmg-color-btn-bg-001);
}
.btn-primary,
.btn-primary:active {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.btn-primary:hover {
- background-color: var(--cmg-color-black);
- color: var(--cmg-color-white) !important;
- border-color: var(--cmg-color-black);
+ background-color: var(--cmg-color-btn-bg-002);
+ color: var(--cmg-color-txt-inverse) !important;
+ border-color: var(--cmg-color-btn-bg-002);
text-decoration: none !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
- color: var(--cmg-color-white);
- background-color: var(--cmg-color-blue-002);
- border-color: var(--cmg-color-blue-002);
+ color: var(--cmg-color-txt-inverse);
+ background-color: var(--cmg-color-btn-bg-001);
+ border-color: var(--cmg-color-btn-bg-001);
opacity: 0.4;
}
.btn-default,
.btn-default:active {
- background-color: var(--cmg-color-lightgray-005);
+ background-color: var(--cmg-color-bg-005);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.btn-default:hover {
- background-color: var(--cmg-color-blue-002);
- color: var(--cmg-color-white) !important;
+ background-color: var(--cmg-color-btn-bg-001);
+ color: var(--cmg-color-txt-inverse) !important;
text-decoration: none !important;
}
.btn-secondary {
- background-color: var(--cmg-color-red-004);
- color: var(--cmg-color-white);
+ background-color: var(--cmg-color-btn-004);
+ color: var(--cmg-color-txt-inverse);
}
.btn-link {
font-size: 1em;
text-decoration: underline;
- color: var(--cmg-color-blue-002);
+ color: var(--cmg-color-btn-bg-001);
border: none;
}
/*Bootstrap badge*/
@@ -1705,57 +1705,57 @@ table.list-mode .read-only-link-container {
line-height: 1.2em;
}
.bg-light {
- color: var(--cmg-color-gray-004);
+ color: var(--cmg-color-highlight-005);
}
.bg-danger {
- color: var(--cmg-color-white);
- background-color: var(--cmg-color-red-005);
+ color: var(--cmg-color-txt-inverse);
+ background-color: var(--cmg-color-highlight-014);
}
.bg-warning {
- background-color: var(--cmg-color-yellow-001) !important;
- color: var(--cmg-color-yellow-002);
+ background-color: var(--cmg-color-highlight-009) !important;
+ color: var(--cmg-color-highlight-010);
}
.bg-primary {
- background-color: var(--cmg-color-blue-002);
+ background-color: var(--cmg-color-btn-bg-001);
}
.badge.bg-primary {
- background-color: var(--cmg-color-blue-002) !important;
+ background-color: var(--cmg-color-btn-bg-001) !important;
}
.bg-secondary {
- background-color: var(--cmg-color-gray-002);
+ background-color: var(--cmg-color-btn-bg-003);
}
/* Bootstrap bg-outline */
.bg-outline-primary {
- color: var(--cmg-color-blue-002);
- border: 1px solid var(--cmg-color-blue-002);
+ color: var(--cmg-color-btn-bg-001);
+ border: 1px solid var(--cmg-color-btn-bg-001);
}
.bg-outline-info {
- color: var(--cmg-color-blue-004);
- border: 1px solid var(--cmg-color-blue-004);
+ color: var(--cmg-color-highlight-004);
+ border: 1px solid var(--cmg-color-highlight-004);
}
.bg-outline-danger {
- color: var(--cmg-color-red-005);;
- border: 1px solid var(--cmg-color-red-005);;
+ color: var(--cmg-color-highlight-014);
+ border: 1px solid var(--cmg-color-highlight-014);
}
.bg-outline-success {
- color: var(--cmg-color-green-002);
- border: 1px solid var(--cmg-color-green-002);
+ color: var(--cmg-color-highlight-007);
+ border: 1px solid var(--cmg-color-highlight-007);
}
.bg-outline-warning {
- color: var(--cmg-color-yellow-001);
- border: 1px solid var(--cmg-color-yellow-001);
+ color: var(--cmg-color-highlight-009);
+ border: 1px solid var(--cmg-color-highlight-009);
}
.bg-outline-light {
- color: var(--cmg-color-gray-004);
- border: 1px solid var(--cmg-color-gray-004);
+ color: var(--cmg-color-highlight-005);
+ border: 1px solid var(--cmg-color-highlight-005);
}
.bg-outline-secondary {
- color: var(--cmg-color-gray-002);
- border: 1px solid var(--cmg-color-gray-002);
+ color: var(--cmg-color-btn-bg-003);
+ border: 1px solid var(--cmg-color-btn-bg-003);
}
/* Bootstrap Accordion */
.accordion-button:not(.collapsed) {
- background-color: var(--cmg-color-lightgray-001);
+ background-color: var(--cmg-color-bg-001);
}
/* FOOTER */
footer {
@@ -1764,9 +1764,9 @@ footer {
}
/* Select2 */
.select2-container--default .select2-selection--single {
- border: 1px solid var(--cmg-color-lightgray-006);
- background-color: var(--cmg-color-white);
+ border: 1px solid var(--cmg-color-bg-006);
+ background-color: var(--cmg-color-body-bg);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
- color: var(--cmg-color-gray-003);
+ color: var(--cmg-color-txt-soft);
}
\ No newline at end of file
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index c2a60612c..6f5366828 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -27,61 +27,71 @@
* how they are used. Colors are mostly listed in order of prominence: the most pronounced colors
* are represented by the lowest numbers. The order is otherwise arbitrary and new colors can
* be added by appending to the list and incrementing the number.
+ *
+ * Dark mode: the body.dark-mode class will override the defaults (see the lower half of this file).
+ * :root sets the global defaults. body.dark-mode sets the dark mode defaults.
*/
:root {
- /* Blues */
- --cmg-color-blue-001: #06c; /* primary hyperlink color, spinner; accessible on backgrounds down to #e7e7e7 */
- --cmg-color-blue-002: #115791; /* Registry v5.x banner color, submit buttons, .btn-primary,
- primary hyperlink hover color; pagination; accessible on backgrounds down to #c9c9c9 */
- --cmg-color-blue-003: #9fc6e2; /* spinner */
- --cmg-color-blue-004: #17a2b8; /* info badge; XXX check for deprecated */
- --cmg-color-blue-005: #0B3556; /* alert: info text color */
- --cmg-color-blue-006: #d4ecff; /* search bar active */
+ /* COmanage Light Color Scheme (default) */
+
+ /* White and Black */
+ --cmg-color-white: #fff; /* white */
+ --cmg-color-black: #000; /* black */
- /* Dark Grays */
- --cmg-color-gray-001: #222; /* body text */
- --cmg-color-gray-002: #444; /* headings text */
- --cmg-color-gray-003: #666; /* disabled text or form fields */
- --cmg-color-gray-004: #212529; /* badge light */
+ /* Basics */
+ --cmg-color-body-bg: #fff; /* Body background color (white) */
+ --cmg-color-body-txt: #222; /* Body text color (dark gray) */
+ --cmg-color-headings: #444; /* Headings color, material icons, de-emphasized links (dark gray) */
+ --cmg-color-txt-soft: #666; /* Disabled text or form fields (medium gray) - the lightest gray accessible on white */
+ --cmg-color-txt-inverse: #fff; /* Default color for inverted text (i.e. on dark backgrounds) */
- /* Light Grays */
- --cmg-color-lightgray-001: #fafafa; /* background color */
- --cmg-color-lightgray-002: #f8f8f8; /* background color */
- --cmg-color-lightgray-003: #f5f5f5; /* background color */
- --cmg-color-lightgray-004: #f2f2f2; /* background color */
- --cmg-color-lightgray-005: #eee; /* background color */
- --cmg-color-lightgray-006: #ddd; /* border color */
- --cmg-color-lightgray-007: #ccc; /* border color */
- --cmg-color-lightgray-008: #bbb; /* border color */
- --cmg-color-lightgray-009: #ededed; /* data-list background color */
- --cmg-color-lightgray-010: #e8e8e8; /* co-grid background color */
- --cmg-color-lightgray-011: #fcfcfc; /* action dropdown menu background color */
+ /* Banner and Spinner */
+ --cmg-color-banner: #115791; /* Registry v5.x banner color (blue) */
+ --cmg-color-spinner: #9fc6e2; /* spinner / loading animation (blue) */
- /* Greens */
- --cmg-color-green-001: #b4ffba; /* alert: success */
- --cmg-color-green-002: #28a745; /* alert: success text color, badge outline */
- --cmg-color-green-003: #acf4b2; /* alert: success border color */
- --cmg-color-green-004: #dfd; /* highlight: matching fields for reconciliation */
+ /* Links (primary) */
+ --cmg-color-link: #06c; /* primary hyperlink color (blue); accessible on backgrounds down to #e7e7e7 */
+ --cmg-color-link-hover: #115791; /* primary hyperlink hover color (blue); accessible on backgrounds down to #c9c9c9 */
- /* Yellows */
- --cmg-color-yellow-001: #fffeb4; /* alert: warning */
- --cmg-color-yellow-002: #41412e; /* alert: warning text color */
- --cmg-color-yellow-003: #f6f5ae; /* alert: warning border color */
- --cmg-color-yellow-004: #ffd; /* forms: focused input */
+ /* Buttons */
+ --cmg-color-btn-bg-001: #115791; /* primary button background color (blue), submit buttons, .btn-primary, pagination */
+ --cmg-color-btn-bg-002: #000; /* 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: #fafafa; /* background color */
+ --cmg-color-bg-002: #f8f8f8; /* background color */
+ --cmg-color-bg-003: #f5f5f5; /* background color */
+ --cmg-color-bg-004: #f2f2f2; /* background color */
+ --cmg-color-bg-005: #eee; /* background color */
+ --cmg-color-bg-006: #ddd; /* border color */
+ --cmg-color-bg-007: #ccc; /* border color */
+ --cmg-color-bg-008: #bbb; /* border color */
+ --cmg-color-bg-009: #ededed; /* data-list background color */
+
+ /* Highlights: Alerts, Notices, and Badges */
+ --cmg-color-highlight-001: #c00; /* forms: required and error icons (red) */
+ --cmg-color-highlight-002: #ffd; /* forms: focused input (yellow) */
- /* Reds */
- --cmg-color-red-001: #ffd4d4; /* alert: danger */
- --cmg-color-red-002: #c00; /* forms: error icons */
- --cmg-color-red-003: #e33; /* title for deleted/archived */
- --cmg-color-red-004: #c33; /* button */
- --cmg-color-red-005: #dc3545; /* danger badge */
- --cmg-color-red-006: #842029; /* alert: danger text color */
- --cmg-color-red-007: #f8cece; /* alert: danger border color */
+ --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) */
- /* White and Black */
- --cmg-color-white: #fff; /* white */
- --cmg-color-black: #000; /* black */
+ --cmg-color-highlight-006: #b4ffba; /* 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;
@@ -100,3 +110,9 @@
--duet-radius: 4px;
--duet-z-index: 600;
}
+
+html.dark-mode {
+ /* COmange Dark Color Scheme */
+ --cmg-color-body-bg: #222;
+ --cmg-color-body-txt: #f2f2f2;
+}
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 16e838e9a..2ccb1c673 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -54,10 +54,6 @@
font-size: 2em;
line-height: 1.2em;
}
- #logout {
- display: block;
- color: var(--cmg-color-white);
- }
#top-menu .top-menu-link-text {
display: inline;
}
@@ -165,7 +161,7 @@
font-size: 1em;
background-color: transparent;
border: none;
- border-right: 1px solid var(--cmg-color-lightgray-006);
+ border-right: 1px solid var(--cmg-color-bg-006);
padding: 0.5em 0.2em;
}
#global-search form {
@@ -189,7 +185,7 @@
border-radius: 3px;
}
#global-search button.btn-link {
- color: var(--cmg-color-gray-001);
+ color: var(--cmg-color-body-txt);
text-decoration: none;
}
#global-search button.btn-link:hover {
@@ -200,7 +196,7 @@
}
#global-search #global-search-clear {
padding: 0 0.75em;
- border-right: 1px dashed var(--cmg-color-lightgray-006);
+ border-right: 1px dashed var(--cmg-color-bg-006);
}
/* SEARCH RESULTS */
#search-results ul.search-results-group {
@@ -210,7 +206,7 @@
z-index: 30;
}
body.title-hidden #top-menu a.topMenu {
- color: #222;
+ color: var(--cmg-color-body-txt);
}
/* MAIN MENU */
#navigation-drawer {
@@ -243,7 +239,7 @@
padding: 1rem;
background-color: transparent;
border: none;
- color: var(--cmg-color-gray-003);
+ color: var(--cmg-color-txt-003);
}
#co-menu-collapse .co-menu-collapse-icon {
transform: rotate(90deg);
@@ -268,8 +264,8 @@
padding: 1rem 1.5rem;
width: 80vw;
min-height: 520px;
- border-right: 1px solid var(--cmg-color-lightgray-006);
- border-bottom: 1px solid var(--cmg-color-lightgray-006);
+ border-right: 1px solid var(--cmg-color-bg-006);
+ border-bottom: 1px solid var(--cmg-color-bg-006);
}
.menu-panel-content {
display: flex;
@@ -283,7 +279,7 @@
.menu-panel-sidepanel {
padding: 0 2em 1em 3em;
margin-top: 0.5em;
- border-left: 1px solid var(--cmg-color-lightgray-006);
+ border-left: 1px solid var(--cmg-color-bg-006);
width: 30%;
}
.menu-panel .comanage-version {
@@ -380,7 +376,7 @@
padding: 0 0.5em;
}
#main .field-actions.top-links a.dropdown-item:hover {
- color: var(--cmg-color-blue-001);
+ color: var(--cmg-color-link);
text-decoration: underline;
}
.field-actions.top-links a.dropdown-item:hover {