Files
MokoSuiteClient/source/packages/com_mokosuiteclient/media/css/dashboard.css
T
Jonathan Miller 29bf75051f
Universal: Auto Version Bump / Version Bump (push) Successful in 14s
Universal: Pre-Release / Build Pre-Release (${{ inputs.stability || github.ref_name }}) (push) Successful in 16s
Platform: moko-platform CI / Gate 1: Code Quality (push) Failing after 1m16s
Platform: moko-platform CI / Gate 2: Unit Tests (8.1) (push) Has been cancelled
Platform: moko-platform CI / Gate 2: Unit Tests (8.2) (push) Has been cancelled
Platform: moko-platform CI / Gate 2: Unit Tests (8.3) (push) Has been cancelled
Platform: moko-platform CI / Gate 3: Self-Health Check (push) Has been cancelled
Platform: moko-platform CI / Gate 4: Governance (push) Has been cancelled
Platform: moko-platform CI / Gate 5: Template Integrity (push) Has been cancelled
Platform: moko-platform CI / CI Summary (push) Has been cancelled
style(dashboard): use Bootstrap grid columns for extension version bar
Dynamically calculates col-N from extension count (12/count) so items
spread evenly across the full width as horizontal cells, not stacked.
Removed custom flex CSS in favour of Bootstrap row/g-0.
2026-06-23 08:05:02 -05:00

110 lines
1.9 KiB
CSS

/**
* MokoSuiteClient Dashboard Styles
* @package com_mokosuiteclient
*/
/* Info bar — full-width with evenly distributed items */
.mokosuiteclient-info-bar .card-body {
padding: 0.75rem 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.mokosuiteclient-info-item {
display: flex;
align-items: center;
gap: 0.35rem;
flex: 0 1 auto;
min-width: 0;
}
.mokosuiteclient-info-label {
font-size: 0.75rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.mokosuiteclient-info-value {
font-size: 0.85rem;
white-space: nowrap;
}
.mokosuiteclient-info-value .badge {
font-size: 0.8rem;
padding: 0.3em 0.6em;
}
/* Plugin cards */
.mokosuiteclient-plugin-card {
transition: box-shadow 0.15s ease, opacity 0.15s ease;
border-left: 3px solid #0d6efd;
}
.mokosuiteclient-plugin-card:hover {
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}
.mokosuiteclient-plugin-disabled {
opacity: 0.6;
border-left-color: #adb5bd;
}
.mokosuiteclient-plugin-disabled:hover {
opacity: 0.8;
}
.mokosuiteclient-plugin-icon {
font-size: 1.5rem;
color: #1a2744;
width: 2rem;
text-align: center;
}
/* Category headings */
.mokosuiteclient-category-heading {
font-size: 1rem;
font-weight: 600;
padding-top: 0.5rem;
}
/* Toggle switch */
.mokosuiteclient-toggle {
cursor: pointer;
}
.mokosuiteclient-toggle:disabled {
cursor: not-allowed;
}
/* Quick actions */
.mokosuiteclient-quick-actions .btn {
transition: all 0.15s ease;
}
.mokosuiteclient-quick-actions .btn:disabled {
pointer-events: none;
}
/* Loading spinner overlay on toggle */
.mokosuiteclient-plugin-card.is-loading {
position: relative;
pointer-events: none;
}
.mokosuiteclient-plugin-card.is-loading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
}