joomla/cms
29
0
Fork 0
mirror of https://github.com/joomla/joomla-cms.git synced 2024-06-26 07:13:21 +00:00
Code Packages Releases Activity

[5.1] Dark Mode Improvement (#42986)

Browse Source 
Co-authored-by: Martin Carl Kopp <6154099+MacJoom@users.noreply.github.com>
This commit is contained in:
Elisa Foltyn 2024-03-11 01:58:21 +01:00 committed by GitHub
parent fba52f5c70
commit 985b17473a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
78 changed files with 2755 additions and 1051 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
administrator/components/com_associations/src/Helper/AssociationsHelper.php
View File

@ -296,7 +296,7 @@ class AssociationsHelper extends ContentHelper
$title = Text::_('COM_ASSOCIATIONS_NO_ASSOCIATION');
$additional = $addLink ? Text::_('COM_ASSOCIATIONS_ADD_NEW_ASSOCIATION') : '';
$labelClass = 'bg-warning text-dark';
$labelClass = 'bg-warning';
$target = $langCode . ':0:add';
$allow = $canCreate;
}

2
administrator/components/com_banners/tmpl/clients/default.php
View File

@ -152,7 +152,7 @@ $params = $this->state->get('params') ?? new Registry();
</div>
</td>
<td class="text-center btns d-none d-md-table-cell itemnumber">
<a class="btn <?php echo ($item->count_archived > 0) ? 'btn-info' : 'btn-secondary'; ?>" href="<?php echo Route::_('index.php?option=com_banners&view=banners&filter[client_id]=' . (int) $item->id . '&filter[published]=2'); ?>"
<a class="btn <?php echo ($item->count_archived > 0) ? 'btn-primary' : 'btn-secondary'; ?>" href="<?php echo Route::_('index.php?option=com_banners&view=banners&filter[client_id]=' . (int) $item->id . '&filter[published]=2'); ?>"
aria-describedby="tip-archived<?php echo $i; ?>">
<?php echo $item->count_archived; ?>
</a>

2
administrator/components/com_content/tmpl/articles/default.php
View File

@ -362,7 +362,7 @@ $assoc = Associations::isEnabled();
</span>
</td>
<td class="d-none d-md-table-cell text-center">
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<?php echo (int) $item->rating; ?>
</span>
</td>

2
administrator/components/com_content/tmpl/featured/default.php
View File

@ -358,7 +358,7 @@ $assoc = Associations::isEnabled();
</span>
</td>
<td class="d-none d-md-table-cell text-center">
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<?php echo (int) $item->rating; ?>
</span>
</td>

2
administrator/components/com_finder/tmpl/maps/default.php
View File

@ -114,7 +114,7 @@ $wa->useScript('com_finder.maps')
<?php if ($item->rgt - $item->lft > 1) : ?>
<a href="<?php echo Route::_('index.php?option=com_finder&view=maps&filter[branch]=' . $item->id); ?>"
aria-describedby="tip-map<?php echo $i; ?>">
<span class="btn btn-info"><?php echo floor(($item->rgt - $item->lft) / 2); ?></span>
<span class="btn btn-primary"><?php echo floor(($item->rgt - $item->lft) / 2); ?></span>
</a>
<div role="tooltip" id="tip-map<?php echo $i; ?>">
<?php echo Text::_('COM_FINDER_HEADING_CHILDREN'); ?>

2
administrator/components/com_installer/tmpl/database/default.php
View File

@ -97,7 +97,7 @@ $listDirection = $this->escape($this->state->get('list.direction'));
<?php echo $extension->type_translated; ?>
</td>
<td>
<span class="badge bg-<?php echo count($item['results']['error']) ? 'danger' : ($item['errorsCount'] ? 'warning text-dark' : 'success'); ?>" tabindex="0">
<span class="badge bg-<?php echo count($item['results']['error']) ? 'danger' : ($item['errorsCount'] ? 'warning' : 'success'); ?>" tabindex="0">
<?php echo Text::plural('COM_INSTALLER_MSG_DATABASE_ERRORS', $item['errorsCount']); ?>
</span>
<div role="tooltip" id="tip<?php echo $i; ?>">

2
administrator/components/com_installer/tmpl/languages/default.php
View File

@ -93,7 +93,7 @@ $listDirn = $this->escape($this->state->get('list.direction'));
<?php $minorVersion = $version::MAJOR_VERSION . '.' . $version::MINOR_VERSION; ?>
<?php // Display a Note if language pack version is not equal to Joomla version ?>
<?php if (strpos($language->version, $minorVersion) !== 0 || strpos($language->version, $currentShortVersion) !== 0) : ?>
<span class="badge bg-warning text-dark"><?php echo $language->version; ?></span>
<span class="badge bg-warning"><?php echo $language->version; ?></span>
<span class="icon-info-circle" aria-hidden="true" tabindex="0"></span>
<div role="tooltip" class="text-start" id="tip<?php echo $language->code; ?>">
<?php echo Text::_('JGLOBAL_LANGUAGE_VERSION_NOT_PLATFORM'); ?>

2
administrator/components/com_installer/tmpl/update/default.php
View File

@ -113,7 +113,7 @@ $listDirn = $this->escape($this->state->get('list.direction'));
<?php echo $item->type_translated; ?>
</td>
<td>
<span class="badge bg-warning text-dark"><?php echo $item->current_version; ?></span>
<span class="badge bg-warning"><?php echo $item->current_version; ?></span>
</td>
<td>
<span class="badge bg-success"><?php echo $item->version; ?></span>

2
administrator/components/com_languages/tmpl/installed/default.php
View File

@ -109,7 +109,7 @@ $listDirn = $this->escape($this->state->get('list.direction'));
<?php $minorVersion = $version::MAJOR_VERSION . '.' . $version::MINOR_VERSION; ?>
<?php // Display a Note if language pack version is not equal to Joomla version ?>
<?php if (strpos($row->version, $minorVersion) !== 0 || strpos($row->version, $currentShortVersion) !== 0) : ?>
<span class="badge bg-warning text-dark" title="<?php echo Text::_('JGLOBAL_LANGUAGE_VERSION_NOT_PLATFORM'); ?>"><?php echo $row->version; ?></span>
<span class="badge bg-warning" title="<?php echo Text::_('JGLOBAL_LANGUAGE_VERSION_NOT_PLATFORM'); ?>"><?php echo $row->version; ?></span>
<?php else : ?>
<span class="badge bg-success"><?php echo $row->version; ?></span>
<?php endif; ?>

2
administrator/components/com_privacy/src/Service/HTML/Privacy.php
View File

@ -46,7 +46,7 @@ class Privacy
default:
case 0:
return '<span class="badge bg-warning text-dark">' . Text::_('COM_PRIVACY_STATUS_PENDING') . '</span>';
return '<span class="badge bg-warning">' . Text::_('COM_PRIVACY_STATUS_PENDING') . '</span>';
}
}
}

2
administrator/components/com_tags/tmpl/tags/default.php
View File

@ -218,7 +218,7 @@ if ($saveOrder && !empty($this->items)) {
<?php endif; ?>
<?php if (isset($this->items[0]) && property_exists($this->items[0], 'count_archived')) : ?>
<td class="text-center btns d-none d-md-table-cell itemnumber">
<a class="btn <?php echo $item->count_archived > 0 ? 'btn-info' : 'btn-secondary'; ?>" title="<?php echo Text::_('COM_TAGS_COUNT_ARCHIVED_ITEMS'); ?>" href="<?php echo Route::_('index.php?option=' . $component . ($mode ? '&extension=' . $section : '&view=' . $section) . '&filter[tag]=' . (int) $item->id . '&filter[published]=2'); ?>">
<a class="btn <?php echo $item->count_archived > 0 ? 'btn-primary' : 'btn-secondary'; ?>" title="<?php echo Text::_('COM_TAGS_COUNT_ARCHIVED_ITEMS'); ?>" href="<?php echo Route::_('index.php?option=' . $component . ($mode ? '&extension=' . $section : '&view=' . $section) . '&filter[tag]=' . (int) $item->id . '&filter[published]=2'); ?>">
<?php echo $item->count_archived; ?></a>
</td>
<?php endif; ?>

2
administrator/components/com_templates/tmpl/template/default_updated_files.php
View File

@ -83,7 +83,7 @@ $input = Factory::getApplication()->getInput();
</td>
<td>
<?php if (is_null($value->modified_date)) : ?>
<span class="badge bg-warning text-dark"><?php echo Text::_('COM_TEMPLATES_OVERRIDE_CORE_REMOVED'); ?></span>
<span class="badge bg-warning"><?php echo Text::_('COM_TEMPLATES_OVERRIDE_CORE_REMOVED'); ?></span>
<?php else : ?>
<?php echo HTMLHelper::_('date', $value->modified_date, Text::_('DATE_FORMAT_FILTER_DATETIME')); ?>
<?php endif; ?>

2
administrator/components/com_templates/tmpl/templates/default.php
View File

@ -120,7 +120,7 @@ $listDirn = $this->escape($this->state->get('list.direction'));
<td class="d-none d-md-table-cell text-center">
<?php if (!empty($item->updated)) : ?>
<a href="<?php echo Route::_('index.php?option=com_templates&view=template&id=' . (int) $item->extension_id . '#files'); ?>">
<span class="badge bg-warning text-dark"><?php echo Text::plural('COM_TEMPLATES_N_CONFLICT', $item->updated); ?></span>
<span class="badge bg-warning"><?php echo Text::plural('COM_TEMPLATES_N_CONFLICT', $item->updated); ?></span>
</a>
<?php else : ?>
<span class="badge bg-success"><?php echo Text::_('COM_TEMPLATES_UPTODATE'); ?></span>

2
administrator/components/com_users/tmpl/users/default.php
View File

@ -131,7 +131,7 @@ $mfa = PluginHelper::isEnabled('multifactorauth');
</div>
<?php echo HTMLHelper::_('users.notesModal', $item->note_count, $item->id); ?>
<?php if ($item->requireReset == '1') : ?>
<span class="badge bg-warning text-dark"><?php echo Text::_('COM_USERS_PASSWORD_RESET_REQUIRED'); ?></span>
<span class="badge bg-warning"><?php echo Text::_('COM_USERS_PASSWORD_RESET_REQUIRED'); ?></span>
<?php endif; ?>
</th>
<td class="break-word d-none d-md-table-cell">

2
administrator/components/com_workflow/tmpl/workflows/default.php
View File

@ -166,7 +166,7 @@ $userId = $user->id;
</div>
</td>
<td class="text-center btns d-none d-md-table-cell itemnumber">
<a class="btn <?php echo ($item->count_transitions > 0) ? 'btn-info' : 'btn-secondary'; ?>"
<a class="btn <?php echo ($item->count_transitions > 0) ? 'btn-primary' : 'btn-secondary'; ?>"
href="<?php echo Route::_('index.php?option=com_workflow&view=transitions&workflow_id=' . (int) $item->id . '&extension=' . $extension); ?>" aria-describedby="tip-transitions<?php echo $i; ?>">
<?php echo $item->count_transitions; ?>
</a>

2
administrator/language/en-GB/com_joomlaupdate.ini
View File

@ -101,7 +101,7 @@ COM_JOOMLAUPDATE_VIEW_DEFAULT_DB_NOT_SUPPORTED="Your database type is not suppor
COM_JOOMLAUPDATE_VIEW_DEFAULT_DB_NOT_SUPPORTED_DESC="An update to Joomla %1$s was found, but your current database type is not supported by the new version.<br>For further details take a look at <a href=\"https://downloads.joomla.org/technical-requirements\">the minimum requirements for Joomla %1$s</a>."
COM_JOOMLAUPDATE_VIEW_DEFAULT_DESCRIPTION_BREAK="Extensions marked with <span class='badge bg-danger'>No</span> or <span class='badge bg-secondary'>Missing Compatibility Tag</span> might break your website. Please consult with the developer before updating."
COM_JOOMLAUPDATE_VIEW_DEFAULT_DESCRIPTION_MISSING_TAG="Extensions marked with <span class='badge bg-secondary'>Missing Compatibility Tag</span> indicate the developer has not included <a href='https://docs.joomla.org/Special:MyLanguage/Deploying_an_Update_Server' target='_blank' rel='noopener noreferrer'>compatibility information.</a>"
COM_JOOMLAUPDATE_VIEW_DEFAULT_DESCRIPTION_UPDATE_REQUIRED="Extensions marked with <span class='badge bg-warning text-dark'>Yes (X.X.X)</span> might require an update."
COM_JOOMLAUPDATE_VIEW_DEFAULT_DESCRIPTION_UPDATE_REQUIRED="Extensions marked with <span class='badge bg-warning'>Yes (X.X.X)</span> might require an update."
COM_JOOMLAUPDATE_VIEW_DEFAULT_DIRECTIVE="Directive"
COM_JOOMLAUPDATE_VIEW_DEFAULT_DOWNLOAD_IN_PROGRESS="Downloading update file. Please wait &hellip;"
COM_JOOMLAUPDATE_VIEW_DEFAULT_EXPLANATION_AND_LINK_TO_DOCS="The pre-update check provides you with information about the readiness of your server, settings and installed extensions for the update.<br>You can find more information about this page and how to prepare for updating Joomla in the <a class='pre-update-docs' href='https://docs.joomla.org/Special:MyLanguage/Pre-Update_Check' target='_blank' rel='noopener noreferrer'>pre-update check documentation</a>."

4
administrator/language/en-GB/com_privacy.ini
View File

@ -37,8 +37,8 @@ COM_PRIVACY_CORE_CAPABILITY_COMMUNICATION_WITH_JOOMLA_ORG="When a network connec
COM_PRIVACY_CORE_CAPABILITY_LOGGING_IP_ADDRESS="Joomla's logging system records the IP address of the visitor which leads to a message being written to its log files. These log files are used to record various activity on a Joomla site, including information related to core updates, invalid login attempts, unhandled errors, and development information such as the use of deprecated APIs. The format of these log files may be customised by any extension which configures a logger, therefore you are encouraged to download and review the log files for your website which may be found at `%s`."
COM_PRIVACY_CORE_CAPABILITY_SESSION_IP_ADDRESS_AND_COOKIE="All requests to a Joomla website start a session which stores the IP address in the session data and creates a session cookie in the user's browser. The IP address is used as a security measure to help protect against potential session hijacking attacks and this information is deleted once the session has expired and its data purged. The session cookie's name is based on a randomly generated hash and therefore does not have a constant identifier. The session cookie is destroyed once the session has expired or the user has exited their browser."
COM_PRIVACY_DASHBOARD_BADGE_ACTIVE_REQUESTS_0="<span class=\"badge bg-info\">0</span> Active Requests"
COM_PRIVACY_DASHBOARD_BADGE_ACTIVE_REQUESTS_1="<span class=\"badge bg-warning text-dark\">1</span> Active Request"
COM_PRIVACY_DASHBOARD_BADGE_ACTIVE_REQUESTS_MORE="<span class=\"badge bg-warning text-dark\">%d</span> Active Requests"
COM_PRIVACY_DASHBOARD_BADGE_ACTIVE_REQUESTS_1="<span class=\"badge bg-warning\">1</span> Active Request"
COM_PRIVACY_DASHBOARD_BADGE_ACTIVE_REQUESTS_MORE="<span class=\"badge bg-warning\">%d</span> Active Requests"
COM_PRIVACY_DASHBOARD_BADGE_TOTAL_REQUESTS_0="<span class=\"badge bg-info\">0</span> Total Requests"
COM_PRIVACY_DASHBOARD_BADGE_TOTAL_REQUESTS_1="<span class=\"badge bg-info\">1</span> Total Request"
COM_PRIVACY_DASHBOARD_BADGE_TOTAL_REQUESTS_MORE="<span class=\"badge bg-info\">%d</span> Total Requests"

10
administrator/modules/mod_privacy_status/tmpl/default.php
View File

@ -33,12 +33,12 @@ use Joomla\CMS\Router\Route;
<?php echo Text::_('JPUBLISHED'); ?>
</span>
<?php elseif ($privacyPolicyInfo['published'] && !$privacyPolicyInfo['articlePublished']) : ?>
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<span class="icon-exclamation-triangle" aria-hidden="true"></span>
<?php echo Text::_('JUNPUBLISHED'); ?>
</span>
<?php else : ?>
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<span class="icon-exclamation-triangle" aria-hidden="true"></span>
<?php echo Text::_('COM_PRIVACY_STATUS_CHECK_NOT_AVAILABLE'); ?>
</span>
@ -62,12 +62,12 @@ use Joomla\CMS\Router\Route;
<?php echo Text::_('JPUBLISHED'); ?>
</span>
<?php elseif (!$requestFormPublished['published'] && $requestFormPublished['exists']) : ?>
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<span class="icon-exclamation-triangle" aria-hidden="true"></span>
<?php echo Text::_('JUNPUBLISHED'); ?>
</span>
<?php else : ?>
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<span class="icon-exclamation-triangle" aria-hidden="true"></span>
<?php echo Text::_('COM_PRIVACY_STATUS_CHECK_NOT_AVAILABLE'); ?>
</span>
@ -133,7 +133,7 @@ use Joomla\CMS\Router\Route;
<?php echo Text::_('JENABLED'); ?>
</span>
<?php else : ?>
<span class="badge bg-warning text-dark">
<span class="badge bg-warning">
<span class="icon-exclamation-triangle" aria-hidden="true"></span>
<?php echo Text::_('COM_PRIVACY_STATUS_CHECK_NOT_AVAILABLE'); ?>
</span>

4
administrator/modules/mod_sampledata/tmpl/default.php
View File

@ -38,7 +38,7 @@ $app->getDocument()->addScriptOptions(
<span class="sample-data__icon icon-<?php echo $item->icon; ?> me-1" aria-hidden="true"></span>
<?php echo htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8'); ?>
</div>
<button type="button" class="btn btn-secondary btn-sm apply-sample-data" data-type="<?php echo $item->name; ?>" data-steps="<?php echo $item->steps; ?>">
<button type="button" class="btn btn-primary btn-sm apply-sample-data" data-type="<?php echo $item->name; ?>" data-steps="<?php echo $item->steps; ?>">
<span class="icon-upload" aria-hidden="true"></span> <?php echo Text::_('JLIB_INSTALLER_INSTALL'); ?>
<span class="visually-hidden"><?php echo $item->title; ?></span>
</button>
@ -53,7 +53,7 @@ $app->getDocument()->addScriptOptions(
</li>
<?php endforeach; ?>
</ul>
<a href="index.php?option=com_plugins&filter[folder]=sampledata" class="btn btn-secondary btn-sm manage-sample-data float-end m-3">
<a href="index.php?option=com_plugins&filter[folder]=sampledata" class="btn btn-primary btn-sm manage-sample-data float-end m-3">
<span class="icon-tasks" aria-hidden="true"></span> <?php echo Text::_('MOD_SAMPLEDATA_MANAGE_SAMPLEDATA'); ?>
</a>
<?php endif; ?>

9
administrator/templates/atum/component.php
View File

@ -22,6 +22,9 @@ preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
$linkColorDark = $this->params->get('link-color-dark', '#6fbfdb');
list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x");
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
@ -34,7 +37,11 @@ $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', 'var(--template-special-color)') . ';
}');
}')
->addInlineStyle('@media (prefers-color-scheme: dark) { :root {
--link-color: ' . $linkColorDark . ';
--link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
}}');
// No template.js for modals
$wa->disableScript('template.atum');

16
administrator/templates/atum/index.php
View File

@ -64,8 +64,20 @@ preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
$linkColorDark = $this->params->get('link-color-dark', '#7fa5d4');
$linkColorDark = $this->params->get('link-color-dark', '#6fbfdb');
list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x");
list($lighterRd, $lighterGd, $lighterBd) = adjustColorLightness($rd, $gd, $bd, 10);
$linkColorDarkHvr = sprintf("%d, %d, %d", $lighterRd, $lighterGd, $lighterBd);
function adjustColorLightness($r, $g, $b, $percent)
{
$adjust = function ($color) use ($percent) {
$newColor = $color + ($color * $percent / 100);
return min(max(0, $newColor), 255);
};
return [$adjust($r), $adjust($g), $adjust($b)];
}
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
@ -83,6 +95,8 @@ $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->addInlineStyle('@media (prefers-color-scheme: dark) { :root {
--link-color: ' . $linkColorDark . ';
--link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
--link-color-rgb-hvr: ' . $linkColorDarkHvr . ';
--template-special-color: #6fbfdb;
}}');
// Override 'template.active' asset to set correct ltr/rtl dependency

2
administrator/templates/atum/templateDetails.xml
View File

@ -91,7 +91,7 @@
name="link-color-dark"
type="color"
label="TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_DARK_LABEL"
default="#7fa5d4"
default="#6fbfdb"
filter="color"
/>
<field

2
build/media_source/com_cpanel/js/admin-system-loader.es6.js
View File

@ -40,7 +40,7 @@
elem.classList.add('float-end');
elem.classList.add('badge');
elem.classList.add('bg-warning', 'text-dark');
elem.classList.add('bg-warning');
elem.innerHTML = Joomla.sanitizeHtml(response.data);
element.parentNode.replaceChild(elem, element);

5
build/media_source/com_media/scss/_variables.scss
View File

@ -18,7 +18,7 @@ $sidebar-tree-line-color: $border-color;
$sidebar-tree-icon-color: var(--template-bg-dark-60);
$sidebar-tree-line-height: 26px;
$sidebar-tree-folder-icon: "\f07b";
$sidebar-tree-item-hover-bg: #e1e1e1;
$sidebar-tree-item-hover-bg: var(--com-media-manager-tree-item-hover-bg, #e1e1e1);
$sidebar-active-icon-color: $highlight-color;
$sidebar-disk-name-color: var(--com-media-manager-disk-name-color, var(--template-bg-dark));
@ -26,7 +26,7 @@ $sidebar-disk-name-color: var(--com-media-manager-disk-name-color, var
$toolbar-height: 46px;
$toolbar-bg: var(--com-media-manager-content-bg, #fff);
$toolbar-icon-width: 50px;
$toolbar-icon-color: var(--template-bg-dark-60);
$toolbar-icon-color: var(--com-media-manager-toolbar-icon-color, var(--template-bg-dark-60));
$toolbar-icon-bg-hover: #f0f0f0;
$toolbar-loader-color: linear-gradient(to right, #59afff 0, #59daff 100%);
$toolbar-loader-height: 2px;
@ -36,6 +36,7 @@ $toolbar-icon-active-bg-color-hover: var(--template-bg-dark-80);
// Breadcrumbs
$breadcrumbs-bg: var(--com-media-manager-overlay-bg, var(--template-bg-dark-3));
$breadcrumbs-current-bg: var(--com-media-manager-content-bg, #fff);
$breadcrumbs-color: var(--com-media-manager-content-color, var(--link-color));
// Media Browser
$browser-background-color: var(--com-media-manager-overlay-bg, var(--template-bg-dark-3));

3
build/media_source/com_media/scss/components/_media-breadcrumb.scss
View File

@ -23,6 +23,9 @@
padding-inline-end: 8px;
padding-inline-start: 22px;
background-color: $breadcrumbs-bg;
a {
color: $breadcrumbs-color;
}
&:first-of-type {
padding-inline-start: 16px;
}

2
build/media_source/com_scheduler/js/admin-view-run-test-task.es6.js
View File

@ -67,7 +67,7 @@ const runTheTask = (url, resultContainer) => {
if (output.data.output) {
resultContainer.appendChild(createEl('div', Joomla.Text._('COM_SCHEDULER_TEST_RUN_OUTPUT').replace('%s', '').replace('<br>', '')));
resultContainer.appendChild(createEl('pre', output.data.output, ['bg-light', 'p-2']));
resultContainer.appendChild(createEl('pre', output.data.output, ['bg-body', 'p-2']));
}
complete(true);

2
build/media_source/plg_installer_webinstaller/scss/client.scss
View File

@ -59,7 +59,7 @@ $extension-types: (
&.active {
color: $white;
text-decoration: none;
background-color: #33608f;
background-color: var(--btn-primary-bg);
}
}
}

11
build/media_source/plg_system_guidedtours/scss/guidedtours.scss
View File

@ -31,14 +31,14 @@
.shepherd-button-primary {
grid-column-start: 3;
color: var(--template-text-light);
background-color: var(--template-bg-dark-60);
border-color: var(--template-bg-dark-60);
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg);
border-color: var(--btn-primary-bg);
}
.shepherd-button-primary:not(:disabled):hover {
background-color: var(--template-bg-dark-70);
border-color: var(--template-bg-dark-90);
background-color: var(--btn-primary-bg-hvr);
border-color: var(--btn-primary-bg-hvr);
}
.shepherd-enabled.shepherd-element[data-popper-placement=bottom] {
@ -59,5 +59,6 @@
#modGuidedTours-modal a {
font-weight: 500;
color: var(--template-link-color);
text-decoration: underline;
}

29
build/media_source/system/css/fields/calendar.css
View File

@ -99,8 +99,8 @@ div.calendar-container table td.title { /* This holds the current "month, year"
}
.calendar-container table tbody td.day.selected { /* Cell showing today date */
color: #fff;
background: #3071a9;
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
border: 0;
}
@ -127,9 +127,9 @@ div.calendar-container table td.title { /* This holds the current "month, year"
}
.calendar-container table tbody td.day:hover {
color: #fff;
color: var(--btn-primary-color);
cursor: pointer;
background: #3d8fd7;
background: var(--btn-primary-bg);
}
.calendar-container table tbody td.day:hover:after {
@ -137,8 +137,8 @@ div.calendar-container table td.title { /* This holds the current "month, year"
}
.calendar-container table tbody .disabled {
color: #999;
background-color: #fafafa;
color: var(--calendar-disabled-color);
background-color: var(--calendar-disabled-bg);
}
.calendar-container table tbody .emptycell { /* Empty cells (the best is to hide them) */
@ -180,15 +180,19 @@ div.calendar-container table td.title { /* This holds the current "month, year"
line-height: 1.5;
color: var(--calendar-select-color, #212529);
background-color: var(--calendar-select-bg-color, #f0f4fb);
background-image: var(--calendar-select-bg-url, var(--fallback-url));
background-repeat: no-repeat;
background-position: right center;
background-size: max(100%, 58rem);
border: 1px solid #cdcdcd;
border-radius: .25rem;
appearance: none;
}
/* Fix select dropdown background rtl / ltr */
html:not([dir="rtl"]) .calendar-container .time td select {
background-image: var(--calendar-select-bg-url, var(--fallback-url));
background-position: right center;
}
.buttons-wrapper {
width: 100%;
padding: 5px;
@ -200,14 +204,15 @@ div.calendar-container table td.title { /* This holds the current "month, year"
padding: 0 16px;
margin-right: 0;
line-height: 2.375rem;
color: var(--calendar-buttons-color, #495057);
border: 1px solid var(--calendar-buttons-color, #495057);
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
border: 1px solid var(--body-bg);
box-shadow: 1px 1px 1px 0 rgba(0,0,0,.25);
}
.buttons-wrapper .btn:hover {
color: #fff;
background: #1a466b;
color: var(--btn-primary-color);
background: var(--btn-primary-bg);
}
.buttons-wrapper .btn:last-child {

1
build/media_source/system/images/select-bg-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/><rect width="1810" height="295" fill="#171c24"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

4
build/media_source/system/js/fields/calendar.es5.js
View File

@ -741,8 +741,8 @@
hrs -= 12;
}
var H = makeTimePart("time time-hours", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1),
M = makeTimePart("time time-minutes", mins, 0, 59, cell2),
var H = makeTimePart("time time-hours form-control form-select", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1),
M = makeTimePart("time time-minutes form-control form-select", mins, 0, 59, cell2),
AP = null;

2
build/media_source/templates/administrator/atum/images/select-bg-dark.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/><rect width="1810" height="295" fill="#212529"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"> <path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/><rect width="1810" height="295" fill="#0f151d"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 507 B

After

Width:  |  Height:  |  Size: 508 B

BIN
build/media_source/templates/administrator/atum/images/template_preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
build/media_source/templates/administrator/atum/images/template_thumbnail.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 17 KiB

481
build/media_source/templates/administrator/atum/scss/_variables-dark.scss
View File

@ -1,18 +1,463 @@
$atum-colors-dark: (
template-quickicon-color: var(--template-bg-dark-5),
focus-shadow: var(--gray-800),
) !default;
$link-hover-color-dark: lighten($light-blue, 20%);
$form-select-indicator-dark: url("../images/select-bg-dark.svg");
$form-select-indicator-rtl-dark: url("../images/select-bg-rtl-dark.svg");
$form-select-bg-dark: var(--template-bg-dark);
$form-select-background-dark: $form-select-bg-dark $form-select-indicator-dark no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
$form-select-background-rtl-dark: $form-select-bg-dark $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
// Alerts
$state-info-text-dark: var(--template-bg-dark-50);
// Code-color override bootstrap for accessibility contrast
$code-color-dark: #d7488b; //used in bootstrap
// Color definitions for the dark theme - don't use it with the light theme
$btn-primary-dark: #007db0; // contrast ratio: 4.6 with #fff text
$link-color-dark: #6fbfdb; // contrast ratio: 8.87 on backgrounds like #0F151D
$success-dark: #3d854d; // contrast ratio: 4.51 with #fff test
$warning: #f0ad4e; // contrast ratio: 4.51 with #fff text
$featured-dark: #f0ad4e; // contrast ratio: 9.42 on dark backgrounds (icons,etc.)
$danger-dark: #c62a25; // contrast ratio: 5.59 with #fff text
$error-dark: $danger-dark; // contrast ratio: 5.59 with #fff text
$info-dark: #33383f; // contrast ratio: 8.59 with #fff text
$template-bg-dark: #0c1a2b;
// Form select
$form-select-indicator-dark: url("../images/select-bg-dark.svg");
$form-select-indicator-rtl-dark: url("../images/select-bg-rtl-dark.svg");
$form-select-bg-dark: $btn-primary-dark;
$atum-colors-dark: (
body-bg: #0f151d,
body-color: rgba(255,255,255,.85),
template-bg-dark: $template-bg-dark,
main-bg: #171c24,
admin-background: var(--body-bg),
button-and-icon-color: $btn-primary-dark,
template-quickicon-color: var(--template-bg-dark-5), // fix this
focus-shadow: var(--gray-800),
media-manager-bg: var(--body-bg),
media-manager-content-bg: var(--body-bg),
media-manager-overlay-bg: var(--template-bg-dark-90), // fix this
media-manager-infobar-dt-color: rgba(255, 255, 255, .54),
media-manager-content-color: lighten($btn-primary-dark, 20%),
media-manager-overlay-header-bg: var(--template-bg-dark-80),
media-manager-disk-name-color: var(--template-text-light),
media-manager-border: 1px solid var(--gray-800),
media-manager-file-icon-color: $btn-primary-dark,
media-manager-tree-item-hover-bg: var(--gray-600),
media-manager-toolbar-icon-color: lighten($btn-primary-dark, 20%),
media-manager-breadcrumb-item-bg: var(--gray-700),
media-tree-item-color: $btn-primary-dark,
media-tree-active-icon-color: darken($btn-primary-dark, 10%),
media-browser-file-bg: var(--media-manager-bg),
media-drive-bg: var(--media-manager-bg),
media-toolbar-bg: var(--media-manager-bg),
media-toolbar-icon-bg: var(--media-manager-bg),
media-toolbar-icon-color: lighten($btn-primary-dark, 10%),
media-toolbar-icon-bg-hvr: var(--gray-800),
image-bg: #000,
image-bg-image: (linear-gradient(45deg, var(--body-bg) 25%, transparent 25%, transparent 75%, #111 75%, var(--body-bg) 100%), linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, var(--body-bg) 75%, var(--body-bg) 100%)),
success-text: #418d52,
success: $success-dark,
successhvr: darken($success-dark, 15%),
danger-text: #e0615c,
danger: $danger-dark,
dangerhvr: darken($danger-dark, 15%),
darkdanger: #941f1c,
darkdangerhvr: darken(#941f1c, 15%),
error: #941f1c,
errorhvr: #be2824,
warning-text: #000,
warning: #f0ad4e,
warninghvr: darken($warning, 15%),
dark-mode-text-light: rgba(255,255,255,.85),
template-link-color: $link-color-dark,
link-color-rgb: (36,158,200),
link-color: $link-color-dark,
template-link-hover-color: lighten($link-color-dark, 10%),
link-color-rgb-hvr: var(--template-link-hover-color),
template-quickicon-bg: rgba(255, 255, 255, .1),
template-quickicon-bg-hvr: rgba(255, 255, 255, .15),
// Admin section
options-form-color: var(--template-text-light),
options-form-bg: transparent, //#484b51, //#52565b,
options-form-border: 1px solid rgba(255, 255, 255, .05),
options-form-legend-color: var(--template-text-light),
options-form-legend-bg: var(--admin-background),
form-control-bg: var(--template-sidebar-bg),
form-control-bg-disabled: var(--gray-800),
form-control-border: 1px solid rgba(255, 255, 255, .2),
form-control-border-disabled: 1px solid rgba(255, 255, 255, .1),
form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"),
form-check-input-checked-bg-color: $btn-primary-dark,
form-check-input-border: 1px solid rgba(255, 255, 255, .2), //rgba(255, 255, 255, .05),
form-select-background: $form-select-bg-dark $form-select-indicator-dark no-repeat right center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon)
form-select-background-rtl: $form-select-bg-dark $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size, // Used so we can have multiple background elements (e.g. arrow and feedback icon)
form-select-border: var(--form-control-border),
form-select-success-bg: var(--template-sidebar-bg),
form-select-danger-bg: var(--template-sidebar-bg),
form-select-disabled-bg: var(--template-sidebar-bg),
form-select-option: var(--template-text-light),
form-select-option-disabled-bg: var(--template-bg-dark-90),
file-selector-btn-bg: $btn-primary-dark,
file-selector-btn-bg-hvr: darken($btn-primary-dark, 10%),
// Background styles
bg-normal: var(--template-bg-dark),
bg-reverted: var(--template-bg-dark-20),
// Text styles
text-normal: var(--template-text-light),
text-reverted: black, //var(--template-text-dark),
text-muted-color: var(--template-text-light) !important,
text-muted-hvr-color: var(--template-text-dark) !important,
// Quickicons styles
quickicon-bg: transparent,
quickicon-border: none,
quickicon-border-radius: 4px,
quickicon-link-hvr: #fff,
quickicon-linkadd-bg: rgba(255, 255, 255, .04),
quickicon-linkadd-bg-hvr: var(--btn-primary-bg-hvr),
quickicon-linkadd-color: #fff,
quickicon-amount-bg: #6b6f77,
quickicon-color-hvr: var(--quickicon-link-hvr),
// Modules
new-modules-color: var(--template-quickicon-color),
new-modules-bg: var(--template-bg-dark-65),
new-modules-bg-hvr: var(--btn-primary-bg-hvr),
new-modules-icon-color: var(--template-bg-dark-80),
new-modules-icon-color-hvr: var(--template-quickicon-color),
new-module-color: var(--dark-mode-text-light),
new-module-bg: var(--template-quickicon-bg),
new-module-border: none,
new-module-link-bg: rgba(255, 255, 255, .05),
new-module-link-span: var(--quickicon-linkadd-color),
new-module-link-hvr: var(--new-modules-bg-hvr),
new-module-link-span-hvr: var(--icon-color-hvr),
// Sidebar
sidebarwrapper-bg: var(--template-sidebar-bg),
sidebar-item-color: $white,
sidebar-item-color-hvr: var(--template-text-light),
sidebar-item-bg-hvr: $btn-primary-dark,
sidebar-toggle-bg: #20262d,
sidebar-toggle-link: $white,
main-nav-ul-bg: #20262d,
main-nav-divider-bg: #495057,
main-nav-item-title: var(--template-bg-dark-30),
main-nav-mm-active-bg: $btn-primary-dark,
main-nav-mm-active-quicktask-bg: darken($btn-primary-dark, 10%),
main-nav-badge: var(--template-bg-dark-60),
main-nav-item-title-hvr-bg: $btn-primary-dark,
mobile-menu-collapse-bg: var(--template-bg-dark-50),
sidebar-bg: #0f151d,
template-sidebar-bg: #0f151d,
sidebar-accent-bg: #2667bb,
// Header content
header-bg: #0a0e13,
header-item-content-bg: $btn-primary-dark,
header-item-content-bg-hvr: darken($btn-primary-dark, 10%),
header-item-content-border-radius: 22px,
header-item-content-jversion-color: var(--dark-mode-text-light),
header-item-content-jversion-bg: transparent,
header-logo-bg: var(--header-bg),
// Alerts
alert-accent-color: #479a59, // ??
alert-bg-color: #f2f8f4,
alert-link-text-color: $link-color-dark,
// Table
table-color: rgba(255,255,255,.9),
table-border-top-nfc: 1px solid #969696,
table-link-color: $link-color-dark,
table-link-font-weight: $normal-weight,
table-link-font-weight-sorted: $normal-weight,
badge-bg-info: rgba(255, 255, 255, .2) !important,
info: rgba(255, 255, 255, .2) !important,
// Card
card-bg-dark: var(--template-sidebar-bg),
card-header-color: var(--dark-mode-text-light),
card-header-bg: var(--template-sidebar-bg),
card-bg: var(--template-sidebar-bg),
card-body-bg: var(--template-sidebar-bg),
main-card-bg: var(--template-sidebar-bg),
main-card-col-border-left: 1px solid var(--gray-800),
// Cpanel
module-actions-color: var(--body-color),
// Lists
atum-list-group-border-color: rgba(255, 255, 255, .1),
border-color: rgba(255, 255, 255, .1),
// Turn off shadow in dark mode
atum-box-shadow: none,
dropdown-box-shadow: none,
quickicon-box-shadow-success: none,
quickicon-box-shadow-danger: none,
quickicon-box-shadow-warning: none,
login-box-shadow: none,
login-focus-box-shadow: none,
modal-btn-box-shadow: none,
modal-joomla-dialog-box-shadow: none,
form-aria-grabbed-box-shadow: none,
choices__button_joomla-focus-box-shadow: none,
joomla-tab-accordion-box-shadow: none,
joomla-tab-btn-hvr: var(--template-text-light),
joomla-tab-btn-aria-exp-bg: var(--atum-btn-bg),
joomla-tab-btn-region-border: var(--atum-btn-bg),
joomla-tablist-btn-aria-exp: var(--template-text-light),
joomla-tablist-btn-aria-exp-bg: darken($btn-primary-dark, 10%),
joomla-tablist-btn-aria-exp-aft-bg: $btn-primary-dark,
joomla-tablist-border-bottom: 1px solid var(--gray-800),
joomla-tab-tablist-border: 1px solid var(--gray-800),
joomla-tab-vert-border-bottom: 1px solid var(--gray-800),
// Details
details-bg: rgba(0,0,0,.4),
details-border: 1px solid var(--details-bg),
// Nav
nav-header-color: var(--body-color),
// Choices
choices-input-border-color: var(--btn-primary-bg),
choices-input-bg: var(--body-bg),
choices-input-placeholder: var(--gray-200),
choices-list-multiple-item-bg: var(--btn-primary-bg),
choices-list-multiple-item: var(--template-text-light),
// Switches
switcher-toggle-inside-bg: var(--body-bg),
switcher-toggle-outside-off-bg: var(--gray-700),
switcher-toggle-outside-on-bg: var(--success),
// Input
input-border-color: #495057,
// icons
featured-icon-color: $featured-dark,
// Users
users-method-image: var(--light),
users-methods-reset-cont-bg: var(--body-bg),
users-method-header-inact-bg: var(--body-bg),
// Login
login-label-color: var(--white),
// Icons
icon-success: #418d52,
icon-success-border: #418d52,
icon-checkedout-color: var(--gray-400),
// Buttons
btn-primary-color: var(--text-normal),
btn-primary-bg: $btn-primary-dark,
primary: $btn-primary-dark,
btn-primary-border: 1px solid lighten($btn-primary-dark, 10%),
btn-primary-bg-hvr: darken($btn-primary-dark, 10%),
btn-primary-border-hvr: 1px solid lighten($btn-primary-dark, 10%),
btn-primary-toggle-bg: var(--template-bg-dark),
btn-primary-toggle-border: var(--template-bg-dark),
btn-secondary-color: var(--template-text-light),
btn-secondary-bg: $info-dark,
btn-secondary-border: 1px solid lighten($info-dark, 10%),
btn-secondary-bg-hvr: darken($info-dark, 10%),
btn-secondary-border-hvr: 1px solid lighten($info-dark, 10%),
btn-dark-border: 1px solid rgba(0,0,0,.85),
btn-dark-bg: rgba(0,0,0,.9),
btn-dark-bg-hvr: #000,
btn-dark-color: #fff,
btn-dark-color-hvr: #fff,
btn-light-bg: $btn-primary-dark,
btn-light-border: 1px solid lighten($btn-primary-dark, 10%),
btn-light-bg-hvr: $btn-primary-bg-hvr,
btn-outline-secondary-color: var(--template-text-light),
btn-outline-secondary-bg: #64676c,
btn-outline-secondary-border: 1px solid lighten(#64676c, 10%),
btn-info-color: var(--template-text-light),
btn-info-bg: $info-dark,
btn-info-border: 1px solid lighten($info-dark, 10%),
btn-info-bg-hvr: darken($info-dark, 10%),
btn-info-border-hvr: 1px solid darken($info-dark, 10%),
// Dropdown
dropdown-header-bg: darken($btn-primary-dark, 10%),
dropdown-divider-bg: 1px solid #fff,
dropdown-item-bg: $btn-primary-dark,
dropdown-item-bg-hvr: darken($btn-primary-dark, 10%),
dropdown-item-border-bottom: 1px solid rgba(255, 255, 255, .1),
atum-dropdown-link-hover-bg: var(--gray-700),
// Input Group
input-group-text-bg: var(--btn-primary-bg),
input-group-text-border: 1px solid var(--btn-primary-border),
input-group-text-color: var(--btn-primary-color),
// Search
js-stools-btn-clear-bg: var(--body-bg),
js-stools-btn-clear-disabled-bg: var(--body-bg),
js-stools-btn-clear-disabled-border: var(--form-select-border),
// Alerts
states-link-color: #fff,
states-btn-primary-bg: rgba(0,0,0,.5),
states-btn-primary-bg-hover: rgba(0,0,0,.7),
states-btn-primary-color: var(--template-text-light),
states-btn-primary-border: rgba(0,0,0,.8),
state-success-text: var(--text-normal),
state-success-text-hvr: var(--text-normal),
state-success-bg: $success-dark,
state-success-bg-hvr: darken($success-dark, 15%),
state-success-border: var(--state-success-bg),
state-success-btn-border: var(--state-success-bg),
state-success-icon: var(--text-normal),
state-success-icon-hvr: var(--text-normal),
state-success-heading-bg: $success-dark,
state-info-text: var(--text-normal),
state-info-text-hvr: var(--text-normal),
state-info-bg: darken($btn-primary-dark, 15%),
state-info-bg-hvr: darken($btn-primary-dark, 25%),
state-info-border: transparent,
state-info-icon: var(--state-info-text),
state-info-heading-bg: darken($btn-primary-dark, 5%),
state-warning-text: #000,
state-warning-text-hvr: #000,
state-warning-bg: $warning,
state-warning-bg-hvr: darken($warning, 15%),
state-warning-border: darken($warning, 15%),
state-warning-icon: #000,
state-warning-heading-bg: darken($warning, 15%),
state-danger-text: var(--text-normal),
state-danger-text-hvr: var(--text-normal),
state-danger-bg: $danger-dark,
state-danger-bg-hvr: darken($danger-dark, 15%),
state-danger-border: var(--dangerhvr),
state-danger-icon: var(--text-normal),
state-danger-heading-bg: var(--dangerhvr),
state-error-text: var(--text-normal),
state-error-bg: var(--error),
state-error-border: var(--error),
state-error-icon: var(--text-normal),
state-error-heading-bg: var(--errorlight),
alert-info-color: var(--text-normal),
alert-info-bg: var(--body-bg),
alert-info-border: var(--body-bg),
// Subhead
atum-subhead-color: var(--template-text-dark),
atum-subhead-bg: var(--body-bg),
atum-subhead-bg-img: (linear-gradient(var(--body-bg), var(--dark-bg))),
// Toolbar Buttons
atum-btn: var(--template-text-light),
atum-btn-icon: var(--template-text-light),
atum-btn-icon-hvr: $atum-text-dark,
atum-btn-bg: $btn-primary-dark,
atum-btn-bg-hvr: darken($btn-primary-dark, 15%),
atum-btn-border: 1px solid hsl(var(--hue),20%,80%),
atum-btn-hvr: var(--template-text-light),
atum-btn-success: var(--atum-btn-success-hvr),
atum-btn-success-icon: var(--template-text-light),
atum-btn-success-icon-hvr: var(--atum-btn-success-hvr),
atum-btn-success-bg: $success-dark,
atum-btn-success-bg-hvr: darken($success-dark, 15%),
atum-btn-success-border: 1px solid lighten($success-dark, 10%),
atum-btn-success-hvr: var(--template-text-light),
atum-btn-danger: var(--dangerhvr),
atum-btn-danger-color: var(--template-text-light),
atum-btn-danger-icon: var(--template-text-light),
atum-btn-danger-icon-hvr: var(--atum-btn-danger-hvr),
atum-btn-danger-bg: $danger,
atum-btn-danger-bg-hvr: darken($danger, 15%),
atum-btn-danger-border: 1px solid lighten($danger, 10%),
atum-btn-danger-hvr: var(--template-text-light),
atum-btn-info: lighten($info-dark, 50%),
atum-btn-info-icon: var(--template-text-light),
atum-btn-info-icon-hvr: var(--template-text-dark),
atum-btn-info-bg: $info-dark,
atum-btn-info-bg-hvr: darken($info-dark, 15%),
atum-btn-info-border: 1px solid lighten($info-dark, 10%),
atum-btn-info-hvr: var(--template-text-dark),
atum-btn-primary: lighten($btn-primary-dark, 25%),
atum-btn-primary-icon: var(--template-text-light),
atum-btn-primary-icon-hvr: var(--template-text-dark),
atum-btn-primary-bg: $btn-primary-dark, //var(--template-bg-dark),
atum-btn-primary-bg-hvr: darken($btn-primary-dark, 15%),
atum-btn-primary-border: 1px solid lighten($btn-primary-dark, 10%),
atum-btn-primary-hvr: var(--template-text-light),
atum-btn-secondary: #f0f4fb,
atum-btn-action: darken($info-dark, 10%),
atum-btn-action-icon: var(--template-text-light),
atum-btn-action-icon-hvr: var(--atum-btn-action-hvr),
atum-btn-action-bg: $info-dark,
atum-btn-action-bg-hvr: darken($info-dark, 15%),
atum-btn-action-border: 1px solid lighten($info-dark, 10%),
atum-list-group-bg: var(--template-sidebar-bg),
atum-calendar-week-bg: #4b4b4b,
atum-calendar-bg: var(--body-bg),
atum-calendar-buttons-color: var(--btn-primary-bg),
atum-calendar-disabled-color: #4b4b4b,
atum-calendar-disabled-bg: rgba(0,0,0,.5),
atum-calendar-select-bg: $form-select-bg-dark,
atum-calendar-select-bg-url: url("../../images/select-bg-dark.svg"),
atum-calendar-select-bg-url-rtl: url("../../images/select-bg-dark-rtl.svg"),
// Permissions
permissions-sliders-oddCol-bg: var(--template-bg-dark),
respTable-border-bottom: 1em solid $btn-primary-dark,
// Treeselect
treeselect-line-color: rgba(255,255,255,.4),
treeselect-dropdown-toggle: var(--template-text-light),
icon-check-square-bg: $btn-primary-dark,
icon-square-bg: $btn-primary-dark,
icon-check-square-color: radial-gradient(white 50%, transparent 50%),
icon-square-color: radial-gradient(white 50%, transparent 50%),
// Table Row Dragging
drag-color: #151515,
drag-background-color: #c2d049,
);

1336
build/media_source/templates/administrator/atum/scss/_variables.scss
View File

File diff suppressed because it is too large Load Diff

81
build/media_source/templates/administrator/atum/scss/blocks/_alerts.scss
View File

@ -1,50 +1,61 @@
// Alerts
.alert {
margin: 1rem 0;
border-right: 0;
border-left: 0;
border-radius: $border-radius-sm;
&.alert-info {
color: var(--template-bg-dark);
background-color: var(--template-bg-dark-10);
border: 1px solid var(--template-bg-dark-20);
}
&.alert-warning {
color: $state-warning-text;
background-color: $state-warning-bg;
border: 1px solid $state-warning-border;
}
&.alert-success {
color: $state-success-text;
background-color: $state-success-bg;
border: 1px solid $state-success-border;
}
&.alert-error {
color: $state-error-text;
background-color: $state-error-bg;
border: 1px solid $state-error-border;
}
}
.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);
}
&.alert-warning {
color: var(--state-warning-text);
background-color: var(--state-warning-bg);
border: var(--state-warning-border);
}
&.alert-success {
color: var(--state-success-text);
background-color: var(--state-success-bg);
border: var(--state-success-border);
}
&.alert-error {
color: var(--state-error-text);
background-color: var(--state-error-bg);
border: var(--state-error-border);
}
&.alert-danger {
color: var(--state-danger-text);
background-color: var(--state-danger-bg);
border-color: var(--state-danger-border);
}
}
fieldset .alert {
&.alert-info {
margin: -1rem 0 1rem;
}
}
.alert-heading {
font-size: $h4-font-size;
}
@keyframes fadeIn {
from {
opacity: 0;

29
build/media_source/templates/administrator/atum/scss/blocks/_calendar.scss
View File

@ -1,16 +1,25 @@
// Calendar
:root {
--calendar-bg: var(--body-bg);
--calendar-week-bg: #f4f4f4;
--calendar-buttons-color: #495057;
--calendar-select-bg-color: #{$form-select-bg};
--calendar-week-bg: #{$atum-calendar-week-bg}; // #f4f4f4; rgba(255,255,255,.1);
--calendar-bg: #{$atum-calendar-bg};
--calendar-buttons-color: #{$atum-calendar-buttons-color}; //#495057; var(--btn-primary-bg);
--calendar-select-bg-color: #{$atum-calendar-select-bg}; //$form-select-bg
--calendar-select-color: var(--body-color);
--calendar-disabled-color: #{$atum-calendar-disabled-color}; //#999; #4b4b4b;
--calendar-disabled-bg: #{$atum-calendar-disabled-bg}; //#fff; rgba(0,0,0,.5);
--calendar-select-bg-url: #{$atum-calendar-select-bg-url} #{"/* rtl:"}$atum-calendar-select-bg-url-rtl#{"*/"};
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
--calendar-week-bg: var(--gray-700);
--calendar-buttons-color: var(--template-bg-dark-20);
--calendar-select-bg-url: url("../../images/calendar-select-bg-dark.svg") /*rtl:url("../../images/calendar-select-bg-dark-rtl.svg")*/;
--calendar-select-bg-color: #{$form-select-bg-dark};
.calendar-container {
tr.time {
&:hover, &:focus, &:active {
background-color: transparent;
}
}
}

1
build/media_source/templates/administrator/atum/scss/blocks/_edit.scss
View File

@ -20,4 +20,5 @@
box-shadow: none;
}
}
}

41
build/media_source/templates/administrator/atum/scss/blocks/_form.scss
View File

@ -2,35 +2,45 @@
.form-control {
max-width: $input-max-width;
background: $form-control-bg;
border: $form-control-border;
&:disabled,
&[readonly] {
background-color: var(--gray-200);
background-color: $form-control-bg-disabled;
opacity: 1;
&:hover,
&:active,
&:focus {
cursor: not-allowed;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
&:disabled,
&[readonly] {
background-color: var(--gray-800);
}
}
&:focus:not(:disabled):not([readonly]) {
border: 1px solid var(--template-link-color) !important;
}
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: var(--template-bg-dark-50);
background-color: $file-selector-btn-bg-hvr;
}
&.invalid {
border-color: var(--danger);
}
&.valid {
border-color: var(--success);
}
&::placeholder {
font-size: .8rem;
font-style: italic;
opacity: .9;
}
&::-webkit-file-upload-button,
&::file-selector-button {
background-color: var(--template-bg-dark-70);
background-color: $file-selector-btn-bg;
}
}
@ -107,14 +117,21 @@ td .form-control {
// Validation
.invalid {
color: var(--danger);
border-color: var(--danger);
}
label.invalid {
color: var(--danger-text);
}
.valid {
border-color: var(--success);
}
label.valid {
color: var(--success-text);
}
.form-control-feedback {
display: block;
}

40
build/media_source/templates/administrator/atum/scss/blocks/_global.scss
View File

@ -16,16 +16,8 @@ body {
margin: 0;
text-align: start;
&.admin {
background-color: var(--template-bg-dark-5);
}
@if $enable-dark-mode {
@include color-mode(dark) {
&.admin {
background-color: var(--template-bg-dark-90);
}
}
&.admin, &#subhead-container {
background-color: $admin-background;
}
&.monochrome {
@ -67,6 +59,7 @@ body {
a.page-link {
padding: $pagination-padding-y $pagination-padding-x;
}
}
}
@ -138,6 +131,7 @@ body .container-main {
position: relative;
padding-right: 0;
padding-left: 0;
background: var(--main-bg);
}
.content {
@ -153,9 +147,9 @@ body .container-main {
}
body:not(.contentpane) .main-card {
background: var(--body-bg);
background: $main-card-bg;
border-radius: $border-radius;
box-shadow: $atum-box-shadow;
box-shadow: var(--atum-box-shadow);
}
.row-selected {
@ -201,18 +195,10 @@ a[target="_blank"]::before {
}
.text-muted {
color: var(--template-text-dark) !important;
color: $text-muted-color;
opacity: .7;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.text-muted {
color: var(--template-text-light) !important;
}
}
}
.card-columns {
display: grid;
grid-gap: 0 15px;
@ -243,8 +229,8 @@ a[target="_blank"]::before {
details {
padding: .5rem 1rem;
margin: 0 0 2rem;
background: var(--template-bg-dark-3);
border: 1px solid var(--template-bg-dark-10);
background: $details-bg;
border: $details-border;
border-radius: $border-radius;
summary {
@ -256,14 +242,6 @@ details {
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
details {
background: var(--template-bg-dark-90);
}
}
}
// meter element
meter {
width: 100%;

31
build/media_source/templates/administrator/atum/scss/blocks/_header.scss
View File

@ -2,7 +2,7 @@
.header {
z-index: $zindex-header;
color: $white;
background: var(--template-bg-dark);
background: $header-bg;
&-inside {
display: flex;
@ -25,7 +25,7 @@
height: 100%;
padding: 12px 5px;
overflow: hidden;
background-color: var(--template-bg-dark-70);
background-color: $header-logo-bg;
transition: all .3s ease-in-out;
&.small {
@ -86,21 +86,21 @@
.dropdown-item {
padding: .82rem .75rem;
color: $white;
background-color: var(--template-bg-dark-70);
background-color: $dropdown-item-bg; //var(--template-bg-dark-70);
> span {
margin-inline-end: .5rem;
}
&:hover {
background-color: var(--template-bg-dark);
background-color: $dropdown-item-bg-hvr; //var(--template-bg-dark);
}
}
.dropdown-header {
padding: .75rem;
font-size: inherit;
background-color: var(--template-bg-dark);
background-color: $dropdown-header-bg; //var(--template-bg-dark);
}
}
@ -131,9 +131,9 @@
align-items: center;
line-height: 1rem;
color: $white;
background-color: var(--template-bg-dark-60);
background-color: $header-item-content-bg;
border: none;
border-radius: 22px;
border-radius: $header-item-content-border-radius;
padding-inline-end: 4px;
a,
@ -147,12 +147,12 @@
}
&:not(.no-link):not(.joomlaversion):hover {
background-color: var(--template-bg-dark-50);
background-color: $header-item-content-bg-hvr;
}
&.joomlaversion {
color: var(--bluegray);
background-color: transparent;
color: $header-item-content-jversion-color;
background-color: $header-item-content-jversion-bg;
.header-item-text {
padding-inline-end: 12px;
@ -228,3 +228,14 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.header-item-content:not(.joomlaversion) {
border: map-get($atum-colors-dark, "atum-btn-primary-border");
}
.header-item-icon > * {
background: var(--header-bg);
}
}
}

10
build/media_source/templates/administrator/atum/scss/blocks/_icons.scss
View File

@ -26,16 +26,16 @@
.#{$jicon-css-prefix}-publish,
.#{$jicon-css-prefix}-check,
.#{$fa-css-prefix}-check {
color: var(--success);
border-color: var(--success);
color: $icon-success;
border-color: $icon-success;
}
.#{$jicon-css-prefix}-home,
.#{$jicon-css-prefix}-color-featured,
.#{$jicon-css-prefix}-star.featured,
.#{$fa-css-prefix}-star.featured {
color: $warning;
border-color: $warning;
color: var(--featured-icon-color);
border-color: var(--featured-icon-color);
}
.#{$jicon-css-prefix}-folder,
@ -51,7 +51,7 @@
height: auto;
font-size: 1.2rem;
line-height: 1rem;
color: var(--template-text-dark);
color: $icon-checkedout-color; //var(--template-text-dark);
border: 0;
}

24
build/media_source/templates/administrator/atum/scss/blocks/_layout.scss
View File

@ -2,32 +2,18 @@
width: 100%;
padding: 1vw 2vw;
margin-bottom: 1rem;
color: var(--template-text-dark);
border: 1px solid var(--template-bg-dark-20);
color: $options-form-color;
background: $options-form-bg;
border: $options-form-border;
> legend {
float: none;
width: auto;
padding: 0 1rem;
font-weight: $font-weight-bold;
color: var(--template-text-dark);
background-color: var(--body-bg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
> legend {
color: var(--template-text-light);
}
}
color: $options-form-legend-color;
background-color: $options-form-legend-bg;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.options-form {
color: var(--template-text-light);
}
}
}

32
build/media_source/templates/administrator/atum/scss/blocks/_login.scss
View File

@ -30,7 +30,7 @@
color: var(--template-text-dark);
background: var(--body-bg);
border-radius: 10px;
box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
box-shadow: $login-box-shadow;
@include media-breakpoint-down(lg) {
margin-bottom: 3rem;
@ -97,7 +97,7 @@
input:focus,
select:focus {
box-shadow: inset 0 0 1px 1px var(--template-contrast);
box-shadow: $login-focus-box-shadow;
}
h1 {
@ -151,6 +151,14 @@
font-size: ($font-size-base * 1.125);
color: $white;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.card-header {
background: transparent;
}
}
}
}
#sidebar {
@ -170,6 +178,15 @@
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.card {
background: rgba(0, 0, 0, .4);
}
}
}
@include media-breakpoint-down(md) {
position: relative;
bottom: 0;
@ -210,18 +227,9 @@
}
label {
color: $darkblue;
color: $login-label-color;
}
@if $enable-dark-mode {
@include color-mode(dark) {
label {
color: var(--white);
}
}
}
.com_login .sidebar-wrapper .main-brand {
flex: 1;
flex-basis: auto;

102
build/media_source/templates/administrator/atum/scss/blocks/_modals.scss Executable file → Normal file
View File

@ -10,7 +10,7 @@
color: var(--template-text-dark);
background: var(--white);
border-color: var(--whiteoffset);
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .25);
box-shadow: $modal-btn-box-shadow;
}
.btn-primary:not([href]),
@ -175,7 +175,7 @@ joomla-dialog {
padding: 0;
border: 1px solid var(--border-color-translucent);
border-radius: .3rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
box-shadow: $modal-joomla-dialog-box-shadow;
@include media-breakpoint-up(xxl) {
width: 80vw;
@ -218,12 +218,13 @@ joomla-dialog {
width: 66px;
height: 66px;
content: "";
background: url("../../../../system/images/ajax-loader.gif") no-repeat center;
background: url("../../../../system/images/ajax-loader.gif") no-repeat center; // TODO: use svg animation?
transform: translate(-50%, -50%);
}
}
}
}
// Dialog animation
joomla-dialog dialog[open] {
animation: dialog-show .4s ease normal;
@ -232,6 +233,7 @@ joomla-dialog dialog[open] {
animation: none;
}
}
@keyframes dialog-show {
0% {
opacity: 0;
@ -244,6 +246,7 @@ joomla-dialog dialog[open] {
transform: translateY(0);
}
}
// Dialog elements
.joomla-dialog-container {
position: relative;
@ -251,6 +254,7 @@ joomla-dialog dialog[open] {
display: flex;
flex-flow: column;
width: 100%;
background: var(--body-bg);
.buttons-holder {
display: flex;
@ -263,6 +267,7 @@ joomla-dialog dialog[open] {
}
}
}
.joomla-dialog-header {
position: relative;
display: flex;
@ -284,6 +289,7 @@ joomla-dialog dialog[open] {
display: none;
}
}
.joomla-dialog-body {
position: relative;
box-sizing: border-box;
@ -305,11 +311,13 @@ joomla-dialog dialog[open] {
joomla-dialog.loading & {
opacity: 0;
}
joomla-dialog.loaded & {
opacity: 1;
transition: opacity .4s ease;
}
}
.joomla-dialog-footer {
position: relative;
padding: 1rem;
@ -347,3 +355,91 @@ joomla-dialog dialog[open] {
}
}
}
.modal-content {
background-color: var(--body-bg);
}
// dark
@if $enable-dark-mode {
@include color-mode(dark) {
.modal {
.btn {
&.btn-primary, &.btn-primary:not([href]) {
color: map-get($atum-colors-dark, "btn-primary-color");
background: map-get($atum-colors-dark, "btn-primary-bg");
border: map-get($atum-colors-dark, "btn-primary-border");
&:hover {
color: map-get($atum-colors-dark, "btn-primary-color");
background: map-get($atum-colors-dark, "btn-primary-bg-hvr");
border: map-get($atum-colors-dark, "btn-primary-border-hvr");
box-shadow: none;
}
}
&.btn-success, &.btn-success:not([href]) {
color: map-get($atum-colors-dark, "atum-btn-success-icon");
background: map-get($atum-colors-dark, "atum-btn-success-bg");
border: map-get($atum-colors-dark, "atum-btn-success-border");
box-shadow: none;
&:hover {
color: map-get($atum-colors-dark, "atum-btn-success-icon");
background: map-get($atum-colors-dark, "atum-btn-success-bg-hvr");
border: map-get($atum-colors-dark, "atum-btn-success-border");
box-shadow: none;
}
&:disabled {
background: map-get($atum-colors-dark, "body-bg");
border: map-get($atum-colors-dark, "form-control-border-disabled");
opacity: .5;
}
}
&.btn-danger, &.btn-danger:not([href]) {
color: map-get($atum-colors-dark, "atum-btn-danger-color");
background: map-get($atum-colors-dark, "atum-btn-danger-bg");
border: map-get($atum-colors-dark, "atum-btn-danger-border");
box-shadow: none;
&:hover {
color: map-get($atum-colors-dark, "atum-btn-danger-color");
background: map-get($atum-colors-dark, "atum-btn-danger-bg-hvr");
border: map-get($atum-colors-dark, "atum-btn-danger-border-hvr");
box-shadow: none;
}
}
&.btn-secondary, &.btn-secondary:not([href]) {
color: map-get($atum-colors-dark, "btn-secondary-color");
background: map-get($atum-colors-dark, "btn-secondary-bg");
border: map-get($atum-colors-dark, "btn-secondary-border");
box-shadow: none;
&:hover {
color: map-get($atum-colors-dark, "btn-secondary-color");
background: map-get($atum-colors-dark, "btn-secondary-bg-hvr");
border: map-get($atum-colors-dark, "btn-secondary-border-hvr");
box-shadow: none;
}
}
&:disabled {
background: map-get($atum-colors-dark, "body-bg");
opacity: .5;
}
}
}
.joomla-dialog-container .changelog .changelog__item .changelog__tag {
background: map-get($atum-colors-dark, "body-bg");
}
}
}

103
build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
View File

@ -1,7 +1,7 @@
// Quick Icons
.quick-icons {
background-color: var(--body-bg);
background-color: $quickicon-bg;
.nav {
display: grid;
@ -19,9 +19,12 @@
.quickicon {
--text-color: var(--template-quickicon-color);
--bg-color: hsl(var(--hue), 60%, 97%);
--bg-color: var(--template-quickicon-bg);
--icon-color: var(--template-quickicon-color);
--bg-color-hvr: var(--template-bg-dark);
--icon-color-hvr: #{$quickicon-color-hvr};
--bg-color-hvr: var(--template-quickicon-bg-hvr);
--text-color-hvr: #{$quickicon-link-hvr};
--text-amount-color: var(--template-quickicon-color);
display: flex;
flex-grow: 1;
@ -36,13 +39,18 @@
background-color: var(--bg-color);
transition: all .25s ease;
&:focus-visible {
border: 1px solid var(--link-color);
outline: 0;
}
.quickicon-icon {
margin-top: .5rem;
margin-inline-start: .2rem;
color: var(--icon-color);
> * {
font-size: $quickicon-icon-size;
color: var(--icon-color);
}
}
@ -56,17 +64,11 @@
padding: .25rem .5rem;
font-weight: $bold-weight;
line-height: 1rem;
background: hsl(var(--hue),50%,93%);
color: var(--text-amount-color);
background: $quickicon-amount-bg;
border-radius: $border-radius;
transition: all .25s ease;
margin-inline-start: .5rem;
@if $enable-dark-mode {
/* stylelint-disable max-nesting-depth */
@include color-mode(dark) {
/* stylelint-enable max-nesting-depth */
color: var(--template-bg-dark-80);
}
}
}
.j-links-link {
@ -78,42 +80,58 @@
&:hover,
&:focus,
&:active {
color: $white;
color: var(--text-color-hvr);
text-decoration: none;
background: var(--bg-color-hvr);
--text-amount-color: var(--bg-color-hvr);
.quickicon-amount {
color: $quickicon-amount-bg;
background: var(--icon-color);
}
.quickicon-icon {
color: var(--icon-color-hvr);
}
}
&.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);
}
&.warning,
&.danger {
--text-color: var(--danger);
--bg-color: #f4f0f0;
--icon-color: #ce8484;
--bg-color-hvr: var(--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(--success);
--bg-color: #f3f9f3;
--icon-color: #55a258;
--bg-color-hvr: var(--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);
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.quickicon {
--bg-color: var(--template-bg-dark-80);
--bg-color-hvr: var(--template-bg-dark-65);
}
}
}
.quickicon-info {
display: flex;
align-items: flex-end;
@ -122,7 +140,7 @@
.quickicon-linkadd {
width: 2.5rem;
font-size: 1.2rem;
background: hsl(var(--hue),50%,93%);
background: $quickicon-linkadd-bg;
transition: all .25s ease;
a {
@ -132,23 +150,18 @@
> * {
margin-bottom: 10px;
color: var(--template-quickicon-color);
color: $quickicon-linkadd-color;
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
> * {
/* stylelint-enable max-nesting-depth */
color: var(--template-bg-dark-80);
}
}
&:focus-visible {
border: 1px solid var(--link-color);
outline: 0;
}
&:hover,
&:focus,
&:active {
background: var(--template-bg-dark);
background: var(--quickicon-linkadd-bg-hvr);
* {
color: $white;
@ -162,8 +175,8 @@
display: flex;
min-height: 6rem;
overflow: hidden;
border: 1px solid hsl(var(--hue),50%,93%);
border-radius: 4px;
border: $quickicon-border;
border-radius: $quickicon-border-radius;
}
}

28
build/media_source/templates/administrator/atum/scss/blocks/_shepard-modals.scss
View File

@ -8,13 +8,31 @@
@if $enable-dark-mode {
@include color-mode(dark) {
.shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before {
background-color: var(--dark-bg-subtle) !important;
.shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before {
background-color: #000 !important;
}
// Matches the bootstrap color on hover for btn-close
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
filter: $btn-close-white-filter !important;
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
color: var(--template-link-color) !important;
&:hover {
color: var(--template-link-hover-color) !important;
}
}
body .shepherd-button.shepherd-button-secondary:not(:disabled) {
color: var(--btn-secondary-color) !important;
background-color: var(--btn-secondary-bg) !important;
border: var(--btn-secondary-border) !important;
&:hover {
color: var(--btn-secondary-color-hvr) !important;
background-color: var(--btn-secondary-bg-hvr) !important;
}
}
}
}

14
build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss
View File

@ -15,7 +15,7 @@
display: block;
padding: .25rem;
font-weight: $font-weight-normal;
color: var(--template-text-dark);
color: $text-normal;
text-decoration: none;
&::before {
@ -26,19 +26,11 @@
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
a {
color: var(--template-text-light);
}
}
}
&.item:hover, &.active {
background-color: var(--template-bg-dark-60);
background-color: var(--sidebar-item-bg-hvr);
a {
color: var(--template-text-light);
color: var(--sidebar-item-color);
}
}
}

51
build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss
View File

@ -4,8 +4,8 @@
z-index: $zindex-sidebar;
min-height: calc(100vh - 66px);
overflow: hidden;
background-color: var(--template-sidebar-bg);
box-shadow: 0 0 20px -10px var(--template-bg-dark-50);
background-color: $sidebarwrapper-bg;
box-shadow: var(--atum-box-shadow);
.sidebar-sticky {
position: sticky;
@ -21,13 +21,13 @@
a,
.menu-dashboard,
.menu-quicktask {
color: $white;
color: $sidebar-item-color; /* $sidebar-item-color $white */
text-decoration: none;
&:hover {
color: var(--template-text-light);
color: $sidebar-item-color-hvr; /* $sidebar-item-color-hvr var(--template-text-light) */
text-decoration: none;
background-color: var(--template-bg-dark-65);
background-color: $sidebar-item-bg-hvr; /* $sidebar-item-bg-hvr var(--template-bg-dark-65) */
}
}
@ -69,10 +69,10 @@
}
.sidebar-toggle {
background: var(--template-bg-dark-60);
background: $sidebar-toggle-bg; /* $sidebar-toggle-bg var(--template-bg-dark-60) */
a {
color: $white;
color: $sidebar-toggle-link; /* $sidebar-toggle-link $white */
}
.sidebar-item-title {
@ -110,14 +110,14 @@
ul {
width: 100%;
padding: 0;
background-color: var(--template-bg-dark-75);
background-color: $main-nav-ul-bg; /* main-nav-ul-bg: var(--template-bg-dark-75) */
}
.divider {
height: 1px;
margin: 0 0 0 48px;
list-style: none;
background-color: var(--template-bg-dark-60);
background-color: $main-nav-divider-bg; /* main-nav-divider-bg: var(--template-bg-dark-60) */
}
.menuitem-group {
@ -126,7 +126,7 @@
padding-inline-start: 3rem;
.sidebar-item-title {
color: var(--template-bg-dark-30);
color: $main-nav-item-title; /* main-nav-item-title: var(--template-bg-dark-30) */
}
}
@ -148,11 +148,11 @@
}
a.mm-active {
background-color: var(--template-bg-dark-70);
background-color: $main-nav-mm-active-bg; /* main-nav-mm-active-bg: var(--template-bg-dark-70) */
}
a.mm-active + .menu-quicktask {
background-color: var(--template-bg-dark-60);
background-color: $main-nav-mm-active-quicktask-bg; /* main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60) */
}
.mm-active > .has-arrow::after {
@ -178,7 +178,7 @@
.badge {
align-self: center;
margin: 0 .3rem .25rem;
background-color: var(--template-bg-dark-60);
background-color: $main-nav-badge; /* main-nav-badge: var(--template-bg-dark-60) */
}
}
@ -215,7 +215,7 @@
padding: 0 1rem;
white-space: nowrap;
pointer-events: none;
background-color: var(--template-bg-dark-60);
background-color: $main-nav-item-title-hvr-bg; /* main-nav-item-title-hvr-bg: var(--template-bg-dark-60) */
border-end-start-radius: 0;
border-end-end-radius: $border-radius;
border-start-end-radius: $border-radius;
@ -239,7 +239,7 @@
@include media-breakpoint-down(sm) {
#menu-collapse {
display: none;
background: var(--template-bg-dark-50);
background: $mobile-menu-collapse-bg; /* mobile-menu-collapse-bg: var(--template-bg-dark-50) */
}
.toggler-burger {
@ -253,6 +253,10 @@
box-shadow: none;
}
.navbar-toggler-icon {
background-image: none;
}
.navbar-toggler-icon::before {
display: inline-block;
font: normal normal 900 28px/1 "Font Awesome 6 Free";
@ -283,3 +287,20 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-wrapper {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .05);
box-shadow: none;
.main-nav {
.badge {
color: map-get($atum-colors-dark, "btn-primary-color");
background-color: map-get($atum-colors-dark, "btn-primary-bg");
}
}
}
}
}

162
build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss
View File

@ -7,10 +7,10 @@
width: auto;
min-height: 43px;
padding: 8px 1rem;
color: var(--template-text-dark); //#0c192e;
background: $white;
background-image: linear-gradient(var(--toolbar-bg), var(--template-bg-dark-3));
box-shadow: $atum-box-shadow;
color: var(--atum-subhead-color);
background: var(--atum-subhead-bg);
background-image: var(--atum-subhead-bg-img);
box-shadow: var(--atum-box-shadow);
.row {
margin-right: 0;
@ -40,68 +40,93 @@
}
.btn {
--subhead-btn-accent: var(--template-text-dark);
--subhead-btn-icon: var(--atum-btn-icon);
--subhead-btn-icon-hover: var(--atum-btn-icon-hvr);
--subhead-btn-bg: var(--atum-btn-bg);
--subhead-btn-bg-hvr: var(--atum-btn-bg-hvr);
--subhead-btn-border: var(--atum-btn-border);
padding: 0 1rem;
margin: 5px 0;
font-size: 1rem;
line-height: $atum-toolbar-line-height;
color: var(--template-text-dark);
background: var(--body-bg);
border-color: hsl(var(--hue),20%,80%);
color: var(--atum-btn);
background: var(--subhead-btn-bg);
border: var(--subhead-btn-border);
> span {
display: inline-block;
color: var(--subhead-btn-accent);
color: var(--subhead-btn-icon);
}
&:not([disabled]):hover,
&:not([disabled]):active,
&:not([disabled]):focus {
color: rgba(255, 255, 255, .9);
background-color: var(--subhead-btn-accent);
border-color: var(--subhead-btn-accent);
color: var(--atum-btn-hvr);
background-color: var(--subhead-btn-bg-hvr);
border: var(--subhead-btn-border);
> span {
color: rgba(255, 255, 255, .9);
color: var(--subhead-btn-icon-hvr); /* $atum-btn-hvr rgba(255, 255, 255, .9); */
}
}
&.btn-success {
--subhead-btn-accent: var(--success);
}
--subhead-btn-icon: var(--atum-btn-success-icon);
--subhead-btn-icon-hover: var(--atum-btn-success-icon-hvr);
--subhead-btn-bg: var(--atum-btn-success-bg);
--subhead-btn-bg-hvr: var(--atum-btn-success-bg-hvr);
--subhead-btn-border: var(--atum-btn-success-border);
&.btn-danger {
--subhead-btn-accent: var(--danger);
}
&.btn-primary {
--subhead-btn-accent: var(--template-link-color);
}
&.btn-secondary {
--subhead-btn-accent: var(--secondary-bg);
}
&.btn-info {
--subhead-btn-accent: var(--template-bg-dark);
}
@if $enable-dark-mode {
@include color-mode(dark) {
&.btn-info {
--subhead-btn-accent: var(--template-bg-light);
/* stylelint-disable max-nesting-depth */
&:hover, &:focus, &:active {
/* stylelint-enable max-nesting-depth */
--subhead-btn-accent: var(--template-bg-dark-60);
}
}
&: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-accent: var(--template-bg-dark);
--subhead-btn-icon: var(--atum-btn-action-icon);
--subhead-btn-icon-hover: var(--atum-btn-info-action-hvr);
--subhead-btn-bg: var(--atum-btn-action);
--subhead-btn-bg-hvr: var(--atum-btn-action-bg-hvr);
--subhead-btn-border: var(--atum-btn-action-border);
display: flex;
align-items: center;
@ -114,24 +139,9 @@
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
&.btn-action {
--subhead-btn-accent: var(--template-bg-light);
/* stylelint-disable max-nesting-depth */
&:hover, &:focus, &:active {
/* stylelint-enable max-nesting-depth */
--subhead-btn-accent: var(--template-bg-dark-60);
}
}
}
}
&[disabled],
&.dropdown-toggle[disabled] {
--subhead-btn-accent: var(--template-bg-dark);
background: rgba($gray-300, .8);
background: var(--body-bg);
opacity: .5;
&:hover,
@ -142,16 +152,6 @@
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.btn {
--subhead-btn-accent: var(--template-text-light);
color: var(--template-text-light);
}
}
}
.dropdown-toggle {
&.btn {
padding-inline-end: 0;
@ -172,16 +172,7 @@
.contentpane & {
margin: -15px -15px 0;
background-image: none;
border-bottom: 1px solid var(--template-bg-dark-7);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.subhead {
background-color: var(--body-bg);
background-image: linear-gradient(var(--body-bg), var(--dark-bg));
}
border-bottom: 1px solid var(--template-bg-dark-7); // TODO: unified variables for light and dark mode
}
}
@ -206,7 +197,7 @@
z-index: $zindex-alerts;
padding: 7px 10px;
margin: 5px;
background-color: var(--template-bg-dark);
background-color: var(--template-bg-dark); // TODO: unified variables for light and dark mode
border-radius: 30px;
.toggler-toolbar-icon::before {
@ -247,3 +238,14 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.subhead {
border-top: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
}
}
}

16
build/media_source/templates/administrator/atum/scss/blocks/_treeselect.scss
View File

@ -7,15 +7,7 @@
.nav-header {
font-weight: $font-weight-bold;
color: var(--template-bg-dark);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.nav-header {
color: var(--body-color);
}
}
color: $nav-header-color;
}
li {
@ -32,7 +24,7 @@
height: 1px;
margin: auto;
content: "";
background-color: $treeselect-line-color;
background-color: var(--treeselect-line-color);
}
&::after {
@ -43,7 +35,7 @@
width: 1px;
height: 100%;
content: "";
background-color: $treeselect-line-color;
background-color: var(--treeselect-line-color);
}
&:last-child {
@ -101,7 +93,7 @@
&::after {
margin-left: 0;
font-size: 1rem;
color: var(--template-text-dark);
color: var(--treeselect-dropdown-toggle);
}
}
}

74
build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
View File

@ -21,7 +21,11 @@
}
.card-header {
--card-bg: hsla(0, 0%, 100%, .7);
--card-bg: #{$card-bg};
a {
font-weight: normal;
}
.btn {
margin-top: .25em;
@ -32,6 +36,7 @@
.card-body {
padding: 0;
overflow: hidden;
background-color: $card-body-bg;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
@ -42,15 +47,7 @@
> * {
padding: 0;
color: var(--template-bg-dark-70);
}
@if $enable-dark-mode {
@include color-mode(dark) {
> * {
color: var(--body-color);
}
}
color: $module-actions-color;
}
}
@ -76,7 +73,7 @@
&:active {
color: #fff;
text-decoration: none;
background: var(--template-bg-dark);
background: var(--cpanel-addmodule-hover);
}
> span {
@ -93,12 +90,22 @@
.cpanel-modules {
.list-group {
border-top: 1px solid $list-group-border-color;
border-top: 1px solid $atum-list-group-border-color;
}
.list-group-item {
--list-group-bg: #{$atum-list-group-bg};
a:not(.btn) {
color: rgb(var(--link-color-rgb, $table-link-color));
}
a:not(.btn):hover {
color: rgb(var(--link-color-rgb-hvr));
}
a {
font-weight: 500;
font-weight: normal;
text-decoration: underline;
}
@ -106,6 +113,12 @@
text-decoration: none;
}
.btn.btn-info {
color: $atum-btn-info;
background: $atum-btn-info-bg;
border: $atum-btn-info-border;
}
.list-group-item a > span {
&[class^="#{$jicon-css-prefix}-"],
&[class*=" #{$jicon-css-prefix}-"],
@ -115,7 +128,7 @@
padding: .5rem;
color: rgba(255, 255, 255, .9);
background: var(--#{$prefix}link-color);
box-shadow: $atum-box-shadow;
box-shadow: var(--atum-box-shadow);
&:hover {
background: var(--#{$prefix}link-hover-color);
@ -170,3 +183,36 @@
padding-inline-start: 1rem;
margin-inline-start: 8px;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.com_cpanel {
.card {
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
.list-group-item:last-child {
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.list-group-item {
&:hover {
background: rgba(0,0,0,.1);
}
}
}
.cpanel-add-module {
&:hover,
&:focus,
&:active {
background: var(--btn-primary-bg-hvr);
}
}
}
.sample-data__desc {
border-inline-start: 4px solid rgba(255, 255, 255, .1);
}
}
}

130
build/media_source/templates/administrator/atum/scss/pages/_com_media.scss
View File

@ -1,16 +1,128 @@
:root {
--com-media-manager-overlay-header-bg: var(--template-bg-dark-5);
--com-media-manager-infobar-dt-color: rgba(0, 0, 0, .54);
--com-media-manager-content-bg: var(--body-bg);
--com-media-manager-overlay-bg: var(--template-bg-dark-3);
--com-media-manager-disk-name-color: var(--template-text-dark);
--com-media-manager-overlay-header-bg: #{$media-manager-overlay-header-bg};
--com-media-manager-infobar-dt-color: #{$media-manager-infobar-dt-color};
--com-media-manager-content-bg: #{$media-manager-content-bg};
--com-media-manager-content-color: #{$media-manager-content-color};
--com-media-manager-overlay-bg: #{$media-manager-overlay-bg};
--com-media-manager-disk-name-color: #{$media-manager-disk-name-color};
--com-media-manager-tree-item-hover-bg: #{$media-manager-tree-item-hover-bg};
--com-media-manager-toolbar-icon-color: #{$media-manager-toolbar-icon-color};
}
.file-background, .folder-background {
padding-bottom: 100%;
background-color: $media-browser-file-bg; //hsl(var(--hue), 20%, 97%);
border: $media-manager-border; //1px solid hsl(var(--hue), 35%, 95%);
}
.file-icon, .folder-icon, .media-dragoutline {
color: $media-manager-file-icon-color; //?? inherit
}
.media-browser-item-preview {
border: $media-manager-border; //1px solid hsl(var(--hue), 35%, 95%);
}
.media-drive {
background: $media-drive-bg;
border: $media-manager-border;
}
.media-toolbar {
background-color: $media-toolbar-bg; //var(--com-media-manager-content-bg,#fff);
border-bottom: $media-manager-border; //1px solid var(--template-bg-dark-7);
border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7)
box-shadow: 0 -1px 0 0 $media-manager-border; //var(--template-bg-dark-7);
}
.media-toolbar-icon {
-webkit-border-start: $media-manager-border; //1px solid var(--template-bg-dark-7);
color: $media-toolbar-icon-color; //var(--com-media-manager-toolbar-icon-color,var(--template-bg-dark-60));
background-color: $media-toolbar-icon-bg; //transparent;
border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7);
}
.media-toolbar-icon:hover {
background-color: $media-toolbar-icon-bg-hvr; //#f0f0f0;
}
.media-breadcrumb {
-webkit-border-start: $media-manager-border; //1px solid var(--template-bg-dark-7)
border-inline-start: $media-manager-border; //1px solid var(--template-bg-dark-7)
}
.media-breadcrumb-item a {
color: $media-manager-content-color; //var(--com-media-manager-content-color,var(--link-color));
}
.media-breadcrumb-item {
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg);
a {
color: var(--btn-primary-color);
}
}
.media-breadcrumb-item::after {
border-inline-start-color: var(--btn-primary-bg); //var(--com-media-manager-overlay-bg,var(--template-bg-dark-3));
}
.image-background {
background-color: $image-bg; // #fff;
background-image: $image-bg-image; //linear-gradient(45deg,hsl(var(--hue),20%,97%) 25%,transparent 25%,transparent 75%,#eee 75%,hsl(var(--hue),20%,97%) 100%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,hsl(var(--hue),20%,97%) 75%,hsl(var(--hue),20%,97%) 100%);
}
.media-tree-item .item-icon {
color: var(--template-link-color);
}
.media-tree-item.active > a .item-icon {
color: var(--template-link-color); // TODO could be another color in future Versions
}
.field-media-wrapper .button-select {
background-color: var(--success);
}
.media-infobar {
border-inline-start: $media-manager-border; //1px solid $border-color;
h2 {
border-bottom: $media-manager-border;
}
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
--com-media-manager-overlay-bg: var(--template-bg-dark-90);
--com-media-manager-infobar-dt-color: rgba(255, 255, 255, .54);
--com-media-manager-overlay-header-bg: var(--template-bg-dark-80);
--com-media-manager-disk-name-color: var(--template-text-light);
joomla-field-media .field-media-preview {
background-color: var(--gray-700);
border-color: rgba(255, 255, 255, .15);
}
joomla-field-mediamore details {
color: var(--template-text-light);
background: #1c1c1c;
}
joomla-field-mediamore summary {
background: #131313;
}
.media-infobar {
background-color: var(--main-bg);
h2 {
background-color: var(--body-bg);
}
dt {
font-weight: bold;
color: rgba(255,255,255,.9);
}
dd {
color: rgba(255,255,255,.7);
}
.infobar-close {
color: #fff;
&:hover {
color: #efefef;
}
}
}
}
}

35
build/media_source/templates/administrator/atum/scss/pages/_com_modules.scss
View File

@ -1,33 +1,22 @@
.new-modules {
// We use the same colors for the new module section as we do for the quickicons.
--text-color: var(--template-quickicon-color);
--bg-color: hsl(var(--hue), 60%, 97%);
--bg-color-hvr: var(--template-bg-dark);
--icon-color: var(--template-quickicon-color);
--icon-color-hvr: hsl(var(--hue), 50%, 93%);
--text-color: $new-modules-color;
--bg-color: $new-modules-bg;
--bg-color-hvr: $new-modules-bg-hvr;
--icon-color: $new-modules-icon-color;
--icon-color-hvr: $new-modules-icon-color-hvr;
.card-columns {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.new-modules {
--bg-color: var(--template-bg-dark-80);
--bg-color-hvr: var(--template-bg-dark-65);
--icon-color: var(--template-bg-dark-80);
--icon-color-hvr: var(--template-quickicon-color);
}
}
}
.new-module {
display: flex;
overflow: hidden;
color: var(--text-color);
background-color: var(--bg-color);
border: 1px solid hsl(var(--hue), 50%, 93%);
color: $new-module-color;
background-color: $new-module-bg;
border: $new-module-border;
border-radius: $border-radius;
* {
@ -57,18 +46,18 @@
justify-content: center;
width: 2.5rem;
font-size: 1.2rem;
background: hsl(var(--hue), 50%, 93%);
background: $new-module-link-bg;
span {
margin-bottom: 10px;
color: var(--icon-color);
color: $new-module-link-span;
}
.new-module:hover & {
background: var(--bg-color-hvr);
background: $new-module-link-hvr;
span {
color: var(--icon-color-hvr);
color: $new-module-link-span-hvr;
}
}
}

39
build/media_source/templates/administrator/atum/scss/pages/_com_scheduler.scss
View File

@ -1,33 +1,22 @@
.new-tasks {
// We use the same colours for the new task section as we do for the quickicons.
--text-color: var(--template-quickicon-color);
--bg-color: hsl(var(--hue), 60%, 97%);
--bg-color-hvr: var(--template-bg-dark);
--icon-color: var(--template-quickicon-color);
--icon-color-hvr: hsl(var(--hue), 50%, 93%);
--text-color: #{$quickicon-color};
--bg-color: var(--template-quickicon-bg);
--bg-color-hvr: var(--template-quickicon-bg-hvr);
--icon-color: #{$quickicon-color};
--icon-color-hvr: #{$quickicon-link-hvr};
.card-columns {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.new-tasks {
--bg-color: var(--template-bg-dark-80);
--bg-color-hvr: var(--template-bg-dark-65);
--icon-color: var(--template-bg-dark-80);
--icon-color-hvr: var(--template-quickicon-color);
}
}
}
.new-task {
display: flex;
overflow: hidden;
color: var(--text-color);
background-color: var(--bg-color);
border: 1px solid hsl(var(--hue), 50%, 93%);
border: $quickicon-border;
border-radius: $border-radius;
* {
@ -51,21 +40,29 @@
font-size: .875rem;
}
:hover {
color: #{$quickicon-link-hvr};
background: var(--bg-color-hvr);
.new-task-title {
color: #{$quickicon-link-hvr};
}
}
&-link {
display: flex;
align-items: flex-end;
justify-content: center;
width: 2.5rem;
font-size: 1.2rem;
background: hsl(var(--hue), 50%, 93%);
background: $quickicon-linkadd-bg;
span {
margin-bottom: 10px;
color: var(--icon-color);
color: var(--quickicon-linkadd-color);
}
.new-task:hover & {
background: var(--bg-color-hvr);
&:hover {
background: var(--template-bg-dark);
span {
color: var(--icon-color-hvr);

34
build/media_source/templates/administrator/atum/scss/pages/_com_users.scss
View File

@ -23,15 +23,7 @@
&.view-user, &.view-methods {
#com-users-methods-reset-container {
background-color: var(--light);
}
@if $enable-dark-mode {
@include color-mode(dark) {
#com-users-methods-reset-container {
background-color: var(--dark-bg-subtle);
}
}
background-color: $users-methods-reset-cont-bg;
}
.com-users-methods-list-method {
@ -56,17 +48,7 @@
/** This is applied to headers that aren't an active method **/
&:not(.com-users-methods-list-method-active) .com-users-methods-list-method-header {
background-color: var(--light);
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
&:not(.com-users-methods-list-method-active) .com-users-methods-list-method-header {
/* stylelint-enable max-nesting-depth */
background-color: var(--dark-bg-subtle);
}
}
background-color: $users-method-header-inact-bg;
}
.com-users-methods-list-method-header {
@ -83,17 +65,7 @@
@extend .pb-2;
@extend .rounded-2;
background-color: var(--light);
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
.com-users-methods-list-method-image {
/* stylelint-enable max-nesting-depth */
background-color: var(--dark-bg-subtle);
}
}
background-color: $users-method-image;
}
.com-users-methods-list-method-title {

11
build/media_source/templates/administrator/atum/scss/system/fields/_calendar.scss Normal file
View File

@ -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;
}
}
}

11
build/media_source/templates/administrator/atum/scss/system/fields/_switcher.scss Normal file
View File

@ -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;
}

33
build/media_source/templates/administrator/atum/scss/system/searchtools/searchtools.scss
View File

@ -1,4 +1,5 @@
@import "../../variables";
@import "../../../../../../../../media/vendor/bootstrap/scss/mixins";
// Search tools
@ -27,7 +28,19 @@
}
.js-stools-btn-clear {
background-color: var(--template-bg-dark);
background-color: $js-stools-btn-clear-bg;
&[disabled],
&.dropdown-toggle[disabled] {
background: $js-stools-btn-clear-disabled-bg;
border: $js-stools-btn-clear-disabled-border;
opacity: .5;
&:hover,
&:active,
&:focus {
cursor: not-allowed;
}
}
}
}
@ -59,3 +72,21 @@
margin: 5px 0;
margin-inline-end: 8px;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.js-stools-container-bar .btn-toolbar .js-stools-btn-clear {
&[disabled],
&.dropdown-toggle[disabled] {
background: var(--body-bg);
border: var(--btn-secondary-border);
opacity: .5;
&:hover,
&:active,
&:focus {
cursor: not-allowed;
}
}
}
}
}

8
build/media_source/templates/administrator/atum/scss/template.scss
View File

@ -23,7 +23,12 @@
// jQuery Minicolors
@import "../../../../../../media/system/scss/jquery-minicolors";
// System overrides
@import "system/fields/calendar";
@import "system/fields/switcher";
// Vendor overrides
@import "vendor/bootstrap/accordion";
@import "vendor/bootstrap/badge";
@import "vendor/bootstrap/buttons";
@import "vendor/bootstrap/card";
@ -32,6 +37,7 @@
@import "vendor/bootstrap/dropdown";
@import "vendor/bootstrap/form";
@import "vendor/bootstrap/lists";
@import "vendor/bootstrap/list-group";
@import "vendor/bootstrap/modal";
@import "vendor/bootstrap/pagination";
@import "vendor/bootstrap/reboot";
@ -85,6 +91,7 @@
}
}
// Check if dark mode is enabled
@if $enable-dark-mode {
@include color-mode(dark, true) {
@each $color, $value in $atum-colors-dark {
@ -205,6 +212,7 @@
}
.bg-warning {
color: #000;
background-color: var(--warning) !important;
}

15
build/media_source/templates/administrator/atum/scss/vendor/_dragula.scss vendored
View File

@ -5,12 +5,23 @@
z-index: $zindex-popover !important;
display: table;
margin: 0 !important;
color: var(--drag-color) !important;
cursor: move;
background-color: $teal;
background-color: var(--drag-background-color);
opacity: .8;
td, th {
background-color: $teal;
color: var(--drag-color) !important;
background-color: var(--drag-background-color);
a {
color: var(--drag-color) !important;
}
.tbody-icon [class^="icon-"] {
color: var(--drag-color) !important;
border-color: var(--drag-color) !important;
}
}
}

9
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_accordion.scss vendored Normal file
View 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;
}
}
}

90
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_buttons.scss vendored
View File

@ -13,32 +13,98 @@
}
}
.btn-success {
background-color: var(--success);
}
.btn-primary {
color: var(--template-text-light);
background-color: var(--template-bg-dark-60);
border-color: var(--template-bg-dark-60);
color: $btn-primary-color; /* var(--template-text-light); */
background-color: $btn-primary-bg; /* var(--template-bg-dark-60); */
border: $btn-primary-border; /* var(--template-bg-dark-60); */
&:hover,
&:focus,
&:active {
background-color: var(--template-bg-dark-70);
border-color: var(--template-bg-dark-90);
background-color: $btn-primary-bg-hvr; /* var(--template-bg-dark-70); */
border: $btn-primary-border-hvr; /* var(--template-bg-dark-90); */
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
background-color: var(--template-bg-dark);
border-color: var(--template-bg-dark);
background-color: $btn-primary-toggle-bg; /* var(--template-bg-dark); */
border-color: $btn-primary-toggle-border; /* var(--template-bg-dark); */
}
}
.btn-secondary {
background-color: var(--template-bg-dark-60);
border-color: var(--template-bg-dark-60);
.btn-outline-secondary {
color: $btn-outline-secondary-color;
background-color: $btn-outline-secondary-bg; /* var(--template-bg-dark-60); */
border: $btn-outline-secondary-border; /* var(--template-bg-dark-60); */
}
.input-group-text {
background-color: var(--template-bg-dark);
border-color: var(--template-bg-dark);
background-color: $input-group-text-bg; /* var(--template-bg-dark); */
border: $input-group-text-border; /* var(--template-bg-dark); */
}
.btn-secondary {
color: var(--btn-secondary-color);
background: var(--btn-secondary-bg);
border: var(--btn-secondary-border);
&:hover {
color: var(--btn-secondary-color-hvr);
background: var(--btn-secondary-bg-hvr);
}
}
.btn-light {
background: var(--btn-light-bg); //#f8f9fa (light)
border: var(--btn-light-bg); //#f8f9fa (light)
&:hover,
&:focus,
&:active {
background-color: var(--btn-light-bg-hvr); /* var(--template-bg-dark-70); */
}
}
.btn-dark {
color: var(--btn-dark-color);
background: var(--btn-dark-bg);
&:hover {
color: var(--btn-dark-color-hvr);
background: var(--btn-dark-bg-hvr);
}
}
.btn-info {
color: var(--btn-info-color);
background: var(--btn-info-bg);
border: var(--btn-info-border);
&:hover {
color: var(--atum-btn-info-color-hvr);
background: var(--btn-info-bg-hvr);
}
}
// dark
@if $enable-dark-mode {
@include color-mode(dark) {
.btn-info {
color: var(--btn-info-color);
background: var(--btn-info-bg);
border: var(--btn-info-border);
&:hover,
&:focus,
&:active {
color: var(--atum-btn-info-color-hvr);
background: var(--btn-info-bg-hvr);
border: var(--btn-info-border);
}
}
}
}

18
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss vendored
View File

@ -21,7 +21,8 @@
.content {
.card {
box-shadow: $atum-box-shadow;
background: var(--card-body-bg);
box-shadow: var(--atum-box-shadow);
}
.card-header {
@ -29,21 +30,16 @@
align-items: center;
padding: 1rem 1rem .75rem;
font-weight: $font-weight-bold;
color: var(--template-bg-dark);
color: var(--card-header-color);
background-color: var(--card-bg);
a {
font-weight: normal;
}
> [class^="icon-"],
> img {
margin-inline-end: .5rem;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.card-header {
color: var(--body-color);
background-color: var(--body-bg);
}
}
}
}

56
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss vendored
View File

@ -1,28 +1,28 @@
// Collapse
.accordion {
.card-header {
display: block;
font-size: $h5-font-size;
font-weight: $font-weight-bold;
line-height: $headings-line-height;
}
/**
* TODO: This seems fairly specifically built for the menu types view and might be better scoped to
* that view rather than just being overridden for everything.
*/
.list-group-item {
--list-group-color: var(--link-color);
--list-group-bg: var(--white-offset);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.list-group-item {
--list-group-bg: var(--gray-800);
}
}
}
}
// Collapse
.accordion {
.card-header {
display: block;
font-size: $h5-font-size;
font-weight: $font-weight-bold;
line-height: $headings-line-height;
}
/**
* TODO: This seems fairly specifically built for the menu types view and might be better scoped to
* that view rather than just being overridden for everything.
*/
.list-group-item {
--list-group-color: var(--link-color);
--list-group-bg: var(--white-offset);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.list-group-item {
--list-group-bg: var(--gray-800);
}
}
}
}

68
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss vendored
View File

@ -1,5 +1,3 @@
@import "../../variables-dark";
// Custom Forms
.custom-select {
@ -9,7 +7,12 @@
.form-select {
max-width: $input-max-width;
cursor: pointer;
background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};;
background: $form-select-background;
border: $form-select-border;
[dir="rtl"] & {
background: $form-select-background-rtl;
}
&[multiple] {
padding: 0;
@ -24,90 +27,57 @@
}
}
// TODO: Archived State has a green border instead blue
&.form-select-success,
&.custom-select-success {
color: var(--success);
color: var(--success-text);
background-color: var(--success);
border-color: var(--success);
option {
color: $form-select-color;
background-color: var(--white-offset);
}
@if $enable-dark-mode {
@include color-mode(dark) {
option {
background-color: var(--gray-800);
}
}
background-color: $form-select-success-bg;
}
}
&.form-select-danger,
&.custom-select-danger {
color: var(--danger);
color: var(--danger-text);
background-color: var(--danger);
border-color: var(--danger);
option {
color: $form-select-color;
background-color: var(--white-offset);
}
@if $enable-dark-mode {
@include color-mode(dark) {
option {
background-color: var(--gray-800);
}
}
background-color: $form-select-danger-bg;
}
}
&:disabled {
cursor: default;
background-color: var(--gray-200);
background-color: $form-select-disabled-bg;
background-image: none;
border: 0;
box-shadow: none;
}
@if $enable-dark-mode {
@include color-mode(dark) {
&:disabled {
background-color: var(--gray-800);
}
}
}
optgroup,
option {
color: var(--template-text-dark);
color: $form-select-option;
background-color: var(--body-bg);
&:disabled {
background-color: var(--template-bg-dark-5);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
option {
color: var(--template-text-light);
&:disabled {
background-color: var(--template-bg-dark-90);
}
}
background-color: $form-select-option-disabled-bg;
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-select {
background: $form-select-background-dark #{"/* rtl:"}$form-select-background-rtl-dark#{"*/"};
.form-select:disabled, .custom-select:disabled {
border: map-get($atum-colors-dark, "form-control-border-disabled");
opacity: .5;
}
}
}

22
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_dropdown.scss vendored
View File

@ -12,15 +12,18 @@
}
.dropdown-menu {
box-shadow: $atum-box-shadow;
box-shadow: var(--atum-box-shadow);
}
.dropdown-item {
text-align: start;
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-bottom: var(--dropdown-item-border-bottom);
&:hover,
&:focus {
--dropdown-link-hover-bg: var(--atum-dropdown-link-hover-bg);
--dropdown-link-hover-color: var(--atum-dropdown-link-hover-color);
.btn-primary + .dropdown-menu & {
background-color: var(--template-bg-dark);
}
@ -49,16 +52,6 @@
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
&:hover,
&:focus {
--dropdown-link-hover-bg: var(--gray-700);
--dropdown-link-hover-color: var(--body-color);
}
}
}
+ .dropdown-item {
border-top: 1px solid rgba(0, 0, 0, .1);
}
@ -88,9 +81,8 @@
@if $enable-dark-mode {
@include color-mode(dark) {
.dropdown-item {
border-bottom: 1px solid rgba(255, 255, 255, .1);
.dropdown-divider {
border-top: map-get($atum-colors-dark, "dropdown-divider-bg");
}
}
}

10
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss vendored
View File

@ -4,6 +4,13 @@ label {
margin-bottom: 0;
}
.form-control {
&::placeholder {
font-size: .8rem;
font-style: italic;
}
}
td .form-control {
display: inline-block;
width: auto;
@ -35,7 +42,6 @@ legend {
// Validation
.invalid {
color: var(--danger);
border-color: var(--danger);
}
@ -48,7 +54,7 @@ legend {
}
[aria-grabbed="true"] {
box-shadow: 0 0 2px 1px var(--template-bg-dark);
box-shadow: $form-aria-grabbed-box-shadow;
}
select.form-control {

31
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_list-group.scss vendored Normal file
View 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;
}
}
}
}

6
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_pagination.scss vendored
View File

@ -2,4 +2,10 @@
.pagination {
margin: 1rem;
.page-link.active, .active > .page-link {
background-color: var(--btn-primary-bg);
border-color: var(--btn-primary-bg);
}
}

40
build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_table.scss vendored
View File

@ -1,8 +1,9 @@
// Table
.table {
> :not(:first-child) {
border-top: 2px solid #dee2e6;
> :not(caption) > * > * {
color: var(--body-color);
}
thead {
@ -20,10 +21,14 @@
}
a {
color: var(--template-link-color);
font-weight: $table-link-font-weight;
color: rgb(var(--link-color-rgb, $table-link-color));
&:hover {
color: rgb(var(--link-color-rgb-hvr));
}
&#sorted {
font-weight: $medium-weight;
font-weight: $table-link-font-weight-sorted; /* $medium-weight */
// This is the same as the bootstrap line because when it's sorted we want to undo the style
color: var(--table-color-state, var(--table-color-type,var(--table-color)));
@ -65,7 +70,16 @@
}
a:not(.badge):not(.btn):not(.dropdown-item) {
font-weight: $table-link-font-weight;
color: rgb(var(--link-color-rgb, $table-link-color));
text-decoration: underline;
&:hover {
color: rgb(var(--link-color-rgb-hvr));
}
}
.badge.bg-info {
background-color: $badge-bg-info !important;
}
}
@ -84,6 +98,22 @@
}
.j-main-container > & {
box-shadow: $atum-box-shadow;
box-shadow: var(--atum-box-shadow);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.j-main-container .table {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
tr {
&:hover {
background: rgba(0, 0, 0, .1);
}
}
}
}
}

27
build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss vendored
View File

@ -11,7 +11,7 @@
@import "../../../../../../../../media/vendor/choicesjs/scss/choices";
.choices {
border: $form-select-border-width solid $form-select-border-color;
border: $form-select-border; //$form-select-border-width solid $form-select-border-color;
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
@ -43,17 +43,9 @@
background-color: transparent;
&::placeholder {
color: $gray-700;
color: $choices-input-placeholder; //$gray-700; //var(--gray-200);
opacity: 1;
}
@if $enable-dark-mode {
@include color-mode(dark) {
&::placeholder {
color: var(--gray-200);
}
}
}
}
.choices__list--dropdown {
@ -67,7 +59,8 @@
.choices__list--multiple .choices__item {
position: relative;
margin: 2px;
background-color: var(--template-bg-dark);
color: $choices-list-multiple-item; //$white;
background-color: $choices-list-multiple-item-bg; //var(--template-bg-dark);
margin-inline-end: 2px;
border: 0;
border-radius: $border-radius;
@ -164,15 +157,7 @@
.choices[data-type*="select-one"] {
.choices__input {
background-color: var(--body-bg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.choices__input {
border-color: var(--gray-600);
}
}
background-color: $choices-input-bg; //var(--body-bg)/var(--gray-600)
}
.choices__item {
@ -198,7 +183,7 @@
}
&:focus {
box-shadow: 0 0 0 2px #00bcd4;
box-shadow: $choices__button_joomla-focus-box-shadow;
}
}

14
build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss vendored
View File

@ -20,3 +20,17 @@ $fa-font-path: "../../../../../../vendor/fontawesome-free/we
html[dir=rtl] .float-right {
float: left;
}
input .icon-check-square {
&::before {
color: var(--icon-check-square-bg);
background: var(--icon-check-square-color);
}
}
input .icon-square {
&::before {
color: var(--icon-square-bg);
background: var(--icon-square-color);
}
}

107
build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss vendored
View File

@ -12,20 +12,69 @@
min-width: 16rem;
padding: 0;
margin-bottom: 1rem;
color: var(--alert-accent-color, var(--template-bg-dark));
background-color: var(--alert-bg-color, var(--white));
border: 1px solid var(--alert-accent-color, var(--template-bg-dark));
border-radius: .25rem;
color: var(--alert-accent-color);
background-color: var(--alert-bg-color);
border: 1px solid;
border-color: var(--alert-border);
border-radius: $border-radius-sm;
transition: opacity .15s linear;
.btn-primary {
color: var(--states-btn-primary-color);
background: var(--states-btn-primary-bg);
border-color: var(--states-btn-primary-bg-hover);
&:hover {
background: var(--states-btn-primary-bg-hover);
}
}
&[type="success"],
&[type="message"] {
--alert-accent-color: var(--state-success-text);
--alert-bg-color: var(--state-success-bg);
--alert-border: var(--state-success-bg-hvr);
--alert-heading-bg: var(--state-success-bg-hvr);
--alert-link-color: var(--state-success-link-color, var(--states-link-color));
}
&[type="info"],
&[type="notice"] {
--alert-accent-color: var(--state-info-text);
--alert-bg-color: var(--state-info-bg);
--alert-border: var(--state-info-bg-hvr);
--alert-heading-bg: var(--state-info-bg-hvr);
--alert-link-color: var(--state-success-link-color, var(--states-link-color));
}
&[type="warning"] {
.joomla-alert--close {
color: var(--state-warning-text);
}
--alert-accent-color: var(--state-warning-text);
--alert-bg-color: var(--state-warning-bg);
--alert-border: var(--state-warning-border); //TODO Change to --state-warning-heading-bg in another PR
--alert-heading-bg: var(--state-warning-heading-bg); //TODO Change to --state-warning-heading-bg in another PR
--alert-link-color: var(--state-success-link-color, var(--states-link-color));
}
&[type="error"],
&[type="danger"] {
--alert-accent-color: var(--state-danger-text);
--alert-bg-color: var(--state-danger-bg);
--alert-border: var(--state-danger-bg-hvr);
--alert-heading-bg: var(--state-danger-bg-hvr);
--alert-link-color: var(--state-success-link-color, var(--states-link-color));
}
.alert-heading {
display: flex;
flex-direction: column;
justify-content: center;
padding: .8rem;
line-height: normal;
color: var(--white);
background: var(--alert-accent-color, var(--template-bg-dark));
color: #fff;
background: var(--alert-heading-bg);
align-content: center;
.message::before,
@ -53,7 +102,7 @@
width: 1em;
height: 1em;
content: "";
background-image: url('data:image/svg+xml;utf8,<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="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-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%;
}
@ -73,51 +122,11 @@
}
.alert-link {
color: var(--template-link-color);
font-weight: normal;
color: var(--states-link-color);
text-decoration: underline;
}
&[type="success"],
&[type="message"] {
--alert-accent-color: #{$state-success-text};
--alert-bg-color: #{$state-success-bg};
}
&[type="info"],
&[type="notice"] {
--alert-accent-color: #{$state-info-text};
--alert-bg-color: #{$state-info-bg};
@include color-mode(dark) {
p {
color: var(--body-color);
}
}
}
@include color-mode(dark) {
&[type="info"],
&[type="notice"] {
--alert-accent-color: #{$state-info-text-dark};
}
}
&[type="warning"] {
.joomla-alert--close {
color: #{$state-warning-text};
}
color: #{$state-warning-text};
--alert-accent-color: #{$warning};
--alert-bg-color: #{$state-warning-bg};
}
&[type="error"],
&[type="danger"] {
--alert-accent-color: #{$state-danger-text};
--alert-bg-color: #{$state-danger-bg};
}
.joomla-alert--close,
.joomla-alert-button--close {
position: absolute;

120
build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss vendored
View File

@ -31,7 +31,7 @@ joomla-tab {
padding: 0;
white-space: nowrap;
list-style: outside none none;
border-bottom: 1px solid var(--template-bg-dark-10);
border-bottom: $joomla-tablist-border-bottom; //1px solid var(--template-bg-dark-10);
> button[role=tab] {
position: relative;
@ -55,7 +55,7 @@ joomla-tab {
&[aria-expanded=true],
&:focus,
&:hover {
color: var(--template-bg-dark-60);
color: $joomla-tab-btn-hvr;
border: 0;
border-radius: 0;
box-shadow: none;
@ -67,49 +67,22 @@ joomla-tab {
left: 0;
height: 3px;
content: "";
background-color: var(--template-link-color);
background-color: var(--btn-primary-bg);
opacity: .8;
}
.text-muted {
color: var(--template-text-light) !important;
color: $text-muted-hvr-color;
}
}
&[aria-expanded=true] {
font-weight: $font-weight-bold;
background: var(--template-bg-dark-3);
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
&[aria-expanded=true],
&:focus,
&:hover {
/* stylelint-enable max-nesting-depth */
color: var(--template-text-light);
}
/* stylelint-disable max-nesting-depth */
&[aria-expanded=true] {
/* stylelint-enable max-nesting-depth */
background: var(--template-bg-dark-60);
}
}
background: $joomla-tab-btn-aria-exp-bg;
}
.text-muted {
color: var(--template-text-dark) !important;
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
.text-muted {
/* stylelint-enable max-nesting-depth */
color: var(--template-text-light) !important;
}
}
color: $text-muted-color;
}
}
}
@ -120,7 +93,7 @@ joomla-tab {
color: var(--template-text-light);
text-align: start;
background-color: var(--template-link-color);
border: 1px solid var(--template-bg-dark-3);
border: $joomla-tab-btn-region-border;
border-top: 0;
&[aria-expanded=true],
@ -131,15 +104,7 @@ joomla-tab {
}
.text-muted {
color: var(--template-text-light) !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
> button[role=region] {
border-color: var(--template-bg-dark-70);
}
color: $text-muted-color;
}
}
@ -159,7 +124,7 @@ joomla-tab {
.main-card-columns > * > & {
height: 100%;
border-left: 1px solid var(--template-bg-dark-10);
border-left: $main-card-col-border-left; //1px solid var(--template-bg-dark-10);
}
}
@ -177,7 +142,7 @@ joomla-tab[orientation=vertical] {
height: auto;
padding: 0;
overflow: hidden;
border: 1px solid $gray-300;
border: $joomla-tab-tablist-border; //1px solid $gray-300;
border-radius: 0;
box-shadow: none;
@ -188,9 +153,10 @@ joomla-tab[orientation=vertical] {
> button[role=tab] {
text-align: start;
&[aria-expanded=true] {
color: var(--template-text-light);
background-color: var(--template-bg-dark-60);
color: $joomla-tablist-btn-aria-exp; //var(--template-text-light);
background-color: $joomla-tablist-btn-aria-exp-bg; //var(--template-bg-dark-60);
}
}
@ -205,14 +171,14 @@ joomla-tab[orientation=vertical] {
margin: -1px 0;
text-decoration: none;
border-top: 1px solid transparent;
border-bottom: 1px solid $gray-300;
border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300;
box-shadow: none;
&[aria-expanded=true],
&:focus,
&:hover {
color: var(--template-text-light);
background-color: var(--template-bg-dark-60);
background-color: $joomla-tablist-btn-aria-exp-bg; //var(--template-bg-dark-60);
background-image: none;
border-right: 0;
box-shadow: none;
@ -223,24 +189,16 @@ joomla-tab[orientation=vertical] {
left: -1px;
width: 5px;
height: auto;
background-color: var(--template-bg-dark);
background-color: $joomla-tablist-btn-aria-exp-aft-bg; //var(--template-bg-dark);
}
.text-muted {
color: var(--template-text-light) !important;
color: $text-muted-hvr-color;
}
}
.text-muted {
color: var(--template-text-dark) !important;
}
@if $enable-dark-mode {
@include color-mode(dark) {
/* stylelint-disable max-nesting-depth */
.text-muted {
/* stylelint-enable max-nesting-depth */
color: var(--template-text-light) !important;
}
}
color: $text-muted-color;
}
}
}
@ -257,7 +215,7 @@ joomla-tab[view=accordion] {
flex-direction: column;
white-space: normal;
border-radius: 0;
box-shadow: 0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04);
box-shadow: $joomla-tab-accordion-box-shadow;
> div[role=tablist] {
background-color: $white;
@ -270,7 +228,7 @@ joomla-tab[view=accordion] {
text-align: start;
text-decoration: none;
border: 0;
border-bottom: 1px solid $gray-300;
border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300;
box-shadow: none;
&[aria-expanded=true]::after,
@ -298,7 +256,7 @@ joomla-tab[view=accordion] {
display: block;
width: 100%;
max-width: 100%;
border-bottom: 1px solid $gray-300;
border-bottom: $joomla-tab-vert-border-bottom; //1px solid $gray-300;
}
}
@ -357,13 +315,43 @@ joomla-tab[view=accordion] {
}
.respTable td:last-child {
border-bottom: 1em var(--template-bg-dark-80) solid;
border-bottom: $respTable-border-bottom; //1em var(--template-bg-dark-80) solid;
}
.oddCol {
background: var(--template-bg-light);
background: $permissions-sliders-oddCol-bg; //var(--template-bg-light);
}
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
joomla-tab {
> button[role=region] {
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg);
border: var(--btn-primary-border);
&[aria-expanded=true],
&:hover,
&:focus {
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg-hvr);
}
}
}
[dir=rtl] joomla-tab {
div[role="tablist"] > button[role="tab"][aria-expanded="true"]::after {
right: auto;
left: 0;
}
}
}
}

76
installation/template/scss/template.scss
View File

@ -22,8 +22,8 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
// Variables from the Atum template
@import "../../../build/media_source/templates/administrator/atum/scss/variables";
@import "../../../build/media_source/templates/administrator/atum/scss/variables-dark";
$body-bg: $template-background-light;
$table-bg: transparent;
@import "../../../media/vendor/bootstrap/scss/variables";
@ -44,12 +44,25 @@ $table-bg: transparent;
// Custom Atum colors
:root {
@each $color, $value in $atum-colors {
--#{$prefix}#{$color}: #{$value};
}
}
--primary: hsl(213, 63%, 44%);
@if $enable-dark-mode {
@include color-mode(dark, true) {
@each $color, $value in $atum-colors-dark {
--#{$prefix}#{$color}: #{$value};
}
}
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
@each $color, $value in $atum-colors-dark {
--#{$prefix}#{$color}: #{$value};
}
}
}
.border-primary {
@ -182,6 +195,24 @@ $table-bg: transparent;
box-sizing: border-box;
}
body {
background: var(--body-bg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
body {
background: var(--main-bg);
}
}
}
.header {
.h2 {
margin-bottom: 0;
}
}
.j-install {
display: flex;
flex-direction: column;
@ -209,7 +240,7 @@ $table-bg: transparent;
.j-container {
width: 100%;
max-width: 40rem;
margin: 0 auto;
margin: 1rem auto;
h1 {
color: $dark-blue;
@ -259,7 +290,7 @@ $table-bg: transparent;
// emphasis than we require for the header
.j-install-step-header {
color: #fff;
background-color: $dark-blue;
background-color: var(--secondary-bg);
}
}
}
@ -299,13 +330,24 @@ $table-bg: transparent;
display: none;
}
.btn-primary {
color: var(--btn-primary-color);
background-color: var(--btn-primary-bg);
border: var(--btn-primary-border);
&:hover, &:focus, &:active {
background-color: var(--btn-primary-bg-hvr);
border: var(--btn-primary-border-hvr);
}
}
.btn-success {
color: #fff;
background-color: #75b544;
border-color: #75b544;
}
// Form
.form-control {
@ -315,9 +357,9 @@ $table-bg: transparent;
}
@if $enable-dark-mode {
@include color-mode(light) {
@include color-mode(dark) {
.form-control {
background-color: var(--white-offset);
background-color: var(--form-control-bg);
}
}
}
@ -397,11 +439,21 @@ legend {
// Language Table
caption {
padding: 0;
margin: 0 1rem 0 0;
caption-side: top;
}
@if $enable-dark-mode {
@include color-mode(dark) {
caption {
color: #fff;
}
}
}
.bg-warning {
color: #292b2c;
color: #fff;
}
// footer
@ -417,7 +469,11 @@ caption {
@if $enable-dark-mode {
@include color-mode(dark) {
.footer {
background-color: var(--secondary-bg);
background: var(--header-bg);
box-shadow: none;
a {
color: var(--table-link-color);
}
}
}
}

2
layouts/joomla/installer/changelog.php
View File

@ -34,7 +34,7 @@ array_walk(
$class = 'bg-success';
break;
case 'change':
$class = 'bg-warning text-dark';
$class = 'bg-warning';
break;
case 'remove':
$class = 'bg-secondary';