jmiller
d658019007
Universal: Pre-Release / Build Pre-Release (${{ inputs.stability || github.ref_name }}) (push) Successful in 16s
refactor(runbackup): move screen CSS into the Web Asset Manager All full-screen backup CSS now loads through Joomla WAM instead of an inline <style> block (and the redundant inline style="width:0"): - New media/css/runbackup.css holds the whole stylesheet. - Registered as asset com_mokosuitebackup.runbackup in joomla.asset.json. - tmpl/runbackup/default.php loads it via getDocument()->getWebAssetManager()->useStyle(com_mokosuitebackup.runbackup), matching the existing com_mokosuitebackup.admin pattern. The css folder already ships via the manifest <folder>css</folder>, so no manifest change is needed. Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i @
85 lines
2.2 KiB
CSS
85 lines
2.2 KiB
CSS
/*
|
|
* @package MokoSuiteBackup
|
|
* @subpackage com_mokosuitebackup
|
|
* @copyright Copyright (C) 2026 Moko Consulting. All rights reserved.
|
|
* @license GNU General Public License version 3 or later; see LICENSE
|
|
*
|
|
* Full-screen backup progress screen (view=runbackup). Loaded via the Joomla
|
|
* Web Asset Manager (asset com_mokosuitebackup.runbackup).
|
|
*/
|
|
|
|
/* Full-screen backup runs on a black backdrop. */
|
|
html,
|
|
body {
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
/* Colours are pulled from the Atum admin template's own CSS custom properties
|
|
so the screen matches whatever theme the site runs, with Bootstrap and then
|
|
a literal as progressive fallbacks. */
|
|
.msb-runbackup {
|
|
--msb-accent: var(--template-link-color, var(--bs-link-color, #2a69b8));
|
|
--msb-accent2: var(--template-special-color, var(--msb-accent));
|
|
--msb-success: var(--template-success-color, var(--bs-success, #2f7d32));
|
|
--msb-danger: var(--template-danger-color, var(--bs-danger, #c52128));
|
|
--msb-track: var(--template-bg-light, var(--bs-gray-200, #edf0f5));
|
|
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* overflow:hidden clips the full-bleed bar to the card's rounded corners. */
|
|
.msb-runbackup .card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.msb-rb-progress {
|
|
height: 2.5rem;
|
|
background: var(--msb-track);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.msb-rb-bar {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: .95rem;
|
|
white-space: nowrap;
|
|
background-color: var(--msb-accent);
|
|
background-image: linear-gradient(90deg, var(--msb-accent), var(--msb-accent2));
|
|
transition: width .35s ease;
|
|
}
|
|
|
|
.msb-rb-bar.is-animated::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent);
|
|
background-size: 1rem 1rem;
|
|
animation: msb-rb-stripes 1s linear infinite;
|
|
}
|
|
|
|
.msb-rb-bar.is-success {
|
|
background-image: none;
|
|
background-color: var(--msb-success);
|
|
}
|
|
|
|
.msb-rb-bar.is-danger {
|
|
background-image: none;
|
|
background-color: var(--msb-danger);
|
|
}
|
|
|
|
@keyframes msb-rb-stripes {
|
|
from {
|
|
background-position: 1rem 0;
|
|
}
|
|
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|