/* ========================================================================== Shared chrome for mimBo's module config pages (moderation, anti-raid, chat filter, appeals, dashboard). This is a faithful copy of the Welcome / Embed builder chrome: the portal is LOCKED to a navy theme with a blurred frost (.bg-frost), white panels, navy accent. Link AFTER /peppol/theme/theme.css, put class="peppol-themed" on , and add

. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --pastel-purple: #DCD0FF; --pastel-lavender: #E6E6FA; --white: #FFFFFF; --soft-shadow: rgba(15, 23, 42, 0.08); --dark-text: #1f2937; } /* Lock the theme to one navy brand, regardless of the time-based theme. */ html, html[data-theme] { --accent: #2f4b8f !important; --accent-rgb: 47, 75, 143 !important; --text-primary: #1f2937 !important; --bg-card: #ffffff !important; --bg-panel: #ffffff !important; --border-color: rgba(15, 23, 42, 0.10) !important; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--gradient-bg, linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #a5f3fc 100%)); background-attachment: fixed; color: var(--dark-text); min-height: 100vh; overflow-x: hidden; position: relative; } /* Styled page scrollbar (our unique slim bar) */ html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.32) transparent; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: transparent; } body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); background-clip: padding-box; } /* Inner scroll areas (white panels / checklists) get the same slim bar, tinted navy so it reads on a white background. */ .main-layout > .panel, .checklist { scrollbar-width: thin; scrollbar-color: rgba(47,75,143,0.32) transparent; } .main-layout > .panel::-webkit-scrollbar, .checklist::-webkit-scrollbar { width: 9px; } .main-layout > .panel::-webkit-scrollbar-track, .checklist::-webkit-scrollbar-track { background: transparent; } .main-layout > .panel::-webkit-scrollbar-thumb, .checklist::-webkit-scrollbar-thumb { background: rgba(47,75,143,0.28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .main-layout > .panel::-webkit-scrollbar-thumb:hover, .checklist::-webkit-scrollbar-thumb:hover { background: rgba(47,75,143,0.45); background-clip: padding-box; } /* Blurred navy background that matches the portal. */ .bg-frost { position: fixed; inset: 0; z-index: 1; pointer-events: none; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); background: linear-gradient(160deg, rgba(13,21,48,0.88) 0%, rgba(18,31,67,0.86) 50%, rgba(25,43,92,0.84) 100%); } /* Back button (top-left) */ .back-button { position: fixed; top: 20px; left: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; background: var(--white); border: none; cursor: pointer; box-shadow: 0 4px 15px var(--soft-shadow); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--dark-text); } .back-button:hover { transform: scale(1.1); } /* User avatar (top-right) + dropdown */ .user-avatar-button { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px var(--soft-shadow); transition: all 0.3s ease; overflow: hidden; border: 3px solid var(--white); display: none; } .user-avatar-button:hover { transform: scale(1.05); } .user-avatar-button img { width: 100%; height: 100%; object-fit: cover; } .dropdown-menu { position: fixed; top: 90px; right: 20px; background: var(--white); border-radius: 20px; box-shadow: 0 10px 40px var(--soft-shadow); padding: 10px; min-width: 200px; z-index: 999; display: none; } .dropdown-menu.active { display: block; } .dropdown-item { padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; color: var(--dark-text); } .dropdown-item:hover { background: var(--pastel-purple); } .dropdown-divider { height: 1px; background: var(--soft-shadow); margin: 8px 12px; } /* Container */ .container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 84px 20px 40px; min-height: 100vh; display: flex; flex-direction: column; } /* Header with bot avatar (text is white on the navy frost) */ .header { display: flex; align-items: flex-start; gap: 16px; margin: 8px 0 18px; flex-shrink: 0; } .header-avatar { width: 60px; height: 60px; border-radius: 18px; flex: none; object-fit: cover; margin-top: 2px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .header-text { min-width: 0; } .header h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.03em; color: #ffffff; text-shadow: 0 2px 14px rgba(0,0,0,0.35); margin-bottom: 4px; } .header p { color: rgba(255,255,255,0.85); text-shadow: 0 1px 10px rgba(0,0,0,0.3); font-size: 0.98rem; } .header .server-name { margin-top: 7px; font-size: 0.88rem; color: rgba(255,255,255,0.78); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; text-shadow: 0 1px 8px rgba(0,0,0,0.3); } .header .server-name .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; } /* Tabs (pill, white-on-navy) */ .tabs-container { display: flex; gap: 8px; margin-bottom: 18px; flex-shrink: 0; flex-wrap: wrap; } .tab-button { appearance: none; padding: 9px 18px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.08); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; color: rgba(255,255,255,0.7); } .tab-button:hover { color: #fff; background: rgba(255,255,255,0.14); } .tab-button.active { color: #1c2c5e; background: #fff; } .tab-button .pill { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 7px; border-radius: 9px; background: rgba(255,255,255,0.22); color: #fff; font-size: 0.72rem; } .tab-button.active .pill { background: rgba(47,75,143,0.16); color: #2f4b8f; } /* Panels (white cards) */ .panel { background: #ffffff; border: 1px solid rgba(15,23,42,0.07); border-radius: 18px; padding: 22px; box-shadow: 0 8px 30px var(--soft-shadow); margin-bottom: 18px; color: var(--dark-text); } .panel-head { margin-bottom: 6px; } .panel-head h2 { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--dark-text); } .panel-head p { color: #64748b; font-size: 0.86rem; margin-top: 3px; } /* Two-panel builder layout */ .main-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .main-layout > .panel { margin-bottom: 0; max-height: calc(100vh - 230px); overflow-y: auto; } .preview-bg { background: #ffffff; } @media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } .main-layout > .panel { max-height: none; } } .section-title { font-weight: 700; font-size: 1.05rem; color: var(--dark-text); margin: 26px 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(15,23,42,0.08); } .section-title:first-child { margin-top: 4px; } /* Setting row */ .setting { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px solid rgba(15,23,42,0.07); } .setting:first-of-type { border-top: none; padding-top: 4px; } .setting.stacked { flex-direction: column; align-items: stretch; gap: 10px; } .setting-info { flex: 1; min-width: 0; } .setting-label { font-weight: 600; color: #334155; font-size: 0.95rem; } .setting-desc { color: #94a3b8; font-size: 0.82rem; margin-top: 3px; max-width: 60ch; } .setting-control { flex-shrink: 0; } /* Form fields */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-weight: 600; color: #334155; margin-bottom: 8px; font-size: 0.9rem; } input[type="text"], input[type="url"], input[type="number"], textarea, select { width: 100%; padding: 12px 14px; border: 1px solid rgba(15,23,42,0.12); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #1f2937; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input::placeholder, textarea::placeholder { color: #9aa5b4; } input:focus, textarea:focus, select:focus { outline: none; border-color: #2f4b8f; box-shadow: 0 0 0 3px rgba(47,75,143,0.15); } textarea { min-height: 96px; resize: vertical; line-height: 1.5; } small.hint { display: block; margin-top: 6px; font-size: 0.82rem; color: #94a3b8; } .num-unit { display: inline-flex; align-items: center; gap: 9px; } .num-unit input[type="number"] { width: 96px; text-align: right; } .num-unit .unit { color: #64748b; font-size: 0.86rem; white-space: nowrap; } /* Toggle switch */ .toggle-switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-slider { width: 50px; height: 26px; min-width: 50px; background: #888888; border-radius: 13px; position: relative; transition: all 0.3s ease; border: 2px solid #666666; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); box-sizing: border-box; display: inline-block; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } .toggle-switch input[type="checkbox"]:checked ~ .toggle-slider { background: #2f4b8f; border-color: #2f4b8f; } .toggle-switch input[type="checkbox"]:checked ~ .toggle-slider::before { transform: translateX(24px); } /* Color picker */ .color-input-group { display: flex; gap: 10px; align-items: center; } .color-input-group input[type="color"] { width: 52px; height: 46px; border: 1px solid rgba(15,23,42,0.12); border-radius: 10px; cursor: pointer; padding: 4px; background: #fff; flex-shrink: 0; } .color-input-group input[type="text"] { flex: 1; } /* Checklist */ .checklist { max-height: 230px; overflow-y: auto; border: 1px solid rgba(15,23,42,0.12); border-radius: 12px; padding: 6px; } .check-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; color: #334155; } .check-item:hover { background: #f1f5f9; } .check-item input { width: 16px; height: 16px; accent-color: #2f4b8f; } .empty-note { color: #94a3b8; font-size: 0.84rem; padding: 10px; } /* Buttons (exact match to the builder pages) */ .btn { padding: 12px 22px; border: none; border-radius: 11px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* !important defeats theme.css's `body.peppol-themed .btn-primary` gradient, which is more specific than a plain `.btn-primary` rule and would otherwise paint every Save button with a navy-to-grey gradient. */ .btn-primary { background: #2f4b8f !important; color: var(--white); box-shadow: 0 4px 14px rgba(47,75,143,0.25); } .btn-primary:hover { background: #24386b !important; transform: translateY(-2px); } .btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; } .btn-ghost { background: #ffffff; color: #334155; border: 1px solid rgba(15,23,42,0.14); } .btn-ghost:hover { border-color: #2f4b8f; color: #2f4b8f; transform: translateY(-2px); } .btn-quiet { background: transparent; color: #94a3b8; border: 1px solid transparent; } .btn-quiet:hover { background: rgba(239,68,68,0.08); color: #ef4444; } .btn-green { background: #059669; color: #fff; } .btn-green:hover { background: #047857; transform: translateY(-2px); } .btn-red { background: #dc2626; color: #fff; } .btn-red:hover { background: #b91c1c; transform: translateY(-2px); } .btn-sm { padding: 8px 14px; font-size: 0.85rem; border-radius: 9px; } /* Save bar: plain right-aligned row (sticky with a navy fade on mobile). */ .action-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-bottom: 15px; flex-shrink: 0; } .save-status { color: rgba(255,255,255,0.9); font-size: 0.86rem; margin-right: auto; padding-left: 4px; text-shadow: 0 1px 8px rgba(0,0,0,0.3); } .save-status.ok { color: #6ee7b7; } .save-status.err { color: #fca5a5; } @media (max-width: 900px) { .action-bar { position: sticky; bottom: 0; z-index: 6; flex-wrap: wrap; padding: 10px 0 14px; background: linear-gradient(to top, rgba(13,21,48,0.95) 70%, rgba(13,21,48,0)); } .action-bar .btn { flex: 1; } /* Save status on its own line above the buttons, so neither gets squeezed. */ .save-status { flex: 1 0 100%; order: -1; margin: 0 0 2px; } } /* Gates / loading */ .gate { text-align: center; padding: 80px 20px; color: #fff; } .gate h2 { font-size: 1.4rem; margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,0.35); } .gate p { color: rgba(255,255,255,0.85); margin-bottom: 22px; } .spinner { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: mod-spin 0.8s linear infinite; margin: 70px auto; } @keyframes mod-spin { to { transform: rotate(360deg); } } .hidden, [hidden] { display: none !important; } @media (max-width: 720px) { .container { padding: 74px 14px 28px; } .panel { padding: 16px; border-radius: 16px; } .section-title { margin: 20px 0 12px; } .tab-button { padding: 11px 16px; } /* bigger tap target */ /* Stack each setting: label on top, full-width control below - easier to read and tap than a cramped single row. Compact toggles stay inline with their label (browsers without :has() just fall back to the stack). */ .setting { flex-direction: column; align-items: stretch; gap: 10px; } .setting-control { width: 100%; } .setting-desc { max-width: none; } .setting:has(.toggle-switch) { flex-direction: row; align-items: center; gap: 14px; } .setting:has(.toggle-switch) .setting-control { width: auto; } }