15ab908836
Add a question-circle SVG mask to Help using the existing sidebar pseudo-element. Preserve shared icon geometry, theme colors and navigation behavior. Add full-app icon regression and correct the previous loading-recovery fixture. Production promotion remains gated by full main QA.
38 lines
4.3 KiB
CSS
38 lines
4.3 KiB
CSS
/* Use the shared sidebar pseudo-element, sizing and theme colors; no extra icon node. */
|
|
.sun-enterprise-sidebar header nav #ctHelpNav{--sun-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9.5%209a2.5%202.5%200%200%201%205%200c0%201.7-2.5%202-2.5%204M12%2017h.01%22%2F%3E%3C%2Fsvg%3E")}
|
|
#ctHelpDialog{box-sizing:border-box;width:min(980px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:min(820px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #d9ddda;border-radius:20px;background:#fafaf7;color:#263d31;font:15px/1.55 Arial,sans-serif;overflow:hidden;margin:auto}
|
|
#ctHelpDialog::backdrop{background:#152c27a6}
|
|
#ctHelpDialog[open]{display:flex;flex-direction:column}
|
|
#ctHelpDialog *{box-sizing:border-box}
|
|
#ctHelpDialog [hidden]{display:none!important}
|
|
#ctHelpDialog .ct-help-header{position:static!important;display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;background:#f1f4ed;border-bottom:1px solid #d9ddda;flex:none;min-height:0;width:auto;box-shadow:none}
|
|
#ctHelpDialog h2{margin:0;font-size:24px;color:#263d31}
|
|
#ctHelpDialog h3{font-size:19px;color:#263d31;margin:18px 0 10px}
|
|
#ctHelpDialog p{margin:8px 0 16px}
|
|
#ctHelpDialog #ctHelpEdition{margin:2px 0 0;font-size:12px;color:#617166}
|
|
#ctHelpDialog button{font:inherit;white-space:normal;border:1px solid #cdd5cb;border-radius:10px;background:white;color:#263d31;padding:10px 14px;min-height:44px;cursor:pointer;box-shadow:none;letter-spacing:normal;text-transform:none}
|
|
#ctHelpDialog button:focus-visible,#ctHelpDialog input:focus-visible,#ctHelpDialog select:focus-visible,#ctHelpDialog summary:focus-visible{outline:3px solid #b39b47;outline-offset:2px}
|
|
#ctHelpDialog #ctHelpClose{width:44px;flex:none;padding:0;font-size:28px}
|
|
#ctHelpDialog .ct-help-modes{display:flex;gap:8px;padding:12px 24px;border-bottom:1px solid #d9ddda;flex:none}
|
|
#ctHelpDialog .ct-help-modes button[aria-pressed=true]{background:#304f3d;color:#fff;border-color:#304f3d}
|
|
#ctHelpDialog .ct-help-content{padding:20px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
|
|
#ctHelpDialog section{display:block;padding:0;margin:0;max-width:none;background:none}
|
|
#ctHelpDialog .ct-help-filters{display:grid;grid-template-columns:2fr 1fr;gap:12px}
|
|
#ctHelpDialog label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#425447}
|
|
#ctHelpDialog input,#ctHelpDialog select{width:100%;min-width:0;height:46px;padding:10px;border:1px solid #cdd5cb;border-radius:10px;background:white;color:#263d31;font:16px Arial,sans-serif}
|
|
#ctHelpDialog #ctHelpReset{justify-self:start}
|
|
#ctHelpDialog #ctHelpStatus{color:#617166;font-size:13px}
|
|
#ctHelpDialog details{border:1px solid #dce1d9;border-radius:12px;margin:10px 0;background:white;overflow-wrap:anywhere}
|
|
#ctHelpDialog summary{padding:15px;cursor:pointer;font-weight:700;min-height:48px}
|
|
#ctHelpDialog summary small{display:block;font-weight:400;font-size:12px;color:#6e7a6f;margin:3px 0 0 17px}
|
|
#ctHelpDialog ol{padding:0 22px 0 40px;margin:0 0 16px}
|
|
#ctHelpDialog li{margin:10px 0}
|
|
#ctHelpDialog .ct-help-note{background:#f7f4e8;border-left:3px solid #c5b366;padding:12px;margin:14px 16px;font-size:14px}
|
|
#ctHelpDialog .ct-help-related,#ctHelpDialog .ct-help-prompts{display:flex;flex-wrap:wrap;gap:8px;margin:16px}
|
|
#ctHelpDialog .ct-help-prompts{margin:18px 0}
|
|
#ctHelpDialog .ct-help-related button{font-size:13px}
|
|
#ctHelpDialog .ct-help-badge{display:inline-block;padding:5px 10px;border-radius:20px;background:#ede9d5;color:#635629;font-size:12px}
|
|
.ct-help-login{display:block!important;margin:16px auto 0!important;background:transparent!important;border:0!important;color:#5b655b!important;text-decoration:underline;min-height:44px;font-size:14px!important;cursor:pointer}
|
|
@media(max-width:600px){#ctHelpDialog{border-radius:14px}#ctHelpDialog h2{font-size:20px}#ctHelpDialog .ct-help-header,#ctHelpDialog .ct-help-content{padding:16px}#ctHelpDialog .ct-help-modes{padding:10px 16px}#ctHelpDialog .ct-help-filters{grid-template-columns:1fr}#ctHelpDialog .ct-help-prompts{flex-direction:column}}
|
|
@media print{#ctHelpDialog{display:none!important}}
|