/* ==========================================================================
Indigo Nova - theme layer for School ERP
--------------------------------------------------------------------------
Restyles AdminLTE 2 + Bootstrap 3 in place. Nothing here depends on new
markup, so all ~459 existing views pick up the design without being touched.
Load LAST, after AdminLTE.css and custom_style.css.
Dark mode is driven by set by nova.js.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
--nova-sidebar-from: #1E1B4B;
--nova-sidebar-to: #312E81;
--nova-sidebar-text: #B9B7DE;
--nova-sidebar-dim: #7E7CAE;
--nova-accent: #7C3AED;
--nova-accent-600: #6D28D9;
--nova-accent-700: #5B21B6;
--nova-accent-soft: rgba(124, 58, 237, .12);
--nova-link: #6D28D9;
--nova-link-hover: #5B21B6;
--nova-accent-glow: rgba(124, 58, 237, .28);
--nova-canvas: #F4F4FD;
--nova-surface: #FFFFFF;
--nova-surface-2: #FAFAFF;
--nova-text: #1E2139;
--nova-text-soft: #4A4F6F;
--nova-muted: #6E7391;
--nova-border: #E6E6F4;
--nova-border-soft: #F0F0FA;
--nova-success: #0F9D6E;
--nova-success-soft: rgba(15, 157, 110, .12);
--nova-warning: #D97706;
--nova-warning-soft: rgba(217, 119, 6, .13);
--nova-danger: #DC2F55;
--nova-danger-soft: rgba(220, 47, 85, .12);
--nova-info: #2D74E0;
--nova-info-soft: rgba(45, 116, 224, .12);
--nova-radius: 14px;
--nova-radius-sm: 10px;
--nova-radius-xs: 8px;
--nova-shadow: 0 1px 2px rgba(18, 18, 54, .04), 0 10px 26px -14px rgba(18, 18, 54, .20);
--nova-shadow-lg: 0 2px 6px rgba(18, 18, 54, .06), 0 24px 48px -20px rgba(18, 18, 54, .28);
--nova-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-nova-theme="dark"] {
--nova-sidebar-from: #14132E;
--nova-sidebar-to: #1E1B4B;
--nova-sidebar-text: #A5A3D0;
--nova-sidebar-dim: #6F6D9C;
--nova-accent: #8B5CF6;
--nova-accent-600: #7C3AED;
--nova-accent-700: #6D28D9;
--nova-accent-soft: rgba(139, 92, 246, .18);
/* Links need to be lighter than the accent on a dark ground, not darker. */
--nova-link: #A78BFA;
--nova-link-hover: #C4B5FD;
--nova-canvas: #0E0E1F;
--nova-surface: #17172F;
--nova-surface-2: #1D1D3A;
--nova-text: #E8E8F6;
--nova-text-soft: #C3C3DC;
--nova-muted: #9291B4;
--nova-border: #2A2A4D;
--nova-border-soft: #232342;
--nova-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .6);
--nova-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .7);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
body,
body.hold-transition,
.content-wrapper,
.right-side,
.main-footer {
font-family: var(--nova-font);
color: var(--nova-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; letter-spacing: -0.005em; background-color: var(--nova-canvas); }
.content-wrapper,
.right-side { background-color: var(--nova-canvas); }
a { color: var(--nova-link); }
a:hover, a:focus { color: var(--nova-link-hover); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--nova-font);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--nova-text);
}
::selection { background: var(--nova-accent-glow); }
/* Content header ---------------------------------------------------------- */
.content-header { padding: 22px 22px 6px; background: transparent; }
.content-header > h1 { font-size: 23px; font-weight: 650; margin: 0; }
.content-header > h1 > small { color: var(--nova-muted); font-size: 14px; font-weight: 400; }
.content-header > .breadcrumb {
background: transparent; top: 24px; right: 22px; padding: 0;
font-size: 12.5px; color: var(--nova-muted);
}
.content-header > .breadcrumb a { color: var(--nova-muted); }
.content-header > .breadcrumb a:hover { color: var(--nova-accent-600); }
.content-header > .breadcrumb > .active { color: var(--nova-text); font-weight: 500; }
.content { padding: 12px 22px 26px; }
/* --------------------------------------------------------------------------
3. Sidebar
-------------------------------------------------------------------------- */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar,
.left-side {
background: linear-gradient(180deg, var(--nova-sidebar-from) 0%, var(--nova-sidebar-to) 100%);
}
.main-sidebar { box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
.sidebar { padding-bottom: 24px; }
/* Brand ------------------------------------------------------------------- */
.skin-blue .main-header .logo,
.main-header .logo {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, .08);
border-right: none;
color: #fff;
font-family: var(--nova-font);
font-weight: 650;
letter-spacing: -0.02em;
transition: background .18s ease;
}
.skin-blue .main-header .logo:hover,
.main-header .logo:hover { background: rgba(255, 255, 255, .06); }
.main-header .logo { overflow: hidden; }
.main-header .logo img { max-height: 34px; width: auto; }
/* Brand fallback: a school that has not uploaded a logo yet gets its name
rendered instead of a broken image. The ![]()
removes itself on error. */
.nova-brand-text {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.nova-brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 9px;
background: linear-gradient(135deg, var(--nova-accent) 0%, var(--nova-accent-700) 100%);
color: #fff; font-size: 15px; font-weight: 700; vertical-align: middle;
}
/* Menu -------------------------------------------------------------------- */
.sidebar-menu { padding: 10px 12px 0; }
.sidebar-menu > li.header,
.skin-blue .sidebar-menu > li.header {
background: transparent;
color: var(--nova-sidebar-dim);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 20px 12px 8px;
}
.sidebar-menu > li { margin-bottom: 2px; }
.sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a {
color: var(--nova-sidebar-text);
border-radius: var(--nova-radius-sm);
border-left: none !important;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
position: relative;
display: flex;
align-items: center;
transition: background .16s ease, color .16s ease;
}
.sidebar-menu > li > a > .pull-right-container {
position: absolute;
right: 11px;
top: 50%;
margin-top: -7px;
}
.sidebar-menu > li > a > .pull-right-container > .fa-angle-left { font-size: 13px; opacity: .7; }
.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > svg {
width: 22px;
font-size: 15px;
margin-right: 10px;
color: var(--nova-sidebar-dim);
text-align: center;
transition: color .16s ease;
}
/* min-width:0 is what actually lets a flex child shrink far enough to
ellipsize; without it long menu labels run under the expand chevron. */
.sidebar-menu > li > a > span:not(.pull-right):not(.label) {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The markup floats the chevron; float does nothing inside a flex row. */
.sidebar-menu > li > a > i.pull-right,
.sidebar-menu > li > a > .fa-angle-left {
float: none;
margin-left: auto;
margin-right: 0;
width: auto;
font-size: 13px;
opacity: .65;
transition: transform .2s ease;
}
.sidebar-menu > li.active > a > i.pull-right,
.sidebar-menu > li.menu-open > a > i.pull-right { transform: rotate(-90deg); opacity: 1; }
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
background: rgba(255, 255, 255, .08);
color: #fff;
border-left: none !important;
}
.sidebar-menu > li:hover > a > i,
.sidebar-menu > li.active > a > i,
.sidebar-menu > li.menu-open > a > i { color: #fff; }
/* Active item gets the accent, not just a lighter shade */
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
background: linear-gradient(90deg, var(--nova-accent) 0%, var(--nova-accent-600) 100%);
box-shadow: 0 6px 18px -8px var(--nova-accent-glow);
}
.sidebar-menu > li.active > a > i { color: #fff; }
/* Submenus ---------------------------------------------------------------- */
.skin-blue .sidebar-menu > li > .treeview-menu,
.sidebar-menu .treeview-menu {
background: rgba(0, 0, 0, .18);
border-radius: var(--nova-radius-sm);
margin: 4px 0 6px;
padding: 6px;
}
.treeview-menu > li > a,
.skin-blue .treeview-menu > li > a {
color: var(--nova-sidebar-text);
font-size: 13.5px;
padding: 8px 10px 8px 34px;
border-radius: var(--nova-radius-xs);
position: relative;
transition: background .16s ease, color .16s ease;
}
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > i { width: 16px; margin-right: 6px; font-size: 11px; color: var(--nova-sidebar-dim); }
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a,
.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.treeview-menu > li.active > a { font-weight: 600; }
.treeview-menu > li.active > a::before {
content: ""; position: absolute; left: 16px; top: 50%;
width: 5px; height: 5px; margin-top: -2.5px;
border-radius: 50%; background: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
.sidebar-menu > li > a > .pull-right-container > .fa-angle-left { transition: transform .2s ease; }
.sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); }
/* Collapsed rail ---------------------------------------------------------- */
.sidebar-mini.sidebar-collapse .sidebar-menu { padding: 10px 8px 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 11px 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i { margin-right: 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:first-of-type {
background: var(--nova-sidebar-to);
border-radius: 0 var(--nova-radius-sm) var(--nova-radius-sm) 0;
padding: 11px 16px;
box-shadow: var(--nova-shadow-lg);
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
background: var(--nova-sidebar-to);
border-radius: 0 var(--nova-radius-sm) var(--nova-radius-sm) 0;
box-shadow: var(--nova-shadow-lg);
}
/* Session + quick links strip -------------------------------------------- */
/* This strip is position:sticky, so the menu scrolls underneath it. It has to
stay opaque or the pinned pills and the moving menu items overlap. The
bundled stylesheet paints it white; this repaints it in the sidebar's own
colour instead, and widens it from its hard-coded 200px to fill the rail. */
.sessionul, .sessionul.fixedmenu, .main-sidebar .fixedmenu {
background: var(--nova-sidebar-from) !important;
width: 100% !important;
box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .7);
list-style: none;
margin: 0;
padding: 10px 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, .07);
padding-bottom: 10px;
}
.sessionul > li > a {
display: flex !important;
align-items: center;
gap: 8px;
color: var(--nova-sidebar-text);
background: rgba(255, 255, 255, .06);
border-radius: var(--nova-radius-sm);
padding: 9px 12px;
font-size: 12.5px;
font-weight: 550;
margin-bottom: 6px;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.sessionul > li > a:hover, .sessionul > li > a:focus { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
/* The bundled stylesheet colours these links dark, which is invisible against
the indigo sidebar. */
.sessionul > li > a,
.sessionul > li > a > span,
.sessionul > li > a > i,
.main-sidebar .sessionul li a { color: var(--nova-sidebar-text) !important; }
.sessionul > li > a > i { color: var(--nova-sidebar-dim) !important; }
.sessionul > li > a:hover > i { color: #fff !important; }
.sessionul > li > a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessionul > li > a > i.pull-right { float: none; margin-left: auto; opacity: .7; font-size: 12px; }
.sessionul .dropdown-menu.verticalmenu { color: var(--nova-text); }
/* Sidebar search ---------------------------------------------------------- */
.search-form2 .form-control,
.sidebar-form .form-control {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--nova-radius-sm);
color: #fff;
box-shadow: none;
}
.search-form2 .form-control::placeholder,
.sidebar-form .form-control::placeholder { color: var(--nova-sidebar-dim); }
/* --------------------------------------------------------------------------
4. Top bar
--------------------------------------------------------------------------
AdminLTE hard-codes a 50px header in four places (logo box, sidebar offset,
fixed content offset, navbar). The taller bar below has to be mirrored into
all of them or the first row of content hides underneath it.
-------------------------------------------------------------------------- */
:root {
--nova-header: 58px;
--nova-sidebar-w: 264px; /* AdminLTE ships 230px */
}
.main-header .navbar,
.skin-blue .main-header .navbar { min-height: var(--nova-header); }
.main-header .logo { height: var(--nova-header); line-height: var(--nova-header); }
.main-header .navbar .sidebar-toggle { padding: 20px 15px; left: 0; top: 0; }
/* Superseded by the flex top bar in section 22. */
.main-sidebar, .left-side { padding-top: var(--nova-header); }
.fixed .content-wrapper, .fixed .right-side { padding-top: var(--nova-header); }
@media (max-width: 767px) {
.fixed .content-wrapper, .fixed .right-side { padding-top: 108px; }
}
.skin-blue .main-header .navbar,
.main-header .navbar {
background: var(--nova-surface);
border-bottom: 1px solid var(--nova-border);
box-shadow: 0 1px 2px rgba(18, 18, 54, .03);
min-height: 58px;
}
.main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav > li > a { color: var(--nova-text-soft); }
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.main-header .navbar .nav > li > a:hover {
background: var(--nova-accent-soft);
color: var(--nova-accent-700);
border-radius: var(--nova-radius-xs);
}
.skin-blue .main-header .navbar .sidebar-toggle,
.main-header .navbar .sidebar-toggle { color: var(--nova-text-soft); }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.main-header .navbar .sidebar-toggle .icon-bar { background: currentColor; }
/* the bundled skin paints this lime green at 20px */
.main-header .sidebar-session,
.sidebar-session {
color: var(--nova-text);
font-weight: 620;
font-size: 15.5px;
letter-spacing: -0.015em;
line-height: 38px;
padding: 10px 0;
display: inline-block;
}
.navbar-form.search-form .form-control {
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: 999px;
height: 38px;
padding: 0 16px;
box-shadow: none;
min-width: 220px;
}
.navbar-form.search-form .form-control:focus {
background: var(--nova-surface);
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.headertopmenu > li > a { border-radius: var(--nova-radius-xs); }
/* Theme switch ------------------------------------------------------------ */
.nova-theme-toggle {
background: transparent;
border: 1px solid var(--nova-border);
color: var(--nova-text-soft);
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
margin: 10px 6px 0 0;
cursor: pointer;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.nova-theme-toggle:hover {
background: var(--nova-accent-soft);
border-color: var(--nova-accent);
color: var(--nova-accent-700);
}
.nova-theme-toggle .fa { font-size: 15px; }
html[data-nova-theme="dark"] .nova-theme-toggle:hover { color: #fff; }
/* --------------------------------------------------------------------------
5. Cards (AdminLTE .box)
-------------------------------------------------------------------------- */
.box {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-top: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
margin-bottom: 22px;
}
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default {
border-top: 1px solid var(--nova-border);
}
/* Keep the status hint, but as a soft top edge rather than a slab */
.box.box-primary { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-accent); }
.box.box-info { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-info); }
.box.box-success { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-success); }
.box.box-warning { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-warning); }
.box.box-danger { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-danger); }
.box-header { padding: 18px 20px; border-bottom: 1px solid var(--nova-border-soft); }
.box-header.with-border { border-bottom: 1px solid var(--nova-border-soft); }
.box-header > .box-title {
font-size: 16px; font-weight: 620; letter-spacing: -0.015em; color: var(--nova-text);
}
.box-header > .box-tools { top: 14px; right: 16px; }
.box-body { padding: 20px; }
.box-footer { background: var(--nova-surface-2); border-top: 1px solid var(--nova-border-soft);
border-radius: 0 0 var(--nova-radius) var(--nova-radius); padding: 16px 20px; }
.box.box-solid > .box-header { color: var(--nova-text); background: transparent; }
.nav-tabs-custom {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
}
.nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--nova-border-soft); padding: 0 8px; }
.nav-tabs-custom > .nav-tabs > li { margin-right: 2px; border-top: none; }
.nav-tabs-custom > .nav-tabs > li > a { color: var(--nova-muted); font-weight: 500; border-radius: 0; }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent; }
.nav-tabs-custom > .nav-tabs > li.active > a {
color: var(--nova-accent-700); border-color: transparent;
box-shadow: inset 0 -2px 0 var(--nova-accent);
}
/* --------------------------------------------------------------------------
6. Buttons
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--nova-radius-xs);
font-weight: 550;
font-size: 13.5px;
padding: 8px 16px;
border: 1px solid transparent;
box-shadow: none;
transition: background .16s ease, box-shadow .16s ease, border-color .16s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nova-accent-soft); }
.btn-primary {
background: var(--nova-accent); border-color: var(--nova-accent);
box-shadow: 0 6px 16px -8px var(--nova-accent-glow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: var(--nova-accent-600); border-color: var(--nova-accent-600); color: #fff;
}
.btn-default {
background: var(--nova-surface); border-color: var(--nova-border); color: var(--nova-text-soft);
}
.btn-default:hover, .btn-default:focus {
background: var(--nova-canvas); border-color: var(--nova-accent); color: var(--nova-accent-700);
}
.btn-success { background: var(--nova-success); border-color: var(--nova-success); }
.btn-success:hover, .btn-success:focus { background: #0B7F59; border-color: #0B7F59; }
.btn-info { background: var(--nova-info); border-color: var(--nova-info); }
.btn-info:hover, .btn-info:focus { background: #245FBC; border-color: #245FBC; }
.btn-warning { background: var(--nova-warning); border-color: var(--nova-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #B45309; border-color: #B45309; color: #fff; }
.btn-danger { background: var(--nova-danger); border-color: var(--nova-danger); }
.btn-danger:hover, .btn-danger:focus { background: #BE2247; border-color: #BE2247; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--nova-radius-sm); }
.btn-flat { border-radius: var(--nova-radius-xs); }
/* --------------------------------------------------------------------------
7. Forms
-------------------------------------------------------------------------- */
label, .control-label { font-weight: 550; font-size: 13px; color: var(--nova-text-soft); margin-bottom: 6px; }
.form-control {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-text);
height: 40px;
padding: 8px 13px;
font-size: 14px;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus {
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.form-control::placeholder { color: var(--nova-muted); opacity: .75; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background: var(--nova-canvas); color: var(--nova-muted);
}
textarea.form-control { height: auto; }
select.form-control { height: 40px; }
.input-group-addon {
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-muted);
}
.has-error .form-control { border-color: var(--nova-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px var(--nova-danger-soft); }
.has-error .control-label, .has-error .help-block { color: var(--nova-danger); }
.help-block { font-size: 12.5px; color: var(--nova-muted); }
.bootstrap-select > .btn, .bootstrap-select .dropdown-toggle {
background: var(--nova-surface) !important;
border: 1px solid var(--nova-border) !important;
border-radius: var(--nova-radius-xs) !important;
color: var(--nova-text) !important;
height: 40px;
}
.dropdown-menu {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-sm);
box-shadow: var(--nova-shadow-lg);
padding: 6px;
}
.dropdown-menu > li > a { color: var(--nova-text-soft); border-radius: 6px; padding: 8px 12px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background: var(--nova-accent-soft); color: var(--nova-accent-700);
}
.dropdown-menu .divider { background: var(--nova-border-soft); }
/* --------------------------------------------------------------------------
8. Tables
-------------------------------------------------------------------------- */
.table { color: var(--nova-text); }
.table > thead > tr > th {
border-bottom: 1px solid var(--nova-border);
color: var(--nova-muted);
font-size: 11.5px;
font-weight: 650;
letter-spacing: .05em;
text-transform: uppercase;
padding: 12px 14px;
}
.table > tbody > tr > td {
border-top: 1px solid var(--nova-border-soft);
padding: 12px 14px;
vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--nova-accent-soft); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--nova-surface-2); }
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--nova-border-soft); }
/* DataTables -------------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-text);
padding: 6px 10px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--nova-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid var(--nova-border) !important;
border-radius: var(--nova-radius-xs) !important;
background: var(--nova-surface) !important;
color: var(--nova-text-soft) !important;
margin: 0 2px; padding: 6px 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--nova-accent-soft) !important;
border-color: var(--nova-accent) !important;
color: var(--nova-accent-700) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--nova-accent) !important;
border-color: var(--nova-accent) !important;
color: #fff !important;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--nova-muted); }
/* Pagination -------------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
background: var(--nova-surface); border-color: var(--nova-border);
color: var(--nova-text-soft); margin: 0 2px; border-radius: var(--nova-radius-xs) !important;
}
.pagination > li > a:hover {
background: var(--nova-accent-soft); border-color: var(--nova-accent); color: var(--nova-accent-700);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
background: var(--nova-accent); border-color: var(--nova-accent); color: #fff;
}
/* --------------------------------------------------------------------------
9. Labels, badges, alerts
-------------------------------------------------------------------------- */
.label, .badge {
font-weight: 600; font-size: 11.5px; padding: 4px 9px;
border-radius: 999px; letter-spacing: .01em;
}
.label-primary, .bg-primary { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.label-success, .bg-green { background: var(--nova-success-soft); color: var(--nova-success); }
.label-info, .bg-aqua { background: var(--nova-info-soft); color: var(--nova-info); }
.label-warning, .bg-yellow { background: var(--nova-warning-soft); color: var(--nova-warning); }
.label-danger, .bg-red { background: var(--nova-danger-soft); color: var(--nova-danger); }
.label-default { background: var(--nova-border-soft); color: var(--nova-muted); }
.badge { background: var(--nova-accent); color: #fff; }
.alert {
border: 1px solid transparent;
border-radius: var(--nova-radius-sm);
padding: 14px 18px;
font-size: 13.5px;
box-shadow: none;
}
.alert-success { background: var(--nova-success-soft); border-color: rgba(15,157,110,.24); color: var(--nova-success); }
.alert-info { background: var(--nova-info-soft); border-color: rgba(45,116,224,.24); color: var(--nova-info); }
.alert-warning { background: var(--nova-warning-soft); border-color: rgba(217,119,6,.26); color: var(--nova-warning); }
.alert-danger, .alert-error { background: var(--nova-danger-soft); border-color: rgba(220,47,85,.24); color: var(--nova-danger); }
.alert a { color: inherit; text-decoration: underline; }
.callout { border-radius: var(--nova-radius-sm); box-shadow: none; border: 1px solid var(--nova-border); }
/* --------------------------------------------------------------------------
10. Dashboard widgets
-------------------------------------------------------------------------- */
.info-box {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
min-height: 92px;
transition: transform .18s ease, box-shadow .18s ease;
}
.info-box:hover { transform: translateY(-2px); box-shadow: var(--nova-shadow-lg); }
.info-box-icon {
border-radius: var(--nova-radius) 0 0 var(--nova-radius);
width: 82px; height: 92px; line-height: 92px; font-size: 26px;
}
.info-box-content { padding: 18px 16px; margin-left: 82px; }
.info-box-text {
color: var(--nova-muted); font-size: 11.5px; font-weight: 650;
letter-spacing: .05em; text-transform: uppercase;
}
.info-box-number { color: var(--nova-text); font-size: 25px; font-weight: 660; letter-spacing: -0.02em; }
.small-box {
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
overflow: hidden;
}
.small-box h3 { font-weight: 660; letter-spacing: -0.03em; }
.small-box > .small-box-footer { background: rgba(0, 0, 0, .12); font-size: 12.5px; padding: 8px; }
/* AdminLTE colour utilities, re-tuned to the palette */
.bg-aqua, .bg-aqua-active, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body { background-color: var(--nova-info) !important; }
.bg-green, .bg-green-active, .callout.callout-success, .label-success, .modal-success .modal-body { background-color: var(--nova-success) !important; }
.bg-yellow, .bg-yellow-active, .callout.callout-warning, .label-warning, .modal-warning .modal-body { background-color: var(--nova-warning) !important; }
.bg-red, .bg-red-active, .callout.callout-danger, .label-danger, .modal-danger .modal-body { background-color: var(--nova-danger) !important; }
.bg-blue, .bg-light-blue, .bg-primary { background-color: var(--nova-accent) !important; }
.bg-purple { background-color: var(--nova-accent-700) !important; }
/* the utilities above would otherwise repaint the soft pill labels */
.label-primary, .label-success, .label-info, .label-warning, .label-danger {
background-color: transparent !important;
}
.label-primary { background: var(--nova-accent-soft) !important; color: var(--nova-accent-700) !important; }
.label-success { background: var(--nova-success-soft) !important; color: var(--nova-success) !important; }
.label-info { background: var(--nova-info-soft) !important; color: var(--nova-info) !important; }
.label-warning { background: var(--nova-warning-soft) !important; color: var(--nova-warning) !important; }
.label-danger { background: var(--nova-danger-soft) !important; color: var(--nova-danger) !important; }
.progress {
background: var(--nova-border-soft);
border-radius: 999px;
box-shadow: none;
height: 8px;
}
.progress-bar { border-radius: 999px; box-shadow: none; background-color: var(--nova-accent); }
.progress-bar-aqua { background-color: var(--nova-info); }
.progress-bar-green { background-color: var(--nova-success); }
.progress-bar-yellow { background-color: var(--nova-warning); }
.progress-bar-red { background-color: var(--nova-danger); }
.progress-group .progress-text { color: var(--nova-text-soft); font-weight: 550; font-size: 13px; }
.progress-group .progress-number { color: var(--nova-muted); font-size: 13px; }
/* --------------------------------------------------------------------------
11. Modals, tooltips, footer
-------------------------------------------------------------------------- */
.modal-content {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--nova-border-soft); padding: 18px 22px; }
.modal-header .modal-title { font-size: 17px; font-weight: 620; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--nova-border-soft); padding: 16px 22px; }
.modal-backdrop.in { opacity: .5; background: #14132E; }
.tooltip-inner {
background: var(--nova-text); color: #fff; border-radius: 6px;
font-size: 12.5px; padding: 6px 10px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--nova-text); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--nova-text); }
.main-footer {
background: var(--nova-surface);
border-top: 1px solid var(--nova-border);
color: var(--nova-muted);
font-size: 13px;
padding: 16px 22px;
}
.main-footer a { color: var(--nova-accent-600); }
/* Scrollbars -------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--nova-border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nova-muted); background-clip: content-box; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: content-box; }
/* --------------------------------------------------------------------------
12. Dark mode: surfaces the utilities above cannot reach through tokens
-------------------------------------------------------------------------- */
html[data-nova-theme="dark"] body { background: var(--nova-canvas); }
html[data-nova-theme="dark"] .box,
html[data-nova-theme="dark"] .nav-tabs-custom,
html[data-nova-theme="dark"] .modal-content,
html[data-nova-theme="dark"] .info-box,
html[data-nova-theme="dark"] .dropdown-menu { background: var(--nova-surface); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .box-footer,
html[data-nova-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--nova-surface-2); }
html[data-nova-theme="dark"] .form-control,
html[data-nova-theme="dark"] .bootstrap-select > .btn,
html[data-nova-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-nova-theme="dark"] .dataTables_wrapper .dataTables_length select {
background: var(--nova-surface-2) !important;
border-color: var(--nova-border) !important;
color: var(--nova-text) !important;
}
html[data-nova-theme="dark"] .input-group-addon { background: var(--nova-surface-2); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .btn-default {
background: var(--nova-surface-2); border-color: var(--nova-border); color: var(--nova-text-soft);
}
html[data-nova-theme="dark"] .main-footer,
html[data-nova-theme="dark"] .main-header .navbar { background: var(--nova-surface); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .table > tbody > tr > td { border-color: var(--nova-border-soft); }
html[data-nova-theme="dark"] .table-hover > tbody > tr:hover { background: var(--nova-surface-2); }
html[data-nova-theme="dark"] .content-header > h1,
html[data-nova-theme="dark"] .box-title { color: var(--nova-text); }
html[data-nova-theme="dark"] .well { background: var(--nova-surface-2); border-color: var(--nova-border); }
html[data-nova-theme="dark"] hr { border-color: var(--nova-border); }
html[data-nova-theme="dark"] .close { color: var(--nova-text); text-shadow: none; opacity: .7; }
html[data-nova-theme="dark"] img.profile-user-img,
html[data-nova-theme="dark"] .main-header .logo img { filter: brightness(1.06); }
/* Third-party widgets that hard-code white ------------------------------- */
html[data-nova-theme="dark"] .datepicker,
html[data-nova-theme="dark"] .daterangepicker,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget,
html[data-nova-theme="dark"] .select2-dropdown,
html[data-nova-theme="dark"] .bootstrap-select .dropdown-menu {
background: var(--nova-surface) !important;
border-color: var(--nova-border) !important;
color: var(--nova-text) !important;
}
html[data-nova-theme="dark"] .datepicker td,
html[data-nova-theme="dark"] .datepicker th,
html[data-nova-theme="dark"] .daterangepicker td,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget td { color: var(--nova-text); }
html[data-nova-theme="dark"] .datepicker td.day:hover,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget td.day:hover { background: var(--nova-accent-soft); }
html[data-nova-theme="dark"] .datepicker td.active,
html[data-nova-theme="dark"] .daterangepicker td.active { background: var(--nova-accent) !important; color: #fff; }
html[data-nova-theme="dark"] .note-editor .note-toolbar,
html[data-nova-theme="dark"] .note-editable,
html[data-nova-theme="dark"] .wysihtml5-sandbox {
background: var(--nova-surface-2) !important; color: var(--nova-text) !important;
}
/* --------------------------------------------------------------------------
13. Icons - Font Awesome 6 sits a little heavier than 4 did
-------------------------------------------------------------------------- */
.fa, .fas, .far, .fab { line-height: inherit; }
.btn .fa { margin-right: 5px; }
.btn .fa:only-child { margin-right: 0; }
.btn-xs .fa, .btn-sm .fa { margin-right: 4px; }
/* --------------------------------------------------------------------------
14. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.content-header, .content { padding-left: 14px; padding-right: 14px; }
.content-header > .breadcrumb { position: static; margin-top: 8px; }
.navbar-form.search-form .form-control { min-width: 0; }
.box-body, .box-header { padding: 15px; }
}
/* Motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
15. Sidebar custom scrollbar (mCustomScrollbar)
-------------------------------------------------------------------------- */
.sidebar .mCSB_scrollTools .mCSB_draggerRail,
.main-sidebar .mCSB_scrollTools .mCSB_draggerRail { background: rgba(255, 255, 255, .05); width: 4px; }
.sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.main-sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background: rgba(255, 255, 255, .22); width: 4px; border-radius: 999px;
}
.sidebar .mCSB_scrollTools { opacity: .6; }
/* --------------------------------------------------------------------------
16. Avatar fallback
Photos that 404 (a school that has not uploaded any yet) are swapped for a
neutral placeholder by nova.js rather than showing a broken-image glyph.
-------------------------------------------------------------------------- */
img.nova-img-missing {
background: linear-gradient(135deg, var(--nova-accent-soft) 0%, rgba(124, 58, 237, .04) 100%);
object-fit: cover;
border-radius: inherit;
}
/* --------------------------------------------------------------------------
17. Dark mode: containers that hard-code #fff
AdminLTE and the bundled stylesheet paint several panes white outright,
which leaves light text on a white ground once the theme flips.
-------------------------------------------------------------------------- */
html[data-nova-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-nova-theme="dark"] .tab-content,
html[data-nova-theme="dark"] .panel,
html[data-nova-theme="dark"] .panel-body,
html[data-nova-theme="dark"] .panel-default,
html[data-nova-theme="dark"] .list-group-item,
html[data-nova-theme="dark"] .timeline > li > .timeline-item,
html[data-nova-theme="dark"] .direct-chat-text,
html[data-nova-theme="dark"] .product-list-in-box > .item,
html[data-nova-theme="dark"] .table > tbody > tr > td,
html[data-nova-theme="dark"] .table > thead > tr > th {
background-color: var(--nova-surface);
border-color: var(--nova-border);
color: var(--nova-text);
}
html[data-nova-theme="dark"] .panel-heading,
html[data-nova-theme="dark"] .list-group-item.active {
background-color: var(--nova-surface-2);
border-color: var(--nova-border);
color: var(--nova-text);
}
/* Search submit in the header carries an inline white background. */
html[data-nova-theme="dark"] #search-btn,
html[data-nova-theme="dark"] .search-form .btn {
background: var(--nova-surface-2) !important;
color: var(--nova-text-soft) !important;
border: 1px solid var(--nova-border) !important;
}
/* Anything still painting itself white inside the content area. */
html[data-nova-theme="dark"] .content-wrapper [style*="background: #fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background:#fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background-color: #fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background-color:#fff"] {
background: var(--nova-surface) !important;
}
/* --------------------------------------------------------------------------
18. Shared inline code chip (used by the platform console and signup)
-------------------------------------------------------------------------- */
.pf-code {
font-family: Menlo, Consolas, monospace;
font-size: 12px;
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
padding: 2px 7px;
border-radius: 6px;
color: var(--nova-text-soft);
}
/* --------------------------------------------------------------------------
19. Dashboard KPI strip
The markup is icon + label + a floated value inside one . Flexing that
paragraph and giving the value full width promotes it to the headline
figure, which turns the plain strip into a proper stat card - no change to
the dashboard view itself.
-------------------------------------------------------------------------- */
.topprograssstart {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
padding: 16px 18px 14px;
margin-bottom: 20px;
transition: transform .18s ease, box-shadow .18s ease;
}
.topprograssstart:hover { transform: translateY(-2px); box-shadow: var(--nova-shadow-lg); }
.topprograssstart > p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 11px;
margin: 0 0 12px;
font-size: 11.5px;
font-weight: 650;
letter-spacing: .05em;
color: var(--nova-muted);
line-height: 1.35;
}
.topprograssstart > p > .ftlayer {
order: -1;
flex: none;
width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--nova-accent-soft);
color: var(--nova-accent-600);
font-size: 14px;
}
.topprograssstart > p > .pull-right {
order: 1;
float: none;
width: 100%;
margin-top: 6px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--nova-text);
}
.topprograssstart .progress-group { margin: 0; }
.topprograssstart .progress-minibar { height: 6px; margin: 0; }
/* --------------------------------------------------------------------------
20. Sidebar width
AdminLTE hard-codes 230px across the shell - the rail itself, the logo box,
the navbar offset, the content offset, and the off-canvas/collapse
transforms. All of them have to move together or the layout tears.
-------------------------------------------------------------------------- */
.main-sidebar, .left-side { width: var(--nova-sidebar-w); }
@media (min-width: 768px) {
.content-wrapper,
.right-side,
.main-footer { margin-left: var(--nova-sidebar-w); }
.main-header > .navbar { margin-left: var(--nova-sidebar-w); }
.main-header .logo { width: var(--nova-sidebar-w); }
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-ms-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-o-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
}
}
@media (max-width: 767px) {
.main-sidebar, .left-side {
-webkit-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-ms-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-o-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
}
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(var(--nova-sidebar-w), 0);
-ms-transform: translate(var(--nova-sidebar-w), 0);
-o-transform: translate(var(--nova-sidebar-w), 0);
transform: translate(var(--nova-sidebar-w), 0);
}
}
/* The mini rail keeps AdminLTE's 50px; only the expanded width changes. */
@media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
width: 50px;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
left: 50px;
}
}
/* --------------------------------------------------------------------------
21. Billing (school-side subscription screen)
-------------------------------------------------------------------------- */
.billing-plan {
position: relative;
border: 2px solid var(--nova-border);
border-radius: 15px;
padding: 20px 18px;
margin-bottom: 16px;
height: calc(100% - 16px);
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.billing-plan:hover { border-color: var(--nova-accent); transform: translateY(-2px); }
.billing-plan.is-current { border-color: var(--nova-accent); box-shadow: 0 0 0 4px var(--nova-accent-soft); }
.billing-current {
position: absolute; top: -11px; left: 18px;
background: var(--nova-accent); color: #fff;
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 10px; border-radius: 999px;
}
.billing-plan h4 { font-size: 15px; font-weight: 640; margin: 0 0 4px; }
.billing-price {
font-size: 25px; font-weight: 700; letter-spacing: -0.03em;
color: var(--nova-accent-600); margin-bottom: 14px;
}
.billing-price small { font-size: 12.5px; color: var(--nova-muted); font-weight: 500; letter-spacing: 0; }
.billing-features { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; color: var(--nova-text-soft); }
.billing-features li { padding: 4px 0; }
.billing-features i { color: var(--nova-accent); width: 16px; margin-right: 6px; }
/* Subscription chip in the top bar. Height matches the currency and language
pickers and the icon buttons it sits between, so the cluster shares one
baseline instead of the chip reading as its own size. */
.nova-sub-chip {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 38px; padding: 0 14px; margin: 0;
border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1;
text-decoration: none; white-space: nowrap;
border: 1px solid transparent;
transition: filter .16s ease;
}
.nova-sub-chip:hover, .nova-sub-chip:focus { filter: brightness(.96); text-decoration: none; }
.nova-sub-chip.ok { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.nova-sub-chip.warn { background: var(--nova-warning-soft); color: var(--nova-warning); }
.nova-sub-chip.bad { background: var(--nova-danger-soft); color: var(--nova-danger); }
/* --------------------------------------------------------------------------
22. Top bar layout
--------------------------------------------------------------------------
The markup is Bootstrap 3 grid columns holding floated children, which wraps
onto a second row as soon as the school name, the search box and the action
icons stop fitting. Laying the bar out as a single flex row removes the
float arithmetic entirely: the search absorbs the slack, the actions keep
their size, and nothing can drop to a second line.
-------------------------------------------------------------------------- */
.main-header .navbar,
.skin-blue .main-header .navbar {
display: flex;
align-items: center;
gap: 16px;
padding: 0 18px 0 0;
min-height: var(--nova-header);
}
/* Bootstrap's clearfix pseudo-elements become stray flex items. */
.main-header .navbar::before,
.main-header .navbar::after { display: none; }
.main-header .navbar .sidebar-toggle {
position: static;
float: none;
height: var(--nova-header);
padding: 0 16px;
display: flex;
align-items: center;
border-radius: 0;
}
/* The grid columns stop being columns. */
.main-header .navbar > [class*="col-"] {
float: none;
width: auto;
padding: 0;
min-width: 0;
}
.main-header .navbar > [class*="col-"]:first-of-type { flex: 0 1 auto; }
.main-header .navbar > [class*="col-"]:last-of-type {
flex: 1 1 auto;
min-width: 0;
display: flex;
justify-content: flex-end;
}
.main-header .sidebar-session,
.sidebar-session {
padding: 0 !important;
line-height: 1.25;
display: block;
max-width: 340px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-header .navbar .pull-right {
float: none;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* Search -------------------------------------------------------------------
One pill: the border lives on the input-group and the field and button are
transparent inside it, so they cannot come apart at the join. */
.main-header .navbar-form.search-form {
float: none;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
/* A floor, so the field shrinks to a usable size and then hides at the
breakpoint below rather than collapsing to a stub. */
flex: 0 1 300px;
min-width: 200px;
}
.main-header .navbar-form.search-form .input-group {
display: flex;
align-items: center;
/* Bootstrap puts a 3px top margin on this, which left the search pill
sitting 1.5px below every other control in the row. */
margin: 0;
width: 100%;
height: 38px;
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: 999px;
overflow: hidden;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.main-header .navbar-form .form-control.search-form3 {
flex: 1 1 auto;
width: 100%;
min-width: 0;
height: 36px;
padding: 0 4px 0 16px;
font-size: 13.5px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.main-header .navbar-form .input-group-btn { flex: 0 0 auto; width: auto; display: flex; }
.main-header .navbar-form .topsidesearchbtn {
height: 36px !important;
width: 42px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--nova-muted) !important;
}
.main-header .navbar-form .topsidesearchbtn:hover { color: var(--nova-accent-600) !important; }
.main-header .navbar-form.search-form:focus-within .input-group {
background: var(--nova-surface);
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
/* Action cluster ---------------------------------------------------------- */
.navbar-custom-menu {
float: none;
display: flex;
align-items: center;
gap: 4px;
}
.navbar-custom-menu > .currency-icon-list,
.navbar-custom-menu > .langdiv { margin: 0; display: flex; align-items: center; }
.navbar-custom-menu .headertopmenu,
.main-header .navbar .nav.navbar-nav.headertopmenu {
float: none;
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
}
.navbar-custom-menu .headertopmenu > li { float: none; }
.navbar-custom-menu .headertopmenu > li > a,
.main-header .navbar .nav > li > a {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 8px;
border-radius: 10px;
line-height: 1;
}
.navbar-custom-menu .headertopmenu > li > a > i { font-size: 15px; }
/* Currency and language pickers. bootstrap-select gives its button a computed
width that truncates the label ("INR (" instead of "INR (Rs)"), so the width
is handed back to the content. */
.main-header .bootstrap-select { margin: 0; width: auto !important; }
.main-header .bootstrap-select > .btn,
.main-header .bootstrap-select > .dropdown-toggle {
height: 38px !important;
padding: 0 12px !important;
border-radius: 10px !important;
display: flex !important;
align-items: center;
gap: 6px;
width: auto !important;
font-size: 13px;
white-space: nowrap;
}
.main-header .bootstrap-select .filter-option {
position: static !important;
width: auto !important;
overflow: visible !important;
}
.main-header .bootstrap-select .filter-option-inner,
.main-header .bootstrap-select .filter-option-inner-inner {
overflow: visible !important;
white-space: nowrap;
width: auto !important;
}
.main-header .currency-icon-list img,
.main-header .langdiv img { max-height: 18px; width: auto; }
/* Subscription chip: a peer of the icons, not floating over them. */
.nova-sub-chip {
margin: 0;
flex: none;
align-self: center;
vertical-align: middle;
}
/* Avatar ------------------------------------------------------------------ */
.navbar-custom-menu .headertopmenu img,
.main-header .navbar .nav > li > a > img {
width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
}
/* --------------------------------------------------------------------------
Narrow screens: shed the optional pieces before anything can wrap.
-------------------------------------------------------------------------- */
@media (max-width: 1400px) {
.main-header .navbar-form.search-form { flex-basis: 240px; }
.main-header .sidebar-session { max-width: 240px; }
}
@media (max-width: 1150px) {
/* Below this the search cannot hold its minimum without squeezing the
actions, so it goes rather than shrinking into a stub. */
.main-header .navbar-form.search-form { display: none; }
}
@media (max-width: 991px) {
.nova-sub-chip { padding: 0 11px; }
.main-header .langdiv { display: none; }
}
@media (max-width: 767px) {
.main-header .navbar { gap: 8px; padding-right: 8px; }
.main-header .sidebar-session { max-width: 150px; font-size: 14px; }
.main-header .navbar .pull-right { gap: 6px; }
}
/* Section 17 restyles the header search button for dark mode, and its
attribute selector outranks the pill rules above. Hand the button back to
the pill so the two do not render as separate controls. */
html[data-nova-theme="dark"] .main-header .navbar-form.search-form .input-group {
background: var(--nova-surface-2);
border-color: var(--nova-border);
}
html[data-nova-theme="dark"] .main-header .navbar-form .topsidesearchbtn,
html[data-nova-theme="dark"] .main-header .navbar-form #search-btn {
background: transparent !important;
border: 0 !important;
color: var(--nova-muted) !important;
}
html[data-nova-theme="dark"] .main-header .navbar-form .form-control.search-form3 {
background: transparent !important;
border: 0 !important;
color: var(--nova-text) !important;
}
/* --------------------------------------------------------------------------
23. Brand marks
The wordmark is dark navy. That reads on a white canvas and disappears on
the indigo sidebar, so two files exist and each surface uses the one its
background can carry. Where the background follows the theme - the landing
nav and footer - both are in the markup and CSS shows the right one.
-------------------------------------------------------------------------- */
.brand-logo {
display: block;
width: auto;
max-width: 100%;
height: 34px;
}
.brand-on-dark { display: none; }
html[data-nova-theme="dark"] .brand-on-light { display: none; }
html[data-nova-theme="dark"] .brand-on-dark { display: block; }
.ld-brand .brand-logo { height: 36px; }
.signup-brand .brand-logo { height: 38px; }
.pf-brand .brand-logo { height: 30px; }
@media (max-width: 767px) {
.ld-brand .brand-logo { height: 30px; }
.signup-brand .brand-logo { height: 32px; }
}
/* --------------------------------------------------------------------------
24. Small screens
The app was built for a desk. On a phone three things broke: the header
controls overflowed sideways across the school name, wide tables were cut
off with no way to reach the rest, and a handful of panels carry a
hard-coded white background that dark mode never reached.
-------------------------------------------------------------------------- */
/* The subscription chip ---------------------------------------------------
AdminLTE strips the background off every anchor in the action cluster below
991px (.main-header .navbar-custom-menu a { background: transparent }),
which erased the chip completely and left a bare icon. Put it back, from a
selector that outranks it. */
.nova-sub-short { display: none; }
@media (max-width: 991px) {
.main-header .navbar-custom-menu a.nova-sub-chip {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 12px;
border-radius: 999px;
}
.main-header .navbar-custom-menu a.nova-sub-chip.ok {
background: var(--nova-accent-soft);
color: var(--nova-accent-700);
}
.main-header .navbar-custom-menu a.nova-sub-chip.warn {
background: var(--nova-warning-soft);
color: var(--nova-warning);
}
.main-header .navbar-custom-menu a.nova-sub-chip.bad {
background: var(--nova-danger-soft);
color: var(--nova-danger);
}
/* "30 days left" does not fit; "30d" does, and still says something. */
.nova-sub-chip .nova-sub-full { display: none; }
.nova-sub-chip .nova-sub-short { display: inline; }
}
/* Dark mode washes the tinted pill out against the dark bar, which is what
made the chip hard to pick out. Give it enough fill to read as a control. */
html[data-nova-theme="dark"] .nova-sub-chip.ok {
background: rgba(139, 92, 246, .22);
border-color: rgba(139, 92, 246, .40);
color: #C4B5FD;
}
html[data-nova-theme="dark"] .nova-sub-chip.warn {
background: rgba(245, 158, 11, .20);
border-color: rgba(245, 158, 11, .38);
color: #FCD34D;
}
html[data-nova-theme="dark"] .nova-sub-chip.bad {
background: rgba(239, 68, 68, .22);
border-color: rgba(239, 68, 68, .42);
color: #FCA5A5;
}
html[data-nova-theme="dark"] .main-header .navbar-custom-menu a.nova-sub-chip.ok {
background: rgba(139, 92, 246, .22);
color: #C4B5FD;
}
html[data-nova-theme="dark"] .main-header .navbar-custom-menu a.nova-sub-chip.warn {
background: rgba(245, 158, 11, .20);
color: #FCD34D;
}
html[data-nova-theme="dark"] .main-header .navbar-custom-menu a.nova-sub-chip.bad {
background: rgba(239, 68, 68, .22);
color: #FCA5A5;
}
/* Header layout on a phone -------------------------------------------------
The action cluster was allowed to grow and the name column was not allowed
to shrink, so the cluster ran 98px off its own column and sat on top of the
school name. Reverse it: the actions take what they need, the name takes
the rest and truncates. */
@media (max-width: 991px) {
.main-header .navbar > [class*="col-"]:first-of-type {
flex: 1 1 auto;
min-width: 0;
}
.main-header .navbar > [class*="col-"]:last-of-type { flex: 0 0 auto; }
.main-header .navbar .pull-right { flex: 0 0 auto; }
.navbar-custom-menu { flex: 0 0 auto; }
.main-header .sidebar-session { max-width: 100%; font-size: 14px; }
}
@media (max-width: 767px) {
/* Currency is a setting a school picks once. It does not earn its width
on a phone, where every control is competing for the same row. */
.main-header .currency-icon-list { display: none; }
.navbar-custom-menu { gap: 2px; }
.navbar-custom-menu .headertopmenu > li > a,
.main-header .navbar .nav > li > a { min-width: 34px; padding: 0 5px; }
}
@media (max-width: 480px) {
/* Truncated, not dropped: the band above shows the platform name, so this
is the only thing on screen saying which school you are in. */
.main-header .sidebar-session { font-size: 13.5px; }
}
/* Wide tables --------------------------------------------------------------
Most lists are five or more columns and were simply cut off at the edge of
the screen with nothing to indicate more existed. Let the table scroll
inside its own box rather than forcing the page sideways. */
@media (max-width: 767px) {
.box-body > .table-responsive,
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 0;
}
.box-body table.table,
.dataTables_wrapper table.table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.box-body table.table > thead > tr > th,
.box-body table.table > tbody > tr > td {
padding: 9px 10px;
font-size: 13px;
}
/* The export buttons and the search box sat on one line and were clipped. */
.dataTables_wrapper .dt-buttons { float: none; text-align: center; margin-bottom: 8px; }
.dataTables_wrapper .dataTables_filter { float: none; text-align: left; }
.dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
.dataTables_wrapper .dataTables_length { float: none; margin-bottom: 8px; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
}
/* The student "Details view" card -----------------------------------------
Its photo and its text are absolutely positioned at 20% / 80% inside a
150px box, which on a phone overlaps and clips. Stack it instead. It also
carries a hard-coded white background, so in dark mode it was light text on
white - the one place in the app that was genuinely unreadable. */
html[data-nova-theme="dark"] .slide-row,
html[data-nova-theme="dark"] .slide-content,
html[data-nova-theme="dark"] .slide-footer {
background-color: var(--nova-surface);
color: var(--nova-text);
}
html[data-nova-theme="dark"] .slide-row { border-color: var(--nova-border); }
html[data-nova-theme="dark"] .slide-row address,
html[data-nova-theme="dark"] .slide-row b,
html[data-nova-theme="dark"] .slide-row strong { color: var(--nova-text); }
@media (max-width: 767px) {
.slide-row {
min-height: 0;
padding: 14px;
border-radius: 12px;
overflow: visible;
}
.slide-carousel {
width: auto;
float: none;
display: block;
max-width: 110px;
margin: 0 0 12px;
}
.slide-content {
position: static;
float: none;
left: auto;
width: 100%;
max-height: none;
padding: 0;
overflow: visible;
}
.slide-content .col-xs-6 { width: 100%; float: none; }
.slide-content .col-xs-6 + .col-xs-6 { margin-top: 10px; }
.slide-footer {
position: static;
left: auto;
width: 100%;
height: auto;
margin: 12px 0 0;
}
.slide-footer .buttons { float: none !important; display: flex; gap: 6px; }
}
/* Everything else ---------------------------------------------------------- */
@media (max-width: 767px) {
.content-wrapper { padding: 0; }
.content { padding: 10px 10px 0; }
.content-header { padding: 12px 10px 6px; }
.box { border-radius: 12px; }
.box-body { padding: 14px; }
.box-header { padding: 14px; }
.box-header .box-title { font-size: 15px; }
/* A tap target smaller than this is a miss on a phone. */
.btn { min-height: 38px; padding: 8px 14px; }
.btn-xs { min-height: 30px; padding: 4px 9px; }
/* Buttons pinned right in a form footer end up cramped against the edge. */
.box-footer .pull-right,
.box-footer .pull-left { float: none !important; }
.box-footer .btn { width: 100%; margin-bottom: 8px; }
.box-footer .btn:last-child { margin-bottom: 0; }
.modal-dialog { margin: 10px; }
.nav-tabs > li > a { padding: 9px 12px; font-size: 13.5px; }
}
/* Two dark-mode leaks, both from rules that outrank the theme's own ---------
style-main.css sets ".table a.btn-default { background:#fff; color:#444 }"
at (0,2,1), which beat html[data-nova-theme=dark] .btn-default at (0,2,0),
so every action button inside a list stayed white with dark icons. The fee
group name is an a.detail_popover pinned to #444, which on a dark row is
barely there. */
html[data-nova-theme="dark"] .table a.btn-default,
html[data-nova-theme="dark"] .table button.btn-default,
html[data-nova-theme="dark"] .dtr-details a.btn-default {
background-color: var(--nova-surface-2);
border-color: var(--nova-border);
color: var(--nova-text-soft);
}
html[data-nova-theme="dark"] .table a.btn-default:hover,
html[data-nova-theme="dark"] .table button.btn-default:hover {
background-color: var(--nova-surface-3, var(--nova-surface-2));
border-color: var(--nova-accent);
color: var(--nova-text);
}
html[data-nova-theme="dark"] a.detail_popover { color: var(--nova-accent); }
html[data-nova-theme="dark"] .mailbox-name > a { color: var(--nova-accent); }
@media (max-width: 767px) {
/* On a phone AdminLTE moves the logo onto its own band above the bar. The
school logo is the light-text lockup, picked for the dark sidebar, so on
a light band it washed out. Keep the band dark under it, as it is beside
the sidebar on a desktop. */
.main-header .logo,
.skin-blue .main-header .logo {
background: linear-gradient(100deg, var(--nova-sidebar-from) 0%, var(--nova-sidebar-to) 100%);
border-bottom-color: rgba(255, 255, 255, .08);
}
}
/* Collapsible panels ------------------------------------------------------
".panel-default1 > .panel-heading" pins colour to #212121 and the heading
label is a link, so the fee group rows on the admission form came out dark
on dark. The heading below outranks it; the link takes the theme's own link
colour. */
html[data-nova-theme="dark"] .panel-default > .panel-heading,
html[data-nova-theme="dark"] .panel-default1 > .panel-heading {
background-color: var(--nova-surface-2);
border-color: var(--nova-border);
color: var(--nova-text);
}
html[data-nova-theme="dark"] .panel-default1 > .panel-heading a,
html[data-nova-theme="dark"] .panel-default > .panel-heading a { color: var(--nova-text); }
html[data-nova-theme="dark"] .panel-default1 > .panel-heading a:hover,
html[data-nova-theme="dark"] .panel-default > .panel-heading a:hover { color: var(--nova-link); }
/* Section headings that carry their own light band ("Fees Details"). */
html[data-nova-theme="dark"] .pagetitleh2 {
background: var(--nova-surface-2);
color: var(--nova-text);
border-radius: var(--nova-radius-xs, 8px);
}