diff --git a/administrator/components/com_associations/src/Helper/AssociationsHelper.php b/administrator/components/com_associations/src/Helper/AssociationsHelper.php index 5fd7523383e18..bdc6199a01f04 100644 --- a/administrator/components/com_associations/src/Helper/AssociationsHelper.php +++ b/administrator/components/com_associations/src/Helper/AssociationsHelper.php @@ -296,7 +296,7 @@ public static function getAssociationHtmlList($extensionName, $typeName, $itemId $title = Text::_('COM_ASSOCIATIONS_NO_ASSOCIATION'); $additional = $addLink ? Text::_('COM_ASSOCIATIONS_ADD_NEW_ASSOCIATION') : ''; - $labelClass = 'bg-warning text-dark'; + $labelClass = 'bg-warning'; $target = $langCode . ':0:add'; $allow = $canCreate; } diff --git a/administrator/components/com_banners/tmpl/clients/default.php b/administrator/components/com_banners/tmpl/clients/default.php index 9a42b37510cd6..7d47f26e5afe4 100644 --- a/administrator/components/com_banners/tmpl/clients/default.php +++ b/administrator/components/com_banners/tmpl/clients/default.php @@ -152,7 +152,7 @@ - count_archived; ?> diff --git a/administrator/components/com_content/tmpl/articles/default.php b/administrator/components/com_content/tmpl/articles/default.php index 8e4de53ff1c4f..83b3e287a6a36 100644 --- a/administrator/components/com_content/tmpl/articles/default.php +++ b/administrator/components/com_content/tmpl/articles/default.php @@ -362,7 +362,7 @@ - + rating; ?> diff --git a/administrator/components/com_content/tmpl/featured/default.php b/administrator/components/com_content/tmpl/featured/default.php index 78eb2e0a62bf1..e4569f65d687d 100644 --- a/administrator/components/com_content/tmpl/featured/default.php +++ b/administrator/components/com_content/tmpl/featured/default.php @@ -358,7 +358,7 @@ - + rating; ?> diff --git a/administrator/components/com_finder/tmpl/maps/default.php b/administrator/components/com_finder/tmpl/maps/default.php index b24d64cacabfc..978750df7b58d 100644 --- a/administrator/components/com_finder/tmpl/maps/default.php +++ b/administrator/components/com_finder/tmpl/maps/default.php @@ -114,7 +114,7 @@ rgt - $item->lft > 1) : ?> - rgt - $item->lft) / 2); ?> + rgt - $item->lft) / 2); ?> - @@ -53,7 +53,7 @@ - + diff --git a/administrator/templates/atum/component.php b/administrator/templates/atum/component.php index 5ae3e831c2917..daedd4ba0addb 100644 --- a/administrator/templates/atum/component.php +++ b/administrator/templates/atum/component.php @@ -22,6 +22,9 @@ $linkColor = $this->params->get('link-color', '#2a69b8'); list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x"); +$linkColorDark = $this->params->get('link-color-dark', '#6fbfdb'); +list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x"); + // Enable assets $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) ->useStyle('template.active.language') @@ -34,7 +37,11 @@ --link-color: ' . $linkColor . '; --link-color-rgb: ' . $r . ',' . $g . ',' . $b . '; --template-special-color: ' . $this->params->get('special-color', 'var(--template-special-color)') . '; - }'); + }') + ->addInlineStyle('@media (prefers-color-scheme: dark) { :root { + --link-color: ' . $linkColorDark . '; + --link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . '; + }}'); // No template.js for modals $wa->disableScript('template.atum'); diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php index d0cf76da2a57c..03d6696c0994a 100644 --- a/administrator/templates/atum/index.php +++ b/administrator/templates/atum/index.php @@ -64,8 +64,20 @@ $linkColor = $this->params->get('link-color', '#2a69b8'); list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x"); -$linkColorDark = $this->params->get('link-color-dark', '#7fa5d4'); +$linkColorDark = $this->params->get('link-color-dark', '#6fbfdb'); list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x"); +list($lighterRd, $lighterGd, $lighterBd) = adjustColorLightness($rd, $gd, $bd, 10); + +$linkColorDarkHvr = sprintf("%d, %d, %d", $lighterRd, $lighterGd, $lighterBd); + +function adjustColorLightness($r, $g, $b, $percent) +{ + $adjust = function ($color) use ($percent) { + $newColor = $color + ($color * $percent / 100); + return min(max(0, $newColor), 255); + }; + return [$adjust($r), $adjust($g), $adjust($b)]; +} // Enable assets $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) @@ -83,6 +95,8 @@ ->addInlineStyle('@media (prefers-color-scheme: dark) { :root { --link-color: ' . $linkColorDark . '; --link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . '; + --link-color-rgb-hvr: ' . $linkColorDarkHvr . '; + --template-special-color: #6fbfdb; }}'); // Override 'template.active' asset to set correct ltr/rtl dependency diff --git a/administrator/templates/atum/templateDetails.xml b/administrator/templates/atum/templateDetails.xml index 41cd585b6e1f3..d52030113b113 100644 --- a/administrator/templates/atum/templateDetails.xml +++ b/administrator/templates/atum/templateDetails.xml @@ -91,7 +91,7 @@ name="link-color-dark" type="color" label="TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_DARK_LABEL" - default="#7fa5d4" + default="#6fbfdb" filter="color" /> { if (output.data.output) { resultContainer.appendChild(createEl('div', Joomla.Text._('COM_SCHEDULER_TEST_RUN_OUTPUT').replace('%s', '').replace('
', ''))); - resultContainer.appendChild(createEl('pre', output.data.output, ['bg-light', 'p-2'])); + resultContainer.appendChild(createEl('pre', output.data.output, ['bg-body', 'p-2'])); } complete(true); diff --git a/build/media_source/plg_installer_webinstaller/scss/client.scss b/build/media_source/plg_installer_webinstaller/scss/client.scss index 654258085bf56..bcccf58dd6917 100644 --- a/build/media_source/plg_installer_webinstaller/scss/client.scss +++ b/build/media_source/plg_installer_webinstaller/scss/client.scss @@ -59,7 +59,7 @@ $extension-types: ( &.active { color: $white; text-decoration: none; - background-color: #33608f; + background-color: var(--btn-primary-bg); } } } diff --git a/build/media_source/plg_system_guidedtours/scss/guidedtours.scss b/build/media_source/plg_system_guidedtours/scss/guidedtours.scss index e5e292caa830d..b35b5bc92f7d1 100644 --- a/build/media_source/plg_system_guidedtours/scss/guidedtours.scss +++ b/build/media_source/plg_system_guidedtours/scss/guidedtours.scss @@ -31,14 +31,14 @@ .shepherd-button-primary { grid-column-start: 3; - color: var(--template-text-light); - background-color: var(--template-bg-dark-60); - border-color: var(--template-bg-dark-60); + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-bg); } .shepherd-button-primary:not(:disabled):hover { - background-color: var(--template-bg-dark-70); - border-color: var(--template-bg-dark-90); + background-color: var(--btn-primary-bg-hvr); + border-color: var(--btn-primary-bg-hvr); } .shepherd-enabled.shepherd-element[data-popper-placement=bottom] { @@ -59,5 +59,6 @@ #modGuidedTours-modal a { font-weight: 500; + color: var(--template-link-color); text-decoration: underline; } diff --git a/build/media_source/system/css/fields/calendar.css b/build/media_source/system/css/fields/calendar.css index 9d1e3f427c8ff..a52f03847c120 100644 --- a/build/media_source/system/css/fields/calendar.css +++ b/build/media_source/system/css/fields/calendar.css @@ -99,8 +99,8 @@ div.calendar-container table td.title { /* This holds the current "month, year" } .calendar-container table tbody td.day.selected { /* Cell showing today date */ - color: #fff; - background: #3071a9; + color: var(--btn-primary-color); + background: var(--btn-primary-bg); border: 0; } @@ -127,9 +127,9 @@ div.calendar-container table td.title { /* This holds the current "month, year" } .calendar-container table tbody td.day:hover { - color: #fff; + color: var(--btn-primary-color); cursor: pointer; - background: #3d8fd7; + background: var(--btn-primary-bg); } .calendar-container table tbody td.day:hover:after { @@ -137,8 +137,8 @@ div.calendar-container table td.title { /* This holds the current "month, year" } .calendar-container table tbody .disabled { - color: #999; - background-color: #fafafa; + color: var(--calendar-disabled-color); + background-color: var(--calendar-disabled-bg); } .calendar-container table tbody .emptycell { /* Empty cells (the best is to hide them) */ @@ -180,15 +180,19 @@ div.calendar-container table td.title { /* This holds the current "month, year" line-height: 1.5; color: var(--calendar-select-color, #212529); background-color: var(--calendar-select-bg-color, #f0f4fb); - background-image: var(--calendar-select-bg-url, var(--fallback-url)); background-repeat: no-repeat; - background-position: right center; background-size: max(100%, 58rem); border: 1px solid #cdcdcd; border-radius: .25rem; appearance: none; } +/* Fix select dropdown background rtl / ltr */ +html:not([dir="rtl"]) .calendar-container .time td select { + background-image: var(--calendar-select-bg-url, var(--fallback-url)); + background-position: right center; +} + .buttons-wrapper { width: 100%; padding: 5px; @@ -200,14 +204,15 @@ div.calendar-container table td.title { /* This holds the current "month, year" padding: 0 16px; margin-right: 0; line-height: 2.375rem; - color: var(--calendar-buttons-color, #495057); - border: 1px solid var(--calendar-buttons-color, #495057); + color: var(--btn-primary-color); + background: var(--btn-primary-bg); + border: 1px solid var(--body-bg); box-shadow: 1px 1px 1px 0 rgba(0,0,0,.25); } .buttons-wrapper .btn:hover { - color: #fff; - background: #1a466b; + color: var(--btn-primary-color); + background: var(--btn-primary-bg); } .buttons-wrapper .btn:last-child { diff --git a/build/media_source/system/images/select-bg-dark.svg b/build/media_source/system/images/select-bg-dark.svg new file mode 100644 index 0000000000000..d4a5ea703c25f --- /dev/null +++ b/build/media_source/system/images/select-bg-dark.svg @@ -0,0 +1 @@ + diff --git a/build/media_source/system/js/fields/calendar.es5.js b/build/media_source/system/js/fields/calendar.es5.js index d3ccfc20e1e2f..f440f9992dda0 100644 --- a/build/media_source/system/js/fields/calendar.es5.js +++ b/build/media_source/system/js/fields/calendar.es5.js @@ -741,8 +741,8 @@ hrs -= 12; } - var H = makeTimePart("time time-hours", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1), - M = makeTimePart("time time-minutes", mins, 0, 59, cell2), + var H = makeTimePart("time time-hours form-control form-select", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1), + M = makeTimePart("time time-minutes form-control form-select", mins, 0, 59, cell2), AP = null; diff --git a/build/media_source/templates/administrator/atum/images/select-bg-dark.svg b/build/media_source/templates/administrator/atum/images/select-bg-dark.svg index 31aacfc2d4ef8..4332f81aea644 100644 --- a/build/media_source/templates/administrator/atum/images/select-bg-dark.svg +++ b/build/media_source/templates/administrator/atum/images/select-bg-dark.svg @@ -1 +1 @@ - + diff --git a/build/media_source/templates/administrator/atum/images/template_preview.png b/build/media_source/templates/administrator/atum/images/template_preview.png index f44c05d44764d..c85075cee2f8c 100644 Binary files a/build/media_source/templates/administrator/atum/images/template_preview.png and b/build/media_source/templates/administrator/atum/images/template_preview.png differ diff --git a/build/media_source/templates/administrator/atum/images/template_thumbnail.png b/build/media_source/templates/administrator/atum/images/template_thumbnail.png index 45e39a75f1b44..576e7cd0651f8 100644 Binary files a/build/media_source/templates/administrator/atum/images/template_thumbnail.png and b/build/media_source/templates/administrator/atum/images/template_thumbnail.png differ diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss index ee722da711ce3..8a14cef38b56b 100644 --- a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss +++ b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss @@ -1,18 +1,463 @@ -$atum-colors-dark: ( - template-quickicon-color: var(--template-bg-dark-5), - focus-shadow: var(--gray-800), -) !default; - -$link-hover-color-dark: lighten($light-blue, 20%); - -$form-select-indicator-dark: url("../images/select-bg-dark.svg"); -$form-select-indicator-rtl-dark: url("../images/select-bg-rtl-dark.svg"); -$form-select-bg-dark: var(--template-bg-dark); -$form-select-background-dark: $form-select-bg-dark $form-select-indicator-dark no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon) -$form-select-background-rtl-dark: $form-select-bg-dark $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon) - -// Alerts -$state-info-text-dark: var(--template-bg-dark-50); - -// Code-color override bootstrap for accessibility contrast -$code-color-dark: #d7488b; //used in bootstrap + +// Color definitions for the dark theme - don't use it with the light theme +$btn-primary-dark: #007db0; // contrast ratio: 4.6 with #fff text +$link-color-dark: #6fbfdb; // contrast ratio: 8.87 on backgrounds like #0F151D +$success-dark: #3d854d; // contrast ratio: 4.51 with #fff test +$warning: #f0ad4e; // contrast ratio: 4.51 with #fff text +$featured-dark: #f0ad4e; // contrast ratio: 9.42 on dark backgrounds (icons,etc.) +$danger-dark: #c62a25; // contrast ratio: 5.59 with #fff text +$error-dark: $danger-dark; // contrast ratio: 5.59 with #fff text +$info-dark: #33383f; // contrast ratio: 8.59 with #fff text + +$template-bg-dark: #0c1a2b; + +// Form select +$form-select-indicator-dark: url("../images/select-bg-dark.svg"); +$form-select-indicator-rtl-dark: url("../images/select-bg-rtl-dark.svg"); +$form-select-bg-dark: $btn-primary-dark; + +$atum-colors-dark: ( + + body-bg: #0f151d, + body-color: rgba(255,255,255,.85), + template-bg-dark: $template-bg-dark, + main-bg: #171c24, + + admin-background: var(--body-bg), + + button-and-icon-color: $btn-primary-dark, + template-quickicon-color: var(--template-bg-dark-5), // fix this + focus-shadow: var(--gray-800), + + media-manager-bg: var(--body-bg), + media-manager-content-bg: var(--body-bg), + media-manager-overlay-bg: var(--template-bg-dark-90), // fix this + media-manager-infobar-dt-color: rgba(255, 255, 255, .54), + media-manager-content-color: lighten($btn-primary-dark, 20%), + media-manager-overlay-header-bg: var(--template-bg-dark-80), + media-manager-disk-name-color: var(--template-text-light), + media-manager-border: 1px solid var(--gray-800), + media-manager-file-icon-color: $btn-primary-dark, + media-manager-tree-item-hover-bg: var(--gray-600), + media-manager-toolbar-icon-color: lighten($btn-primary-dark, 20%), + media-manager-breadcrumb-item-bg: var(--gray-700), + + media-tree-item-color: $btn-primary-dark, + media-tree-active-icon-color: darken($btn-primary-dark, 10%), + + media-browser-file-bg: var(--media-manager-bg), + media-drive-bg: var(--media-manager-bg), + + media-toolbar-bg: var(--media-manager-bg), + media-toolbar-icon-bg: var(--media-manager-bg), + media-toolbar-icon-color: lighten($btn-primary-dark, 10%), + media-toolbar-icon-bg-hvr: var(--gray-800), + + image-bg: #000, + image-bg-image: (linear-gradient(45deg, var(--body-bg) 25%, transparent 25%, transparent 75%, #111 75%, var(--body-bg) 100%), linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, var(--body-bg) 75%, var(--body-bg) 100%)), + + success-text: #418d52, + success: $success-dark, + successhvr: darken($success-dark, 15%), + + danger-text: #e0615c, + danger: $danger-dark, + dangerhvr: darken($danger-dark, 15%), + + darkdanger: #941f1c, + darkdangerhvr: darken(#941f1c, 15%), + + error: #941f1c, + errorhvr: #be2824, + + warning-text: #000, + warning: #f0ad4e, + warninghvr: darken($warning, 15%), + + dark-mode-text-light: rgba(255,255,255,.85), + + template-link-color: $link-color-dark, + link-color-rgb: (36,158,200), + link-color: $link-color-dark, + template-link-hover-color: lighten($link-color-dark, 10%), + link-color-rgb-hvr: var(--template-link-hover-color), + + template-quickicon-bg: rgba(255, 255, 255, .1), + template-quickicon-bg-hvr: rgba(255, 255, 255, .15), + + // Admin section + options-form-color: var(--template-text-light), + options-form-bg: transparent, //#484b51, //#52565b, + options-form-border: 1px solid rgba(255, 255, 255, .05), + options-form-legend-color: var(--template-text-light), + options-form-legend-bg: var(--admin-background), + form-control-bg: var(--template-sidebar-bg), + form-control-bg-disabled: var(--gray-800), + form-control-border: 1px solid rgba(255, 255, 255, .2), + form-control-border-disabled: 1px solid rgba(255, 255, 255, .1), + + form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), + form-check-input-checked-bg-color: $btn-primary-dark, + form-check-input-border: 1px solid rgba(255, 255, 255, .2), //rgba(255, 255, 255, .05), + + form-select-background: $form-select-bg-dark $form-select-indicator-dark no-repeat right center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) + form-select-background-rtl: $form-select-bg-dark $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size, // Used so we can have multiple background elements (e.g. arrow and feedback icon) + + form-select-border: var(--form-control-border), + form-select-success-bg: var(--template-sidebar-bg), + form-select-danger-bg: var(--template-sidebar-bg), + form-select-disabled-bg: var(--template-sidebar-bg), + form-select-option: var(--template-text-light), + form-select-option-disabled-bg: var(--template-bg-dark-90), + file-selector-btn-bg: $btn-primary-dark, + file-selector-btn-bg-hvr: darken($btn-primary-dark, 10%), + + // Background styles + bg-normal: var(--template-bg-dark), + bg-reverted: var(--template-bg-dark-20), + + // Text styles + text-normal: var(--template-text-light), + text-reverted: black, //var(--template-text-dark), + text-muted-color: var(--template-text-light) !important, + text-muted-hvr-color: var(--template-text-dark) !important, + + // Quickicons styles + quickicon-bg: transparent, + quickicon-border: none, + quickicon-border-radius: 4px, + quickicon-link-hvr: #fff, + quickicon-linkadd-bg: rgba(255, 255, 255, .04), + quickicon-linkadd-bg-hvr: var(--btn-primary-bg-hvr), + quickicon-linkadd-color: #fff, + quickicon-amount-bg: #6b6f77, + quickicon-color-hvr: var(--quickicon-link-hvr), + + // Modules + new-modules-color: var(--template-quickicon-color), + new-modules-bg: var(--template-bg-dark-65), + new-modules-bg-hvr: var(--btn-primary-bg-hvr), + new-modules-icon-color: var(--template-bg-dark-80), + new-modules-icon-color-hvr: var(--template-quickicon-color), + new-module-color: var(--dark-mode-text-light), + new-module-bg: var(--template-quickicon-bg), + new-module-border: none, + new-module-link-bg: rgba(255, 255, 255, .05), + new-module-link-span: var(--quickicon-linkadd-color), + new-module-link-hvr: var(--new-modules-bg-hvr), + new-module-link-span-hvr: var(--icon-color-hvr), + + // Sidebar + sidebarwrapper-bg: var(--template-sidebar-bg), + sidebar-item-color: $white, + sidebar-item-color-hvr: var(--template-text-light), + sidebar-item-bg-hvr: $btn-primary-dark, + sidebar-toggle-bg: #20262d, + sidebar-toggle-link: $white, + main-nav-ul-bg: #20262d, + main-nav-divider-bg: #495057, + main-nav-item-title: var(--template-bg-dark-30), + main-nav-mm-active-bg: $btn-primary-dark, + main-nav-mm-active-quicktask-bg: darken($btn-primary-dark, 10%), + main-nav-badge: var(--template-bg-dark-60), + main-nav-item-title-hvr-bg: $btn-primary-dark, + mobile-menu-collapse-bg: var(--template-bg-dark-50), + sidebar-bg: #0f151d, + template-sidebar-bg: #0f151d, + sidebar-accent-bg: #2667bb, + + // Header content + header-bg: #0a0e13, + header-item-content-bg: $btn-primary-dark, + header-item-content-bg-hvr: darken($btn-primary-dark, 10%), + header-item-content-border-radius: 22px, + header-item-content-jversion-color: var(--dark-mode-text-light), + header-item-content-jversion-bg: transparent, + header-logo-bg: var(--header-bg), + + // Alerts + alert-accent-color: #479a59, // ?? + alert-bg-color: #f2f8f4, + alert-link-text-color: $link-color-dark, + + // Table + table-color: rgba(255,255,255,.9), + table-border-top-nfc: 1px solid #969696, + table-link-color: $link-color-dark, + table-link-font-weight: $normal-weight, + table-link-font-weight-sorted: $normal-weight, + badge-bg-info: rgba(255, 255, 255, .2) !important, + info: rgba(255, 255, 255, .2) !important, + + // Card + card-bg-dark: var(--template-sidebar-bg), + card-header-color: var(--dark-mode-text-light), + card-header-bg: var(--template-sidebar-bg), + card-bg: var(--template-sidebar-bg), + card-body-bg: var(--template-sidebar-bg), + main-card-bg: var(--template-sidebar-bg), + main-card-col-border-left: 1px solid var(--gray-800), + + // Cpanel + module-actions-color: var(--body-color), + + // Lists + atum-list-group-border-color: rgba(255, 255, 255, .1), + border-color: rgba(255, 255, 255, .1), + + // Turn off shadow in dark mode + atum-box-shadow: none, + dropdown-box-shadow: none, + quickicon-box-shadow-success: none, + quickicon-box-shadow-danger: none, + quickicon-box-shadow-warning: none, + login-box-shadow: none, + login-focus-box-shadow: none, + modal-btn-box-shadow: none, + modal-joomla-dialog-box-shadow: none, + form-aria-grabbed-box-shadow: none, + choices__button_joomla-focus-box-shadow: none, + + joomla-tab-accordion-box-shadow: none, + joomla-tab-btn-hvr: var(--template-text-light), + joomla-tab-btn-aria-exp-bg: var(--atum-btn-bg), + joomla-tab-btn-region-border: var(--atum-btn-bg), + + joomla-tablist-btn-aria-exp: var(--template-text-light), + joomla-tablist-btn-aria-exp-bg: darken($btn-primary-dark, 10%), + joomla-tablist-btn-aria-exp-aft-bg: $btn-primary-dark, + joomla-tablist-border-bottom: 1px solid var(--gray-800), + + joomla-tab-tablist-border: 1px solid var(--gray-800), + joomla-tab-vert-border-bottom: 1px solid var(--gray-800), + + // Details + details-bg: rgba(0,0,0,.4), + details-border: 1px solid var(--details-bg), + + // Nav + nav-header-color: var(--body-color), + + // Choices + choices-input-border-color: var(--btn-primary-bg), + choices-input-bg: var(--body-bg), + choices-input-placeholder: var(--gray-200), + choices-list-multiple-item-bg: var(--btn-primary-bg), + choices-list-multiple-item: var(--template-text-light), + + // Switches + switcher-toggle-inside-bg: var(--body-bg), + switcher-toggle-outside-off-bg: var(--gray-700), + switcher-toggle-outside-on-bg: var(--success), + + // Input + input-border-color: #495057, + + // icons + featured-icon-color: $featured-dark, + + // Users + users-method-image: var(--light), + users-methods-reset-cont-bg: var(--body-bg), + users-method-header-inact-bg: var(--body-bg), + + // Login + login-label-color: var(--white), + + // Icons + icon-success: #418d52, + icon-success-border: #418d52, + icon-checkedout-color: var(--gray-400), + + // Buttons + btn-primary-color: var(--text-normal), + btn-primary-bg: $btn-primary-dark, + primary: $btn-primary-dark, + btn-primary-border: 1px solid lighten($btn-primary-dark, 10%), + btn-primary-bg-hvr: darken($btn-primary-dark, 10%), + btn-primary-border-hvr: 1px solid lighten($btn-primary-dark, 10%), + btn-primary-toggle-bg: var(--template-bg-dark), + btn-primary-toggle-border: var(--template-bg-dark), + + btn-secondary-color: var(--template-text-light), + btn-secondary-bg: $info-dark, + btn-secondary-border: 1px solid lighten($info-dark, 10%), + btn-secondary-bg-hvr: darken($info-dark, 10%), + btn-secondary-border-hvr: 1px solid lighten($info-dark, 10%), + + btn-dark-border: 1px solid rgba(0,0,0,.85), + btn-dark-bg: rgba(0,0,0,.9), + btn-dark-bg-hvr: #000, + btn-dark-color: #fff, + btn-dark-color-hvr: #fff, + + btn-light-bg: $btn-primary-dark, + btn-light-border: 1px solid lighten($btn-primary-dark, 10%), + btn-light-bg-hvr: $btn-primary-bg-hvr, + + + btn-outline-secondary-color: var(--template-text-light), + btn-outline-secondary-bg: #64676c, + btn-outline-secondary-border: 1px solid lighten(#64676c, 10%), + + btn-info-color: var(--template-text-light), + btn-info-bg: $info-dark, + btn-info-border: 1px solid lighten($info-dark, 10%), + btn-info-bg-hvr: darken($info-dark, 10%), + btn-info-border-hvr: 1px solid darken($info-dark, 10%), + + // Dropdown + dropdown-header-bg: darken($btn-primary-dark, 10%), + dropdown-divider-bg: 1px solid #fff, + dropdown-item-bg: $btn-primary-dark, + dropdown-item-bg-hvr: darken($btn-primary-dark, 10%), + dropdown-item-border-bottom: 1px solid rgba(255, 255, 255, .1), + atum-dropdown-link-hover-bg: var(--gray-700), + + // Input Group + input-group-text-bg: var(--btn-primary-bg), + input-group-text-border: 1px solid var(--btn-primary-border), + input-group-text-color: var(--btn-primary-color), + + // Search + js-stools-btn-clear-bg: var(--body-bg), + js-stools-btn-clear-disabled-bg: var(--body-bg), + js-stools-btn-clear-disabled-border: var(--form-select-border), + + // Alerts + states-link-color: #fff, + states-btn-primary-bg: rgba(0,0,0,.5), + states-btn-primary-bg-hover: rgba(0,0,0,.7), + states-btn-primary-color: var(--template-text-light), + states-btn-primary-border: rgba(0,0,0,.8), + + + state-success-text: var(--text-normal), + state-success-text-hvr: var(--text-normal), + state-success-bg: $success-dark, + state-success-bg-hvr: darken($success-dark, 15%), + state-success-border: var(--state-success-bg), + state-success-btn-border: var(--state-success-bg), + state-success-icon: var(--text-normal), + state-success-icon-hvr: var(--text-normal), + state-success-heading-bg: $success-dark, + + state-info-text: var(--text-normal), + state-info-text-hvr: var(--text-normal), + state-info-bg: darken($btn-primary-dark, 15%), + state-info-bg-hvr: darken($btn-primary-dark, 25%), + state-info-border: transparent, + state-info-icon: var(--state-info-text), + state-info-heading-bg: darken($btn-primary-dark, 5%), + + state-warning-text: #000, + state-warning-text-hvr: #000, + state-warning-bg: $warning, + state-warning-bg-hvr: darken($warning, 15%), + state-warning-border: darken($warning, 15%), + state-warning-icon: #000, + state-warning-heading-bg: darken($warning, 15%), + + state-danger-text: var(--text-normal), + state-danger-text-hvr: var(--text-normal), + state-danger-bg: $danger-dark, + state-danger-bg-hvr: darken($danger-dark, 15%), + state-danger-border: var(--dangerhvr), + state-danger-icon: var(--text-normal), + state-danger-heading-bg: var(--dangerhvr), + + state-error-text: var(--text-normal), + state-error-bg: var(--error), + state-error-border: var(--error), + state-error-icon: var(--text-normal), + state-error-heading-bg: var(--errorlight), + + alert-info-color: var(--text-normal), + alert-info-bg: var(--body-bg), + alert-info-border: var(--body-bg), + + // Subhead + atum-subhead-color: var(--template-text-dark), + atum-subhead-bg: var(--body-bg), + atum-subhead-bg-img: (linear-gradient(var(--body-bg), var(--dark-bg))), + + // Toolbar Buttons + atum-btn: var(--template-text-light), + atum-btn-icon: var(--template-text-light), + atum-btn-icon-hvr: $atum-text-dark, + atum-btn-bg: $btn-primary-dark, + atum-btn-bg-hvr: darken($btn-primary-dark, 15%), + atum-btn-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-hvr: var(--template-text-light), + + atum-btn-success: var(--atum-btn-success-hvr), + atum-btn-success-icon: var(--template-text-light), + atum-btn-success-icon-hvr: var(--atum-btn-success-hvr), + atum-btn-success-bg: $success-dark, + atum-btn-success-bg-hvr: darken($success-dark, 15%), + atum-btn-success-border: 1px solid lighten($success-dark, 10%), + atum-btn-success-hvr: var(--template-text-light), + + atum-btn-danger: var(--dangerhvr), + atum-btn-danger-color: var(--template-text-light), + atum-btn-danger-icon: var(--template-text-light), + atum-btn-danger-icon-hvr: var(--atum-btn-danger-hvr), + atum-btn-danger-bg: $danger, + atum-btn-danger-bg-hvr: darken($danger, 15%), + atum-btn-danger-border: 1px solid lighten($danger, 10%), + atum-btn-danger-hvr: var(--template-text-light), + + atum-btn-info: lighten($info-dark, 50%), + atum-btn-info-icon: var(--template-text-light), + atum-btn-info-icon-hvr: var(--template-text-dark), + atum-btn-info-bg: $info-dark, + atum-btn-info-bg-hvr: darken($info-dark, 15%), + atum-btn-info-border: 1px solid lighten($info-dark, 10%), + atum-btn-info-hvr: var(--template-text-dark), + + atum-btn-primary: lighten($btn-primary-dark, 25%), + atum-btn-primary-icon: var(--template-text-light), + atum-btn-primary-icon-hvr: var(--template-text-dark), + atum-btn-primary-bg: $btn-primary-dark, //var(--template-bg-dark), + atum-btn-primary-bg-hvr: darken($btn-primary-dark, 15%), + atum-btn-primary-border: 1px solid lighten($btn-primary-dark, 10%), + atum-btn-primary-hvr: var(--template-text-light), + + atum-btn-secondary: #f0f4fb, + + atum-btn-action: darken($info-dark, 10%), + atum-btn-action-icon: var(--template-text-light), + atum-btn-action-icon-hvr: var(--atum-btn-action-hvr), + atum-btn-action-bg: $info-dark, + atum-btn-action-bg-hvr: darken($info-dark, 15%), + atum-btn-action-border: 1px solid lighten($info-dark, 10%), + + atum-list-group-bg: var(--template-sidebar-bg), + + atum-calendar-week-bg: #4b4b4b, + atum-calendar-bg: var(--body-bg), + atum-calendar-buttons-color: var(--btn-primary-bg), + atum-calendar-disabled-color: #4b4b4b, + atum-calendar-disabled-bg: rgba(0,0,0,.5), + atum-calendar-select-bg: $form-select-bg-dark, + atum-calendar-select-bg-url: url("../../images/select-bg-dark.svg"), + atum-calendar-select-bg-url-rtl: url("../../images/select-bg-dark-rtl.svg"), + + // Permissions + permissions-sliders-oddCol-bg: var(--template-bg-dark), + respTable-border-bottom: 1em solid $btn-primary-dark, + + // Treeselect + treeselect-line-color: rgba(255,255,255,.4), + treeselect-dropdown-toggle: var(--template-text-light), + icon-check-square-bg: $btn-primary-dark, + icon-square-bg: $btn-primary-dark, + icon-check-square-color: radial-gradient(white 50%, transparent 50%), + icon-square-color: radial-gradient(white 50%, transparent 50%), + + + // Table Row Dragging + drag-color: #151515, + drag-background-color: #c2d049, + +); diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss index 34e7f33c2c07d..bf6b4ef4591a8 100644 --- a/build/media_source/templates/administrator/atum/scss/_variables.scss +++ b/build/media_source/templates/administrator/atum/scss/_variables.scss @@ -1,305 +1,1031 @@ -// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas -$prefix: ""; - -// Use dark mode conditionally based on media queries from the browser to match the desktop theme -$color-mode-type: media-query; - -// Variables -$white: #fff; -$whiteoffset: #fefefe; -$gray-100: #f8f9fa; -$gray-200: #e8e8e8; -$gray-300: #dee2e6; //used for toolbar and badges -$gray-400: #cdcdcd; //used for border-bottom sidebar-nav and toolbar normal border -$gray-500: #adb5bd; //used in toolbar and buttons for border -$gray-600: #666e76; //used for atum-text-dark and $secondary -$gray-700: #495057; //used for atum-text-dark, secondary -$gray-800: #343a40; -$gray-900: #212529; //used for tree header -$bluegray: #b2bfcd; // used for borders -$black: #000; //used for shadows -$dark-blue: #001b4c; //is the atum-special-color -$light-blue: #2a69b8; //is the template-link-color - -// BS Colours -$blue: #2a69b7; // Same as hsl(213, 63%, 44%); // base color for calculation, Primary-color -$indigo: #0377be; //used in bootstrap -$purple: #6f42c1; //used in bootstrap -$pink: #971250; //used in bootstrap -$red: #c52827; //used in bootstrap -$red-dark: #3b0d0c; //used for alerts error -$yellow: #ffb514; //used in bootstrap -$green: #457d54; //used in bootstrap -$green-dark: #0f2f21; //used for alert success -$teal: #20c997; //used in bootstrap -$cyan: #107d8e; //used in bootstrap -$darkblue: #132f53; -$base-color: $darkblue; - -// Atum colours defined as scss variables for use in scss functions -$atum-text-dark: $gray-700; -$success: $green; -$danger: $red; -$info: $light-blue; -$warning: $yellow; - -$theme-colors: ( - "primary": $darkblue, - "secondary": $gray-700, - "success": $success, - "info": $light-blue, - "warning": $yellow, - "danger": $danger, - "light": $gray-100, - "dark": $gray-900, - "action": $base-color, - "error": $red-dark) !default; - -$template-background-light: #f0f4fb; //light background color, frontend dashboard background and installer body background - -$atum-colors: ( - template-sidebar-bg: var(--template-bg-dark-80), - template-sidebar-font-color: $white, - template-sidebar-link-color: $white, - template-bg-light: $template-background-light, - template-link-color: var(--link-color), - template-text-light: $white, - template-text-dark: $atum-text-dark, - template-special-color: $dark-blue, - template-contrast: $light-blue, - template-quickicon-color: hsl(var(--hue), 30%, 40%), - template-bg-dark: hsl(var(--hue), 40%, 20%), - template-bg-dark-3: hsl(var(--hue), 40%, 97%), - template-bg-dark-5: hsl(var(--hue), 40%, 95%), - template-bg-dark-7: hsl(var(--hue), 40%, 93%), - template-bg-dark-10: hsl(var(--hue), 40%, 90%), - template-bg-dark-15: hsl(var(--hue), 40%, 85%), - template-bg-dark-20: hsl(var(--hue), 40%, 80%), - template-bg-dark-30: hsl(var(--hue), 40%, 70%), - template-bg-dark-40: hsl(var(--hue), 40%, 60%), - template-bg-dark-50: hsl(var(--hue), 40%, 50%), - template-bg-dark-60: hsl(var(--hue), 40%, 40%), - template-bg-dark-65: hsl(var(--hue), 40%, 35%), - template-bg-dark-70: hsl(var(--hue), 40%, 30%), - template-bg-dark-75: hsl(var(--hue), 40%, 25%), - template-bg-dark-80: hsl(var(--hue), 40%, 20%), - template-bg-dark-90: hsl(var(--hue), 40%, 10%), -); - -$colors: ( - card-bg: rgba(255, 255, 255, .7), - card-color: var(--template-bg-dark-60), - bluegray: $bluegray, - lightbluegray: #f6f9fc, - toolbar-bg: $white, - success-border: var(--success), - info-border: var(--info), - warning-border: var(--warning), - danger-border: var(--danger), - login-main-bg: darken($base-color, 8%), //used on login - border: $gray-400, - "white": $white, // the key here must be in quotes to avoid scss compilation warnings. - white-offset: $whiteoffset, - focus: #39f, - focus-shadow: #eaeaea, - toggle-color: $white, //used in sidebar -); - -// Alerts -$alert-border-level: 0; -$alert-color-level: 0; - -// Global -$atum-box-shadow: 0 2px 10px -8px var(--template-bg-dark-50); -$btn-disabled-opacity: .4; - -// Toolbar -$atum-toolbar-line-height: 2.45rem; - -// Sidebar -$sidebar-width: 18rem; -$sidebar-width-login: 28.75rem; -$sidebar-width-closed: 3rem; -$main-brand-height: 3rem; - -// Fonts -$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$h1-font-size: 1.65rem; -$h2-font-size: 1.5rem; -$h3-font-size: 1.25rem; -$h4-font-size: 1rem; -$h5-font-size: .9286rem; -$h6-font-size: .8571rem; -$headings-color: var(--template-bg-dark); -$font-size-sm: .8rem; -$font-size-vsm: .6rem; -$display1-size: 1rem; -$display2-size: .875rem; -$content-font-size: .875rem; -$label-font-size: 1rem; -$danger-bg: #900; -$badge-font-size: .75rem; -$jicon-css-prefix: icon !default; -$fa-css-prefix: fa !default; -$fa-font-path: "../../../../media/vendor/fontawesome-free/webfonts"; -$roboto-font-path: "../../../../../media/vendor/roboto-fontface/fonts"; - -// Font weights -$thin-weight: 100; -$extralight-weight: 200; -$light-weight: 300; -$normal-weight: 400; -$medium-weight: 500; -$semibold-weight: 600; -$bold-weight: 700; -$extrabold-weight: 800; -$black-weight: 900; - -// Tables -$table-cell-padding-y: .75rem; -$table-cell-padding-x: 1rem; -$table-cell-padding-y-sm: .3rem; -$table-cell-padding-x-sm: .3rem; -$table-group-separator-color: $gray-300; - -// Dropdowns -$dropdown-padding-y: 0; -$dropdown-box-shadow: 0 1px 1px rgba($black, .15); -$dropdown-link-hover-color: var(--template-text-dark); -$dropdown-border-width: 1px; -$dropdown-item-padding-y: .5rem; -$dropdown-item-padding-x: .75rem; -$dropdown-spacer: 0; - -// Cards -$card-border-width: 0; -$card-border-color: transparent; - -// Alerts -$state-success-text: $success; -$state-success-bg: lighten($success, 58%); -$state-success-border: hsl(var(--hue),50%,93%); - -$state-info-text: var(--template-bg-dark-70); -$state-info-bg: var(--body-bg); - -$state-warning-text: darken($warning, 24%); -$state-warning-bg: lighten($warning, 44%); -$state-warning-border: $warning; - -$state-danger-text: $danger; -$state-danger-bg: lighten($danger, 52%); -$state-danger-border: $danger; - -$state-error-text: $danger; -$state-error-bg: lighten($danger, 52%); -$state-error-border: $danger; - -// Badges -$badge-padding-x: .2rem; -$badge-padding-y: .3rem; -$badge-border-radius: .2rem; - -$success-bg: $green; -$success-txt: $white; - -$warning-bg: #f9d71c; -$warning-txt: #000; - -$danger-bg: #900; -$danger-txt: #fff; - -$info-bg: $gray-300; -$info-txt: $white; - -// Input Group -$input-group-addon-color: var(--white); -$input-group-addon-bg: $base-color; -$input-group-addon-border-color: var(--template-bg-dark); - -// Treeselect -$treeselect-line-height: 2.2rem; -$treeselect-indent: 40px; -$treeselect-line-color: var(--template-bg-dark-7); - -// List -$list-group-border-color: var(--template-bg-dark-15); -$list-group-item-padding-y: .75rem; - -// Buttons -$input-btn-padding-y-sm-submenu: 0; -$input-btn-padding-x-sm-submenu: 1.625rem; -$input-btn-submenu-icon-distance: 1rem; - -// Custom form -$form-select-indicator-padding: 3rem; -$form-select-bg: var(--template-bg-light); -$form-select-bg-size: calc(max(100%, 116rem)); -$form-select-indicator: url("../images/select-bg.svg"); -$form-select-indicator-rtl: url("../images/select-bg-rtl.svg"); -$form-select-indicator-active: url("../../../images/select-bg.svg"); -$form-select-indicator-active-rtl: url("../../../images/select-bg-rtl.svg"); -$form-select-background: $form-select-bg $form-select-indicator no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) -$form-select-background-rtl: $form-select-bg $form-select-indicator-rtl no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) -$form-select-box-shadow: $atum-box-shadow; -$form-select-bg-size-sm: 75rem; -$form-select-multiple-padding-y: .3rem; -$form-file-button-color: var(--white); - -// Input -$input-padding: .5rem 1rem; -$input-border-color: var(--template-bg-dark-20); -$input-focus-border-color: var(--focus); -$input-box-shadow: $atum-box-shadow; -$input-max-width: 100%; -$input-btn-focus-width: .2rem; -$input-btn-focus-color: var(--focus-shadow); -$input-btn-padding-y: .5rem; -$input-btn-padding-x: 1rem; - -// Modals -$modal-header-height: 2.875rem; - -// Quickicons -$quickicon-bg: var(--white); -$quickicon-box-shadow-success: 0 0 3px 0 var(--success); -$quickicon-box-shadow-danger: 0 0 3px 0 var(--danger); -$quickicon-box-shadow-warning: 0 0 3px 0 var(--warning); -$quickicon-icon-size: 2rem; -$quickicon-icon-size-sm: 1.3rem; - -// Gutter -$grid-gutter-width: 2rem; -$grid-gutter-width-s: 15px; - -// Breadcrumbs -$breadcrumb-bg: var(--white); - -// Links -$link-color: $light-blue; -$link-hover-color: darken($light-blue, 20%); -$link-decoration: none; - -// Z-Index list -$zindex-negative: -1; -$zindex-actions: auto; -$zindex-toolbar: 1000; -$zindex-sidebar: 1010; -$zindex-header: 1020; -$zindex-alerts: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-popover: 1060; -$zindex-tooltip: 1070; -$zindex-mobile-bottom: 8000; -$zindex-mobile-toggle: 9999; -$zindex-mobile-menu: 9000; - -// scss-docs-start border-radius-variables -$btn-border-radius: .25rem !default; -$border-radius: .25rem !default; -$border-radius-sm: .2rem !default; -$border-radius-lg: .3rem !default; -$border-radius-xl: .3rem !default; -$border-radius-2xl: .3rem !default; -// scss-docs-end border-radius-variables +// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas +$prefix: ""; + +// Use dark mode conditionally based on media queries from the browser to match the desktop theme +$color-mode-type: media-query; + +// Enable dark mode in J5.0 +$enable-dark-mode: true; + +// Variables +$white: #fff; +$whiteoffset: #fefefe; +$gray-100: #f8f9fa; +$gray-200: #e8e8e8; +$gray-300: #dee2e6; //used for toolbar and badges +$gray-400: #cdcdcd; //used for border-bottom sidebar-nav and toolbar normal border +$gray-500: #adb5bd; //used in toolbar and buttons for border +$gray-600: #666e76; //used for atum-text-dark and $secondary +$gray-700: #495057; //used for atum-text-dark, secondary +$gray-800: #343a40; +$gray-900: #212529; //used for tree header +$bluegray: #b2bfcd; // used for borders +$black: #000; //used for shadows +$dark-blue: #001b4c; //is the atum-special-color +$light-blue: #2a69b8; //is the template-link-color + +// BS Colours +$blue: #2a69b7; // Same as hsl(213, 63%, 44%); // base color for calculation, Primary-color +$indigo: #0377be; //used in bootstrap +$purple: #6f42c1; //used in bootstrap +$pink: #971250; //used in bootstrap +$red: #c52827; //used in bootstrap +$red-dark: #3b0d0c; //used for alerts error +$yellow: #ffb514; //used in bootstrap +$green: #457d54; //used in bootstrap +$green-dark: #0f2f21; //used for alert success +$teal: #20c997; //used in bootstrap +$cyan: #107d8e; //used in bootstrap +$darkblue: #132f53; +$base-color: $darkblue; + +// Atum colours defined as scss variables for use in scss functions +$atum-text-dark: $gray-700; +$success: $green; +$danger: $red; +$info: $light-blue; +$warning: #ffb514; +$featured: #c78800; + +$theme-colors: ( + "primary": $darkblue, + "secondary": $gray-700, + "success": $success, + "info": $light-blue, + "warning": $warning, + "danger": $danger, + "light": $gray-100, + "dark": $gray-900, + "action": $base-color, + "error": $red-dark +) !default; + + +$template-background-light: #f0f4fb; //light background color, frontend dashboard background and installer body background + +// Font weights +$thin-weight: 100; +$extralight-weight: 200; +$light-weight: 300; +$normal-weight: 400; +$medium-weight: 500; +$semibold-weight: 600; +$bold-weight: 700; +$extrabold-weight: 800; +$black-weight: 900; + +$form-select-indicator: url("../images/select-bg.svg"); +$form-select-indicator-rtl: url("../images/select-bg-rtl.svg"); +$form-select-indicator-active: url("../../../images/select-bg.svg"); +$form-select-indicator-active-rtl: url("../../../images/select-bg-rtl.svg"); +$form-select-bg: var(--template-bg-light); +$form-select-bg-size: calc(max(100%, 116rem)); +$form-select-bg-size-sm: 75rem; + +// links +$template-link-color: var(--template-link-color); +$template-link-hover-color: var(--template-link-hover-color); + +//$form-select-background: $form-select-bg $form-select-indicator no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) +//$form-select-background-rtl: $form-select-bg $form-select-indicator-rtl no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon) + +$atum-colors: ( + template-sidebar-bg: var(--template-bg-dark-80), + template-sidebar-font-color: $white, + template-sidebar-link-color: $white, + template-bg-light: $template-background-light, + template-link-color: var(--link-color), + template-link-hover-color: var(--link-hover-color), + template-text-light: $white, + template-text-dark: $atum-text-dark, + template-special-color: $dark-blue, + template-contrast: $light-blue, + template-quickicon-color: hsl(var(--hue), 30%, 40%), + template-bg-dark: hsl(var(--hue), 40%, 20%), + template-bg-dark-3: hsl(var(--hue), 40%, 97%), + template-bg-dark-5: hsl(var(--hue), 40%, 95%), + template-bg-dark-7: hsl(var(--hue), 40%, 93%), + template-bg-dark-10: hsl(var(--hue), 40%, 90%), + template-bg-dark-15: hsl(var(--hue), 40%, 85%), + template-bg-dark-20: hsl(var(--hue), 40%, 80%), + template-bg-dark-30: hsl(var(--hue), 40%, 70%), + template-bg-dark-40: hsl(var(--hue), 40%, 60%), + template-bg-dark-50: hsl(var(--hue), 40%, 50%), + template-bg-dark-60: hsl(var(--hue), 40%, 40%), + template-bg-dark-65: hsl(var(--hue), 40%, 35%), + template-bg-dark-70: hsl(var(--hue), 40%, 30%), + template-bg-dark-75: hsl(var(--hue), 40%, 25%), + template-bg-dark-80: hsl(var(--hue), 40%, 20%), + template-bg-dark-90: hsl(var(--hue), 40%, 10%), + + media-manager-overlay-header-bg: var(--template-bg-dark-5), + media-manager-infobar-dt-color: rgba(0, 0, 0, .54), + media-manager-content-bg: var(--body-bg), + media-manager-file-icon-color: hsl(var(--hue), 20%, 60%), + + media-manager-content-color: $light-blue, + media-manager-overlay-bg: var(--template-bg-dark-3), + media-manager-disk-name-color: var(--template-text-dark), + media-manager-tree-item-hover-bg: #e1e1e1, + media-manager-toolbar-icon-color: var(--template-bg-dark-60), + media-manager-border: 1px solid var(--template-bg-dark-7), + media-browser-file-bg: hsl(var(--hue), 20%, 97%), + // media-browser-file-border: 1px solid hsl(var(--hue), 35%, 95%), + // media-browser-item-preview-border: 1px solid hsl(var(--hue, 35%, 95%)), + media-drive-bg: var(--com-media-manager-content-bg,#fff), + media-toolbar-bg: var(--com-media-manager-content-bg,#fff), + media-toolbar-icon-bg: transparent, + media-toolbar-icon-color: var(--com-media-manager-toolbar-icon-color, var(--template-bg-dark-60)), + media-toolbar-icon-bg-hvr: #f0f0f0, + media-tree-item-color: var(--template-bg-dark-60), + + media-manager-breadcrumb-item-bg: var(--com-media-manager-overlay-bg, var(--template-bg-dark-3)), + media-tree-active-icon-color: $light-blue, + + image-bg: #fff, + image-bg-image: (linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%)), + + template-quickicon-bg: hsl(var(--hue), 60%, 97%), + template-quickicon-bg-hvr: var(--template-bg-dark), + form-control-bg: var(--template-text-light), + form-control-bg-disabled: var(--gray-200), + form-control-border: var(--border-width) solid var(--template-bg-dark-20), + + form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), + form-check-input-checked-bg-color: $blue, + form-check-input-border: var(--border-width) solid var(--template-bg-dark-20), + + form-select-background: $form-select-bg $form-select-indicator no-repeat right center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) + form-select-background-rtl: $form-select-bg $form-select-indicator-rtl no-repeat left center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) + + form-select-border: var(--form-control-border), + + form-select-success-bg: var(--white-offset), + form-select-danger-bg: var(--white-offset), + form-select-disabled-bg: var(--gray-200), + form-select-option: var(--template-text-dark), + form-select-option-disabled-bg: var(--template-bg-dark-5), + + file-selector-btn-bg: var(--template-bg-dark-70), + file-selector-btn-bg-hvr: var(--template-bg-dark-50), + + // background: + bg-normal: var(--template-bg-light), + bg-reverted: var(--template-bg-dark-60), + + // text + text-normal: var(--template-text-dark), + text-reverted: var(--template-text-light), + text-muted-color: var(--template-text-dark) !important, + text-muted-hvr-color: var(--template-text-light) !important, + + // quickicons + quickicon-bg: var(--white), + quickicon-color: var(--template-quickicon-color), + quickicon-color-hvr: var(--template-quickicon-color), + quickicon-border: 1px solid hsl(var(--hue), 50%, 93%), + quickicon-border-radius: 4px, + quickicon-link-hvr: $white, + quickicon-linkadd-bg: hsl(var(--hue), 50%, 93%), + quickicon-linkadd-bg-hvr: var(--template-bg-dark), + quickicon-linkadd-color: var(--template-quickicon-color), + quickicon-amount-bg: hsl(var(--hue), 50%, 93%), + + // modules + new-modules-color: var(--template-quickicon-color), + new-modules-bg: hsl(var(--hue), 60%, 97%), + new-modules-bg-hvr: var(--template-bg-dark), + new-modules-icon-color: var(--template-quickicon-color), + new-modules-icon-color-hvr: hsl(var(--hue), 50%, 93%), + new-module-color: var(--text-color), + new-module-bg: var(--template-quickicon-bg), + new-module-border: 1px solid hsl(var(--hue), 50%, 93%), + new-module-link-bg: hsl(var(--hue), 50%, 93%), + new-module-link-span: var(--quickicon-color), + new-module-link-hvr: var(--new-modules-bg-hvr), + new-module-link-span-hvr: var(--new-modules-icon-color-hvr), + + // sidebar incl. main-nav + sidebarwrapper-bg: var(--template-sidebar-bg), + sidebar-item-color: $white, + sidebar-item-color-hvr: var(--template-text-light), + sidebar-item-bg-hvr: var(--template-bg-dark-65), + sidebar-toggle-bg: var(--template-bg-dark-60), + sidebar-toggle-link: $white, + main-nav-ul-bg: var(--template-bg-dark-75), + main-nav-divider-bg: var(--template-bg-dark-60), + main-nav-item-title: var(--template-bg-dark-30), + main-nav-mm-active-bg: var(--template-bg-dark-70), + main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60), + main-nav-badge: var(--template-bg-dark-60), + mobile-menu-collapse-bg: var(--template-bg-dark-50), + + // header-content + header-bg: var(--template-bg-dark), + header-item-content-bg: var(--template-bg-dark-60), + header-item-content-bg-hvr: var(--template-bg-dark-50), + header-item-content-border-radius: 22px, + header-item-content-jversion-color: var(--bluegray), + header-item-content-jversion-bg: transparent, + header-logo-bg: var(--template-bg-dark-70), + + // table + table-color: var(--body-color), + table-border-top-nfc: 2px solid #dee2e6, + table-link-color: var(--template-link-color), + table-link-font-weight: $medium-weight, + table-link-font-weight-sorted: $medium-weight, + badge-bg-info: var(--info) !important, + + // card + card-header-color: var(--template-bg-dark), + card-bg: hsla(0, 0%, 100%, .7), + card-header-bg: var(--card-bg), + card-body-bg: var(--card-bg), + main-card-bg: var(--body-bg), + main-card-col-border-left: 1px solid var(--template-bg-dark-10), + + //cpanel + module-actions-color: var(--body-color), + + //lists + atum-list-group-border-color: var(--template-bg-dark-15), + + // box-shadow: + atum-box-shadow: 0 2px 10px -8px var(--template-bg-dark-50), + dropdown-box-shadow: 0 1px 1px rgba($black, .15), + quickicon-box-shadow-success: 0 0 3px 0 var(--success), + quickicon-box-shadow-danger: 0 0 3px 0 var(--danger), + quickicon-box-shadow-warning: 0 0 3px 0 var(--warning), + + login-box-shadow: 0 4px 20px -10px var(--template-bg-dark-50), + login-focus-box-shadow: inset 0 0 1px 1px var(--template-contrast), + + modal-btn-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .25), + modal-joomla-dialog-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), + + form-aria-grabbed-box-shadow: 0 0 2px 1px var(--template-bg-dark), + + choices__button_joomla-focus-box-shadow: 0 0 0 2px #00bcd4, + + joomla-tab-accordion-box-shadow: (0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04)), + joomla-tab-btn-hvr: var(--template-bg-dark-60), + joomla-tab-btn-aria-exp-bg: var(--template-bg-dark-3), + joomla-tab-btn-region-border: 1px solid var(--template-bg-dark-3), + joomla-tablist-btn-aria-exp: var(--template-text-light), + joomla-tablist-btn-aria-exp-bg: var(--template-bg-dark-60), + joomla-tablist-btn-aria-exp-aft-bg: var(--template-bg-dark), + joomla-tablist-border-bottom: 1px solid var(--template-bg-dark-10), + joomla-tab-tablist-border: 1px solid $gray-300, + joomla-tab-vert-border-bottom: 1px solid $gray-300, + + admin-background: var(--template-bg-light), + options-form-color: var(--template-text-dark), + options-form-bg: unset, + options-form-border: 1px solid var(--template-bg-dark-20), + options-form-legend-color: var(--template-text-dark), + options-form-legend-bg: inherit, + + // details + details-bg: var(--template-bg-dark-3), + details-border: 1px solid var(--template-bg-dark-10), + + // nav + nav-header-color: var(--template-bg-dark), + + // choices + choices-input-border-color: var(--body-bg), //TODO + choices-input-bg: var(--body-bg), + choices-input-placeholder: $gray-700, + choices-list-multiple-item-bg: var(--template-bg-dark), + choices-list-multiple-item: $white, + + // switcher + switcher-toggle-inside-bg: #fff, + switcher-toggle-outside-off-bg: #d3d3d3, + switcher-toggle-outside-on-bg: #2f7d32, + + // input + input-border-color: var(--template-bg-dark-20), + + // icons + featured-icon-color: $featured, + + // users + users-method-image: var(--light), + users-methods-reset-cont-bg: var(--light), + users-method-header-inact-bg: var(--light), + + // Login + login-label-color: $dark-blue, + + // Icons + icon-success: var(--success), + icon-success-border: var(--success), + icon-checkedout-color: var(--template-text-dark), + + // Buttons + btn-primary-color: var(--template-text-light), + btn-primary-bg: var(--template-bg-dark-60), + btn-primary-border: 1px solid var(--template-bg-dark-60), + btn-primary-bg-hvr: var(--template-bg-dark-70), + btn-primary-border-hvr: 1px solid var(--template-bg-dark-90), + btn-primary-toggle-bg: var(--template-bg-dark), + btn-primary-toggle-border: var(--template-bg-dark), + + btn-secondary-bg: var(--template-bg-dark-60), + btn-secondary-border: 1px solid var(--template-bg-dark-60), + btn-secondary-color: var(--template-text-light), + + btn-info-color: var(--template-text-light), + btn-info-bg: $info, + btn-info-border: 1px solid $info, + btn-info-bg-hvr: darken($info, 10%), + btn-info-border-hvr: 1px solid darken($info, 10%), + + btn-outline-secondary-color: gray-700, + btn-outline-secondary-bg: transparent, + btn-outline-secondary-border: var(--btn-secondary-border), + + btn-dark-border: 1px solid rgba(0,0,0,.85), + btn-dark-bg: rgba(0,0,0,.9), + btn-dark-bg-hvr: #000, + btn-dark-color: #fff, + btn-dark-color-hvr: #fff, + + btn-light-bg: #f8f9fa, + btn-light-border: 1px solid #f8f9fa, + btn-light-bg-hvr: #d3d4d5, + + input-group-text-bg: var(--template-bg-dark), + input-group-text-border: 1px solid var(--template-bg-dark), + + //search + js-stools-btn-clear-bg: var(--template-bg-dark), + js-stools-btn-clear-disabled-bg: var(--btn-disabled-bg), + js-stools-btn-clear-disabled-border: rgba($gray-300, .8), + + // cpanel + cpanel-addmodule-hover: var(--template-bg-dark), + + // Dropdown + dropdown-header-bg: var(--template-bg-dark), + dropdown-item-bg: var(--template-bg-dark-70), + dropdown-item-bg-hvr: var(--template-bg-dark), + dropdown-item-border-bottom: 1px solid rgba(0, 0, 0, .1), + atum-dropdown-link-hover-bg: var(--tertiary-bg), + atum-dropdown-link-hover-color: var(--body-color), + + // Alerts + // TODO change this color block to better suitable colors in a future PR + states-link-color: var(--template-link-color), + states-btn-primary-bg: var(--btn-primary-bg), + states-btn-primary-bg-hover: var(--btn-primary-bg-hvr), + states-btn-primary-color: var(--btn-primary-color), + states-btn-primary-border: var(--btn-primary-bg), + + state-success-text: $success, + state-success-text-hvr: lighten($success, 58%), + state-success-bg: #f2f8f4, + state-success-bg-hvr: $success, + state-success-border: hsl(var(--hue), 50%, 93%), + state-success-btn-border: 1px solid $success, + state-success-icon: #55a258, + state-success-icon-hvr: var(--state-success-icon), + state-success-heading-bg: $success, + state-success-link-color: $success, + + state-info-text: var(--template-bg-dark-70), + state-info-text-hvr: var(--body-bg), + state-info-bg: #dbe4f0, + state-info-bg-hvr: var(--template-bg-dark-70), + state-info-border: var(--template-bg-dark-70), + state-info-icon: var(--template-bg-dark-70), + state-info-heading-bg: var(--template-bg-dark-70), + state-info-link-color: var(--template-bg-dark-70), + + + state-warning-text: #996901, + state-warning-text-hvr: lighten($warning, 44%), + state-warning-bg: #fffcf4, + state-warning-bg-hvr: #996900, + state-warning-border: #ffb512, + state-warning-icon: $warning, + state-warning-heading-bg: #ffb512, + state-warning-link-color: var(--warning-text-emphasis), + + state-danger-text: var(--danger-text-emphasis), + state-danger-text-hvr: lighten($danger, 52%), + state-danger-bg: #f3d4d4, + state-danger-bg-hvr: $danger, + state-danger-border: var(--danger-border-subtle), + state-danger-icon: #ce8484, + state-danger-heading-bg: $danger, + state-danger-link-color: var(--danger-text-emphasis), + + state-error-text: $danger, + state-error-text-hvr: $danger, + state-error-bg: lighten($danger, 52%), + state-error-bg-hvr: lighten($danger, 52%), + state-error-border: 1px solid $danger, + state-error-icon: lighten($danger, 20%), + state-error-heading-bg: $danger, + + alert-info-color: var(--template-bg-dark), + alert-info-bg: var(--template-bg-dark-10), + alert-info-border: 1px solid var(--template-bg-dark-20), + alert-link-text-color: var(--info-text-emphasis), + alert-accent-color: #fff, + + // Subhead + atum-subhead-color: var(--template-text-dark), + atum-subhead-bg: $white, + atum-subhead-bg-img: (linear-gradient(var(--toolbar-bg), var(--template-bg-dark-3))), + + atum-btn: $atum-text-dark, + atum-btn-icon: $atum-text-dark, + atum-btn-icon-hvr: var(--template-text-light), + atum-btn-bg: var(--body-bg), + atum-btn-bg-hvr: $atum-text-dark, + atum-btn-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-hvr: var(--body-bg), + + /* + btn-success: var(--success), + btn-success-icon: var(--atum-btn-success-bg-hvr), + btn-success-icon-hvr: var(--template-text-light), + btn-success-bg: var(--body-bg), + btn-success-bg-hvr: var(--success), + btn-success-border: 1px solid hsl(var(--hue),20%,80%), + btn-success-hvr: var(--body-bg), + */ + + atum-btn-success: var(--success), + atum-btn-success-icon: var(--atum-btn-success-bg-hvr), + atum-btn-success-icon-hvr: var(--template-text-light), + atum-btn-success-bg: var(--body-bg), + atum-btn-success-bg-hvr: var(--success), + atum-btn-success-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-success-hvr: var(--body-bg), + + atum-btn-danger: $danger, + atum-btn-danger-icon: $danger, + atum-btn-danger-icon-hvr: var(--template-text-light), + atum-btn-danger-bg: var(--body-bg), + atum-btn-danger-bg-hvr: $danger, + atum-btn-danger-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-danger-hvr: var(--body-bg), + + atum-btn-info: $atum-text-dark, + atum-btn-info-icon: $info, + atum-btn-info-icon-hvr: var(--atum-btn-hvr), + atum-btn-info-bg: var(--body-bg), + atum-btn-info-bg-hvr: $info, + atum-btn-info-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-info-hvr: var(--body-bg), + + atum-btn-primary: var(--template-link-color), + atum-btn-primary-icon: var(--template-link-color), + atum-btn-primary-icon-hvr: var(--template-text-light), + atum-btn-primary-bg: var(--body-bg), + atum-btn-primary-bg-hvr: var(--template-link-color), + atum-btn-primary-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-primary-hvr: var(--body-bg), + + + atum-btn-action: var(--template-text-light), + atum-btn-action-icon: var(--template-bg-dark), + atum-btn-action-icon-hvr: var(--template-text-light), + atum-btn-action-bg: var(--body-bg), + atum-btn-action-bg-hvr: var(--template-bg-dark), + atum-btn-action-border: 1px solid hsl(var(--hue),20%,80%), + atum-btn-action-hvr: var(--body-bg), + + + atum-list-group-bg: var(--body-bg), //rgba(255, 255, 255, .05), + + // Calendar + atum-calendar-week-bg: #f4f4f4, + atum-calendar-bg: var(--body-bg), + atum-calendar-buttons-color: #495057, //var(--btn-primary-bg); + atum-calendar-disabled-color: #999, //#4b4b4b, + atum-calendar-disabled-bg: #fff, //rgba(0,0,0,.5), + atum-calendar-select-bg: $form-select-bg, + atum-calendar-select-bg-url: url("../../images/select-bg.svg"), + atum-calendar-select-bg-url-rtl: url("../../images/select-bg-rtl.svg"), + + // Permissions + permissions-sliders-oddCol-bg: var(--template-bg-light), + respTable-border-bottom: 1em solid var(--template-bg-dark-80), + + // Treeselect + treeselect-line-color: hsl(var(--hue), 40%, 93%), + treeselect-dropdown-toggle: var(--template-text-dark), + + icon-check-square-bg: rgb(33,37,41), + icon-square-bg: rgb(33,37,41), + icon-check-square-color: var(--template-text-light), + icon-square-color: var(--template-text-light), + + // Table Row Dragging + drag-color: #151515, + drag-background-color: $teal, + + success-text: $success, + success: $success, + successhvr: darken($success, 15%), + + danger-text: $danger, + danger: $danger, + dangerhvr: darken($danger, 15%), + + darkdanger: $danger, + darkdangerhvr: darken($danger, 15%), + + warning-text: #000, + warning: $warning, + warninghvr: darken($warning, 15%), + +); + +$colors: ( + card-bg: rgba(255, 255, 255, .7), + card-color: var(--template-bg-dark-60), + bluegray: $bluegray, + lightbluegray: #f6f9fc, + toolbar-bg: $white, + success-border: var(--success), + info-border: var(--info), + warning-border: var(--warning), + danger-border: var(--danger), + login-main-bg: darken($base-color, 8%), //used on login + border: $gray-400, + "white": $white, // the key here must be in quotes to avoid scss compilation warnings. + white-offset: $whiteoffset, + focus: #39f, + focus-shadow: #eaeaea, + toggle-color: $white, //used in sidebar + +); + +// Alerts +$alert-border-level: 0; +$alert-color-level: 0; + +// Global +$btn-disabled-opacity: .4; +$admin-background: var(--admin-background); +$bg-normal: var(--bg-normal); +$bg-reverted: var(--bg-reverted); + +// Login +$login-box-shadow: var(--login-box-shadow); +$login-focus-box-shadow: var(--login-focus-box-shadow); + +// Toolbar +$atum-toolbar-line-height: 2.45rem; + +// Sidebar +$sidebar-width: 18rem; +$sidebar-width-login: 28.75rem; +$sidebar-width-closed: 3rem; +$main-brand-height: 3rem; +$sidebarwrapper-bg: var(--sidebarwrapper-bg); +$sidebar-item-color: var(--sidebar-item-color); +$sidebar-item-color-hvr: var(--sidebar-item-color-hvr); +$sidebar-item-bg-hvr: var(--sidebar-item-bg-hvr); +$sidebar-toggle-bg: var(--sidebar-toggle-bg); +$sidebar-toggle-link: var(--sidebar-toggle-link); +$main-nav-ul-bg: var(--main-nav-ul-bg); +$main-nav-divider-bg: var(--main-nav-divider-bg); +$main-nav-item-title: var(--main-nav-item-title); +$main-nav-mm-active-bg: var(--main-nav-mm-active-bg); +$main-nav-mm-active-quicktask-bg: var(--main-nav-mm-active-quicktask-bg); +$main-nav-badge: var(--main-nav-badge); +$main-nav-item-title-hvr-bg: var(--main-nav-item-title-hvr-bg); +$mobile-menu-collapse-bg: var(--mobile-menu-collapse-bg); + +// Fonts +$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$h1-font-size: 1.65rem; +$h2-font-size: 1.5rem; +$h3-font-size: 1.25rem; +$h4-font-size: 1rem; +$h5-font-size: .9286rem; +$h6-font-size: .8571rem; +$headings-color: var(--template-bg-dark); +$font-size-sm: .8rem; +$font-size-vsm: .6rem; +$display1-size: 1rem; +$display2-size: .875rem; +$content-font-size: .875rem; +$label-font-size: 1rem; +$danger-bg: #900; +$badge-font-size: .75rem; +$jicon-css-prefix: icon !default; +$fa-css-prefix: fa !default; +$fa-font-path: "../../../../media/vendor/fontawesome-free/webfonts"; +$roboto-font-path: "../../../../../media/vendor/roboto-fontface/fonts"; + +// Tables +$table-cell-padding-y: .75rem; +$table-cell-padding-x: 1rem; +$table-cell-padding-y-sm: .3rem; +$table-cell-padding-x-sm: .3rem; +$table-group-separator-color: $gray-300; +$table-border-top-nfc: var(--table-border-top-nfc); +$table-link-color: var(--table-link-color); +$table-link-font-weight: var(--table-link-font-weight); +$table-link-font-weight-sorted: var(--table-link-font-weight-sorted); +$badge-bg-info: var(--badge-bg-info); + +// card +$card-header-color: var(--card-header-color); +$card-header-bg: var(--card-header-bg); +$card-bg: var(--card-bg); +$main-card-bg: var(--main-card-bg); +$main-card-col-border-left: var(--main-card-col-border-left); +$card-body-bg: var(--card-body-bg); + +// cpanel +$module-actions-color: var(--module-actions-color); + +// Dropdowns +$dropdown-padding-y: 0; +$dropdown-box-shadow: var(--dropdown-box-shadow); +$dropdown-link-hover-color: var(--template-text-dark); +$dropdown-border-width: 1px; +$dropdown-item-padding-y: .5rem; +$dropdown-item-padding-x: .75rem; +$dropdown-spacer: 0; + +// Cards +$card-border-width: 0; +$card-border-color: transparent; + +// Details +$details-bg: var(--details-bg); +$details-border: var(--details-border); + +// nav +$nav-header-color: var(--nav-header-color); + +// users +$users-method-image: var(--users-method-image); +$users-methods-reset-cont-bg: var(--users-methods-reset-cont-bg); +$users-method-header-inact-bg: var(--users-method-header-inact-bg); + +// Icons +$icon-success: var(--icon-success); +$icon-success-border: var(--icon-success-border); +$icon-checkedout-color: var(--icon-checkedout-color); + +// Buttons +$btn-primary-color: var(--btn-primary-color); +$btn-primary-bg: var(--btn-primary-bg); +$btn-primary-border: var(--btn-primary-border); +$btn-primary-bg-hvr: var(--btn-primary-bg-hvr); +$btn-primary-border-hvr: var(--btn-primary-border-hvr); +$btn-primary-toggle-bg: var(--btn-primary-toggle-bg); +$btn-primary-toggle-border: var(--btn-primary-toggle-border); + +$btn-secondary-bg: var(--btn-secondary-bg); +$btn-secondary-border: var(--btn-secondary-border); + +$btn-outline-secondary-color: var(--btn-outline-secondary-color); +$btn-outline-secondary-bg: var(--btn-outline-secondary-bg); +$btn-outline-secondary-border: var(--btn-outline-secondary-border); +$input-group-text-bg: var(--input-group-text-bg); +$input-group-text-border: var(--input-group-text-border); + +// Search +$js-stools-btn-clear-bg: var(--template-bg-dark); +$js-stools-btn-clear-disabled-bg: var(--btn-disabled-bg); +$js-stools-btn-clear-disabled-border: var(--js-stools-btn-clear-disabled-border); + +// Dropdown +$dropdown-header-bg: var(--dropdown-header-bg); +$dropdown-item-bg: var(--dropdown-item-bg); +$dropdown-item-bg-hvr: var(--dropdown-item-bg-hvr); + +// Alerts +$state-success-text: $success; +$state-success-text-hvr: $success; +$state-success-bg: lighten($success, 58%); +$state-success-bg-hvr: lighten($success, 58%); +$state-success-border: var(--state-success-border); +$state-success-btn-border: var(--state-success-btn-border); +$state-success-icon: var(--state-success-icon); +$state-success-icon-hvr: var(--state-success-icon-hvr); +$state-success-heading-bg: var(--state-success-heading-bg); + +$state-info-text: var(--state-info-text); +$state-info-text-hvr: var(--state-info-text); +$state-info-bg: lighten($info, 90%); +$state-info-bg-hvr: var(--state-info-bg); +$state-info-border: var(--state-info-border); +$state-info-icon: var(--state-info-icon); +$state-info-heading-bg: var(--state-info-heading-bg); + +$state-warning-text: var(--state-warning-text); +$state-warning-text-hvr: var(--state-warning-text); +$state-warning-bg: var(--state-warning-bg); +$state-warning-bg-hvr: var(--state-warning-bg); +$state-warning-border: var(--state-warning-border); +$state-warning-icon: var(--state-warning-icon); +$state-warning-heading-bg: var(--state-warning-heading-bg); + +$state-danger-text: var(--state-danger-text); +$state-danger-text-hvr: var(--state-danger-text); +$state-danger-bg: var(--state-danger-bg); +$state-danger-bg-hvr: var(--state-danger-bg); +$state-danger-border: var(--state-danger-border); +$state-danger-icon: var(--state-danger-icon); +$state-danger-heading-bg: var(--state-danger-heading-bg); + +$state-error-text: var(--state-error-text); +$state-error-text-hvr: var(--state-error-text); +$state-error-bg: var(--state-error-bg); +$state-error-bg-hvr: var(--state-error-bg); +$state-error-border: var(--state-error-border); +$state-error-icon: var(--state-error-icon); +$state-error-heading-bg: var(--state-error-heading-bg); + +$alert-border: var(--alert-border); + +// Badges +$badge-padding-x: .2rem; +$badge-padding-y: .3rem; +$badge-border-radius: .2rem; + +$success-bg: $green; +$success-txt: $white; + +$warning-bg: #996808; +$warning-txt: #fff; + +$danger-bg: #900; +$danger-txt: #fff; + +$info-bg: $gray-300; +$info-txt: $white; + +// Input Group +$input-group-addon-color: var(--white); +$input-group-addon-bg: $base-color; +$input-group-addon-border-color: var(--template-bg-dark); + +// Treeselect +$treeselect-line-height: 2.2rem; +$treeselect-indent: 40px; + +// List +$atum-list-group-border-color: var(--atum-list-group-border-color); +$list-group-item-padding-y: .75rem; + +// Login +$login-label-color: var(--login-label-color); + +// Subhead +$atum-subhead-bg: var(--atum-subhead-bg); +$atum-subhead-bg-img: var(--atum-subhead-bg-img); +$atum-btn-color: var(--atum-btn-color); +$atum-btn-bg: var(--atum-btn-bg); +$atum-btn-border: var(--atum-btn-border); +$atum-btn-hvr: var(--atum-btn-hvr); + +$atum-btn-success: var(--atum-btn-success); +$atum-btn-success-bg: var(--atum-btn-success-bg); +$atum-btn-success-border: var(--atum-btn-success-border); +$atum-btn-success-hvr: var(--atum-btn-success-hvr); + +$atum-btn-danger: var(--atum-btn-danger); +$atum-btn-danger-bg: var(--atum-btn-danger-bg); +$atum-btn-danger-border: var(--atum-btn-danger-border); +$atum-btn-danger-hvr: var(--atum-btn-danger-hvr); + +$atum-btn-info: var(--atum-btn-info); +$atum-btn-info-bg: var(--atum-btn-info-bg); +$atum-btn-info-border: var(--atum-btn-info-border); +$atum-btn-info-hvr: var(--atum-btn-info-hvr); + +$atum-btn-primary: var(--atum-btn-primary); +$atum-btn-primary-bg: var(--atum-btn-primary-bg); +$atum-btn-primary-border: var(--atum-btn-primary-border); +$atum-btn-primary-hvr: var(--atum-btn-primary-hvr); + + +$atum-btn-secondary: var(--atum-btn-secondary); +$atum-btn-action: var(--atum-btn-action); +$atum-btn-action-bg: var(--atum-btn-action-bg); + +$atum-list-group-bg: var(--atum-list-group-bg); + +// Calendar +$atum-calendar-week-bg: var(--atum-calendar-week-bg); +$atum-calendar-bg: var(--atum-calendar-bg); +$atum-calendar-buttons-color: var(--atum-calendar-buttons-color); +$atum-calendar-disabled-color: var(--atum-calendar-disabled-color); +$atum-calendar-disabled-bg: var(--atum-calendar-disabled-bg); +$atum-calendar-select-bg: var(--atum-calendar-select-bg); +$atum-calendar-select-bg-url: var(--atum-calendar-select-bg-url); +$atum-calendar-select-bg-url-rtl: var(--atum-calendar-select-bg-url-rtl); + +// Permissions +$permissions-sliders-oddCol-bg: var(--permissions-sliders-oddCol); +$respTable-border-bottom: var(--respTable-border-bottom); + +// Media Manager +$media-manager-overlay-header-bg: var(--media-manager-overlay-header-bg); +$media-manager-infobar-dt-color: var(--media-manager-infobar-dt-color); +$media-manager-content-bg: var(--media-manager-content-bg); +$media-manager-content-color: var(--media-manager-content-color); +$media-manager-file-icon-color: var(--media-manager-file-icon-color); //?? inherit + +$media-manager-overlay-bg: var(--media-manager-overlay-bg); +$media-manager-disk-name-color: var(--media-manager-disk-name-color); +$media-manager-tree-item-hover-bg: var(--media-manager-tree-item-hover-bg); +$media-manager-toolbar-icon-color: var(--media-manager-toolbar-icon-color); + +$media-manager-border: var(--media-manager-border); +$media-browser-file-bg: var(--media-browser-file-bg); +//$media-browser-item-preview-border: var(--media-browser-item-preview-border); +$media-drive-bg: var(--media-drive-bg); +//$media-drive-border: var(--media-drive-border); +$media-toolbar-bg: var(--media-toolbar-bg); +//$media-toolbar-border-bottom: var(--media-toolbar-border-bottom); +//$media-toolbar-border-inline-start: var(--media-toolbar-border-inline-start); + +$media-toolbar-icon-bg: var(--media-toolbar-icon-bg); +//$media-toolbar-icon-border-start: var(--media-toolbar-icon-border-start); +$media-toolbar-icon-color: var(--media-toolbar-icon-color); +$media-toolbar-icon-bg-hvr: var(--media-toolbar-icon-bg-hvr); +$media-tree-item-color: var(--media-tree-item-color); //var(--template-bg-dark-60); +$media-manager-breadcrumb-item-bg: var(--media-manager-breadcrumb-item-bg); +$media-tree-active-icon-color: var(--media-tree-active-icon-color); + +$image-bg: var(--image-bg); // #fff; +$image-bg-image: var(--image-bg-image); //linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%); + + +// Buttons +$input-btn-padding-y-sm-submenu: 0; +$input-btn-padding-x-sm-submenu: 1.625rem; +$input-btn-submenu-icon-distance: 1rem; + +// Custom form +$form-select-indicator-padding: 3rem; +$form-select-background: var(--form-select-background); +$form-select-background-rtl: var(--form-select-background-rtl); +$form-select-border: var(--form-select-border); +$form-select-border-radius: 4px; +$form-select-box-shadow: var(--atum-box-shadow); +$form-select-multiple-padding-y: .3rem; +$form-select-success-bg: var(--form-select-success-bg); +$form-select-danger-bg: var(--form-select-danger-bg); +$form-select-disabled-bg: var(--form-select-disabled-bg); +$form-select-option: var(--form-select-option); +$form-select-option-disabled-bg: var(--form-select-option-disabled-bg); + +$form-file-button-color: var(--white); + +$file-selector-btn-bg: var(--file-selector-btn-bg); +$file-selector-btn-bg-hvr: var(--file-selector-btn-bg-hvr); + +//Forms +$form-aria-grabbed-box-shadow: var(--form-aria-grabbed-box-shadow); +$options-form-color: var(--options-form-color); +$options-form-bg: var(--options-form-bg); +$options-form-border: var(--options-form-border); +$options-form-legend-color: var(--options-form-legend-color); +$options-form-legend-bg: var(--options-form-legend-bg); +$form-control-bg: var(--form-control-bg); +$form-control-bg-disabled: var(--form-control-bg-disabled); +$form-control-border: var(--form-control-border); + +$form-check-input-checked-bg-image: var(--form-check-input-checked-bg-image); +$form-check-input-checked-bg-color: var(--form-check-input-checked-bg-color); +$form-check-input-border: var(--form-check-input-border); + +// Input +$input-padding: .5rem 1rem; +$input-border-color: var(--input-border-color); +$input-focus-border-color: var(--focus); +$input-box-shadow: var(--atum-box-shadow); +$input-max-width: 100%; +$input-btn-focus-width: .2rem; +$input-btn-focus-color: var(--focus-shadow); +$input-btn-padding-y: .5rem; +$input-btn-padding-x: 1rem; + +// Modals +$modal-header-height: 2.875rem; +$modal-btn-box-shadow: var(--modal-btn-box-shadow); +$modal-joomla-dialog-box-shadow: var(--modal-joomla-dialog-box-shadow); + +// Choices +$choices__button_joomla-focus-box-shadow: var(--choices__button_joomla-focus-box-shadow); +$choices-input-border-color: var(--choices-input-border-color); +$choices-input-bg: var(--choices-input-bg); +$choices-input-placeholder: var(--choices-input-placeholder); +$choices-list-multiple-item-bg: var(--choices-list-multiple-item-bg); +$choices-list-multiple-item: var(--choices-list-multiple-item); + +// Switcher +$switcher-toggle-inside-bg: var(--switcher-toggle-inside-bg); +$switcher-toggle-outside-off-bg: var(--switcher-toggle-outside-off-bg); +$switcher-toggle-outside-on-bg: var(--switcher-toggle-outside-on-bg); + +// Joomla-Tab +$joomla-tab-accordion-box-shadow: var(--joomla-tab-accordion-box-shadow); +$joomla-tab-btn-hvr: var(--joomla-tab-btn-hvr); +$joomla-tab-btn-aria-exp-bg: var(--joomla-tab-btn-aria-exp-bg); +$joomla-tab-btn-region-border: var(--joomla-tab-btn-region-border); +$joomla-tablist-btn-aria-exp: var(--joomla-tablist-btn-aria-exp); +$joomla-tablist-btn-aria-exp-bg: var(--joomla-tablist-btn-aria-exp-bg); +$joomla-tablist-btn-aria-exp-aft-bg: var(--joomla-tablist-btn-aria-exp-aft-bg); +$joomla-tablist-border-bottom: var(--joomla-tablist-border-bottom); +$joomla-tab-tablist-border: var(--joomla-tab-tablist-border); +$joomla-tab-vert-border-bottom: var(--joomla-tab-vert-border-bottom); + +// Quickicons +$quickicon-bg: var(--quickicon-bg); +$quickicon-box-shadow-success: var(--quickicon-box-shadow-success); +$quickicon-box-shadow-danger: var(--quickicon-box-shadow-danger); +$quickicon-box-shadow-warning: var(--quickicon-box-shadow-warning); +$quickicon-icon-size: 2rem; +$quickicon-icon-size-sm: 1.3rem; +$quickicon-border: var(--quickicon-border); +$quickicon-border-radius: var(--quickicon-border-radius); +$quickicon-color: var(--quickicon-color); +$quickicon-color-hvr: var(--quickicon-color-hvr); +$quickicon-link-hvr: var(--quickicon-link-hvr); +$quickicon-linkadd-color: var(--quickicon-linkadd-color); +$quickicon-linkadd-bg: var(--quickicon-linkadd-bg); +$quickicon-amount-bg: var(--quickicon-amount-bg); + +// Text +$text-normal: var(--text-normal); +$text-reverted: var(--text-reverted); +$text-muted-color: var(--text-muted-color); +$text-muted-hvr-color: var(--text-muted-hvr-color); + +// Modules +$new-modules-color: var(--new-modules-color); +$new-modules-bg: var(--new-modules-bg); +$new-modules-bg-hvr: var(--new-modules-bg-hvr); +$new-modules-icon-color: var(--new-modules-icon-color); +$new-modules-icon-color-hvr: var(--new-modules-icon-color-hvr); +$new-module-color: var(--new-module-color); +$new-module-bg: var(--new-module-bg); +$new-module-border: var(--new-module-border); +$new-module-link-bg: var(--new-module-link-bg); +$new-module-link-span: var(--new-module-link-span); +$new-module-link-hvr: var(--new-module-link-hvr); +$new-module-link-span-hvr: var(--new-module-link-span-hvr); + +// header-content +$header-bg: var(--header-bg); +$header-item-content-bg: var(--header-item-content-bg); +$header-item-content-bg-hvr: var(--header-item-content-bg-hvr); +$header-item-content-border-radius: var(--header-item-content-border-radius); +$header-item-content-jversion-color: var(--header-item-content-jversion-color); +$header-item-content-jversion-bg: var(--header-item-content-jversion-bg); +$header-logo-bg: var(--header-logo-bg); + + +// Gutter +$grid-gutter-width: 2rem; +$grid-gutter-width-s: 15px; + +// Breadcrumbs +$breadcrumb-bg: var(--white); + +// Links +$link-color: $light-blue; +$link-hover-color: darken($light-blue, 20%); +$link-decoration: none; + +// Z-Index list +$zindex-negative: -1; +$zindex-actions: auto; +$zindex-toolbar: 1000; +$zindex-sidebar: 1010; +$zindex-header: 1020; +$zindex-alerts: 1030; +$zindex-modal-backdrop: 1040; +$zindex-modal: 1050; +$zindex-popover: 1060; +$zindex-tooltip: 1070; +$zindex-mobile-bottom: 8000; +$zindex-mobile-toggle: 9999; +$zindex-mobile-menu: 9000; + +// scss-docs-start border-radius-variables +$btn-border-radius: .25rem !default; +$border-radius: .25rem !default; +$border-radius-sm: .2rem !default; +$border-radius-lg: .3rem !default; +$border-radius-xl: .3rem !default; +$border-radius-2xl: .3rem !default; +// scss-docs-end border-radius-variables diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_alerts.scss b/build/media_source/templates/administrator/atum/scss/blocks/_alerts.scss index 6ca0e02265b7e..5a78907475e5a 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_alerts.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_alerts.scss @@ -1,38 +1,53 @@ // Alerts +.alert-parent { + margin-top: 0; +} + +.alert-heading { + font-size: $h4-font-size; +} + +.alert-link { + font-weight: normal; + color: var(--states-link-color); + text-decoration: underline; +} + .alert { margin: 1rem 0; - border-right: 0; - border-left: 0; + border: 1px solid; border-radius: $border-radius-sm; &.alert-info { - color: var(--template-bg-dark); - background-color: var(--template-bg-dark-10); - border: 1px solid var(--template-bg-dark-20); + color: var(--state-info-text); + background-color: var(--state-info-bg); + border: var(--state-info-border); } &.alert-warning { - color: $state-warning-text; - background-color: $state-warning-bg; - border: 1px solid $state-warning-border; + color: var(--state-warning-text); + background-color: var(--state-warning-bg); + border: var(--state-warning-border); } &.alert-success { - color: $state-success-text; - background-color: $state-success-bg; - border: 1px solid $state-success-border; + color: var(--state-success-text); + background-color: var(--state-success-bg); + border: var(--state-success-border); } &.alert-error { - color: $state-error-text; - background-color: $state-error-bg; - border: 1px solid $state-error-border; + color: var(--state-error-text); + background-color: var(--state-error-bg); + border: var(--state-error-border); } -} -.alert-parent { - margin-top: 0; + &.alert-danger { + color: var(--state-danger-text); + background-color: var(--state-danger-bg); + border-color: var(--state-danger-border); + } } fieldset .alert { @@ -41,10 +56,6 @@ fieldset .alert { } } -.alert-heading { - font-size: $h4-font-size; -} - @keyframes fadeIn { from { opacity: 0; diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_calendar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_calendar.scss index e485d5744b75a..5cee56b7c4b95 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_calendar.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_calendar.scss @@ -1,16 +1,25 @@ +// Calendar + :root { - --calendar-bg: var(--body-bg); - --calendar-week-bg: #f4f4f4; - --calendar-buttons-color: #495057; - --calendar-select-bg-color: #{$form-select-bg}; + --calendar-week-bg: #{$atum-calendar-week-bg}; // #f4f4f4; rgba(255,255,255,.1); + --calendar-bg: #{$atum-calendar-bg}; + + --calendar-buttons-color: #{$atum-calendar-buttons-color}; //#495057; var(--btn-primary-bg); + + --calendar-select-bg-color: #{$atum-calendar-select-bg}; //$form-select-bg --calendar-select-color: var(--body-color); + + --calendar-disabled-color: #{$atum-calendar-disabled-color}; //#999; #4b4b4b; + --calendar-disabled-bg: #{$atum-calendar-disabled-bg}; //#fff; rgba(0,0,0,.5); + + --calendar-select-bg-url: #{$atum-calendar-select-bg-url} #{"/* rtl:"}$atum-calendar-select-bg-url-rtl#{"*/"}; + } -@if $enable-dark-mode { - @include color-mode(dark, true) { - --calendar-week-bg: var(--gray-700); - --calendar-buttons-color: var(--template-bg-dark-20); - --calendar-select-bg-url: url("../../images/calendar-select-bg-dark.svg") /*rtl:url("../../images/calendar-select-bg-dark-rtl.svg")*/; - --calendar-select-bg-color: #{$form-select-bg-dark}; +.calendar-container { + tr.time { + &:hover, &:focus, &:active { + background-color: transparent; + } } } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_edit.scss b/build/media_source/templates/administrator/atum/scss/blocks/_edit.scss index 7a7a9e1e77253..ed148d96f916a 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_edit.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_edit.scss @@ -20,4 +20,5 @@ box-shadow: none; } } + } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_form.scss b/build/media_source/templates/administrator/atum/scss/blocks/_form.scss index b86634cf04f2a..bd9781b01ed01 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_form.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_form.scss @@ -2,35 +2,45 @@ .form-control { max-width: $input-max-width; + background: $form-control-bg; + border: $form-control-border; &:disabled, &[readonly] { - background-color: var(--gray-200); + background-color: $form-control-bg-disabled; opacity: 1; + &:hover, + &:active, + &:focus { + cursor: not-allowed; + } } - @if $enable-dark-mode { - @include color-mode(dark) { - &:disabled, - &[readonly] { - background-color: var(--gray-800); - } - } + &:focus:not(:disabled):not([readonly]) { + border: 1px solid var(--template-link-color) !important; } &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button, &:hover:not(:disabled):not([readonly])::file-selector-button { - background-color: var(--template-bg-dark-50); + background-color: $file-selector-btn-bg-hvr; + } + + &.invalid { + border-color: var(--danger); + } + + &.valid { + border-color: var(--success); } &::placeholder { - font-size: .8rem; font-style: italic; + opacity: .9; } &::-webkit-file-upload-button, &::file-selector-button { - background-color: var(--template-bg-dark-70); + background-color: $file-selector-btn-bg; } } @@ -107,14 +117,21 @@ td .form-control { // Validation .invalid { - color: var(--danger); border-color: var(--danger); } +label.invalid { + color: var(--danger-text); +} + .valid { border-color: var(--success); } +label.valid { + color: var(--success-text); +} + .form-control-feedback { display: block; } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss index 9a745c820ce1a..5fbd296d9cb7b 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss @@ -16,16 +16,8 @@ body { margin: 0; text-align: start; - &.admin { - background-color: var(--template-bg-dark-5); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - &.admin { - background-color: var(--template-bg-dark-90); - } - } + &.admin, &#subhead-container { + background-color: $admin-background; } &.monochrome { @@ -67,6 +59,7 @@ body { a.page-link { padding: $pagination-padding-y $pagination-padding-x; } + } } @@ -138,6 +131,7 @@ body .container-main { position: relative; padding-right: 0; padding-left: 0; + background: var(--main-bg); } .content { @@ -153,9 +147,9 @@ body .container-main { } body:not(.contentpane) .main-card { - background: var(--body-bg); + background: $main-card-bg; border-radius: $border-radius; - box-shadow: $atum-box-shadow; + box-shadow: var(--atum-box-shadow); } .row-selected { @@ -201,18 +195,10 @@ a[target="_blank"]::before { } .text-muted { - color: var(--template-text-dark) !important; + color: $text-muted-color; opacity: .7; } -@if $enable-dark-mode { - @include color-mode(dark) { - .text-muted { - color: var(--template-text-light) !important; - } - } -} - .card-columns { display: grid; grid-gap: 0 15px; @@ -243,8 +229,8 @@ a[target="_blank"]::before { details { padding: .5rem 1rem; margin: 0 0 2rem; - background: var(--template-bg-dark-3); - border: 1px solid var(--template-bg-dark-10); + background: $details-bg; + border: $details-border; border-radius: $border-radius; summary { @@ -256,14 +242,6 @@ details { } } -@if $enable-dark-mode { - @include color-mode(dark) { - details { - background: var(--template-bg-dark-90); - } - } -} - // meter element meter { width: 100%; diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_header.scss b/build/media_source/templates/administrator/atum/scss/blocks/_header.scss index 2872c8e1f382e..3da646e3b75cd 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_header.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_header.scss @@ -2,7 +2,7 @@ .header { z-index: $zindex-header; color: $white; - background: var(--template-bg-dark); + background: $header-bg; &-inside { display: flex; @@ -25,7 +25,7 @@ height: 100%; padding: 12px 5px; overflow: hidden; - background-color: var(--template-bg-dark-70); + background-color: $header-logo-bg; transition: all .3s ease-in-out; &.small { @@ -86,21 +86,21 @@ .dropdown-item { padding: .82rem .75rem; color: $white; - background-color: var(--template-bg-dark-70); + background-color: $dropdown-item-bg; //var(--template-bg-dark-70); > span { margin-inline-end: .5rem; } &:hover { - background-color: var(--template-bg-dark); + background-color: $dropdown-item-bg-hvr; //var(--template-bg-dark); } } .dropdown-header { padding: .75rem; font-size: inherit; - background-color: var(--template-bg-dark); + background-color: $dropdown-header-bg; //var(--template-bg-dark); } } @@ -131,9 +131,9 @@ align-items: center; line-height: 1rem; color: $white; - background-color: var(--template-bg-dark-60); + background-color: $header-item-content-bg; border: none; - border-radius: 22px; + border-radius: $header-item-content-border-radius; padding-inline-end: 4px; a, @@ -147,12 +147,12 @@ } &:not(.no-link):not(.joomlaversion):hover { - background-color: var(--template-bg-dark-50); + background-color: $header-item-content-bg-hvr; } &.joomlaversion { - color: var(--bluegray); - background-color: transparent; + color: $header-item-content-jversion-color; + background-color: $header-item-content-jversion-bg; .header-item-text { padding-inline-end: 12px; @@ -228,3 +228,14 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .header-item-content:not(.joomlaversion) { + border: map-get($atum-colors-dark, "atum-btn-primary-border"); + } + .header-item-icon > * { + background: var(--header-bg); + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_icons.scss b/build/media_source/templates/administrator/atum/scss/blocks/_icons.scss index 0841d8f677b03..aad2821b6ad01 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_icons.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_icons.scss @@ -26,16 +26,16 @@ .#{$jicon-css-prefix}-publish, .#{$jicon-css-prefix}-check, .#{$fa-css-prefix}-check { - color: var(--success); - border-color: var(--success); + color: $icon-success; + border-color: $icon-success; } .#{$jicon-css-prefix}-home, .#{$jicon-css-prefix}-color-featured, .#{$jicon-css-prefix}-star.featured, .#{$fa-css-prefix}-star.featured { - color: $warning; - border-color: $warning; + color: var(--featured-icon-color); + border-color: var(--featured-icon-color); } .#{$jicon-css-prefix}-folder, @@ -51,7 +51,7 @@ height: auto; font-size: 1.2rem; line-height: 1rem; - color: var(--template-text-dark); + color: $icon-checkedout-color; //var(--template-text-dark); border: 0; } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss b/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss index d61fc6e6fa6dd..31e25f1c57a4b 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss @@ -2,32 +2,18 @@ width: 100%; padding: 1vw 2vw; margin-bottom: 1rem; - color: var(--template-text-dark); - border: 1px solid var(--template-bg-dark-20); + color: $options-form-color; + background: $options-form-bg; + border: $options-form-border; > legend { float: none; width: auto; padding: 0 1rem; font-weight: $font-weight-bold; - color: var(--template-text-dark); - background-color: var(--body-bg); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - > legend { - color: var(--template-text-light); - } - } + color: $options-form-legend-color; + background-color: $options-form-legend-bg; } } -@if $enable-dark-mode { - @include color-mode(dark) { - .options-form { - color: var(--template-text-light); - } - } -} diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_login.scss b/build/media_source/templates/administrator/atum/scss/blocks/_login.scss index ad2a40afae6dd..b12e979b781ca 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_login.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_login.scss @@ -30,7 +30,7 @@ color: var(--template-text-dark); background: var(--body-bg); border-radius: 10px; - box-shadow: 0 4px 20px -10px var(--template-bg-dark-50); + box-shadow: $login-box-shadow; @include media-breakpoint-down(lg) { margin-bottom: 3rem; @@ -97,7 +97,7 @@ input:focus, select:focus { - box-shadow: inset 0 0 1px 1px var(--template-contrast); + box-shadow: $login-focus-box-shadow; } h1 { @@ -151,6 +151,14 @@ font-size: ($font-size-base * 1.125); color: $white; } + + @if $enable-dark-mode { + @include color-mode(dark) { + .card-header { + background: transparent; + } + } + } } #sidebar { @@ -170,6 +178,15 @@ } } + @if $enable-dark-mode { + @include color-mode(dark) { + .card { + background: rgba(0, 0, 0, .4); + } + } + } + + @include media-breakpoint-down(md) { position: relative; bottom: 0; @@ -210,18 +227,9 @@ } label { - color: $darkblue; + color: $login-label-color; } -@if $enable-dark-mode { - @include color-mode(dark) { - label { - color: var(--white); - } - } -} - - .com_login .sidebar-wrapper .main-brand { flex: 1; flex-basis: auto; diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss b/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss old mode 100755 new mode 100644 index 63a726e4cb81c..8fcd8fda797ca --- a/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss @@ -10,7 +10,7 @@ color: var(--template-text-dark); background: var(--white); border-color: var(--whiteoffset); - box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .25); + box-shadow: $modal-btn-box-shadow; } .btn-primary:not([href]), @@ -175,7 +175,7 @@ joomla-dialog { padding: 0; border: 1px solid var(--border-color-translucent); border-radius: .3rem; - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); + box-shadow: $modal-joomla-dialog-box-shadow; @include media-breakpoint-up(xxl) { width: 80vw; @@ -218,12 +218,13 @@ joomla-dialog { width: 66px; height: 66px; content: ""; - background: url("../../../../system/images/ajax-loader.gif") no-repeat center; + background: url("../../../../system/images/ajax-loader.gif") no-repeat center; // TODO: use svg animation? transform: translate(-50%, -50%); } } } } + // Dialog animation joomla-dialog dialog[open] { animation: dialog-show .4s ease normal; @@ -232,6 +233,7 @@ joomla-dialog dialog[open] { animation: none; } } + @keyframes dialog-show { 0% { opacity: 0; @@ -244,6 +246,7 @@ joomla-dialog dialog[open] { transform: translateY(0); } } + // Dialog elements .joomla-dialog-container { position: relative; @@ -251,6 +254,7 @@ joomla-dialog dialog[open] { display: flex; flex-flow: column; width: 100%; + background: var(--body-bg); .buttons-holder { display: flex; @@ -263,6 +267,7 @@ joomla-dialog dialog[open] { } } } + .joomla-dialog-header { position: relative; display: flex; @@ -284,6 +289,7 @@ joomla-dialog dialog[open] { display: none; } } + .joomla-dialog-body { position: relative; box-sizing: border-box; @@ -305,11 +311,13 @@ joomla-dialog dialog[open] { joomla-dialog.loading & { opacity: 0; } + joomla-dialog.loaded & { opacity: 1; transition: opacity .4s ease; } } + .joomla-dialog-footer { position: relative; padding: 1rem; @@ -347,3 +355,91 @@ joomla-dialog dialog[open] { } } } + +.modal-content { + background-color: var(--body-bg); +} + +// dark +@if $enable-dark-mode { + @include color-mode(dark) { + .modal { + + .btn { + + &.btn-primary, &.btn-primary:not([href]) { + color: map-get($atum-colors-dark, "btn-primary-color"); + background: map-get($atum-colors-dark, "btn-primary-bg"); + border: map-get($atum-colors-dark, "btn-primary-border"); + + &:hover { + color: map-get($atum-colors-dark, "btn-primary-color"); + background: map-get($atum-colors-dark, "btn-primary-bg-hvr"); + border: map-get($atum-colors-dark, "btn-primary-border-hvr"); + box-shadow: none; + } + } + + &.btn-success, &.btn-success:not([href]) { + color: map-get($atum-colors-dark, "atum-btn-success-icon"); + background: map-get($atum-colors-dark, "atum-btn-success-bg"); + border: map-get($atum-colors-dark, "atum-btn-success-border"); + box-shadow: none; + + &:hover { + color: map-get($atum-colors-dark, "atum-btn-success-icon"); + background: map-get($atum-colors-dark, "atum-btn-success-bg-hvr"); + border: map-get($atum-colors-dark, "atum-btn-success-border"); + box-shadow: none; + } + + &:disabled { + background: map-get($atum-colors-dark, "body-bg"); + border: map-get($atum-colors-dark, "form-control-border-disabled"); + opacity: .5; + } + } + + &.btn-danger, &.btn-danger:not([href]) { + color: map-get($atum-colors-dark, "atum-btn-danger-color"); + background: map-get($atum-colors-dark, "atum-btn-danger-bg"); + border: map-get($atum-colors-dark, "atum-btn-danger-border"); + box-shadow: none; + + &:hover { + color: map-get($atum-colors-dark, "atum-btn-danger-color"); + background: map-get($atum-colors-dark, "atum-btn-danger-bg-hvr"); + border: map-get($atum-colors-dark, "atum-btn-danger-border-hvr"); + box-shadow: none; + } + } + + &.btn-secondary, &.btn-secondary:not([href]) { + color: map-get($atum-colors-dark, "btn-secondary-color"); + background: map-get($atum-colors-dark, "btn-secondary-bg"); + border: map-get($atum-colors-dark, "btn-secondary-border"); + box-shadow: none; + + &:hover { + color: map-get($atum-colors-dark, "btn-secondary-color"); + background: map-get($atum-colors-dark, "btn-secondary-bg-hvr"); + border: map-get($atum-colors-dark, "btn-secondary-border-hvr"); + box-shadow: none; + } + } + + &:disabled { + background: map-get($atum-colors-dark, "body-bg"); + opacity: .5; + } + } + + } + .joomla-dialog-container .changelog .changelog__item .changelog__tag { + background: map-get($atum-colors-dark, "body-bg"); + } + } +} + + + diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss index 0908d09fdad5c..4392c5e93e328 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss @@ -1,7 +1,7 @@ // Quick Icons .quick-icons { - background-color: var(--body-bg); + background-color: $quickicon-bg; .nav { display: grid; @@ -19,9 +19,12 @@ .quickicon { --text-color: var(--template-quickicon-color); - --bg-color: hsl(var(--hue), 60%, 97%); + --bg-color: var(--template-quickicon-bg); --icon-color: var(--template-quickicon-color); - --bg-color-hvr: var(--template-bg-dark); + --icon-color-hvr: #{$quickicon-color-hvr}; + --bg-color-hvr: var(--template-quickicon-bg-hvr); + --text-color-hvr: #{$quickicon-link-hvr}; + --text-amount-color: var(--template-quickicon-color); display: flex; flex-grow: 1; @@ -36,13 +39,18 @@ background-color: var(--bg-color); transition: all .25s ease; + &:focus-visible { + border: 1px solid var(--link-color); + outline: 0; + } + .quickicon-icon { margin-top: .5rem; margin-inline-start: .2rem; + color: var(--icon-color); > * { font-size: $quickicon-icon-size; - color: var(--icon-color); } } @@ -56,17 +64,11 @@ padding: .25rem .5rem; font-weight: $bold-weight; line-height: 1rem; - background: hsl(var(--hue),50%,93%); + color: var(--text-amount-color); + background: $quickicon-amount-bg; border-radius: $border-radius; transition: all .25s ease; margin-inline-start: .5rem; - @if $enable-dark-mode { - /* stylelint-disable max-nesting-depth */ - @include color-mode(dark) { - /* stylelint-enable max-nesting-depth */ - color: var(--template-bg-dark-80); - } - } } .j-links-link { @@ -78,42 +80,58 @@ &:hover, &:focus, &:active { - color: $white; + color: var(--text-color-hvr); text-decoration: none; background: var(--bg-color-hvr); + --text-amount-color: var(--bg-color-hvr); .quickicon-amount { + color: $quickicon-amount-bg; background: var(--icon-color); } + .quickicon-icon { + color: var(--icon-color-hvr); + } } - &.warning, - &.danger { - --text-color: var(--danger); - --bg-color: #f4f0f0; - --icon-color: #ce8484; - --bg-color-hvr: var(--danger); + &.info { + --text-color: var(--state-info-text); + --text-color-hvr: var(--state-info-text-hvr); + --bg-color: var(--state-info-bg); + --icon-color: var(--state-info-icon); + --icon-color-hvr: var(--state-info-icon-hvr); + --bg-color-hvr: var(--state-info-bg-hvr); } - &.success { - --text-color: var(--success); - --bg-color: #f3f9f3; - --icon-color: #55a258; - --bg-color-hvr: var(--success); + &.warning { + --text-color: var(--state-warning-text); + --text-color-hvr: var(--state-warning-text-hvr); + --bg-color: var(--state-warning-bg); + --icon-color: var(--state-warning-icon); + --icon-color-hvr: var(--state-warning-icon-hvr); + --bg-color-hvr: var(--state-warning-bg-hvr); } - } - } - @if $enable-dark-mode { - @include color-mode(dark) { - .quickicon { - --bg-color: var(--template-bg-dark-80); - --bg-color-hvr: var(--template-bg-dark-65); + &.danger { + --text-color: var(--state-danger-text); + --text-color-hvr: var(--state-danger-text-hvr); + --bg-color: var(--state-danger-bg); + --icon-color: var(--state-danger-icon); + --icon-color-hvr: var(--state-danger-icon-hvr); + --bg-color-hvr: var(--state-danger-bg-hvr); + } + + &.success { + --text-color: var(--state-success-text); + --text-color-hvr: var(--state-success-text-hvr); + --bg-color: var(--state-success-bg); + --icon-color: var(--state-success-icon); + --icon-color-hvr: var(--state-success-icon-hvr); + --bg-color-hvr: var(--state-success-bg-hvr); } } } - .quickicon-info { display: flex; align-items: flex-end; @@ -122,7 +140,7 @@ .quickicon-linkadd { width: 2.5rem; font-size: 1.2rem; - background: hsl(var(--hue),50%,93%); + background: $quickicon-linkadd-bg; transition: all .25s ease; a { @@ -132,23 +150,18 @@ > * { margin-bottom: 10px; - color: var(--template-quickicon-color); + color: $quickicon-linkadd-color; } - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - > * { - /* stylelint-enable max-nesting-depth */ - color: var(--template-bg-dark-80); - } - } + &:focus-visible { + border: 1px solid var(--link-color); + outline: 0; } &:hover, &:focus, &:active { - background: var(--template-bg-dark); + background: var(--quickicon-linkadd-bg-hvr); * { color: $white; @@ -162,8 +175,8 @@ display: flex; min-height: 6rem; overflow: hidden; - border: 1px solid hsl(var(--hue),50%,93%); - border-radius: 4px; + border: $quickicon-border; + border-radius: $quickicon-border-radius; } } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_shepard-modals.scss b/build/media_source/templates/administrator/atum/scss/blocks/_shepard-modals.scss index f378adfb65a72..129f95959a448 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_shepard-modals.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_shepard-modals.scss @@ -8,13 +8,31 @@ @if $enable-dark-mode { @include color-mode(dark) { - .shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before { - background-color: var(--dark-bg-subtle) !important; + .shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before { + background-color: #000 !important; } - // Matches the bootstrap color on hover for btn-close - .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover { - filter: $btn-close-white-filter !important; + .shepherd-has-title .shepherd-content .shepherd-cancel-icon { + color: var(--template-link-color) !important; + + &:hover { + color: var(--template-link-hover-color) !important; + } + } + + body .shepherd-button.shepherd-button-secondary:not(:disabled) { + + color: var(--btn-secondary-color) !important; + background-color: var(--btn-secondary-bg) !important; + border: var(--btn-secondary-border) !important; + + &:hover { + color: var(--btn-secondary-color-hvr) !important; + background-color: var(--btn-secondary-bg-hvr) !important; + } + } + + } } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss index 2809917c70128..a52869b822e66 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss @@ -15,7 +15,7 @@ display: block; padding: .25rem; font-weight: $font-weight-normal; - color: var(--template-text-dark); + color: $text-normal; text-decoration: none; &::before { @@ -26,19 +26,11 @@ } } - @if $enable-dark-mode { - @include color-mode(dark) { - a { - color: var(--template-text-light); - } - } - } - &.item:hover, &.active { - background-color: var(--template-bg-dark-60); + background-color: var(--sidebar-item-bg-hvr); a { - color: var(--template-text-light); + color: var(--sidebar-item-color); } } } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss index 7dd44cdc57c66..da48a517cf9f4 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss @@ -4,8 +4,8 @@ z-index: $zindex-sidebar; min-height: calc(100vh - 66px); overflow: hidden; - background-color: var(--template-sidebar-bg); - box-shadow: 0 0 20px -10px var(--template-bg-dark-50); + background-color: $sidebarwrapper-bg; + box-shadow: var(--atum-box-shadow); .sidebar-sticky { position: sticky; @@ -21,13 +21,13 @@ a, .menu-dashboard, .menu-quicktask { - color: $white; + color: $sidebar-item-color; /* $sidebar-item-color $white */ text-decoration: none; &:hover { - color: var(--template-text-light); + color: $sidebar-item-color-hvr; /* $sidebar-item-color-hvr var(--template-text-light) */ text-decoration: none; - background-color: var(--template-bg-dark-65); + background-color: $sidebar-item-bg-hvr; /* $sidebar-item-bg-hvr var(--template-bg-dark-65) */ } } @@ -69,10 +69,10 @@ } .sidebar-toggle { - background: var(--template-bg-dark-60); + background: $sidebar-toggle-bg; /* $sidebar-toggle-bg var(--template-bg-dark-60) */ a { - color: $white; + color: $sidebar-toggle-link; /* $sidebar-toggle-link $white */ } .sidebar-item-title { @@ -110,14 +110,14 @@ ul { width: 100%; padding: 0; - background-color: var(--template-bg-dark-75); + background-color: $main-nav-ul-bg; /* main-nav-ul-bg: var(--template-bg-dark-75) */ } .divider { height: 1px; margin: 0 0 0 48px; list-style: none; - background-color: var(--template-bg-dark-60); + background-color: $main-nav-divider-bg; /* main-nav-divider-bg: var(--template-bg-dark-60) */ } .menuitem-group { @@ -126,7 +126,7 @@ padding-inline-start: 3rem; .sidebar-item-title { - color: var(--template-bg-dark-30); + color: $main-nav-item-title; /* main-nav-item-title: var(--template-bg-dark-30) */ } } @@ -148,11 +148,11 @@ } a.mm-active { - background-color: var(--template-bg-dark-70); + background-color: $main-nav-mm-active-bg; /* main-nav-mm-active-bg: var(--template-bg-dark-70) */ } a.mm-active + .menu-quicktask { - background-color: var(--template-bg-dark-60); + background-color: $main-nav-mm-active-quicktask-bg; /* main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60) */ } .mm-active > .has-arrow::after { @@ -178,7 +178,7 @@ .badge { align-self: center; margin: 0 .3rem .25rem; - background-color: var(--template-bg-dark-60); + background-color: $main-nav-badge; /* main-nav-badge: var(--template-bg-dark-60) */ } } @@ -215,7 +215,7 @@ padding: 0 1rem; white-space: nowrap; pointer-events: none; - background-color: var(--template-bg-dark-60); + background-color: $main-nav-item-title-hvr-bg; /* main-nav-item-title-hvr-bg: var(--template-bg-dark-60) */ border-end-start-radius: 0; border-end-end-radius: $border-radius; border-start-end-radius: $border-radius; @@ -239,7 +239,7 @@ @include media-breakpoint-down(sm) { #menu-collapse { display: none; - background: var(--template-bg-dark-50); + background: $mobile-menu-collapse-bg; /* mobile-menu-collapse-bg: var(--template-bg-dark-50) */ } .toggler-burger { @@ -253,6 +253,10 @@ box-shadow: none; } + .navbar-toggler-icon { + background-image: none; + } + .navbar-toggler-icon::before { display: inline-block; font: normal normal 900 28px/1 "Font Awesome 6 Free"; @@ -283,3 +287,20 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .sidebar-wrapper { + overflow: hidden; + border: 1px solid rgba(255, 255, 255, .05); + box-shadow: none; + .main-nav { + .badge { + color: map-get($atum-colors-dark, "btn-primary-color"); + background-color: map-get($atum-colors-dark, "btn-primary-bg"); + } + } + } + } +} + diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss index d9380da909450..fb0bf3d2f89e5 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss @@ -7,10 +7,10 @@ width: auto; min-height: 43px; padding: 8px 1rem; - color: var(--template-text-dark); //#0c192e; - background: $white; - background-image: linear-gradient(var(--toolbar-bg), var(--template-bg-dark-3)); - box-shadow: $atum-box-shadow; + color: var(--atum-subhead-color); + background: var(--atum-subhead-bg); + background-image: var(--atum-subhead-bg-img); + box-shadow: var(--atum-box-shadow); .row { margin-right: 0; @@ -40,68 +40,93 @@ } .btn { - --subhead-btn-accent: var(--template-text-dark); + --subhead-btn-icon: var(--atum-btn-icon); + --subhead-btn-icon-hover: var(--atum-btn-icon-hvr); + --subhead-btn-bg: var(--atum-btn-bg); + --subhead-btn-bg-hvr: var(--atum-btn-bg-hvr); + --subhead-btn-border: var(--atum-btn-border); + padding: 0 1rem; margin: 5px 0; font-size: 1rem; line-height: $atum-toolbar-line-height; - color: var(--template-text-dark); - background: var(--body-bg); - border-color: hsl(var(--hue),20%,80%); + color: var(--atum-btn); + background: var(--subhead-btn-bg); + border: var(--subhead-btn-border); > span { display: inline-block; - color: var(--subhead-btn-accent); + color: var(--subhead-btn-icon); } &:not([disabled]):hover, &:not([disabled]):active, &:not([disabled]):focus { - color: rgba(255, 255, 255, .9); - background-color: var(--subhead-btn-accent); - border-color: var(--subhead-btn-accent); + color: var(--atum-btn-hvr); + background-color: var(--subhead-btn-bg-hvr); + border: var(--subhead-btn-border); > span { - color: rgba(255, 255, 255, .9); + color: var(--subhead-btn-icon-hvr); /* $atum-btn-hvr rgba(255, 255, 255, .9); */ } } &.btn-success { - --subhead-btn-accent: var(--success); + --subhead-btn-icon: var(--atum-btn-success-icon); + --subhead-btn-icon-hover: var(--atum-btn-success-icon-hvr); + --subhead-btn-bg: var(--atum-btn-success-bg); + --subhead-btn-bg-hvr: var(--atum-btn-success-bg-hvr); + --subhead-btn-border: var(--atum-btn-success-border); + + &:not([disabled]) { + --subhead-btn-border: var(--atum-btn-success-border); + } + &:disabled { + --subhead-btn-border: var(--atum-btn-info-border); + } } &.btn-danger { - --subhead-btn-accent: var(--danger); + --subhead-btn-icon: var(--atum-btn-danger-icon); + --subhead-btn-icon-hover: var(--atum-btn-danger-icon-hvr); + --subhead-btn-bg: var(--atum-btn-danger-bg); + --subhead-btn-bg-hvr: var(--atum-btn-danger-bg-hvr); + --subhead-btn-border: var(--atum-btn-danger-border); + + &:not([disabled]) { + --subhead-btn-border: var(--atum-btn-danger-border); + } + &:disabled { + --subhead-btn-border: var(--atum-btn-info-border); + } } &.btn-primary { - --subhead-btn-accent: var(--template-link-color); - } - - &.btn-secondary { - --subhead-btn-accent: var(--secondary-bg); + --subhead-btn-icon: var(--atum-btn-primary-icon); + --subhead-btn-icon-hover: var(--atum-btn-primary-icon-hvr); + --subhead-btn-bg: var(--atum-btn-primary-bg); + --subhead-btn-bg-hvr: var(--atum-btn-primary-bg-hvr); + --subhead-btn-border: var(--atum-btn-primary-border); + + &:disabled { + --subhead-btn-border: var(--atum-btn-info-border); + } } - &.btn-info { - --subhead-btn-accent: var(--template-bg-dark); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - &.btn-info { - --subhead-btn-accent: var(--template-bg-light); - - /* stylelint-disable max-nesting-depth */ - &:hover, &:focus, &:active { - /* stylelint-enable max-nesting-depth */ - --subhead-btn-accent: var(--template-bg-dark-60); - } - } - } + &.btn-info, &.button-options { + --subhead-btn-icon: var(--atum-btn-info-icon); + --subhead-btn-icon-hover: var(--atum-btn-info-icon-hvr); + --subhead-btn-bg: var(--atum-btn-info-bg); + --subhead-btn-bg-hvr: var(--atum-btn-info-bg-hvr); + --subhead-btn-border: var(--atum-btn-info-border); } &.btn-action { - --subhead-btn-accent: var(--template-bg-dark); + --subhead-btn-icon: var(--atum-btn-action-icon); + --subhead-btn-icon-hover: var(--atum-btn-info-action-hvr); + --subhead-btn-bg: var(--atum-btn-action); + --subhead-btn-bg-hvr: var(--atum-btn-action-bg-hvr); + --subhead-btn-border: var(--atum-btn-action-border); display: flex; align-items: center; @@ -114,24 +139,9 @@ } } - @if $enable-dark-mode { - @include color-mode(dark) { - &.btn-action { - --subhead-btn-accent: var(--template-bg-light); - - /* stylelint-disable max-nesting-depth */ - &:hover, &:focus, &:active { - /* stylelint-enable max-nesting-depth */ - --subhead-btn-accent: var(--template-bg-dark-60); - } - } - } - } - &[disabled], &.dropdown-toggle[disabled] { - --subhead-btn-accent: var(--template-bg-dark); - background: rgba($gray-300, .8); + background: var(--body-bg); opacity: .5; &:hover, @@ -142,16 +152,6 @@ } } - @if $enable-dark-mode { - @include color-mode(dark) { - .btn { - --subhead-btn-accent: var(--template-text-light); - color: var(--template-text-light); - } - } - } - - .dropdown-toggle { &.btn { padding-inline-end: 0; @@ -172,16 +172,7 @@ .contentpane & { margin: -15px -15px 0; background-image: none; - border-bottom: 1px solid var(--template-bg-dark-7); - } -} - -@if $enable-dark-mode { - @include color-mode(dark) { - .subhead { - background-color: var(--body-bg); - background-image: linear-gradient(var(--body-bg), var(--dark-bg)); - } + border-bottom: 1px solid var(--template-bg-dark-7); // TODO: unified variables for light and dark mode } } @@ -206,7 +197,7 @@ z-index: $zindex-alerts; padding: 7px 10px; margin: 5px; - background-color: var(--template-bg-dark); + background-color: var(--template-bg-dark); // TODO: unified variables for light and dark mode border-radius: 30px; .toggler-toolbar-icon::before { @@ -247,3 +238,14 @@ } } } + + +@if $enable-dark-mode { + @include color-mode(dark) { + .subhead { + border-top: 1px solid rgba(255,255,255,.05); + border-bottom: 1px solid rgba(255,255,255,.05); + } + } +} + diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_treeselect.scss b/build/media_source/templates/administrator/atum/scss/blocks/_treeselect.scss index 094cb445ca81f..1e1fba2245186 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_treeselect.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_treeselect.scss @@ -7,15 +7,7 @@ .nav-header { font-weight: $font-weight-bold; - color: var(--template-bg-dark); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - .nav-header { - color: var(--body-color); - } - } + color: $nav-header-color; } li { @@ -32,7 +24,7 @@ height: 1px; margin: auto; content: ""; - background-color: $treeselect-line-color; + background-color: var(--treeselect-line-color); } &::after { @@ -43,7 +35,7 @@ width: 1px; height: 100%; content: ""; - background-color: $treeselect-line-color; + background-color: var(--treeselect-line-color); } &:last-child { @@ -101,7 +93,7 @@ &::after { margin-left: 0; font-size: 1rem; - color: var(--template-text-dark); + color: var(--treeselect-dropdown-toggle); } } } diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss index a1bc9b481f3b0..d1fe5016ced97 100644 --- a/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss +++ b/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss @@ -21,7 +21,11 @@ } .card-header { - --card-bg: hsla(0, 0%, 100%, .7); + --card-bg: #{$card-bg}; + + a { + font-weight: normal; + } .btn { margin-top: .25em; @@ -32,6 +36,7 @@ .card-body { padding: 0; overflow: hidden; + background-color: $card-body-bg; border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; } @@ -42,15 +47,7 @@ > * { padding: 0; - color: var(--template-bg-dark-70); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - > * { - color: var(--body-color); - } - } + color: $module-actions-color; } } @@ -76,7 +73,7 @@ &:active { color: #fff; text-decoration: none; - background: var(--template-bg-dark); + background: var(--cpanel-addmodule-hover); } > span { @@ -93,12 +90,22 @@ .cpanel-modules { .list-group { - border-top: 1px solid $list-group-border-color; + border-top: 1px solid $atum-list-group-border-color; } .list-group-item { + --list-group-bg: #{$atum-list-group-bg}; + + a:not(.btn) { + color: rgb(var(--link-color-rgb, $table-link-color)); + } + + a:not(.btn):hover { + color: rgb(var(--link-color-rgb-hvr)); + } + a { - font-weight: 500; + font-weight: normal; text-decoration: underline; } @@ -106,6 +113,12 @@ text-decoration: none; } + .btn.btn-info { + color: $atum-btn-info; + background: $atum-btn-info-bg; + border: $atum-btn-info-border; + } + .list-group-item a > span { &[class^="#{$jicon-css-prefix}-"], &[class*=" #{$jicon-css-prefix}-"], @@ -115,7 +128,7 @@ padding: .5rem; color: rgba(255, 255, 255, .9); background: var(--#{$prefix}link-color); - box-shadow: $atum-box-shadow; + box-shadow: var(--atum-box-shadow); &:hover { background: var(--#{$prefix}link-hover-color); @@ -170,3 +183,36 @@ padding-inline-start: 1rem; margin-inline-start: 8px; } + +@if $enable-dark-mode { + @include color-mode(dark) { + .com_cpanel { + .card { + border: 1px solid rgba(255, 255, 255, .1); + box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); + + .list-group-item:last-child { + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + + .list-group-item { + &:hover { + background: rgba(0,0,0,.1); + } + } + } + + .cpanel-add-module { + &:hover, + &:focus, + &:active { + background: var(--btn-primary-bg-hvr); + } + } + } + .sample-data__desc { + border-inline-start: 4px solid rgba(255, 255, 255, .1); + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_media.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_media.scss index b381fb2738875..7c33e62cc5ff0 100644 --- a/build/media_source/templates/administrator/atum/scss/pages/_com_media.scss +++ b/build/media_source/templates/administrator/atum/scss/pages/_com_media.scss @@ -1,16 +1,128 @@ :root { - --com-media-manager-overlay-header-bg: var(--template-bg-dark-5); - --com-media-manager-infobar-dt-color: rgba(0, 0, 0, .54); - --com-media-manager-content-bg: var(--body-bg); - --com-media-manager-overlay-bg: var(--template-bg-dark-3); - --com-media-manager-disk-name-color: var(--template-text-dark); + --com-media-manager-overlay-header-bg: #{$media-manager-overlay-header-bg}; + --com-media-manager-infobar-dt-color: #{$media-manager-infobar-dt-color}; + --com-media-manager-content-bg: #{$media-manager-content-bg}; + --com-media-manager-content-color: #{$media-manager-content-color}; + --com-media-manager-overlay-bg: #{$media-manager-overlay-bg}; + --com-media-manager-disk-name-color: #{$media-manager-disk-name-color}; + --com-media-manager-tree-item-hover-bg: #{$media-manager-tree-item-hover-bg}; + --com-media-manager-toolbar-icon-color: #{$media-manager-toolbar-icon-color}; +} +.file-background, .folder-background { + padding-bottom: 100%; + background-color: $media-browser-file-bg; //hsl(var(--hue), 20%, 97%); + border: $media-manager-border; //1px solid hsl(var(--hue), 35%, 95%); +} +.file-icon, .folder-icon, .media-dragoutline { + color: $media-manager-file-icon-color; //?? inherit +} + +.media-browser-item-preview { + border: $media-manager-border; //1px solid hsl(var(--hue), 35%, 95%); +} +.media-drive { + background: $media-drive-bg; + border: $media-manager-border; +} +.media-toolbar { + background-color: $media-toolbar-bg; //var(--com-media-manager-content-bg,#fff); + border-bottom: $media-manager-border; //1px solid var(--template-bg-dark-7); + border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7) + box-shadow: 0 -1px 0 0 $media-manager-border; //var(--template-bg-dark-7); +} +.media-toolbar-icon { + -webkit-border-start: $media-manager-border; //1px solid var(--template-bg-dark-7); + color: $media-toolbar-icon-color; //var(--com-media-manager-toolbar-icon-color,var(--template-bg-dark-60)); + background-color: $media-toolbar-icon-bg; //transparent; + border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7); +} +.media-toolbar-icon:hover { + background-color: $media-toolbar-icon-bg-hvr; //#f0f0f0; +} +.media-breadcrumb { + -webkit-border-start: $media-manager-border; //1px solid var(--template-bg-dark-7) + border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7) +} +.media-breadcrumb-item a { + color: $media-manager-content-color; //var(--com-media-manager-content-color,var(--link-color)); +} +.media-breadcrumb-item { + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg); + a { + color: var(--btn-primary-color); + } +} +.media-breadcrumb-item::after { + border-inline-start-color: var(--btn-primary-bg); //var(--com-media-manager-overlay-bg,var(--template-bg-dark-3)); +} + +.image-background { + background-color: $image-bg; // #fff; + background-image: $image-bg-image; //linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%); +} +.media-tree-item .item-icon { + color: var(--template-link-color); +} + +.media-tree-item.active > a .item-icon { + color: var(--template-link-color); // TODO could be another color in future Versions +} + +.field-media-wrapper .button-select { + background-color: var(--success); +} + +.media-infobar { + border-inline-start: $media-manager-border; //1px solid $border-color; + h2 { + border-bottom: $media-manager-border; + } } @if $enable-dark-mode { @include color-mode(dark, true) { - --com-media-manager-overlay-bg: var(--template-bg-dark-90); - --com-media-manager-infobar-dt-color: rgba(255, 255, 255, .54); - --com-media-manager-overlay-header-bg: var(--template-bg-dark-80); - --com-media-manager-disk-name-color: var(--template-text-light); + joomla-field-media .field-media-preview { + background-color: var(--gray-700); + border-color: rgba(255, 255, 255, .15); + } + + joomla-field-mediamore details { + color: var(--template-text-light); + background: #1c1c1c; + } + + joomla-field-mediamore summary { + background: #131313; + } + + .media-infobar { + background-color: var(--main-bg); + + h2 { + background-color: var(--body-bg); + } + + dt { + font-weight: bold; + color: rgba(255,255,255,.9); + } + + dd { + color: rgba(255,255,255,.7); + } + + .infobar-close { + color: #fff; + &:hover { + color: #efefef; + } + } + } + + + + + } } diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_modules.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_modules.scss index 7f5ed97b52283..b16891b297620 100644 --- a/build/media_source/templates/administrator/atum/scss/pages/_com_modules.scss +++ b/build/media_source/templates/administrator/atum/scss/pages/_com_modules.scss @@ -1,33 +1,22 @@ .new-modules { // We use the same colors for the new module section as we do for the quickicons. - --text-color: var(--template-quickicon-color); - --bg-color: hsl(var(--hue), 60%, 97%); - --bg-color-hvr: var(--template-bg-dark); - --icon-color: var(--template-quickicon-color); - --icon-color-hvr: hsl(var(--hue), 50%, 93%); + --text-color: $new-modules-color; + --bg-color: $new-modules-bg; + --bg-color-hvr: $new-modules-bg-hvr; + --icon-color: $new-modules-icon-color; + --icon-color-hvr: $new-modules-icon-color-hvr; .card-columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } -@if $enable-dark-mode { - @include color-mode(dark) { - .new-modules { - --bg-color: var(--template-bg-dark-80); - --bg-color-hvr: var(--template-bg-dark-65); - --icon-color: var(--template-bg-dark-80); - --icon-color-hvr: var(--template-quickicon-color); - } - } -} - .new-module { display: flex; overflow: hidden; - color: var(--text-color); - background-color: var(--bg-color); - border: 1px solid hsl(var(--hue), 50%, 93%); + color: $new-module-color; + background-color: $new-module-bg; + border: $new-module-border; border-radius: $border-radius; * { @@ -57,18 +46,18 @@ justify-content: center; width: 2.5rem; font-size: 1.2rem; - background: hsl(var(--hue), 50%, 93%); + background: $new-module-link-bg; span { margin-bottom: 10px; - color: var(--icon-color); + color: $new-module-link-span; } .new-module:hover & { - background: var(--bg-color-hvr); + background: $new-module-link-hvr; span { - color: var(--icon-color-hvr); + color: $new-module-link-span-hvr; } } } diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_scheduler.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_scheduler.scss index 84c508e42e11a..1dbed24deb2fc 100644 --- a/build/media_source/templates/administrator/atum/scss/pages/_com_scheduler.scss +++ b/build/media_source/templates/administrator/atum/scss/pages/_com_scheduler.scss @@ -1,33 +1,22 @@ .new-tasks { // We use the same colours for the new task section as we do for the quickicons. - --text-color: var(--template-quickicon-color); - --bg-color: hsl(var(--hue), 60%, 97%); - --bg-color-hvr: var(--template-bg-dark); - --icon-color: var(--template-quickicon-color); - --icon-color-hvr: hsl(var(--hue), 50%, 93%); + --text-color: #{$quickicon-color}; + --bg-color: var(--template-quickicon-bg); + --bg-color-hvr: var(--template-quickicon-bg-hvr); + --icon-color: #{$quickicon-color}; + --icon-color-hvr: #{$quickicon-link-hvr}; .card-columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } -@if $enable-dark-mode { - @include color-mode(dark) { - .new-tasks { - --bg-color: var(--template-bg-dark-80); - --bg-color-hvr: var(--template-bg-dark-65); - --icon-color: var(--template-bg-dark-80); - --icon-color-hvr: var(--template-quickicon-color); - } - } -} - .new-task { display: flex; overflow: hidden; color: var(--text-color); background-color: var(--bg-color); - border: 1px solid hsl(var(--hue), 50%, 93%); + border: $quickicon-border; border-radius: $border-radius; * { @@ -51,21 +40,29 @@ font-size: .875rem; } + :hover { + color: #{$quickicon-link-hvr}; + background: var(--bg-color-hvr); + .new-task-title { + color: #{$quickicon-link-hvr}; + } + } + &-link { display: flex; align-items: flex-end; justify-content: center; width: 2.5rem; font-size: 1.2rem; - background: hsl(var(--hue), 50%, 93%); + background: $quickicon-linkadd-bg; span { margin-bottom: 10px; - color: var(--icon-color); + color: var(--quickicon-linkadd-color); } - .new-task:hover & { - background: var(--bg-color-hvr); + &:hover { + background: var(--template-bg-dark); span { color: var(--icon-color-hvr); diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_users.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_users.scss index 0fc6f059c8a29..7364d4590dc00 100644 --- a/build/media_source/templates/administrator/atum/scss/pages/_com_users.scss +++ b/build/media_source/templates/administrator/atum/scss/pages/_com_users.scss @@ -23,15 +23,7 @@ &.view-user, &.view-methods { #com-users-methods-reset-container { - background-color: var(--light); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - #com-users-methods-reset-container { - background-color: var(--dark-bg-subtle); - } - } + background-color: $users-methods-reset-cont-bg; } .com-users-methods-list-method { @@ -56,17 +48,7 @@ /** This is applied to headers that aren't an active method **/ &:not(.com-users-methods-list-method-active) .com-users-methods-list-method-header { - background-color: var(--light); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - &:not(.com-users-methods-list-method-active) .com-users-methods-list-method-header { - /* stylelint-enable max-nesting-depth */ - background-color: var(--dark-bg-subtle); - } - } + background-color: $users-method-header-inact-bg; } .com-users-methods-list-method-header { @@ -83,17 +65,7 @@ @extend .pb-2; @extend .rounded-2; - background-color: var(--light); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - .com-users-methods-list-method-image { - /* stylelint-enable max-nesting-depth */ - background-color: var(--dark-bg-subtle); - } - } + background-color: $users-method-image; } .com-users-methods-list-method-title { diff --git a/build/media_source/templates/administrator/atum/scss/system/fields/_calendar.scss b/build/media_source/templates/administrator/atum/scss/system/fields/_calendar.scss new file mode 100644 index 0000000000000..b4ccc684b489c --- /dev/null +++ b/build/media_source/templates/administrator/atum/scss/system/fields/_calendar.scss @@ -0,0 +1,11 @@ +.time .time-title { + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E") !important; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .time .time-title { + background-image: url("data:image/svg+xml;base64,PG5zMDpzdmcgeG1sbnM6bnMwPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIj4KICAgIDxuczA6cGF0aCBkPSJNMTAyNCA1NDR2NDQ4cTAgMTQtOSAyM3QtMjMgOWgtMzIwcS0xNCAwLTIzLTl0LTktMjN2LTY0cTAtMTQgOS0yM3QyMy05aDIyNHYtMzUycTAtMTQgOS0yM3QyMy05aDY0cTE0IDAgMjMgOXQ5IDIzem00MTYgMzUycTAtMTQ4LTczLTI3M3QtMTk4LTE5OC0yNzMtNzMtMjczIDczLTE5OCAxOTgtNzMgMjczIDczIDI3MyAxOTggMTk4IDI3MyA3MyAyNzMtNzMgMTk4LTE5OCA3My0yNzN6bTIyNCAwcTAgMjA5LTEwMyAzODUuNXQtMjc5LjUgMjc5LjUtMzg1LjUgMTAzLTM4NS41LTEwMy0yNzkuNS0yNzkuNS0xMDMtMzg1LjUgMTAzLTM4NS41IDI3OS41LTI3OS41IDM4NS41LTEwMyAzODUuNSAxMDMgMjc5LjUgMjc5LjUgMTAzIDM4NS41eiIgZmlsbD0id2hpdGUiIC8+CjwvbnMwOnN2Zz4=") !important; + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/system/fields/_switcher.scss b/build/media_source/templates/administrator/atum/scss/system/fields/_switcher.scss new file mode 100644 index 0000000000000..d4a46c1b543b2 --- /dev/null +++ b/build/media_source/templates/administrator/atum/scss/system/fields/_switcher.scss @@ -0,0 +1,11 @@ +.switcher .toggle-inside { + background: $switcher-toggle-inside-bg; //#fff; +} + +.switcher .toggle-outside { + background: $switcher-toggle-outside-off-bg; //#d3d3d3; +} + +.switcher input ~ input:checked ~ .toggle-outside { + background: $switcher-toggle-outside-on-bg; //#2f7d32; +} diff --git a/build/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss b/build/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss index 29bd46b674a2f..a837ce30e4acb 100644 --- a/build/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss +++ b/build/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss @@ -1,4 +1,5 @@ @import "../../variables"; +@import "../../../../../../../../media/vendor/bootstrap/scss/mixins"; // Search tools @@ -27,7 +28,19 @@ } .js-stools-btn-clear { - background-color: var(--template-bg-dark); + background-color: $js-stools-btn-clear-bg; + &[disabled], + &.dropdown-toggle[disabled] { + background: $js-stools-btn-clear-disabled-bg; + border: $js-stools-btn-clear-disabled-border; + opacity: .5; + + &:hover, + &:active, + &:focus { + cursor: not-allowed; + } + } } } @@ -59,3 +72,21 @@ margin: 5px 0; margin-inline-end: 8px; } + +@if $enable-dark-mode { + @include color-mode(dark) { + .js-stools-container-bar .btn-toolbar .js-stools-btn-clear { + &[disabled], + &.dropdown-toggle[disabled] { + background: var(--body-bg); + border: var(--btn-secondary-border); + opacity: .5; + &:hover, + &:active, + &:focus { + cursor: not-allowed; + } + } + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/template.scss b/build/media_source/templates/administrator/atum/scss/template.scss index 1ef36e5526de1..e8fa8e138b2bb 100644 --- a/build/media_source/templates/administrator/atum/scss/template.scss +++ b/build/media_source/templates/administrator/atum/scss/template.scss @@ -23,7 +23,12 @@ // jQuery Minicolors @import "../../../../../../media/system/scss/jquery-minicolors"; +// System overrides +@import "system/fields/calendar"; +@import "system/fields/switcher"; + // Vendor overrides +@import "vendor/bootstrap/accordion"; @import "vendor/bootstrap/badge"; @import "vendor/bootstrap/buttons"; @import "vendor/bootstrap/card"; @@ -32,6 +37,7 @@ @import "vendor/bootstrap/dropdown"; @import "vendor/bootstrap/form"; @import "vendor/bootstrap/lists"; +@import "vendor/bootstrap/list-group"; @import "vendor/bootstrap/modal"; @import "vendor/bootstrap/pagination"; @import "vendor/bootstrap/reboot"; @@ -85,6 +91,7 @@ } } +// Check if dark mode is enabled @if $enable-dark-mode { @include color-mode(dark, true) { @each $color, $value in $atum-colors-dark { @@ -205,6 +212,7 @@ } .bg-warning { + color: #000; background-color: var(--warning) !important; } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/_dragula.scss b/build/media_source/templates/administrator/atum/scss/vendor/_dragula.scss index 752be56abfb5f..0a7c955d7043a 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/_dragula.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/_dragula.scss @@ -5,12 +5,23 @@ z-index: $zindex-popover !important; display: table; margin: 0 !important; + color: var(--drag-color) !important; cursor: move; - background-color: $teal; + background-color: var(--drag-background-color); opacity: .8; td, th { - background-color: $teal; + color: var(--drag-color) !important; + background-color: var(--drag-background-color); + + a { + color: var(--drag-color) !important; + } + + .tbody-icon [class^="icon-"] { + color: var(--drag-color) !important; + border-color: var(--drag-color) !important; + } } } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss new file mode 100644 index 0000000000000..363c984e762d5 --- /dev/null +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss @@ -0,0 +1,9 @@ +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button:not(.collapsed) { + color: map-get($atum-colors-dark, body-color); + background: $btn-primary-dark; + } + } +} + diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss index 879115bbd03fe..c2ff1b5449d19 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss @@ -13,32 +13,98 @@ } } +.btn-success { + background-color: var(--success); +} + .btn-primary { - color: var(--template-text-light); - background-color: var(--template-bg-dark-60); - border-color: var(--template-bg-dark-60); + color: $btn-primary-color; /* var(--template-text-light); */ + background-color: $btn-primary-bg; /* var(--template-bg-dark-60); */ + border: $btn-primary-border; /* var(--template-bg-dark-60); */ &:hover, &:focus, &:active { - background-color: var(--template-bg-dark-70); - border-color: var(--template-bg-dark-90); + background-color: $btn-primary-bg-hvr; /* var(--template-bg-dark-70); */ + border: $btn-primary-border-hvr; /* var(--template-bg-dark-90); */ } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - background-color: var(--template-bg-dark); - border-color: var(--template-bg-dark); + background-color: $btn-primary-toggle-bg; /* var(--template-bg-dark); */ + border-color: $btn-primary-toggle-border; /* var(--template-bg-dark); */ } } -.btn-secondary { - background-color: var(--template-bg-dark-60); - border-color: var(--template-bg-dark-60); +.btn-outline-secondary { + color: $btn-outline-secondary-color; + background-color: $btn-outline-secondary-bg; /* var(--template-bg-dark-60); */ + border: $btn-outline-secondary-border; /* var(--template-bg-dark-60); */ } .input-group-text { - background-color: var(--template-bg-dark); - border-color: var(--template-bg-dark); + background-color: $input-group-text-bg; /* var(--template-bg-dark); */ + border: $input-group-text-border; /* var(--template-bg-dark); */ +} + +.btn-secondary { + color: var(--btn-secondary-color); + background: var(--btn-secondary-bg); + border: var(--btn-secondary-border); + + &:hover { + color: var(--btn-secondary-color-hvr); + background: var(--btn-secondary-bg-hvr); + } +} + +.btn-light { + background: var(--btn-light-bg); //#f8f9fa (light) + border: var(--btn-light-bg); //#f8f9fa (light) + &:hover, + &:focus, + &:active { + background-color: var(--btn-light-bg-hvr); /* var(--template-bg-dark-70); */ + } +} + +.btn-dark { + color: var(--btn-dark-color); + background: var(--btn-dark-bg); + + &:hover { + color: var(--btn-dark-color-hvr); + background: var(--btn-dark-bg-hvr); + } +} + +.btn-info { + color: var(--btn-info-color); + background: var(--btn-info-bg); + border: var(--btn-info-border); + + &:hover { + color: var(--atum-btn-info-color-hvr); + background: var(--btn-info-bg-hvr); + } +} + +// dark +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-info { + color: var(--btn-info-color); + background: var(--btn-info-bg); + border: var(--btn-info-border); + + &:hover, + &:focus, + &:active { + color: var(--atum-btn-info-color-hvr); + background: var(--btn-info-bg-hvr); + border: var(--btn-info-border); + } + } + } } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss index 450bdc7419495..4899fb01753b0 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss @@ -21,7 +21,8 @@ .content { .card { - box-shadow: $atum-box-shadow; + background: var(--card-body-bg); + box-shadow: var(--atum-box-shadow); } .card-header { @@ -29,21 +30,16 @@ align-items: center; padding: 1rem 1rem .75rem; font-weight: $font-weight-bold; - color: var(--template-bg-dark); + color: var(--card-header-color); background-color: var(--card-bg); + a { + font-weight: normal; + } + > [class^="icon-"], > img { margin-inline-end: .5rem; } } - - @if $enable-dark-mode { - @include color-mode(dark) { - .card-header { - color: var(--body-color); - background-color: var(--body-bg); - } - } - } } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss index e450e76107902..516e1f748f696 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss @@ -1,28 +1,28 @@ -// Collapse - -.accordion { - - .card-header { - display: block; - font-size: $h5-font-size; - font-weight: $font-weight-bold; - line-height: $headings-line-height; - } - - /** - * TODO: This seems fairly specifically built for the menu types view and might be better scoped to - * that view rather than just being overridden for everything. - */ - .list-group-item { - --list-group-color: var(--link-color); - --list-group-bg: var(--white-offset); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - .list-group-item { - --list-group-bg: var(--gray-800); - } - } - } -} +// Collapse + +.accordion { + + .card-header { + display: block; + font-size: $h5-font-size; + font-weight: $font-weight-bold; + line-height: $headings-line-height; + } + + /** + * TODO: This seems fairly specifically built for the menu types view and might be better scoped to + * that view rather than just being overridden for everything. + */ + .list-group-item { + --list-group-color: var(--link-color); + --list-group-bg: var(--white-offset); + } + + @if $enable-dark-mode { + @include color-mode(dark) { + .list-group-item { + --list-group-bg: var(--gray-800); + } + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss index adfb2094c32e6..3492f93d86a67 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss @@ -1,5 +1,3 @@ -@import "../../variables-dark"; - // Custom Forms .custom-select { @@ -9,7 +7,12 @@ .form-select { max-width: $input-max-width; cursor: pointer; - background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};; + background: $form-select-background; + border: $form-select-border; + + [dir="rtl"] & { + background: $form-select-background-rtl; + } &[multiple] { padding: 0; @@ -24,90 +27,57 @@ } } + // TODO: Archived State has a green border instead blue + &.form-select-success, &.custom-select-success { - color: var(--success); + color: var(--success-text); background-color: var(--success); border-color: var(--success); option { color: $form-select-color; - background-color: var(--white-offset); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - option { - background-color: var(--gray-800); - } - } + background-color: $form-select-success-bg; } } &.form-select-danger, &.custom-select-danger { - color: var(--danger); + color: var(--danger-text); background-color: var(--danger); border-color: var(--danger); option { color: $form-select-color; - background-color: var(--white-offset); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - option { - background-color: var(--gray-800); - } - } + background-color: $form-select-danger-bg; } } &:disabled { cursor: default; - background-color: var(--gray-200); + background-color: $form-select-disabled-bg; background-image: none; border: 0; box-shadow: none; } - @if $enable-dark-mode { - @include color-mode(dark) { - &:disabled { - background-color: var(--gray-800); - } - } - } - optgroup, option { - color: var(--template-text-dark); + color: $form-select-option; background-color: var(--body-bg); &:disabled { - background-color: var(--template-bg-dark-5); - } - } - - @if $enable-dark-mode { - @include color-mode(dark) { - option { - color: var(--template-text-light); - - &:disabled { - background-color: var(--template-bg-dark-90); - } - } + background-color: $form-select-option-disabled-bg; } } } + @if $enable-dark-mode { @include color-mode(dark) { - .form-select { - background: $form-select-background-dark #{"/* rtl:"}$form-select-background-rtl-dark#{"*/"}; + .form-select:disabled, .custom-select:disabled { + border: map-get($atum-colors-dark, "form-control-border-disabled"); + opacity: .5; } } } - diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss index 71103f1666864..5832ad4297fa2 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss @@ -12,15 +12,18 @@ } .dropdown-menu { - box-shadow: $atum-box-shadow; + box-shadow: var(--atum-box-shadow); } .dropdown-item { text-align: start; - border-bottom: 1px solid rgba(0, 0, 0, .1); + border-bottom: var(--dropdown-item-border-bottom); &:hover, &:focus { + --dropdown-link-hover-bg: var(--atum-dropdown-link-hover-bg); + --dropdown-link-hover-color: var(--atum-dropdown-link-hover-color); + .btn-primary + .dropdown-menu & { background-color: var(--template-bg-dark); } @@ -49,16 +52,6 @@ } } - @if $enable-dark-mode { - @include color-mode(dark) { - &:hover, - &:focus { - --dropdown-link-hover-bg: var(--gray-700); - --dropdown-link-hover-color: var(--body-color); - } - } - } - + .dropdown-item { border-top: 1px solid rgba(0, 0, 0, .1); } @@ -88,9 +81,8 @@ @if $enable-dark-mode { @include color-mode(dark) { - .dropdown-item { - border-bottom: 1px solid rgba(255, 255, 255, .1); + .dropdown-divider { + border-top: map-get($atum-colors-dark, "dropdown-divider-bg"); } } } - diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss index e97bf8715c5e4..397681137c5de 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss @@ -4,6 +4,13 @@ label { margin-bottom: 0; } +.form-control { + &::placeholder { + font-size: .8rem; + font-style: italic; + } +} + td .form-control { display: inline-block; width: auto; @@ -35,7 +42,6 @@ legend { // Validation .invalid { - color: var(--danger); border-color: var(--danger); } @@ -48,7 +54,7 @@ legend { } [aria-grabbed="true"] { - box-shadow: 0 0 2px 1px var(--template-bg-dark); + box-shadow: $form-aria-grabbed-box-shadow; } select.form-control { diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss new file mode 100644 index 0000000000000..944267e589736 --- /dev/null +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss @@ -0,0 +1,31 @@ +@if $enable-dark-mode { + @include color-mode(dark) { + .list-group-item-action { + color: map-get($atum-colors-dark, body-color); + background: map-get($atum-colors-dark, template-quickicon-bg); + border: 1px solid map-get($atum-colors-dark, template-quickicon-bg-hvr); + + // Hover state + &:hover, + &:focus { + color: map-get($atum-colors-dark, body-color); + background: map-get($atum-colors-dark, template-quickicon-bg-hvr); + border: 1px solid map-get($atum-colors-dark, template-quickicon-bg-hvr); + } + + &:active { + color: map-get($atum-colors-dark, body-color); + background: map-get($atum-colors-dark, template-quickicon-bg-hvr); + } + + .result-key { + color: #ccc; + } + + code { + color: #ce8eab; + } + + } + } +} diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss index 75b7ce9eb8585..6b2830442936b 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss @@ -2,4 +2,10 @@ .pagination { margin: 1rem; + + .page-link.active, .active > .page-link { + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-bg); + } } + diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_table.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_table.scss index 37821aebddc20..c4547069a57c6 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_table.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_table.scss @@ -1,8 +1,9 @@ // Table .table { - > :not(:first-child) { - border-top: 2px solid #dee2e6; + + > :not(caption) > * > * { + color: var(--body-color); } thead { @@ -20,10 +21,14 @@ } a { - color: var(--template-link-color); + font-weight: $table-link-font-weight; + color: rgb(var(--link-color-rgb, $table-link-color)); + &:hover { + color: rgb(var(--link-color-rgb-hvr)); + } &#sorted { - font-weight: $medium-weight; + font-weight: $table-link-font-weight-sorted; /* $medium-weight */ // This is the same as the bootstrap line because when it's sorted we want to undo the style color: var(--table-color-state, var(--table-color-type,var(--table-color))); @@ -65,7 +70,16 @@ } a:not(.badge):not(.btn):not(.dropdown-item) { + font-weight: $table-link-font-weight; + color: rgb(var(--link-color-rgb, $table-link-color)); text-decoration: underline; + &:hover { + color: rgb(var(--link-color-rgb-hvr)); + } + } + + .badge.bg-info { + background-color: $badge-bg-info !important; } } @@ -84,6 +98,22 @@ } .j-main-container > & { - box-shadow: $atum-box-shadow; + box-shadow: var(--atum-box-shadow); + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .j-main-container .table { + overflow: hidden; + border: 1px solid rgba(255, 255, 255, .1); + box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); + + tr { + &:hover { + background: rgba(0, 0, 0, .1); + } + } + } } } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss b/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss index af0f99d860a50..84b979f8abf42 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss @@ -11,7 +11,7 @@ @import "../../../../../../../../media/vendor/choicesjs/scss/choices"; .choices { - border: $form-select-border-width solid $form-select-border-color; + border: $form-select-border; //$form-select-border-width solid $form-select-border-color; @include border-radius($form-select-border-radius, 0); @include box-shadow($form-select-box-shadow); @@ -43,17 +43,9 @@ background-color: transparent; &::placeholder { - color: $gray-700; + color: $choices-input-placeholder; //$gray-700; //var(--gray-200); opacity: 1; } - - @if $enable-dark-mode { - @include color-mode(dark) { - &::placeholder { - color: var(--gray-200); - } - } - } } .choices__list--dropdown { @@ -67,7 +59,8 @@ .choices__list--multiple .choices__item { position: relative; margin: 2px; - background-color: var(--template-bg-dark); + color: $choices-list-multiple-item; //$white; + background-color: $choices-list-multiple-item-bg; //var(--template-bg-dark); margin-inline-end: 2px; border: 0; border-radius: $border-radius; @@ -164,15 +157,7 @@ .choices[data-type*="select-one"] { .choices__input { - background-color: var(--body-bg); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - .choices__input { - border-color: var(--gray-600); - } - } + background-color: $choices-input-bg; //var(--body-bg)/var(--gray-600) } .choices__item { @@ -198,7 +183,7 @@ } &:focus { - box-shadow: 0 0 0 2px #00bcd4; + box-shadow: $choices__button_joomla-focus-box-shadow; } } diff --git a/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss b/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss index c7c45f6188e4b..7af0051d9c1b2 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss @@ -20,3 +20,17 @@ $fa-font-path: "../../../../../../vendor/fontawesome-free/we html[dir=rtl] .float-right { float: left; } + +input .icon-check-square { + &::before { + color: var(--icon-check-square-bg); + background: var(--icon-check-square-color); + } +} + +input .icon-square { + &::before { + color: var(--icon-square-bg); + background: var(--icon-square-color); + } +} diff --git a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss index 22710c9be5c20..bf6dc08af2df0 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss @@ -12,20 +12,69 @@ min-width: 16rem; padding: 0; margin-bottom: 1rem; - color: var(--alert-accent-color, var(--template-bg-dark)); - background-color: var(--alert-bg-color, var(--white)); - border: 1px solid var(--alert-accent-color, var(--template-bg-dark)); - border-radius: .25rem; + color: var(--alert-accent-color); + background-color: var(--alert-bg-color); + border: 1px solid; + border-color: var(--alert-border); + border-radius: $border-radius-sm; transition: opacity .15s linear; + .btn-primary { + color: var(--states-btn-primary-color); + background: var(--states-btn-primary-bg); + border-color: var(--states-btn-primary-bg-hover); + &:hover { + background: var(--states-btn-primary-bg-hover); + } + } + + &[type="success"], + &[type="message"] { + --alert-accent-color: var(--state-success-text); + --alert-bg-color: var(--state-success-bg); + --alert-border: var(--state-success-bg-hvr); + --alert-heading-bg: var(--state-success-bg-hvr); + --alert-link-color: var(--state-success-link-color, var(--states-link-color)); + } + + &[type="info"], + &[type="notice"] { + --alert-accent-color: var(--state-info-text); + --alert-bg-color: var(--state-info-bg); + --alert-border: var(--state-info-bg-hvr); + --alert-heading-bg: var(--state-info-bg-hvr); + --alert-link-color: var(--state-success-link-color, var(--states-link-color)); + } + + &[type="warning"] { + .joomla-alert--close { + color: var(--state-warning-text); + } + + --alert-accent-color: var(--state-warning-text); + --alert-bg-color: var(--state-warning-bg); + --alert-border: var(--state-warning-border); //TODO Change to --state-warning-heading-bg in another PR + --alert-heading-bg: var(--state-warning-heading-bg); //TODO Change to --state-warning-heading-bg in another PR + --alert-link-color: var(--state-success-link-color, var(--states-link-color)); + } + + &[type="error"], + &[type="danger"] { + --alert-accent-color: var(--state-danger-text); + --alert-bg-color: var(--state-danger-bg); + --alert-border: var(--state-danger-bg-hvr); + --alert-heading-bg: var(--state-danger-bg-hvr); + --alert-link-color: var(--state-success-link-color, var(--states-link-color)); + } + .alert-heading { display: flex; flex-direction: column; justify-content: center; padding: .8rem; line-height: normal; - color: var(--white); - background: var(--alert-accent-color, var(--template-bg-dark)); + color: #fff; + background: var(--alert-heading-bg); align-content: center; .message::before, @@ -53,7 +102,7 @@ width: 1em; height: 1em; content: ""; - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); background-size: 100%; } @@ -73,51 +122,11 @@ } .alert-link { - color: var(--template-link-color); + font-weight: normal; + color: var(--states-link-color); text-decoration: underline; } - &[type="success"], - &[type="message"] { - --alert-accent-color: #{$state-success-text}; - --alert-bg-color: #{$state-success-bg}; - } - - &[type="info"], - &[type="notice"] { - --alert-accent-color: #{$state-info-text}; - --alert-bg-color: #{$state-info-bg}; - - @include color-mode(dark) { - p { - color: var(--body-color); - } - } - } - - @include color-mode(dark) { - &[type="info"], - &[type="notice"] { - --alert-accent-color: #{$state-info-text-dark}; - } - } - - &[type="warning"] { - .joomla-alert--close { - color: #{$state-warning-text}; - } - - color: #{$state-warning-text}; - --alert-accent-color: #{$warning}; - --alert-bg-color: #{$state-warning-bg}; - } - - &[type="error"], - &[type="danger"] { - --alert-accent-color: #{$state-danger-text}; - --alert-bg-color: #{$state-danger-bg}; - } - .joomla-alert--close, .joomla-alert-button--close { position: absolute; diff --git a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss index 02ad6a87487bd..8cab5931dacba 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss @@ -31,7 +31,7 @@ joomla-tab { padding: 0; white-space: nowrap; list-style: outside none none; - border-bottom: 1px solid var(--template-bg-dark-10); + border-bottom: $joomla-tablist-border-bottom; //1px solid var(--template-bg-dark-10); > button[role=tab] { position: relative; @@ -55,7 +55,7 @@ joomla-tab { &[aria-expanded=true], &:focus, &:hover { - color: var(--template-bg-dark-60); + color: $joomla-tab-btn-hvr; border: 0; border-radius: 0; box-shadow: none; @@ -67,49 +67,22 @@ joomla-tab { left: 0; height: 3px; content: ""; - background-color: var(--template-link-color); + background-color: var(--btn-primary-bg); opacity: .8; } .text-muted { - color: var(--template-text-light) !important; + color: $text-muted-hvr-color; } } &[aria-expanded=true] { font-weight: $font-weight-bold; - background: var(--template-bg-dark-3); - } - - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - &[aria-expanded=true], - &:focus, - &:hover { - /* stylelint-enable max-nesting-depth */ - color: var(--template-text-light); - } - - /* stylelint-disable max-nesting-depth */ - &[aria-expanded=true] { - /* stylelint-enable max-nesting-depth */ - background: var(--template-bg-dark-60); - } - } + background: $joomla-tab-btn-aria-exp-bg; } .text-muted { - color: var(--template-text-dark) !important; - } - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - .text-muted { - /* stylelint-enable max-nesting-depth */ - color: var(--template-text-light) !important; - } - } + color: $text-muted-color; } } } @@ -120,7 +93,7 @@ joomla-tab { color: var(--template-text-light); text-align: start; background-color: var(--template-link-color); - border: 1px solid var(--template-bg-dark-3); + border: $joomla-tab-btn-region-border; border-top: 0; &[aria-expanded=true], @@ -131,15 +104,7 @@ joomla-tab { } .text-muted { - color: var(--template-text-light) !important; - } - } - - @if $enable-dark-mode { - @include color-mode(dark) { - > button[role=region] { - border-color: var(--template-bg-dark-70); - } + color: $text-muted-color; } } @@ -159,7 +124,7 @@ joomla-tab { .main-card-columns > * > & { height: 100%; - border-left: 1px solid var(--template-bg-dark-10); + border-left: $main-card-col-border-left; //1px solid var(--template-bg-dark-10); } } @@ -177,7 +142,7 @@ joomla-tab[orientation=vertical] { height: auto; padding: 0; overflow: hidden; - border: 1px solid $gray-300; + border: $joomla-tab-tablist-border; //1px solid $gray-300; border-radius: 0; box-shadow: none; @@ -188,9 +153,10 @@ joomla-tab[orientation=vertical] { > button[role=tab] { text-align: start; + &[aria-expanded=true] { - color: var(--template-text-light); - background-color: var(--template-bg-dark-60); + color: $joomla-tablist-btn-aria-exp; //var(--template-text-light); + background-color: $joomla-tablist-btn-aria-exp-bg; //var(--template-bg-dark-60); } } @@ -205,14 +171,14 @@ joomla-tab[orientation=vertical] { margin: -1px 0; text-decoration: none; border-top: 1px solid transparent; - border-bottom: 1px solid $gray-300; + border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300; box-shadow: none; &[aria-expanded=true], &:focus, &:hover { color: var(--template-text-light); - background-color: var(--template-bg-dark-60); + background-color: $joomla-tablist-btn-aria-exp-bg; //var(--template-bg-dark-60); background-image: none; border-right: 0; box-shadow: none; @@ -223,24 +189,16 @@ joomla-tab[orientation=vertical] { left: -1px; width: 5px; height: auto; - background-color: var(--template-bg-dark); + background-color: $joomla-tablist-btn-aria-exp-aft-bg; //var(--template-bg-dark); } .text-muted { - color: var(--template-text-light) !important; + color: $text-muted-hvr-color; } } + .text-muted { - color: var(--template-text-dark) !important; - } - @if $enable-dark-mode { - @include color-mode(dark) { - /* stylelint-disable max-nesting-depth */ - .text-muted { - /* stylelint-enable max-nesting-depth */ - color: var(--template-text-light) !important; - } - } + color: $text-muted-color; } } } @@ -257,7 +215,7 @@ joomla-tab[view=accordion] { flex-direction: column; white-space: normal; border-radius: 0; - box-shadow: 0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04); + box-shadow: $joomla-tab-accordion-box-shadow; > div[role=tablist] { background-color: $white; @@ -270,7 +228,7 @@ joomla-tab[view=accordion] { text-align: start; text-decoration: none; border: 0; - border-bottom: 1px solid $gray-300; + border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300; box-shadow: none; &[aria-expanded=true]::after, @@ -298,7 +256,7 @@ joomla-tab[view=accordion] { display: block; width: 100%; max-width: 100%; - border-bottom: 1px solid $gray-300; + border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300; } } @@ -357,13 +315,43 @@ joomla-tab[view=accordion] { } .respTable td:last-child { - border-bottom: 1em var(--template-bg-dark-80) solid; + border-bottom: $respTable-border-bottom; //1em var(--template-bg-dark-80) solid; } .oddCol { - background: var(--template-bg-light); + background: $permissions-sliders-oddCol-bg; //var(--template-bg-light); } } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + joomla-tab { + > button[role=region] { + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg); + border: var(--btn-primary-border); + + &[aria-expanded=true], + &:hover, + &:focus { + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg-hvr); + } + + } + + } + + [dir=rtl] joomla-tab { + div[role="tablist"] > button[role="tab"][aria-expanded="true"]::after { + right: auto; + left: 0; + } + } + } +} + + diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss index 7a1ec951439e0..cb11435d1ea5a 100644 --- a/installation/template/scss/template.scss +++ b/installation/template/scss/template.scss @@ -22,8 +22,8 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts"; // Variables from the Atum template @import "../../../build/media_source/templates/administrator/atum/scss/variables"; +@import "../../../build/media_source/templates/administrator/atum/scss/variables-dark"; -$body-bg: $template-background-light; $table-bg: transparent; @import "../../../media/vendor/bootstrap/scss/variables"; @@ -44,12 +44,25 @@ $table-bg: transparent; // Custom Atum colors :root { - @each $color, $value in $atum-colors { --#{$prefix}#{$color}: #{$value}; } +} + +@if $enable-dark-mode { + @include color-mode(dark, true) { + @each $color, $value in $atum-colors-dark { + --#{$prefix}#{$color}: #{$value}; + } + } +} - --primary: hsl(213, 63%, 44%); +@if $enable-dark-mode { + @include color-mode(dark, true) { + @each $color, $value in $atum-colors-dark { + --#{$prefix}#{$color}: #{$value}; + } + } } .border-primary { @@ -182,6 +195,24 @@ $table-bg: transparent; box-sizing: border-box; } +body { + background: var(--body-bg); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + body { + background: var(--main-bg); + } + } +} + +.header { + .h2 { + margin-bottom: 0; + } +} + .j-install { display: flex; flex-direction: column; @@ -209,7 +240,7 @@ $table-bg: transparent; .j-container { width: 100%; max-width: 40rem; - margin: 0 auto; + margin: 1rem auto; h1 { color: $dark-blue; @@ -259,7 +290,7 @@ $table-bg: transparent; // emphasis than we require for the header .j-install-step-header { color: #fff; - background-color: $dark-blue; + background-color: var(--secondary-bg); } } } @@ -299,13 +330,24 @@ $table-bg: transparent; display: none; } +.btn-primary { + color: var(--btn-primary-color); + background-color: var(--btn-primary-bg); + border: var(--btn-primary-border); + + &:hover, &:focus, &:active { + background-color: var(--btn-primary-bg-hvr); + border: var(--btn-primary-border-hvr); + } + +} + .btn-success { color: #fff; background-color: #75b544; border-color: #75b544; } - // Form .form-control { @@ -315,9 +357,9 @@ $table-bg: transparent; } @if $enable-dark-mode { - @include color-mode(light) { + @include color-mode(dark) { .form-control { - background-color: var(--white-offset); + background-color: var(--form-control-bg); } } } @@ -397,11 +439,21 @@ legend { // Language Table caption { + padding: 0; + margin: 0 1rem 0 0; caption-side: top; } +@if $enable-dark-mode { + @include color-mode(dark) { + caption { + color: #fff; + } + } +} + .bg-warning { - color: #292b2c; + color: #fff; } // footer @@ -417,7 +469,11 @@ caption { @if $enable-dark-mode { @include color-mode(dark) { .footer { - background-color: var(--secondary-bg); + background: var(--header-bg); + box-shadow: none; + a { + color: var(--table-link-color); + } } } } diff --git a/layouts/joomla/installer/changelog.php b/layouts/joomla/installer/changelog.php index b65099cd0c6ed..7ce8c51ca44f9 100644 --- a/layouts/joomla/installer/changelog.php +++ b/layouts/joomla/installer/changelog.php @@ -34,7 +34,7 @@ function ($items, $changeType) { $class = 'bg-success'; break; case 'change': - $class = 'bg-warning text-dark'; + $class = 'bg-warning'; break; case 'remove': $class = 'bg-secondary';