jmiller
83b261db02
Generic: Project CI / Lint & Validate (pull_request) Successful in 8s
Generic: Project CI / Tests (pull_request) Failing after 5s
Universal: PR Check / Branch Policy (pull_request) Successful in 1s
Universal: PR Check / Require Docs Update (pull_request) Has been skipped
Universal: PR Check / Wiki Update Reminder (pull_request) Has been skipped
Universal: PR Check / Secret Scan (pull_request) Successful in 6s
Universal: PR Check / Validate PR (pull_request) Failing after 7s
Joomla: Metadata Validation / Validate Joomla Metadata (pull_request) Successful in 7s
Branch Cleanup / Delete merged branch (pull_request) Successful in 1s
RC Revert / Rename rc/ back to dev/ (pull_request) Has been skipped
Universal: PR Check / Build RC Package (pull_request) Has been cancelled
Universal: PR Check / Report Issues (pull_request) Has been cancelled
style(runbackup): gray card via bg-body-secondary utility class Move the card background off a custom CSS rule and onto a Bootstrap utility class (bg-body-secondary) on the card element itself, so the gray panel background is declared in the markup. Supersedes the .card background-color rule added in the previous change. Claude-Session: https://claude.ai/code/session_01WbGBN9VyRK61zczYWcCQ2i @
87 lines
2.3 KiB
CSS
87 lines
2.3 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.
|
|
The card's gray background comes from a Bootstrap utility class on the
|
|
element itself (see the template), not a rule here. */
|
|
.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;
|
|
}
|
|
}
|