/* =====================================================================
SQL-LEDGER — MAIN STYLESHEET (sql-ledger.css) v6.2
-----------------------------------------------------------------
This is the stylesheet the app cannot do without: bin/mozilla/login.pl
and bin/mozilla/admin.pl hard-code `$form->{stylesheet} = "sql-ledger.css"`
(there is no per-user config loaded yet at login time), and it's the
default every new user profile inherits afterwards. Every other page
in the app (bin/mozilla/*.pl, menu frame, list tables, forms) also
renders through this file unless a user has explicitly switched their
preference to another file in css/ (e.g. sql-ledger-adb.css, kept in
sync with the same menu design — see documentation/refactor/).
v6.0 folded the ADB Enterprise Edition design work into this file
(real-markup menu fix, enterprise palette) and made the LOGIN screen
and MENU sidebar both blue-dominant (deep navy).
v6.1 reverted the MENU sidebar back to a standard white surface per
follow-up direction, while LOGIN stays blue-dominant: every branch
row in the tree (`.menuOut`) got a solid dark-blue highlight pill,
and the hover/"menu aktif" state (`.menuOver`) got a light blue tint.
v6.2 adds a new TOP BAR frame above the menu/content split
(bin/mozilla/menu.pl :: sub topbar — logo, sidebar collapse toggle,
menu-name search, Preferences/About/Logout), a rotating disclosure
chevron (`.is-open`, toggled by JS already in menu.pl), and a
persistent "menu aktif" highlight on the clicked leaf link
(`.is-active`, set by an onclick SL::Menu::menuitem now emits).
All of this is navigation/presentation only — no SL::* business
module (OE/IS/IR/AA/GL/RP/CT/IC/etc.) was touched. See:
- documentation/refactor/css/01-audit.md (why the old menu
CSS never rendered — same fix is carried here)
- documentation/refactor/css/02-design-system.md (design tokens)
- documentation/refactor/css/05-main-stylesheet.md (v6.0 pass)
- documentation/refactor/css/06-menu-recolor.md (v6.1 pass)
- documentation/refactor/menu/01-topbar-implementation.md (this pass)
The real, load-bearing menu markup this file targets is emitted by
bin/mozilla/menu.pl::jsmenu_frame — `.menuOut` / `.menuOver` (every
row, hover toggled by the existing inline `ChangeClass()` JS) and
`.submenu` (recursive nested wrapper, up to 3 levels per menu.ini).
===================================================================== */
/* ---------------------------------------------------------------------
0. DESIGN TOKENS
--------------------------------------------------------------------- */
:root{
/* brand / heading navy */
--el-navy-900:#0b1f3a;
--el-navy-800:#0f2c59;
--el-navy-700:#173b73;
/* primary interactive accent (content workspace, on light surfaces) */
--el-blue:#1e40af;
--el-blue-hover:#1e3a8a;
--el-blue-tint:rgba(30,64,175,.08);
--el-blue-tint-strong:rgba(30,64,175,.14);
/* semantic status colours */
--el-success:#22c55e;
--el-warning:#eab308;
--el-danger:#ef4444;
--el-green:#16803c; /* darker green for on-white text (a11y) */
/* workspace surfaces (content frame — stays light/neutral) */
--el-bg:#f4f6fa;
--el-surface:#ffffff;
--el-text:#334155;
--el-text-muted:#53626A;
--el-border:#dbe4ee;
--el-border-strong:#C3D2DA;
--el-tree-line:#e2e8f0;
--el-shadow-sm:0 1px 2px rgba(15,44,89,.06);
--el-shadow:0 2px 10px rgba(15,44,89,.10);
--el-shadow-lg:0 10px 30px rgba(11,31,58,.28);
--el-font:"museo-sans-1","museo-sans-2",-apple-system,BlinkMacSystemFont,
"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
/* ---- blue-dominant login page only (menu sidebar reverted to white,
see documentation/refactor/css/06-menu-recolor.md) ---- */
--el-on-navy-accent:#60a5fa; /* bright blue accent on the navy login gradient */
}
/* general stuff */
a:link { color: var(--el-blue); text-decoration: none; }
a:visited { color: var(--el-blue); text-decoration: none; }
a:active { color: var(--el-blue); text-decoration: underline; border: 1px #6495ED; }
a:hover { color: var(--el-blue-hover); text-decoration: underline; }
body {
font-family: var(--el-font);
font-size: 13px;
background-color: var(--el-bg);
color: var(--el-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
td {
font-family: var(--el-font);
font-size: 13px;
}
th {
font-family: var(--el-font);
font-size: 13px;
color: var(--el-navy-800);
}
/* bill */
html body.bill {
background: none repeat scroll 0 0 #FFFFFF;
}
.bill h2 {
font-size: 16px;
font-weight: bold;
margin: 20px 0;
color: var(--el-navy-800);
}
.bill h2 p {
font-size: 13px;
letter-spacing: 0.1em;
margin-top: 10px;
text-transform: uppercase;
color: var(--el-text-muted);
}
.bill table {
margin: 0 auto;
}
.bill table th {
border-bottom: 2px solid #000000;
border-right: 4px solid #FFFFFF;
font-weight: bold;
padding: 20px 2px 5px;
}
.bill table th:first-child {
border-bottom: 2px solid #000000;
border-right: 4px solid #FFFFFF;
font-weight: bold;
padding: 20px 2px 5px;
text-align: left;
}
.bill table td {
border-bottom: 1px solid #CCCCCC;
border-right: 4px solid #FFFFFF;
padding: 5px 2px;
}
.bill a {
color: black;
}
/* ---------------------------------------------------------------------
LOGIN AND ADMIN — blue-dominant (per design brief: the login screen
is the app's first impression and should read as the brand colour)
--------------------------------------------------------------------- */
.login {
font-family: var(--el-font);
}
/* NOTE: h1.login sits INSIDE table.login (the white card, td.login —
verified in bin/mozilla/login.pl), not on the blue page background,
so it needs the on-white navy colour, not the on-navy heading token. */
h1.login {
font-size: 22px;
font-weight: 600;
color: var(--el-navy-800);
letter-spacing: .2px;
}
th.login {
text-align: right;
font-weight: 600;
color: var(--el-navy-800);
}
body.admin {
background-color: #FBFFE7;
color: black;
}
/* The full page behind the login card: solid, unmistakably-blue navy
gradient — this is ~90% of what's on screen at login, so it carries
the "dominated by blue" requirement even though the card itself is
a light, readable surface. */
body.login {
background: linear-gradient(160deg, var(--el-navy-900) 0%, var(--el-blue) 55%, var(--el-navy-700) 100%);
min-height: 100vh;
}
table.login {
overflow: hidden;
background: var(--el-surface);
border-radius: 12px;
box-shadow: var(--el-shadow-lg);
border-top: 4px solid var(--el-on-navy-accent);
}
table.login, tr, td, form, tbody {
border: medium none;
}
/* =======================================================================
MENU FRAME (bin/mozilla/menu.pl :: acc_menu / jsmenu_frame)
-----------------------------------------------------------------------
Blue-dominant per design brief: a deep navy sidebar (matching the
login page's palette) so the two "chrome" surfaces a user sees on
every page — login and the persistent side nav — read as one brand,
while the content frame (main_window) stays light/neutral for
day-to-day data entry. Real DOM emitted (verified against the Perl
source, not assumed) — see documentation/refactor/css/01-audit.md:
$myconfig{name}
i.e. up to 3 real nesting levels (module -> sub-module -> function,
per menu.ini), `.menuOut`/`.menuOver` toggled purely on :hover via
inline JS (there is no persistent "open" or "current page" class —
see documentation/refactor/css/04-roadmap-lanjutan.md for what a true
rotating-chevron / active-page indicator would require).
Sidebar surface is standard white (reverted from the dark-navy pass
— see documentation/refactor/css/06-menu-recolor.md): every branch
row in the tree (`.menuOut` — expandable parents AND top-level leaf
links alike) gets a solid dark-blue highlight pill, and the
hover/"currently interacting with" state (`.menuOver`) gets a light
blue tint — this is the closest this 2-frame architecture can get to
an "active menu" indicator (see the note above).
======================================================================= */
body.menu {
font-family: var(--el-font);
font-size: 13px;
color: var(--el-navy-800);
background: var(--el-surface);
padding: 10px 8px;
}
/* ---------------------------------------------------------------------
Menu row — default state (`.menuOut`, both expandable parents AND
top-level clickable leaves use this class; there's no separate class
for "has children" in the markup, so the disclosure chevron below is
added via :has() rather than a dedicated class). Solid dark-blue pill
— this is the "main tree menu" highlight. A flex row so the (optional)
icon, the label, and the chevron all line up and the label alone can
ellipsis/collapse independently — see documentation/refactor/menu/.
--------------------------------------------------------------------- */
.menuOut {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #ffffff;
background-color: var(--el-blue);
text-align: left;
padding: 7px 10px;
margin: 1px 0;
border-radius: 5px;
border-left: 3px solid transparent;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.menuOut a {
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
font-weight: 600;
text-decoration: none;
min-width: 0;
}
/* ---------------------------------------------------------------------
Menu row — hover state (`.menuOver`, set by the inline
onmouseover="ChangeClass(...)" handler already in menu.pl). Light
blue — the "menu aktif" state — swaps in for the dark-blue pill
while the pointer is over a row.
--------------------------------------------------------------------- */
.menuOver {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--el-blue);
background-color: var(--el-blue-tint-strong);
text-align: left;
padding: 7px 10px;
margin: 1px 0;
border-radius: 5px;
border-left: 3px solid var(--el-blue);
}
.menuOver a {
display: flex;
align-items: center;
gap: 8px;
color: var(--el-blue);
font-weight: 600;
text-decoration: none;
min-width: 0;
}
/* Category icon (top-level rows only — see %topicon in bin/mozilla/menu.pl)
and the label text next to it. Icon never shrinks/never clips; the
label is what ellipsizes on narrow widths and disappears entirely
when the sidebar is collapsed to its icon-only rail. */
.tree-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
display: inline-block;
}
.tree-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Disclosure chevron on rows that have a following .submenu sibling —
i.e. rows that actually expand something. Purely decorative/progressive:
browsers without :has() simply render the row without a chevron. As a
flex item (parent is display:flex) `margin-left:auto` pushes it to the
end, same idea as `float:right` in the old block layout. */
.menuOut:has(+ .submenu)::after,
.menuOver:has(+ .submenu)::after {
content: "\25B8"; /* ▸ */
flex: 0 0 auto;
margin-left: auto;
font-size: 11px;
}
.menuOut:has(+ .submenu)::after {
color: rgba(255,255,255,.85);
transition: transform .15s ease;
}
.menuOver:has(+ .submenu)::after {
color: var(--el-blue);
transition: transform .15s ease;
}
/* Rotating chevron — `.is-open` is toggled by SwitchMenu()/ChangeClass()
in bin/mozilla/menu.pl (see documentation/refactor/menu/01-topbar-implementation.md). */
.menuOut.is-open:has(+ .submenu)::after,
.menuOver.is-open:has(+ .submenu)::after {
transform: rotate(90deg);
}
/* ---------------------------------------------------------------------
Nested submenu wrapper — recursive by design (module -> sub-module ->
function). Each nesting level gets a thin tree-guide line and a small
indent, so hierarchy reads without relying on colour alone.
--------------------------------------------------------------------- */
.submenu {
padding-left: 10px;
margin: 2px 0 2px 8px;
border-left: 1px solid var(--el-tree-line);
}
/* second nesting level (function rows under a sub-module) gets a
slightly tighter indent so 3 levels stay legible in a ~155px frame */
.submenu .submenu {
margin-left: 6px;
padding-left: 8px;
}
/* leaf rows (``) — no
.menuOut/.menuOver box, just a coloured link with its own hover feedback
so leaves read as "flatter" than expandable rows, matching the spec's
Level 3 = "specific function page" treatment. Hover uses the same
light-blue "menu aktif" treatment as `.menuOver`. Flex for the same
reason as `.menuOut a` above — leaf rows never get an icon today, but
the label span still needs to ellipsis on its own. */
.submenu a {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 4px;
color: var(--el-text-muted);
text-decoration: none;
border-left: 3px solid transparent;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.submenu a:hover {
color: var(--el-blue);
background-color: var(--el-blue-tint-strong);
border-left: 3px solid var(--el-blue);
text-decoration: none;
}
/* "Menu aktif" persistent highlight — set by an onclick added in
SL::Menu::menuitem (client-side only; see documentation/refactor/css/04-roadmap-lanjutan.md §3
and documentation/refactor/menu/01-topbar-implementation.md). Only meaningful for `.submenu a` leaf
links on the white sidebar — `.menuOut` leaves are already a solid
blue pill and don't need a separate active treatment. */
.submenu a.is-active {
background-color: var(--el-blue-tint-strong);
border-left: 3px solid var(--el-blue);
color: var(--el-blue);
font-weight: 600;
}
/* ---------------------------------------------------------------------
Collapsed (icon-only) sidebar — `body.menu.collapsed` is toggled by
setSidebarCollapsed() in bin/mozilla/menu.pl, called cross-frame from
the top bar's burger button. Labels disappear entirely (not just
ellipsis), rows center their icon, and tree-guide lines/chevrons are
dropped since there's no room and no visible label to indent toward.
Rows with no icon (nested categories, and top-level entries not in
%topicon) just render as a blank-ish pill at this width — a known,
documented limitation (see documentation/refactor/menu/README.md).
--------------------------------------------------------------------- */
body.menu.collapsed {
padding-left: 4px;
padding-right: 4px;
}
body.menu.collapsed .tree-label {
display: none;
}
body.menu.collapsed .menuOut,
body.menu.collapsed .menuOver,
body.menu.collapsed .submenu a {
justify-content: center;
padding-left: 6px;
padding-right: 6px;
gap: 0;
}
body.menu.collapsed .menuOut a,
body.menu.collapsed .menuOver a {
justify-content: center;
}
body.menu.collapsed .menuOut:has(+ .submenu)::after,
body.menu.collapsed .menuOver:has(+ .submenu)::after {
display: none;
}
body.menu.collapsed .submenu {
margin-left: 0;
padding-left: 0;
border-left: none;
}
/* Domain heading (OPERATIONS, FINANCE & REPORTING, ...) above a run of top-level groups - only
rendered when the functional layout is on ($menu_layout in sql-ledger.conf, see
documentation/refactor/menu/03-functional-layout.md). Not clickable; hidden while the menu
search filters, and reduced to a thin divider on the collapsed icon rail. */
.menuDomain {
padding: 14px 10px 4px 13px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--el-text-muted);
cursor: default;
}
body.menu.collapsed .menuDomain {
padding: 0;
margin: 8px 6px;
border-top: 1px solid var(--el-tree-line);
}
/* =======================================================================
TOP BAR (bin/mozilla/menu.pl :: sub topbar) — new frame added on top of
the existing menu/content split via a nested FRAMESET. See
documentation/refactor/menu/01-topbar-implementation.md.
======================================================================= */
html, body.topbar {
width: 100%;
height: 100%;
}
body.topbar {
margin: 0;
padding: 0 12px;
background: var(--el-surface);
border-bottom: 1px solid var(--el-border);
font-family: var(--el-font);
font-size: 13px;
color: var(--el-navy-800);
/* visible, not hidden - harmless now that the dropdown panel itself is
injected into the outer frameset document rather than rendered here
(see bin/mozilla/menu.pl :: sub topbar, overlayHost()), kept simply
because there's no reason to clip this document's own body */
overflow: visible;
box-sizing: border-box;
}
/* every element inside the top bar sizes with border-box, so padding
and borders never push flex children wider than their computed flex
space — the stock stylesheet has no global box-sizing reset, so this
is scoped to .topbar's own subtree rather than applied to the whole
page. */
.topbar, .topbar * { box-sizing: border-box; }
.topbar {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
height: 52px;
}
.topbar-zone { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-zone-left { flex: 0 1 auto; min-width: 0; }
.topbar-zone-center { flex: 1 1 0; justify-content: center; min-width: 0; }
.topbar-zone-right { flex: 0 0 auto; gap: 16px; margin-left: auto; }
.topbar-zone-right a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--el-text-muted);
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.topbar-zone-right a:hover {
color: var(--el-blue);
text-decoration: none;
}
.tb-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
display: inline-block;
}
.iconbtn {
flex: 0 0 auto;
border: none;
background: transparent;
font-size: 18px;
line-height: 1;
color: var(--el-navy-800);
cursor: pointer;
border-radius: 6px;
padding: 6px 8px;
transition: background-color .12s ease, color .12s ease;
}
.iconbtn:hover { background: var(--el-blue-tint); color: var(--el-blue); }
.iconbtn[aria-pressed="true"] { background: var(--el-blue-tint-strong); color: var(--el-blue); }
.brand { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand-name {
font-weight: 600;
color: var(--el-navy-800);
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Second row - app tagline, see documentation/refactor/css/topbar-mockup.html
".brand__name small" for the values this mirrors. */
.brand-name small {
display: block;
font-weight: 400;
font-size: 10px;
color: var(--el-text-muted);
letter-spacing: .02em;
}
.search-wrap {
position: relative;
width: 100%;
max-width: 420px;
}
.menusearch {
display: block;
width: 100%;
font-family: var(--el-font);
font-size: 13px;
padding: 6px 26px 6px 10px;
border: 1px solid var(--el-border);
border-radius: 6px;
background: var(--el-bg);
color: var(--el-text);
transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.menusearch::placeholder { color: var(--el-text-muted); }
.menusearch:hover { border-color: var(--el-border-strong); }
.menusearch:focus {
outline: none;
border-color: var(--el-blue);
box-shadow: 0 0 0 3px var(--el-blue-tint-strong);
background: var(--el-surface);
}
/* "x" button inside the search box — clears the query and resets the
tree back to its normal (unfiltered) state in one click, instead of
having to select-all/backspace the text manually. */
.search-clear {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
border: none;
background: transparent;
color: var(--el-text-muted);
font-size: 16px;
line-height: 1;
width: 20px;
height: 20px;
border-radius: 4px;
cursor: pointer;
padding: 0;
}
.search-clear:hover { background: var(--el-blue-tint); color: var(--el-blue); }
/* Notification + profile dropdowns, top bar right zone — see
documentation/refactor/menu/01-topbar-implementation.md §9. JS (sub
topbar) toggles the ".open" class and grows/restores the outer
frameset's row height to fit; this file only styles the resulting
state, it doesn't know about the frame geometry at all. */
.dropdown { position: relative; }
.dropdown-panel {
/* explicit reset, not inherited - the injected copy of this panel (see
bin/mozilla/menu.pl :: sub topbar, overlayHost()) lives outside
entirely (a direct child of in the outer frameset
document, which has no of its own at all), so it never
inherits the app's body { font-family/font-size/color } rule the
way normal in-page content does. */
font-family: var(--el-font);
font-size: 13px;
color: var(--el-text);
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--el-surface);
border: 1px solid var(--el-border);
border-radius: 8px;
box-shadow: var(--el-shadow);
padding: 6px;
display: none;
z-index: 30;
}
.dropdown.open .dropdown-panel { display: block; }
.dropdown-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--el-text-muted);
padding: 8px 10px 6px;
}
.dropdown-empty {
padding: 16px 10px;
font-size: 12.5px;
color: var(--el-text-muted);
text-align: center;
}
.dropdown-sep { height: 1px; background: var(--el-border); margin: 5px 4px; }
.dropdown-panel-right a {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 6px;
color: var(--el-text);
font-size: 12.5px;
text-decoration: none;
white-space: nowrap;
}
.dropdown-panel-right a:hover { background: var(--el-blue-tint); color: var(--el-blue); text-decoration: none; }
.dropdown-panel-right a .tb-icon { color: var(--el-text-muted); }
.dropdown-panel-right a:hover .tb-icon { color: var(--el-blue); }
/* Logout is always the last link in this panel (see sub topbar) — red
hover instead of the shared blue, no extra class needed for it. */
.dropdown-panel-right a:last-of-type:hover { background: rgba(239, 68, 68, .08); color: var(--el-danger); }
.dropdown-panel-right a:last-of-type:hover .tb-icon { color: var(--el-danger); }
.profile-trigger {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px 8px 4px 4px;
border-radius: 8px;
transition: background-color .12s ease;
}
.profile-trigger:hover { background: var(--el-blue-tint); }
.avatar {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--el-navy-800);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
font-family: var(--el-font);
}
.profile-name {
font-size: 12.5px;
font-weight: 600;
color: var(--el-navy-800);
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-chev { transition: transform .15s ease; }
.dropdown.open .profile-chev { transform: rotate(180deg); }
.listheading {
font-size: 13px;
background-color: var(--el-navy-800);
color: #FFFFFF;
padding: 6px 8px;
height: 24px;
}
.sectionheading {
font-size: 13px;
background-color: #CCCCCC;
color: var(--el-text-muted);
padding: 2px;
height: 24px;
}
.listtop {
font-family: var(--el-font);
font-size: 20px;
background-color: white;
color: var(--el-navy-800);
text-align: left;
font-weight: 500;
border-bottom: 1px solid var(--el-text-muted);
padding: 10px 5px;
}
A.listheading:link, A.listheading:active, A.listheading:visited {
color: #FFFFFF;
text-decoration: none;
}
.listrow1 td, .listrow0 td {
border-bottom: 1px solid #CCCCCC;
border-left: 4px solid #FFFFFF;
padding: 6px 4px;
}
.listrow0 { background-color: #ffffff; }
.listrow1 { background-color: #f8fafc; }
.listrow0:hover, .listrow1:hover { background-color: #eef4ff; }
.listrow1 td a, .listrow0 td a {
color: var(--el-blue);
}
.listsubtotal {
font-size: 13px;
color: var(--el-navy-800);
font-weight: bold;
}
.listtotal {
font-size: 13px;
color: var(--el-navy-800);
font-weight: bold;
border-top: 1px solid #CCCCCC;
border-bottom: 3px solid #CCCCCC;
}
textarea {
font-family: var(--el-font);
font-size: 13px;
}
input {
font-family: var(--el-font);
font-size: 13px;
}
table input, table textarea {
border-radius: 5px;
}
/* ---------------------------------------------------------------------
ACTIVE FIELD — subtle enterprise shadow on focus
--------------------------------------------------------------------- */
table input:hover, table input:focus, table textarea:hover, table textarea:focus {
background: #F8FAFC;
border: 1px solid var(--el-blue);
color: #000000;
box-shadow: 0 0 0 3px var(--el-blue-tint-strong);
outline: none;
transition: box-shadow .15s ease, border-color .15s ease;
}
input, textarea {
border: 1px solid #888888;
padding: 4px 6px;
}
select {
font-family: var(--el-font);
font-size: 13px;
border-radius: 5px;
padding: 3px;
}
select:focus {
border-color: var(--el-blue);
box-shadow: 0 0 0 3px var(--el-blue-tint-strong);
outline: none;
}
.submit, .login input submit {
font-family: var(--el-font);
font-size: 13px;
font-weight: 600;
color: white;
background: var(--el-navy-800);
border: medium none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
padding: 7px 16px;
letter-spacing: .2px;
box-shadow: var(--el-shadow-sm);
transition: background-color .15s ease, transform .05s ease;
}
.submit:HOVER {
background: var(--el-navy-700);
}
.submit:active {
transform: translateY(1px);
}
/* the login form's submit button sits on the blue page background
inside a white card — keep it on-brand with the accent blue rather
than navy, so it reads as the one clear call to action on the card. */
body.login .submit {
background: var(--el-blue);
}
body.login .submit:hover {
background: var(--el-blue-hover);
}
.checkbox, .radio {
font-family: var(--el-font);
font-size: 13px;
accent-color: var(--el-blue);
}
.plus0 { /* font color for negative numbers — semantic danger */
background-color: var(--el-danger);
color: white;
padding: 2px 10px;
border-radius: 3px;
}
.plus1 { /* font color for positive numbers — semantic success */
background-color: var(--el-success);
color: white;
padding: 2px 10px;
border-radius: 3px;
}
h2.confirm {
color: var(--el-text);
font-size: 13px;
}
h2.error {
background-color: var(--el-danger);
color: white;
padding: 2px 10px;
border-radius: 3px;
}
/* media stuff */
@media screen {
.noscreen { /* items with this class won't display */
display: none;
}
}
@media print {
.noprint { /* items with this class won't print */
display: none;
}
}
.service_portal_warning {
font-size: 16px;
font-weight: bold;
}
.service_portal_warning a {
color: black;
text-decoration: underline;
}
.dberror {
display: none;
}
.redirectmsg { color: black; background: #fff6a8; padding: 4px 8px; border-radius: 3px; }