/** * Image Online — MantisBT theme * * Brand tokens are taken verbatim from the Access Manager stylesheet * (php85/www/access/secure/css/style.css) so the two apps read as one system. * * Loaded LAST in by the IOLTheme plugin (EVENT_LAYOUT_RESOURCES), after * ace.min.css / ace-mantis.css / ace-skins.min.css. * * On !important: Ace and ace-mantis mark a lot of their own paint !important * (.btn backgrounds, .skin-3 .nav-list>li.active>a, .light-login, * .skin-3 .main-container:before, table). Those declarations can only be * answered in kind, so !important below is deliberate and confined to exactly * those properties. Everywhere Ace plays fair, so does this file. */ :root { --iol-navy: #1a3a5c; --iol-navy-dark: #12293f; --iol-navy-light: #24507d; --iol-gold: #ffcb05; --iol-gold-mid: #f0bc00; --iol-gold-deep: #d4a500; --iol-gold-soft: #fff8d6; --iol-ink: #1e2d3d; --iol-ink-dark: #1a2030; --iol-muted: #64748b; --iol-line: #e2e8f0; --iol-bg: #f4f6f9; --iol-card: #ffffff; --iol-radius: 10px; --iol-radius-sm: 6px; --iol-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --iol-shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.05); --iol-shadow-lg: 0 12px 24px -6px rgba(16,24,40,.12), 0 4px 8px -4px rgba(16,24,40,.06); } /* ══════════════════════════════════════════════════════════ 1. Page ground ace-mantis.css forces `.skin-3 .main-container:before` white !important; that pseudo-element is what paints the full-height page ground. ══════════════════════════════════════════════════════════ */ body, body.skin-3 { background-color: var(--iol-bg); color: var(--iol-ink); -webkit-font-smoothing: antialiased; } body.skin-3 .main-container:before { background: var(--iol-bg) !important; } ::selection { background: var(--iol-gold-soft); color: var(--iol-ink-dark); } a { color: var(--iol-navy); } a:hover, a:focus { color: var(--iol-gold-deep); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--iol-gold-deep); outline-offset: 2px; } * { scrollbar-width: thin; scrollbar-color: #c3ccd6 transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #c3ccd6; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: #9aa7b5; } /* ══════════════════════════════════════════════════════════ 2. Navbar — gold bar with the logo in a white card Mirrors .app-navbar in the Access Manager. ══════════════════════════════════════════════════════════ */ body.skin-3 #navbar, body.skin-3 .navbar, #navbar.navbar-default { background: repeating-linear-gradient( -45deg, rgba(26,32,48,.045) 0px, rgba(26,32,48,.045) 1px, transparent 1px, transparent 16px ), linear-gradient(150deg, var(--iol-gold) 0%, var(--iol-gold-mid) 50%, var(--iol-gold-deep) 100%); border-bottom: none; box-shadow: 0 2px 14px rgba(26,32,48,.18); min-height: 60px; } body.skin-3 #navbar .navbar-container { background: transparent; } /* The brand slot renders window_title as text; replace it with the logo. The full lockup (560x328, mark over wordmark) is used here rather than the mark alone, filling the height the 60px bar allows. Because the lockup is stacked, the wordmark still lands small - a side-by-side variant of the logo is what would make it read at chrome sizes. The white ground is a full-height band, not a rounded card floating on the gold: at desktop widths the band is the sidebar's 190px, so the logo panel and the menu below it line up as one column. */ #navbar .navbar-brand { background-color: #fff; border-radius: 0; box-shadow: none; margin: 0; padding: 0; height: 60px; width: 124px; display: inline-block; background-image: url('../images/iol-logo.png'); background-repeat: no-repeat; background-position: center center; background-size: auto 44px; text-indent: -9999px; overflow: hidden; white-space: nowrap; } #navbar .navbar-brand:hover, #navbar .navbar-brand:focus { box-shadow: none; transform: none; background-color: #fff; } #navbar .navbar-brand > span { display: none; } /* Navbar controls sit on gold — dark ink, not Ace's white. */ #navbar .ace-nav > li > a, #navbar .ace-nav > li > a .ace-icon, #navbar .ace-nav > li > a .user-info, #navbar .ace-nav > li > a .user-info small, #navbar .ace-nav > li > a small { color: var(--iol-ink-dark) !important; background-color: transparent !important; text-shadow: none; } #navbar .ace-nav > li { border-left: 1px solid rgba(26,32,48,.14); } #navbar .ace-nav > li:first-child { border-left: none; } #navbar .ace-nav > li > a:hover, #navbar .ace-nav > li > a:focus, #navbar .ace-nav > li.open > a { background-color: rgba(26,32,48,.12) !important; color: var(--iol-ink-dark) !important; } #navbar .ace-nav > li > a .badge { background-color: var(--iol-navy) !important; color: #fff !important; } /* Dropdown panels hanging off the navbar stay light. */ #navbar .ace-nav .dropdown-menu > li > a, #navbar .ace-nav .dropdown-menu > li > a > .ace-icon { color: var(--iol-ink) !important; } #navbar .ace-nav .dropdown-menu > li > a:hover { background-color: var(--iol-gold-soft) !important; color: var(--iol-ink-dark) !important; } body.skin-3 #navbar .navbar-toggle, #navbar .navbar-toggle { background-color: rgba(26,32,48,.16) !important; border-color: rgba(26,32,48,.25); } #navbar .menu-toggler .icon-bar, #navbar .navbar-toggle .icon-bar { background-color: var(--iol-ink-dark); } /* -- 2b. Navbar alignment ---------------------------------- Ace sizes the navbar for a 45px bar (.ace-nav > li is line-height/height 45px) while section 2 above raises it to 60px, so the right-hand controls were top-aligned inside the bar and each control carried a different amount of side padding (Ace gives anchors `0 8px` + `min-width: 50px`, while the shortcut button bar carries its own `padding-*-8` utilities). The controls stay on Ace's own baseline layout - a 60px line box with everything vertically centred in it - rather than being switched to flex. Ace hand-tunes several offsets against that model (.user-info sits at `top: 6px`, .nav-avatar-40 at `margin-top: -4px`, .badge at `top: -4px`) and re-parents the user menu at narrow widths via .user-min, all of which stop behaving once the anchor becomes a flex container. Only the two offsets that assumed a 45px bar are reset here. */ @media (min-width: 768px) { #navbar > .navbar-container { display: flex; align-items: center; min-height: 60px; } /* Flex items ignore float, so ace-mantis' `float: *!important` on these two is inert here - margin-left:auto does the work. */ #navbar > .navbar-container > .navbar-header { margin: 0; min-height: 0; } #navbar > .navbar-container > .navbar-buttons { margin-left: auto; padding: 0; min-height: 0; } /* Brand: the white panel is the flex item now, stretched to the full bar height and set to the sidebar's width so the two edges align. The container's own left padding is dropped so the band reaches the edge of the screen instead of leaving a gold sliver. */ #navbar > .navbar-container { padding-left: 0; } #navbar > .navbar-container > .navbar-header:not(.navbar-buttons) { background-color: #fff; width: 190px; min-width: 190px; align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; box-shadow: 2px 0 12px rgba(26,32,48,.13); z-index: 1; } #navbar .navbar-brand { flex: none; width: 100%; height: 100%; background-size: auto 46px; } /* Controls fill the full bar height, so the dividers between them run edge to edge. */ #navbar .ace-nav { display: flex; align-items: stretch; height: 60px; } #navbar .ace-nav > li { height: 60px; line-height: 60px; float: none; } /* One gutter for every control, dropdowns included. The 60px line box plus vertical-align:middle on the contents is what centres them. */ #navbar .ace-nav > li > a { height: 100%; line-height: 60px; min-width: 0; padding: 0 14px; white-space: nowrap; } #navbar .ace-nav > li > a > .ace-icon, #navbar .ace-nav > li > a > img, #navbar .ace-nav > li > a > .user-info { vertical-align: middle; } #navbar .ace-nav > li > a > .ace-icon { width: auto; } #navbar .ace-nav > li > a > .fa-angle-down { margin-left: 7px; } /* `white-space: nowrap` above means a long current-project name would otherwise widen the bar until it collides with the brand. */ #navbar .ace-nav > li#dropdown_projects_menu > a { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } /* Username: drop Ace's `top: 6px` / `vertical-align: top`, which centred it against the old 45px bar and left it sitting below the avatar in the 60px one. Kept off .user-min, where Ace re-positions this same element absolutely. */ #navbar .ace-nav > li:not(.user-min) > a > .user-info { position: static; top: auto; line-height: 1.25; max-width: 150px; } /* Avatar: `margin-top: -4px` (ace-mantis) lifted it off the centre line. Note this theme's avatar is .nav-avatar-40. */ #navbar .ace-nav .nav-avatar-40, #navbar .ace-nav .nav-user-photo { margin: 0 9px 0 0; max-width: 36px; max-height: 36px; border-width: 2px; } #navbar .ace-nav .nav-avatar-container-40 { float: none; width: auto; height: auto; display: inline-block; vertical-align: middle; } /* Shortcut button bar (Report Issue / Invite Users): the same 14px gutter as the dropdowns, vertically centred, with an even gap between the two buttons instead of Ace's asymmetric padding utilities. */ #navbar .ace-nav > li > .btn-group { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; padding: 0 14px !important; margin: 0; } #navbar .ace-nav > li > .btn-group > .btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; line-height: 1; border-radius: var(--iol-radius-sm) !important; float: none; } /* gap replaces btn-group's negative margin collapsing */ #navbar .ace-nav > li > .btn-group > .btn + .btn { margin-left: 0; } } /* Ace offsets the page by 45px for the fixed navbar; section 2 makes the bar 60px, so without this the top of every page sits under the gold bar. */ @media (min-width: 480px) { .navbar-fixed-top + .main-container { padding-top: 60px; } } /* ══════════════════════════════════════════════════════════ 3. Sidebar — navy with a gold active marker ══════════════════════════════════════════════════════════ */ body.skin-3 .sidebar, body.skin-3 #sidebar { background-color: var(--iol-navy); border-color: var(--iol-navy-dark); box-shadow: 2px 0 10px rgba(16,24,40,.10); } body.skin-3 .nav-list > li, body.skin-3 .nav-list > li + li { border-color: rgba(255,255,255,.07) !important; } body.skin-3 .nav-list > li > a { background-color: transparent; color: rgba(255,255,255,.80); font-weight: 500; transition: background-color .15s ease, color .15s ease; } body.skin-3 .nav-list > li > a > .menu-icon { color: rgba(255,255,255,.55); } body.skin-3 .nav-list > li:hover > a, body.skin-3 .nav-list > li > a:focus { background-color: rgba(255,255,255,.07); color: #fff; } body.skin-3 .nav-list > li:hover > a > .menu-icon { color: var(--iol-gold); } body.skin-3 .nav-list > li.active > a, body.skin-3 .nav-list > li.active.highlight > a, body.skin-3 .nav-list > li.active:hover > a { background-color: var(--iol-navy-dark) !important; color: #fff !important; font-weight: 600; } body.skin-3 .nav-list > li.active > a > .menu-icon { color: var(--iol-gold) !important; } /* Ace paints the active/hover marker via li:before — recolour it gold. */ body.skin-3 .nav-list > li.active:before { background-color: var(--iol-gold) !important; } body.skin-3 .nav-list > li:hover:before, body.skin-3 .nav-list > li.open:before { background-color: var(--iol-gold-deep) !important; } /* Ace's active item points a notch into the content in its own blue. */ body.skin-3 .nav-list > li.active > .arrow:before { border-right-color: var(--iol-navy-dark); } body.skin-3 .nav-list > li.active > .arrow:after { border-right-color: var(--iol-gold); } /* Keep the navy running to the bottom of the viewport on short pages, where the sidebar would otherwise stop at its content height. */ body.skin-3 .sidebar { min-height: calc(100vh - 60px); } body.skin-3 .sidebar-toggle, body.skin-3 .sidebar-shortcuts { background-color: var(--iol-navy-dark); border-color: rgba(255,255,255,.08); } body.skin-3 .sidebar-toggle > .ace-icon { color: var(--iol-gold); border-color: rgba(255,255,255,.2); background-color: transparent; } /* ══════════════════════════════════════════════════════════ 4. Widgets / cards ══════════════════════════════════════════════════════════ */ .widget-box { background: var(--iol-card); border: 1px solid var(--iol-line); border-radius: var(--iol-radius); box-shadow: var(--iol-shadow-sm); overflow: hidden; margin-bottom: 20px; } .widget-box > .widget-header { background: #f8fafc; border-bottom: 1px solid var(--iol-line); color: var(--iol-ink); min-height: 44px; padding-left: 16px; } .widget-header > .widget-title, .widget-header h4 { color: var(--iol-ink); font-weight: 700; font-size: 14px; letter-spacing: -.01em; } /* Ace pairs every header height with a matching line-height on its title and toolbar (38/36, 31/30, 49/48). The 44px min-height above left those line boxes untouched, so titles sat high in the bar with the slack collecting underneath - restate the line box at the header's own height. */ .widget-box > .widget-header > .widget-title, .widget-box > .widget-header > h4, .widget-box > .widget-header > .widget-toolbar { line-height: 44px; } /* Anything the toolbar carries as its own box - a collapse chevron, a small button, the per-page input - centres on that line instead of hanging from its baseline. */ .widget-box > .widget-header > .widget-toolbar > a, .widget-box > .widget-header > .widget-toolbar > .btn, .widget-box > .widget-header > .widget-toolbar > label, .widget-box > .widget-header > .widget-toolbar > input, .widget-box > .widget-header > .widget-toolbar > .widget-menu, .widget-box > .widget-header > .widget-toolbar > .widget-menu > .btn { vertical-align: middle; } .widget-header > .widget-title > .ace-icon, .widget-header h4 > .ace-icon { color: var(--iol-gold-deep); } /* Ace tints widget headers by colour class — restate them in brand hues. */ .widget-box.widget-color-blue > .widget-header, .widget-box.widget-color-blue2 > .widget-header, .widget-box.widget-color-blue3 > .widget-header { background: var(--iol-navy); border-color: var(--iol-navy); } .widget-color-blue > .widget-header > .widget-title, .widget-color-blue2 > .widget-header > .widget-title, .widget-color-blue3 > .widget-header > .widget-title, .widget-color-blue > .widget-header h4, .widget-color-blue2 > .widget-header h4, .widget-color-blue3 > .widget-header h4 { color: #fff; } .widget-color-blue > .widget-header .ace-icon, .widget-color-blue2 > .widget-header .ace-icon, .widget-color-blue3 > .widget-header .ace-icon { color: var(--iol-gold); } /* ══════════════════════════════════════════════════════════ 5. Buttons Ace marks every .btn background-color and .btn colour !important. ══════════════════════════════════════════════════════════ */ .btn { border-radius: var(--iol-radius-sm); font-weight: 600; letter-spacing: .01em; transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; } .btn:active { transform: translateY(1px); } /* Navy — the standard action */ .btn.btn-primary, .btn.btn-primary.focus, .btn.btn-primary:focus, .btn.btn-info, .btn.btn-info.focus, .btn.btn-info:focus { background-color: var(--iol-navy) !important; border-color: var(--iol-navy); color: #fff !important; } .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-info:hover, .btn.btn-info:active { background-color: var(--iol-navy-light) !important; border-color: var(--iol-navy-light); color: #fff !important; } /* Gold — the primary call to action (submit / login / report) */ .btn.btn-success, .btn.btn-success.focus, .btn.btn-success:focus, .btn.btn-inverse, .btn.btn-inverse.focus, .btn.btn-inverse:focus { background-color: var(--iol-gold) !important; border-color: var(--iol-gold-deep); color: var(--iol-ink-dark) !important; text-shadow: none; } .btn.btn-success:hover, .btn.btn-success:active, .btn.btn-inverse:hover, .btn.btn-inverse:active { background-color: var(--iol-gold-mid) !important; border-color: var(--iol-gold-deep); color: var(--iol-ink-dark) !important; } /* Neutral / destructive keep their semantics, restated in brand neutrals */ .btn.btn-default, .btn.btn-default.focus, .btn.btn-default:focus { background-color: #e2e8f0 !important; border-color: #cbd5e1; color: var(--iol-ink) !important; } .btn.btn-default:hover, .btn.btn-default:active { background-color: #cbd5e1 !important; color: var(--iol-ink) !important; } .btn.btn-danger, .btn.btn-danger.focus, .btn.btn-danger:focus { background-color: #b3261e !important; border-color: #b3261e; } .btn.btn-danger:hover, .btn.btn-danger:active { background-color: #991b1b !important; } .btn.btn-warning, .btn.btn-warning.focus, .btn.btn-warning:focus { background-color: var(--iol-gold-deep) !important; border-color: var(--iol-gold-deep); color: var(--iol-ink-dark) !important; } /* Workflow accents — the two colours the issue view page uses to separate "move this forward" from "put this on hold". btn-success is spoken for by the gold call-to-action above, so these are their own classes rather than Bootstrap's semantics. */ .btn.btn-iol-go, .btn.btn-iol-go.focus, .btn.btn-iol-go:focus { background-color: #157347 !important; border-color: #11603b; color: #fff !important; text-shadow: none; } .btn.btn-iol-go:hover, .btn.btn-iol-go:active { background-color: #11603b !important; border-color: #0d4d2f; color: #fff !important; } .btn.btn-iol-hold, .btn.btn-iol-hold.focus, .btn.btn-iol-hold:focus { background-color: #c2410c !important; border-color: #a3350a; color: #fff !important; text-shadow: none; } .btn.btn-iol-hold:hover, .btn.btn-iol-hold:active { background-color: #a3350a !important; border-color: #872c08; color: #fff !important; } .btn.btn-iol-go > .ace-icon, .btn.btn-iol-go > .fa, .btn.btn-iol-hold > .ace-icon, .btn.btn-iol-hold > .fa { color: #fff !important; } /* ══════════════════════════════════════════════════════════ 6. Tables ══════════════════════════════════════════════════════════ */ .table > thead > tr > th, table.table-bordered > thead > tr > th { background-color: var(--iol-navy-dark) !important; color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; border-color: var(--iol-navy-dark); vertical-align: middle; } .table > thead > tr > th a, .table > thead > tr > th a:hover, .table > thead > tr > th .ace-icon { color: #fff; } .table > tbody > tr > td { border-color: var(--iol-line); vertical-align: middle; } .table-striped > tbody > tr:nth-child(odd) > td { background-color: #f8fafc; } .table-hover > tbody > tr:hover > td { background-color: var(--iol-gold-soft) !important; } /* Mantis' own category cells (default.css sets these !important) */ td.category, th.category, td.category label, th.category label { background-color: #f1f5f9 !important; color: var(--iol-ink); font-weight: 600; } /* ══════════════════════════════════════════════════════════ 7. Forms ══════════════════════════════════════════════════════════ */ .form-control { border-radius: var(--iol-radius-sm); border-color: #cbd5e1; color: var(--iol-ink); transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus { border-color: var(--iol-navy); box-shadow: 0 0 0 3px rgba(26,58,92,.14); } .input-icon > .ace-icon { color: var(--iol-muted); } /* ══════════════════════════════════════════════════════════ 8. Breadcrumbs, tabs, pagination, badges ══════════════════════════════════════════════════════════ */ .breadcrumbs, body.skin-3 .breadcrumbs { background-color: var(--iol-card); border-bottom: 1px solid var(--iol-line); box-shadow: var(--iol-shadow-sm); } .breadcrumb > li > a { color: var(--iol-navy); font-weight: 500; } .breadcrumb > li > a:hover { color: var(--iol-gold-deep); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: 2px solid var(--iol-gold); color: var(--iol-navy); font-weight: 600; } .nav-tabs > li > a:hover { border-top-color: var(--iol-gold-deep); } .pagination > li > a { color: var(--iol-navy); } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background-color: var(--iol-navy); border-color: var(--iol-navy); color: #fff; } .label-primary, .badge-primary, .label-info, .badge-info { background-color: var(--iol-navy) !important; } .label-warning, .badge-warning { background-color: var(--iol-gold-deep) !important; color: var(--iol-ink-dark); } /* ══════════════════════════════════════════════════════════ 9. Alerts — Access Manager semantic trios ══════════════════════════════════════════════════════════ */ .alert { border-radius: var(--iol-radius); border-width: 1px; box-shadow: var(--iol-shadow-sm); } .alert-success { background-color: #d1fae5; border-color: #6ee7b7; color: #065f46; } .alert-danger, .alert-error { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; } .alert-warning { background-color: #fef3c7; border-color: #fde68a; color: #b45309; } .alert-info { background-color: #e8eef5; border-color: #b9cade; color: var(--iol-navy); } /* ══════════════════════════════════════════════════════════ 10. Login page ace-mantis.css forces `.light-login` white !important. ══════════════════════════════════════════════════════════ */ body.login-layout, body.login-layout.light-login { background-color: #edf0f4 !important; background-image: radial-gradient(circle, rgba(26,58,92,.07) 1px, transparent 1px) !important; background-size: 22px 22px !important; background-repeat: repeat !important; } .login-container .widget-box { border: 1px solid var(--iol-line); border-radius: var(--iol-radius); box-shadow: var(--iol-shadow-lg); padding: 0; } .login-container .widget-box .widget-main { background: #fff; padding: 26px 24px; } .login-container .header { color: var(--iol-ink); border-bottom-color: var(--iol-gold); font-weight: 700; } /* Ace makes the signup strip dark; bring it into the card. */ .login-container .toolbar, .login-container .widget-box .toolbar { background-color: #f8fafc !important; border-top: 1px solid var(--iol-line); } .login-container .toolbar a, .login-container .widget-box .toolbar a { color: var(--iol-navy) !important; font-weight: 600; } .login-container .toolbar a:hover { color: var(--iol-gold-deep) !important; } #logo-link img, .login-logo img { max-width: 240px; height: auto; } /* ══════════════════════════════════════════════════════════ 11. Footer ══════════════════════════════════════════════════════════ */ .footer .footer-inner .footer-content { color: var(--iol-muted); } .footer .footer-inner .footer-content a { color: var(--iol-navy); } /* ══════════════════════════════════════════════════════════ 12. Print — drop the chrome ══════════════════════════════════════════════════════════ */ @media print { body, body.skin-3 { background: #fff; } #navbar, #sidebar, .breadcrumbs, .footer { display: none !important; } .widget-box { box-shadow: none; border-color: #ccc; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════ 13. Dashboard (my_view_page.php) The boxes are the first thing every user sees after login, so they get a denser, better-aligned table than the stock Ace one: real column headers, fixed column widths so the summary column keeps the space, and dotted rules so a long list reads as a grid without the heavy table-bordered chrome. ══════════════════════════════════════════════════════════ */ /* --- Shared: box chrome -------------------------------------------------- */ .iol-timers-box, .widget-box[id="assigned"], .widget-box[id="unassigned"], .widget-box[id="reported"], .widget-box[id="resolved"], .widget-box[id="recent_mod"], .widget-box[id="monitored"], .widget-box[id="feedback"], .widget-box[id="verify"], .widget-box[id="my_comments"] { box-shadow: var(--iol-shadow-md); transition: box-shadow .18s ease; } .iol-timers-box:hover, .widget-box[id="assigned"]:hover, .widget-box[id="unassigned"]:hover, .widget-box[id="reported"]:hover, .widget-box[id="resolved"]:hover, .widget-box[id="recent_mod"]:hover, .widget-box[id="monitored"]:hover, .widget-box[id="feedback"]:hover, .widget-box[id="verify"]:hover, .widget-box[id="my_comments"]:hover { box-shadow: var(--iol-shadow-lg); } /* A gold hairline under the navy header ties the card to the brand bar. */ .iol-timers-box > .widget-header, .widget-box[id="assigned"] > .widget-header, .widget-box[id="unassigned"] > .widget-header, .widget-box[id="reported"] > .widget-header, .widget-box[id="resolved"] > .widget-header, .widget-box[id="recent_mod"] > .widget-header, .widget-box[id="monitored"] > .widget-header, .widget-box[id="feedback"] > .widget-header, .widget-box[id="verify"] > .widget-header, .widget-box[id="my_comments"] > .widget-header { border-bottom: 2px solid var(--iol-gold); min-height: 46px; } .iol-timers-box > .widget-header .widget-title, .widget-box[id="assigned"] > .widget-header .widget-title, .widget-box[id="unassigned"] > .widget-header .widget-title, .widget-box[id="reported"] > .widget-header .widget-title, .widget-box[id="resolved"] > .widget-header .widget-title, .widget-box[id="recent_mod"] > .widget-header .widget-title, .widget-box[id="monitored"] > .widget-header .widget-title, .widget-box[id="feedback"] > .widget-header .widget-title, .widget-box[id="verify"] > .widget-header .widget-title, .widget-box[id="my_comments"] > .widget-header .widget-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: .01em; } /* The header is a row, not a stack. Ace floats the toolbars right, but they are declared after the title, and a float can never rise above the bottom of a preceding block box - and the title above is a block-level flex box. So the chevron and the "View Issues" pill dropped onto a second line and the title was left sitting at the top of a header twice its height. Lay the header out as a flex row instead: title first and free to grow, the toolbars after it, everything centred on one line. */ .iol-timers-box > .widget-header, .widget-box[id="assigned"] > .widget-header, .widget-box[id="unassigned"] > .widget-header, .widget-box[id="reported"] > .widget-header, .widget-box[id="resolved"] > .widget-header, .widget-box[id="recent_mod"] > .widget-header, .widget-box[id="monitored"] > .widget-header, .widget-box[id="feedback"] > .widget-header, .widget-box[id="verify"] > .widget-header, .widget-box[id="my_comments"] > .widget-header { display: flex; align-items: center; padding-right: 10px; } .iol-timers-box > .widget-header > .widget-title, .widget-box[id="assigned"] > .widget-header > .widget-title, .widget-box[id="unassigned"] > .widget-header > .widget-title, .widget-box[id="reported"] > .widget-header > .widget-title, .widget-box[id="resolved"] > .widget-header > .widget-title, .widget-box[id="recent_mod"] > .widget-header > .widget-title, .widget-box[id="monitored"] > .widget-header > .widget-title, .widget-box[id="feedback"] > .widget-header > .widget-title, .widget-box[id="verify"] > .widget-header > .widget-title, .widget-box[id="my_comments"] > .widget-header > .widget-title { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .iol-timers-box > .widget-header > .widget-toolbar, .widget-box[id="assigned"] > .widget-header > .widget-toolbar, .widget-box[id="unassigned"] > .widget-header > .widget-toolbar, .widget-box[id="reported"] > .widget-header > .widget-toolbar, .widget-box[id="resolved"] > .widget-header > .widget-toolbar, .widget-box[id="recent_mod"] > .widget-header > .widget-toolbar, .widget-box[id="monitored"] > .widget-header > .widget-toolbar, .widget-box[id="feedback"] > .widget-header > .widget-toolbar, .widget-box[id="verify"] > .widget-header > .widget-toolbar, .widget-box[id="my_comments"] > .widget-header > .widget-toolbar { display: flex; align-items: center; float: none; line-height: 1; flex: 0 0 auto; } /* "View Issues" reads as a pill: white on the navy header, gold on hover. */ .iol-timers-box > .widget-header > .widget-toolbar .btn, .widget-box[id="assigned"] > .widget-header > .widget-toolbar .btn, .widget-box[id="unassigned"] > .widget-header > .widget-toolbar .btn, .widget-box[id="reported"] > .widget-header > .widget-toolbar .btn, .widget-box[id="resolved"] > .widget-header > .widget-toolbar .btn, .widget-box[id="recent_mod"] > .widget-header > .widget-toolbar .btn, .widget-box[id="monitored"] > .widget-header > .widget-toolbar .btn, .widget-box[id="feedback"] > .widget-header > .widget-toolbar .btn, .widget-box[id="verify"] > .widget-header > .widget-toolbar .btn, .widget-box[id="my_comments"] > .widget-header > .widget-toolbar .btn { border-radius: 999px !important; border-bottom-width: 1px; padding: 3px 13px; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 18px; background-color: #fff !important; border-color: rgba(255, 255, 255, .65); color: var(--iol-navy) !important; } .iol-timers-box > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="assigned"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="unassigned"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="reported"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="resolved"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="recent_mod"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="monitored"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="feedback"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="verify"] > .widget-header > .widget-toolbar .btn:hover, .widget-box[id="my_comments"] > .widget-header > .widget-toolbar .btn:hover, .iol-timers-box > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="assigned"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="unassigned"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="reported"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="resolved"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="recent_mod"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="monitored"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="feedback"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="verify"] > .widget-header > .widget-toolbar .btn:focus, .widget-box[id="my_comments"] > .widget-header > .widget-toolbar .btn:focus { background-color: var(--iol-gold) !important; border-color: var(--iol-gold-deep); color: var(--iol-ink-dark) !important; } /* --- Shared: dotted, aligned tables ------------------------------------- */ .iol-box-table, .iol-timers-table { margin-bottom: 0; table-layout: fixed; width: 100%; border-collapse: collapse; } .iol-box-table > thead > tr > th, .iol-timers-table > thead > tr > th { /* Lighter than the global navy table head: these sit inside a card that already has a navy header, so a second navy band would read as noise. */ background-color: #eef2f7 !important; color: var(--iol-navy) !important; border-bottom: 1px solid #cbd5e1 !important; border-top: 0 !important; border-left: 0; border-right: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 9px 10px; white-space: nowrap; } .iol-box-table > tbody > tr > td, .iol-timers-table > tbody > tr > td { border-top: 0; border-bottom: 1px dotted #c3cfdd; border-right: 1px dotted #dde4ec; padding: 9px 10px; font-size: 12.5px; line-height: 1.45; vertical-align: middle; } .iol-box-table > tbody > tr > td:last-child, .iol-timers-table > tbody > tr > td:last-child { border-right: 0; } .iol-box-table > tbody > tr:last-child > td, .iol-timers-table > tbody > tr:last-child > td { border-bottom: 0; } .iol-box-table > tbody > tr:hover > td, .iol-timers-table > tbody > tr:hover > td { background-color: var(--iol-gold-soft) !important; } /* Empty state — an icon and a sentence instead of a blank row. */ .iol-box-empty > td, .iol-timers-empty > td { text-align: center; padding: 26px 16px !important; color: var(--iol-muted); border-right: 0 !important; border-bottom: 0 !important; } .iol-box-empty > td:hover, .iol-timers-empty > td:hover { background: transparent !important; } .iol-box-empty .fa, .iol-timers-empty .fa { display: block; margin: 0 auto 8px; color: #b9c4d2; } /* --- The dashboard boxes' own columns ----------------------------------- */ /* Widths add to 100%: the summary column absorbs whatever is left so long titles stay readable at the two-column dashboard width. */ .iol-box-table .iol-col-id { width: 88px; } .iol-box-table .iol-col-flag { width: 44px; } .iol-box-table .iol-col-summary { width: auto; } .iol-box-table .iol-col-status { width: 118px; } .iol-box-table .iol-col-updated { width: 88px; } /* The priority header is an icon, so it needs no room for a word. */ .iol-box-table .iol-col-flag, .iol-box-table > thead > tr > th.iol-col-flag { padding-left: 6px; padding-right: 6px; text-align: center; } .iol-box-table > thead > tr > th.iol-col-flag .fa { color: var(--iol-navy); } /* Only the ID and the priority glyph are guaranteed short enough to pin to one line. The status label and the timestamp are allowed to wrap - a wrapped "acknowledged" is readable, an ellipsised one is not. */ .iol-box-table .iol-col-id, .iol-box-table .iol-col-flag { white-space: nowrap; } .iol-box-table .iol-col-status { white-space: normal; } .iol-box-table .iol-col-updated { white-space: normal; color: var(--iol-muted); font-size: 11.5px; } .iol-box-table .iol-col-updated strong { color: var(--iol-ink); } .iol-box-table .iol-col-summary { white-space: normal; } .iol-box-table .iol-col-id a { font-weight: 700; font-variant-numeric: tabular-nums; } .iol-box-table .iol-col-summary .iol-box-project { display: inline-block; margin-bottom: 2px; padding: 1px 6px; border: 1px dotted #b9cade; border-radius: 3px; background: #f1f5f9; color: var(--iol-navy); font-size: 10.5px; font-weight: 600; } .iol-box-table .iol-col-summary .iol-box-summary { display: block; font-weight: 600; color: var(--iol-ink); /* Two lines then ellipsis, so one runaway title can't stretch a row. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .iol-box-table .iol-col-summary .iol-box-summary:hover { color: var(--iol-gold-deep); } .iol-box-table .iol-col-summary .iol-box-category { display: block; margin-top: 2px; color: var(--iol-muted); font-size: 11px; } .iol-box-table .iol-col-summary .iol-box-category .fa { color: #b9c4d2; } .iol-box-table .iol-col-status span { font-size: 11.5px; font-weight: 600; } .iol-box-table .iol-col-status { white-space: nowrap; } .iol-box-table .fa-status-box { margin-right: 2px; } /* --- Section 13b: the "My PM Tool Timers" box --------------------------- */ .iol-timers-box .iol-timers-badge-run, .iol-timers-box .iol-timers-badge-pause { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; } .iol-timers-box .iol-timers-badge-run { background-color: #10b981 !important; color: #04231a !important; } .iol-timers-box .iol-timers-badge-pause { background-color: var(--iol-gold) !important; color: var(--iol-ink-dark) !important; } /* Admin ("Team") view only: how many people those timers belong to, and the drop-down that narrows the list to one of them. Both live on the navy header, so they are drawn in translucent white rather than a third colour. */ .iol-timers-box .iol-timers-badge-users { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; background-color: rgba(255, 255, 255, .18) !important; border: 1px solid rgba(255, 255, 255, .45); color: #fff !important; } .iol-timers-box .iol-timers-filter { display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 0 0; font-weight: 400; color: #fff; } .iol-timers-box .iol-timers-filter .fa { color: rgba(255, 255, 255, .8); } .iol-timers-box .iol-timers-filter select { max-width: 190px; height: 26px; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .65); background-color: #fff; color: var(--iol-navy); font-size: 11.5px; font-weight: 600; } .iol-timers-box .iol-timers-filter select:focus { outline: none; border-color: var(--iol-gold); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } .iol-timers-table .iol-col-id { width: 92px; } .iol-timers-table .iol-col-timer { width: 176px; } .iol-timers-table .iol-col-summary { width: auto; } .iol-timers-table .iol-col-project { width: 190px; } .iol-timers-table .iol-col-status { width: 124px; } .iol-timers-table .iol-col-updated { width: 120px; } /* Wide enough for the View + Resolve pair side by side - at 150px the second button spilled out of the cell and past the card's right edge. */ .iol-timers-table .iol-col-action { width: 188px; } /* The team view carries an extra "Assigned To" column; the room comes off the project and timestamp columns, never off the summary. */ .iol-timers-table .iol-col-user { width: 150px; } .iol-timers-box.is-team .iol-timers-table .iol-col-project { width: 160px; } .iol-timers-box.is-team .iol-timers-table .iol-col-updated { width: 104px; } .iol-timers-box.is-team .iol-timers-table .iol-col-action { width: 172px; } .iol-timers-table .iol-timer-user { display: block; font-weight: 600; font-size: 12px; color: var(--iol-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iol-timers-table .iol-timer-user .fa { color: var(--iol-gold-deep); } .iol-timers-table .iol-timer-user a { color: var(--iol-navy); } .iol-timers-table .iol-timer-user a:hover { color: var(--iol-gold-deep); } .iol-timers-table .iol-timer-user.is-unassigned { color: var(--iol-muted); font-weight: 500; font-style: italic; } .iol-timers-table .iol-timer-user.is-unassigned .fa { color: #b9c4d2; } /* One developer's timers are a handful of rows; a whole team's can be a hundred and fifty, and the box sits above every other dashboard widget. So the team view scrolls inside itself with its header pinned, instead of pushing the rest of My View off the screen. */ .iol-timers-box.is-team .table-responsive { max-height: 520px; overflow-y: auto; } .iol-timers-box.is-team .iol-timers-table > thead > tr > th { position: sticky; top: 0; z-index: 2; } /* A colour stripe on the row edge separates running from paused work at a glance, before any text is read. */ .iol-timer-row > td:first-child { border-left: 3px solid transparent; } .iol-timer-row.is-running > td:first-child { border-left-color: #10b981; } .iol-timer-row.is-paused > td:first-child { border-left-color: var(--iol-gold-deep); } .iol-timers-table .iol-col-id a { font-weight: 700; font-variant-numeric: tabular-nums; } /* The timer pill itself */ .iol-timer-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 8px; border-radius: 99px; border: 1px solid transparent; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .iol-timer-pill.is-running { background: #d1fae5; border-color: #6ee7b7; color: #065f46; } .iol-timer-pill.is-paused { background: #fef3c7; border-color: #fde68a; color: #92400e; } /* An unassigned issue never got a timer - KanboardTimerSync skips issues with no handler - so it is drawn grey, clearly outside the running/paused pair. */ .iol-timer-pill.is-none { background: #eef2f7; border-color: #d7dfe9; color: var(--iol-muted); } .iol-timer-pill .fa { font-size: 9px; } /* Pulsing dot — the one piece of motion on the page, and only while a timer is genuinely running. Stilled by the reduced-motion block above. */ .iol-timer-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: iol-timer-pulse 1.8s infinite; } @keyframes iol-timer-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .iol-timer-elapsed { display: block; margin-top: 3px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--iol-navy); letter-spacing: -.02em; } .iol-timer-elapsed.is-muted { color: var(--iol-muted); font-weight: 600; } .iol-timers-table .iol-timer-summary { display: block; font-weight: 600; font-size: 13px; color: var(--iol-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .iol-timers-table .iol-timer-summary:hover { color: var(--iol-gold-deep); text-decoration: underline; } .iol-timers-table .iol-timer-project { display: block; font-weight: 600; color: var(--iol-navy); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iol-timers-table .iol-timer-project .fa { color: var(--iol-gold-deep); } .iol-timers-table .iol-timer-category { display: block; margin-top: 1px; color: var(--iol-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iol-timers-table .iol-col-status { white-space: normal; } .iol-timers-table .iol-col-status span { font-size: 11.5px; font-weight: 600; } .iol-timers-table .iol-col-updated { white-space: normal; color: var(--iol-muted); font-size: 11.5px; } .iol-timers-table .iol-col-action { white-space: nowrap; } .iol-timers-table .iol-col-action .btn { margin: 1px 2px 1px 0; } /* Below the two-column breakpoint the widest columns are the ones the developer can do without; the summary and the timer state are not. */ @media (max-width: 991px) { .iol-timers-table .iol-col-project, .iol-timers-table .iol-col-updated { display: none; } .iol-box-table .iol-col-updated { display: none; } } @media (max-width: 767px) { .iol-timers-table .iol-col-status { display: none; } .iol-timers-box .iol-timers-filter select { max-width: 130px; } .iol-box-table .iol-col-flag { display: none; } .iol-box-table, .iol-timers-table { table-layout: auto; } } /* ══════════════════════════════════════════════════════════ 14. View Issues (view_all_bug_page.php) Two panels, and both were fighting the eye: the filter grid is stock Mantis' 8pt bordered table where every label looks like every value, and the issue list is a fully bordered, tightly stacked grid. The passes below give each one a clear hierarchy - labels quiet, values loud, one horizontal rule per row - without touching the markup. ══════════════════════════════════════════════════════════ */ /* --- Filter panel ------------------------------------------------------- */ .filter-box { margin-bottom: 4px; } #filter .widget-body > .widget-toolbox { background-color: #f8fafc !important; border-bottom: 1px solid var(--iol-line); } #filter .widget-toolbox .btn, #filter .widget-toolbar .btn { border-radius: 999px !important; border-bottom-width: 1px; font-size: 11.5px; font-weight: 600; padding: 4px 14px; } /* The grid itself: no cell borders, one hairline per label/value pair. */ #filter table.filters { border: 0; border-collapse: collapse; width: 100%; background: var(--iol-card); } #filter table.filters td { border: 0; border-bottom: 1px solid #eef2f7; vertical-align: middle; } #filter table.filters td + td { border-left: 1px solid #f2f5f9; } /* Labels: quiet, uppercase, and obviously clickable - each one opens the picker for that filter, which the stock blue-on-grey text never said. */ #filter table.filters td.category { background-color: #f8fafc !important; padding: 7px 12px 5px; border-bottom: 0; } #filter table.filters td.category a.dynamic-filter-expander { display: inline-block; color: var(--iol-muted) !important; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; line-height: 1.35; } #filter table.filters td.category a.dynamic-filter-expander:after { content: "\f107"; /* fa-angle-down */ font-family: FontAwesome; font-size: 11px; font-weight: normal; letter-spacing: 0; margin-left: 5px; opacity: .55; } #filter table.filters td.category a.dynamic-filter-expander:hover { color: var(--iol-navy) !important; } #filter table.filters td.category a.dynamic-filter-expander:hover:after { opacity: 1; } /* Values: this is what the user is actually reading off the panel. */ #filter table.filters td:not(.category) { background-color: var(--iol-card); padding: 0 12px 8px; color: var(--iol-ink); font-size: 12.5px; font-weight: 600; line-height: 1.4; } #filter table.filters td:not(.category) a { color: var(--iol-navy); } #filter .small-caption { border: 0; font-size: inherit; padding: 0; } #filter table.filters tr.spacer, #filter table.filters tr.spacer td { background: transparent !important; height: 8px; border: 0 !important; } #filter table.filters select, #filter table.filters input[type="text"] { font-size: 12px; } /* Apply Filter is the panel's call to action, so it gets the gold. */ #filter input[name="filter_submit"], #filter button[name="filter_submit"] { background-color: var(--iol-gold) !important; border-color: var(--iol-gold-deep) !important; color: var(--iol-ink-dark) !important; border-radius: 999px !important; font-weight: 700; padding: 5px 18px; } #filter input[name="filter_submit"]:hover, #filter button[name="filter_submit"]:hover { background-color: var(--iol-gold-mid) !important; } #filter #filter-search-txt, #filter #filter-bar-search-txt { border-radius: 999px; padding: 4px 14px; min-width: 240px; margin-right: 6px; } @media (max-width: 767px) { #filter #filter-search-txt { min-width: 0; width: 100%; margin-bottom: 6px; } } /* --- Issue list -------------------------------------------------------- */ #bug_action .widget-title .badge { background-color: var(--iol-gold) !important; color: var(--iol-ink-dark) !important; font-weight: 700; margin-left: 8px; border-radius: 999px; padding: 3px 10px; } #bug_action .widget-toolbox { background-color: #f8fafc !important; } #bug_action .widget-toolbox .btn { border-radius: 999px !important; border-bottom-width: 1px; font-size: 11.5px; font-weight: 600; padding: 4px 14px; margin: 2px 4px 2px 0; } /* Rules run one way only: a horizontal line per issue reads as a list, where the stock full grid reads as a spreadsheet. */ #buglist { border: 0; width: 100%; max-width: 100%; } #buglist > thead > tr > th { padding: 11px 9px; white-space: nowrap; border-left: 0; border-right: 0; } #buglist > thead > tr > th a { text-decoration: none; } #buglist > thead > tr > th a:hover { text-decoration: underline; } #buglist > tbody > tr > td { border: 0; border-bottom: 1px solid #eef2f7; padding: 10px 9px; font-size: 12.5px; line-height: 1.45; vertical-align: middle; color: var(--iol-ink); } #buglist > tbody > tr:last-child > td { border-bottom: 0; } #buglist.table-striped > tbody > tr:nth-child(odd) > td { background-color: #fbfcfe; } /* Issue id: the column people scan and quote, so it gets tabular figures. */ #buglist > tbody > tr > td.column-id a { color: var(--iol-navy); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; } #buglist > tbody > tr > td.column-id a:hover { color: var(--iol-gold-deep); } /* Summary carries the meaning - give it the room and the weight, and keep pasted URLs from stretching the row. */ #buglist > tbody > tr > td.column-summary { font-size: 13px; line-height: 1.5; min-width: 200px; width: 42%; /* A pasted URL with no break opportunity is what pushes the table past the viewport and hands the list a horizontal scrollbar; break it anywhere rather than letting one cell set the table's width. */ overflow-wrap: anywhere; word-break: break-word; } #buglist > tbody > tr > td.column-summary > a { color: var(--iol-ink); font-weight: 500; } #buglist > tbody > tr > td.column-summary > a:hover { color: var(--iol-navy); } #buglist > tbody > tr > td.column-summary a a, #buglist > tbody > tr > td.column-summary br + a { font-size: 11.5px; font-weight: 400; color: var(--iol-muted); } /* Status as a pill: the coloured dot keeps the status colour, the label stops competing with the summary text. */ #buglist > tbody > tr > td.column-status > .align-left { display: inline-flex; align-items: center; gap: 6px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px 11px 3px 8px; white-space: nowrap; } #buglist > tbody > tr > td.column-status > .align-left span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #buglist > tbody > tr > td.column-status .fa-status-box { font-size: 9px; } #buglist > tbody > tr > td.column-severity, #buglist > tbody > tr > td.column-last-modified { white-space: nowrap; } /* Category is reference information, not what the list is scanned for - and in this install category names are used as descriptive titles, up to ~110 characters. Left to size itself that single column is what drags the table past the viewport, so it is capped and clamped to two lines; the full name is on the issue page. */ #buglist > thead > tr > th.column-category { width: 120px; max-width: 120px; } #buglist > tbody > tr > td.column-category { max-width: 120px; white-space: normal; } #buglist > tbody > tr > td.column-category > div, #buglist > tbody > tr > td.column-category > .align-left { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 120px; font-size: 11.5px; color: var(--iol-muted); line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; } /* Tags are chips and can be many - keep them inside their own column. */ #buglist > thead > tr > th.column-tags, #buglist > tbody > tr > td.column-tags { max-width: 120px; white-space: normal; overflow-wrap: anywhere; } #buglist > tbody > tr > td.column-last-modified { color: var(--iol-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } #buglist > tbody > tr > td.column-severity { font-size: 12px; } #buglist > thead > tr > th.column-priority, #buglist > thead > tr > th.column-bugnotes-count, #buglist > thead > tr > th.column-attachments, #buglist > thead > tr > th.column-selection, #buglist > thead > tr > th.column-edit, #buglist > tbody > tr > td.column-priority, #buglist > tbody > tr > td.column-bugnotes-count, #buglist > tbody > tr > td.column-attachments, #buglist > tbody > tr > td.column-selection, #buglist > tbody > tr > td.column-edit { text-align: center; width: 1%; white-space: nowrap; padding-left: 6px; padding-right: 6px; } #buglist > tbody > tr > td.column-bugnotes-count a { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background-color: #eef2f7; color: var(--iol-navy); font-size: 11px; font-weight: 700; } #buglist > tbody > tr > td.column-edit .fa { color: #94a3b8 !important; } #buglist > tbody > tr > td.column-edit a:hover .fa { color: var(--iol-navy) !important; } /* Bulk action bar and pager at the foot of the list. */ #bug_action .widget-main + .widget-toolbox, #bug_action .table-responsive + .widget-toolbox { border-top: 1px solid var(--iol-line); } #bug_action .pagination > li > a, #bug_action .pagination > li > span { border-radius: 999px !important; border: 1px solid var(--iol-line); color: var(--iol-navy); font-weight: 600; margin-left: 3px; padding: 3px 10px; } #bug_action .pagination > li.active > a { background-color: var(--iol-navy) !important; border-color: var(--iol-navy); color: #fff !important; } #bug_action .pagination > li > a:hover { background-color: var(--iol-gold-soft); border-color: var(--iol-gold-deep); } /* Narrow screens: drop the columns that are nice to have, keep id, status and summary, which are the ones the list is read for. */ @media (max-width: 991px) { #buglist > thead > tr > th.column-category, #buglist > tbody > tr > td.column-category, #buglist > thead > tr > th.column-severity, #buglist > tbody > tr > td.column-severity, #buglist > thead > tr > th.column-attachments, #buglist > tbody > tr > td.column-attachments, #buglist > thead > tr > th.column-tags, #buglist > tbody > tr > td.column-tags { display: none; } } /* Trailing detail inside a status pill ( "resolved (user8)" ) stays quiet. */ #buglist > tbody > tr > td.column-status > .align-left del, #buglist > tbody > tr > td.column-status > .align-left small { color: var(--iol-muted); font-size: 10.5px; font-weight: 500; } /* Tags read as chips rather than a run of links. */ #buglist > tbody > tr > td.column-tags a { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 8px; border-radius: 999px; background-color: #eef2f7; color: var(--iol-navy); font-size: 11px; font-weight: 600; text-decoration: none; } #buglist > tbody > tr > td.column-tags a:hover { background-color: var(--iol-gold-soft); color: var(--iol-ink-dark); } /* ══════════════════════════════════════════════════════════ 15. Issue view (view.php) Stock Mantis renders the whole issue as one bordered 6-column grid where the id, the labels, the summary and the description all carry the same weight, then repeats the pattern for notes and history in 8pt type. The pass below gives the page a reading order - identity strip, field grid, long-form text, then the conversation - without touching the markup. ══════════════════════════════════════════════════════════ */ /* --- Detail grid -------------------------------------------------------- */ table.iol-bug-details { border: 0; margin-bottom: 0; } table.iol-bug-details > tbody > tr > th, table.iol-bug-details > tbody > tr > td { border: 0; border-bottom: 1px solid #eef2f7; vertical-align: middle; padding: 9px 12px; } /* Labels: quiet and uppercase, so the values carry the row. */ table.iol-bug-details > tbody > tr > th.category { background-color: #f8fafc !important; color: var(--iol-muted) !important; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; width: 1%; } table.iol-bug-details > tbody > tr > td { color: var(--iol-ink); font-size: 13px; font-weight: 500; } table.iol-bug-details > tbody > tr > td a { color: var(--iol-navy); font-weight: 600; } /* The identity strip at the top: id, project, category, dates. */ table.iol-bug-details > tbody > tr.bug-header > th { background-color: var(--iol-navy) !important; color: rgba(255,255,255,.72) !important; border-bottom: 0; padding-bottom: 4px; } table.iol-bug-details > tbody > tr.bug-header-data > td { background-color: var(--iol-navy); color: #fff; font-size: 12.5px; font-weight: 600; border-bottom: 2px solid var(--iol-gold); padding-top: 0; padding-bottom: 10px; } table.iol-bug-details > tbody > tr.bug-header-data > td.bug-id { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; } table.iol-bug-details > tbody > tr.bug-header-data > td a { color: #fff; } /* Summary is the headline of the page. */ table.iol-bug-details > tbody > tr > td.bug-summary { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--iol-ink-dark); padding-top: 12px; padding-bottom: 12px; overflow-wrap: anywhere; } /* Long-form fields read as text blocks, not table cells. */ table.iol-bug-details > tbody > tr > td.bug-description, table.iol-bug-details > tbody > tr > td.bug-steps-to-reproduce, table.iol-bug-details > tbody > tr > td.bug-additional-information { font-size: 13.5px; font-weight: 400; line-height: 1.7; padding: 12px 14px; overflow-wrap: anywhere; } table.iol-bug-details > tbody > tr > td.bug-description { background-color: #fbfcfe; border-left: 3px solid var(--iol-gold); } /* Status keeps its colour chip; the word stops shouting. */ table.iol-bug-details > tbody > tr > td.bug-status, table.iol-bug-details > tbody > tr > td.bug-resolution { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } table.iol-bug-details .fa-status-box { font-size: 9px; } /* Tags as chips. */ table.iol-bug-details > tbody > tr > td.bug-tags .btn { border-radius: 999px !important; border-bottom-width: 1px; font-size: 11px; font-weight: 600; padding: 2px 10px; margin: 1px 2px 1px 0; } table.iol-bug-details > tbody > tr.spacer > td { background: transparent !important; border: 0 !important; height: 10px; padding: 0; } /* The action bar sits in a tfoot, so it renders under the grid. */ table.iol-bug-details > tfoot > tr > td { background-color: #f8fafc; border: 0; border-top: 1px solid var(--iol-line); padding: 10px 12px; } /* --- Activities (notes) ------------------------------------------------- */ #bugnotes table { border: 0; margin-bottom: 0; } #bugnotes tr.bugnote > td { border: 0; border-bottom: 1px solid #eef2f7; vertical-align: top; padding: 12px 14px; } /* Author / date / permalink column: a quiet gutter beside the note. */ #bugnotes tr.bugnote > td.category { background-color: #f8fafc !important; width: 210px; min-width: 180px; color: var(--iol-muted); font-size: 11.5px; } #bugnotes tr.bugnote > td.category a { color: var(--iol-navy); font-weight: 600; } #bugnotes tr.bugnote > td.category p:first-child { font-size: 13px; font-weight: 700; color: var(--iol-ink); } #bugnotes tr.bugnote > td.category .fa { color: #94a3b8 !important; } #bugnotes tr.bugnote > td.category .btn { border-radius: 999px !important; border-bottom-width: 1px; font-size: 10.5px; font-weight: 600; padding: 2px 10px; margin: 1px 3px 1px 0; } /* The note itself: this is the content, so it gets the reading treatment. */ #bugnotes tr.bugnote > td.bugnote-note { background-color: var(--iol-card) !important; color: var(--iol-ink); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; } /* Private notes stay visibly private. */ #bugnotes tr.bugnote > td.bugnote-private, #bugnotes tr.bugnote > td.bugnote-note.bugnote-private { background-color: var(--iol-gold-soft) !important; border-left: 3px solid var(--iol-gold-deep); } #bugnotes tr.spacer > td { background: transparent !important; border: 0 !important; height: 0; padding: 0; } #bugnotes tr.bugnotes-empty > td { padding: 26px 16px !important; color: var(--iol-muted); border: 0; } /* --- Add note ----------------------------------------------------------- */ #bugnote_add table { border: 0; } #bugnote_add th.category { background-color: #f8fafc !important; color: var(--iol-muted) !important; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; vertical-align: top; border: 0; border-bottom: 1px solid #eef2f7; white-space: nowrap; } #bugnote_add td { border: 0; border-bottom: 1px solid #eef2f7; padding: 10px 12px; } #bugnote_add textarea { border-radius: var(--iol-radius-sm); border-color: #cbd5e1; font-size: 13.5px; line-height: 1.6; padding: 10px 12px; } #bugnote_add textarea:focus { border-color: var(--iol-gold-deep); box-shadow: 0 0 0 3px rgba(255,203,5,.18); } /* Adding the note is the point of the card, so it takes the gold. */ #bugnoteadd input[type="submit"], #bugnote_add input[type="submit"] { background-color: var(--iol-gold) !important; border-color: var(--iol-gold-deep) !important; color: var(--iol-ink-dark) !important; border-radius: 999px !important; font-weight: 700; padding: 6px 20px; } #bugnoteadd input[type="submit"]:hover, #bugnote_add input[type="submit"]:hover { background-color: var(--iol-gold-mid) !important; } /* --- History, relationships, monitoring --------------------------------- */ #history table, #relationships table, #monitoring table { border: 0; margin-bottom: 0; } #history > .widget-body th.small-caption, #history table > thead > tr > th { font-size: 10px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 0 !important; padding: 10px 12px; white-space: nowrap; } #history table > tbody > tr > td { border: 0; border-bottom: 1px solid #eef2f7; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; vertical-align: middle; color: var(--iol-ink); } #history table > tbody > tr > td.small-caption { border-width: 0 0 1px 0; } #history table > tbody > tr > td:first-child { color: var(--iol-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } #history table > tbody > tr > td:nth-child(3) { color: var(--iol-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } #history .small-caption { border: 0; } #relationships table > tbody > tr > td, #monitoring table > tbody > tr > td { border: 0; border-bottom: 1px solid #eef2f7; padding: 9px 12px; font-size: 12.5px; vertical-align: middle; } #relationships th.category, #monitoring th.category { background-color: #f8fafc !important; color: var(--iol-muted) !important; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border: 0; border-bottom: 1px solid #eef2f7; white-space: nowrap; } #relationships .widget-toolbox, #monitoring .widget-toolbox, #bugnotes .widget-toolbox { background-color: #f8fafc !important; } /* Narrow screens: the note gutter stacks too tightly to stay 210px. */ @media (max-width: 767px) { #bugnotes tr.bugnote > td.category { width: 130px; min-width: 120px; } table.iol-bug-details > tbody > tr > th.category { white-space: normal; } } /* ══════════════════════════════════════════════════════════ 16. Print fallbacks for the dark bands Browsers drop background colours when printing by default, which would leave the white text on the navy issue strip and on every table head invisible on paper. Repaint those bands as ink on white. ══════════════════════════════════════════════════════════ */ @media print { table.iol-bug-details > tbody > tr.bug-header > th, table.iol-bug-details > tbody > tr.bug-header-data > td, .table > thead > tr > th, table.table-bordered > thead > tr > th, .widget-box > .widget-header, .widget-color-blue > .widget-header > .widget-title, .widget-color-blue2 > .widget-header > .widget-title, .widget-color-blue3 > .widget-header > .widget-title, .widget-color-blue > .widget-header h4, .widget-color-blue2 > .widget-header h4, .widget-color-blue3 > .widget-header h4 { background: #fff !important; color: #000 !important; } table.iol-bug-details > tbody > tr.bug-header-data > td, .table > thead > tr > th, .widget-box > .widget-header { border-bottom: 1px solid #999 !important; } .widget-color-blue2 > .widget-header .ace-icon, .widget-header > .widget-title > .ace-icon { color: #000 !important; } } /* ══════════════════════════════════════════════════════════ 17. Report Issue form (bug_report_page.php) The form was a single 15-row label/field table inside .table-responsive, which meant one field per row at any width and a horizontal scrollbar on phones. It is now a Bootstrap grid of labelled fields grouped into fieldsets, so the rules here are layout for that grid plus the group chrome. Ace has no opinion about either, so nothing below needs !important. ══════════════════════════════════════════════════════════ */ .iol-report-form .widget-main.iol-report-main { background: var(--iol-card); padding: 18px 20px 6px; } /* --- Project / clone chips in the widget header -------------------------- */ .iol-report-form .widget-header .widget-toolbar.no-border { display: flex; align-items: center; gap: 8px; } .iol-report-project, .iol-report-clone { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap; } .iol-report-project { background: rgba(255,255,255,.14); color: #fff; } .iol-report-clone { background: var(--iol-gold); color: var(--iol-ink-dark); } .iol-report-project .ace-icon, .iol-report-clone .ace-icon { margin: 0; } /* --- One field: label stacked above its control -------------------------- */ .iol-field { margin-bottom: 14px; } .iol-field > label { display: block; margin-bottom: 4px; color: var(--iol-ink); font-size: 12px; font-weight: 600; line-height: 18px; } /* print_documentation_link() wraps the label text in its own ; it must not read as a link inside a form label. */ .iol-field > label a, .iol-group-title a { color: inherit; border-bottom: 1px dotted #b9c4d1; text-decoration: none; } .iol-field > label a:hover { color: var(--iol-navy); border-bottom-color: var(--iol-navy); } .iol-field > label .required { margin-right: 2px; } .iol-field-note { margin-left: 6px; color: var(--iol-muted); font-size: 11px; font-weight: 500; } /* Every control fills its column, so a row of dropdowns lines up instead of each one shrinking to the width of its longest option. The form's own markup drops Ace's .input-sm for exactly this reason: ace-mantis.css pins that class to `width: 90px !important`, then `120px !important` at 768px and `auto !important` from 992px up. Those were written for the old label/field table, where a control sizing to its content was the desired look; in a grid column `auto` collapses a select to the width of its longest option and the rows stop lining up. Core-printed controls (tags, custom fields) still carry the class and are answered in kind below. fieldset needs min-width:0 - its default `min-width: min-content` ignores the grid and lets a nested row overflow the group's right border. */ .iol-report-form .iol-group { min-width: 0; } .iol-field select.form-control, .iol-field input.form-control, .iol-field textarea.form-control { width: 100%; max-width: 100%; } .iol-field select.form-control, .iol-field input.form-control { height: 34px; } .iol-field select[multiple].form-control { height: auto; min-height: 92px; } /* Platform / OS / OS Version, when allow_freetext_in_profile_fields is on. Two things fight the grid here: ace-mantis gives every .typeahead a 175px floor and a 16px font, and typeahead.jquery wraps the input at init in a shrink-to-fit . That span becomes the input's containing block, so `width: 100%` resolves against the wrapper rather than the column and the field stalls at its 175px minimum - the wrapper is what has to be stretched. */ .iol-field .twitter-typeahead { display: block; width: 100%; } .iol-field input.typeahead.form-control, .iol-field .twitter-typeahead .tt-input, .iol-field .twitter-typeahead .tt-hint { width: 100%; min-width: 0; border-radius: var(--iol-radius-sm); font-size: 13px; line-height: 1.4; } /* The dropdown is positioned off the wrapper, so it now spans the column. */ .iol-field .twitter-typeahead .tt-menu { width: 100%; min-width: 0; } .iol-field textarea.form-control { resize: vertical; line-height: 1.55; } #summary { font-size: 14px; } /* --- Summary character counter ------------------------------------------- */ .iol-charcount { float: right; color: var(--iol-muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; } .iol-charcount-near { color: #b45309; } /* --- Due date: input plus its adjacent calendar icon --------------------- */ .iol-field-datetime { position: relative; } .iol-field-datetime > input { padding-right: 32px; } .iol-field-datetime > .datetimepicker { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--iol-muted); cursor: pointer; } .iol-field-datetime > .datetimepicker:hover { color: var(--iol-navy); } /* --- Inline radio / checkbox rows --------------------------------------- */ .iol-field-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; min-height: 34px; } .iol-field-radios > label, label.iol-inline-choice { display: inline-flex; align-items: center; margin: 0; font-weight: 400; } .iol-field-radios .lbl { font-size: 13px; } /* --- Field groups ------------------------------------------------------- */ .iol-report-form .iol-group { margin: 4px 0 18px; padding: 14px 16px 2px; border: 1px solid var(--iol-line); border-radius: var(--iol-radius-sm); background: #fbfcfe; } .iol-report-form .iol-group-title { display: inline-flex; align-items: center; gap: 7px; width: auto; margin: 0 0 12px; padding: 0 8px 0 0; border: 0; color: var(--iol-navy); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; } .iol-report-form .iol-group-title .ace-icon { color: var(--iol-gold-deep); } .iol-report-form .iol-group-title .iol-field-note { text-transform: none; letter-spacing: 0; } /* --- "Or Fill In" profile collapse ------------------------------------- */ .iol-collapse-toggle { margin-bottom: 8px; color: var(--iol-muted); font-size: 12px; font-weight: 600; } .iol-collapse-toggle a { color: var(--iol-navy); } /* --- Tags: core print_tag_input() emits label + text + select ----------- */ .iol-field-tags label.inline.small { /* ace.min.css: .inline{display:inline-block!important} */ display: block !important; margin: 0 0 4px; color: var(--iol-muted); font-size: 11px; font-weight: 500; } .iol-field-tags #tag_string, .iol-field-tags #tag_select { /* print_tag_input() hardcodes class="input-sm", so the width has to be reclaimed with the same weight ace-mantis used to set it. */ width: 100% !important; height: 34px; padding: 5px 10px !important; border: 1px solid #cbd5e1; border-radius: var(--iol-radius-sm); color: var(--iol-ink); } .iol-field-tags #tag_string { margin-bottom: 6px; } /* --- Custom fields: core emits the control with its own markup ---------- */ .iol-field-custom input[type=text], .iol-field-custom textarea, .iol-field-custom select:not([multiple]) { /* print_custom_field_input() emits its own markup, .input-sm included. */ width: 100% !important; max-width: 100%; min-height: 34px; padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: var(--iol-radius-sm); color: var(--iol-ink); } .iol-field-custom textarea { min-height: 76px; resize: vertical; } .iol-field-custom input[type=radio], .iol-field-custom input[type=checkbox] { width: auto; min-height: 0; } .iol-field-custom label:not(:first-child) { font-weight: 400; } /* --- Dropzone ----------------------------------------------------------- */ .iol-report-form .dropzone { margin-bottom: 14px; border: 2px dashed #cbd5e1; border-radius: var(--iol-radius-sm); background: var(--iol-card); padding: 22px 14px; transition: border-color .15s ease, background-color .15s ease; } .iol-report-form .dropzone:hover, .iol-report-form .dropzone.dz-drag-hover { border-color: var(--iol-gold-deep); background: var(--iol-gold-soft); } .iol-report-form .dropzone .bigger-150 { font-size: 14px !important; } /* --- Plugin-emitted rows (EVENT_REPORT_BUG_FORM*) ----------------------- */ .iol-plugin-rows { margin-bottom: 16px; } /* --- Action bar --------------------------------------------------------- */ .iol-report-form .iol-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-top: 1px solid var(--iol-line); background: #f8fafc; } .iol-report-form .iol-report-actions .btn { margin: 0; } .iol-report-form .iol-report-actions .iol-report-stay { margin-left: 4px; } .iol-report-form .iol-report-actions .required.pull-right { float: none !important; margin-left: auto; font-size: 11.5px; } /* Keep Submit reachable without scrolling back down a long form. The bar is inside .widget-box, so it sticks to the viewport bottom while the box is taller than the screen and settles into place at the end. */ @media (min-height: 520px) { .iol-report-form .iol-report-actions { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 6px -2px rgba(16,24,40,.12); } } /* Narrow screens: two dropdowns per row is still readable at 6 columns, but the grouped padding and the header chips have to give way. */ @media (max-width: 767px) { .iol-report-form .widget-main.iol-report-main { padding: 14px 12px 2px; } .iol-report-form .iol-group { padding: 12px 11px 2px; } .iol-report-form .widget-header .widget-toolbar.no-border { display: none; } .iol-report-form .iol-report-actions .required.pull-right { margin-left: 0; width: 100%; } } /* ══════════════════════════════════════════════════════════ 18. Bulk issue form (bug_report_bulk_page.php) Shares section 17's .iol-field / .iol-charcount / .iol-report-actions vocabulary, so only what is specific to the repeating entry card lives here. The page's markup previously carried its own inline styles; those are gone, which is why these rules have no inline declarations to beat. ══════════════════════════════════════════════════════════ */ .iol-bulk-form .widget-main.iol-bulk-main { background: var(--iol-card); padding: 16px 18px; } .iol-bulk-intro { margin: 0 0 14px; color: var(--iol-muted); font-size: 12.5px; line-height: 1.6; } .iol-bulk-intro strong { color: var(--iol-ink); } .iol-bulk-warn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: var(--iol-radius-sm); background: var(--iol-gold-soft); color: #8a6100; font-weight: 600; } /* --- One entry card ----------------------------------------------------- */ .iol-bulk-form .bug-entry { position: relative; margin-bottom: 12px; padding: 10px 14px 0; border: 1px solid var(--iol-line); border-left: 3px solid var(--iol-navy-light); border-radius: var(--iol-radius-sm); background: #fbfcfe; } .iol-bulk-form .bug-entry:focus-within { border-color: #c7d2e0; border-left-color: var(--iol-gold-deep); background: #fff; box-shadow: var(--iol-shadow-sm); } .iol-bulk-form .bug-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .iol-bulk-form .bug-entry-label { color: var(--iol-navy); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Removing a row is a minor, reversible action - it should be findable, not the loudest thing on screen. Ace paints .btn-danger solid red !important, so the quiet state has to be set in kind; the red returns on hover. */ .iol-bulk-form .btn-remove-entry { margin: 0; padding: 2px 8px; border: 1px solid var(--iol-line) !important; background: #fff !important; color: var(--iol-muted) !important; font-size: 11px; font-weight: 600; box-shadow: none !important; text-shadow: none !important; } .iol-bulk-form .btn-remove-entry:hover, .iol-bulk-form .btn-remove-entry:focus { border-color: #d9534f !important; background: #fff5f5 !important; color: #c9302c !important; } /* reindex() hides Remove while a single row is left, since removing it would leave nothing to submit. */ .iol-bulk-form .btn-remove-entry.hidden { display: none !important; } /* --- Add row / running count -------------------------------------------- */ .iol-bulk-add { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .iol-bulk-add .btn { margin: 0; } .iol-bulk-count { color: var(--iol-muted); font-size: 12px; font-weight: 600; } /* --- Validation --------------------------------------------------------- */ .iol-bulk-errors { margin-bottom: 14px; border-radius: var(--iol-radius-sm); font-size: 12.5px; } .iol-bulk-errors ul { margin: 6px 0 0; padding-left: 18px; } .iol-bulk-errors li { line-height: 1.6; } .iol-bulk-form .iol-field.has-error > label { color: #a94442; } .iol-bulk-form .iol-field.has-error .form-control { border-color: #d9534f; background: #fff8f8; } .iol-bulk-form .iol-field.has-error .form-control:focus { border-color: #c9302c; box-shadow: 0 0 0 3px rgba(217,83,79,.16); } /* The title's counter sits in the label, like Summary on the report form. */ .iol-bulk-form .iol-lbl-title .iol-charcount { font-weight: 500; } /* Entry rows are dense, so trim the field gutter the report form uses. */ .iol-bulk-form .bug-entry .iol-field { margin-bottom: 10px; } .iol-bulk-form .bug-entry textarea.form-control { min-height: 52px; } @media (max-width: 767px) { .iol-bulk-form .widget-main.iol-bulk-main { padding: 12px 11px; } .iol-bulk-form .bug-entry { padding: 10px 11px 0; } .iol-bulk-form .widget-header .widget-toolbar.no-border { display: none; } }