/* ======================================== NEW UI: Digital Classroom Home Scope: .is-myincite-ui.nui-modern-pages classroom-home SCOPING NOTE (rewritten after review): the original draft styled .wh-card, .wh-card-title, .btn-success/.btn-primary/.btn-warning, .is-btn-white/.btn-default, .dropdown-toggle.btn and — worst — .btn-circle with bare selectors. Every one of those is a shared Bootstrap-family class used hundreds of times across totally unrelated screens app-wide (.btn-circle alone appears in 187 templates; forcing it to a fixed 40x40 square would have visibly broken small circular icon buttons everywhere, e.g. the Instructor card's own copy/edit icons on this very screen). `` renders as a literal custom element in the DOM (confirmed: selector `classroom-home` in home.component.js, `` in classrooms.html) — every rule below is re-scoped under it so only this screen is affected. ======================================== */ /* ======================================== 1. CARD CHROME - Dashboard card styling Current state: header accent is .is-primary divider (#6d468c purple bar) appearing as
after widget titles. Replacing with gradient ::before on title. ======================================== */ .is-myincite-ui.nui-modern-pages classroom-home .wh-card { background-color: #ffffff; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.05); border: none; } .is-myincite-ui.nui-modern-pages classroom-home .wh-card.wh-border-1 { border: none; } .is-myincite-ui.nui-modern-pages classroom-home .wh-card.wh-border-1-darker { border: none; } /* Card header title with gradient accent tick */ .is-myincite-ui.nui-modern-pages classroom-home .wh-card-title { position: relative; padding-left: 18px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; } .is-myincite-ui.nui-modern-pages classroom-home .wh-card-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; background: linear-gradient(180deg, #0074C5 0%, #8B5CB0 55%, #D98E32 100%); border-radius: 1px; } /* Note: Old .is-primary divider bars remain (already height:0, invisible) The new gradient tick ::before on title provides the visual accent */ /* ======================================== 2. ROSTER STATUS ICONS - Semantic recoloring .status-online (fa-rss) → teal/green (currently online) .status-raised-hand (fa-hand-paper) → amber (needs attention) .status-thumb-up → green (positive) .status-thumb-down → muted red (negative) .fa-chalkboard-teacher → brand blue (in live classroom) These four .status-* classes plus the fa-chalkboard-teacher convention are specific to classroom-roster.html and only ever render inside or the roster directive it hosts, but scoping under classroom-home costs nothing and keeps every rule in this file consistent. ======================================== */ .is-myincite-ui.nui-modern-pages classroom-home .status-online { color: #00AEC4; } .is-myincite-ui.nui-modern-pages classroom-home .status-raised-hand { color: #d97706; } .is-myincite-ui.nui-modern-pages classroom-home .status-thumb-up { color: #16a34a; } .is-myincite-ui.nui-modern-pages classroom-home .status-thumb-down { color: #991b1b; } .is-myincite-ui.nui-modern-pages classroom-home .fa-chalkboard-teacher { color: #0074C5; } /* ======================================== 3. TOP ACTION BAR BUTTONS - Unified visual system Harmonize colored pills (Edmentum/Go Live/Edit) with plain icon buttons. Consistent border-radius, height, shadow, and hover states. All scoped under classroom-home — .btn-success/.btn-primary/.btn-warning/ .is-btn-white/.btn-default/.dropdown-toggle.btn/.btn-circle are shared Bootstrap-family classes used everywhere in the app. ======================================== */ .is-myincite-ui.nui-modern-pages classroom-home .btn-group .btn, .is-myincite-ui.nui-modern-pages classroom-home .btn-group button, .is-myincite-ui.nui-modern-pages classroom-home .panel-heading-misc .btn, .is-myincite-ui.nui-modern-pages classroom-home .panel-heading-misc button { border-radius: 8px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; transition: all 0.2s ease-out; } .is-myincite-ui.nui-modern-pages classroom-home .btn-success { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .is-myincite-ui.nui-modern-pages classroom-home .btn-success:hover { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12); } .is-myincite-ui.nui-modern-pages classroom-home .btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .is-myincite-ui.nui-modern-pages classroom-home .btn-primary:hover { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12); } /* Plain icon-square buttons (currently Bootstrap default) */ .is-myincite-ui.nui-modern-pages classroom-home .is-btn-white, .is-myincite-ui.nui-modern-pages classroom-home .btn-default { background-color: #f5f5f5; border-color: #e5e5e5; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: all 0.2s ease-out; } .is-myincite-ui.nui-modern-pages classroom-home .is-btn-white:hover, .is-myincite-ui.nui-modern-pages classroom-home .btn-default:hover { background-color: #ebebeb; border-color: #d4d4d5; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } /* Icon buttons in dropdown/misc controls */ .is-myincite-ui.nui-modern-pages classroom-home .dropdown-toggle.btn { background-color: #f5f5f5; border-color: #e5e5e5; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .is-myincite-ui.nui-modern-pages classroom-home .dropdown-toggle.btn:hover { background-color: #ebebeb; border-color: #d4d4d5; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } /* Refresh button styling */ .is-myincite-ui.nui-modern-pages classroom-home .btn-warning { background-color: #f5f5f5; border-color: #e5e5e5; color: #333333; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .is-myincite-ui.nui-modern-pages classroom-home .btn-warning:hover { background-color: #ebebeb; border-color: #d4d4d5; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } /* Circular button sizing consistency — scoped to this screen's own top-action-bar circle buttons only (187 unrelated templates use .btn-circle elsewhere at various intended sizes). */ .is-myincite-ui.nui-modern-pages classroom-home .panel-heading-misc .btn-circle { width: 40px; height: 40px; padding: 0; border-radius: 8px; } /* ======================================== 4. PREFERS REDUCED MOTION Disable transitions for accessibility ======================================== */ @media (prefers-reduced-motion: reduce) { .is-myincite-ui.nui-modern-pages classroom-home .btn-group .btn, .is-myincite-ui.nui-modern-pages classroom-home .btn-group button, .is-myincite-ui.nui-modern-pages classroom-home .panel-heading-misc .btn, .is-myincite-ui.nui-modern-pages classroom-home .panel-heading-misc button, .is-myincite-ui.nui-modern-pages classroom-home .is-btn-white, .is-myincite-ui.nui-modern-pages classroom-home .btn-default, .is-myincite-ui.nui-modern-pages classroom-home .dropdown-toggle.btn, .is-myincite-ui.nui-modern-pages classroom-home .btn-warning, .is-myincite-ui.nui-modern-pages classroom-home .wh-card-title { transition: none; } }