h3, h4 { margin: 0; } div.SSideBarItem, td.SSideBarItem { color: #666666; font-size: 10px; text-align: left; padding: 7px; line-height: normal; width: 150px; } .divbox { border: 1px solid #CCC; margin: 5px; } .sysinfo { font-size: x-small; } body { margin: 0; background-color: #FFFFFF; font-family: helvetica, verdana, arial, sans-serif; font-size: 85%; } input { font-size: x-small; font-family: verdana, arial, helvetica, sans-serif; } input:focus { background-color: #ffffdd; } th, td { font-size: 12px; } th { text-align: left; } thead td { background-color: #C8C028; font-weight: bold; border-bottom: 1px solid #999; } tbody tr.evenInternal td { background: #eee; } /* align top for all datatables */ table.dataTable tbody td { vertical-align: top; } /* Fix DataTables header/body column alignment. DataTables syncs scrollX header widths by setting th.style.width = td.offsetWidth (the td OUTER width). With the default box-sizing: content-box, style.width sets the content width, making each sortable th about 22 px wider than its body column (the sort-indicator adds padding-right: 26 px). The misalignment accumulates across columns, hence it is most visible in wide tables. border-box makes style.width mean the full outer width, so the sync is exact. */ table.dataTable thead th, table.dataTable thead td { box-sizing: border-box; } pre { font-size: medium; } .topmenu { border-bottom: 1px solid #CCC; padding-bottom: 3px; } .topmenuSel { border-bottom: 5px solid black; } /* a:link, a:visited and a:active all share the same colour; consolidated into a. */ a { text-decoration: none; border-bottom: none; color: #6C99A6; } a:hover { color: #536C73; text-decoration: underline; } .tabletitle { font-weight: bold; margin-left: 10px; margin-bottom: 2px; } .deactivated { color: #BBB !important; } .selected td { background-color: #8CF !important; } a.dt-button.smallbutton { padding-top: 2px; padding-bottom: 2px; border-color: #FFF; } a.dt-button.dividerleft { margin-left: 20px; } a.dt-button.dividerright { margin-right: 20px; } /* Both spellings are used in templates/JS (imagelink vs imageLink). */ .imagelink, .imageLink { cursor: pointer; } .scriptbox { background: white; border: 1px inset black; border-radius: 5px; position: absolute; width: 175px; padding: 6px; box-shadow: 6px 6px 3px silver; z-index: 99; } .ui-widget { font-size: 12px; } /* ============================================================ SIDEBAR LAYOUT Activated by body.sidenav-layout (set in base.html). To revert to the top-menu layout, remove "sidenav-layout" from the class attribute in base.html — no other changes needed. ============================================================ */ :root { --snav-w: 185px; /* sidebar width (expanded) */ --snav-w-col: 32px; /* sidebar width (collapsed) */ --topbar-h: 28px; /* breadcrumb bar height */ --snav-bg: #f4f6f7; --snav-accent: #6C99A6; /* matches the site link colour */ } /* Hide the legacy top-menu when sidebar layout is active */ body.sidenav-layout .topmenu { display: none !important; } /* ---- Breadcrumb top bar --------------------------------- */ #topbar { display: none; } /* invisible unless sidenav-layout */ body.sidenav-layout #topbar { display: flex; align-items: center; position: fixed; top: 0; left: var(--snav-w); right: 0; height: var(--topbar-h); background: #fff; border-bottom: 1px solid #ccc; padding: 0 8px; gap: 6px; z-index: 98; transition: left 0.15s ease; } body.sidenav-layout.sidenav-collapsed #topbar { left: var(--snav-w-col); } #topbar .breadcrumbs { flex: 1; font-size: 11px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #topbar .breadcrumbs a { color: var(--snav-accent); } #topbar .breadcrumbs .sep { margin: 0 4px; color: #bbb; } #topbar .breadcrumbs .current { font-weight: bold; color: #333; } #topbar .topbar-search input[type="text"] { font-size: 11px; padding: 1px 5px; border: 1px solid #ccc; width: 150px; } /* ---- Sidebar -------------------------------------------- */ #sidenav { display: none; } /* invisible unless sidenav-layout */ body.sidenav-layout #sidenav { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: var(--snav-w); background: var(--snav-bg); border-right: 1px solid #ccc; overflow-y: auto; overflow-x: hidden; z-index: 99; transition: width 0.15s ease; } body.sidenav-layout.sidenav-collapsed #sidenav { width: var(--snav-w-col); } /* Toggle button — always visible even when collapsed */ #sidenav-toggle { display: block; width: 100%; text-align: left; padding: 6px 8px; background: none; border: none; border-bottom: 1px solid #ddd; cursor: pointer; font-size: 15px; color: #555; flex-shrink: 0; line-height: 1; } #sidenav-toggle:hover { background: #e4e8ea; } /* Sidebar content — hidden when collapsed */ #sidenav-content { flex: 1; overflow-x: hidden; } body.sidenav-layout.sidenav-collapsed #sidenav-content { display: none; } /* ---- Section headers (

) ------------ */ #sidenav details.nav-section { border-bottom: 1px solid #ddd; } #sidenav details.nav-section > summary.nav-summary { list-style: none; padding: 7px 10px 7px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #555; cursor: pointer; display: flex; align-items: center; gap: 5px; user-select: none; } /* Remove default marker across browsers */ #sidenav details.nav-section > summary.nav-summary::-webkit-details-marker { display: none; } #sidenav details.nav-section > summary.nav-summary::marker { display: none; } /* Custom animated arrow */ #sidenav details.nav-section > summary.nav-summary::before { content: '▸'; font-size: 9px; display: inline-block; color: #999; transition: transform 0.15s; } #sidenav details.nav-section[open] > summary.nav-summary::before { transform: rotate(90deg); } #sidenav details.nav-section > summary.nav-summary:hover { background: #e4e8ea; } /* Active section header */ #sidenav details.nav-section > summary.nav-active { color: var(--snav-accent); } /* ---- Top-level link (no children, e.g. Index / API Docs) -- */ #sidenav a.nav-toplevel { display: block; padding: 7px 10px 7px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #555; border-bottom: 1px solid #ddd; text-decoration: none; } #sidenav a.nav-toplevel:hover { background: #e4e8ea; } #sidenav a.nav-toplevel.nav-active { color: var(--snav-accent); font-weight: 700; border-left: 3px solid var(--snav-accent); padding-left: 5px; } /* ---- Child links ---------------------------------------- */ .nav-children { background: #fff; padding: 2px 0 4px; } .nav-children a.nav-child { display: block; padding: 4px 8px 4px 22px; font-size: 12px; color: #444; text-decoration: none; } .nav-children a.nav-child:hover { background: #edf0f2; } .nav-children a.nav-child.nav-active { font-weight: bold; color: var(--snav-accent); border-left: 3px solid var(--snav-accent); padding-left: 19px; } /* ---- Sidebar footer (system links + user info) ---------- */ .nav-footer { padding: 8px 10px; font-size: 11px; color: #888; border-top: 1px solid #ddd; margin-top: auto; } .nav-footer a { display: block; font-size: 11px; color: var(--snav-accent); padding: 2px 0; text-decoration: none; } .nav-footer a:hover { text-decoration: underline; } .nav-footer hr { border: none; border-top: 1px solid #ddd; margin: 5px 0; } /* ---- Main content area ---------------------------------- */ body.sidenav-layout #main-area { margin-left: var(--snav-w); margin-top: var(--topbar-h); transition: margin-left 0.15s ease; /* Explicit width keeps the area at exactly (viewport - sidebar). Without this, width:auto lets the element auto-expand when wide table content forces the body wider, defeating DataTables' scrollX container. */ width: calc(100vw - var(--snav-w)); overflow-x: hidden; } body.sidenav-layout.sidenav-collapsed #main-area { margin-left: var(--snav-w-col); width: calc(100vw - var(--snav-w-col)); } /* ============================================================ RESULT PANE HISTORY (resultpane-history.js) ============================================================ */ /* ---- Sidebar button (always at the bottom of #sidenav) ---- */ #rp-history-btn { display: none; } /* hidden unless sidenav-layout */ body.sidenav-layout #rp-history-btn { display: flex; align-items: center; gap: 6px; margin-top: auto; /* pushes button to bottom of flex column */ flex-shrink: 0; width: 100%; padding: 7px 8px; background: none; border: none; border-top: 1px solid #ddd; cursor: pointer; font-size: 12px; color: #666; text-align: left; box-sizing: border-box; } body.sidenav-layout #rp-history-btn:hover { background: #e4e8ea; color: #333; } /* Hide text label when sidebar is collapsed — icon only */ body.sidenav-layout.sidenav-collapsed #rp-history-btn .rp-hist-label { display: none; } /* Badge — item count pill on the button */ #rp-history-badge { display: none; background: var(--snav-accent); color: white; border-radius: 8px; font-size: 9px; font-weight: bold; padding: 1px 5px; min-width: 14px; text-align: center; line-height: 14px; margin-left: auto; } /* ---- Overlay ---------------------------------------------- */ #rp-history-overlay { display: none; position: fixed; inset: 0; z-index: 10000; } #rp-history-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); cursor: pointer; } #rp-history-modal { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); width: min(92vw, 920px); max-height: calc(100vh - 96px); background: white; border-radius: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; } #rp-history-header { display: flex; align-items: center; padding: 7px 12px; background: var(--snav-bg); border-bottom: 1px solid #ddd; gap: 10px; flex-shrink: 0; } #rp-history-counter { flex: 1; font-size: 11px; color: #555; } #rp-history-close-btn { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: #999; padding: 0 4px; } #rp-history-close-btn:hover { color: #333; } #rp-history-body { flex: 1; overflow-y: auto; padding: 8px 12px; } #rp-history-footer { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--snav-bg); border-top: 1px solid #ddd; flex-shrink: 0; } #rp-history-footer button { padding: 3px 14px; cursor: pointer; font-size: 12px; border: 1px solid #ccc; background: white; border-radius: 3px; } #rp-history-footer button:hover:not(:disabled) { background: #e4e8ea; } #rp-history-footer button:disabled { opacity: 0.35; cursor: default; } #rp-history-hint { font-size: 10px; color: #aaa; margin-left: auto; } /* EOF */