/* ============================================================================= modern.css — Modernized UI theme ----------------------------------------------------------------------------- EVERY rule in this file MUST be scoped under `.modern-ui` (added to by app.js when appSettings.modernUI === true). This keeps the file inert unless the toggle is on, so it can be loaded unconditionally and never affects the existing look. Restyle APPEARANCE only — do not change layout/structure, so users keep the familiar arrangement. Conventions: - Prefix selectors with `.modern-ui ` (descendant of ). - Prefer overriding colours, borders, radius, shadows, transitions, fonts. - Avoid changing widths/heights/positions of major layout regions. ============================================================================ */ /* ---- Design tokens (override per-brand here) ------------------------------ */ .modern-ui { --mui-accent: #2563eb; /* primary accent */ --mui-accent-hover: #1d4ed8; --mui-bg: #f5f7fa; /* app background */ --mui-surface: #ffffff; /* cards/panels */ --mui-border: #e3e8ef; --mui-text: #1f2937; --mui-muted: #6b7280; --mui-radius: 8px; --mui-radius-sm: 6px; --mui-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --mui-shadow-lg: 0 8px 24px rgba(16,24,40,.12); --mui-transition: 150ms ease; } /* ---- Base typography & smoothing ------------------------------------------ */ .modern-ui body, .modern-ui .gray-bg { background-color: var(--mui-bg); color: var(--mui-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---- Buttons --------------------------------------------------------------- */ .modern-ui .btn { border-radius: var(--mui-radius-sm); border: 1px solid transparent; transition: background-color var(--mui-transition), border-color var(--mui-transition), box-shadow var(--mui-transition), transform var(--mui-transition); box-shadow: none; } .modern-ui .btn:active { transform: translateY(1px); } /* :not(.btn-outline) so outline toggle buttons (e.g. the font toolbar's bold/underline) keep their transparent on/off look. */ .modern-ui .btn-primary:not(.btn-outline) { background-color: var(--mui-accent); border-color: var(--mui-accent); } .modern-ui .btn-primary:not(.btn-outline):hover, .modern-ui .btn-primary:not(.btn-outline):focus { background-color: var(--mui-accent-hover); border-color: var(--mui-accent-hover); } .modern-ui .btn-default { background-color: var(--mui-surface); border-color: var(--mui-border); color: var(--mui-text); } .modern-ui .btn-default:hover, .modern-ui .btn-default:focus { background-color: #f3f4f6; border-color: #d1d5db; } /* ---- Form controls --------------------------------------------------------- */ .modern-ui .form-control { border-radius: var(--mui-radius-sm); border-color: var(--mui-border); box-shadow: none; transition: border-color var(--mui-transition), box-shadow var(--mui-transition); } .modern-ui .form-control:focus { border-color: var(--mui-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } /* ---- Navbar / top nav ------------------------------------------------------ */ .modern-ui .navbar, .modern-ui .navbar-static-top { background-color: var(--mui-surface); border: none; box-shadow: var(--mui-shadow); } /* ---- Panels / cards / modals ---------------------------------------------- */ .modern-ui .panel, .modern-ui .ibox, .modern-ui .ibox-content { background-color: var(--mui-surface); border-color: var(--mui-border); border-radius: var(--mui-radius); box-shadow: var(--mui-shadow); } .modern-ui .modal-content { border: none; border-radius: var(--mui-radius); box-shadow: var(--mui-shadow-lg); } .modern-ui .modal-header, .modern-ui .modal-footer { border-color: var(--mui-border); } /* ---- ui-grid (details tables) --------------------------------------------- */ .modern-ui .ui-grid, .modern-ui .ui-grid-top-panel, .modern-ui .ui-grid-header-cell { border-color: var(--mui-border); } .modern-ui .ui-grid-header-cell { background: #f9fafb; font-weight: 600; } .modern-ui .ui-grid-row:hover .ui-grid-cell { background: #f3f6ff; } /* ---- Misc smoothing -------------------------------------------------------- */ .modern-ui a { transition: color var(--mui-transition); } .modern-ui *:focus-visible { outline: 2px solid rgba(37, 99, 235, .5); outline-offset: 1px; } /* ============================================================================= Top menu bar (.editor-topNavbar) — dark slate header with light menu items ============================================================================ */ .modern-ui .editor-topNavbar { background: linear-gradient(180deg, #f7faff 0%, #e9f0fb 100%); box-shadow: 0 2px 6px rgba(16, 24, 40, .08); border-bottom: 1px solid rgba(37, 99, 235, .18); } .modern-ui .editor-topNavbar .navbar, .modern-ui .editor-topNavbar .navbar-static-top { background: transparent; border: none; margin: 0; min-height: 50px; box-shadow: none; } /* Top-level menu items: File / Object / Order / Preferences / Help */ .modern-ui .editor-topNavbar .navbar-nav > li > a { color: #334155; font-weight: 500; padding-top: 15px; padding-bottom: 15px; transition: color var(--mui-transition), background-color var(--mui-transition), box-shadow var(--mui-transition); } .modern-ui .editor-topNavbar .navbar-nav > li > a:hover, .modern-ui .editor-topNavbar .navbar-nav > li > a:focus { color: var(--mui-accent-hover); background-color: rgba(37, 99, 235, .08); } .modern-ui .editor-topNavbar .navbar-nav > li.open > a, .modern-ui .editor-topNavbar .navbar-nav > li.open > a:hover, .modern-ui .editor-topNavbar .navbar-nav > li.open > a:focus { color: var(--mui-accent-hover); background-color: rgba(37, 99, 235, .12); box-shadow: inset 0 -3px 0 var(--mui-accent); } .modern-ui .editor-topNavbar .caret { opacity: .6; } /* Undo / redo (right side) — override the inline `outline` to bordered pills */ .modern-ui .editor-topNavbar a[style*="outline"] { outline: none !important; border: 1px solid rgba(37, 99, 235, .35) !important; border-radius: 6px !important; padding: 6px 14px !important; margin: 8px 3px; color: var(--mui-accent-hover); background-color: rgba(37, 99, 235, .10); display: inline-block; line-height: 1.2; } .modern-ui .editor-topNavbar a[style*="outline"]:hover { color: #ffffff; background-color: var(--mui-accent); border-color: var(--mui-accent) !important; } .modern-ui .editor-topNavbar .fa-arrow-left { margin-right: 6px; } /* Font-type toolbar sits as a light island on the dark header */ .modern-ui .editor-topNavbar .text-style-bar { border-color: var(--mui-border); border-left: 3px solid var(--mui-accent); border-radius: var(--mui-radius-sm); } /* Dropdown menus opened from the top bar */ .modern-ui .editor-topNavbar .dropdown-menu { border: 1px solid var(--mui-border); border-radius: var(--mui-radius); box-shadow: var(--mui-shadow-lg); padding: 6px; margin-top: 6px; } .modern-ui .editor-topNavbar .dropdown-menu > li > a { border-radius: var(--mui-radius-sm); padding: 8px 12px; color: var(--mui-text); transition: background-color var(--mui-transition), color var(--mui-transition); } .modern-ui .editor-topNavbar .dropdown-menu > li > a:hover, .modern-ui .editor-topNavbar .dropdown-menu > li > a:focus { background-color: #eef2ff; color: var(--mui-accent-hover); } /* ============================================================================= App background — soft tint instead of flat white; left panel stays a card ============================================================================ */ .modern-ui body.gray-bg, .modern-ui #page-wrapper, .modern-ui .editor-main { background: linear-gradient(135deg, #e7eefb 0%, #eae9fb 50%, #f3e9fb 100%); } .modern-ui .editor-left { background: var(--mui-surface); border-right: 1px solid var(--mui-border); box-shadow: 2px 0 8px rgba(16, 24, 40, .05); } .modern-ui .editor-right { background: transparent; } /* ============================================================================= Left tools panel — accent touches on list items, tabs and section titles ============================================================================ */ .modern-ui .editor-left .list-group-item { border-color: var(--mui-border); color: var(--mui-text); transition: background-color var(--mui-transition), color var(--mui-transition); } .modern-ui .editor-left .list-group-item:hover { background-color: #eef3ff; color: var(--mui-accent-hover); } /* Prominent, clearly-separated "Add Label" primary button */ .modern-ui .editor-left .add-label-btn, .modern-ui .editor-left .add-label-btn:hover, .modern-ui .editor-left .add-label-btn:focus { display: block; margin: 12px; padding: 11px 16px; background: var(--mui-accent); color: #ffffff; font-weight: 600; text-align: center; border: 1px solid var(--mui-accent); border-radius: var(--mui-radius-sm); box-shadow: var(--mui-shadow); transition: background-color var(--mui-transition), box-shadow var(--mui-transition), transform var(--mui-transition); } .modern-ui .editor-left .add-label-btn:hover, .modern-ui .editor-left .add-label-btn:focus { background: var(--mui-accent-hover); border-color: var(--mui-accent-hover); box-shadow: var(--mui-shadow-lg); } .modern-ui .editor-left .add-label-btn:active { transform: translateY(1px); } .modern-ui .editor-left .add-label-btn .fa { margin-right: 7px; } .modern-ui .ibox-title { border-color: var(--mui-border); } .modern-ui .nav-tabs { border-bottom-color: var(--mui-border); } .modern-ui .nav-tabs > li > a { border-radius: var(--mui-radius-sm) var(--mui-radius-sm) 0 0; color: var(--mui-muted); transition: color var(--mui-transition), background-color var(--mui-transition); } .modern-ui .nav-tabs > li > a:hover { color: var(--mui-accent-hover); background-color: #eef3ff; border-color: transparent; } .modern-ui .nav-tabs > li.active > a, .modern-ui .nav-tabs > li.active > a:hover, .modern-ui .nav-tabs > li.active > a:focus { color: var(--mui-accent-hover); border-top: 2px solid var(--mui-accent); border-left-color: var(--mui-border); border-right-color: var(--mui-border); font-weight: 600; }