Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/joomla5/media/templates/administrator/atum/scss/ |
| [Home] [System Details] [Kill Me] |
// 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,
);