primo commit
This commit is contained in:
14
media/templates/administrator/atum/scss/_maps-atum.scss
Normal file
14
media/templates/administrator/atum/scss/_maps-atum.scss
Normal file
@ -0,0 +1,14 @@
|
||||
$theme-colors-text: map-merge((
|
||||
"action": shade-color($base-color, 60%),
|
||||
"error": shade-color($red-dark, 60%)
|
||||
), $theme-colors-text);
|
||||
|
||||
$theme-colors-bg-subtle: map-merge((
|
||||
"action": tint-color($base-color, 80%),
|
||||
"error": tint-color($red-dark, 80%)
|
||||
), $theme-colors-bg-subtle);
|
||||
|
||||
$theme-colors-border-subtle: map-merge((
|
||||
"action": tint-color($base-color, 60%),
|
||||
"error": tint-color($red-dark, 60%)
|
||||
), $theme-colors-border-subtle);
|
||||
464
media/templates/administrator/atum/scss/_variables-dark.scss
Normal file
464
media/templates/administrator/atum/scss/_variables-dark.scss
Normal file
@ -0,0 +1,464 @@
|
||||
@use "sass:color";
|
||||
|
||||
// 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: color.adjust($btn-primary-dark, $lightness: 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: color.adjust($btn-primary-dark, $lightness: 20%),
|
||||
media-manager-breadcrumb-item-bg: var(--gray-700),
|
||||
|
||||
media-tree-item-color: $btn-primary-dark,
|
||||
media-tree-active-icon-color: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: 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: color.adjust($success-dark, $lightness: -15%),
|
||||
|
||||
danger-text: #e0615c,
|
||||
danger: $danger-dark,
|
||||
dangerhvr: color.adjust($danger-dark, $lightness: -15%),
|
||||
|
||||
darkdanger: #941f1c,
|
||||
darkdangerhvr: color.adjust(#941f1c, $lightness: -15%),
|
||||
|
||||
error: #941f1c,
|
||||
errorhvr: #be2824,
|
||||
|
||||
warning-text: #000,
|
||||
warning: #f0ad4e,
|
||||
warninghvr: color.adjust($warning, $lightness: -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: color.adjust($link-color-dark, $lightness: 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: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: -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 color.adjust($btn-primary-dark, $lightness: 10%),
|
||||
btn-primary-bg-hvr: color.adjust($btn-primary-dark, $lightness: -10%),
|
||||
btn-primary-border-hvr: 1px solid color.adjust($btn-primary-dark, $lightness: 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 color.adjust($info-dark, $lightness: 10%),
|
||||
btn-secondary-bg-hvr: color.adjust($info-dark, $lightness: -10%),
|
||||
btn-secondary-border-hvr: 1px solid color.adjust($info-dark, $lightness: 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 color.adjust($btn-primary-dark, $lightness: 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 color.adjust(#64676c, $lightness: 10%),
|
||||
|
||||
btn-info-color: var(--template-text-light),
|
||||
btn-info-bg: $info-dark,
|
||||
btn-info-border: 1px solid color.adjust($info-dark, $lightness: 10%),
|
||||
btn-info-bg-hvr: color.adjust($info-dark, $lightness: -10%),
|
||||
btn-info-border-hvr: 1px solid color.adjust($info-dark, $lightness: -10%),
|
||||
|
||||
// Dropdown
|
||||
dropdown-header-bg: color.adjust($btn-primary-dark, $lightness: -10%),
|
||||
dropdown-divider-bg: 1px solid #fff,
|
||||
dropdown-item-bg: $btn-primary-dark,
|
||||
dropdown-item-bg-hvr: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($success-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: -15%),
|
||||
state-info-bg-hvr: color.adjust($btn-primary-dark, $lightness: -25%),
|
||||
state-info-border: transparent,
|
||||
state-info-icon: var(--state-info-text),
|
||||
state-info-heading-bg: color.adjust($btn-primary-dark, $lightness: -5%),
|
||||
|
||||
state-warning-text: #000,
|
||||
state-warning-text-hvr: #000,
|
||||
state-warning-bg: $warning,
|
||||
state-warning-bg-hvr: color.adjust($warning, $lightness: -15%),
|
||||
state-warning-border: color.adjust($warning, $lightness: -15%),
|
||||
state-warning-icon: #000,
|
||||
state-warning-heading-bg: color.adjust($warning, $lightness: -15%),
|
||||
|
||||
state-danger-text: var(--text-normal),
|
||||
state-danger-text-hvr: var(--text-normal),
|
||||
state-danger-bg: $danger-dark,
|
||||
state-danger-bg-hvr: color.adjust($danger-dark, $lightness: -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: color.adjust($btn-primary-dark, $lightness: -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: color.adjust($success-dark, $lightness: -15%),
|
||||
atum-btn-success-border: 1px solid color.adjust($success-dark, $lightness: 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: color.adjust($danger, $lightness: -15%),
|
||||
atum-btn-danger-border: 1px solid color.adjust($danger, $lightness: 10%),
|
||||
atum-btn-danger-hvr: var(--template-text-light),
|
||||
|
||||
atum-btn-info: color.adjust($info-dark, $lightness: 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: color.adjust($info-dark, $lightness: -15%),
|
||||
atum-btn-info-border: 1px solid color.adjust($info-dark, $lightness: 10%),
|
||||
atum-btn-info-hvr: var(--template-text-dark),
|
||||
|
||||
atum-btn-primary: color.adjust($btn-primary-dark, $lightness: 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: color.adjust($btn-primary-dark, $lightness: -15%),
|
||||
atum-btn-primary-border: 1px solid color.adjust($btn-primary-dark, $lightness: 10%),
|
||||
atum-btn-primary-hvr: var(--template-text-light),
|
||||
|
||||
atum-btn-secondary: #f0f4fb,
|
||||
|
||||
atum-btn-action: color.adjust($info-dark, $lightness: -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: color.adjust($info-dark, $lightness: -15%),
|
||||
atum-btn-action-border: 1px solid color.adjust($info-dark, $lightness: 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,
|
||||
|
||||
);
|
||||
1035
media/templates/administrator/atum/scss/_variables.scss
Normal file
1035
media/templates/administrator/atum/scss/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
84
media/templates/administrator/atum/scss/blocks/_alerts.scss
Normal file
84
media/templates/administrator/atum/scss/blocks/_alerts.scss
Normal file
@ -0,0 +1,84 @@
|
||||
// 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: 1px solid;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
&.alert-info {
|
||||
color: var(--state-info-text);
|
||||
background-color: var(--state-info-bg);
|
||||
border: var(--state-info-border);
|
||||
a {
|
||||
color: var(--state-info-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
color: var(--state-warning-text);
|
||||
background-color: var(--state-warning-bg);
|
||||
border: var(--state-warning-border);
|
||||
a {
|
||||
color: var(--state-warning-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
color: var(--state-success-text);
|
||||
background-color: var(--state-success-bg);
|
||||
border: var(--state-success-border);
|
||||
a {
|
||||
color: var(--state-success-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
color: var(--state-error-text);
|
||||
background-color: var(--state-error-bg);
|
||||
border: var(--state-error-border);
|
||||
a {
|
||||
color: var(--state-error-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-danger {
|
||||
color: var(--state-danger-text);
|
||||
background-color: var(--state-danger-bg);
|
||||
border-color: var(--state-danger-border);
|
||||
a {
|
||||
color: var(--state-danger-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset .alert {
|
||||
&.alert-info {
|
||||
margin: -1rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
// Calendar
|
||||
|
||||
:root {
|
||||
--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#{"*/"};
|
||||
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
tr.time {
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
media/templates/administrator/atum/scss/blocks/_edit.scss
Normal file
24
media/templates/administrator/atum/scss/blocks/_edit.scss
Normal file
@ -0,0 +1,24 @@
|
||||
// Edit Form
|
||||
|
||||
.title-alias {
|
||||
.form-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
bottom: -1.8rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-edit {
|
||||
|
||||
.title-alias {
|
||||
.form-group {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
248
media/templates/administrator/atum/scss/blocks/_form.scss
Normal file
248
media/templates/administrator/atum/scss/blocks/_form.scss
Normal file
@ -0,0 +1,248 @@
|
||||
// Form
|
||||
|
||||
.form-control {
|
||||
max-width: $input-max-width;
|
||||
background: $form-control-bg;
|
||||
border: $form-control-border;
|
||||
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $form-control-bg-disabled;
|
||||
opacity: 1;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: $file-selector-btn-bg-hvr;
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
&.valid {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-style: italic;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button,
|
||||
&::file-selector-button {
|
||||
background-color: $file-selector-btn-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.control-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 1rem;
|
||||
|
||||
> .form-check {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.control-label {
|
||||
width: 240px;
|
||||
padding: .3rem 1rem .3rem 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 210px;
|
||||
max-width: 100%;
|
||||
|
||||
+ div {
|
||||
width: 100%;
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-vertical & {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.stack .control-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
hr {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
td .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
padding-top: 5px;
|
||||
|
||||
.checkbox input {
|
||||
position: static;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Validation
|
||||
.invalid {
|
||||
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;
|
||||
}
|
||||
|
||||
[aria-grabbed="true"] {
|
||||
box-shadow: $input-box-shadow;
|
||||
}
|
||||
|
||||
.sortable-handler.inactive {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
// set up hidden tooltip
|
||||
[role="tooltip"]:not(.show) {
|
||||
z-index: $zindex-tooltip;
|
||||
display: none;
|
||||
padding: .5em;
|
||||
margin: .25em;
|
||||
color: $white;
|
||||
text-align: start;
|
||||
background: $black;
|
||||
border-radius: .2rem !important;
|
||||
}
|
||||
|
||||
// reveal associated tooltip on focus
|
||||
:focus + [role="tooltip"],
|
||||
:hover + [role="tooltip"] {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter-search-bar__description {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.container-popup .filter-search-bar__description {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.input-group > .form-control[readonly] {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@extend .mb-3;
|
||||
}
|
||||
|
||||
// Subform - non table layout
|
||||
div.subform-repeatable-group {
|
||||
position: relative;
|
||||
padding: 32px 32px 16px 28px;
|
||||
margin-top: 20px;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
> .btn-toolbar {
|
||||
|
||||
.btn-group {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
|
||||
&.group-add {
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: $border-radius 0 $border-radius 0;
|
||||
}
|
||||
&.group-remove {
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
border-radius: 0 $border-radius 0 $border-radius;
|
||||
}
|
||||
&.group-move {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
padding: 0;
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
transform: translateY(-50%);
|
||||
|
||||
span {
|
||||
padding: 1.5rem .5rem;
|
||||
}
|
||||
}
|
||||
&.group-move-up {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
margin-top: -45px;
|
||||
border-radius: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.group-move-down {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
margin-top: 45px;
|
||||
border-radius: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight draggable section
|
||||
.subform-repeatable-group[draggable="true"] {
|
||||
// For non table layout
|
||||
background-color: $teal;
|
||||
|
||||
// For table layout
|
||||
> td {
|
||||
background-color: $teal;
|
||||
}
|
||||
}
|
||||
266
media/templates/administrator/atum/scss/blocks/_global.scss
Normal file
266
media/templates/administrator/atum/scss/blocks/_global.scss
Normal file
@ -0,0 +1,266 @@
|
||||
// Global
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
|
||||
&.a11y_font {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
|
||||
&.admin, &#subhead-container {
|
||||
background-color: $admin-background;
|
||||
}
|
||||
|
||||
&.monochrome {
|
||||
filter: grayscale(1);
|
||||
&::after {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: var(--template-bg-dark-5);
|
||||
}
|
||||
}
|
||||
|
||||
&.a11y_contrast {
|
||||
filter: contrast(115%);
|
||||
}
|
||||
|
||||
&.monochrome.a11y_contrast {
|
||||
filter: grayscale(1) contrast(115%);
|
||||
}
|
||||
|
||||
&.a11y_highlight {
|
||||
a,
|
||||
.header-item-content {
|
||||
padding: 3px;
|
||||
text-decoration: underline !important;
|
||||
border: #f00 dotted 1px;
|
||||
}
|
||||
|
||||
.joomlaversion {
|
||||
padding: 0;
|
||||
text-decoration: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.page-link {
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 1.2rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// focus-visible polyfill rule
|
||||
.js-focus-visible :focus:not(.focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Default focus highlighting
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
|
||||
&.focus-visible {
|
||||
outline: auto 2px var(--focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Break up text in cells to prevent overflow
|
||||
.break-word {
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
label,
|
||||
caption {
|
||||
@include font-size($form-label-font-size);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
img path {
|
||||
fill: var(--template-text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.container-main,
|
||||
.system-debug {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
body .container-main {
|
||||
order: 1;
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
background: var(--main-bg);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 2rem;
|
||||
|
||||
.subhead + & {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.contentpane) .main-card {
|
||||
background: $main-card-bg;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--atum-box-shadow);
|
||||
}
|
||||
|
||||
.row-selected {
|
||||
background-color: var(--toolbar-bg);
|
||||
}
|
||||
|
||||
// Multiple buttons wrapping
|
||||
.input-group input {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
// Multilingual associations specific
|
||||
.item-associations {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-associations li {
|
||||
display: inline-block;
|
||||
margin-bottom: 3px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Quickicon specific
|
||||
.message-alert {
|
||||
text-align: end !important;
|
||||
}
|
||||
|
||||
// external links with icons
|
||||
a[target="_blank"]::before {
|
||||
padding-inline-end: 3px;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
content: "\f35d";
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
&.d-flex {
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-color;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.card-columns {
|
||||
display: grid;
|
||||
grid-gap: 0 15px;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cpanel-help,
|
||||
.cpanel-system {
|
||||
|
||||
.card-columns {
|
||||
@include media-breakpoint-up(md) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tiny {
|
||||
@include font-size($form-label-font-size);
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
// details
|
||||
|
||||
details {
|
||||
padding: .5rem 1rem;
|
||||
margin: 0 0 2rem;
|
||||
background: $details-bg;
|
||||
border: $details-border;
|
||||
border-radius: $border-radius;
|
||||
|
||||
summary {
|
||||
color: var(--template-link-color);
|
||||
|
||||
~ * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// meter element
|
||||
meter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Bootstrap 4 b/c
|
||||
.sr-only {
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
|
||||
// tab *+* border
|
||||
@include media-breakpoint-up(md) {
|
||||
joomla-tab[orientation=horizontal]:not([view=accordion]) {
|
||||
section > .row {
|
||||
--gutter-x: 4rem;
|
||||
|
||||
> * + * {
|
||||
border-inline-start: 1px solid var(--template-bg-dark-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
238
media/templates/administrator/atum/scss/blocks/_header.scss
Normal file
238
media/templates/administrator/atum/scss/blocks/_header.scss
Normal file
@ -0,0 +1,238 @@
|
||||
// Header
|
||||
.header {
|
||||
z-index: $zindex-header;
|
||||
color: $white;
|
||||
background: $header-bg;
|
||||
|
||||
&-inside {
|
||||
display: flex;
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
padding: 12px 5px;
|
||||
overflow: hidden;
|
||||
background-color: $header-logo-bg;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
&.small {
|
||||
justify-content: center;
|
||||
width: $sidebar-width-closed;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
svg,
|
||||
img {
|
||||
|
||||
&:not(.logo-collapsed) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.logo-collapsed {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
margin: 0 .35rem;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
|
||||
&.logo-collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.2rem;
|
||||
color: $white;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> span {
|
||||
margin-inline-end: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.dropdown-header,
|
||||
.dropdown-item {
|
||||
padding: .82rem .75rem;
|
||||
color: $white;
|
||||
background-color: $dropdown-item-bg; // var(--template-bg-dark-70);
|
||||
|
||||
> span {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dropdown-item-bg-hvr; // var(--template-bg-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: .75rem;
|
||||
font-size: inherit;
|
||||
background-color: $dropdown-header-bg; // var(--template-bg-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.header-items {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 50%;
|
||||
margin: 15px;
|
||||
margin-inline-start: auto;
|
||||
|
||||
.dropdown-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
position: relative;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.header-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1rem;
|
||||
color: $white;
|
||||
background-color: $header-item-content-bg;
|
||||
border: none;
|
||||
border-radius: $header-item-content-border-radius;
|
||||
padding-inline-end: 4px;
|
||||
|
||||
a,
|
||||
button {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:not(.no-link):not(.joomlaversion):hover {
|
||||
background-color: $header-item-content-bg-hvr;
|
||||
}
|
||||
|
||||
&.joomlaversion {
|
||||
color: $header-item-content-jversion-color;
|
||||
background-color: $header-item-content-jversion-bg;
|
||||
|
||||
.header-item-text {
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-item-icon {
|
||||
> * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
margin: 4px;
|
||||
color: $white;
|
||||
background-color: var(--template-bg-dark);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-item-count {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
|
||||
.header-item-text {
|
||||
padding: 0 8px 0 4px;
|
||||
font-size: .75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-more-btn {
|
||||
margin: 0 5px;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.header-dd-items {
|
||||
.header-item-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header-item-text {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-dd-item {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.header-items {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
background: var(--template-bg-dark);
|
||||
|
||||
.#{$jicon-css-prefix}-angle-down,
|
||||
.#{$fa-css-prefix}-angle-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.header-item-icon > * {
|
||||
background: var(--header-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
86
media/templates/administrator/atum/scss/blocks/_icons.scss
Normal file
86
media/templates/administrator/atum/scss/blocks/_icons.scss
Normal file
@ -0,0 +1,86 @@
|
||||
// Icons
|
||||
|
||||
.#{$jicon-css-prefix}-white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.tbody-icon {
|
||||
padding: 0 3px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
[class^="#{$jicon-css-prefix}-"],
|
||||
[class*=" #{$jicon-css-prefix}-"],
|
||||
[class^="#{$fa-css-prefix}-"],
|
||||
[class*=" #{$fa-css-prefix}-"] {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 1rem;
|
||||
line-height: 22px;
|
||||
color: $gray-400;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-publish,
|
||||
.#{$jicon-css-prefix}-check,
|
||||
.#{$fa-css-prefix}-check {
|
||||
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: var(--featured-icon-color);
|
||||
border-color: var(--featured-icon-color);
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-folder,
|
||||
.#{$fa-css-prefix}-folder {
|
||||
color: var(--template-text-dark);
|
||||
border-color: $gray-700;
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-checkedout,
|
||||
.#{$jicon-css-prefix}-lock,
|
||||
.#{$fa-css-prefix}-lock {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1rem;
|
||||
color: $icon-checkedout-color; // var(--template-text-dark);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.home-disabled,
|
||||
&.featured-disabled,
|
||||
&.color-featured-disabled,
|
||||
&.#{$jicon-css-prefix}-star-disabled,
|
||||
&.#{$fa-css-prefix}-star-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled .#{$jicon-css-prefix}-home,
|
||||
&.disabled .#{$fa-css-prefix}-home {
|
||||
color: $state-warning-bg;
|
||||
border-color: $state-warning-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// WebAuthn
|
||||
.plg_system_webauthn_login_button svg {
|
||||
width: 30px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.plg_system_webauthn_login_button svg path, .plg_system_webauthn_login_button svg circle {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.badge > span {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
// Iframe
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal iframe {
|
||||
width: 100%;
|
||||
}
|
||||
19
media/templates/administrator/atum/scss/blocks/_layout.scss
Normal file
19
media/templates/administrator/atum/scss/blocks/_layout.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.options-form {
|
||||
width: 100%;
|
||||
padding: 1vw 2vw;
|
||||
margin-bottom: 1rem;
|
||||
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: $options-form-legend-color;
|
||||
background-color: $options-form-legend-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
#content {
|
||||
form {
|
||||
.name {
|
||||
&.break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
274
media/templates/administrator/atum/scss/blocks/_login.scss
Normal file
274
media/templates/administrator/atum/scss/blocks/_login.scss
Normal file
@ -0,0 +1,274 @@
|
||||
// Login page
|
||||
|
||||
.view-login,
|
||||
.task-logout {
|
||||
|
||||
.container-main {
|
||||
order: 1;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - 35vh);
|
||||
}
|
||||
|
||||
#content {
|
||||
@include media-breakpoint-down(md) {
|
||||
max-width: 98%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 100%;
|
||||
max-width: 25rem;
|
||||
padding: 30px;
|
||||
margin: 1rem;
|
||||
color: var(--template-text-dark);
|
||||
background: var(--body-bg);
|
||||
border-radius: 10px;
|
||||
box-shadow: $login-box-shadow;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 4.4rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
svg.joomla-logo {
|
||||
width: 2.4rem;
|
||||
height: 4.4rem;
|
||||
background-size: 4.4rem 2.4rem;
|
||||
|
||||
path {
|
||||
fill: var(--template-bg-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&-watermark {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
max-width: 500px;
|
||||
transform: rotate(12deg) translate(40%, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.85rem;
|
||||
|
||||
label {
|
||||
span {
|
||||
font-size: ($font-size-base * .9);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
bottom: -1.5rem;
|
||||
font-size: ($font-size-base * .75);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.form-control-hint {
|
||||
position: absolute;
|
||||
top: .1rem;
|
||||
inset-inline-end: 0;
|
||||
font-size: ($font-size-base * .75);
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
box-shadow: $login-focus-box-shadow;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: .25rem;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--template-bg-dark-10);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include media-breakpoint-only(xs) {
|
||||
padding: 8px 10px;
|
||||
font-size: ($font-size-base * .875);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sidebar-wrapper,
|
||||
.header .logo {
|
||||
flex: 1 0 400px;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: none;
|
||||
background-color: var(--template-sidebar-bg);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
order: 2;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.main-brand {
|
||||
margin-bottom: auto;
|
||||
|
||||
a {
|
||||
font-size: ($font-size-base * .875);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: ($font-size-base * 1.125);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.card-header {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
font-size: ($font-size-base * .875);
|
||||
--body-color: var(--template-text-light);
|
||||
color: var(--template-text-light);
|
||||
text-align: center;
|
||||
|
||||
.card {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
box-shadow: none;
|
||||
|
||||
.module-body {
|
||||
padding: .75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.card {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container-main,
|
||||
.sidebar-wrapper {
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex: 1 0 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
&.small {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
background: var(--template-bg-dark-70);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $login-label-color;
|
||||
}
|
||||
|
||||
.com_login .sidebar-wrapper .main-brand {
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.com_login .sidebar-wrapper #sidebar p {
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
.com_login .sidebar-wrapper .main-brand a,
|
||||
.com_login .sidebar-wrapper #sidebar,
|
||||
.com_login .sidebar-wrapper #sidebar a {
|
||||
color: var(--template-text-light);
|
||||
}
|
||||
|
||||
.view-login {
|
||||
#wrapper.d-flex {
|
||||
@include media-breakpoint-down(md) {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-wrapper:not(.show):not(.collapse) {
|
||||
@include media-breakpoint-down(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid .form-control-feedback {
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.login_message {
|
||||
margin: 1rem 1rem 0;
|
||||
}
|
||||
447
media/templates/administrator/atum/scss/blocks/_modals.scss
Normal file
447
media/templates/administrator/atum/scss/blocks/_modals.scss
Normal file
@ -0,0 +1,447 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Modals
|
||||
|
||||
.modal {
|
||||
|
||||
.btn {
|
||||
padding: 0 22px;
|
||||
margin-inline-end: .5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2.3rem;
|
||||
color: var(--template-text-dark);
|
||||
background: var(--white);
|
||||
border-color: var(--whiteoffset);
|
||||
box-shadow: $modal-btn-box-shadow;
|
||||
}
|
||||
|
||||
.btn-primary:not([href]),
|
||||
.btn-success:not([href]),
|
||||
.btn-danger:not([href]),
|
||||
.btn-secondary:not([href]) {
|
||||
color: var(--template-text-dark);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--template-text-dark);
|
||||
}
|
||||
|
||||
.btn-primary:not([href]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--white);
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary:not([href]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--white);
|
||||
background: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success:not([href]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--white);
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger:not([href]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--white);
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-danger {
|
||||
[class^="#{$jicon-css-prefix}-"],
|
||||
[class*=" #{$jicon-css-prefix}-"],
|
||||
[class^="#{$fa-css-prefix}-"],
|
||||
[class*=" #{$fa-css-prefix}-"],
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 2.375rem;
|
||||
height: 100%;
|
||||
margin: 0 16px;
|
||||
margin-inline-start: -22px;
|
||||
line-height: 2.375rem;
|
||||
color: hsla(0, 0%, 100%, .9);
|
||||
background-color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-success {
|
||||
[class^="#{$jicon-css-prefix}-"],
|
||||
[class*=" #{$jicon-css-prefix}-"],
|
||||
[class^="#{$fa-css-prefix}-"],
|
||||
[class*=" #{$fa-css-prefix}-"],
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 2.375rem;
|
||||
height: 100%;
|
||||
margin: 0 16px;
|
||||
margin-inline-start: -22px;
|
||||
line-height: 2.375rem;
|
||||
color: hsla(0, 0%, 100%, .9);
|
||||
background-color: var(--success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $modal-header-height;
|
||||
}
|
||||
|
||||
.contentpane {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// Changelog
|
||||
.changelog {
|
||||
text-align: start !important;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
flex: 1 0 180px;
|
||||
max-width: 180px;
|
||||
padding: 10px 15px;
|
||||
text-align: end;
|
||||
background: color.adjust($gray-100, $lightness: -2.5%);
|
||||
border-right: 1px solid $table-border-color;
|
||||
|
||||
.badge {
|
||||
border-radius: .2rem;
|
||||
|
||||
&.badge-jlanguage {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding: 10px 15px;
|
||||
|
||||
ul {
|
||||
padding-inline-start: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .15rem;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styling for joomla-dialog element
|
||||
joomla-dialog {
|
||||
dialog {
|
||||
width: 96vw;
|
||||
max-width: 1700px;
|
||||
height: 96vh;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border-color-translucent);
|
||||
border-radius: .3rem;
|
||||
box-shadow: $modal-joomla-dialog-box-shadow;
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
// Override display to flex, to scale the content to full height
|
||||
&[open] {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="image"] {
|
||||
dialog {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="iframe"] {
|
||||
dialog {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
iframe.iframe-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Extra loading animation for iframe and ajax types
|
||||
&[type="iframe"],
|
||||
&[type="ajax"] {
|
||||
&.loading {
|
||||
dialog:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
content: "";
|
||||
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;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog elements
|
||||
.joomla-dialog-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
background: var(--body-bg);
|
||||
|
||||
.buttons-holder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: auto;
|
||||
|
||||
button {
|
||||
margin-inline: .375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.joomla-dialog-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
margin-inline-end: .375rem;
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.joomla-dialog-body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
|
||||
.buttons-holder {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
// Apply overflow for potentially large content
|
||||
joomla-dialog[type="inline"],
|
||||
joomla-dialog[type="ajax"] & {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Content basic loading animation
|
||||
joomla-dialog.loading & {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
joomla-dialog.loaded & {
|
||||
opacity: 1;
|
||||
transition: opacity .4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.joomla-dialog-footer {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
.buttons-holder button {
|
||||
padding-inline: 22px;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog alert and confirm
|
||||
.joomla-dialog-alert,
|
||||
.joomla-dialog-confirm {
|
||||
dialog {
|
||||
width: 600px;
|
||||
max-width: 80vw;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.joomla-dialog-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog for content select field
|
||||
.joomla-dialog-content-select-field {
|
||||
dialog {
|
||||
@include media-breakpoint-up(xxl) {
|
||||
width: 90vw;
|
||||
height: 90vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
186
media/templates/administrator/atum/scss/blocks/_quickicons.scss
Normal file
186
media/templates/administrator/atum/scss/blocks/_quickicons.scss
Normal file
@ -0,0 +1,186 @@
|
||||
// Quick Icons
|
||||
|
||||
.quick-icons {
|
||||
background-color: $quickicon-bg;
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.quickicon {
|
||||
--text-color: var(--template-quickicon-color);
|
||||
--bg-color: var(--template-quickicon-bg);
|
||||
--icon-color: var(--template-quickicon-color);
|
||||
--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;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
padding: 0 1rem;
|
||||
color: var(--text-color);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.quickicon-name {
|
||||
padding: .125rem 0 .6rem;
|
||||
font-size: $display2-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quickicon-amount {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: $bold-weight;
|
||||
line-height: 1rem;
|
||||
color: var(--text-amount-color);
|
||||
background: $quickicon-amount-bg;
|
||||
border-radius: $border-radius;
|
||||
transition: all .25s ease;
|
||||
margin-inline-start: .5rem;
|
||||
}
|
||||
|
||||
.j-links-link {
|
||||
display: block;
|
||||
padding: 0 .2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
.quickicon-linkadd {
|
||||
width: 2.5rem;
|
||||
font-size: 1.2rem;
|
||||
background: $quickicon-linkadd-bg;
|
||||
transition: all .25s ease;
|
||||
|
||||
a {
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
color: $quickicon-linkadd-color;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--link-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--quickicon-linkadd-bg-hvr);
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quickicon-single,
|
||||
.quickicon-group {
|
||||
display: flex;
|
||||
min-height: 6rem;
|
||||
overflow: hidden;
|
||||
border: $quickicon-border;
|
||||
border-radius: $quickicon-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
#content .menu-quicktask {
|
||||
position: absolute;
|
||||
inset-inline-end: 1.25rem;
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
.shepherd-element, .shepherd-arrow:before {
|
||||
background-color: var(--body-bg) !important;
|
||||
}
|
||||
|
||||
.shepherd-text, .shepherd-title {
|
||||
color: var(--body-color) !important;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.shepherd-element, .shepherd-arrow:before {
|
||||
background-color: #2f4156 !important;
|
||||
}
|
||||
|
||||
.shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before {
|
||||
background-color: #222f3e !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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
// Sidebar
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 1rem 2rem;
|
||||
|
||||
li {
|
||||
font-size: .9rem;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
&.divider {
|
||||
margin: .3rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .25rem;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-normal;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
margin-inline-end: .5rem;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
content: "\f054" #{"/*!rtl:\"\f053\"*/"};
|
||||
}
|
||||
}
|
||||
|
||||
&.item:hover, &.active {
|
||||
background-color: var(--sidebar-item-bg-hvr);
|
||||
|
||||
a {
|
||||
color: var(--sidebar-item-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
305
media/templates/administrator/atum/scss/blocks/_sidebar.scss
Normal file
305
media/templates/administrator/atum/scss/blocks/_sidebar.scss
Normal file
@ -0,0 +1,305 @@
|
||||
// Sidebar
|
||||
|
||||
.sidebar-wrapper {
|
||||
z-index: $zindex-sidebar;
|
||||
min-height: calc(100vh - 66px);
|
||||
overflow: hidden;
|
||||
background-color: $sidebarwrapper-bg;
|
||||
box-shadow: var(--atum-box-shadow);
|
||||
|
||||
.sidebar-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
|
||||
a,
|
||||
.menu-dashboard,
|
||||
.menu-quicktask {
|
||||
color: $sidebar-item-color; /* $sidebar-item-color $white */
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-item-color-hvr; /* $sidebar-item-color-hvr var(--template-text-light) */
|
||||
text-decoration: none;
|
||||
background-color: $sidebar-item-bg-hvr; /* $sidebar-item-bg-hvr var(--template-bg-dark-65) */
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
|
||||
[class^="#{$jicon-css-prefix}-"],
|
||||
[class*=" #{$jicon-css-prefix}-"],
|
||||
[class^="#{$fa-css-prefix}-"],
|
||||
[class*=" #{$fa-css-prefix}-"] {
|
||||
margin: 0 .85rem;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
&-level-2 > a {
|
||||
padding-inline-start: 3rem;
|
||||
}
|
||||
|
||||
&-level-3 > a {
|
||||
padding-inline-start: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex: 1 0 $sidebar-width;
|
||||
max-width: $sidebar-width;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
&.sidebar-menu {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
background: $sidebar-toggle-bg; /* $sidebar-toggle-bg var(--template-bg-dark-60) */
|
||||
|
||||
a {
|
||||
color: $sidebar-toggle-link; /* $sidebar-toggle-link $white */
|
||||
}
|
||||
|
||||
.sidebar-item-title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar navigation
|
||||
.main-nav {
|
||||
width: $sidebar-width;
|
||||
padding: 0;
|
||||
font-size: .95rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// All list items
|
||||
li {
|
||||
|
||||
.menu-dashboard,
|
||||
.menu-quicktask {
|
||||
> a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2nd level items
|
||||
ul {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
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: $main-nav-divider-bg; /* main-nav-divider-bg: var(--template-bg-dark-60) */
|
||||
}
|
||||
|
||||
.menuitem-group {
|
||||
margin-top: .65rem;
|
||||
font-size: .75rem;
|
||||
padding-inline-start: 3rem;
|
||||
|
||||
.sidebar-item-title {
|
||||
color: $main-nav-item-title; /* main-nav-item-title: var(--template-bg-dark-30) */
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown indicator
|
||||
.has-arrow {
|
||||
.sidebar-item-title {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
content: "\f054" #{"/*!rtl:\"\f053\"*/"};
|
||||
}
|
||||
}
|
||||
|
||||
a.mm-active {
|
||||
background-color: $main-nav-mm-active-bg; /* main-nav-mm-active-bg: var(--template-bg-dark-70) */
|
||||
}
|
||||
|
||||
a.mm-active + .menu-quicktask {
|
||||
background-color: $main-nav-mm-active-quicktask-bg; /* main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60) */
|
||||
}
|
||||
|
||||
.mm-active > .has-arrow::after {
|
||||
content: "\f078";
|
||||
}
|
||||
|
||||
.mm-collapse {
|
||||
display: none;
|
||||
|
||||
&.mm-collapsed,
|
||||
&.mm-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all .35s ease;
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-self: center;
|
||||
margin: 0 .3rem .25rem;
|
||||
background-color: $main-nav-badge; /* main-nav-badge: var(--template-bg-dark-60) */
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Closed
|
||||
.closed {
|
||||
.sidebar-wrapper {
|
||||
flex: 1 0 $sidebar-width-closed;
|
||||
max-width: $sidebar-width-closed;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-item-title,
|
||||
.has-arrow::after,
|
||||
.menu-dashboard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-nav,
|
||||
.main-nav li {
|
||||
max-width: 3rem;
|
||||
}
|
||||
|
||||
.main-nav a:hover {
|
||||
position: relative;
|
||||
max-width: 3rem;
|
||||
}
|
||||
|
||||
.main-nav a:hover .sidebar-item-title {
|
||||
position: absolute;
|
||||
inset-inline-start: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
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;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
.main-nav > li > ul {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.toggler-burger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
#menu-collapse {
|
||||
display: none;
|
||||
background: $mobile-menu-collapse-bg; /* mobile-menu-collapse-bg: var(--template-bg-dark-50) */
|
||||
}
|
||||
|
||||
.toggler-burger {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-mobile-toggle;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:focus {
|
||||
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";
|
||||
color: var(--toggle-color);
|
||||
content: "\f00d";
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.navbar-toggler-icon::before {
|
||||
content: "\f0c9";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
display: none;
|
||||
|
||||
&.show,
|
||||
&.collapsing {
|
||||
position: fixed;
|
||||
bottom: 55px;
|
||||
z-index: $zindex-mobile-menu;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
max-height: calc(100vh - 72px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.sidebar-wrapper {
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
.switcher {
|
||||
.toggle-outside {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
&:focus {
|
||||
box-shadow: $input-box-shadow;
|
||||
}
|
||||
}
|
||||
input:focus ~ .toggle-outside {
|
||||
border-color: $input-focus-border-color;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
opacity: $btn-disabled-opacity;
|
||||
}
|
||||
251
media/templates/administrator/atum/scss/blocks/_toolbar.scss
Normal file
251
media/templates/administrator/atum/scss/blocks/_toolbar.scss
Normal file
@ -0,0 +1,251 @@
|
||||
.subhead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-toolbar;
|
||||
width: auto;
|
||||
min-height: 43px;
|
||||
padding: 8px 1rem;
|
||||
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;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.noshadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
joomla-toolbar-button,
|
||||
.btn-group {
|
||||
margin-inline-start: .75rem;
|
||||
|
||||
&:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
joomla-toolbar-button {
|
||||
.btn > span,
|
||||
.dropdown-item > span {
|
||||
margin-inline-end: .5rem;
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
--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(--atum-btn);
|
||||
background: var(--subhead-btn-bg);
|
||||
border: var(--subhead-btn-border);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
color: var(--subhead-btn-icon);
|
||||
}
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
color: var(--atum-btn-hvr);
|
||||
background-color: var(--subhead-btn-bg-hvr);
|
||||
border: var(--subhead-btn-border);
|
||||
|
||||
> span {
|
||||
color: var(--subhead-btn-icon-hvr); /* $atum-btn-hvr rgba(255, 255, 255, .9); */
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-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-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-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, &.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-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;
|
||||
|
||||
&::after {
|
||||
width: 2.375rem;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
content: "\f078";
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.dropdown-toggle[disabled] {
|
||||
background: var(--body-bg);
|
||||
opacity: .5;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&.btn {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group:not(:last-child) > .dropdown-toggle-split {
|
||||
order: 1;
|
||||
margin-inline-start: -$border-radius;
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
|
||||
.dropdown-menu joomla-toolbar-button,
|
||||
.btn-group joomla-toolbar-button {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.contentpane & {
|
||||
margin: -15px -15px 0;
|
||||
background-image: none;
|
||||
border-bottom: 1px solid var(--template-bg-dark-7); // TODO: unified variables for light and dark mode
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
joomla-tab[view=accordion] .col-md-9,
|
||||
joomla-tab[view=accordion] .col-md-3 {
|
||||
padding: .5rem 1rem !important;
|
||||
}
|
||||
|
||||
#myTab {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
joomla-tab[view=accordion] ul li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggler-toolbar {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
z-index: $zindex-alerts;
|
||||
padding: 7px 10px;
|
||||
margin: 5px;
|
||||
background-color: var(--template-bg-dark); // TODO: unified variables for light and dark mode
|
||||
border-radius: 30px;
|
||||
|
||||
.toggler-toolbar-icon::before {
|
||||
font: normal normal 900 28px/1 "Font Awesome 6 Free";
|
||||
color: var(--toggle-color);
|
||||
content: "\f00d";
|
||||
}
|
||||
|
||||
&.collapsed .toggler-toolbar-icon::before {
|
||||
content: "\f085";
|
||||
}
|
||||
}
|
||||
|
||||
.subhead {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
joomla-toolbar-button,
|
||||
.btn-group,
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-toolbar > .btn-group,
|
||||
.btn-toolbar > joomla-toolbar-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.btn.btn-action::after {
|
||||
text-align: center;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.dropdown-toggle-split {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
132
media/templates/administrator/atum/scss/blocks/_treeselect.scss
Normal file
132
media/templates/administrator/atum/scss/blocks/_treeselect.scss
Normal file
@ -0,0 +1,132 @@
|
||||
// Tree select
|
||||
|
||||
.treeselect {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-header {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $nav-header-color;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: $treeselect-line-height;
|
||||
list-style: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
inset-inline-start: ($treeselect-indent - 15px);
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
margin: auto;
|
||||
content: "";
|
||||
background-color: var(--treeselect-line-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: ($treeselect-indent - 15px);
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: var(--treeselect-line-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&::after {
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding-inline-start: $treeselect-indent;
|
||||
}
|
||||
}
|
||||
|
||||
> li::before,
|
||||
> li::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-,
|
||||
.#{$fa-css-prefix}- {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.treeselect-toggle {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: .1rem;
|
||||
color: var(--template-link-color);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeselect-menu {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.treeselect-item {
|
||||
display: inline-block;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
padding: 0 .5rem .3rem;
|
||||
margin-left: .5rem;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--treeselect-dropdown-toggle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeselect-sub {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.tree-holder {
|
||||
|
||||
ul ul {
|
||||
|
||||
li::before,
|
||||
li::after {
|
||||
inset-inline-start: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li::before {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
li:last-child::after {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.8rem;
|
||||
|
||||
li {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
205
media/templates/administrator/atum/scss/blocks/_utilities.scss
Normal file
205
media/templates/administrator/atum/scss/blocks/_utilities.scss
Normal file
@ -0,0 +1,205 @@
|
||||
// Utilities
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Keep B/C
|
||||
.element-invisible {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
clip-path: inset(50%);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
// Form Grid
|
||||
|
||||
.form-grid {
|
||||
--span-1: span 1;
|
||||
--span-2: span 1;
|
||||
--span-3: span 1;
|
||||
--span-4: span 1;
|
||||
--span-5: span 1;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-gap: 1rem;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
--span-2: span 2;
|
||||
--span-3: span 2;
|
||||
--span-4: span 2;
|
||||
--span-5: span 2;
|
||||
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
--span-3: span 3;
|
||||
--span-4: span 4;
|
||||
--span-5: span 5;
|
||||
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
> * {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.span-1 {
|
||||
grid-column: 1 / var(--span-1);
|
||||
|
||||
&-inline {
|
||||
grid-column: var(--span-1);
|
||||
}
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
grid-column: 1 / var(--span-2);
|
||||
|
||||
&-inline {
|
||||
grid-column: var(--span-1);
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
grid-column: var(--span-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.span-3 {
|
||||
grid-column: 1 / var(--span-3);
|
||||
|
||||
&-inline {
|
||||
grid-column: var(--span-3);
|
||||
}
|
||||
}
|
||||
|
||||
.span-4 {
|
||||
grid-column: 1 / var(--span-4);
|
||||
|
||||
&-inline {
|
||||
grid-column: var(--span-4);
|
||||
}
|
||||
}
|
||||
|
||||
.span-5 {
|
||||
grid-column: 1 / var(--span-5);
|
||||
|
||||
&-inline {
|
||||
grid-column: var(--span-5);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.w-1 {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.w-7 {
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.w-15 {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.w-35 {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.w-60 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.w-80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.editor-xtd-buttons .btn {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Visibility depend from ColorScheme
|
||||
@include color-mode(dark) {
|
||||
.d-dark-scheme-none {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include color-mode(light) {
|
||||
.d-light-scheme-none {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
// com_config
|
||||
|
||||
.com_config {
|
||||
|
||||
#fieldset-permissions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#page-filters .form-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tab-description {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.options-menu {
|
||||
.revert-controls .controls {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
.com_content.layout-edit {
|
||||
joomla-field-media .field-media-preview {
|
||||
height: 10.25rem;
|
||||
}
|
||||
|
||||
joomla-tab {
|
||||
|
||||
#attrib-basic[active],
|
||||
#editor[active] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.form-group {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
box-shadow: none;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(19) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field-spacer {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
224
media/templates/administrator/atum/scss/pages/_com_cpanel.scss
Normal file
224
media/templates/administrator/atum/scss/pages/_com_cpanel.scss
Normal file
@ -0,0 +1,224 @@
|
||||
// com_cpanel
|
||||
|
||||
.com_cpanel {
|
||||
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-group,
|
||||
.table {
|
||||
padding: 0;
|
||||
margin-bottom: unset;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-header {
|
||||
--card-bg: #{$card-bg};
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: .25em;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: $card-body-bg;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
.module-actions {
|
||||
order: 1;
|
||||
margin-inline-start: auto;
|
||||
|
||||
> * {
|
||||
padding: 0;
|
||||
color: $module-actions-color;
|
||||
}
|
||||
}
|
||||
|
||||
.cpanel-add-module {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
min-height: 130px;
|
||||
padding: 0 1rem;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--template-quickicon-color);
|
||||
background-color: var(--body-bg);
|
||||
border: 1px solid var(--body-bg);
|
||||
border-radius: $border-radius;
|
||||
transition: all .15s ease-in;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: var(--cpanel-addmodule-hover);
|
||||
}
|
||||
|
||||
> span {
|
||||
padding: .25rem 0 1rem;
|
||||
}
|
||||
|
||||
.cpanel-add-module-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--template-quickicon-color);
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cpanel-modules {
|
||||
.list-group {
|
||||
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: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
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}-"],
|
||||
&[class^="#{$fa-css-prefix}-"],
|
||||
&[class*=" #{$fa-css-prefix}-"] {
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
color: rgba(255, 255, 255, .9);
|
||||
background: var(--#{$prefix}link-color);
|
||||
box-shadow: var(--atum-box-shadow);
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}link-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item span.home-image {
|
||||
&[class^="#{$jicon-css-prefix}-"],
|
||||
&[class*=" #{$jicon-css-prefix}-"],
|
||||
&[class^="#{$fa-css-prefix}-"],
|
||||
&[class*=" #{$fa-css-prefix}-"] {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0 .85rem;
|
||||
font-size: .9rem;
|
||||
color: var(--body-color);
|
||||
box-shadow: none;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
|
||||
.mod-custom {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn:first-child:focus-visible {
|
||||
color: var(--btn-active-color);
|
||||
background-color: var(--btn-active-bg);
|
||||
border-color: var(--btn-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sample-data {
|
||||
.list-group-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sample-data__title {
|
||||
font-weight: bold;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.sample-data__icon {
|
||||
width: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sample-data__desc {
|
||||
border-inline-start: 4px solid hsl(var(--hue),50%,93%);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
// com_joomlaupdate
|
||||
|
||||
.com_joomlaupdate {
|
||||
caption {
|
||||
caption-side: top;
|
||||
}
|
||||
}
|
||||
128
media/templates/administrator/atum/scss/pages/_com_media.scss
Normal file
128
media/templates/administrator/atum/scss/pages/_com_media.scss
Normal file
@ -0,0 +1,128 @@
|
||||
:root {
|
||||
--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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
.new-modules {
|
||||
// We use the same colors for the new module section as we do for the quickicons.
|
||||
--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));
|
||||
}
|
||||
}
|
||||
|
||||
.new-module {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
color: $new-module-color;
|
||||
background-color: $new-module-bg;
|
||||
border: $new-module-border;
|
||||
border-radius: $border-radius;
|
||||
|
||||
* {
|
||||
transition: all .25s ease;
|
||||
}
|
||||
|
||||
&-details {
|
||||
flex: 1 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: .25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
&-link {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
font-size: 1.2rem;
|
||||
background: $new-module-link-bg;
|
||||
|
||||
span {
|
||||
margin-bottom: 10px;
|
||||
color: $new-module-link-span;
|
||||
}
|
||||
|
||||
.new-module:hover & {
|
||||
background: $new-module-link-hvr;
|
||||
|
||||
span {
|
||||
color: $new-module-link-span-hvr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// com-privacy
|
||||
|
||||
.tbody-icon {
|
||||
.#{$jicon-css-prefix}-download,
|
||||
.#{$fa-css-prefix}-download {
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-mail,
|
||||
.#{$fa-css-prefix}-mail {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.#{$jicon-css-prefix}-delete,
|
||||
.#{$fa-css-prefix}-delete,
|
||||
.#{$jicon-css-prefix}-times,
|
||||
.#{$fa-css-prefix}-times {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
.new-tasks {
|
||||
// We use the same colours for the new task section as we do for the quickicons.
|
||||
--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));
|
||||
}
|
||||
}
|
||||
|
||||
.new-task {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
border: $quickicon-border;
|
||||
border-radius: $border-radius;
|
||||
|
||||
* {
|
||||
transition: all .25s ease;
|
||||
}
|
||||
|
||||
&-details {
|
||||
flex: 1 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: .25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
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: $quickicon-linkadd-bg;
|
||||
|
||||
span {
|
||||
margin-bottom: 10px;
|
||||
color: var(--quickicon-linkadd-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--template-bg-dark);
|
||||
|
||||
span {
|
||||
color: var(--icon-color-hvr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
media/templates/administrator/atum/scss/pages/_com_tags.scss
Normal file
22
media/templates/administrator/atum/scss/pages/_com_tags.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.com_tags {
|
||||
|
||||
#fieldset-image-intro,
|
||||
#fieldset-image-fulltext {
|
||||
> div {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
|
||||
#fieldset-image-intro {
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
|
||||
#fieldset-image-fulltext {
|
||||
margin-inline-start: 15px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
// com_templates
|
||||
.com_templates {
|
||||
|
||||
.menu-assignment {
|
||||
position: relative;
|
||||
|
||||
.menu-links {
|
||||
padding-left: 0;
|
||||
margin-top: 15px;
|
||||
margin-left: 0;
|
||||
column-count: 3;
|
||||
column-gap: 15px;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
vertical-align: top;
|
||||
list-style: none;
|
||||
backface-visibility: hidden;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-links-block {
|
||||
padding: 15px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
--heading-color: var(--body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
padding: 3px 0;
|
||||
font-size: inherit;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail > img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
103
media/templates/administrator/atum/scss/pages/_com_users.scss
Normal file
103
media/templates/administrator/atum/scss/pages/_com_users.scss
Normal file
@ -0,0 +1,103 @@
|
||||
// com_users
|
||||
|
||||
.com_users {
|
||||
|
||||
&.view-debuggroup,
|
||||
&.view-debuguser {
|
||||
|
||||
thead th {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin: 1rem 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.view-mail {
|
||||
|
||||
.form-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.view-user, &.view-methods, &.view-captive {
|
||||
#com-users-methods-reset-container {
|
||||
background-color: $users-methods-reset-cont-bg;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method {
|
||||
@extend .card;
|
||||
@extend .mx-1;
|
||||
@extend .mt-3;
|
||||
@extend .mb-4;
|
||||
|
||||
&.com-users-methods-list-method-active {
|
||||
@extend .border-secondary;
|
||||
|
||||
.com-users-methods-list-method-title h3 {
|
||||
@extend .text-white;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-header {
|
||||
@extend .border-secondary;
|
||||
@extend .bg-secondary;
|
||||
@extend .text-white;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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: $users-method-header-inact-bg;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-header {
|
||||
@extend .align-items-center;
|
||||
@extend .gap-2;
|
||||
@extend .flex-wrap;
|
||||
@extend .d-flex;
|
||||
@extend .card-header;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-image {
|
||||
@extend .pt-1;
|
||||
@extend .px-3;
|
||||
@extend .pb-2;
|
||||
@extend .rounded-2;
|
||||
|
||||
background-color: $users-method-image;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-title {
|
||||
@extend .flex-grow-1;
|
||||
@extend .d-flex;
|
||||
@extend .flex-column;
|
||||
|
||||
h3 {
|
||||
@extend .fs-2;
|
||||
@extend .p-0;
|
||||
@extend .m-0;
|
||||
@extend .d-flex;
|
||||
@extend .gap-3;
|
||||
@extend .align-items-center;
|
||||
}
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-records-container {
|
||||
@extend .card-body;
|
||||
}
|
||||
|
||||
.com-users-methods-list-method-info {
|
||||
@extend .my-1;
|
||||
@extend .pb-1;
|
||||
@extend .text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#fieldset-groups {
|
||||
.controls {
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.com-apps-container .grid-container .card:hover,
|
||||
.com-apps-container .list-container .list-group-item:hover {
|
||||
background-color: var(--gray-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
@import "../../variables";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins";
|
||||
|
||||
// Search tools
|
||||
|
||||
.js-stools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.js-stools-container-bar,
|
||||
.js-stools-container-filters {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.js-stools-container-bar {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.btn-toolbar {
|
||||
justify-content: flex-end;
|
||||
|
||||
> * {
|
||||
margin: 5px 0;
|
||||
|
||||
+ * {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.js-stools-btn-clear {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ordering-select {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.js-stools-container-filters {
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
||||
&-visible {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
padding: 10px;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.js-stools-field-list {
|
||||
+ .js-stools-field-list {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.js-stools-container-selector {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
// This file is a placeholder for the rtl template. That means it is required and should not be deleted.
|
||||
@import "template";
|
||||
245
media/templates/administrator/atum/scss/template.scss
Normal file
245
media/templates/administrator/atum/scss/template.scss
Normal file
@ -0,0 +1,245 @@
|
||||
// Bootstrap functions
|
||||
@import "../../../../vendor/bootstrap/scss/functions";
|
||||
|
||||
// Atum Variables
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
|
||||
@import "../../../../vendor/bootstrap/scss/variables";
|
||||
@import "../../../../vendor/bootstrap/scss/variables-dark";
|
||||
@import "../../../../vendor/bootstrap/scss/maps";
|
||||
@import "maps-atum";
|
||||
@import "../../../../vendor/bootstrap/scss/mixins";
|
||||
@import "../../../../vendor/bootstrap/scss/utilities";
|
||||
|
||||
// Bootstrap other
|
||||
@import "../../../../vendor/bootstrap/scss/bootstrap";
|
||||
|
||||
// Fonts
|
||||
@import "../../../../vendor/roboto-fontface/scss/roboto/sass/roboto-fontface";
|
||||
|
||||
@import "blocks/global"; // Leave this first
|
||||
|
||||
// jQuery Minicolors
|
||||
@import "../../../../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";
|
||||
@import "vendor/bootstrap/custom-forms";
|
||||
@import "vendor/bootstrap/collapse";
|
||||
@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";
|
||||
@import "vendor/bootstrap/table";
|
||||
|
||||
// Blocks
|
||||
@import "blocks/alerts";
|
||||
@import "blocks/calendar";
|
||||
@import "blocks/edit";
|
||||
@import "blocks/header";
|
||||
@import "blocks/form";
|
||||
@import "blocks/icons";
|
||||
@import "blocks/iframe";
|
||||
@import "blocks/layout";
|
||||
@import "blocks/login";
|
||||
@import "blocks/modals";
|
||||
@import "blocks/quickicons";
|
||||
@import "blocks/lists";
|
||||
@import "blocks/shepard-modals";
|
||||
@import "blocks/sidebar";
|
||||
@import "blocks/sidebar-nav";
|
||||
@import "blocks/switcher";
|
||||
@import "blocks/toolbar";
|
||||
@import "blocks/treeselect";
|
||||
@import "blocks/utilities";
|
||||
|
||||
// These DO NOT BELONG HERE!!!
|
||||
@import "vendor/codemirror";
|
||||
@import "vendor/dragula";
|
||||
@import "vendor/tinymce";
|
||||
|
||||
// Also these DO NOT BELONG HERE!!!
|
||||
// Page specifics
|
||||
@import "pages/com_config";
|
||||
@import "pages/com_content";
|
||||
@import "pages/com_cpanel";
|
||||
@import "pages/com_joomlaupdate";
|
||||
@import "pages/com_media";
|
||||
@import "pages/com_modules";
|
||||
@import "pages/com_tags";
|
||||
@import "pages/com_privacy";
|
||||
@import "pages/com_scheduler";
|
||||
@import "pages/com_templates";
|
||||
@import "pages/com_users";
|
||||
@import "pages/plg_web_installer";
|
||||
|
||||
// Custom Atum colors
|
||||
:root {
|
||||
@each $color, $value in $atum-colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// Check if dark mode is enabled
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark, true) {
|
||||
@each $color, $value in $atum-colors-dark {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forcing reduced motion when set in the user OS
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, ::before, ::after {
|
||||
background-attachment: initial !important;
|
||||
transition-delay: 0s !important;
|
||||
// temp fix until https://github.com/onokumus/metismenujs/issues/9 is addressed
|
||||
transition-duration: .001ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-delay: -1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap 5.2 overrides
|
||||
.border-primary {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.border-success {
|
||||
border-color: var(--success) !important;
|
||||
}
|
||||
|
||||
.border-info {
|
||||
border-color: var(--info) !important;
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
border-color: var(--warning) !important;
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.border-light {
|
||||
border-color: var(--light) !important;
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border-color: var(--white) !important;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success) !important;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: var(--info) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning) !important;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: var(--light) !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: var(--black) !important;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
color: var(--body-color) !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: var(--success) !important;
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background-color: var(--info) !important;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
color: #000;
|
||||
background-color: var(--warning) !important;
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: var(--black) !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: var(--white) !important;
|
||||
}
|
||||
|
||||
.bg-body {
|
||||
background-color: var(--body-bg) !important;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: .2rem .4rem;
|
||||
}
|
||||
19
media/templates/administrator/atum/scss/vendor/_codemirror.scss
vendored
Normal file
19
media/templates/administrator/atum/scss/vendor/_codemirror.scss
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
// Codemirror
|
||||
|
||||
joomla-editor-codemirror.fullscreen {
|
||||
top: 133px;
|
||||
|
||||
.cm-editor {
|
||||
height: calc(90vh - 133px) !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
top: 54px;
|
||||
z-index: 890;
|
||||
|
||||
.cm-editor {
|
||||
height: 100vh !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
30
media/templates/administrator/atum/scss/vendor/_dragula.scss
vendored
Normal file
30
media/templates/administrator/atum/scss/vendor/_dragula.scss
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
// Dragula
|
||||
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-popover !important;
|
||||
display: table;
|
||||
margin: 0 !important;
|
||||
color: var(--drag-color) !important;
|
||||
cursor: move;
|
||||
background-color: var(--drag-background-color);
|
||||
opacity: .8;
|
||||
|
||||
td, th {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.js-draggable .sortable-handler {
|
||||
cursor: move;
|
||||
}
|
||||
73
media/templates/administrator/atum/scss/vendor/_tinymce.scss
vendored
Normal file
73
media/templates/administrator/atum/scss/vendor/_tinymce.scss
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
// TinyMCE
|
||||
|
||||
.editor {
|
||||
|
||||
.toggle-editor {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mce-tinymce {
|
||||
border: 1px solid var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.mce-btn,
|
||||
.mce-panel {
|
||||
background: var(--white-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.tox-fullscreen {
|
||||
z-index: $zindex-modal-backdrop - 1 !important;
|
||||
}
|
||||
|
||||
.container-main {
|
||||
.mce-panel {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mce-top-part {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-menubar .mce-menubtn {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.mce-flow-layout-item {
|
||||
margin: 2px 8px 2px 0;
|
||||
}
|
||||
|
||||
.mce-btn-group {
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-right: 6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mce-btn {
|
||||
margin: 0 1px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mce-statusbar .mce-container-body {
|
||||
background-color: $white;
|
||||
border-top: var(--template-bg-light) 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Add a toolbar separator for the groups
|
||||
.tox-toolbar__group:not(:last-of-type) {
|
||||
border-inline-end: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
// Adjust the border radius for the editor
|
||||
.tox-tinymce {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
6
media/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss
vendored
Normal file
6
media/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
// Awesomplete
|
||||
@import "../../../../../../vendor/awesomplete/css/awesomplete";
|
||||
|
||||
.awesomplete {
|
||||
display: block;
|
||||
}
|
||||
9
media/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss
vendored
Normal file
9
media/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
13
media/templates/administrator/atum/scss/vendor/bootstrap/_badge.scss
vendored
Normal file
13
media/templates/administrator/atum/scss/vendor/bootstrap/_badge.scss
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// Badge
|
||||
|
||||
.badge {
|
||||
@include media-breakpoint-down(md) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&.bg-secondary {
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
110
media/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss
vendored
Normal file
110
media/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss
vendored
Normal file
@ -0,0 +1,110 @@
|
||||
// Buttons
|
||||
|
||||
.btn {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.btn {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.input-group .btn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
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: $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: $btn-primary-toggle-bg; /* var(--template-bg-dark); */
|
||||
border-color: $btn-primary-toggle-border; /* var(--template-bg-dark); */
|
||||
}
|
||||
}
|
||||
|
||||
.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: $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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
media/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
vendored
Normal file
45
media/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
vendored
Normal file
@ -0,0 +1,45 @@
|
||||
// Card
|
||||
|
||||
// Backport Bootstrap 4 card-columns
|
||||
.card-columns {
|
||||
.card {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
column-count: 3;
|
||||
column-gap: 1.25rem;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.card {
|
||||
background: var(--card-body-bg);
|
||||
box-shadow: var(--atum-box-shadow);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem .75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--card-header-color);
|
||||
background-color: var(--card-bg);
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> [class^="icon-"],
|
||||
> img {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
media/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss
vendored
Normal file
28
media/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss
vendored
Normal file
@ -0,0 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
83
media/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss
vendored
Normal file
83
media/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss
vendored
Normal file
@ -0,0 +1,83 @@
|
||||
// Custom Forms
|
||||
|
||||
.custom-select {
|
||||
@extend .form-select;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
max-width: $input-max-width;
|
||||
cursor: pointer;
|
||||
background: $form-select-background;
|
||||
border: $form-select-border;
|
||||
|
||||
[dir="rtl"] & {
|
||||
background: $form-select-background-rtl;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
padding: 0;
|
||||
|
||||
option {
|
||||
padding: $form-select-multiple-padding-y $form-select-padding-x;
|
||||
|
||||
&:checked {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-contrast) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Archived State has a green border instead blue
|
||||
|
||||
&.form-select-success,
|
||||
&.custom-select-success {
|
||||
color: var(--success-text);
|
||||
background-color: var(--success);
|
||||
border-color: var(--success);
|
||||
|
||||
option {
|
||||
color: $form-select-color;
|
||||
background-color: $form-select-success-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-select-danger,
|
||||
&.custom-select-danger {
|
||||
color: var(--danger-text);
|
||||
background-color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
|
||||
option {
|
||||
color: $form-select-color;
|
||||
background-color: $form-select-danger-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
background-color: $form-select-disabled-bg;
|
||||
background-image: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
optgroup,
|
||||
option {
|
||||
color: $form-select-option;
|
||||
background-color: var(--body-bg);
|
||||
|
||||
&:disabled {
|
||||
background-color: $form-select-option-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.form-select:disabled, .custom-select:disabled {
|
||||
border: map-get($atum-colors-dark, "form-control-border-disabled");
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
media/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss
vendored
Normal file
88
media/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
// Dropdown
|
||||
|
||||
.btn-group .dropdown-menu {
|
||||
min-width: 100%;
|
||||
background: var(--body-bg);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
|
||||
joomla-toolbar-button {
|
||||
text-align: start;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: var(--atum-box-shadow);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
text-align: start;
|
||||
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);
|
||||
}
|
||||
|
||||
.btn-secondary + .dropdown-menu & {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-danger + .dropdown-menu & {
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.btn-info + .dropdown-menu & {
|
||||
background-color: var(--info);
|
||||
}
|
||||
|
||||
.dropdown-status-group .dropdown-menu &:not(.disabled) {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.dropdown-save-group .dropdown-menu &:not(.disabled) {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
+ .dropdown-item {
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.dropdown-status-group .dropdown-menu &:not(.disabled) {
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
.dropdown-save-group .dropdown-menu &:not(.disabled) {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
&.first:not(.last) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.last:not(.first) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(.first):not(.last):not(:only-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.dropdown-divider {
|
||||
border-top: map-get($atum-colors-dark, "dropdown-divider-bg");
|
||||
}
|
||||
}
|
||||
}
|
||||
104
media/templates/administrator/atum/scss/vendor/bootstrap/_form.scss
vendored
Normal file
104
media/templates/administrator/atum/scss/vendor/bootstrap/_form.scss
vendored
Normal file
@ -0,0 +1,104 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Form
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&::placeholder {
|
||||
font-size: .8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
td .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin-bottom: 1.1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
padding-top: 5px;
|
||||
|
||||
.checkbox input {
|
||||
position: static;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Validation
|
||||
.invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.valid {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[aria-grabbed="true"] {
|
||||
box-shadow: $form-aria-grabbed-box-shadow;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
background-color: $form-select-bg;
|
||||
}
|
||||
|
||||
.field-media-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: calc(50vw - 5rem);
|
||||
|
||||
.field-media-preview {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.button-select {
|
||||
background-color: color.adjust($success, $lightness: -8%);
|
||||
}
|
||||
|
||||
.button-clear {
|
||||
background-color: color.adjust($danger, $lightness: -8%);
|
||||
}
|
||||
|
||||
.button-clear > .#{$fa-css-prefix}-check,
|
||||
.button-select > .#{$fa-css-prefix}-times {
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap 4 b/c
|
||||
.form-inline .form-select, .form-inline .custom-select, .form-inline .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.form-inline .form-select, .form-inline .custom-select, .form-inline .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
31
media/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss
vendored
Normal file
31
media/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
5
media/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
vendored
Normal file
5
media/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
// Lists
|
||||
|
||||
.list-unstyled .list-unstyled {
|
||||
padding-left: 20px;
|
||||
}
|
||||
108
media/templates/administrator/atum/scss/vendor/bootstrap/_modal.scss
vendored
Normal file
108
media/templates/administrator/atum/scss/vendor/bootstrap/_modal.scss
vendored
Normal file
@ -0,0 +1,108 @@
|
||||
// Modal
|
||||
|
||||
.jviewport-height {
|
||||
&10 {
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
&20 {
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
&30 {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
&40 {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
&50 {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
&60 {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
&70 {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
&80 {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
&90 {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
&100 {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
[class*=jviewport-height] iframe {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal-dialog.jviewport-width {
|
||||
&10 {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
&20 {
|
||||
width: 20vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&30 {
|
||||
width: 30vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&40 {
|
||||
width: 40vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&50 {
|
||||
width: 50vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&60 {
|
||||
width: 60vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&70 {
|
||||
width: 70vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&80 {
|
||||
width: 80vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&90 {
|
||||
width: 90vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&100 {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 1.75rem auto;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
11
media/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss
vendored
Normal file
11
media/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
// Pagination
|
||||
|
||||
.pagination {
|
||||
margin: 1rem;
|
||||
|
||||
.page-link.active, .active > .page-link {
|
||||
background-color: var(--btn-primary-bg);
|
||||
border-color: var(--btn-primary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
8
media/templates/administrator/atum/scss/vendor/bootstrap/_reboot.scss
vendored
Normal file
8
media/templates/administrator/atum/scss/vendor/bootstrap/_reboot.scss
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
// Matches default `<td>` alignment by inheriting `text-align`.
|
||||
// 1. Fix alignment for Safari
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
/* stylelint-disable-next-line */
|
||||
text-align: -webkit-match-parent; // 1
|
||||
}
|
||||
119
media/templates/administrator/atum/scss/vendor/bootstrap/_table.scss
vendored
Normal file
119
media/templates/administrator/atum/scss/vendor/bootstrap/_table.scss
vendored
Normal file
@ -0,0 +1,119 @@
|
||||
// Table
|
||||
|
||||
.table {
|
||||
|
||||
> :not(caption) > * > * {
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
.sysinfo & {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
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: $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)));
|
||||
}
|
||||
}
|
||||
|
||||
.actions,
|
||||
.actions-th1 {
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 28%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemnumber a.btn,
|
||||
.itemnumber span.btn {
|
||||
padding: .1rem .5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $medium-weight;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.inactive [class^="#{$jicon-css-prefix}-"],
|
||||
.inactive [class*=" #{$jicon-css-prefix}-"],
|
||||
.inactive [class^="#{$fa-css-prefix}-"],
|
||||
.inactive [class*=" #{$fa-css-prefix}-"] {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.j-main-container > & {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
241
media/templates/administrator/atum/scss/vendor/choicesjs/choices.scss
vendored
Normal file
241
media/templates/administrator/atum/scss/vendor/choicesjs/choices.scss
vendored
Normal file
@ -0,0 +1,241 @@
|
||||
@import "../../../../../../vendor/bootstrap/scss/functions";
|
||||
|
||||
// Atum Variables
|
||||
@import "../../variables";
|
||||
@import "../../variables-dark";
|
||||
|
||||
@import "../../../../../../vendor/bootstrap/scss/variables";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins";
|
||||
|
||||
// choices.js
|
||||
@import "../../../../../../vendor/choicesjs/scss/choices";
|
||||
|
||||
.choices {
|
||||
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);
|
||||
|
||||
&.is-focused {
|
||||
border-color: $form-select-focus-border-color;
|
||||
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
min-height: 42px;
|
||||
padding: .1rem 1rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $choices-input-placeholder; // $gray-700; // var(--gray-200);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
z-index: $zindex-popover;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
padding: 7px 16px 0 4px;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
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;
|
||||
|
||||
&.is-highlighted {
|
||||
background-color: var(--template-bg-dark);
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.choices__list--multiple .choices__item {
|
||||
&.is-highlighted {
|
||||
background-color: var(--gray-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices .choices__list--dropdown {
|
||||
background-color: var(--body-bg);
|
||||
|
||||
.choices__item {
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
|
||||
.choices__item--selectable {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.choices .choices__list--dropdown {
|
||||
.choices__item--selectable {
|
||||
&.is-highlighted {
|
||||
background-color: var(--gray-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices__button_joomla {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
color: inherit;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: .5;
|
||||
appearance: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
content: "\00d7";
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"],
|
||||
.choices[data-type*="select-multiple"] {
|
||||
.choices__inner {
|
||||
padding-inline-end: $form-select-indicator-padding;
|
||||
cursor: pointer;
|
||||
background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
|
||||
background-color: $form-select-bg;
|
||||
|
||||
[dir="rtl"] & {
|
||||
background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
|
||||
background-color: $form-select-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.choices[data-type*="select-one"],
|
||||
.choices[data-type*="select-multiple"] {
|
||||
.choices__inner {
|
||||
background: url("../../../images/select-bg-dark.svg") no-repeat 100%/116rem;
|
||||
background-color: $form-select-bg-dark;
|
||||
|
||||
[dir="rtl"] & {
|
||||
background: url("../../../images/select-bg-rtl-dark.svg") no-repeat 0/116rem;
|
||||
background-color: $form-select-bg-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
[dir="rtl"][data-bs-theme="dark"] {
|
||||
.choices[data-type*="select-one"],
|
||||
.choices[data-type*="select-multiple"] {
|
||||
.choices__inner {
|
||||
background: url("../../../images/select-bg-rtl-dark.svg") no-repeat 0/116rem;
|
||||
background-color: $form-select-bg-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] {
|
||||
.choices__input {
|
||||
background-color: $choices-input-bg; // var(--body-bg)/var(--gray-600)
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.choices__button_joomla {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin-block-start: -10px;
|
||||
margin-inline-end: 50px;
|
||||
border-radius: 10em;
|
||||
opacity: .5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: $choices__button_joomla-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.choices[data-type*="select-multiple"],
|
||||
.choices[data-type*="text"] {
|
||||
.choices__input {
|
||||
padding: .35rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.choices__heading {
|
||||
color: var(--gray-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
36
media/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss
vendored
Normal file
36
media/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
// Override the font path
|
||||
$fa-css-prefix: fa;
|
||||
$fa-font-path: "../../../../../../vendor/fontawesome-free/webfonts" !default;
|
||||
|
||||
// Font Awesome 6 Free
|
||||
@import "../../../../../../vendor/fontawesome-free/scss/fontawesome";
|
||||
@import "../../../../../../vendor/fontawesome-free/scss/regular";
|
||||
@import "../../../../../../vendor/fontawesome-free/scss/solid";
|
||||
|
||||
// Brands must be imported last
|
||||
@import "../../../../../../vendor/fontawesome-free/scss/brands";
|
||||
|
||||
// B/C with Font Awesome 5
|
||||
@import "../../../../../../vendor/fontawesome-free/scss/shims";
|
||||
|
||||
// B/C for Icomoon
|
||||
@import "../../../../../../system/scss/icomoon";
|
||||
|
||||
// RTL override
|
||||
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);
|
||||
}
|
||||
}
|
||||
180
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
vendored
Normal file
180
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
vendored
Normal file
@ -0,0 +1,180 @@
|
||||
@import "../../variables";
|
||||
@import "../../variables-dark";
|
||||
@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins/color-mode";
|
||||
|
||||
// The following is a restyle for the system alerts
|
||||
|
||||
#system-message-container joomla-alert {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 16rem;
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
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));
|
||||
a {
|
||||
color: var(--state-success-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&[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));
|
||||
a {
|
||||
color: var(--state-info-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&[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));
|
||||
a {
|
||||
color: var(--state-warning-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&[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));
|
||||
a {
|
||||
color: var(--state-danger-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: .8rem;
|
||||
line-height: normal;
|
||||
color: #fff;
|
||||
background: var(--alert-heading-bg);
|
||||
align-content: center;
|
||||
|
||||
.message::before,
|
||||
.success::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-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"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.notice::before,
|
||||
.info::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.warning::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(0, 0, 0, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.error::before,
|
||||
.danger::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
font-weight: normal;
|
||||
color: var(--states-link-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.joomla-alert--close,
|
||||
.joomla-alert-button--close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
padding: .75rem .8rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1rem;
|
||||
color: var(--alert-accent-color);
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 1rem;
|
||||
.alert-message {
|
||||
padding: .15rem .3rem;
|
||||
padding-inline-end: 2rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.alert-message:not(:first-of-type) {
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
357
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
vendored
Normal file
357
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
vendored
Normal file
@ -0,0 +1,357 @@
|
||||
@import "../../../../../../vendor/bootstrap/scss/functions";
|
||||
|
||||
// Atum Variables
|
||||
@import "../../variables";
|
||||
|
||||
@import "../../../../../../vendor/bootstrap/scss/variables";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins";
|
||||
|
||||
// Tabs
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
joomla-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&[orientation=horizontal]:not([view=accordion]) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&[orientation=horizontal]:not([view=accordion]) > div[role=tablist] {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> div[role=tablist] {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
list-style: outside none none;
|
||||
border-bottom: $joomla-tablist-border-bottom; // 1px solid var(--template-bg-dark-10);
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: .6rem 1rem;
|
||||
text-decoration: none;
|
||||
background-color: var(--body-bg);
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:first-of-type,
|
||||
&[aria-expanded=true]:first-of-type {
|
||||
border-start-start-radius: .25rem;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[aria-expanded=true],
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $joomla-tab-btn-hvr;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background-color: var(--btn-primary-bg);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-hvr-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded=true] {
|
||||
font-weight: $font-weight-bold;
|
||||
background: $joomla-tab-btn-aria-exp-bg;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> button[role=region] {
|
||||
width: 100%;
|
||||
padding: .7rem;
|
||||
color: var(--template-text-light);
|
||||
text-align: start;
|
||||
background-color: var(--template-link-color);
|
||||
border: $joomla-tab-btn-region-border;
|
||||
border-top: 0;
|
||||
|
||||
&[aria-expanded=true],
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
--gutter-x: 2rem;
|
||||
display: none;
|
||||
padding: 30px 2vw;
|
||||
background-color: var(--body-bg);
|
||||
border: 0;
|
||||
border-radius: .25rem;
|
||||
box-shadow: none;
|
||||
|
||||
&[active] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-card-columns > * > & {
|
||||
height: 100%;
|
||||
border-left: $main-card-col-border-left; // 1px solid var(--template-bg-dark-10);
|
||||
}
|
||||
}
|
||||
|
||||
joomla-tab[orientation=vertical] {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
|
||||
> div[role=tablist] {
|
||||
flex: 0 0 25%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 25%;
|
||||
max-width: 25%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: $joomla-tab-tablist-border; // 1px solid $gray-300;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> button[role=tab] {
|
||||
text-align: start;
|
||||
|
||||
&[aria-expanded=true] {
|
||||
color: $joomla-tablist-btn-aria-exp; // var(--template-text-light);
|
||||
background-color: $joomla-tablist-btn-aria-exp-bg; // var(--template-bg-dark-60);
|
||||
}
|
||||
}
|
||||
|
||||
> button[role=tab]:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .75em 1em;
|
||||
margin: -1px 0;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid transparent;
|
||||
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: $joomla-tablist-btn-aria-exp-bg; // var(--template-bg-dark-60);
|
||||
background-image: none;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: auto;
|
||||
background-color: $joomla-tablist-btn-aria-exp-aft-bg; // var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-hvr-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
width: 100%;
|
||||
padding: $grid-gutter-width-s 0 $grid-gutter-width-s $grid-gutter-width-s;
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
joomla-tab[view=accordion] {
|
||||
flex-direction: column;
|
||||
white-space: normal;
|
||||
border-radius: 0;
|
||||
box-shadow: $joomla-tab-accordion-box-shadow;
|
||||
|
||||
> div[role=tablist] {
|
||||
background-color: $white;
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .75em 1em;
|
||||
color: var(--template-text-light);
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
border-bottom: $joomla-tab-vert-border-bottom; // 1px solid $gray-300;
|
||||
box-shadow: none;
|
||||
|
||||
&[aria-expanded=true]::after,
|
||||
&:hover::after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
display: block;
|
||||
width: calc(100% + 2px);
|
||||
height: 5px;
|
||||
content: "";
|
||||
background-color: var(--template-bg-dark);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
|
||||
&[active] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-bottom: $joomla-tab-vert-border-bottom; // 1px solid $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
[active],
|
||||
[aria-expanded=true] {
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
.col-md-6,
|
||||
.col-md-9,
|
||||
.col-md-3 {
|
||||
padding: .5rem 0 0 !important;
|
||||
}
|
||||
|
||||
#permissions-sliders > joomla-tab-element[active] {
|
||||
padding: 0 !important;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
[dir=ltr] & .respTable {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir=rtl] & .respTable {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.respTable, .respTable thead, .respTable tbody, .respTable tr, .respTable th, .respTable td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.respTable thead {
|
||||
position: absolute;
|
||||
top: -1111px;
|
||||
left: -1111px;
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
.respTable td::before {
|
||||
font-weight: $bold-weight;
|
||||
content: attr(data-label) ":";
|
||||
|
||||
[dir=ltr] & {
|
||||
float: left;
|
||||
padding: 0 2em 0 0;
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
float: right;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
.respTable td:nth-child(1) {
|
||||
font-weight: $bold-weight;
|
||||
}
|
||||
|
||||
.respTable td:last-child {
|
||||
border-bottom: $respTable-border-bottom; // 1em var(--template-bg-dark-80) solid;
|
||||
}
|
||||
|
||||
.oddCol {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
17
media/templates/administrator/atum/scss/vendor/minicolors/minicolors.scss
vendored
Normal file
17
media/templates/administrator/atum/scss/vendor/minicolors/minicolors.scss
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
// Minicolours
|
||||
@import "../../../../../../vendor/minicolors/css/jquery.minicolors";
|
||||
|
||||
.minicolors-theme-bootstrap {
|
||||
|
||||
.minicolors-input {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.rgb {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.rgba {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user