@
Universal: Pre-Release / Build Pre-Release (${{ inputs.stability || github.ref_name }}) (push) Successful in 16s
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 @
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* @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;
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,11 @@
|
||||
"name": "com_mokosuitebackup.admin",
|
||||
"type": "style",
|
||||
"uri": "com_mokosuitebackup/css/admin.css"
|
||||
},
|
||||
{
|
||||
"name": "com_mokosuitebackup.runbackup",
|
||||
"type": "style",
|
||||
"uri": "com_mokosuitebackup/css/runbackup.css"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -88,56 +88,11 @@ $config = [
|
||||
'leaveWarn' => Text::_('COM_MOKOJOOMBACKUP_RUNBACKUP_LEAVE_WARNING'),
|
||||
],
|
||||
];
|
||||
?>
|
||||
<style>
|
||||
/* 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 {
|
||||
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 { position: relative; }
|
||||
.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; } }
|
||||
</style>
|
||||
// All screen CSS loads via the Joomla Web Asset Manager (media/joomla.asset.json),
|
||||
// not an inline <style> block.
|
||||
$this->getDocument()->getWebAssetManager()->useStyle('com_mokosuitebackup.runbackup');
|
||||
?>
|
||||
<div class="msb-runbackup">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-4 pb-3">
|
||||
@@ -168,7 +123,7 @@ $config = [
|
||||
|
||||
<!-- Full-bleed progress bar, edge-to-edge along the bottom of the card. -->
|
||||
<div class="msb-rb-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||
<div id="msb-rb-bar" class="msb-rb-bar is-animated" style="width:0;">0%</div>
|
||||
<div id="msb-rb-bar" class="msb-rb-bar is-animated">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user