/* ============ LIGHT (default) ============ */ :root { --white: #FFFFFF; /* neutral scale (light) */ --neutral-50: #F4F7FB; --neutral-100: #EEF3F9; --neutral-200: #E3EAF2; --neutral-300: #DDE5EE; --neutral-400: #C9D5E3; --neutral-500: #7A8BA1; --neutral-600: #55667C; --neutral-700: #34445A; --neutral-800: #1A2638; --neutral-900: #0B1726; --neutral-950: #050B14; /* primary scale — JetHost blue */ --primary-50: #E8F2FA; --primary-100: #D9ECF8; --primary-200: #B5D9F1; --primary-300: #7CC4EE; --primary-400: #3AA8EA; --primary-500: #2E93D6; --primary-600: #1A7BC0; --primary-700: #15649D; --primary-800: #124F7C; --primary-900: #0E3D60; --primary-950: #0A2B45; --primary: #1A7BC0; --primary-lifted: #15649D; /* hover */ --primary-accented: #124F7C; /* active/pressed */ --secondary: #55667C; --secondary-lifted: #34445A; --secondary-accented: #1A2638; --success: #00a63e; --success-lifted: #008236; --success-accented: #016630; --info: #1A7BC0; --info-lifted: #15649D; --info-accented: #124F7C; --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0; --warning: #f54a00; --warning-lifted: #ca3500; --warning-accented: #9f2d00; --error: #e7000b; --error-lifted: #c10007; --error-accented: #9f0712; --text: #0B1726; --text-lifted: #55667C; /* secondary text */ --text-muted: #5E6F85; /* hints, placeholders, meta — 5h: AA (README §13), was #7A8BA1 (3.2:1) */ --text-accented: #34445A; --text-inverted: #FFFFFF; /* text on --primary */ --border-muted: #E3EAF2; /* dividers inside cards, table rows */ --border: #DDE5EE; /* card + input borders */ --border-lifted: #C9D5E3; /* secondary button border */ --border-accented: #55667C; --bg: #F4F7FB; /* page */ --bg-muted: #FFFFFF; /* cards / surfaces */ --bg-lifted: #EEF3F9; /* active nav item, chips, inner tiles */ --bg-accented: #E3EAF2; --bg-inverted: #0B1726; /* Nexus aliases — the child's custom.css REPLACES nexus's, so they must be defined here. Values identical to templates/nexus/css/custom.css (9.0.9). They follow dark mode automatically. */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; /* JetHost extensions */ --jh-highlight: #B25E00; /* the "yellow" accent; amber in light for contrast */ --jh-primary-soft: #E8F2FA; /* selected option bg, info banners */ --jh-success-soft: #E6F6EC; --jh-success-text: #007A33; /* 5h: AA on the soft background (was #008236, 4.4:1) */ --jh-warning-soft: #FFF4EC; --jh-warning-border: #FFD9BF; --jh-warning-text: #ca3500; --jh-error-soft: #FDECEC; /* 1.8.0 (6.7): borders of the status banners on their soft backgrounds (warning uses --jh-warning-border) */ --jh-error-line: #F5C2C4; --jh-success-line: #B7E4C7; --jh-primary-line: #BFDAF0; /* 5h — accessibility (README §13: text ≥4.5:1 in both themes) */ --jh-error-text: var(--error-lifted); /* error/"danger" text */ --jh-primary-text: var(--primary-lifted); /* blue text on --jh-primary-soft (info badges, links in alerts) */ --jh-success-fill: var(--success-lifted); /* .btn-success fill with white text */ --jh-success-fill-hover: var(--success-accented); --jh-focus: var(--primary); /* focus-visible ring */ --jh-grid-line: var(--border-muted); --jh-shadow-pop: 0 20px 50px -20px rgba(11, 23, 38, .25); /* type / shape */ --font-sans: "Geologica", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --text-xs: .6875rem; /* 11px */ --text-sm: .75rem; /* 12px */ --text-md: .875rem; /* 14px — base UI size */ --text-lg: 1rem; /* 16px */ --rounding-sm: .5rem; /* 8px — buttons, inputs */ --rounding-md: .875rem; /* 14px — cards */ --rounding-lg: 1.125rem; /* 18px — hero / bento tiles */ --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; --letter-spacing: -0.01em; --disabled-opacity: 40%; } /* ============ DARK ============ */ [data-theme="dark"] { --neutral-50: #0C1524; --neutral-100: #111D30; --neutral-200: #16233A; --neutral-300: #1E2C42; --neutral-400: #2A3B57; --neutral-500: #5D6E85; --neutral-600: #93A3B8; --neutral-700: #B8C4D3; --neutral-800: #D5DEE9; --neutral-900: #E8EEF6; --neutral-950: #F5F8FC; --primary: #3AA8EA; --primary-lifted: #62BCF0; --primary-accented: #8FD0F5; --info: #3AA8EA; --info-lifted: #62BCF0; --info-accented: #8FD0F5; --success: #2BD47D; --success-lifted: #4FE096; --error: #ff4d55; --error-lifted: #ff7378; --text: #E8EEF6; --text-lifted: #93A3B8; --text-muted: #75869C; /* 5h: AA (was #5D6E85, 3.7:1) */ --text-accented: #B8C4D3; --text-inverted: #070D18; --border-muted: #16233A; --border: #1E2C42; --border-lifted: #2A3B57; --border-accented: #93A3B8; --bg: #070D18; --bg-muted: #0C1524; --bg-lifted: #111D30; --bg-accented: #16233A; --bg-inverted: #E8EEF6; --jh-highlight: #ffdf20; --jh-primary-soft: #0E2236; --jh-success-soft: #0C2A1C; --jh-success-text: #2BD47D; --jh-warning-soft: #1A0F05; --jh-warning-border: #5a2a08; --jh-warning-text: #ff8a4c; --jh-error-soft: #2A0E12; --jh-error-line: #5A1D22; --jh-success-line: #14532D; --jh-primary-line: #16466B; --jh-success-fill: var(--success); --jh-success-fill-hover: var(--success-lifted); --jh-shadow-pop: 0 20px 50px -20px rgba(0, 0, 0, .6); color-scheme: dark; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-md); letter-spacing: var(--letter-spacing); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-lifted); text-decoration: none !important;} /* ============ COMPONENTS ============ * Build all component styles below this line using ONLY var(--…) tokens. * See README.md §9 for every component spec and the Bootstrap/Nexus class mapping. */ .jh-dot { color: var(--primary); } .jh-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .jh-mono { font-family: var(--font-mono); } .jh-card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); padding: 22px; } .jh-grid-texture { background-image: linear-gradient(var(--jh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--jh-grid-line) 1px, transparent 1px); background-size: 44px 44px; } /* ============ CHROME — step 2 (header, sidebar, footer) ============ */ /* -- Header (logged-in) -- */ header.header.jh-header { background: var(--bg-muted); border-bottom: 1px solid var(--border-muted); } header.header.jh-header .topbar { background: var(--bg-lifted); color: var(--text-lifted); border-bottom: 1px solid var(--border-muted); } header.header.jh-header .topbar .btn, header.header.jh-header .topbar .active-client .btn, header.header.jh-header .topbar .active-client .input-group-text { color: var(--text-lifted); font-size: var(--text-sm); } header.header.jh-header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--border-lifted); } .jh-bar { display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 24px; } .jh-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--text); } .jh-logo:hover { color: var(--text); } .jh-logo-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--rounding-sm); background: var(--primary); color: var(--text-inverted); font-size: 15px; font-weight: 700; line-height: 1; } .jh-logo-word { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .jh-search { position: relative; flex: 1 1 auto; max-width: 420px; margin: 0; } .jh-search-input { width: 100%; height: 38px; padding: 0 52px 0 12px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--rounding-sm); font-family: var(--font-mono); font-size: 12px; transition: border-color .15s ease-out, box-shadow .15s ease-out; } .jh-search-input::placeholder { color: var(--text-muted); } .jh-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .jh-search-kbd { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 1px 6px; pointer-events: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; box-shadow: none; } .jh-bar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* 1.6.0: every top-bar control is 38px high (the toggle was ~28px) */ .jh-theme-toggle { display: inline-flex; align-items: stretch; gap: 2px; height: 38px; box-sizing: border-box; padding: 3px; background: var(--bg-lifted); border: 1px solid var(--border); border-radius: var(--rounding-sm); } .jh-theme-toggle button { display: inline-flex; align-items: center; padding: 0 12px; font: 600 12px/1 var(--font-sans); color: var(--text-lifted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; } .jh-theme-toggle button[aria-checked="true"] { color: var(--text); background: var(--bg-muted); box-shadow: 0 1px 2px rgba(11, 23, 38, .1); } [data-theme="dark"] .jh-theme-toggle button[aria-checked="true"] { background: var(--border-lifted); box-shadow: none; } .jh-icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; color: var(--text-lifted); border: 1px solid var(--border-lifted); border-radius: var(--rounding-sm); transition: background-color .15s ease-out, color .15s ease-out; } .jh-icon-btn:hover { color: var(--text); background: var(--bg-lifted); } .jh-icon-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; text-align: center; font: 600 11px/18px var(--font-mono); color: var(--text-inverted); background: var(--primary); border-radius: 999px; } .jh-header .btn.btn-primary { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; font-size: var(--text-md); font-weight: 600; white-space: nowrap; color: var(--text-inverted); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--rounding-sm); } .jh-header .btn.btn-primary:hover { color: var(--text-inverted); background: var(--primary-lifted); border-color: var(--primary-lifted); } .jh-header .btn.btn-primary:active { background: var(--primary-accented); border-color: var(--primary-accented); } .jh-account { flex-direction: row; margin: 0; } .jh-account > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: var(--text-md); font-weight: 500; color: var(--text); border-radius: var(--rounding-sm); } .jh-account > li > a:hover { color: var(--text); background: var(--bg-lifted); } .jh-header .dropdown-menu { padding: 6px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .jh-header .dropdown-menu li.dropdown-item { padding: 6px 4px; border-radius: 6px; } .jh-header .dropdown-menu .dropdown-item, .jh-header .dropdown-menu .dropdown-item a { color: var(--text); background: transparent; } .jh-header .dropdown-menu li.dropdown-item:hover { background: var(--bg-lifted); } .jh-header .dropdown-divider { border-top-color: var(--border-muted); } .jh-burger { display: none; flex: none; flex-direction: column; justify-content: space-between; width: 38px; height: 38px; padding: 11px 9px; background: transparent; border: 1px solid var(--border-lifted); border-radius: var(--rounding-sm); cursor: pointer; } .jh-burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; } /* -- Layout: sticky header + fixed sidebar, NO wrappers around the content -- An unbalanced in a page or module output cannot break the layout. */ body.jh-app { height: auto; min-height: 100%; padding-left: 220px; } /* Nexus sets height:100% → breaks sticky */ body.jh-app header.header.jh-header { position: sticky; z-index: 1030; top: 0; margin-left: -220px; } .jh-sidebar { position: fixed; z-index: 1020; top: var(--jh-header-h, 68px); bottom: 0; left: 0; width: 220px; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 12px 16px; background: var(--bg); border-right: 1px solid var(--border-muted); } .jh-backdrop { display: none; } .jh-nav-list, .jh-subnav { margin: 0; padding: 0; list-style: none; } .jh-nav-list { display: flex; flex-direction: column; gap: 2px; } .jh-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: var(--text-md); color: var(--text-lifted); border-radius: var(--rounding-sm); transition: background-color .15s ease-out, color .15s ease-out; } .jh-nav-item:hover { color: var(--text); background: var(--bg-lifted); } .jh-nav-item.is-active { color: var(--text); font-weight: 500; background: var(--bg-lifted); } .jh-nav-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .jh-subnav { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 1px solid var(--border-muted); } .jh-subnav a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 13px; color: var(--text-muted); border-radius: 6px; } .jh-subnav a:hover { color: var(--text); background: var(--bg-lifted); } .jh-sidebar-foot { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--border-muted); } .jh-sidebar-foot-label { font-size: var(--text-sm); color: var(--text-muted); } .jh-sidebar-foot-value { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-md); color: var(--text); } /* 1.1.0: theme version label (admins only), pinned to the bottom like the credit block */ .jh-version { margin-top: auto; padding: 10px 12px 4px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); } .jh-sidebar-foot + .jh-version { margin-top: 0; } .jh-header a:focus-visible, .jh-header button:focus-visible, .jh-sidebar a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* 1.6.2: Nexus' Bootstrap rings every focused button (button:focus, 1px dotted in Firefox), also after a tap/click — e.g. ☰ when the menu closes and focus returns to it. Only keyboard focus keeps the ring above. */ .jh-header button:focus:not(:focus-visible), .jh-sidebar button:focus:not(:focus-visible) { outline: 0; } /* -- Content area (logged-in) -- */ .jh-app section#main-body { min-height: calc(100vh - 260px); padding: 0 0 28px; background-color: var(--bg); } .jh-app .master-breadcrumb, .jh-app .master-breadcrumb .breadcrumb { background: transparent; } .jh-app .master-breadcrumb .breadcrumb { padding: 20px 0 8px; font-size: 13px; } .jh-app .master-breadcrumb .breadcrumb a { color: var(--text-muted); } .jh-app .master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--text); } .jh-app .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } .jh-app .master-breadcrumb > .container, .jh-app section#main-body > .container, .jh-app footer.footer > .container { max-width: none; padding-left: 32px; padding-right: 32px; } /* -- Footer (all pages) -- */ footer.footer { color: var(--text-lifted); background-color: var(--bg); border-top: 1px solid var(--border-muted); } footer.footer .nav-link { color: var(--text-lifted); } footer.footer .nav-link:hover { color: var(--text); } footer.footer .btn-outline-light { color: var(--text-lifted); border-color: var(--border); } footer.footer .btn-outline-light:hover { color: var(--text); background: var(--bg-lifted); } footer.footer .copyright { color: var(--text-muted); } /* -- Responsive -- */ @media (max-width: 1023.98px) { body.jh-app { padding-left: 0; } body.jh-app header.header.jh-header { margin-left: 0; } .jh-burger { display: inline-flex; } .jh-sidebar { z-index: 1045; top: 0; width: 260px; background: var(--bg-muted); transform: translateX(-100%); transition: transform .2s ease-out; } html.jh-drawer-open .jh-sidebar { transform: none; box-shadow: var(--jh-shadow-pop); } html.jh-drawer-open .jh-backdrop { display: block; position: fixed; z-index: 1040; inset: 0; background: var(--bg-inverted); opacity: .35; } .jh-app .master-breadcrumb > .container, .jh-app section#main-body > .container, .jh-app footer.footer > .container { padding-left: 20px; padding-right: 20px; } } @media (max-width: 767.98px) { .jh-bar { gap: 10px; padding: 0 14px; } .jh-search-kbd { display: none; } /* the bar's «+ New service» is hidden in the 1.6.1 block (this selector lost to .jh-header .btn.btn-primary) */ } @media (max-width: 575.98px) { .jh-logo-word { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .jh-sidebar, .jh-nav-item, .jh-search-input, .jh-icon-btn { transition: none; } } /* ============ COMPONENTS — step 3a: surfaces, text, buttons ============ * Maps Bootstrap 4 / Nexus classes to the tokens so that EVERY page (and module output) * works in light and dark without a template override. */ /* -- Text -- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text); letter-spacing: -0.02em; } .text-muted { color: var(--text-muted) !important; } .text-dark, .text-body { color: var(--text) !important; } hr { border-top-color: var(--border-muted); } .bg-white { background-color: var(--bg-muted) !important; } .bg-light { background-color: var(--bg-lifted) !important; } /* -- Cards -- */ .card, .mc-promo-manage, .mc-promo-login { color: var(--text); background-color: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .card-header, .card-footer { background-color: transparent; border-color: var(--border-muted); } .card-header:first-child { border-radius: var(--rounding-md) var(--rounding-md) 0 0; } .card-footer:last-child { border-radius: 0 0 var(--rounding-md) var(--rounding-md); } .client-home-cards .card-header { background-color: transparent; } .sidebar .card-footer { background-color: var(--bg-lifted); } .card-title { color: var(--text); } /* Card title = mono micro-label "// TITLE" (README §9) */ .card-header .card-title, .sidebar .card-sidebar .panel-title { font-family: var(--font-mono); font-size: 12px !important; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .card-header .card-title::before { content: "// "; } .card-header .card-title > i:not(.card-minimise) { display: none; } /* buttons inside the card title: regular font, not the mono label */ .card-header .card-title .btn { font-family: var(--font-sans); font-size: 12px; letter-spacing: normal; text-transform: none; } .card-minimise { color: var(--text-muted); } /* -- Client home tiles (Nexus) -- */ .tiles { overflow: hidden; border: 1px solid var(--border); border-radius: var(--rounding-md); } .tiles .tile { background-color: var(--bg-muted); border-right-color: var(--border-muted); transition: background-color .15s ease-out; } .tiles .tile:hover { background-color: var(--bg-lifted); } .tiles div:nth-child(1) > .tile, .tiles div:nth-child(2) > .tile { border-bottom-color: var(--border-muted); } .tiles .tile .stat { color: var(--text); font-weight: 700; letter-spacing: -0.03em; } .tiles .tile .title { font-family: var(--font-mono); font-weight: 400; letter-spacing: .04em; color: var(--text-lifted); } .tiles .tile i, .tiles .tile:hover i { color: var(--border-lifted); } /* -- List groups -- */ .list-group-item { color: var(--text); background-color: transparent; border-color: var(--border-muted); } .list-group-item-action { color: var(--text-lifted); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--text); background-color: var(--bg-lifted); } .list-group-item-action:active { color: var(--text); background-color: var(--bg-accented); } .list-group-item.active { z-index: 2; font-weight: 500; color: var(--text); background-color: var(--bg-lifted); border-color: var(--border-muted); } .list-group-item.disabled, .list-group-item:disabled { color: var(--text-muted); background-color: transparent; } /* -- Buttons: base -- */ .btn { padding: 10px 16px; font-size: var(--text-md); font-weight: 500; line-height: 1.4; border-radius: var(--rounding-sm); transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; } .btn-sm, .btn-group-sm > .btn { padding: 7px 12px; font-size: 13px; border-radius: var(--rounding-sm); } .btn-lg, .btn-group-lg > .btn { padding: 14px 18px; font-size: 15px; border-radius: var(--rounding-sm); } .btn:focus, .btn.focus, .btn:not(:disabled):not(.disabled):active:focus { box-shadow: none; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn.disabled, .btn:disabled { opacity: var(--disabled-opacity); } /* exceptions to the new base: split dropdown and the Nexus strip above the header */ .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split { padding-left: 10px; padding-right: 10px; } header.header .topbar .btn { padding: 4px 8px; font-weight: 400; } .btn-xs, .btn-group-xs > .btn { padding: 4px 10px; font-size: 12px; line-height: 1.4; } /* Primary */ .btn-primary { font-weight: 600; color: var(--text-inverted); background: var(--primary); border-color: var(--primary); border-radius: var(--rounding-sm); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { color: var(--text-inverted); background: var(--primary-lifted); border-color: var(--primary-lifted); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: var(--text-inverted); background: var(--primary-accented); border-color: var(--primary-accented); } .btn-primary.disabled, .btn-primary:disabled { color: var(--text-inverted); background: var(--primary); border-color: var(--primary); } /* Secondary: transparent with border (default / secondary / light / outline-*) */ .btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, body #main-body .btn-outline-primary, body .sidebar .btn-default, .client-home-cards .card-header .btn { color: var(--text); background-color: transparent; border: 1px solid var(--border-lifted); border-radius: var(--rounding-sm); } .btn-default:hover, .btn-default:focus, .btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-light:focus, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-dark:hover, .btn-outline-dark:focus, body #main-body .btn-outline-primary:hover, body .sidebar .btn-default:hover, .client-home-cards .card-header .btn:hover { color: var(--text); background-color: var(--bg-lifted); border-color: var(--border-lifted); } .btn-default:not(:disabled):not(.disabled):active, .btn-default.active, .open > .dropdown-toggle.btn-default, .show > .btn-default.dropdown-toggle, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle, .btn-light:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--text); background-color: var(--bg-accented); border-color: var(--border-lifted); } /* Inverted ("Log in") */ .btn-dark { color: var(--bg); background-color: var(--text); border-color: var(--text); } .btn-dark:hover, .btn-dark:focus { color: var(--bg); background-color: var(--text-accented); border-color: var(--text-accented); } /* Semantic */ .btn-success { color: var(--text-inverted); background-color: var(--jh-success-fill); border-color: var(--jh-success-fill); } .btn-success:hover, .btn-success:focus { color: var(--text-inverted); background-color: var(--jh-success-fill-hover); border-color: var(--jh-success-fill-hover); } .btn-danger { color: var(--text-inverted); background-color: var(--error); border-color: var(--error); } .btn-danger:hover, .btn-danger:focus { color: var(--text-inverted); background-color: var(--error-lifted); border-color: var(--error-lifted); } .btn-info { color: var(--text-inverted); background-color: var(--info); border-color: var(--info); } .btn-info:hover, .btn-info:focus { color: var(--text-inverted); background-color: var(--info-lifted); border-color: var(--info-lifted); } .btn-warning { color: #fff; background-color: var(--warning-lifted); border-color: var(--warning-lifted); } /* only for paying a balance due; 5h: -lifted for AA with white */ .btn-warning:hover, .btn-warning:focus { color: #fff; background-color: var(--warning-accented); border-color: var(--warning-accented); } .btn-outline-success { color: var(--jh-success-text); border-color: var(--success); } .btn-outline-danger { color: var(--jh-error-text); border-color: var(--error); } .btn-outline-info { color: var(--jh-primary-text); border-color: var(--info); } .btn-outline-warning { color: var(--jh-warning-text); border-color: var(--warning); } .btn-outline-success:hover { color: var(--text-inverted); background-color: var(--jh-success-fill); } .btn-outline-danger:hover { color: var(--text-inverted); background-color: var(--error); } .btn-outline-info:hover { color: var(--text-inverted); background-color: var(--info); } .btn-outline-warning:hover { color: #fff; background-color: var(--warning-lifted); } /* Link-action */ .btn-link, body .btn-link { font-weight: 500; color: var(--primary); background: transparent; border-color: transparent; } .btn-link:hover, .btn-link:focus { color: var(--primary-lifted); text-decoration: none; } /* Close button (modals/alerts) */ .close { color: var(--text); text-shadow: none; opacity: .6; } .close:hover { color: var(--text); opacity: 1; } @media (prefers-reduced-motion: reduce) { .btn, .tiles .tile { transition: none; } } /* -- Overrides for specific Nexus spots (step 3a, fix) -- * Nexus uses .btn-success with --bg-inverted as the "primary action" and has * hardcoded white on home-page cards. Same selectors as Nexus so that ours win. */ /* Nexus .btn-success = primary action → the mock's primary */ body .sidebar .btn-success, body .primary-content .client-home-cards .card .btn-success, body .primary-content .client-home-cards .mc-promo-manage .btn-success, body .primary-content .client-home-cards .mc-promo-login .btn-success, body .primary-content .btn-success.btn-lg[name=enable], body .primary-content .btn-group-lg > .btn-success[name=enable].btn, body #order-standard_cart .products .product footer .btn-order-now, body #order-standard_cart .text-right .btn-checkout { color: var(--text-inverted); background: var(--primary); border-color: var(--primary); border-radius: var(--rounding-sm); } body .sidebar .btn-success:hover, body .primary-content .client-home-cards .card .btn-success:hover, body .primary-content .client-home-cards .mc-promo-manage .btn-success:hover, body .primary-content .client-home-cards .mc-promo-login .btn-success:hover, body .primary-content .btn-success.btn-lg[name=enable]:hover, body .primary-content .btn-group-lg > .btn-success[name=enable].btn:hover, body #order-standard_cart .products .product footer .btn-order-now:hover, body #order-standard_cart .text-right .btn-checkout:hover, body #order-standard_cart .text-right .btn-checkout:focus { color: var(--text-inverted); background: var(--primary-lifted); border-color: var(--primary-lifted); } /* Domain search on the home page: Register = primary, Transfer = secondary */ body #frmDomainHomepage #btnTransfer { color: var(--text); background: transparent; border-color: var(--border-lifted); } body #frmDomainHomepage #btnTransfer:hover, body #frmDomainHomepage #btnTransfer:focus, body #frmDomainHomepage #btnTransfer:active { color: var(--text); background: var(--bg-lifted); border-color: var(--border-lifted); } /* Home-page cards: button in the title = secondary, footer without white */ body .primary-content .client-home-cards .card .card-header .btn, body .primary-content .client-home-cards .mc-promo-manage .card-header .btn, body .primary-content .client-home-cards .mc-promo-login .card-header .btn { color: var(--text); background: transparent; border: 1px solid var(--border-lifted); border-radius: var(--rounding-sm); } body .primary-content .client-home-cards .card .card-header .btn:hover, body .primary-content .client-home-cards .mc-promo-manage .card-header .btn:hover, body .primary-content .client-home-cards .mc-promo-login .card-header .btn:hover { color: var(--text); background: var(--bg-lifted); border-color: var(--border-lifted); } body .primary-content .client-home-cards .card .card-footer, body .primary-content .client-home-cards .mc-promo-manage .card-footer, body .primary-content .client-home-cards .mc-promo-login .card-footer { background: transparent; } body .primary-content .client-home-cards .card .card-footer .btn-view-more { color: var(--primary); } /* -- List rows in home-page cards (hardcoded gray in Nexus) -- */ .client-home-cards .list-group { border-top-color: var(--border-muted) !important; border-bottom-color: var(--border-muted) !important; } .client-home-cards .list-group .list-group-item { border-bottom-color: var(--border-muted); } .view-ticket .card-body { border-bottom-color: var(--border-muted); } /* ============ COMPONENTS — step 3b: forms, tables, pagination ============ */ /* -- Labels & help text -- */ label, .control-label, .col-form-label { font-size: 13px; font-weight: 500; color: var(--text-lifted); } .form-group > label, .form-group > .control-label { margin-bottom: 7px; } .form-text, .help-block, small.form-text { font-size: 12px; color: var(--text-muted); } /* -- Inputs -- */ .form-control, .custom-select { height: auto; padding: 12px 14px; font-size: var(--text-md); line-height: 1.4; color: var(--text); background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--rounding-sm); transition: border-color .15s ease-out, box-shadow .15s ease-out; } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control:focus, .custom-select:focus { color: var(--text); background-color: var(--bg); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); outline: 0; } .form-control:disabled, .form-control[readonly], .custom-select:disabled { color: var(--text-muted); background-color: var(--bg-lifted); } textarea.form-control { min-height: 140px; } .form-control-sm, .input-group-sm > .form-control, .input-group-sm > .custom-select { height: auto; padding: 7px 10px; font-size: 13px; } .form-control-lg, .input-group-lg > .form-control, .input-group-lg > .custom-select { height: auto; padding: 14px 16px; font-size: 15px; } .input-group-sm > .form-control:not(textarea), .input-group-lg > .form-control:not(textarea), .input-group-sm > .custom-select, .input-group-lg > .custom-select { height: auto; } /* Bootstrap's .custom-select has a dark SVG arrow → invisible in dark. Native arrow, follows color-scheme */ .custom-select { padding-right: 14px; background-image: none; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .input-group-text { padding: 12px 14px; font-size: var(--text-md); color: var(--text-lifted); background-color: var(--bg-lifted); border-color: var(--border); } /* -- Validation errors (Bootstrap 4 + legacy WHMCS .has-error) -- */ .form-control.is-invalid, .was-validated .form-control:invalid, .has-error .form-control { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); background-image: none; } .form-control.is-valid, .was-validated .form-control:valid { border-color: var(--success); background-image: none; } .invalid-feedback, .has-error .help-block, .field-error-msg { font-size: 12px; color: var(--jh-error-text); } .has-error label, .has-error .control-label { color: var(--jh-error-text); } /* -- Checkbox / radio / switch -- */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } .custom-control-label { color: var(--text); } .custom-control-label::before { background-color: var(--bg); border: 1px solid var(--border-lifted); } .custom-checkbox .custom-control-label::before { border-radius: 5px; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--primary); } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--jh-primary-soft); border-color: var(--primary); } .custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label { color: var(--text-muted); } .custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before { background-color: var(--bg-lifted); } .custom-switch .custom-control-label::before { background-color: var(--border-lifted); border-color: var(--border-lifted); } .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); } .custom-switch .custom-control-label::after, .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; } /* knob: white in every theme (README §5) */ /* -- Domain search (home / card) -- */ .home-domain-search .input-group-wrapper { background-color: var(--bg); border-color: var(--border); } .home-domain-search .input-group-wrapper .form-control { color: var(--text); } .home-domain-search .tld-logos { color: var(--text-muted); } /* -- Tables (Bootstrap) -- */ .table { color: var(--text); } .table th, .table td { border-top-color: var(--border-muted); } .table thead th { border-bottom: 1px solid var(--border-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .table tbody + tbody { border-top-color: var(--border-muted); } .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; } .table-hover tbody tr:hover { color: var(--text); background-color: var(--bg-lifted); } .table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border-muted); } .table .thead-light th { color: var(--text-lifted); background-color: var(--bg-lifted); border-color: var(--border-muted); } .table .thead-dark th { color: var(--text); background-color: var(--bg-accented); border-color: var(--border-muted); } /* -- DataTables lists (services, domains, invoices, tickets) -- */ .dataTables_wrapper table.table-list, body .dataTables_wrapper table.table-list { background-color: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } table.table-list thead th { padding: 12px 20px; color: var(--text-lifted); background-color: var(--bg-muted); border-bottom: 1px solid var(--border-muted); } .dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { color: var(--text); background-color: var(--bg-lifted); } .table-list > tbody > tr > td { padding: 14px 20px; background-color: var(--bg-muted); border-top-color: var(--border-muted); } .table-list > tbody > tr:hover > td { background-color: var(--bg-lifted); } .table-list > tbody > tr > td a.border-left { border-left-color: var(--border-muted); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { font-size: 13px; font-weight: 400; color: var(--text-muted); } body .dataTables_wrapper .dataTables_filter label .form-control { background: var(--bg); } /* -- Pagination -- */ .page-link { color: var(--text-lifted); background-color: transparent; border-color: var(--border); } .page-link:hover { color: var(--text); background-color: var(--bg-lifted); border-color: var(--border); } .page-link:focus { box-shadow: none; outline: 2px solid var(--primary); outline-offset: 2px; } .page-item.active .page-link, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { color: var(--bg); background-color: var(--text); border-color: var(--text); } .page-item.disabled .page-link { color: var(--text-muted); background-color: transparent; border-color: var(--border); } @media (prefers-reduced-motion: reduce) { .form-control, .custom-select { transition: none; } } /* ============ COMPONENTS — step 3c: badges, alerts, dropdowns, modals, tabs, popovers ============ */ /* -- Status badges (README §9): pill + dot, colours via --jh-badge-* -- */ .label { --jh-badge-fg: var(--text-lifted); --jh-badge-bg: var(--bg-lifted); display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-bottom: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: middle; color: var(--jh-badge-fg); background-color: var(--jh-badge-bg); border-radius: 999px; } .label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; } .div-service-status .label { display: inline-flex; color: var(--jh-badge-fg); } /* ok */ .label-success, .status-active, .status-paid, .status-accepted { --jh-badge-fg: var(--jh-success-text); --jh-badge-bg: var(--jh-success-soft); } /* warn: pending items, balances due, expiries */ .label-warning, .status-pending, .status-grace, .status-pending-transfer, .status-unpaid, .status-customer-reply { --jh-badge-fg: var(--jh-warning-text); --jh-badge-bg: var(--jh-warning-soft); } /* err */ .label-danger, .status-suspended, .status-fraud, .status-expired, .status-redemption, .status-overdue, .status-collections { --jh-badge-fg: var(--jh-error-text); --jh-badge-bg: var(--jh-error-soft); } /* info */ .label-info, .label-primary, .status-pending-registration, .status-payment-pending, .status-open, .status-answered, .status-inprogress, .status-onhold, .status-delivered, #tableDomainsList .status-pending { --jh-badge-fg: var(--jh-primary-text); --jh-badge-bg: var(--jh-primary-soft); } /* mute */ .label-default, .label-secondary, .status-terminated, .status-cancelled, .status-completed, .status-transferred-away, .status-refunded, .status-closed, .status-lost, .status-dead, .status-draft { --jh-badge-fg: var(--text-lifted); --jh-badge-bg: var(--bg-lifted); } /* tickets: WHMCS sets the colour inline from the admin settings → keep its background, change only the shape */ .label.status-custom { color: var(--white); } /* -- Badges (counts, tags) -- */ .badge { padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-lifted); background-color: var(--bg-lifted); border: 0; border-radius: 999px; } .badge-primary, .badge-info { color: var(--primary); background-color: var(--jh-primary-soft); } .badge-success { color: var(--jh-success-text); background-color: var(--jh-success-soft); } .badge-warning { color: var(--jh-warning-text); background-color: var(--jh-warning-soft); } .badge-danger { color: var(--jh-error-text); background-color: var(--jh-error-soft); } .badge-secondary, .badge-light { color: var(--text-lifted); background-color: var(--bg-lifted); } .badge-dark { color: var(--bg); background-color: var(--text); } a.badge:hover, a.badge:focus { color: var(--text); background-color: var(--bg-accented); } /* -- Alerts / flash messages: soft background + 10px dot in the status colour -- */ .alert { --jh-alert-bg: var(--bg-lifted); --jh-alert-bd: var(--border); --jh-alert-dot: var(--text-muted); position: relative; padding: 14px 20px 14px 42px; font-size: var(--text-md); color: var(--text); background-color: var(--jh-alert-bg); border: 1px solid var(--jh-alert-bd); border-radius: 12px; } .alert::before { content: ""; position: absolute; top: 19px; left: 20px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--jh-alert-dot); } .alert:has(form) { background-color: var(--jh-alert-bg); } .alert-success { --jh-alert-bg: var(--jh-success-soft); --jh-alert-bd: var(--jh-success-soft); --jh-alert-dot: var(--jh-success-text); } .alert-warning { --jh-alert-bg: var(--jh-warning-soft); --jh-alert-bd: var(--jh-warning-border); --jh-alert-dot: var(--jh-warning-text); } .alert-danger { --jh-alert-bg: var(--jh-error-soft); --jh-alert-bd: var(--jh-error-soft); --jh-alert-dot: var(--error); } .alert-info, .alert-primary { --jh-alert-bg: var(--jh-primary-soft); --jh-alert-bd: var(--jh-primary-soft); --jh-alert-dot: var(--primary); } .alert a, .alert .alert-link { font-weight: 600; color: var(--jh-primary-text); } .alert-warning a, .alert-warning .alert-link { color: var(--jh-warning-text); } .alert-danger a, .alert-danger .alert-link { color: var(--jh-error-text); } .alert hr { border-top-color: var(--jh-alert-bd); } .alert .close { top: 2px; } /* -- Dropdowns (all pages: cPanel split buttons, action menus, etc.) -- */ .dropdown-menu { padding: 6px; color: var(--text); background-color: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .dropdown-item { padding: 7px 10px; font-size: var(--text-md); color: var(--text); border-radius: 6px; } .dropdown-item:hover, .dropdown-item:focus { color: var(--text); background-color: var(--bg-lifted); } .dropdown-item.active, .dropdown-item:active { color: var(--text); background-color: var(--bg-accented); } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--text-muted); background-color: transparent; } .dropdown-divider { border-top-color: var(--border-muted); } .dropdown-header { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } /* -- Modals -- */ .modal-content { color: var(--text); background-color: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-lg); box-shadow: var(--jh-shadow-pop); } .modal-content .modal-header { border-bottom-color: var(--border-muted); border-radius: var(--rounding-lg) var(--rounding-lg) 0 0; } .modal-footer { border-top-color: var(--border-muted); } .modal-title { font-weight: 600; letter-spacing: -0.02em; } /* -- Tabs (README §9) & pills -- */ .nav-tabs { border-bottom: 1px solid var(--border-muted); } .nav-tabs .nav-link { padding: 10px 14px; font-size: var(--text-md); color: var(--text-lifted); background: transparent; border: 0; border-radius: 0; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--text); border: 0; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { font-weight: 500; color: var(--text); background-color: transparent; border: 0; box-shadow: inset 0 -2px 0 var(--primary); } .nav-pills .nav-link { color: var(--text-lifted); border-radius: 999px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bg); background-color: var(--text); } /* -- Popovers (notifications) & tooltips -- */ .popover { background-color: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .popover-header { color: var(--text); background-color: var(--bg-lifted); border-bottom-color: var(--border-muted); } .popover-body { color: var(--text); } .bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--border); } .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--bg-muted); } .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--border); } .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--bg-muted); } .tooltip-inner { font-size: 12px; color: var(--bg); background-color: var(--text); border-radius: 6px; } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--text); } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--text); } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--text); } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--text); } /* ============ PAGES — step 4a: shared page elements, dashboard, services ============ */ /* -- Page heading: title with blue dot (README §7) -- */ .jh-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 20px; } .jh-eyebrow { margin-bottom: 2px; font-size: 13px; color: var(--text-muted); } .jh-title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); } .jh-pagehead-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* -- Card / bento -- */ .jh-card { display: flex; flex-direction: column; min-width: 0; color: var(--text); } .jh-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .jh-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; } .jh-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; } .jh-span-7 { grid-column: span 7; } .jh-span-5 { grid-column: span 5; } .jh-span-4 { grid-column: span 4; } .jh-card.is-warn { background: var(--jh-warning-soft); border-color: var(--jh-warning-border); } .jh-card.is-warn .jh-label { color: var(--jh-warning-text); } .jh-stat-num { margin: 10px 0 6px; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text); } .jh-stat-meta { font-size: 13px; color: var(--text-lifted); } .jh-tile-sublink { margin-top: 10px; } .jh-link-action { font-size: 13px; font-weight: 500; color: var(--primary); } .jh-link-action span { display: inline-block; transition: transform .15s ease-out; } .jh-link-action:hover span { transform: translateX(2px); } .jh-empty-text { margin: 8px 0 14px; font-size: 15px; color: var(--text-lifted); } /* -- Featured service + usage bars -- */ .jh-svc-name { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--text); } .jh-svc-name:hover { color: var(--primary); } .jh-svc-meta { margin-top: 3px; font-size: 12px; color: var(--text-muted); } .jh-usage { display: grid; gap: 14px; } .jh-usage-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--text-lifted); } .jh-usage-row .jh-mono { color: var(--text); } .jh-usage-track { height: 6px; overflow: hidden; background: var(--border-muted); border-radius: 3px; } .jh-usage-fill { height: 100%; background: var(--primary); border-radius: 3px; } .jh-usage-fill.is-high { background: var(--jh-highlight); } .jh-usage-fill.is-err { background: var(--error); } /* -- List (domain expiries) -- */ .jh-list { margin: 0; padding: 0; list-style: none; } .jh-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--border-muted); } .jh-list li:last-child { border-bottom: 0; } .jh-list-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .jh-list-main:hover { color: var(--primary); } .jh-days { font-family: var(--font-mono); text-align: right; color: var(--text-lifted); } .jh-days.is-warn { color: var(--jh-warning-text); } .jh-days.is-err { color: var(--jh-error-text); } .jh-renew { font-size: 12px; text-align: right; color: var(--text-muted); } /* -- Ticket tile -- */ .jh-ticket-title { display: block; margin: 10px 0 8px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); } .jh-ticket-title:hover { color: var(--primary); } .jh-ticket-status { margin-bottom: 8px; } /* -- Module panels below the bento -- */ .jh-home-panels { margin-top: 4px; } /* -- Lists with status pills (services etc.) -- */ .jh-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .jh-pills { display: flex; flex-wrap: wrap; gap: 8px; } .jh-pill { padding: 7px 12px; font-size: 13px; line-height: 1.2; color: var(--text-lifted); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; } .jh-pill:hover { color: var(--text); background: var(--bg-lifted); } .jh-pill.is-active { color: var(--bg); background: var(--text); border-color: var(--text); } .jh-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .jh-filter-input { width: 290px; max-width: 100%; padding: 9px 12px; } .jh-list-page .dataTables_filter { display: none; } /* the filter is now .jh-filter-input */ .jh-list-page table.table-list thead th { text-align: left; } .jh-list-page table.table-list tbody tr { cursor: pointer; } .jh-list-page .jh-col-ssl { width: 44px; } .jh-cell-title { display: block; font-weight: 500; color: var(--text); } .jh-cell-sub { display: block; font-size: 13px; color: var(--text-muted); } a.jh-cell-sub:hover { color: var(--primary); } /* -- Responsive for the above -- */ @media (max-width: 1279.98px) { .jh-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .jh-span-7, .jh-span-5 { grid-column: span 6; } .jh-span-4 { grid-column: span 3; } } @media (max-width: 767.98px) { .jh-bento { grid-template-columns: minmax(0, 1fr); } .jh-span-7, .jh-span-5, .jh-span-4 { grid-column: auto; } .jh-filter-input { width: 100%; } .jh-title { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .jh-link-action span, .jh-pill { transition: none; } } /* ============ PAGES — step 4b: domains, invoices, tickets + fixes ============ */ /* -- Table cells left-aligned (Nexus centres them) -- */ .jh-list-page .dataTables_wrapper table.table-list td, .jh-list-page .dataTables_wrapper table.table-list th { text-align: left; } .jh-list-page .dataTables_wrapper table.table-list td.jh-col-action { text-align: right; white-space: nowrap; } .jh-list-page .dataTables_wrapper table.table-list td.jh-col-ssl { text-align: center; } .jh-list-page .table-list input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; cursor: pointer; } .jh-cell-domain { color: var(--text); } a.jh-cell-domain:hover { color: var(--primary); } .jh-label-sub { margin-left: 6px; } .ticket-subject.unread { font-weight: 600; } /* -- Summary tiles (invoices) -- */ .jh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .jh-stats .jh-card-foot { padding-top: 12px; } /* -- Bulk actions bar (domains) -- */ .jh-bulkbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 16px; background: var(--jh-primary-soft); border-radius: 10px; } .jh-bulkbar[hidden] { display: none; } .jh-bulkbar-count { font-size: var(--text-md); font-weight: 600; color: var(--text); } .jh-bulkbar-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; } .jh-bulkbar-actions a { font-size: var(--text-md); font-weight: 500; color: var(--primary); } .jh-bulkbar-actions a:hover { color: var(--primary-lifted); } /* -- Switch indicator (auto-renew in the list; display only) -- */ .jh-switch { position: relative; display: inline-block; width: 36px; height: 20px; vertical-align: middle; background: var(--border-lifted); border-radius: 999px; } .jh-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s ease-out; } /* knob: white (README §5) */ .jh-switch.is-on { background: var(--primary); } .jh-switch.is-on::after { transform: translateX(16px); } /* -- Sidebar: current sub-item -- */ .jh-subnav a.is-current { font-weight: 500; color: var(--text); } @media (max-width: 1023.98px) { .jh-stats { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .jh-switch::after { transition: none; } } /* ============ PAGES — step 4c: ticket, service/domain details ============ */ /* -- Detail pages: Nexus panels in the right column (and below the content on mobile) -- */ body.jh-context-right #main-body > .container > .row > .col-lg-4 { order: 2; } /* -- Heading: badge next to the title + meta line -- */ .jh-title .label { margin-left: 8px; font-size: 12px; letter-spacing: 0; vertical-align: middle; } .jh-meta { margin-top: 6px; font-size: 13px; color: var(--text-muted); } /* -- Ticket thread -- */ .jh-thread { display: grid; gap: 14px; margin-bottom: 20px; } .jh-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 14px; } .jh-avatar { display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--text); background: var(--bg-lifted); border: 1px solid var(--border); border-radius: 50%; } .jh-avatar.is-staff { color: var(--text-inverted); background: var(--primary); border-color: var(--primary); } /* initial letter without server-side processing (safe for Greek/UTF-8): the name is hidden, only ::first-letter shows */ .jh-avatar span { display: block; max-width: 36px; overflow: hidden; font-size: 0; line-height: 1; white-space: nowrap; } .jh-avatar span::first-letter { font-size: 14px; } .jh-msg-card { min-width: 0; padding: 16px 20px; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .jh-msg.is-staff .jh-msg-card { padding: 15px 19px; border: 2px solid var(--primary); } /* README: staff replies */ .jh-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 8px; font-size: 13px; } .jh-msg-name { font-weight: 600; color: var(--text); } .jh-msg-role { color: var(--text-muted); } .jh-msg-date { margin-left: auto; font-size: 12px; color: var(--text-muted); } .jh-msg-body { font-size: var(--text-md); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; } .jh-msg-body p:last-child { margin-bottom: 0; } .jh-msg-ip { margin-top: 12px; padding-top: 10px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-muted); } .jh-msg-rating { margin-top: 10px; } .jh-msg-card .attachments { margin-top: 12px; padding-top: 12px; font-size: 13px; border-top: 1px solid var(--border-muted); } .jh-msg-card .attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } .jh-msg-card .attachment-list li span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--text-lifted); border: 1px solid var(--border); border-radius: var(--rounding-sm); } .jh-msg-card .attachment-list a:hover span { color: var(--text); background: var(--bg-lifted); } .jh-msg-card .attachment-list figure { margin: 0; font-size: 14px; line-height: 1; } .ticket-reply .rating span.star:before, .ticket-reply .rating-done span.star:before { color: var(--border-lifted); } .ticket-reply .rating span.star:hover:before, .ticket-reply .rating span.star:hover ~ span.star:before, .ticket-reply .rating-done span.star.active:before { color: var(--jh-highlight); } .jh-composer .card-body { padding: 20px 22px; } .jh-composer .jh-label { margin-bottom: 12px; } .jh-composer-actions { display: flex; justify-content: flex-end; gap: 10px; } /* -- Markdown content (messages, preview, articles) -- */ .md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { color: var(--text); } .md-preview pre, .markdown-content pre { color: var(--text); background-color: var(--bg-lifted); border-radius: var(--rounding-sm); } .md-preview code, .markdown-content code { font-family: var(--font-mono); color: var(--text); } .md-preview blockquote, .markdown-content blockquote { color: var(--text-lifted); border-left-color: var(--border); } .md-preview table, .markdown-content table { background-color: transparent; border-color: var(--border-muted); } .md-preview table > thead > tr > th, .markdown-content table > thead > tr > th { background-color: var(--bg-lifted); border-color: var(--border-muted); } .md-preview table > tbody > tr > td, .markdown-content table > tbody > tr > td { border-color: var(--border-muted); } /* -- Markdown editor (bootstrap-markdown: has its own !important rules) -- */ .md-editor, div.md-editor.active { background: var(--bg); border: 1px solid var(--border) !important; border-radius: var(--rounding-md); box-shadow: none !important; } div.md-editor.active { border-color: var(--primary) !important; box-shadow: 0 0 0 1px var(--primary) !important; } .md-editor > .md-header, .md-editor .md-footer, .md-editor > .btn-toolbar { background: var(--bg-lifted) !important; } .md-editor > .md-header { border-radius: var(--rounding-md) var(--rounding-md) 0 0; } .md-editor .md-footer { font-size: 12px; color: var(--text-muted); border-radius: 0 0 var(--rounding-md) var(--rounding-md); } .md-editor > textarea.markdown-editor, .md-editor > .md-preview, .md-editor > textarea, .md-editor > textarea:focus { font-family: var(--font-sans); color: var(--text); background-color: var(--bg) !important; border-top: 1px solid var(--border-muted) !important; border-bottom: 1px solid var(--border-muted) !important; } .md-editor .md-controls .md-control { color: var(--text-muted); } .md-editor .md-controls .md-control:hover { color: var(--text); } .md-editor.md-fullscreen-mode { background: var(--bg) !important; } .md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview { color: var(--text); } /* -- File input (custom-file) -- */ .custom-file, .custom-file-input { height: 46px; } .custom-file-label { height: 46px; padding: 12px 14px; font-size: var(--text-md); line-height: 1.4; color: var(--text-lifted); background-color: var(--bg); border: 1px solid var(--border); } body .custom-file-label { border-radius: var(--rounding-sm) 0 0 var(--rounding-sm); } .custom-file-label::after { height: 44px; padding: 12px 14px; line-height: 1.4; color: var(--text); background-color: var(--bg-lifted); border-left: 1px solid var(--border); } .custom-file-input:focus ~ .custom-file-label { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .custom-file-input:disabled ~ .custom-file-label, .custom-file-input[disabled] ~ .custom-file-label { background-color: var(--bg-lifted); } /* -- Service details: the default Nexus overview (when the module doesn't provide one) -- */ div.product-details div.product-icon { color: var(--text-lifted); background-color: var(--bg-lifted); } .product-status { overflow: hidden; } .product-status-text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: inherit; } .product-status-active { color: var(--jh-success-text); background-color: var(--jh-success-soft); } .product-status-pending { color: var(--jh-warning-text); background-color: var(--jh-warning-soft); } .product-status-suspended, .product-status-fraud { color: var(--jh-error-text); background-color: var(--jh-error-soft); } .product-status-terminated, .product-status-cancelled, .product-status-completed { color: var(--text-lifted); background-color: var(--bg-lifted); } div.product-details-tab-container { background-color: var(--bg-muted); border-color: var(--border); } /* -- Nexus tabs on narrow screens -- */ .responsive-tabs-sm .nav-item a:hover { background-color: var(--bg-lifted); } .responsive-tabs-sm .nav-item a.active { background-color: var(--bg-muted) !important; } @media (max-width: 767.98px) { .responsive-tabs-sm { background: var(--bg-muted); border-color: var(--border); } .responsive-tabs-sm .nav-item { border-bottom-color: var(--border-muted) !important; } } @media (max-width: 575.98px) { .jh-msg { grid-template-columns: minmax(0, 1fr); } .jh-avatar { display: none; } } /* ============ step 4d: ticket composer (mock 3l) ============ */ /* The markdown editor stays (formatting/preview) but "fades" into the card: subtle toolbar without borders, no double lines, footer without background. */ .jh-composer .md-editor { background: var(--bg); } .jh-composer .md-editor > .md-header, .jh-composer .md-editor > .btn-toolbar { padding: 6px 8px; background: transparent !important; border-bottom: 1px solid var(--border-muted); } .jh-composer .md-editor .btn-group { margin-right: 4px; } .jh-composer .md-editor .btn-toolbar .btn, .jh-composer .md-editor .md-header .btn { padding: 5px 8px; font-size: 12px; line-height: 1.2; color: var(--text-lifted); background: transparent; border: 1px solid transparent; border-radius: 6px; } .jh-composer .md-editor .btn-toolbar .btn:hover, .jh-composer .md-editor .md-header .btn:hover, .jh-composer .md-editor .btn-toolbar .btn.active { color: var(--text); background: var(--bg-lifted); border-color: transparent; } .jh-composer .md-editor > textarea.markdown-editor, .jh-composer .md-editor > textarea, .jh-composer .md-editor > .md-preview { min-height: 140px; padding: 14px 16px !important; border-top: 0 !important; border-bottom: 0 !important; } .jh-composer .md-editor .md-footer { padding: 6px 12px; background: transparent !important; border-top: 1px solid var(--border-muted); } /* Attachments: collapsible, like the mock's "Attachments · up to N MB" */ .jh-attach { margin-top: 12px; } .jh-attach > summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-lifted); cursor: pointer; list-style: none; } .jh-attach > summary::-webkit-details-marker { display: none; } .jh-attach > summary:hover, .jh-attach[open] > summary { color: var(--text); } .jh-attach > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .jh-attach-hint { color: var(--text-muted); } .jh-attach-body { margin-top: 10px; } .jh-composer-actions { margin-top: 4px; } /* ============ step 4e: public header, new ticket, knowledge base, error pages ============ */ /* -- Public header (logged-out) -- */ body.jh-public { height: auto; min-height: 100%; } /* as in the client area: otherwise sticky doesn't work */ body.jh-public header.header.jh-header { position: sticky; z-index: 1030; top: 0; } .jh-pubnav { flex: 1 1 auto; min-width: 0; } .jh-pubnav-list { flex-direction: row; flex-wrap: wrap; gap: 2px; margin: 0 0 0 8px; } .jh-pubnav-list > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; font-size: var(--text-md); color: var(--text-lifted); border-radius: var(--rounding-sm); } .jh-pubnav-list > li > a:hover, .jh-pubnav-list > li.show > a { color: var(--text); background: var(--bg-lifted); } .jh-pubnav .dropdown-menu { margin-top: 6px; } .jh-pubnav .dropdown-menu li.dropdown-item { padding: 0; background: transparent; } .jh-pubnav .dropdown-menu li.dropdown-item > a { display: block; padding: 7px 10px !important; color: var(--text); border-radius: 6px; } .jh-pubnav .dropdown-menu li.dropdown-item > a:hover { background: var(--bg-lifted); } .jh-header .btn.btn-dark { padding: 9px 16px; font-weight: 600; } .jh-burger-pub { display: none; } @media (max-width: 1023.98px) { .jh-burger-pub { display: inline-flex; } .jh-pubnav { display: none; } html.jh-pubnav-open .jh-pubnav { display: block; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 14px; background: var(--bg-muted); border-bottom: 1px solid var(--border); box-shadow: var(--jh-shadow-pop); } html.jh-pubnav-open .jh-pubnav-list { flex-direction: column; margin: 0; } } @media (max-width: 575.98px) { .jh-header-public .jh-theme-toggle { display: none; } } /* 1.7.0 (F-030): …so on phones the open ☰ menu ends with Light/Dark (header.tpl .jh-pubnav-theme) */ .jh-pubnav-theme { display: none; } @media (max-width: 575.98px) { .jh-pubnav-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 0 2px 12px; border-top: 1px solid var(--border-muted); } .jh-pubnav-theme-label { font-size: var(--text-md); color: var(--text-lifted); } .jh-header-public .jh-pubnav-theme .jh-theme-toggle { display: inline-flex; } /* 3 classes: beats the rule above */ } /* -- Selectable cards (ticket department etc.) — README §9 "Selectable option card" -- */ .jh-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; } .jh-option { display: flex; flex-direction: column; gap: 4px; padding: 17px 18px; text-align: left; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out; } a.jh-option:hover, button.jh-option:hover { color: var(--text); border-color: var(--border-lifted); } .jh-option.is-selected { padding: 16px 17px; background: var(--jh-primary-soft); border: 2px solid var(--primary); } .jh-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .jh-option-title { font-size: 15px; font-weight: 600; } .jh-option-desc { font-size: 13px; color: var(--text-lifted); } .jh-form-card .card-body { padding: 22px 24px; } /* Knowledge-base suggestions in the new ticket (#autoAnswerSuggestions, filled via AJAX) */ #autoAnswerSuggestions { margin-bottom: 16px; padding: 14px 16px; font-size: var(--text-md); color: var(--text); background: var(--jh-primary-soft); border-radius: 10px; } #autoAnswerSuggestions a { font-weight: 500; color: var(--primary); } #autoAnswerSuggestions .list-group-item { padding: 6px 0; background: transparent; border: 0; } /* -- Knowledge base -- */ .jh-hero { position: relative; z-index: 0; overflow: hidden; margin-bottom: 18px; padding: 40px 38px; border-radius: var(--rounding-lg); } .jh-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .7; pointer-events: none; background-image: linear-gradient(var(--jh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--jh-grid-line) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(120deg, transparent 30%, black); mask-image: linear-gradient(120deg, transparent 30%, black); } .jh-hero-title { margin: 0 0 18px; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .jh-kb-search { display: flex; gap: 8px; max-width: 640px; } .jh-kb-search .form-control { flex: 1 1 auto; } .jh-kb-search-inline { margin-bottom: 18px; } .jh-kb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .jh-kb-cat { gap: 4px; padding: 18px 20px; transition: border-color .15s ease-out; } .jh-kb-cat:hover { color: var(--text); border-color: var(--border-lifted); } .jh-kb-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .jh-kb-cat-name { font-size: 15px; font-weight: 600; color: var(--text); } .jh-kb-cat-count { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .jh-kb-cat-desc { font-size: 13px; color: var(--text-lifted); } .jh-linklist-card { margin-bottom: 18px; } .jh-linklist-card > .jh-label { margin-bottom: 6px; } .jh-linklist-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text); border-bottom: 1px solid var(--border-muted); } .jh-linklist-item:last-child { border-bottom: 0; } .jh-linklist-item:hover { color: var(--primary); } .jh-linklist-title { flex: 1 1 auto; min-width: 0; font-size: var(--text-md); } .jh-linklist-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); } .jh-linklist-arrow { color: var(--text-muted); transition: transform .15s ease-out; } .jh-linklist-item:hover .jh-linklist-arrow { color: var(--primary); transform: translateX(2px); } .jh-linklist-empty { padding: 8px 0; } /* Article: reading column */ .jh-article { max-width: 720px; } .jh-article .jh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .jh-article-card { margin-bottom: 18px; padding: 24px 28px; } .jh-article-body { font-size: 16px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; } .jh-article-body img { max-width: 100%; height: auto; border-radius: var(--rounding-sm); } .jh-article-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-muted); } .jh-article-vote-q { font-size: var(--text-md); font-weight: 500; } .jh-article-vote-btns { display: flex; gap: 8px; } /* -- Error pages (404/429) — README 3p -- */ .jh-error { position: relative; z-index: 0; margin: 24px 0 40px; padding: 72px 24px; text-align: center; } .jh-error::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .7; pointer-events: none; background-image: linear-gradient(var(--jh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--jh-grid-line) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); } .jh-error-eyebrow { margin-bottom: 14px; color: var(--primary); } .jh-error-title { margin: 0 0 18px; font-size: clamp(48px, 9vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; } .jh-error-sub { max-width: 520px; margin: 0 auto 26px; font-size: 17px; line-height: 1.5; color: var(--text-lifted); } .jh-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } @media (max-width: 1023.98px) { .jh-kb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .jh-kb-cats { grid-template-columns: minmax(0, 1fr); } .jh-hero { padding: 28px 22px; } .jh-hero-title { font-size: 26px; } .jh-kb-search { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .jh-option, .jh-kb-cat, .jh-linklist-arrow { transition: none; } } /* ============ step 4g: login pages (3a) and account pages (3o) ============ */ /* -- Login / password reset / 2FA: 50/50 split without header (body.jh-auth-page) -- */ body.jh-auth-page .master-breadcrumb { display: none; } body.jh-auth-page section#main-body { padding: 0; background: var(--bg); } body.jh-auth-page section#main-body > .container { max-width: none; padding: 0; } body.jh-auth-page section#main-body > .container > .row { margin: 0; } body.jh-auth-page section#main-body .primary-content { padding: 0; } .jh-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-height: 100vh; padding: 16px; } .jh-auth-main { display: flex; flex-direction: column; padding: 24px 56px; } .jh-auth-form { width: 100%; max-width: 420px; margin: auto 0; padding: 40px 0; } .jh-auth-title { margin: 6px 0 22px; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .jh-auth-form .btn-block { padding: 12px 16px; font-size: 15px; } .jh-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .jh-label-row label { margin: 0; } .jh-link-small { font-size: 13px; font-weight: 500; color: var(--primary); } .jh-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-md); font-weight: 400; color: var(--text-lifted); cursor: pointer; } .jh-check input { width: 18px; height: 18px; margin: 0; } .jh-auth-linked:empty { display: none; } .jh-auth-linked { margin-top: 14px; } .jh-auth-linked .btn, .jh-auth-linked .btn-social { width: 100%; } .jh-auth-foot { margin: 22px 0 0; font-size: 14px; color: var(--text-lifted); } .jh-auth-foot a { font-weight: 600; color: var(--primary); } .jh-auth-brand { position: relative; z-index: 0; overflow: hidden; display: flex; align-items: flex-end; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-lg); } .jh-auth-brand::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(var(--jh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--jh-grid-line) 1px, transparent 1px); background-size: 44px 44px; } .jh-auth-brand-inner { padding: 44px; } .jh-auth-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-lifted); background: var(--bg-muted); border: 1px solid var(--border); border-radius: 999px; } .jh-auth-status:hover { color: var(--text); } .jh-auth-status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; } .jh-auth-tagline { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); } .jh-hl { color: var(--jh-highlight); } @media (max-width: 1023.98px) { .jh-auth { grid-template-columns: minmax(0, 1fr); padding: 0; } .jh-auth-brand { display: none; } .jh-auth-main { padding: 20px 22px; } .jh-auth-form { max-width: 460px; margin: 24px auto; padding: 0; } } /* -- Account pages: tabs (README §9: active = blue underline) -- */ .jh-tabs { margin-bottom: 20px; overflow-x: auto; } .jh-tabs .nav-tabs { flex-wrap: nowrap; white-space: nowrap; } .jh-tabs .nav-link .badge { margin-left: 4px; } /* ============ step 4h: invoice view (3j) — standalone page ============ */ body.jh-invoice-page { min-height: 100%; height: auto; } .jh-invoice-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 40px; background: var(--bg-muted); border-bottom: 1px solid var(--border-muted); } .jh-invoice-bar-actions { display: flex; gap: 10px; } .jh-invoice-wrap { max-width: 1240px; margin: 0 auto; padding: 36px 40px 48px; } .jh-invoice-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; } .jh-invoice-doc { padding: 40px 44px; border-radius: var(--rounding-lg); } .jh-invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .jh-invoice-logo { max-width: 200px; max-height: 60px; } .jh-invoice-title { text-align: right; } .jh-invoice-title h1 { margin: 10px 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; } .jh-invoice-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 18px; } .jh-invoice-parties .jh-label, .jh-invoice-paymethod .jh-label, .jh-invoice-notes .jh-label, .jh-invoice-ledger .jh-label { margin-bottom: 8px; } .jh-invoice-parties address { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--text); } .jh-invoice-paymethod { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 18px; font-size: var(--text-md); } .jh-invoice-notes { margin-bottom: 18px; padding: 14px 16px; font-size: var(--text-md); background: var(--bg-lifted); border-radius: 10px; } .jh-invoice-items { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: var(--text-md); } .jh-invoice-items th { padding: 10px 0; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--text-lifted); border-bottom: 1px solid var(--border-muted); } .jh-invoice-items td { padding: 14px 0; vertical-align: top; color: var(--text); border-bottom: 1px solid var(--border-muted); } .jh-invoice-items .jh-num, .jh-invoice-ledger .jh-num { padding-left: 16px; font-family: var(--font-mono); text-align: right; white-space: nowrap; } .jh-invoice-totals { display: grid; grid-template-columns: auto auto; justify-content: end; column-gap: 32px; row-gap: 8px; margin: 18px 0 0; } .jh-invoice-totals dt { font-weight: 400; text-align: right; color: var(--text-lifted); } .jh-invoice-totals dd { margin: 0; font-family: var(--font-mono); text-align: right; color: var(--text); } .jh-invoice-totals .jh-invoice-total { margin-top: 10px; align-self: baseline; } dt.jh-invoice-total { font-weight: 600; color: var(--text); } dd.jh-invoice-total { font-size: 26px; font-weight: 600; } .jh-invoice-footnote { margin: 14px 0 0; font-size: 12px; color: var(--text-muted); } .jh-invoice-ledger { margin-top: 32px; } .jh-invoice-ledger .table { margin: 0; font-size: 13px; } .jh-invoice-balance td { font-weight: 600; } .invoice-qr-wrapper { margin-top: 24px; } .jh-invoice-side { position: sticky; top: 24px; } .jh-invoice-pay .jh-stat-num { margin-bottom: 16px; } .jh-invoice-pay .custom-select { margin-bottom: 12px; } .jh-invoice-due { margin-bottom: 12px; } .jh-pay-btn { text-align: center; } .jh-pay-btn .btn, .jh-pay-btn input[type="submit"], .jh-pay-btn button[type="submit"] { width: 100%; } .jh-pay-btn input[type="submit"]:not(.btn), .jh-pay-btn button[type="submit"]:not(.btn) { padding: 12px 16px; font-weight: 600; color: var(--text-inverted); background: var(--primary); border: 0; border-radius: var(--rounding-sm); cursor: pointer; } .jh-invoice-credit { margin-top: 18px; padding-top: 16px; font-size: 13px; color: var(--text-lifted); border-top: 1px solid var(--border-muted); } .jh-invoice-credit-text { margin-bottom: 10px; } .jh-invoice-wrap > .card { margin-bottom: 18px; } /* payment alerts (includes/panel.tpl) */ @media (max-width: 1023.98px) { .jh-invoice-grid { grid-template-columns: minmax(0, 1fr); } .jh-invoice-side { position: static; order: -1; } /* on mobile: payment first */ } @media (max-width: 767.98px) { .jh-invoice-bar, .jh-invoice-wrap { padding-left: 16px; padding-right: 16px; } .jh-invoice-doc { padding: 24px 20px; } .jh-invoice-head { flex-direction: column; } .jh-invoice-title { text-align: left; } .jh-invoice-parties { grid-template-columns: minmax(0, 1fr); } } /* -- Print: always light, document only, A4 -- */ @media print { @page { size: A4; margin: 14mm; } :root, [data-theme="dark"] { --bg: #FFFFFF; --bg-muted: #FFFFFF; --bg-lifted: #F4F7FB; --bg-accented: #E3EAF2; --text: #0B1726; --text-lifted: #55667C; --text-muted: #5E6F85; --text-accented: #34445A; --text-inverted: #FFFFFF; --border: #DDE5EE; --border-muted: #E3EAF2; --border-lifted: #C9D5E3; --primary: #1A7BC0; --primary-lifted: #15649D; --error: #e7000b; --error-lifted: #c10007; --jh-success-soft: #E6F6EC; --jh-success-text: #007A33; --jh-warning-soft: #FFF4EC; --jh-warning-text: #ca3500; --jh-warning-border: #FFD9BF; --jh-error-soft: #FDECEC; --jh-primary-soft: #E8F2FA; --jh-highlight: #B25E00; color-scheme: light; } body.jh-invoice-page { background: var(--bg); } .jh-invoice-wrap { max-width: none; padding: 0; } .jh-invoice-grid { display: block; } .jh-invoice-doc { padding: 0; border: 0; box-shadow: none; } .jh-invoice-items tr, .jh-invoice-ledger tr { break-inside: avoid; } .label { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ============ 1.6.0 — 6.4 Notification centre (includes/jh-bell.tpl) + admin pill + account menu ============ */ .jh-bell { position: relative; } button.jh-icon-btn { padding: 0; background: transparent; cursor: pointer; } .jh-bell-btn[aria-expanded="true"] { color: var(--text); background: var(--bg-lifted); } .jh-bell-btn:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-icon-badge.is-err { color: #fff; background: var(--error); } [data-theme="dark"] .jh-icon-badge.is-err { color: var(--text-inverted); } .jh-icon-badge.is-warn { color: #fff; background: var(--warning-lifted); } .jh-header .dropdown-menu.jh-bell-menu { top: calc(100% + 10px); right: 0; left: auto; width: 400px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; } .jh-bell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-muted); } .jh-bell-title { font-size: 15px; font-weight: 600; color: var(--text); } .jh-bell-sum { font-size: 12px; color: var(--text-lifted); } .jh-bell-list { max-height: min(440px, 70vh); margin: 0; padding: 0; overflow-y: auto; list-style: none; } .jh-bell-list li + li { border-top: 1px solid var(--border-muted); } .jh-bell-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 16px; color: var(--text); } a.jh-bell-item:hover, a.jh-bell-item:focus { color: var(--text); background: var(--bg-lifted); text-decoration: none; } a.jh-bell-item:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: -2px; } .jh-bell-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 14px; font-weight: 700; border-radius: 50%; } .jh-bell-ico.is-danger { color: var(--jh-error-text); background: var(--jh-error-soft); } .jh-bell-ico.is-warning { color: var(--jh-warning-text); background: var(--jh-warning-soft); } .jh-bell-ico.is-info { color: var(--jh-primary-text); background: var(--jh-primary-soft); } .jh-bell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .jh-bell-t { font-size: var(--text-md); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; } .jh-bell-s { font-size: 12px; line-height: 1.4; color: var(--text-lifted); overflow-wrap: anywhere; } .jh-bell-go { align-self: center; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--primary); } .jh-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; text-align: center; } .jh-bell-ok { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--jh-success-text); background: var(--jh-success-soft); border-radius: 50%; } .jh-bell-empty-title { font-weight: 600; color: var(--text); } .jh-bell-empty-text { font-size: 13px; color: var(--text-lifted); } .jh-bell-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 13px; border-top: 1px solid var(--border-muted); } .jh-bell-foot a { font-weight: 500; color: var(--primary); } .jh-bell-foot a:last-child:not(:first-child) { color: var(--text-lifted); } .jh-admin-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; box-sizing: border-box; padding: 0 12px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--jh-warning-text); background: var(--jh-warning-soft); border: 1px solid var(--jh-warning-border); border-radius: var(--rounding-sm); } .jh-admin-pill:hover { color: var(--jh-warning-text); border-color: var(--jh-warning-text); } .jh-account .jh-account-name { display: flex; flex-direction: column; gap: 1px; } .jh-account-as { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .jh-account-who { font-weight: 600; color: var(--text); } .jh-account-sub { font-size: 12px; font-weight: 400; color: var(--text-lifted); } .jh-header .dropdown-menu li.jh-account-admin a { color: var(--jh-warning-text); } @media (max-width: 767.98px) { /* 1.6.1: was 575.98px — the whole mobile-bar range (F-028) */ .jh-bell { position: static; } .jh-header .dropdown-menu.jh-bell-menu { position: fixed; top: var(--jh-header-h, 68px); right: 8px; left: 8px; width: auto; max-width: none; } .jh-admin-pill span { display: none; } } /* ============ 1.5.0 — 6.2 Renewals centre (renewals.tpl) ============ */ .jh-nav-count.is-warn { color: var(--jh-warning-text); background: var(--jh-warning-soft); } .jh-renew-soon { margin: -4px 0 10px; padding: 10px 12px; font-size: 13px; color: var(--text-accented); background: var(--jh-warning-soft); border-radius: 10px; } .jh-renew-soon .jh-mono { margin-right: 6px; font-size: 18px; font-weight: 700; color: var(--jh-warning-text); } .jh-days.is-err { color: var(--jh-error-text); } .jh-renew-intro { margin: 6px 0 0; font-size: var(--text-md); color: var(--text-lifted); } .jh-renew { display: flex; flex-direction: column; gap: 18px; } .jh-renew > .alert { margin: 0; } .jh-renew-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .jh-renew-empty p { margin: 0; color: var(--text-lifted); } /* calendar export:
popover */ .jh-ics { position: relative; } .jh-ics > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; } .jh-ics > summary::-webkit-details-marker { display: none; } .jh-ics-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 320px; max-width: calc(100vw - 32px); padding: 16px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .jh-ics-title { font-weight: 600; color: var(--text); } .jh-ics-pop p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-lifted); } .jh-ics-pop .jh-ics-note { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); } /* 30/60/90 tiles = filters */ .jh-renew-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .jh-renew-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 16px 18px; text-align: left; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); cursor: pointer; transition: border-color .15s ease-out; } .jh-renew-tile:hover { border-color: var(--border-lifted); } .jh-renew-tile.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .jh-renew-tile:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-renew-tile-total { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; } .jh-renew-tile.is-soon .jh-renew-tile-total { color: var(--jh-warning-text); } .jh-renew-tile-meta { font-size: 12px; color: var(--text-lifted); } .jh-renew-toolbar { margin: 0; } .jh-pill-count { font-family: var(--font-mono); font-size: 12px; opacity: .75; } .jh-renew-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; font-size: 13px; color: var(--jh-primary-text); background: var(--jh-primary-soft); border: 0; border-radius: 999px; cursor: pointer; } .jh-renew-none { text-align: center; } .jh-renew-none p { margin: 0 0 6px; font-weight: 500; } /* the list */ .jh-renew-tablewrap { overflow: hidden; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .jh-renew-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); } .jh-renew-table thead th { padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--text-lifted); border-bottom: 1px solid var(--border-muted); } .jh-renew-month th { padding: 9px 14px 7px; font-size: 12px; font-weight: 600; text-align: left; color: var(--text-lifted); background: var(--bg-lifted); } .jh-renew-row td { padding: 12px 14px; vertical-align: middle; border-top: 1px solid var(--border-muted); } .jh-renew-row.is-grace td { background: var(--jh-warning-soft); } .jh-renew-row.is-selected td { background: var(--jh-primary-soft); } .jh-renew-check { width: 44px; text-align: center; } .jh-renew-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .jh-renew-item { min-width: 0; } .jh-renew-name { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--text); } .jh-renew-name:hover { color: var(--primary); } .jh-renew-sub { font-size: 12px; color: var(--text-lifted); } .jh-renew-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .jh-renew-when > .jh-mono { display: block; font-size: 13px; } .jh-renew-badge { margin-top: 4px; } .jh-renew-muted { display: block; font-size: 12px; color: var(--text-muted); } .jh-renew-autoform { margin: 0; } .jh-switch-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; font-size: 13px; color: var(--text-lifted); background: transparent; border: 0; cursor: pointer; } .jh-switch-btn:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; border-radius: 6px; } .jh-switch-btn[aria-busy="true"] { opacity: .6; } .jh-renew-term .custom-select { width: auto; min-width: 150px; max-width: 100%; padding: 8px 10px; font-size: 13px; } .jh-renew-action { width: 1%; white-space: nowrap; } /* explicit alignment: the cells must not inherit the theme's table alignment (1.5.1) */ .jh-renew-table th, .jh-renew-table td { text-align: left; } .jh-renew-table td.jh-renew-check { text-align: center; } .jh-renew-table td.jh-renew-action { text-align: right; } /* WHMCS' reason ("not available…") wraps instead of widening the column */ .jh-renew-action .jh-renew-muted { display: inline-block; max-width: 240px; line-height: 1.4; white-space: normal; text-align: right; } .jh-renew-action .btn.is-added { color: var(--jh-success-text); background: var(--jh-success-soft); border-color: transparent; cursor: default; } [data-jh-add][aria-busy="true"], [data-jh-add-selected][aria-busy="true"] { opacity: .6; pointer-events: none; } .jh-renew-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); } .jh-renew-toast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; } /* selection bar */ .jh-renew-bar { position: sticky; bottom: 16px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--bg-muted); border: 1px solid var(--primary); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .jh-renew-bar-sum { display: flex; flex-direction: column; font-size: 13px; color: var(--text-lifted); } .jh-renew-bar-total { font-size: 20px; font-weight: 700; color: var(--text); } .jh-renew-bar-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 767.98px) { .jh-renew-tiles { gap: 8px; } .jh-renew-tile { padding: 12px; } .jh-renew-tile-total { font-size: 18px; } .jh-ics-pop { right: auto; left: 0; } /* rows → cards */ .jh-renew-tablewrap { overflow: visible; background: transparent; border: 0; } .jh-renew-table thead { display: none; } .jh-renew-table, .jh-renew-table tbody { display: block; } .jh-renew-month th { display: block; padding: 14px 2px 8px; background: transparent; } .jh-renew-table tbody { margin-bottom: 4px; } .jh-renew-month { display: block; } .jh-renew-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "check item when" ". auto auto" ". term action"; gap: 8px 10px; align-items: center; margin-bottom: 10px; padding: 14px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .jh-renew-row[hidden] { display: none; } .jh-renew-row.is-grace { background: var(--jh-warning-soft); border-color: var(--jh-warning-border); } .jh-renew-row.is-selected { background: var(--jh-primary-soft); border-color: var(--primary); } .jh-renew-row td, .jh-renew-row.is-grace td, .jh-renew-row.is-selected td { display: block; padding: 0; border: 0; background: transparent; } .jh-renew-row .jh-renew-check { grid-area: check; width: auto; } .jh-renew-row .jh-renew-check input { width: 18px; height: 18px; } .jh-renew-row .jh-renew-item { grid-area: item; } .jh-renew-row .jh-renew-when { grid-area: when; text-align: right; } .jh-renew-row .jh-renew-auto { grid-area: auto; } .jh-renew-row .jh-renew-term { grid-area: term; } .jh-renew-row .jh-renew-action { grid-area: action; width: auto; white-space: normal; } .jh-renew-row .jh-renew-when { text-align: right; } /* services: price and WHMCS' answer each get a full row (a long reason must not squeeze the name) */ .jh-renew-row.is-service { grid-template-areas: "check item when" ". auto auto" ". term term" ". action action"; } .jh-renew-row.is-service .jh-renew-action { text-align: left; } .jh-renew-row.is-service .jh-renew-action .jh-renew-muted { max-width: none; text-align: left; } .jh-renew-bar { bottom: 8px; } } @media (prefers-reduced-motion: reduce) { .jh-renew-tile { transition: none; } } /* ============ 1.2.0 — 6.1 Bank transfer panel (includes/jh-bank-transfer.tpl) + copy buttons (shared with 6.5) ============ */ .jh-invoice-grid--bank { grid-template-columns: minmax(0, 1fr) 380px; } /* a grouped GR IBAN fits on one line */ .jh-bank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .jh-bank-amount { margin: 10px 0 16px; } .jh-bank-amount .jh-stat-num { margin: 0; } .jh-bank { display: flex; flex-direction: column; gap: 18px; } .jh-bank-details { display: flex; flex-direction: column; gap: 18px; } .jh-bank-accounts { display: flex; flex-direction: column; gap: 12px; } .jh-bank-key { font-size: 12px; color: var(--text-lifted); } .jh-bank-field { display: flex; flex-direction: column; gap: 6px; } .jh-bank-bic { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .jh-bank-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); } /* 1 · payment reference: the one thing the client must not miss */ .jh-bank-ref { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--jh-primary-soft); border-radius: 12px; } .jh-bank-ref .jh-label { color: var(--jh-primary-text); } .jh-bank-ref-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); } /* 2 · "your bank" pills (shown by JS; without JS every account is listed) */ .jh-bank-pick { display: flex; flex-direction: column; gap: 8px; } .jh-bank-pick .jh-pill { min-height: 40px; } /* Copy buttons: the value is the button; check icon + "Copied" while .is-copied (js/jethost.js) */ .jh-copy-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--text); text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--rounding-sm); cursor: pointer; transition: border-color .15s ease-out; } .jh-copy-field:hover { border-color: var(--border-lifted); } .jh-copy-field:focus-visible, .jh-copy-chip:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-copy-value { min-width: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; overflow-wrap: anywhere; } .jh-copy-value--text { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; letter-spacing: var(--letter-spacing); } .jh-copy-field--lg { min-height: 52px; padding: 10px 14px; background: var(--bg-muted); } .jh-copy-field--lg .jh-copy-value { font-size: 22px; font-weight: 600; letter-spacing: .02em; } .jh-copy-ico, .jh-copy-ico-done { flex: none; } .jh-copy-ico { color: var(--text-lifted); } .jh-copy-ico-done, .jh-copy-done, .jh-copy-txt-done { display: none; } .is-copied .jh-copy-ico, .is-copied .jh-copy-txt { display: none; } .is-copied .jh-copy-ico-done { display: inline; color: var(--jh-success-text); } .is-copied .jh-copy-txt-done { display: inline; } .jh-copy-field.is-copied { border-color: var(--jh-success-text); } .jh-copy-done { font-size: 12px; font-weight: 600; color: var(--jh-success-text); } .jh-copy-group:has(.is-copied) .jh-copy-done { display: inline; } .jh-copy-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--text-lifted); background: transparent; border: 1px solid var(--border-lifted); border-radius: var(--rounding-sm); cursor: pointer; } .jh-copy-chip:hover { color: var(--text); background: var(--bg-lifted); } .jh-copy-chip.is-copied { color: var(--jh-success-text); border-color: var(--jh-success-text); } /* 1.4.0 (6.5): inline copy button after a value (includes/jh-copy.tpl) + "Copied" bubble */ .jh-copy-inline { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px 0 -4px 4px; padding: 0; vertical-align: middle; color: var(--text-lifted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .jh-copy-inline:hover { color: var(--text); background: var(--bg-lifted); } .jh-copy-inline:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-copy-inline svg { width: 14px; height: 14px; } .jh-copy-inline.is-copied::after { content: attr(data-jh-copied); position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 5; transform: translateX(-50%); padding: 3px 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: normal; white-space: nowrap; color: var(--text-inverted); background: var(--bg-inverted); border-radius: 6px; pointer-events: none; } h1 .jh-copy-inline { margin-left: 6px; } .jh-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .jh-copy-key { font-size: 13px; color: var(--text-lifted); } .jh-epp-code { max-width: 480px; } .jh-ns-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .jh-ns-form .jh-ns-actions .btn-primary { margin-top: 0; } @media (pointer: coarse) { .jh-copy-inline { width: 44px; height: 44px; margin-top: -8px; margin-bottom: -8px; } } /* After a notice: the bank details fold behind a toggle */ .jh-bank-toggle > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; font-weight: 500; color: var(--text); background: var(--bg-lifted); border-radius: var(--rounding-sm); cursor: pointer; list-style: none; } .jh-bank-toggle > summary::-webkit-details-marker { display: none; } .jh-bank-toggle > summary:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-bank-toggle[open] > summary { margin-bottom: 18px; } .jh-bank-toggle[open] .jh-bank-chevron { transform: rotate(180deg); } /* 3 · "I sent the payment":
= works without JS; summary is the button, hidden while the form is open */ .jh-bank-report { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border-muted); } .jh-bank-intro { display: flex; flex-direction: column; gap: 8px; } .jh-bank-intro p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-lifted); } .jh-bank-notice > summary { list-style: none; } .jh-bank-notice > summary::-webkit-details-marker { display: none; } .jh-bank-notice[open] > summary, .jh-bank-report:has(.jh-bank-notice[open]) .jh-bank-intro { display: none; } .jh-bank-notice > summary.btn-primary { padding: 12px 16px; } .jh-bank-again { padding-left: 0; padding-right: 0; } .jh-bank-sent { margin: 0; font-size: 13px; line-height: 1.5; } .jh-bank-sent-title { font-size: var(--text-md); font-weight: 600; } .jh-bank-sent-meta { margin-bottom: 8px; color: var(--text-lifted); } .jh-bank-sent a { display: inline-block; margin-top: 8px; } .jh-bank-form { display: flex; flex-direction: column; gap: 14px; } .jh-bank-form .form-group { margin: 0; } .jh-bank-form .form-text { margin-top: 6px; line-height: 1.5; } .jh-bank-form .alert { margin: 0; } .jh-bank-cancel { padding: 6px 4px; font-size: 13px; } .jh-optional { font-weight: 400; color: var(--text-muted); } .jh-field-error { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--jh-error-text); } /* Segmented control = two real radios */ .jh-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; margin: 0; padding: 4px; background: var(--bg-lifted); border: 0; border-radius: 10px; } .jh-seg-opt { position: relative; display: flex; margin: 0; } .jh-seg-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .jh-seg-opt span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; font-size: 13px; font-weight: 500; text-align: center; color: var(--text-lifted); border-radius: 7px; cursor: pointer; } .jh-seg-opt input:checked + span { font-weight: 600; color: var(--text); background: var(--bg-muted); box-shadow: 0 0 0 1px var(--border); } .jh-seg-opt input:focus-visible + span { outline: 2px solid var(--jh-focus); outline-offset: 2px; } /* Proof upload: the real input stays focusable (visually hidden); the dashed label is the click/drop target */ .jh-drop-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .jh-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 22px 16px; text-align: center; color: var(--primary); background: var(--bg); border: 1.5px dashed var(--border-lifted); border-radius: 10px; cursor: pointer; } .jh-drop-title { font-size: var(--text-md); font-weight: 500; color: var(--text); } .jh-drop-link { color: var(--primary); } .jh-drop:hover, .jh-drop.is-dragover { background: var(--jh-primary-soft); border-color: var(--primary); } .jh-drop.is-invalid { border-color: var(--error); } .form-group:has(.jh-drop-input:focus-visible) .jh-drop, .form-group:has(.jh-drop-input:focus-visible) .jh-file-row { outline: 2px solid var(--jh-focus); outline-offset: 2px; } .jh-file-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; color: var(--primary); background: var(--bg-lifted); border: 1px solid var(--border); border-radius: var(--rounding-sm); } .jh-file-meta { display: flex; flex: 1; flex-direction: column; min-width: 0; } .jh-file-name { overflow: hidden; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; text-overflow: ellipsis; } .jh-file-size { font-size: 12px; color: var(--text-muted); } @media (max-width: 1023.98px) { .jh-invoice-grid--bank { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .jh-copy-field { transition: none; } } /* ============ step 4j: Cart (standard_cart + Nexus Cart) and details polish ============ * The Nexus Cart (domain search, cart) is an SPA in Shadow DOM: it receives our tokens through its * --vl-* variables. Only --color-white is defined inside it as a constant (#fff, for .bg-white), * so we define it on the host (#nexus-root): outer rules on the host win over :host. * The rest (product configuration, checkout etc.) is standard_cart + Nexus overrides with whites: * selectors "body #order-standard_cart …" so that ours win over both. */ /* -- Nexus Cart SPA -- */ /* --color-neutral-100: constant gray (not --vl-*) on the 8px outline of the domain search field → white frame in dark */ #nexus-root { --color-white: var(--bg-muted); --color-neutral-100: var(--bg-muted); } /* The Nexus Cart internals (Shadow DOM) are styled by css/nexus-cart.css, loaded by jethost.js (5i). */ /* Domain search: without the "Categories / Actions" column — the search takes the full width (mock 3c). Categories remain under "+ New service" and on the product pages (standard_cart). */ body #order-standard_cart .cart-sidebar:has(~ .cart-body #nexus-root) { display: none; } body #order-standard_cart .cart-body:has(#nexus-root) { float: none; width: 100%; } /* Cart (nexus_cart viewcart): its inline style zeroes the section#main-body padding (!important); the gap below the header goes on #nexus-root so the title lands where it does on the other pages. */ #order-standard_cart > #nexus-root[data-app="cart-module"] { display: block; padding-top: 28px; padding-bottom: 28px; } /* nexus_cart's viewcart.tpl sets inline section#main-body { background:#fff !important } */ html body section#main-body { background-color: var(--bg) !important; } /* -- Cart side panels (Categories / Actions) -- */ body #order-standard_cart .panel .panel-heading, body #order-standard_cart .panel .panel-footer { background: transparent; border-color: var(--border-muted); } .cart-sidebar .card-sidebar .panel-title { margin: 0; font-family: var(--font-mono); font-size: 12px !important; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .cart-sidebar .card-sidebar .panel-title::before { content: "// "; } /* -- Headings & basics -- */ body #order-standard_cart .header-lined h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } body #order-standard_cart label, body #order-standard_cart p.domain-renewal-desc { color: var(--text-lifted); } body #order-standard_cart .sub-heading { border-top-color: var(--border-muted); } body #order-standard_cart .sub-heading span, body #order-standard_cart .sub-heading-borderless span { color: var(--text-lifted); background: var(--bg); } body #order-standard_cart .field, body #order-standard_cart .form-control, body #order-standard_cart .custom-select, body #order-standard_cart select.form-control { color: var(--text); background-color: var(--bg); border: 1px solid var(--border); } body #order-standard_cart .form-control:focus, body #order-standard_cart .field:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } body #order-standard_cart .field[disabled], body #order-standard_cart .field[readonly], body #order-standard_cart .form-control[disabled], body #order-standard_cart .form-control[readonly] { background-color: var(--bg-lifted); } body #order-standard_cart .field-icon i { color: var(--text-muted); } body #order-standard_cart .field-help-text { color: var(--text-muted); } /* -- Product list -- */ body #order-standard_cart .products .product { color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); } body #order-standard_cart .cart-body .products .product header, body #order-standard_cart .products .product header { background: transparent; border-bottom-color: var(--border-muted); } body #order-standard_cart .products .product header span { color: var(--text); } body #order-standard_cart .products .product header .qty { color: var(--text-muted); } body #order-standard_cart .product-info { background-color: var(--bg-lifted); border-color: var(--border-muted); } /* -- Addons / domain options -- */ body #order-standard_cart .panel-addon { background: var(--bg-muted); border-color: var(--border); } body #order-standard_cart .panel-addon .panel-body label { color: var(--text); } body #order-standard_cart .panel-addon .panel-price { color: var(--text); background-color: var(--bg-lifted); } body #order-standard_cart .panel-addon .panel-add, body #order-standard_cart .panel-addon-selected .panel-add { color: var(--text-inverted); background-color: var(--primary); } body #order-standard_cart .panel-addon-selected { border-color: var(--primary); } body #order-standard_cart .domain-selection-options { background: var(--bg-muted); border-color: var(--border); } body #order-standard_cart .domain-selection-options .option { background-color: transparent; } body #order-standard_cart .domain-selection-options .option-selected { background-color: var(--jh-primary-soft); } body #order-standard_cart .domain-checker-available, .domain-checker-available { color: var(--jh-success-text); } body #order-standard_cart .domain-checker-unavailable, body #order-standard_cart .domain-checker-invalid, .domain-checker-unavailable, .domain-checker-invalid { color: var(--jh-error-text); } body #order-standard_cart .transfer-eligible { color: var(--jh-success-text); background-color: var(--jh-success-soft); border-color: var(--jh-success-soft); } body #order-standard_cart .transfer-not-eligible { color: var(--text-lifted); background-color: var(--bg-lifted); } .domain-checker-container { background: var(--bg-lifted); border-radius: var(--rounding-lg); } .domain-checker-container .input-group-box { background-color: var(--bg-muted); border-radius: var(--rounding-md); } body #order-standard_cart .domain-promo-box, .domain-promo-box { color: var(--text); background: var(--bg-muted); border-color: var(--border); } .domain-promo-box .small { color: var(--text-muted); } /* -- Spotlight / suggested domains (standard_cart) -- */ .spotlight-tlds, .suggested-domains .domain-lookup-suggestions-message, .suggested-domains .domain-lookup-suggestions-loader { background-color: var(--bg-lifted); } .spotlight-tld { color: var(--text-lifted); background-color: var(--bg-muted); border-color: var(--border); } .spotlight-tld .unavailable, .spotlight-tld .invalid { color: var(--text-muted); background-color: var(--bg-lifted); border-color: var(--border); } .spotlight-tld .btn:not(.domain-contact-support), .suggested-domains .btn:not(.domain-contact-support) { color: var(--text-inverted); background-color: var(--primary); border-color: var(--primary); } .suggested-domains .panel-heading, .suggested-domains .card-header, #DomainSearchResults .primary-domain-header { border-bottom-color: var(--border-muted); } body #order-standard_cart .domain-pricing .tld-filters .badge { color: var(--text); background: var(--bg-muted); border-color: var(--border); } body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success { color: var(--text-inverted); background-color: var(--primary); } body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column, body #order-standard_cart .domain-pricing .tld-pricing-header div, body #order-standard_cart .domain-pricing .tld-pricing-header:has(~ .filtered-row) .tld-column { background-color: var(--bg-muted); } .domain-pricing .tld-row { border-bottom-color: var(--border-muted); } .domain-pricing .tld-row.highlighted { background: var(--jh-primary-soft); } /* -- Order summary, cart, checkout -- */ body #order-standard_cart .summary-container { background-color: var(--bg-muted); } body #order-standard_cart .order-summary .summary-totals, body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals { border-color: var(--border-muted); } body #order-standard_cart .order-summary .recurring-charges { color: var(--text-muted); } body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--text-lifted); } body #order-standard_cart .order-summary .loader { color: var(--text-muted); } body #order-standard_cart .apply-credit-container { background-color: var(--bg-lifted); } body #order-standard_cart .cc-input-container { background-color: var(--bg-lifted); border-color: var(--border); } body #order-standard_cart .cc-input-container .existing-cc-grid { color: var(--text-lifted); } body #order-standard_cart .view-cart-items-header { color: var(--text-lifted); background-color: var(--bg-lifted); } body #order-standard_cart .view-cart-items { border-bottom-color: var(--border-muted); } body #order-standard_cart .view-cart-items .item, body #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: var(--bg-muted); } body #order-standard_cart .view-cart-items .item { border-bottom: 1px solid var(--border-muted); } body #order-standard_cart .view-cart-items .item-domain { color: var(--primary); } body #order-standard_cart .btn-remove-from-cart { color: var(--text-muted); } body #order-standard_cart .btn-remove-from-cart:hover { color: var(--error); } body #order-standard_cart .cart-body .view-cart-empty { color: var(--text); background-color: var(--bg-muted); border-color: var(--border-muted); } body #order-standard_cart .empty-cart .btn { color: var(--text-inverted); background-color: var(--primary); } body #order-standard_cart .view-cart-tabs .tab-content, body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true], body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] { background-color: var(--bg-lifted); border-color: var(--border-muted); } body #order-standard_cart .view-cart-promotion-code { background-color: var(--bg-muted); border-color: var(--border-lifted); } body #order-standard_cart .view-cart-gateway-checkout { background-color: var(--bg-lifted); } body #order-standard_cart .default-captcha { color: var(--text-lifted); background-color: var(--bg-lifted); border-color: var(--border); } body #order-standard_cart .account-select-container { border-right-color: var(--border-muted); } body #order-standard_cart .account-select-container div.account { background: var(--bg-lifted); border-color: var(--border); } body #order-standard_cart .account-select-container div.account.active { background: var(--jh-primary-soft); border-color: var(--primary); } /* "New account" has Bootstrap's .border-bottom (constant gray with !important) → bright line in dark */ body #order-standard_cart .account-select-container div.account.border-bottom { border-bottom-color: var(--border) !important; } /* -- Renewals (domains/services) -- */ .domain-renewals, .service-renewals, .addon-renewals .service-renewal { background-color: var(--bg-muted); border-top-color: var(--border); } .domain-renewals .domain-renewal, .service-renewals .service-renewal { border-bottom-color: var(--border-muted); } .domain-renewals .domain-renewal:nth-child(even), .service-renewals .service-renewal:nth-child(even), .addon-renewals .service-renewal:nth-child(even) { background-color: var(--bg-lifted); } .addon-renewals > div { border-color: var(--border); } .form-control.domain-renewals-filter, .form-control.service-renewals-filter { background-color: var(--bg); } /* -- MarketConnect promos: keep the brand colours, restyle only the surfaces -- */ body #order-standard_cart .mc-promo { background-color: var(--bg-muted); border-color: var(--border-lifted); } body #order-standard_cart .mc-promo .body { background-color: var(--bg-lifted); border-top-color: var(--border-muted); } body #order-standard_cart .addon-promo-container { border-color: var(--border-muted); } /* -- Service details (cPanel module): Quick shortcuts as tiles (mock 3f) -- */ .jh-context-right #tabOverview a:has(> img) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 112px; margin: 6px 0; padding: 16px 10px; font-size: 13px; font-weight: 500; text-align: center; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s ease-out, background-color .15s ease-out; } .jh-context-right #tabOverview a:has(> img):hover { color: var(--text); background: var(--bg-lifted); border-color: var(--border-lifted); } .jh-context-right #tabOverview a:has(> img) img { max-width: 40px; max-height: 40px; } /* -- Domain details: nameservers / EPP in mono (README §9) -- */ #tabNameservers .domnsinputs, .domnsinputs, #tabNameservers input[name^="ns"] { font-family: var(--font-mono); } /* -- Browser autofill: no yellow background, follows the theme -- */ input.form-control:-webkit-autofill, input.form-control:-webkit-autofill:hover, input.form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); caret-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s ease-out 0s; } @media (prefers-reduced-motion: reduce) { .jh-context-right #tabOverview a:has(> img) { transition: none; } } /* ============ step 5a: Responsive — lists as cards (<768px), denser table (768–1023px) ============ * The 4 lists (services, domains, invoices, tickets) use table.jh-stack and disable DataTables * Responsive (jhStack=true → includes/tablelist.tpl), so it doesn't hide columns with inline display:none. * Cell roles in the card: * .jh-c-eyebrow small line above the title (ticket no.) * .jh-c-check, .jh-col-ssl start of the title line (selection, SSL) * .jh-c-title / .jh-c-status title left, badge right * td[data-label] fields in pairs, labelled from data-label * .jh-c-action last line, right-aligned (Pay → / PDF →) * The table's jQuery .show() sets inline display:table → hence display:block !important here. */ @media (min-width: 768px) and (max-width: 1023.98px) { .jh-list-page .dataTables_wrapper { overflow-x: auto; } .jh-list-page table.table-list thead th, .jh-list-page .table-list > tbody > tr > td { padding-left: 12px; padding-right: 12px; } .jh-list-page table.table-list .jh-hide-md { display: none; } } @media (max-width: 767.98px) { .jh-list-page table.jh-stack, .jh-list-page table.jh-stack > tbody { display: block !important; width: 100% !important; } .jh-list-page .dataTables_wrapper table.jh-stack { margin: 0 0 6px !important; background: transparent; border: 0; border-radius: 0; } .jh-list-page table.jh-stack > thead { display: none; } .jh-list-page table.jh-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-bottom: 10px; padding: 14px 16px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .jh-list-page table.jh-stack > tbody > tr > td { display: block; min-width: 0; padding: 0 !important; text-align: left; background: transparent !important; border: 0 !important; border-radius: 0 !important; } /* line break after the badge: fields always start on a new line (the margin cancels the double gap) */ .jh-list-page table.jh-stack > tbody > tr::after { content: ""; order: 2; flex: 1 1 100%; height: 0; margin-top: -12px; } .jh-list-page table.jh-stack .jh-c-eyebrow { order: -1; flex: 1 1 100%; margin-bottom: -6px; font-size: 12px; color: var(--text-muted); } .jh-list-page table.jh-stack .jh-c-check, .jh-list-page table.jh-stack .jh-col-ssl { order: 0; flex: 0 0 auto; width: auto; } .jh-list-page table.jh-stack .jh-col-ssl:not(:has(img)) { display: none; } .jh-list-page table.jh-stack .jh-c-title { order: 1; flex: 1 1 0; overflow-wrap: anywhere; } .jh-list-page table.jh-stack .jh-c-title.jh-mono { font-weight: 500; color: var(--text); } .jh-list-page table.jh-stack .jh-c-status { order: 2; flex: 0 1 auto; max-width: 50%; margin-left: auto; text-align: right; } .jh-list-page table.jh-stack .jh-c-status .jh-label-sub { margin: 6px 0 0; } .jh-list-page table.jh-stack td[data-label] { order: 3; flex: 1 1 calc(50% - 8px); font-size: 13px; color: var(--text); } .jh-list-page table.jh-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; color: var(--text-muted); } .jh-list-page table.jh-stack td.jh-c-action { order: 4; flex: 1 1 100%; padding-top: 12px !important; border-top: 1px solid var(--border-muted) !important; text-align: right; } .jh-list-page table.jh-stack td.dataTables_empty { flex: 1 1 100%; text-align: center; color: var(--text-muted); } /* info / pagination / page length: centred, not floated */ .jh-list-page .dataTables_wrapper .dataTables_info { float: none; padding: 4px 0 10px; text-align: center; } .jh-list-page .dataTables_wrapper .dataTables_paginate { float: none; display: flex; justify-content: center; } .jh-list-page .dataTables_wrapper .dataTables_length { float: none; margin-top: 10px; text-align: center; } } @media (max-width: 767.98px) and (hover: hover) { .jh-list-page table.jh-stack > tbody > tr:hover { background: var(--bg-lifted); } } /* ============ step 5d: Service details — mock 3f ============ * Tabs: includes/jh-service-tabs.tpl · shortcuts: includes/jh-service-shortcuts.tpl · * "Information": includes/jh-service-info.tpl · cPanel overview override: modules/servers/cpanel/overview.tpl */ /* shortcuts row: small text cards with ↗ */ .jh-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .jh-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .jh-shortcut:hover, .jh-shortcut:focus-visible { color: var(--text); background: var(--bg-lifted); border-color: var(--border-lifted); text-decoration: none; } .jh-shortcut > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jh-shortcut-go { flex: none; color: var(--primary); font-size: 13px; } .jh-shortcut .loading { flex: none; color: var(--text-muted); } .jh-shortcut.disabled { opacity: .55; pointer-events: none; } @media (max-width: 1199.98px) { .jh-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .jh-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* "Resource usage" + "Billing" side by side */ .jh-svc-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; } .jh-svc-grid > .card { margin-bottom: 0; height: 100%; } @media (max-width: 991.98px) { .jh-svc-grid { grid-template-columns: minmax(0, 1fr); } } .jh-svc-card .card-header, .jh-info-grid .card-header, #jhTabInfo > .card .card-header { background: transparent; border-bottom: 0; padding-bottom: 0; } /* horizontal usage bars */ .jh-meter + .jh-meter { margin-top: 16px; } .jh-meter-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 13px; color: var(--text-lifted); } .jh-meter-head .jh-mono { color: var(--text); white-space: nowrap; } .jh-meter-track { height: 6px; background: var(--border-muted); border-radius: 99px; overflow: hidden; } .jh-meter-track > span { display: block; height: 100%; min-width: 0; background: var(--primary); border-radius: inherit; transition: width .4s ease; } .jh-meter.is-warn .jh-meter-track > span { background: var(--warning); } .jh-meter.is-danger .jh-meter-track > span { background: var(--error); } .jh-meter-note { margin-top: 14px; font-size: 12px; color: var(--text-muted); } .jh-meter-note.is-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: var(--jh-warning-text); background: var(--jh-warning-soft); border: 1px solid var(--jh-warning-border); border-radius: var(--rounding-sm); } @media (prefers-reduced-motion: reduce) { .jh-meter-track > span, .jh-shortcut { transition: none; } } /* label → value lists */ .jh-dl { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; } .jh-dl dt { font-weight: 400; color: var(--text-lifted); } .jh-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } /* "Billing": label left, value right, as in the mock */ .jh-dl-row { display: block; } .jh-dl-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; } .jh-dl-row dd { font-weight: 600; text-align: right; } /* "Information" tab */ .jh-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; } .jh-info-grid > .card { margin-bottom: 0; } @media (max-width: 991.98px) { .jh-info-grid { grid-template-columns: minmax(0, 1fr); } } /* ============ step 5e: Domain details — mock 3h ============ * Side column: includes/jh-domain-side.tpl · Nameservers with segmented choice · Overview as a list */ .jh-domain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; } .jh-domain-main > .tab-content { margin-bottom: 0; } .jh-domain-side > .card { margin-bottom: 16px; } @media (max-width: 991.98px) { .jh-domain-grid { grid-template-columns: minmax(0, 1fr); } } .jh-domain-facts { max-width: 640px; } /* switches (switch button that submits its own form) */ .jh-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 7px 0; } .jh-toggle-label { font-weight: 600; font-size: 14px; color: var(--text); } .jh-toggle-hint { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); } /* the .jh-switch is defined further up (domain list); here only the button variant with aria-checked */ button.jh-switch { flex: none; padding: 0; border: 0; cursor: pointer; transition: background-color .15s ease; } .jh-switch[aria-checked="true"] { background: var(--primary); } .jh-switch[aria-checked="true"]::after { transform: translateX(16px); } button.jh-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { button.jh-switch { transition: none; } } /* EPP code */ .jh-epp { display: flex; gap: 10px; align-items: stretch; } .jh-epp-mask { flex: 1; display: flex; align-items: center; min-width: 0; padding: 8px 14px; letter-spacing: .2em; color: var(--text-lifted); background: var(--bg-lifted); border-radius: var(--rounding-sm); } /* Nameservers: segmented choice + NS rows */ .jh-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .jh-segment { position: relative; margin: 0; } .jh-segment input { position: absolute; opacity: 0; pointer-events: none; } .jh-segment span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 12px; font-weight: 600; font-size: 14px; color: var(--text); text-align: center; cursor: pointer; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-sm); } .jh-segment input:checked + span { background: var(--jh-primary-soft); border-color: var(--primary); } .jh-segment input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .jh-ns-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 12px; } .jh-ns-label { margin: 0; font-size: 12px; color: var(--text-muted); } .jh-ns-form .btn-primary { margin-top: 6px; } /* ============ step 5g: Top bar — account avatar · global search (⌘K) ============ */ .jh-account-toggle { padding: 4px !important; } .jh-account-toggle::after { display: none; } /* no dropdown caret, as in the mock */ .jh-avatar-ini { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; gap: 0; } .jh-avatar-ini > span { display: inline-block; max-width: none; overflow: hidden; font-size: 0; line-height: 1; white-space: nowrap; } .jh-avatar-ini > span::first-letter { font-size: 13px; letter-spacing: .02em; } .jh-account-toggle:hover .jh-avatar-ini, .jh-account-toggle:focus-visible .jh-avatar-ini { border-color: var(--border-lifted); background: var(--bg-accented); } .jh-bar .jh-account > li > a.jh-account-toggle { padding: 0; border-radius: 50%; } .jh-bar .jh-account-toggle .jh-avatar { width: 38px; height: 38px; } .jh-account .jh-account-name { padding: 6px 14px 8px; margin-bottom: 4px; font-weight: 600; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border-muted); list-style: none; } .jh-search-pop { position: absolute; z-index: 1060; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 480px); overflow-y: auto; padding: 4px 6px 6px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); box-shadow: var(--jh-shadow-pop); } .jh-search-pop[hidden] { display: none; } .jh-search-group { padding: 10px 10px 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } /* 1.7.0 (6.3): row = icon · title + detail · ↗ (new tab) / ↵ (selected row, keyboard) */ .jh-search-opt { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 38px; padding: 5px 10px; font-size: 14px; color: var(--text); text-decoration: none; border-radius: var(--rounding-sm); } .jh-search-opt:hover, .jh-search-opt.is-active { color: var(--text); background: var(--bg-lifted); text-decoration: none; } .jh-search-opt-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } .jh-search-opt-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .jh-search-opt-sub { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow: hidden; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; } /* review 1.7.0: may shrink, the title keeps priority */ .jh-search-opt-sub.is-danger { color: var(--jh-error-text); } .jh-search-opt-sub.is-warning { color: var(--jh-warning-text); } .jh-search-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--text-lifted); background: var(--bg-lifted); border-radius: 7px; } .jh-search-ico.is-danger { color: var(--jh-error-text); background: var(--jh-error-soft); } .jh-search-ico.is-warning { color: var(--jh-warning-text); background: var(--jh-warning-soft); } .jh-search-ico.is-info, .jh-search-ico.is-action { color: var(--jh-primary-text); background: var(--jh-primary-soft); } .jh-search-opt-end { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 18px; } .jh-search-ext { font-size: 13px; color: var(--text-muted); } .jh-search-enter { display: none; padding: 0 5px; font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--text-lifted); background: var(--bg-muted); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } .jh-search-opt.is-active .jh-search-enter { display: inline-block; } .jh-search-opt.is-kb { margin-top: 4px; border-top: 1px solid var(--border-muted); border-radius: 0 0 var(--rounding-sm) var(--rounding-sm); } .jh-search-opt.is-kb .jh-search-opt-title { color: var(--primary); } .jh-search-empty { padding: 10px; font-size: 13px; color: var(--text-muted); } .jh-search-foot { position: sticky; bottom: -6px; margin: 6px -6px -6px; padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: var(--bg); border-top: 1px solid var(--border-muted); } @media (min-width: 768px) { /* wider than the field (room for the action details), never past the screen: the field starts ~230px from the left at 768–1023px, where it is only ~105–170px wide (review 1.7.0) */ .jh-bar .jh-search-pop { right: auto; width: max(100%, min(540px, calc(100vw - 250px))); } } @media (pointer: coarse) { /* key hints only where there is a keyboard (3 classes: beats .jh-search-opt.is-active .jh-search-enter) */ .jh-search-pop .jh-search-foot, .jh-search-pop .jh-search-opt.is-active .jh-search-enter { display: none; } } /* ============ 5j — Domain renewal & transfer (standard_cart), in the style of the domain search (5i) ============ */ /* -- Without the "Categories / Actions" column, as in the search: full width for the content -- */ body #order-standard_cart .cart-sidebar:has(~ .cart-body #domainRenewals), body #order-standard_cart .cart-sidebar:has(~ .cart-body #frmDomainTransfer), body #order-standard_cart .cart-sidebar:has(~ .cart-body #frmCheckout) { display: none; } body #order-standard_cart .cart-body:has(#domainRenewals), body #order-standard_cart .cart-body:has(#frmDomainTransfer), body #order-standard_cart .cart-body:has(#frmCheckout) { float: none; width: 100%; } /* -- Alignment: Nexus zeroes the .cart-body padding (!important) but keeps the .row -15px, so all cart pages started 15px further left than the breadcrumb and the other pages. -- */ body #order-standard_cart > .row { margin-left: 0; margin-right: 0; } body #order-standard_cart > .row > .cart-sidebar { padding-left: 0; } /* -- Cart page titles: --primary dot (README §7); the renewal filter on the right -- */ body #order-standard_cart .header-lined h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } body #order-standard_cart .header-lined h1::after { content: "."; order: 1; margin-left: -12px; color: var(--primary); } body #order-standard_cart .header-lined h1 > .float-right { order: 2; margin-left: auto; float: none !important; } body #order-standard_cart .form-control.domain-renewals-filter, body #order-standard_cart .form-control.service-renewals-filter { width: 260px !important; padding: 9px 12px 9px 40px !important; font-family: var(--font-sans); font-size: 13px !important; font-weight: 400; letter-spacing: 0; background-color: var(--bg) !important; border: 1px solid var(--border); border-radius: var(--rounding-sm) !important; } /* -- Renewal: one card with thin rows (like the search results), domain in mono -- */ body #order-standard_cart #domainRenewals.domain-renewals { margin: 0 0 14px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); overflow: hidden; } body #order-standard_cart #domainRenewals .domain-renewal, body #order-standard_cart #domainRenewals .domain-renewal:nth-child(even) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; align-items: center; padding: 16px 20px; background: transparent; border-bottom: 1px solid var(--border-muted); border-radius: 0; } body #order-standard_cart #domainRenewals .domain-renewal:last-child { border-bottom: 0; } body #order-standard_cart #domainRenewals .domain-renewal > h3 { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--text); } body #order-standard_cart #domainRenewals .domain-renewal > .float-right { grid-column: 2; grid-row: 1; justify-self: end; float: none !important; } body #order-standard_cart #domainRenewals .domain-renewal > p { grid-column: 1; margin: 0; font-size: 13px; color: var(--text-lifted); } body #order-standard_cart #domainRenewals .domain-renewal > p.domain-renewal-desc { grid-column: 1 / -1; } body #order-standard_cart #domainRenewals .domain-renewal > form { grid-column: 1; margin-top: 8px; } body #order-standard_cart #domainRenewals .domain-renewal > .text-right { grid-column: 2; align-self: end; } body #order-standard_cart #domainRenewals .domain-renewal > .text-right:empty { display: none; } body #order-standard_cart #domainRenewals .domain-renewal .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; } body #order-standard_cart #domainRenewals .domain-renewal .form-group > label { flex: none; max-width: none; width: auto; margin: 0; padding: 0; font-size: 13px; font-weight: 500; color: var(--text-lifted); } body #order-standard_cart #domainRenewals .domain-renewal .form-group > div { flex: 0 1 300px; max-width: 300px; padding: 0; } body #order-standard_cart #domainRenewals .domain-renewal .label { border-radius: 999px; } body #order-standard_cart #domainRenewals .domain-renewal .btn-add-renewal-to-cart { white-space: nowrap; } @media (max-width: 575.98px) { /* mobile: single column — badge, domain, date, period, button */ body #order-standard_cart #domainRenewals .domain-renewal, body #order-standard_cart #domainRenewals .domain-renewal:nth-child(even) { grid-template-columns: minmax(0, 1fr); } body #order-standard_cart #domainRenewals .domain-renewal > * { grid-column: 1 !important; grid-row: auto !important; } body #order-standard_cart #domainRenewals .domain-renewal > .float-right, body #order-standard_cart #domainRenewals .domain-renewal > .text-right { justify-self: start; } body #order-standard_cart #domainRenewals .domain-renewal .form-group > div { flex: 1 1 100%; max-width: none; } body #order-standard_cart .header-lined h1 > .float-right { flex: 1 1 100%; margin-left: 0; } body #order-standard_cart .form-control.domain-renewals-filter { width: 100% !important; } } /* -- Order summary (all standard_cart pages): card with mono eyebrow and large mono total -- */ body #order-standard_cart .order-summary { margin: 0 0 14px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } body #order-standard_cart .order-summary h2 { margin: 0; padding: 18px 20px 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--text-lifted); background: transparent; border: 0; border-radius: 0; } body #order-standard_cart .order-summary h2::before { content: "// "; } body #order-standard_cart .order-summary .summary-container { min-height: 0; padding: 6px 20px 18px; font-size: 13px; color: var(--text); background: transparent; border: 0; border-radius: 0; } body #order-standard_cart .order-summary .summary-container .float-right { font-family: var(--font-mono); } body #order-standard_cart .order-summary .total-due-today { margin-top: 10px; text-align: right; } body #order-standard_cart .order-summary .total-due-today .amt { display: block; font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); } body #order-standard_cart .order-summary .total-due-today span:not(.amt) { font-size: 12px; color: var(--text-muted); } body #order-standard_cart #btnGoToCart { display: block; width: 100%; } /* -- Transfer: centred 640px card, domain and EPP in mono (README §9) -- */ body #order-standard_cart .cart-body:has(#frmDomainTransfer) > .text-center h2 { margin: 8px 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } body #order-standard_cart .cart-body:has(#frmDomainTransfer) > .text-center p { font-size: var(--text-md); color: var(--text-lifted); } body #order-standard_cart #frmDomainTransfer > .row > [class*="col-sm-8"] { flex: 0 0 100%; max-width: 640px; margin-left: auto; margin-right: auto; } body #order-standard_cart #inputTransferDomain, body #order-standard_cart #inputAuthCode { font-family: var(--font-mono); } body #order-standard_cart .cart-body:has(#frmDomainTransfer) > p.small { margin-top: 14px; font-size: 12px; color: var(--text-muted); } /* ============ 5l — Checkout (standard_cart), as a continuation of the cart (mock 3d) ============ jethost.js splits the form into two columns: .jh-co-main (account, details, payment method, notes) and .jh-co-side (summary card: due today · terms · "Complete order"). Without JS it stays a single column. */ /* -- sections: mono eyebrow "// …" instead of a centred rule (all standard_cart pages) -- */ body #order-standard_cart .sub-heading { height: auto; margin: 28px 0 12px; text-align: left; border-top: 0; } body #order-standard_cart .sub-heading span, body #order-standard_cart .sub-heading-borderless span { position: static; top: auto; display: inline; padding: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); background: transparent; } body #order-standard_cart .sub-heading span::before { content: "// "; } body #order-standard_cart .already-registered p { margin: 0 0 4px; font-size: var(--text-md); color: var(--text-lifted); } /* -- two columns -- */ body #order-standard_cart #frmCheckout.jh-co { display: flex; align-items: flex-start; gap: 32px; } body #order-standard_cart #frmCheckout.jh-co > .jh-co-main { flex: 1 1 auto; min-width: 0; } body #order-standard_cart #frmCheckout.jh-co > .jh-co-main > .sub-heading:first-of-type, body #order-standard_cart #frmCheckout.jh-co > .jh-co-main > input:first-child ~ .sub-heading:first-of-type { margin-top: 8px; } body #order-standard_cart #frmCheckout.jh-co > .jh-co-side { flex: 0 0 380px; position: sticky; top: calc(var(--jh-header-h, 0px) + 16px); margin-top: 8px; } @media (max-width: 991.98px) { body #order-standard_cart #frmCheckout.jh-co { flex-direction: column; align-items: stretch; } body #order-standard_cart #frmCheckout.jh-co > .jh-co-side { flex: none; position: static; } } /* -- summary card (mock: "// SUMMARY") -- */ .jh-co-card { padding: 22px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--rounding-md); } .jh-co-title { margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lifted); } .jh-co-title::before { content: "// "; } body #order-standard_cart .jh-co-card #totalDueToday { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 18px; padding: 0 0 18px; font-size: 15px; font-weight: 600; text-align: left; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--border-muted); border-radius: 0; } body #order-standard_cart .jh-co-card #totalDueToday::before { content: none; } body #order-standard_cart .jh-co-card #totalCartPrice { font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } body #order-standard_cart .jh-co-card .text-center { text-align: left; } body #order-standard_cart .jh-co-card .text-center p { margin: 0 0 14px; font-size: 13px; color: var(--text-lifted); } body #order-standard_cart .jh-co-card label.checkbox-inline { display: block; margin: 0; padding: 0; text-align: left; line-height: 1.6; } body #order-standard_cart .jh-co-card label.checkbox-inline input { margin-right: 4px; vertical-align: -2px; } body #order-standard_cart .jh-co-card label.checkbox-inline a { text-decoration: underline; text-underline-offset: 3px; } /* link inside text: not colour alone (WCAG 1.4.1) */ body #order-standard_cart .jh-co-card #btnCompleteOrder { width: 100%; padding: 13px 18px; font-size: 15px; } /* security message: subtle note below the card, not an orange warning (mock: "Secure payment") */ body .jh-co-side .checkout-security-msg { margin: 12px 4px 0; padding: 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--text-muted); background: transparent; border: 0; } body .jh-co-side .checkout-security-msg::before { content: none; } body .jh-co-side .checkout-security-msg strong { font-family: var(--font-mono); font-weight: 500; color: var(--text-lifted); } /* -- account: selectable cards, the selected one with 2px --primary (README §8) -- */ body #order-standard_cart #frmCheckout #containerExistingAccountSelect { margin: 0 -5px; border: 0; } body #order-standard_cart #frmCheckout #containerExistingAccountSelect > [class*="col-"] { padding: 5px; } body #order-standard_cart #frmCheckout #containerExistingAccountSelect .account { height: 100%; margin: 0; padding: 14px 16px; font-size: 13px; color: var(--text-lifted); background: var(--bg-muted); border: 1px solid var(--border) !important; border-radius: var(--rounding-sm) !important; } body #order-standard_cart #frmCheckout #containerExistingAccountSelect .account.active { padding: 13px 15px; background: var(--jh-primary-soft); border: 2px solid var(--primary) !important; } body #order-standard_cart #frmCheckout #containerExistingAccountSelect .account strong { font-size: var(--text-md); color: var(--text); } /* -- payment method: selectable cards as in mock 3d -- */ body #order-standard_cart #paymentGatewaysContainer > p { margin-bottom: 10px; font-size: 13px; color: var(--text-lifted) !important; } body #order-standard_cart #paymentGatewaysContainer > .text-center { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; text-align: left; } /* auto-fit: the cards stretch across the full width */ body #order-standard_cart #paymentGatewaysContainer label.radio-inline { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--text); cursor: pointer; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s ease-out, background-color .15s ease-out; } body #order-standard_cart #paymentGatewaysContainer label.radio-inline:hover { border-color: var(--border-lifted); } /* the radio (and the iCheck wrapping it) is not squeezed by long names, e.g. "Cash on delivery at our offices" */ body #order-standard_cart #paymentGatewaysContainer label.radio-inline > input, body #order-standard_cart #paymentGatewaysContainer label.radio-inline > div { flex: none; margin: 0; } body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked), body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(.checked) { padding: 15px 17px; background: var(--jh-primary-soft); border: 2px solid var(--primary); } body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:focus-visible) { outline: 2px solid var(--jh-focus); outline-offset: 2px; } /* -- account balance, card, notes -- */ body #order-standard_cart .apply-credit-container { padding: 14px 18px; border: 1px solid var(--border-muted); border-radius: var(--rounding-sm); } body #order-standard_cart #frmCheckout textarea.form-control { min-height: 110px; } /* ============ 5m — Account details (clientareadetails.tpl, mock 3o) ============ */ .jh-account-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; } .jh-account-main .card, .jh-account-side .card { margin-bottom: 16px; } .jh-card-eyebrow { margin-bottom: 16px; } .jh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .jh-form-grid > .form-group { min-width: 0; margin-bottom: 14px; } .jh-form-grid .col-form-label { padding-top: 0; } .jh-form-grid .control .form-control, .jh-form-grid .control select { width: 100%; } .jh-form-grid .control { font-size: 12px; color: var(--text-muted); } /* custom field description below the input */ .jh-form-grid .control .form-control, .jh-form-grid .control .iti { margin-bottom: 4px; font-size: var(--text-md); } .jh-form-grid .iti { display: block; width: 100%; } .jh-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 16px; } .jh-account-main .controls.form-check label { display: block; margin: 0 0 8px; font-size: var(--text-md); color: var(--text); } .jh-account-main .controls.form-check br { display: none; } /* Nexus puts a
between the labels */ /* right column: title/subtitle rows + action (mock: "// SECURITY") */ .jh-account-side { position: sticky; top: calc(var(--jh-header-h, 0px) + 16px); } .jh-side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; } .jh-side-row + .jh-side-row { border-top: 1px solid var(--border-muted); } .jh-side-title { font-size: 15px; font-weight: 500; color: var(--text); } .jh-side-sub { margin-top: 2px; font-size: 13px; color: var(--text-muted); } .jh-side-row .btn { flex: none; } @media (max-width: 1199.98px) { .jh-account-cols { grid-template-columns: minmax(0, 1fr); } .jh-account-side { position: static; } } @media (max-width: 767.98px) { .jh-form-grid { grid-template-columns: minmax(0, 1fr); } } /* ============ 5h — ACCESSIBILITY & BREADCRUMB (README §11–§13) ============ */ /* -- Skip link: first element of , visible only with the keyboard -- */ .jh-skip { position: absolute; z-index: 2000; top: 8px; left: 8px; padding: 10px 16px; font-weight: 600; color: var(--text-inverted); background: var(--primary); border-radius: var(--rounding-sm); transform: translateY(-200%); } .jh-skip:focus, .jh-skip:focus-visible { transform: none; color: var(--text-inverted); outline: 2px solid var(--text); outline-offset: 2px; } /* The skip-link target (#main-body, tabindex=-1): no ring, and not hidden under the sticky header */ section#main-body { scroll-margin-top: var(--jh-header-h, 0px); } section#main-body:focus { outline: none; } /* -- Focus-visible: 2px --primary, offset 2px, on ALL interactive elements (README §11) -- Form fields keep their own focus style (2px --primary border, README §9). */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="radio"]:focus-visible, [role="switch"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .list-group-item:focus-visible, label.btn:focus-within { outline: 2px solid var(--jh-focus); outline-offset: 2px; box-shadow: none; } /* Inside menus/lists/cards with overflow: the ring is drawn inwards so it isn't clipped */ .dropdown-item:focus-visible, .list-group-item:focus-visible, .jh-search-opt:focus-visible, .nav-tabs .nav-link:focus-visible, .table a:focus-visible, .jh-subnav a:focus-visible { outline-offset: -2px; } .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--jh-focus); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } /* -- The ☰ is not squeezed on mobile (at 390px the top-bar flex shrank it to 20px and the lines disappeared) → flex: none on .jh-burger -- Drawer (<1024px): closed = out of the Tab order and hidden from screen readers (visibility after the slide) -- */ @media (max-width: 1023.98px) { .jh-sidebar { visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; } html.jh-drawer-open .jh-sidebar { visibility: visible; transition: transform .2s ease-out, visibility 0s linear 0s; } } /* -- Breadcrumb (README §9): 13px --text-muted, current item in --text, "Services / Pro Hosting" -- Only where there are ≥2 items (header.tpl: $jhCrumbs). Same vertical position as the list eyebrow (mock 3e/3f). */ .jh-app .master-breadcrumb .breadcrumb { flex-wrap: nowrap; padding: 28px 0 12px; line-height: 1.4; } .jh-app .master-breadcrumb .breadcrumb-item { min-width: 0; white-space: nowrap; } .jh-app .master-breadcrumb .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; } .jh-app .master-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 6px; } .jh-app .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { padding-right: 6px; content: "/"; } .jh-app .master-breadcrumb .breadcrumb a:hover { color: var(--text); } .jh-app.jh-no-crumbs section#main-body { padding-top: 28px; } /* -- Markdown editor: the status line ("Saved") used a Nexus gray below AA -- */ .markdown-editor-status { color: var(--text-muted); } /* -- Touch targets ≥44px on touch devices (README §12) -- */ @media (pointer: coarse) { .jh-nav-item, .jh-subnav a, .jh-pill, .jh-theme-toggle button, .jh-icon-btn, .jh-burger, .page-link, .btn, .dropdown-item, .nav-tabs .nav-link, .jh-account-toggle { min-height: 44px; } .jh-pill, .jh-theme-toggle button, .page-link, .btn, .nav-tabs .nav-link { display: inline-flex; align-items: center; justify-content: center; } .jh-icon-btn, .jh-burger, .jh-account-toggle { min-width: 44px; } .jh-subnav a, .dropdown-item { display: flex; align-items: center; } } /* -- 1.6.0: on touch devices every top-bar control is 44px (same height for all, README §12) -- */ @media (pointer: coarse) { .jh-theme-toggle { height: 44px; } .jh-theme-toggle button { min-height: 0; } .jh-header .btn.btn-primary, .jh-admin-pill { height: 44px; } .jh-bar .jh-account-toggle .jh-avatar { width: 44px; height: 44px; } } /* -- 1.6.1 (F-028): mobile top bar. Below 768px: ☰ · "J" · (admin) · theme icon · bell · cart · avatar — every control 44px and borderless, so everything fits down to 360px (before, the page got wider than the screen: avatar off-screen, bell sheet cut). Search and «+ New service» move to the drawer top (jethost.js moves the one search form there); the drawer (<1024px) starts with the logo + close. Desktop unchanged. -- */ .jh-theme-icon, .jh-drawer-head, .jh-drawer-tools { display: none; } .jh-theme-icon .jh-theme-sun { display: none; } [data-theme="dark"] .jh-theme-icon .jh-theme-moon { display: none; } [data-theme="dark"] .jh-theme-icon .jh-theme-sun { display: block; } @media (max-width: 1023.98px) { .jh-drawer-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; height: 68px; margin: -20px -12px 14px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--border-muted); } .jh-drawer-head .jh-logo-word { font-size: 20px; } .jh-drawer-close { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--text-lifted); background: transparent; border: 0; border-radius: var(--rounding-sm); cursor: pointer; } .jh-drawer-close:hover { color: var(--text); background: var(--bg-lifted); } .jh-sidebar button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* tablets: with the "Admin · Back" text the bar overflowed up to ~860px (review of 1.6.1) → icon only, as on phones */ .jh-app .jh-bar .jh-admin-pill { justify-content: center; width: 38px; padding: 0; } .jh-app .jh-bar .jh-admin-pill span { display: none; } } @media (max-width: 1023.98px) and (pointer: coarse) { .jh-app .jh-bar .jh-admin-pill { width: 44px; } } @media (max-width: 767.98px) { .jh-app .jh-bar { gap: 4px; padding: 0 8px; } .jh-app .jh-bar .jh-search, .jh-app .jh-bar .jh-theme-toggle, .jh-app .jh-bar .jh-logo-word { display: none; } /* 1.6.2: the bar's «+ New service» (it lives in the drawer here). Needs 3 classes + a later position to beat .jh-header .btn.btn-primary { display: inline-flex } — the old 2-class rule never applied, so 1.6.1 showed it 3 times */ .jh-app .jh-bar .jh-btn-new { display: none; } .jh-app .jh-bar-right { gap: 4px; } .jh-app .jh-bar .jh-burger { width: 44px; height: 44px; padding: 14px 12px; border-color: transparent; border-radius: 10px; } .jh-app .jh-bar .jh-logo { justify-content: center; width: 44px; height: 44px; } .jh-app .jh-bar .jh-icon-btn { width: 44px; height: 44px; border-color: transparent; border-radius: 10px; } .jh-app .jh-bar .jh-theme-icon { display: inline-grid; } .jh-app .jh-bar .jh-icon-badge { top: 4px; right: 2px; box-shadow: 0 0 0 2px var(--bg-muted); } .jh-app .jh-bar .jh-admin-pill { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; } .jh-app .jh-bar .jh-admin-pill svg { width: 18px; height: 18px; } .jh-app .jh-bar .jh-account > li > a.jh-account-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .jh-app .jh-bar .jh-account-toggle .jh-avatar { width: 36px; height: 36px; } .jh-drawer-tools { display: flex; flex: none; flex-direction: column; gap: 10px; margin: 0 0 14px; } .jh-drawer-search { position: relative; } .jh-drawer-search > svg { position: absolute; z-index: 1; top: 14px; left: 13px; color: var(--text-muted); pointer-events: none; } .jh-drawer-tools .jh-search { display: block; flex: none; max-width: none; } .jh-drawer-tools .jh-search-input { height: 44px; padding: 0 12px 0 38px; font-family: var(--font-sans); font-size: 16px; } /* ≥16px: iOS does not zoom on focus */ .jh-drawer-tools .jh-drawer-new { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; } /* dashboard: Search / + New service stay in the page head here (the bar no longer has them), side by side */ .jh-home-actions { width: 100%; } .jh-home-actions > .btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-height: 44px; } /* 1.7.0 (6.3): results and actions inside the drawer, in the flow (they push «+ New service» and the menu down), two lines per row; no key hints on phones (4 classes: beat .jh-search-opt.is-active .jh-search-enter) */ .jh-drawer-tools .jh-search-pop { position: static; max-height: none; margin: 8px -4px 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .jh-drawer-tools .jh-search-opt { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 52px; padding: 7px 8px; } .jh-drawer-tools .jh-search-ico { width: 30px; height: 30px; } .jh-drawer-tools .jh-search-opt-body { flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; } .jh-drawer-tools .jh-search-opt-title { line-height: 1.3; white-space: normal; } .jh-drawer-tools .jh-search-opt-sub { max-width: none; line-height: 1.35; } .jh-drawer-tools .jh-search-group { padding: 10px 8px 4px; } .jh-drawer-tools .jh-search-pop .jh-search-foot, .jh-drawer-tools .jh-search-opt.is-active .jh-search-enter { display: none; } } @media (max-width: 359.98px) { /* 320px with the admin icon: 348px of controls → the "J" goes (the drawer has the logo) */ .jh-app .jh-bar:has(.jh-admin-pill) .jh-logo { display: none; } } @media (min-width: 768px) { .jh-home-actions { display: none; } /* the top bar right above already has the search and «+ New service» */ } /* ============ 1.8.0 — 6.7 Infrastructure status (mockup 6.7): banners, card, bell dot, login panel, /jhstatus.php ============ */ /* banners (includes/jh-status-banner.tpl): soft background + line per tone, icon in a circle, link / ✕ on the right */ .jh-status-banners { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .jh-status-banner { --jh-st-soft: var(--jh-primary-soft); --jh-st-line: var(--jh-primary-line); --jh-st-text: var(--jh-primary-text); display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--jh-st-soft); border: 1px solid var(--jh-st-line); border-radius: 12px; } .jh-status-banner.is-error { --jh-st-soft: var(--jh-error-soft); --jh-st-line: var(--jh-error-line); --jh-st-text: var(--jh-error-text); } .jh-status-banner.is-warning { --jh-st-soft: var(--jh-warning-soft); --jh-st-line: var(--jh-warning-border); --jh-st-text: var(--jh-warning-text); } .jh-status-banner.is-success { --jh-st-soft: var(--jh-success-soft); --jh-st-line: var(--jh-success-line); --jh-st-text: var(--jh-success-text); } .jh-status-banner[hidden] { display: none; } .jh-status-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--jh-st-text); background: var(--bg-muted); border: 1px solid var(--jh-st-line); border-radius: 50%; } .jh-status-body { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; } .jh-status-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .jh-status-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); } .jh-status-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jh-st-text); } .jh-status-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); } .jh-status-note { margin: 4px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg-muted); border: 1px solid var(--border-muted); border-radius: 8px; overflow-wrap: anywhere; } .jh-status-note strong { font-weight: 600; } .jh-status-meta { margin: 2px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); } .jh-status-act { display: flex; flex: none; align-items: center; gap: 4px; } .jh-status-link { padding: 8px 4px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--jh-st-text); } .jh-status-link:hover, .jh-status-link:focus { color: var(--jh-st-text); text-decoration: underline; } .jh-status-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--text-lifted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .jh-status-close:hover { color: var(--text); background: var(--bg-muted); } .jh-status-close:focus-visible, .jh-status-link:focus-visible { outline: 2px solid var(--jh-focus); outline-offset: 2px; } /* card (includes/jh-status-card.tpl): one block per server, side by side; the last bento row on the dashboard */ .jh-span-12 { grid-column: 1 / -1; } .jh-status-card .jh-card-head h2 { margin: 0; } /* 1.8.3: on the service page the card sits between the shortcuts and the module's cards — same air as the shortcuts */ #tabOverview > .jh-status-card { margin-bottom: 20px; } .jh-status-updated { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .jh-status-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 28px; } .jh-status-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .jh-status-row-head, .jh-status-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .jh-status-row-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } .jh-status-row-name .jh-mono { font-size: 14px; font-weight: 600; color: var(--text); } .jh-status-row-sub { font-size: 12.5px; color: var(--text-lifted); overflow-wrap: anywhere; } .jh-status-pill { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text-lifted); background: var(--bg-lifted); border-radius: 999px; } .jh-status-pill::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; } .jh-status-pill.is-success { color: var(--jh-success-text); background: var(--jh-success-soft); } .jh-status-pill.is-error { color: var(--jh-error-text); background: var(--jh-error-soft); } .jh-status-pill.is-warning { color: var(--jh-warning-text); background: var(--jh-warning-soft); } .jh-status-row-note { font-size: 12.5px; font-weight: 500; color: var(--text-lifted); } .jh-status-row-note.is-success { color: var(--jh-success-text); } .jh-status-row-note.is-warning { color: var(--jh-warning-text); } .jh-status-row-note.is-info { color: var(--jh-primary-text); } /* one bar per day: green ≥ 99.95%, orange ≥ 99%, red below, grey without data (the title has date + %) */ .jh-status-bars { display: flex; align-items: stretch; gap: 2px; height: 24px; } .jh-status-bars.is-tall { height: 30px; } .jh-status-bars > span { flex: 1 1 0; min-width: 0; background: var(--success); border-radius: 2px; opacity: .8; } .jh-status-bars > .is-warn { background: var(--warning); opacity: 1; } .jh-status-bars > .is-down { background: var(--error); opacity: 1; } .jh-status-bars > .is-none { background: var(--border); opacity: 1; } .jh-status-scale { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); } .jh-status-uptime { font-weight: 600; color: var(--text-lifted); } /* bell: a dot over the icon while one of the client's servers has an outage (the count stays for actions) */ .jh-bell-btn { position: relative; } .jh-bell-status { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; background: var(--error); border: 2px solid var(--bg-muted); border-radius: 50%; } .jh-bell-status.is-warning { background: var(--warning); } .jh-bell-ico.is-ok { color: var(--jh-success-text); background: var(--jh-success-soft); } /* login panel (includes/jh-auth-brand.tpl): real status card above the tagline */ .jh-auth-statuscard { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin-bottom: 26px; padding: 20px 22px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 14px; } .jh-auth-statuscard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .jh-auth-statuscard-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--jh-success-text); } .jh-auth-statuscard-title.is-error { color: var(--jh-error-text); } .jh-auth-statuscard-title.is-warning { color: var(--jh-warning-text); } .jh-auth-statuscard-title.is-info { color: var(--jh-primary-text); } .jh-auth-statuscard-time { font-size: 11px; color: var(--text-muted); } .jh-auth-statuscard-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); } .jh-auth-status-dot { flex: none; } .jh-auth-status-dot.is-error { background: var(--error); } .jh-auth-status-dot.is-warning { background: var(--warning); } .jh-auth-status-dot.is-info { background: var(--primary); } .jh-auth-uptime { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--text-lifted); } .jh-auth-uptime-num { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--text); } .jh-auth-statuscard .jh-link-action { align-self: flex-start; } /* /jhstatus.php (status.tpl) */ .jh-status-overall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; padding: 14px 18px; background: var(--jh-success-soft); border: 1px solid var(--jh-success-line); border-radius: 12px; } .jh-status-overall.is-error { background: var(--jh-error-soft); border-color: var(--jh-error-line); } .jh-status-overall.is-warning { background: var(--jh-warning-soft); border-color: var(--jh-warning-border); } .jh-status-overall.is-info { background: var(--jh-primary-soft); border-color: var(--jh-primary-line); } .jh-status-overall-head { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); } .jh-status-overall .jh-auth-status-dot { width: 12px; height: 12px; } .jh-status-list { padding: 0; margin-bottom: 16px; } .jh-status-line { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px; } .jh-status-line + .jh-status-line { border-top: 1px solid var(--border-muted); } .jh-status-line-right { display: flex; flex: none; align-items: center; gap: 12px; } .jh-status-mine { padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--jh-primary-text); background: var(--jh-primary-soft); border-radius: 999px; } .jh-status-list-scale { padding: 0 22px 14px; } .jh-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 12px; } .jh-status-grid h2 { margin: 0 0 12px; } .jh-status-events { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .jh-status-events li { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text); } .jh-status-events li > span { color: var(--text-lifted); overflow-wrap: anywhere; } .jh-status-events.is-compact li { flex-direction: row; justify-content: space-between; gap: 12px; } .jh-status-none, .jh-status-empty p { margin: 0; font-size: 13.5px; color: var(--text-lifted); } .jh-status-foot { margin: 0 0 24px; font-size: 12.5px; color: var(--text-muted); } @media (max-width: 575.98px) { /* phones: the banner stacks (icon + text, then the link / ✕ row), bars thinner */ .jh-status-banner { flex-wrap: wrap; gap: 10px; padding: 14px; } .jh-status-body { flex-basis: calc(100% - 46px); } .jh-status-act { width: 100%; justify-content: space-between; } .jh-status-bars { gap: 1px; height: 20px; } .jh-status-line { padding: 14px 16px; } .jh-status-line-head { flex-direction: column; } .jh-status-list-scale { padding: 0 16px 12px; } .jh-auth-uptime-num { font-size: 32px; } } @media (max-width: 767.98px) { /* the phone bar's 44px borderless bell (1.6.1): the dot sits next to the icon, like the count does */ .jh-app .jh-bar .jh-bell-status { right: 7px; bottom: 9px; } } /* -- Reduced motion (README §11/§13): no motion anywhere; spinners stay because they show that something is loading -- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .fa-spin, .fa-spinner, .fa-circle-notch, .spinner-border, .spinner-grow { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; } }