boban
/
mailwolt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mailwolt/resources/css/app.css

2465 lines
101 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

@import 'tailwindcss';
@import '../js/plugins/GlassToastra/style.css';
@import "../fonts/BaiJamjuree/font.css";
@import "../fonts/Space/font.css";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/wire-elements/modal/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-bai: 'Bai Jamjuree';
--font-space: 'Space Age';
--color-glass-bg: rgba(17, 24, 39, 0.55);
--color-glass-border: rgba(255, 255, 255, 0.08);
--color-glass-light: rgba(31, 41, 55, 0.4);
--color-accent: #06b6d4; /* cyan-500 */
--color-accent-600: #0891b2; /* cyan-600 */
--color-accent-700: #0e7490; /* cyan-700 */
--color-ring: rgba(124, 58, 237, .22);
--sidebar-collapsed: 5.2rem; /* ~83px */
--sidebar-expanded: 16rem; /* 256px */
/* Optional: max-width Tokens */
--max-w-sb-col: 5.2rem;
--max-w-sb-exp: 16rem;
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
.animate-pulse-slow {
animation: pulse-slow 4s ease-in-out infinite;
}
.safe-pads {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Falls nötig: dvh-Fallback */
@supports (height: 100dvh) {
.min-h-dvh { min-height: 100dvh; }
.h-dvh { height: 100dvh; }
}
@utility w-sb-col {
width: var(--sidebar-collapsed);
}
@utility w-sb-exp {
width: var(--sidebar-expanded);
}
/* Max-width utilities, if du sie brauchst */
@utility max-w-sb-col {
max-width: var(--max-w-sb-col);
}
@utility max-w-sb-exp {
max-width: var(--max-w-sb-exp);
}
@layer components {
/* Hauptkarte – entspricht dem helleren Glasslook deiner Server-Box */
.mw-card {
@apply rounded-2xl p-5 md:p-6
border border-white/10
bg-white/5 backdrop-blur-xl
shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
/* feiner Verlauf wie oben */
background-image: radial-gradient(120% 120% at 100% 0%, rgba(56, 189, 248, .08) 0%, transparent 60%),
radial-gradient(140% 140% at 0% 120%, rgba(16, 185, 129, .06) 0%, transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
}
/* Subkarte (kleinere Panels in einer Karte) */
.mw-subcard {
@apply rounded-xl p-4
border border-white/10
bg-white/5 backdrop-blur-xl;
}
.mw-title {
@apply text-white/90 font-semibold tracking-wide;
}
.mw-subtle {
@apply text-white/60 text-sm;
}
.mw-divider {
@apply border-t border-white/10 my-4;
}
/* ── Header utility classes ── */
.btn-ghost {
@apply inline-flex items-center justify-center rounded-lg
text-white/60 hover:text-white hover:bg-white/5
transition-colors duration-150 cursor-pointer;
padding: 0.4rem;
}
.popup {
@apply rounded-xl border border-white/10 shadow-xl z-50
bg-[#0f172a]/95 backdrop-blur-xl text-white/80;
}
}
/* ============ BOOT-STATE: keine Sprünge ============ */
/* Während booting KEINE Transitionen */
html[data-ui="booting"] * {
transition: none !important;
}
/* Labels, Carets, Submenüs in der Sidebar während booting NICHT zeigen */
html[data-ui="booting"] #main,
html[data-ui="booting"] #sidebar .sidebar-label,
html[data-ui="booting"] #sidebar .sidebar-caret,
html[data-ui="booting"] #sidebar [data-submenu] {
display: none !important;
}
/* Mobil: Sidebar standardmäßig offcanvas (wegschieben) */
@media (max-width: 639.98px) {
#sidebar {
transform: translateX(-100%);
}
}
/* Tablet: Sidebar standardmäßig RAIL (schmal) */
@media (min-width: 640px) and (max-width: 1023.98px) {
#sidebar {
--sbw: 5.2rem;
width: var(--sbw);
max-width: var(--sbw);
}
/* Nur im RAIL-Zustand ausblenden – falls du per JS .u-collapsed setzt */
#sidebar.u-collapsed .sidebar-label,
#sidebar.u-collapsed .sidebar-caret,
#sidebar.u-collapsed [data-submenu] {
display: none !important;
}
}
/* Desktop: Sidebar standardmäßig EXPANDED (breit) */
@media (min-width: 1024px) {
#sidebar {
--sb-w: 16rem;
width: var(--sb-w);
max-width: var(--sb-w);
}
}
/* ======== READY-STATE: Transitionen wieder an ========= */
/* Wenn JS fertig ist -> sanfte Transitions zulassen (ab jetzt darf’s animieren) */
html[data-ui="ready"] #sidebar {
transition: width .2s ease, max-width .2s ease, transform .2s ease;
}
/* Rail-Zustand per Klasse (dein JS schaltet diese Klassen weiter) */
#sidebar.u-collapsed {
--sb-w: 5.2rem;
width: var(--sb-w);
max-width: var(--sb-w);
}
#sidebar.ut-expanded {
--sb-w: 16rem;
width: var(--sb-w);
max-width: var(--sb-w);
}
/* Rail: Labels/Carets/Submenüs IMMER ausblenden */
#sidebar.u-collapsed .sidebar-label,
#sidebar.u-collapsed .sidebar-caret,
#sidebar.u-collapsed [data-submenu] {
display: none !important;
}
/* Mobile Offcanvas: Klassen aus deinem JS */
#sidebar.translate-x-0 {
transform: translateX(0);
}
/* Sicherheitsnetz: [x-cloak] bleibt unsichtbar bis Alpine lädt */
[x-cloak] {
display: none !important;
}
/*html { background-color: #132835; }*/
html { background-color: #0a0f18; }
body { background: transparent; }
/* EIN Hintergrund für alles – fix hinter dem Inhalt */
.app-backdrop:before{
content: '';
position: fixed;
inset: 0;
z-index: 0; /* unter dem Inhalt, aber über html */
pointer-events: none;
/* iOS stabil: deckt große/kleine Viewports ab */
height: 100lvh; /* large viewport height */
min-height: 100svh; /* safe viewport height Fallback */
/* Dein gesamter Verlauf hier – durchgehend! */
background-image:
radial-gradient(120vmax 70vmax at 80% 40%, rgba(34,211,238,.28), transparent 45%),
radial-gradient(110vmax 70vmax at 20% 60%, rgba(34,211,238,.28), transparent 45%),
/*radial-gradient(110vmax 80vmax at 20% 62%, rgba(16,185,129,.18), transparent 45%),*/
/*linear-gradient(180deg, rgba(8,47,73,.18), rgba(2,6,23,.28)), !* Farbbelag *!*/
linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);
/*radial-gradient(120vmax 70vmax at 80% -10%, rgba(34,211,238,.28), transparent 62%),*/
/*radial-gradient(110vmax 80vmax at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
/*linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*radial-gradient(1600px 900px at 85% -15%, rgba(34,211,238,.28), transparent 62%),*/
/* radial-gradient(1200px 800px at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
/* linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
}
/* Inhalt bewusst über die Backdrop heben */
#main{ position: relative; z-index: 1; }
/* (Optional) Safe-Area-Padding für iPhone-Notch */
.safe-pads{
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* === App Backdrop (türkis/glass) === */
/*.app-backdrop {*/
/* position: fixed;*/
/* inset: 0;*/
/* z-index: -10;*/
/* pointer-events: none;*/
/* height: 100vh;*/
/* background: radial-gradient(1600px 900px at 85% -15%, rgba(34, 211, 238, .28), transparent 62%),*/
/* radial-gradient(1200px 800px at 10% 112%, rgba(16, 185, 129, .18), transparent 70%),*/
/* linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*}*/
.primary-btn {
@apply relative inline-flex items-center justify-center rounded-xl
px-6 py-2.5 text-sm font-medium text-white transition-all
bg-gradient-to-r from-[rgba(34,211,238,0.35)] to-[rgba(16,185,129,0.35)]
border border-white/10 shadow-[0_0_25px_rgba(16,185,129,0.08)]
hover:from-[rgba(34,211,238,0.55)] hover:to-[rgba(16,185,129,0.55)]
hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]
focus:outline-none focus:ring-2 focus:ring-[rgba(124,58,237,0.22)]
focus:ring-offset-0;
}
/* === Layout Breite der Sidebar per Variable steuern === */
:root {
--sb-w: 16rem;
}
/* Basiswert (expanded) */
/* Header + Main bekommen die gleiche linke Einrückung */
.header-shell,
.main-shell {
padding-left: var(--sb-w);
transition: padding-left .2s ease;
}
/* ---------- Desktop (>=1024) ---------- */
@media (min-width: 1024px) {
/* default expanded */
.main-shell {
--sb-w: 16rem;
}
.main-shell.rail {
--sb-w: 5.2rem;
}
/* wenn per JS .rail gesetzt wird */
/* Sidebar-Breite koppeln */
#sidebar {
--sbw: 16rem;
}
#sidebar.u-collapsed {
--sbw: 5.2rem;
}
}
/* ---------- Tablet (640–1023) ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
.main-shell {
--sb-w: 5.2rem;
}
/* standard rail */
.main-shell.ut-expanded {
--sb-w: 16rem;
}
/* bei expand */
#sidebar {
--sbw: 5.2rem;
}
#sidebar.ut-expanded {
--sbw: 16rem;
}
}
/* ---------- Mobile (<640) ---------- */
@media (max-width: 639.98px) {
.main-shell {
--sb-w: 0;
}
#sidebar {
transition: width .2s ease, max-width .2s ease, transform .2s ease;
}
/* off-canvas → kein Padding */
}
/*#sidebar {*/
/* width: var(--sbw, 16rem);*/
/* max-width: var(--sbw, 16rem);*/
/* transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/
/* Sidebar selbst nimmt die variable Breite */
/*#sidebar {*/
/* width: var(--sbw, 16rem);*/
/* max-width: var(--sbw, 16rem);*/
/* transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/
/* Rail: Label, Carets, Submenüs ausblenden (kein Springen) */
#sidebar.u-collapsed .sidebar-label {
display: none !important;
}
#sidebar.u-collapsed .sidebar-caret {
display: none !important;
}
#sidebar.u-collapsed [data-submenu] {
display: none !important;
}
/* Anti-FOUC für Alpine */
[x-cloak] {
display: none !important;
}
/* Optional: beim First Paint Animationen unterdrücken (falls du body.no-animate setzt) */
.no-animate * {
transition: none !important;
}
/* Reusable utilities */
.glass-card {
@apply bg-glass-bg/70 backdrop-blur-md border border-glass-border rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,.25)];
}
.glass-input {
@apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100 placeholder-gray-400
focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[rgba(124,58,237,0.45)]
transition-colors;
}
.btn-primary {
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white font-medium
bg-gradient-to-b from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-600
focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)]
shadow-[inset_0_1px_0_rgba(255,255,255,.08),0_8px_20px_rgba(0,0,0,.25)];
}
.badge {
@apply text-xs px-2 py-0.5 rounded-md border border-glass-border text-gray-300/80 bg-glass-light/40;
}
.card-title {
@apply text-gray-100/95 font-semibold tracking-wide;
}
.card-subtle {
@apply text-gray-300/70 text-sm leading-relaxed;
}
/* Zustände für Inputs */
.input-error {
@apply border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30;
}
.input-success {
@apply border-emerald-400/50 focus:border-emerald-400/70 focus:ring-emerald-400/30;
}
.input-disabled {
@apply opacity-60 cursor-not-allowed;
}
/* Label & Fehlermeldung */
.field-label {
@apply block text-sm text-gray-300 mb-1;
}
.field-error {
@apply mt-1 text-xs text-red-300;
}
.field-help {
@apply mt-1 text-xs text-gray-400;
}
/* Select im gleichen Look wie .glass-input */
.glass-select {
@apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100
focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[rgba(124,58,237,0.45)]
transition-colors;
}
/* Input mit Icon links (Wrapper) */
.input-with-icon {
@apply relative;
}
.input-with-icon > .icon-left {
@apply absolute inset-y-0 left-3 flex items-center text-gray-400;
}
.input-with-icon > input {
@apply pl-10;
/* Platz für Icon */
}
/* Karten-Interaktion (leichtes Hover-Lift) */
.glass-card:hover {
@apply shadow-[0_12px_38px_rgba(0,0,0,.3)];
}
/* Buttons – zusätzliche Varianten */
.ghost-btn {
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-gray-200
bg-white/5 border border-white/10 hover:bg-white/10
focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)];
}
.danger-btn {
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white
bg-gradient-to-b from-rose-500 to-rose-600 hover:from-rose-400 hover:to-rose-600
focus:outline-none focus:ring-0 focus:ring-rose-400/40;
}
/* Checkbox/Switch im Glas-Look */
.glass-checkbox {
@apply h-4 w-4 rounded border border-glass-border bg-white/10
checked:bg-cyan-500 checked:border-cyan-500
focus:ring-2 focus:ring-[var(--color-ring)];
}
/* Trennlinie in Karten */
.divider {
@apply border-t border-glass-border/80 my-6;
}
button {
cursor: pointer;
}
/* ============================================================
MAILWOLT DASHBOARD REDESIGN – alle mw-* Klassen
============================================================ */
:root {
--mw-bg: #0d0f14;
--mw-surface: #111318;
--mw-inner: #0d0f14;
--mw-border: #1e2230;
--mw-border-hi: #2d3158;
--mw-hover: #1a1e2a;
--mw-active: #1e2240;
--mw-accent: #6366f1;
--mw-accent-lt: #818cf8;
--mw-green: #4ade80;
--mw-green-bg: #0f2a1a;
--mw-green-bd: #166534;
--mw-amber: #f59e0b;
--mw-amber-bg: #2a1a0a;
--mw-amber-bd: #92400e;
--mw-red: #f87171;
--mw-red-bg: #1a0d0d;
--mw-red-bd: #4a1515;
--mw-sky: #38bdf8;
--mw-t1: #f1f5f9;
--mw-t2: #e2e8f0;
--mw-t3: #94a3b8;
--mw-t4: #64748b;
--mw-t5: #475569;
}
/* Shell */
.mw-shell {
display: flex; height: 100vh; overflow: hidden;
background: var(--mw-bg); color: var(--mw-t2);
font-family: 'Bai Jamjuree', ui-sans-serif, system-ui, sans-serif;
}
/* Scrollbar */
.mw-scroll::-webkit-scrollbar { width: 4px; }
.mw-scroll::-webkit-scrollbar-track { background: transparent; }
.mw-scroll::-webkit-scrollbar-thumb { background: var(--mw-border); border-radius: 4px; }
.mw-scroll { scrollbar-width: thin; scrollbar-color: var(--mw-border) transparent; }
/* Live-Pulse */
@keyframes mw-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.mw-pulse { animation: mw-pulse 2s infinite; }
/* ── Sidebar ── */
.mw-sidebar {
width: 220px; min-width: 220px; background: var(--mw-surface);
border-right: 1px solid var(--mw-border);
display: flex; flex-direction: column; flex-shrink: 0;
height: 100vh; overflow: hidden;
transition: transform .25s ease;
}
.mw-sidebar-logo {
padding: 20px 16px 16px; border-bottom: 1px solid var(--mw-border);
display: flex; align-items: center; gap: 11px;
}
.mw-sidebar-logo-icon {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: linear-gradient(135deg,#6366f1,#8b5cf6);
display: flex; align-items: center; justify-content: center;
}
.mw-sidebar-logo-title { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--mw-t1); }
.mw-sidebar-logo-sub { font-size: 10px; color: var(--mw-t4); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }
/* Nav */
.mw-nav { flex: 1; padding: 14px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.mw-nav-group-label { font-size: 10px; color: var(--mw-t5); text-transform: uppercase; letter-spacing: 1.2px; padding: 0 10px 6px; margin: 0; font-weight: 600; }
.mw-nav-item {
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
border-radius: 7px; font-size: 13px; color: var(--mw-t3);
text-decoration: none; transition: background .12s, color .12s;
}
.mw-nav-item:hover { background: var(--mw-hover); color: var(--mw-t2); }
.mw-nav-item.active { background: var(--mw-active); color: var(--mw-accent-lt); font-weight: 500; }
/* Sidebar Footer */
.mw-sidebar-footer { padding: 14px 12px; border-top: 1px solid var(--mw-border); flex-shrink: 0; }
.mw-user-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#6366f1,#8b5cf6);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; color: #fff;
}
.mw-logout { background: none; border: none; cursor: pointer; color: var(--mw-t5); padding: 4px; transition: color .12s; }
.mw-logout:hover { color: var(--mw-t3); }
/* Sidebar Overlay (Mobile) */
.mw-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.55); z-index: 40;
}
.mw-overlay.open { display: block; }
.mw-hamburger { display: none; background: none; border: none; color: var(--mw-t3); cursor: pointer; padding: 4px; }
/* ── Main ── */
.mw-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
/* Topbar */
.mw-topbar {
padding: 10px 24px; border-bottom: 1px solid var(--mw-border);
display: flex; align-items: center; justify-content: space-between;
background: var(--mw-bg); flex-shrink: 0; gap: 10px;
}
.mw-breadcrumb { font-size: 13px; color: var(--mw-t4); display: flex; align-items: center; gap: 5px; }
.mw-breadcrumb-current { color: var(--mw-t2); font-weight: 500; }
.mw-topbar-right { display: flex; align-items: center; gap: 10px; }
.mw-live-badge {
display: flex; align-items: center; gap: 5px;
background: var(--mw-green-bg); border: 1px solid var(--mw-green-bd);
border-radius: 20px; padding: 4px 10px; font-size: 11px; color: var(--mw-green); font-weight: 600;
}
.mw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-green); }
.mw-search-btn {
display: flex; align-items: center; gap: 6px;
background: var(--mw-surface); border: 1px solid var(--mw-border);
border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--mw-t4); cursor: pointer;
transition: border-color .12s;
}
.mw-search-btn:hover { border-color: var(--mw-border-hi); }
.mw-domain-btn {
background: #3730a3; border: 1px solid #4338ca; border-radius: 7px;
padding: 6px 14px; font-size: 12px; color: #e0e7ff; cursor: pointer;
font-weight: 500; white-space: nowrap; transition: background .12s;
}
.mw-domain-btn:hover { background: #4338ca; }
/* Content scroll */
.mw-content { flex: 1; overflow-y: auto; padding: 24px; }
/* ── Hero ── */
.mw-hero {
background: linear-gradient(135deg,#1a1e2e 0%,#16192a 60%,#1a1529 100%);
border: 1px solid var(--mw-border-hi); border-radius: 12px;
padding: 20px 24px; margin-bottom: 20px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mw-hero-icon {
width: 44px; height: 44px; background: var(--mw-active);
border: 1px solid #3730a3; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mw-hero-title { font-size: 18px; font-weight: 600; color: var(--mw-t1); margin: 0 0 7px; }
.mw-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mw-tag { background: var(--mw-active); color: var(--mw-accent-lt); font-size: 10px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
/* ── Card ── */
.mw-card { background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: 12px; padding: 18px; }
.mw-card-title { font-size: 11px; font-weight: 600; color: var(--mw-t5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
/* ── Metric cards ── */
.mw-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.mw-metric-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-metric-label { font-size: 11px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.mw-metric-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.mw-metric-value { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 5px; }
.mw-metric-sub { font-size: 11px; color: var(--mw-t5); margin-bottom: 10px; }
.mw-bar-track { background: var(--mw-border); border-radius: 4px; height: 4px; }
.mw-bar-fill { height: 4px; border-radius: 4px; width: 0%; transition: width .5s; }
/* ── Status cards ── */
.mw-status-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.mw-status-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mw-status-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-status-title { font-size: 12px; font-weight: 600; color: var(--mw-t2); }
.mw-status-sub { font-size: 10px; color: var(--mw-t4); margin-top: 2px; }
.mw-badge { font-size: 10px; padding: 2px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.mw-badge.ok { background: var(--mw-green-bg); color: var(--mw-green); border: 1px solid var(--mw-green-bd); }
.mw-badge.info { background: #1a1e3a; color: var(--mw-accent-lt); border: 1px solid #3730a3; }
.mw-badge.warn { background: var(--mw-amber-bg); color: var(--mw-amber); border: 1px solid var(--mw-amber-bd); }
.mw-progress { background: var(--mw-border); border-radius: 3px; height: 3px; margin-top: 12px; }
.mw-progress-fill{ height: 3px; border-radius: 3px; background: linear-gradient(90deg,#4338ca,#818cf8); width: 0%; transition: width .5s; }
.mw-card-btn { margin-top: 12px; background: var(--mw-hover); border: 1px solid var(--mw-border-hi); border-radius: 7px; padding: 6px; text-align: center; font-size: 11px; color: var(--mw-accent-lt); cursor: pointer; transition: background .12s; }
.mw-card-btn:hover { background: var(--mw-active); }
/* ── Bottom grid ── */
.mw-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mw-right-col { display: flex; flex-direction: column; gap: 14px; }
/* ── Services ── */
.mw-svc-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #151820; }
.mw-svc-row:last-child { border-bottom: none; }
.mw-svc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mw-svc-dot.ok { background: var(--mw-green); box-shadow: 0 0 5px rgba(74,222,128,.35); }
.mw-svc-dot.warn { background: var(--mw-amber); box-shadow: 0 0 5px rgba(245,158,11,.35); }
.mw-svc-dot.err { background: var(--mw-red); box-shadow: 0 0 5px rgba(248,113,113,.35); }
.mw-svc-name { font-size: 13px; color: #cbd5e1; margin-left: 10px; flex: 1; }
.mw-svc-type { font-size: 10px; color: var(--mw-t5); margin-left: 5px; }
/* ── Storage ── */
.mw-donut-wrap { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.mw-legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mw-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mw-legend-lbl { color: var(--mw-t3); flex: 1; }
.mw-legend-val { color: var(--mw-t2); font-weight: 500; }
/* ── Mini-stats ── */
.mw-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mw-mini-stat { background: var(--mw-inner); border: 1px solid var(--mw-border); border-radius: 8px; padding: 12px; }
.mw-mini-val { font-size: 20px; font-weight: 700; }
.mw-mini-lbl { font-size: 10px; color: var(--mw-t5); margin-top: 3px; }
/* ── Tables ── */
.mw-tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
/* ── Livewire Dienste-Override ── */
.svc-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.svc-live .glass-card .inline-flex.rounded-full,
.svc-live .glass-card .inline-flex.rounded-full + span { display: none!important; }
.svc-live .flex.items-center.justify-between.mb-3 { display: none!important; }
.svc-live li { display: flex!important; align-items: center!important; padding: 8px 0!important; border-bottom: 1px solid #151820!important; }
.svc-live li:last-child { border-bottom: none!important; }
.svc-live .h-2.w-2.rounded-full { width: 7px!important; height: 7px!important; flex-shrink: 0!important; }
.svc-live .bg-emerald-400 { background: #4ade80!important; box-shadow: 0 0 6px rgba(74,222,128,.4)!important; }
.svc-live .bg-rose-400 { background: #f87171!important; box-shadow: 0 0 6px rgba(248,113,113,.4)!important; }
.svc-live .text-white\/90 { font-size: .8125rem!important; color: #cbd5e1!important; }
.svc-live .text-\[11px\].text-white\/45 { font-size: .625rem!important; color: #475569!important; }
.svc-live .rounded-full.text-xs.border { font-size: .625rem!important; padding: 2px 8px!important; border-radius: 10px!important; }
.svc-live .text-emerald-300 { color: #4ade80!important; }
.svc-live .bg-emerald-500\/10 { background: #0f2a1a!important; }
.svc-live .border-emerald-400\/30 { border-color: rgba(74,222,128,.2)!important; }
.svc-live .text-rose-300 { color: #f87171!important; }
.svc-live .bg-rose-500\/10 { background: #1a0d0d!important; }
.svc-live .border-rose-400\/30 { border-color: rgba(248,113,113,.2)!important; }
/* ── Livewire Domains-Override ── */
.dom-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.dom-live li { padding: 6px 4px!important; }
.dom-live .truncate.text-white\/90 { font-size: .8125rem!important; color: #e2e8f0!important; }
.dom-live .size-8 { width: 1.75rem!important; height: 1.75rem!important; background: #1e2240!important; border-color: #2d3158!important; }
/* ── Livewire Logins-Override ── */
.log-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.log-live .flex.items-center.justify-between.mb-3 { display: none!important; }
.log-live table { font-size: .75rem!important; width: 100%!important; }
.log-live th { color: #64748b!important; font-size: .625rem!important; font-weight: 600!important; text-transform: uppercase!important; padding: 0 0 6px!important; }
.log-live td { padding: 5px 0!important; color: #94a3b8!important; }
.log-live .text-white\/90 { color: #e2e8f0!important; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.mw-content { padding: 18px; }
.mw-topbar { padding: 10px 18px; }
}
@media (max-width: 900px) {
.mw-bottom-grid { grid-template-columns: 1fr; }
.mw-tables-grid { grid-template-columns: 1fr; }
.mw-right-col { flex-direction: row; }
}
@media (max-width: 768px) {
.mw-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); }
.mw-sidebar.open { transform: translateX(0); }
.mw-hamburger { display: flex; }
.mw-content { padding: 14px; }
.mw-topbar { padding: 9px 14px; }
.mw-metrics-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
.mw-status-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
}
@media (max-width: 480px) {
.mw-metrics-grid { grid-template-columns: 1fr; }
.mw-status-grid { grid-template-columns: 1fr; }
.mw-right-col { flex-direction: column; }
}
.chip {
@apply flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur px-3 py-2 hover:bg-white/10 transition;
}
.badge {
@apply ml-1 rounded-full px-2 py-0.5 text-xs font-medium border border-white/10;
}
@layer components {
.section-title {
@apply text-white/70 text-sm font-medium uppercase tracking-wide;
}
.btn-surface {
@apply inline-flex items-center gap-2 rounded-lg border border-sky-400/20 bg-sky-600/20
hover:bg-sky-600/30 text-sky-100 text-sm px-3 py-1.5 transition;
}
.input-surface {
@apply bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-white/90 placeholder-white/30;
}
.checkbox-accent {
@apply h-4 w-4 rounded border border-white/20 bg-white/5 text-sky-400 focus:ring-0;
}
.toggle-tile {
@apply flex items-center gap-3 p-3 rounded-xl border border-white/10 bg-white/5;
}
.host-row {
@apply flex items-stretch rounded-xl overflow-hidden border border-white/10 bg-white/5;
}
.host-prefix {
@apply px-2.5 flex items-center text-white/40 text-xs border-r border-white/10;
}
.host-input {
@apply flex-1 bg-transparent px-3 py-2 outline-none text-white/90;
}
.host-suffix {
@apply px-2.5 flex items-center text-white/50 bg-white/5 border-l border-white/10;
}
.host-fqdn {
@apply text-xs text-white/60 mt-1 font-mono tabular-nums;
}
.btn-primary {
@apply inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.06] px-3 py-1.5 text-sm text-white/80 hover:bg-white/[0.12] hover:text-white;
}
}
html, body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
::-webkit-scrollbar {
display: none;
}
/* Pulse für "running" */
@keyframes tgPulse {
0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0) }
50% { box-shadow: 0 0 40px rgba(34,211,238,.12) } /* cyan-400/12 */
}
.tg-pulse { animation: tgPulse 1.6s ease-in-out infinite; }
/* leichtes Shake für Fehler/forbidden */
@keyframes tgShake {
0% { transform: translateX(0) }
25% { transform: translateX(-2px) }
50% { transform: translateX(2px) }
75% { transform: translateX(-1px) }
100% { transform: translateX(0) }
}
.tg-shake { animation: tgShake .35s ease-in-out 1; }
@layer base {
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
@apply outline-none transition
focus:border-[rgba(124,58,237,0.45)] focus:ring-1 focus:ring-[rgba(124,58,237,0.18)]
}
@layer components {
.nx-card {
@apply rounded-2xl p-6 md:p-7
bg-white/5 backdrop-blur-xl
border border-white/10
shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
}
.nx-chip {
@apply inline-flex items-center px-3 py-1 rounded-full text-sm
bg-white/8 text-white/90 border border-white/10;
}
.nx-subtle {
@apply text-white/80 leading-relaxed;
}
.nx-input {
@apply w-full rounded-xl px-3.5 py-3 text-white/95
bg-[rgba(12,18,28,.55)]
border border-white/10
shadow-[inset_0_1px_0_rgba(255,255,255,.06)]
outline-none transition
focus:border-[rgba(124,58,237,0.45)] focus:ring-1 focus:ring-[rgba(124,58,237,0.18)];
}
.nx-label {
@apply block text-xs text-white/70 mb-1;
}
.nx-eye {
@apply absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg
hover:bg-white/5 focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
}
.nx-check {
@apply h-4 w-4 rounded border-white/20 bg-white/10
focus:ring-2 focus:ring-[rgba(124,58,237,0.22)];
}
.nx-btn {
@apply inline-flex items-center justify-center rounded-xl py-3 font-medium text-white
bg-gradient-to-r from-[#6d7cff] via-[#5aa7ff] to-[#39d0ff]
shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_10px_30px_-8px_rgba(56,189,248,.45)]
hover:from-[#7e89ff] hover:to-[#46d7ff]
focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
}
.nx-btn-ghost {
@apply rounded-xl px-4 py-2.5 text-white/85 border border-white/10 bg-white/5
hover:bg-white/10 focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
}
.nx-link {
@apply text-sky-300 hover:text-sky-200 transition;
}
.nx-divider {
@apply relative text-center text-white/50 text-xs mt-7 mb-2;
}
.nx-divider::before, .nx-divider::after {
content: "";
@apply absolute top-1/2 w-[38%] h-px bg-white/10;
}
.nx-divider::before {
left: 0;
}
.nx-divider::after {
right: 0;
}
.nx-alert {
@apply flex gap-3 items-start rounded-xl p-3.5
border border-rose-400/25 bg-rose-400/10 text-rose-50;
}
hr, .hr {
border-color: var(--color-slate-700);
}
}
/* ── Redesign aliases & missing classes ── */
.mw-hidden { display: none !important; }
.mw-metric-val { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 5px; }
.mw-val-indigo { color: var(--mw-accent-lt); }
.mw-val-green { color: var(--mw-green); }
.mw-val-amber { color: var(--mw-amber); font-size: 22px; }
.mw-val-sky { color: var(--mw-sky); font-size: 22px; }
.mw-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-card-label { font-size: 11px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.mw-icon-indigo { background: #1a1e3a; }
.mw-icon-green { background: #1a2a1a; }
.mw-icon-amber { background: #2a1f1a; }
.mw-icon-sky { background: #1a2030; }
.mw-bar-indigo { background: linear-gradient(90deg,#4338ca,#818cf8); }
.mw-bar-green { background: linear-gradient(90deg,#166534,#4ade80); }
.mw-load-dots { display: flex; gap: 4px; margin-top: 10px; }
.mw-load-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-border); }
.mw-uptime-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mw-chip-sky { background: #0c2a3a; color: var(--mw-sky); font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.mw-svc-info { min-width: 0; flex: 1; margin-left: 10px; }
.mw-svc-title { font-size: 12px; font-weight: 600; color: var(--mw-t2); }
.mw-svc-sub { font-size: 10px; color: var(--mw-t4); margin-top: 2px; }
.mw-si { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-si-green { background: var(--mw-green-bg); border: 1px solid var(--mw-green-bd); }
.mw-si-indigo { background: #1a1e3a; border: 1px solid #3730a3; }
.mw-si-sky { background: #1a2030; border: 1px solid #1e4060; }
.mw-si-red { background: var(--mw-red-bg); border: 1px solid var(--mw-red-bd); }
.mw-badge-green { background: var(--mw-green-bg); color: var(--mw-green); border: 1px solid var(--mw-green-bd); }
.mw-badge-indigo { background: #1a1e3a; color: var(--mw-accent-lt); border: 1px solid #3730a3; }
.mw-badge-amber { background: var(--mw-amber-bg); color: var(--mw-amber); border: 1px solid var(--mw-amber-bd); }
.mw-badge-red { background: var(--mw-red-bg); color: var(--mw-red); border: 1px solid var(--mw-red-bd); }
.mw-count-val { color: var(--mw-t3); font-weight: 500; }
.mw-alerts-empty { font-style: italic; }
.mw-alert-item { font-size: 11px; padding: 4px 8px; border-radius: 5px; margin-bottom: 4px; }
.mw-alert-error { background: var(--mw-red-bg); color: #fca5a5; border: 1px solid rgba(248,113,113,.2); }
.mw-alert-warn { background: var(--mw-amber-bg); color: #fcd34d; border: 1px solid rgba(252,211,77,.2); }
.mw-alert-info { background: var(--mw-surface); color: var(--mw-t3); border: 1px solid var(--mw-border); }
.mw-donut-legend { flex: 1; }
.mw-donut-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mw-donut-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mw-donut-label { color: var(--mw-t3); flex: 1; }
.mw-donut-val { color: var(--mw-t2); font-weight: 500; }
.mw-dot-accent { background: var(--mw-accent); }
.mw-dot-border { background: var(--mw-border); }
.mw-mini { background: var(--mw-inner); border: 1px solid var(--mw-border); border-radius: 8px; padding: 12px; }
.mw-mini-label { font-size: 10px; color: var(--mw-t5); margin-top: 3px; }
.mw-hero-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mw-hero-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.mw-btn-backup { width: 100%; background: var(--mw-hover); border: 1px solid var(--mw-border-hi); border-radius: 6px; padding: 5px; font-size: 11px; color: var(--mw-accent-lt); cursor: pointer; margin-top: 8px; transition: background .15s; text-align: center; }
.mw-btn-backup:hover { background: var(--mw-active); }
/* ═══════════════════════════════════════
MailWolt Dashboard Design System v2
Dark Mode Only — Violet als Akzentfarbe
═══════════════════════════════════════ */
:root {
--mw-bg: #08090f;
--mw-bg2: #0d0f19;
--mw-bg3: #111420;
--mw-bg4: #161a28;
--mw-b1: #1c2035;
--mw-b2: #242840;
--mw-b3: #2e3450;
--mw-v: #7c3aed;
--mw-v2: #9d6ef8;
--mw-vbg: #120e28;
--mw-vbd: #261850;
--mw-gr: #22c55e; --mw-grbg: #051510; --mw-grbd: #0d3520;
--mw-am: #f59e0b; --mw-ambg: #160f00; --mw-ambd: #2c1e00;
--mw-rd: #ef4444; --mw-rdbg: #160505; --mw-rdbd: #2e0e0e;
--mw-t1: #edf0fc;
--mw-t2: #9aa3be;
--mw-t3: #737b96;
--mw-t4: #4e576e;
--mw-t5: #2d3448;
}
/* ── Shell ── */
.mw-shell { display: flex; height: 100vh; overflow: hidden; background: var(--mw-bg); }
/* ── Sidebar ── */
.mw-sidebar {
width: 218px; min-width: 218px; background: var(--mw-bg2);
border-right: 1px solid var(--mw-b1); display: flex;
flex-direction: column; height: 100vh;
}
.mw-sb-head {
padding: 20px 16px 16px; border-bottom: 1px solid var(--mw-b1);
display: flex; align-items: center; gap: 10px;
}
.mw-sb-mark {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: var(--mw-v); display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 12px rgba(124,58,237,.3);
}
.mw-sb-name { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--mw-t1); }
.mw-sb-sub { font-size: 9.5px; color: var(--mw-t4); letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; }
.mw-nav { flex: 1; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.mw-nav::-webkit-scrollbar { display: none; }
.mw-nav-label {
font-size: 9.5px; font-weight: 600; color: var(--mw-t5); text-transform: uppercase;
letter-spacing: 1.3px; padding: 12px 10px 4px; margin: 0;
}
.mw-nav-label:first-child { padding-top: 4px; }
.mw-nav-item {
display: flex; align-items: center; gap: 8px; padding: 7.5px 10px;
border-radius: 6px; font-size: 13px; color: var(--mw-t3);
text-decoration: none; transition: all .1s;
}
.mw-nav-item:hover { background: var(--mw-bg3); color: var(--mw-t2); }
.mw-nav-item.active { background: var(--mw-bg3); color: var(--mw-t1); font-weight: 500; }
.mw-nav-item svg { flex-shrink: 0; opacity: .5; }
.mw-nav-item:hover svg, .mw-nav-item.active svg { opacity: .8; }
.mw-nav-dot {
display: none; margin-left: auto; width: 5px; height: 5px;
border-radius: 50%; background: var(--mw-v);
box-shadow: 0 0 6px rgba(124,58,237,.6);
flex-shrink: 0;
}
.mw-nav-item.active .mw-nav-dot { display: block; }
.mw-nav-item.active:has(.mw-nav-badge) .mw-nav-dot { display: none; }
.mw-nav-badge {
margin-left: auto; font-size: 10px; font-weight: 600;
background: var(--mw-bg4); color: var(--mw-t3); border: 1px solid var(--mw-b2);
padding: 0 6px; border-radius: 5px; line-height: 18px; flex-shrink: 0;
transition: all .15s;
}
.mw-nav-sub-item {
display: flex; align-items: center; gap: 8px; padding: 5.5px 10px 5.5px 30px;
border-radius: 6px; font-size: 12px; color: var(--mw-t4);
text-decoration: none; transition: all .1s; position: relative;
}
.mw-nav-sub-item::before {
content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 4px; height: 4px; border-radius: 50%; background: var(--mw-b3);
}
.mw-nav-sub-item:hover { background: var(--mw-bg3); color: var(--mw-t2); }
.mw-nav-sub-item:hover::before { background: var(--mw-t3); }
.mw-nav-sub-item.active { background: var(--mw-bg3); color: var(--mw-t2); font-weight: 500; }
.mw-nav-sub-item.active::before { background: var(--mw-v); box-shadow: 0 0 5px rgba(124,58,237,.5); }
.mw-nav-item.active .mw-nav-badge {
background: var(--mw-vbg); color: var(--mw-v2); border-color: var(--mw-vbd);
box-shadow: 0 0 8px rgba(124,58,237,.35);
}
.mw-sb-foot {
padding: 13px; border-top: 1px solid var(--mw-b1);
display: flex; align-items: center; gap: 8px;
}
.mw-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600; color: var(--mw-t2);
}
/* ── Main ── */
.mw-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
/* ════════════════════════════════════════
Topbar — Redesign
════════════════════════════════════════ */
.mw-topbar {
height: 54px;
padding: 0 20px;
border-bottom: 1px solid var(--mw-b1);
background: var(--mw-bg);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
gap: 8px;
}
/* ── Links ── */
.mw-tb-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.mw-hamburger {
display: none;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 8px;
background: none;
border: none;
color: var(--mw-t3);
cursor: pointer;
transition: background .15s, color .15s;
}
.mw-hamburger:hover { background: var(--mw-bg3); color: var(--mw-t1); }
.mw-tb-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
min-width: 0;
overflow: hidden;
}
.mw-tb-parent { color: var(--mw-t4); white-space: nowrap; flex-shrink: 0; }
.mw-tb-sep { color: var(--mw-b3); flex-shrink: 0; }
.mw-tb-current { color: var(--mw-t2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Rechts ── */
.mw-tb-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Live-Dot */
.mw-tb-live {
display: flex; align-items: center; gap: 5px;
padding: 4px 9px;
border-radius: 99px;
background: rgba(34,197,94,.08);
border: 1px solid rgba(34,197,94,.18);
font-size: 11px; font-weight: 500; color: #4ade80;
}
.mw-tb-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34,197,94,.7);
animation: mw-pulse 2s infinite;
}
@keyframes mw-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Suchbutton */
.mw-tb-search {
display: flex; align-items: center; gap: 7px;
height: 32px; padding: 0 12px;
background: var(--mw-bg3);
border: 1px solid var(--mw-b2);
border-radius: 8px;
font-size: 12px; color: var(--mw-t4);
cursor: pointer;
transition: border-color .15s, color .15s;
white-space: nowrap;
}
.mw-tb-search:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mw-tb-kbd {
display: inline-flex; align-items: center; justify-content: center;
padding: 2px 5px;
background: var(--mw-b1); border: 1px solid var(--mw-b2);
border-radius: 4px; font-size: 10px; color: var(--mw-t5);
font-family: ui-monospace, monospace;
}
/* Hostname-Badge */
.mw-tb-host {
display: flex; align-items: center; gap: 5px;
height: 32px; padding: 0 10px;
background: var(--mw-bg3); border: 1px solid var(--mw-b2);
border-radius: 8px;
font-family: ui-monospace, monospace; font-size: 11px; color: var(--mw-t4);
white-space: nowrap;
}
/* + Domain Button */
.mw-tb-add {
display: flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px;
background: var(--mw-v);
border: none; border-radius: 8px;
font-size: 12.5px; font-weight: 600; color: #fff;
cursor: pointer; flex-shrink: 0;
box-shadow: 0 2px 12px rgba(124,58,237,.35);
transition: background .15s, box-shadow .15s;
}
.mw-tb-add:hover { background: #6d28d9; box-shadow: 0 2px 16px rgba(124,58,237,.5); }
/* ── Content ── */
.mw-content { flex: 1; overflow-y: auto; padding: 20px 22px 30px; }
.mw-content::-webkit-scrollbar { width: 4px; }
.mw-content::-webkit-scrollbar-thumb { background: var(--mw-b2); border-radius: 2px; }
/* ── Hero Banner ── */
.mw-hero {
background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 12px;
padding: 18px 22px; margin-bottom: 22px; display: flex; align-items: center;
gap: 18px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.mw-hero::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, rgba(124,58,237,.8) 0%, rgba(124,58,237,.2) 60%, transparent 100%);
}
.mw-hero-icon {
width: 38px; height: 38px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mw-hero-title { font-size: 15px; font-weight: 600; color: var(--mw-t1); margin-bottom: 5px; }
.mw-hero-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mw-hero-tag {
font-size: 9px; font-weight: 500; color: var(--mw-t4); background: var(--mw-bg4);
border: 1px solid var(--mw-b2); padding: 1px 6px; border-radius: 3px;
text-transform: uppercase; letter-spacing: .4px;
}
.mw-hero-divider { width: 1px; height: 38px; background: var(--mw-b1); flex-shrink: 0; }
.mw-hero-stats { display: flex; gap: 0; }
.mw-hstat { padding: 0 18px; text-align: center; border-right: 1px solid var(--mw-b1); }
.mw-hstat:last-child { border-right: none; }
.mw-hstat-n { font-size: 17px; font-weight: 700; color: var(--mw-t1); line-height: 1; }
.mw-hstat-n.ok { color: var(--mw-gr); }
.mw-hstat-l { font-size: 9px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.mw-hero-host {
margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px;
color: var(--mw-t4); background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 5px; padding: 5px 10px;
}
/* ── Section Label ── */
.mw-section { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mw-section-title {
font-size: 9.5px; font-weight: 600; color: var(--mw-t4);
text-transform: uppercase; letter-spacing: 1.3px; white-space: nowrap;
}
.mw-section-line { flex: 1; height: 1px; background: var(--mw-b1); }
/* ── Metric Grid ── */
.mw-metric-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 11px; margin-bottom: 22px;
}
.mw-metric-card {
background: var(--mw-bg3); border: 1px solid var(--mw-b1);
border-radius: 11px; padding: 17px 19px;
}
.mw-mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-mc-label { font-size: 10px; font-weight: 600; color: var(--mw-t3); text-transform: uppercase; letter-spacing: .8px; }
.mw-mc-icon {
width: 26px; height: 26px; border-radius: 6px; background: var(--mw-bg4);
display: flex; align-items: center; justify-content: center;
}
.mw-mc-value { font-size: 28px; font-weight: 700; color: var(--mw-t1); line-height: 1; letter-spacing: -1px; margin-bottom: 3px; }
.mw-mc-sub { font-size: 11px; color: var(--mw-t3); margin-bottom: 11px; }
.mw-bar { background: var(--mw-bg4); border-radius: 3px; height: 3px; }
.mw-bar-fill { height: 3px; border-radius: 3px; }
.mw-bar-low .mw-bar-fill { background: linear-gradient(90deg, #14532d, #22c55e); }
.mw-bar-mid .mw-bar-fill { background: linear-gradient(90deg, #78350f, #f59e0b); }
.mw-bar-high .mw-bar-fill { background: linear-gradient(90deg, #7f1d1d, #ef4444); }
.mw-bar-uptime .mw-bar-fill { background: linear-gradient(90deg, #14532d, #22c55e); opacity: .55; }
/* ── Status Cards ── */
.mw-status-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 11px; margin-bottom: 22px;
}
.mw-status-card {
background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; padding: 16px;
}
.mw-sc-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.mw-sc-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-sc-title { font-size: 13px; font-weight: 600; color: var(--mw-t1); margin-bottom: 1px; }
.mw-sc-sub { font-size: 10.5px; color: var(--mw-t3); }
.mw-sc-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-left: auto; white-space: nowrap; margin-top: 1px; }
.mw-badge-ok { background: var(--mw-grbg); color: var(--mw-gr); border: 1px solid var(--mw-grbd); }
.mw-badge-warn { background: var(--mw-ambg); color: var(--mw-am); border: 1px solid var(--mw-ambd); }
.mw-badge-fail { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.mw-badge-info { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.mw-badge-mute { background: var(--mw-bg4); color: var(--mw-t3); border: 1px solid var(--mw-b2); }
.mw-sc-body { font-size: 11.5px; color: var(--mw-t3); line-height: 1.75; }
.mw-sc-body b, .mw-sc-body strong { color: var(--mw-t2); font-weight: 500; }
.mw-sc-progress { background: var(--mw-bg4); border-radius: 2px; height: 2px; margin-top: 9px; }
.mw-sc-progress-fill { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1c1435, var(--mw-v2)); }
.mw-sc-btn {
margin-top: 10px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 6px; padding: 6px; text-align: center; font-size: 11.5px;
font-weight: 500; color: var(--mw-t3); cursor: pointer; width: 100%;
}
.mw-sc-btn:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
/* ── Bottom Grid ── */
.mw-bottom-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 11px; }
.mw-card { background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; padding: 17px 19px; }
.mw-card-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--mw-t4); margin-bottom: 13px; }
/* Services */
.mw-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mw-svc-row { display: flex; align-items: center; padding: 6.5px 0; border-bottom: 1px solid var(--mw-b1); }
.mw-svc-row:last-child { border-bottom: none; }
.mw-svc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mw-svc-dot.ok { background: var(--mw-gr); box-shadow: 0 0 4px rgba(34,197,94,.4); }
.mw-svc-dot.off { background: var(--mw-rd); }
.mw-svc-dot.na { background: var(--mw-b3); }
.mw-svc-name { font-size: 12.5px; font-weight: 500; color: var(--mw-t2); margin-left: 8px; flex: 1; }
.mw-svc-type { font-size: 10px; color: var(--mw-t4); margin-left: 3px; font-weight: 400; }
.mw-svc-status { font-size: 10px; color: var(--mw-gr); opacity: .75; font-weight: 500; }
.mw-svc-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; border: 1px solid transparent; white-space: nowrap; }
.mw-svc-badge.online { background: var(--mw-grbg); color: var(--mw-gr); border-color: var(--mw-grbd); }
.mw-svc-badge.offline { background: var(--mw-rdbg); color: var(--mw-rd); border-color: var(--mw-rdbd); }
.mw-svc-badge.disabled { background: var(--mw-bg4); color: var(--mw-t3); border-color: var(--mw-b2); }
.mw-ports { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--mw-b1); }
.mw-port {
font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
background: var(--mw-bg4); color: var(--mw-t4); border: 1px solid var(--mw-b2);
padding: 2px 8px; border-radius: 4px; cursor: default;
}
.mw-port.active { background: var(--mw-grbg); color: var(--mw-gr); border-color: var(--mw-grbd); }
.mw-port.inactive { background: var(--mw-bg4); color: var(--mw-t3); border-color: var(--mw-b2); opacity: .5; }
/* ── Domain Pages ─────────────────────────────────────────────────── */
.dom-system-row {
display: flex; align-items: center; gap: 10px;
background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 8px;
padding: 10px 14px; margin-bottom: 4px; font-size: 13px;
}
.dom-system-label {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
color: var(--mw-v2); background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
padding: 1px 7px; border-radius: 9px; flex-shrink: 0;
}
.dom-system-name { font-weight: 600; color: var(--mw-t1); font-size: 13px; }
.dom-icon {
width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
display: flex; align-items: center; justify-content: center; color: var(--mw-t3);
}
.dom-name { font-size: 13px; font-weight: 500; color: var(--mw-t1); }
.dom-desc { font-size: 11px; color: var(--mw-t4); margin-top: 1px; }
.dom-tag {
font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 4px;
border: 1px solid var(--mw-b2); background: var(--mw-bg4); color: var(--mw-t3);
}
.dom-btn {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500;
background: var(--mw-bg4); color: var(--mw-t2); border: 1px solid var(--mw-b2);
padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.dom-btn:hover { background: var(--mw-b1); color: var(--mw-t1); border-color: var(--mw-b3); }
.dom-code {
font-family: ui-monospace, monospace; font-size: 11px; color: var(--mw-v2);
background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
padding: 1px 6px; border-radius: 4px;
}
.dom-txt-preview {
font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--mw-t3);
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}
/* DNS/DKIM stacked layout */
.dkim-cols { display: flex; flex-direction: column; gap: 14px; }
.dkim-col-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px 10px; border-bottom: 1px solid var(--mw-b1);
}
.dkim-col-count {
font-size: 11px; font-weight: 600; color: var(--mw-t4);
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
padding: 1px 7px; border-radius: 9px; margin-left: auto;
}
.dkim-card {
padding: 11px 14px; border-bottom: 1px solid var(--mw-b1);
display: flex; flex-direction: column; gap: 7px;
}
.dkim-card:last-child { border-bottom: none; }
.dkim-card-system { box-shadow: inset 3px 0 0 var(--mw-v); }
.dkim-card-top {
display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
}
.dkim-card-meta {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dkim-txt-row {
overflow: hidden;
}
.dkim-txt-row .dom-txt-preview { max-width: 100%; }
.dkim-empty {
padding: 24px 14px; font-size: 12px; color: var(--mw-t4); text-align: center;
}
/* Right Column */
.mw-right-col { display: flex; flex-direction: column; gap: 11px; }
.mw-donut-wrap { display: flex; align-items: center; gap: 16px; margin-top: 11px; }
.mw-legend-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; }
.mw-legend-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.mw-legend-label { color: var(--mw-t3); flex: 1; }
.mw-legend-val { color: var(--mw-t2); font-weight: 500; }
.mw-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.mw-mini-card { background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-radius: 8px; padding: 12px; }
.mw-mini-val { font-size: 20px; font-weight: 700; line-height: 1; }
.mw-mini-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--mw-t4); margin-top: 4px; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.mw-content { padding: 16px 18px 24px; }
.mw-topbar { padding: 0 16px; }
}
@media (max-width: 900px) {
.mw-bottom-grid { grid-template-columns: 1fr; }
.mw-right-col { flex-direction: row; }
/* Hostname auf Tablet kompakter */
.mw-tb-host { font-size: 10.5px; padding: 0 8px; }
}
@media (max-width: 768px) {
/* Sidebar off-canvas */
.mw-sidebar {
position: fixed; left: 0; top: 0; z-index: 50;
transform: translateX(-100%); transition: transform .25s;
}
.mw-sidebar.open { transform: translateX(0); }
.mw-sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.55); z-index: 40;
}
.mw-sidebar-overlay.open { display: block; }
/* Hamburger einblenden */
.mw-hamburger { display: flex; }
/* Parent bleibt sichtbar (3 Buchstaben) */
/* Layout */
.mw-metric-grid { grid-template-columns: repeat(2, 1fr); }
.mw-status-grid { grid-template-columns: repeat(2, 1fr); }
.mw-shell { display: block; height: 100vh; }
.mw-main { height: 100vh; }
.mw-right-col { flex-direction: column; }
}
@media (max-width: 480px) {
.mw-metric-grid { grid-template-columns: 1fr; }
.mw-status-grid { grid-template-columns: 1fr; }
.mw-topbar { padding: 0 12px; gap: 5px; }
.mw-tb-parent { display: none; }
.mw-tb-sep { display: none; }
.mw-tb-search-text { display: none; }
.mw-tb-kbd { display: none; }
.mw-tb-search { padding: 0 9px; }
.mw-tb-add-text { display: none; }
.mw-tb-add { padding: 0 9px; }
}
/* ── API Key Layout ── */
.mw-apikey-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 14px;
align-items: start;
}
.mw-apikey-layout > * { min-width: 0; }
@media (max-width: 900px) {
.mw-apikey-layout { grid-template-columns: 1fr; }
}
/* ── Responsive list helpers ── */
@media (max-width: 640px) {
.mw-col-hide-sm { display: none !important; }
.mw-only-desktop { display: none !important; }
}
@media (min-width: 641px) {
.mw-only-mobile { display: none !important; }
}
/* ── API Key div-list ── */
.mw-kl-head,
.mw-kl-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 104px 80px 90px 40px;
gap: 8px;
padding: 8px 14px;
align-items: center;
min-width: 0;
}
.mw-kl-head {
font-size: 9.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: var(--mw-t4);
border-bottom: 1px solid var(--mw-b1);
}
.mw-kl-row {
border-bottom: 1px solid var(--mw-b1);
transition: background .1s;
}
.mw-kl-row:last-child { border-bottom: none; }
.mw-kl-row:hover { background: rgba(255,255,255,.015); }
.mw-kl-row > * { min-width: 0; overflow: hidden; }
.mw-kl-date-inline { display: none; }
.mw-kl-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) and (min-width: 641px) {
.mw-kl-head,
.mw-kl-row { grid-template-columns: minmax(0, 1fr) 120px 80px 40px; }
.mw-kl-date { display: none; }
.mw-kl-date-inline { display: inline; }
}
@media (max-width: 640px) {
.mw-kl-head { display: none; }
.mw-kl-row {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 5px 8px;
padding: 10px 12px;
}
.mw-kl-name { grid-column: 1; grid-row: 1; }
.mw-kl-scopes { grid-column: 1; grid-row: 2; flex-wrap: wrap; overflow: visible; }
.mw-kl-modus { grid-column: 2; grid-row: 1; }
.mw-kl-date { display: none; }
.mw-kl-date-inline { display: inline; }
.mw-kl-actions { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* ── Webhook div-list ── */
.mw-whl-head,
.mw-whl-row {
display: grid;
grid-template-columns: 1fr 124px 72px 54px 82px;
gap: 8px;
padding: 8px 14px;
align-items: center;
min-width: 0;
}
.mw-whl-head {
font-size: 9.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: var(--mw-t4);
border-bottom: 1px solid var(--mw-b1);
}
.mw-whl-row {
border-bottom: 1px solid var(--mw-b1);
transition: background .1s;
}
.mw-whl-row:last-child { border-bottom: none; }
.mw-whl-row:hover { background: rgba(255,255,255,.015); }
.mw-whl-row > * { min-width: 0; }
.mw-whl-status-sm, .mw-whl-http-sm { display: none; }
@media (max-width: 640px) {
.mw-whl-head { display: none; }
.mw-whl-row {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 5px 8px;
padding: 10px 12px;
}
.mw-whl-webhook { grid-column: 1; grid-row: 1; }
.mw-whl-events { grid-column: 1; grid-row: 2; }
.mw-whl-status { display: none; }
.mw-whl-http { display: none; }
.mw-whl-date { display: none; }
.mw-whl-actions {
grid-column: 2; grid-row: 1 / 3;
display: flex; flex-direction: column; gap: 4px; align-self: start;
}
.mw-whl-status-sm, .mw-whl-http-sm { display: inline; }
}
/* ── Webhook-Tabelle Layout ── */
.mw-wh-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 14px;
align-items: start;
}
.mw-wh-layout > * { min-width: 0; }
@media (max-width: 900px) {
.mw-wh-layout { grid-template-columns: 1fr; }
}
/* ── Sandbox Layout ── */
.mw-sandbox-client {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0;
border: 1px solid var(--mw-b1);
border-radius: 10px;
overflow: hidden;
background: var(--mw-bg2);
min-height: 520px;
}
.mw-sandbox-list {
border-right: 1px solid var(--mw-b1);
overflow-y: auto;
max-height: 680px;
}
.mw-sandbox-detail {
overflow-y: auto;
max-height: 680px;
min-height: 400px;
}
.mw-postfix-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
padding: 16px 18px;
}
@media (max-width: 900px) {
.mw-sandbox-client { grid-template-columns: 1fr; }
.mw-sandbox-list { border-right: none; border-bottom: 1px solid var(--mw-b1); max-height: 260px; }
.mw-sandbox-detail { max-height: none; }
.mw-postfix-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.mw-sandbox-client { min-height: 0; }
.mw-postfix-grid { grid-template-columns: 1fr; }
}
.mw-svc-status-off { color: var(--mw-rd) !important; opacity: 1; }
.mw-svc-status-na { color: var(--mw-t4) !important; opacity: 1; }
/* ═══════════════════════════════════════
Mailbox Page — mbx-* classes
═══════════════════════════════════════ */
/* Page Header */
.mbx-page-header {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.mbx-page-title {
display: flex; align-items: center; gap: 9px;
font-size: 16px; font-weight: 600; color: var(--mw-t1);
}
.mbx-total-badge {
font-size: 11px; font-weight: 600; background: var(--mw-bg4);
color: var(--mw-t3); border: 1px solid var(--mw-b2);
padding: 1px 8px; border-radius: 10px;
}
.mbx-page-actions { display: flex; align-items: center; gap: 8px; }
/* Search */
.mbx-search-wrap {
display: flex; align-items: center; gap: 8px;
background: var(--mw-bg3); border: 1px solid var(--mw-b1);
border-radius: 7px; padding: 7px 11px;
}
.mbx-search-input {
background: none; border: none; outline: none;
font-size: 12.5px; color: var(--mw-t2); width: 220px;
}
.mbx-search-input::placeholder { color: var(--mw-t4); }
/* Buttons */
.mbx-btn-primary {
display: flex; align-items: center; gap: 5px;
background: var(--mw-v); border: none; border-radius: 6px;
padding: 6px 12px; font-size: 12px; font-weight: 600;
color: #fff; cursor: pointer; white-space: nowrap;
box-shadow: 0 0 8px rgba(124,58,237,.3);
}
.mbx-btn-primary:hover { background: #6d28d9; }
.mbx-btn-mute {
display: flex; align-items: center; gap: 6px;
background: var(--mw-bg3); border: 1px solid var(--mw-b1);
border-radius: 6px; padding: 6px 11px; font-size: 12px;
color: var(--mw-t3); cursor: pointer; white-space: nowrap;
}
.mbx-btn-mute:hover { border-color: var(--mw-b2); color: var(--mw-t2); }
/* Domain sections */
.mbx-sections { display: flex; flex-direction: column; gap: 14px; }
.mbx-section {
background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; overflow: hidden;
}
.mbx-domain-head {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 18px; border-bottom: 1px solid var(--mw-b1);
}
.mbx-domain-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbx-domain-icon {
width: 26px; height: 26px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 6px; display: flex; align-items: center; justify-content: center;
color: var(--mw-t3); flex-shrink: 0;
}
.mbx-domain-name { font-size: 13px; font-weight: 600; color: var(--mw-t1); }
.mbx-domain-count {
font-size: 11px; color: var(--mw-t4); background: var(--mw-bg4);
border: 1px solid var(--mw-b2); padding: 1px 7px; border-radius: 8px;
}
/* Badges */
.mbx-badge-ok { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-grbg); color: var(--mw-gr); border: 1px solid var(--mw-grbd); white-space: nowrap; }
.mbx-badge-warn { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-ambg); color: var(--mw-am); border: 1px solid var(--mw-ambd); white-space: nowrap; }
.mbx-badge-mute { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-bg4); color: var(--mw-t4); border: 1px solid var(--mw-b2); white-space: nowrap; }
/* Table */
.mbx-table-wrap { overflow-x: auto; }
.mbx-table { width: 100%; border-collapse: collapse; }
.mbx-th {
padding: 9px 16px; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .9px; color: var(--mw-t4); text-align: left;
border-bottom: 1px solid var(--mw-b1); white-space: nowrap;
}
.mbx-th-right { text-align: right; }
.mbx-tr { border-bottom: 1px solid var(--mw-b1); transition: background .1s; }
.mbx-tr:last-child { border-bottom: none; }
.mbx-tr:hover { background: var(--mw-bg4); }
.mbx-tr-inactive { opacity: .6; }
.mbx-tr-system { box-shadow: inset 3px 0 0 var(--mw-v); }
.mbx-tr-selected { background: var(--mw-vbg) !important; box-shadow: inset 3px 0 0 var(--mw-v2); }
.mbx-td { padding: 11px 16px; vertical-align: middle; }
/* Custom checkbox */
.mbx-cbx {
appearance: none; -webkit-appearance: none;
width: 15px; height: 15px; flex-shrink: 0;
border: 1.5px solid var(--mw-b2); border-radius: 4px;
background: var(--mw-bg3); cursor: pointer;
transition: border-color .15s, background .15s;
position: relative; display: inline-block; vertical-align: middle;
}
.mbx-cbx:hover { border-color: var(--mw-v2); }
.mbx-cbx:checked {
background: var(--mw-v); border-color: var(--mw-v);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 10px 8px; background-repeat: no-repeat; background-position: center;
}
.mbx-cbx:indeterminate {
background: var(--mw-vbg); border-color: var(--mw-v2);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h8' stroke='%239d6ef8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 10px 2px; background-repeat: no-repeat; background-position: center;
}
/* Bulk action bar */
.mbx-bulk-bar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 9px 14px; margin-bottom: 8px;
background: var(--mw-bg2); border: 1px solid var(--mw-b1);
border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.mbx-bulk-count {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; color: var(--mw-v2);
background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.mbx-bulk-sep { width: 1px; height: 18px; background: var(--mw-b2); margin: 0 2px; flex-shrink: 0; }
.mbx-bulk-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t2);
transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.mbx-bulk-btn:hover { border-color: var(--mw-b3); color: var(--mw-t1); background: var(--mw-bg4); }
.mbx-bulk-btn-danger {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
border: 1px solid var(--mw-rdbd); background: var(--mw-rdbg); color: var(--mw-rd);
transition: opacity .15s; white-space: nowrap;
}
.mbx-bulk-btn-danger:hover { opacity: .85; }
.mbx-bulk-clear {
margin-left: auto; background: none; border: none; cursor: pointer;
color: var(--mw-t4); font-size: 18px; line-height: 1; padding: 2px 4px;
transition: color .15s;
}
.mbx-bulk-clear:hover { color: var(--mw-t2); }
.mbx-td-muted { font-size: 12px; color: var(--mw-t3); }
/* Skeleton pulse */
@keyframes skel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .4; }
}
/* Tab buttons */
.mbx-tab-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 16px;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
cursor: pointer;
font-size: 12.5px;
white-space: nowrap;
color: var(--mw-t4);
transition: color .15s;
outline: none;
}
.mbx-tab-btn:hover { color: var(--mw-t2); }
.mbx-tab-btn.is-active {
color: var(--mw-v2);
border-bottom-color: var(--mw-v2);
font-weight: 600;
}
.mbx-tab-badge {
font-size: 10.5px;
padding: 1px 6px;
border-radius: 10px;
font-weight: 500;
line-height: 1.6;
background: var(--mw-bg3);
color: var(--mw-t4);
transition: background .15s, color .15s;
}
.mbx-tab-btn.is-active .mbx-tab-badge {
background: var(--mw-vbg);
color: var(--mw-v2);
}
/* Row actions (hover ··· button) */
.mbx-row-acts { opacity: 0; transition: opacity .12s; }
.mbx-tr:hover .mbx-row-acts { opacity: 1; }
.mbx-row-acts-open { opacity: 1 !important; }
.mbx-row-acts-btn {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 6px;
border: 1px solid transparent; background: none; cursor: pointer;
color: var(--mw-t3); transition: background .12s, border-color .12s, color .12s;
}
.mbx-row-acts-btn:hover { background: var(--mw-bg4); border-color: var(--mw-b2); color: var(--mw-t1); }
/* Email cell */
.mbx-email-cell { display: flex; align-items: center; gap: 9px; }
.mbx-email-avatar {
width: 26px; height: 26px; border-radius: 6px; background: var(--mw-vbg);
border: 1px solid var(--mw-vbd); display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: var(--mw-v2); flex-shrink: 0;
}
.mbx-email-text { font-size: 13px; font-weight: 500; color: var(--mw-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Quota bar */
.mbx-quota-wrap { display: flex; align-items: center; gap: 8px; }
.mbx-quota-bar { flex: 1; height: 4px; background: var(--mw-bg4); border-radius: 3px; min-width: 80px; }
.mbx-quota-fill { height: 4px; border-radius: 3px; transition: width .3s; }
.mbx-quota-pct { font-size: 10.5px; color: var(--mw-t4); white-space: nowrap; width: 30px; text-align: right; }
.mbx-bar-low .mbx-quota-fill { background: linear-gradient(90deg, #14532d, #22c55e); }
.mbx-bar-mid .mbx-quota-fill { background: linear-gradient(90deg, #78350f, #f59e0b); }
.mbx-bar-high .mbx-quota-fill { background: linear-gradient(90deg, #7f1d1d, #ef4444); }
.mbx-bar-dim { opacity: .4; }
/* Action buttons */
.mbx-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.mbx-act-btn {
width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
background: var(--mw-bg4); border: 1px solid var(--mw-b2); color: var(--mw-t3); cursor: pointer; transition: all .1s;
}
.mbx-act-btn:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mbx-act-danger:hover { background: var(--mw-rdbg); border-color: var(--mw-rdbd); color: var(--mw-rd); }
/* Empty states */
.mbx-empty-domain {
padding: 16px 18px; font-size: 12px; color: var(--mw-t4); font-style: italic;
}
.mbx-empty-link {
background: none; border: none; cursor: pointer; color: var(--mw-v2); font-size: 12px; margin-left: 6px; text-decoration: underline;
}
.mbx-empty-state {
background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px;
padding: 48px; text-align: center; font-size: 13px; color: var(--mw-t4);
display: flex; flex-direction: column; align-items: center;
}
/* Alias group tag */
.als-group-tag {
font-size: 11px; color: var(--mw-t3); background: var(--mw-bg4);
border: 1px solid var(--mw-b2); border-radius: 4px; padding: 1px 6px;
}
/* ═══════════════════════════════════════════════════════
MW Modal — design system matching mw-* dashboard style
═══════════════════════════════════════════════════════ */
/* Layout */
.mw-modal-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 20px 14px; border-bottom: 1px solid var(--mw-b2);
flex-shrink: 0;
}
.mw-modal-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.mw-modal-title { font-size: 14px; font-weight: 600; color: var(--mw-t1); margin: 0; }
.mw-modal-sub { font-size: 12px; color: var(--mw-t3); }
.mw-modal-close {
background: none; border: none; cursor: pointer; color: var(--mw-t4);
padding: 3px; border-radius: 5px; line-height: 1; flex-shrink: 0;
}
.mw-modal-close:hover { color: var(--mw-t2); background: var(--mw-bg4); }
.mw-modal-close svg { display: block; }
.mw-modal-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.mw-modal-foot {
padding: 12px 20px; border-top: 1px solid var(--mw-b2);
display: flex; justify-content: flex-end; gap: 8px;
flex-shrink: 0;
}
/* Form elements */
.mw-modal-label { font-size: 11px; color: var(--mw-t3); display: block; margin-bottom: 5px; }
.mw-modal-input {
width: 100%; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 7px; color: var(--mw-t1); font-size: 13px;
padding: 0 10px; height: 33px; line-height: 33px;
outline: none; box-sizing: border-box; appearance: none;
}
.mw-modal-input:focus { border-color: rgba(124,58,237,.4); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.mw-modal-input::placeholder { color: var(--mw-t4); }
.mw-modal-input:disabled { opacity: .45; cursor: not-allowed; }
textarea.mw-modal-input { height: auto; line-height: 1.55; padding: 8px 10px; }
.mw-modal-hint { font-size: 11px; color: var(--mw-t3); margin-top: 4px; }
.mw-modal-error { font-size: 11px; color: var(--mw-rd); margin-top: 4px; }
.mw-modal-sep { border: none; border-top: 1px solid var(--mw-b2); margin: 0; }
.mw-modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mw-modal-row { display: flex; flex-direction: column; }
/* Alerts */
.mw-modal-warn {
background: var(--mw-ambg); border: 1px solid var(--mw-ambd);
border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-am);
}
.mw-modal-danger {
background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd);
border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-rd);
}
.mw-modal-info {
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-t3);
}
/* Email preview */
.mw-modal-preview {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 7px; font-size: 12px; color: var(--mw-t2);
}
.mw-modal-preview-label { color: var(--mw-t4); }
/* Split input (local @ domain) */
.mw-modal-split { display: flex; }
.mw-modal-split .mw-modal-input { border-radius: 7px 0 0 7px; }
.mw-modal-split-suffix {
display: flex; align-items: center; padding: 0 10px;
background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-left: none;
border-radius: 0 7px 7px 0; font-size: 13px; color: var(--mw-t4); white-space: nowrap;
}
/* Checkbox */
.mw-modal-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.mw-modal-check input[type="checkbox"] { accent-color: var(--mw-v); width: 15px; height: 15px; cursor: pointer; }
.mw-modal-check-label { font-size: 13px; color: var(--mw-t2); }
/* Recipient row (alias modal) */
.mw-modal-recip {
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 8px; padding: 12px;
}
.mw-modal-recip-grid { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
.mw-modal-recip-grid.single { grid-template-columns: 1fr auto 1fr; }
.mw-modal-recip-or { font-size: 11px; color: var(--mw-t4); text-align: center; }
.mw-modal-recip-labels { display: grid; gap: 8px; margin-bottom: 6px; }
.mw-modal-recip-del {
width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd); color: var(--mw-rd); cursor: pointer;
}
.mw-modal-recip-del:hover { background: var(--mw-rd); color: #fff; }
/* Tag/badge */
.mw-modal-tag {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
background: var(--mw-bg4); border: 1px solid var(--mw-b2); font-size: 11px; color: var(--mw-t3);
}
/* Buttons */
.mw-btn-primary {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
background: var(--mw-v); border: 1px solid var(--mw-v); color: #fff;
box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.mw-btn-primary:hover { background: #6d28d9; border-color: #6d28d9; }
.mw-btn-secondary {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
background: var(--mw-bg3); border: 1px solid var(--mw-b2); color: var(--mw-t2);
transition: background .15s, border-color .15s;
}
.mw-btn-secondary:hover { background: var(--mw-bg4); border-color: var(--mw-b3); color: var(--mw-t1); }
.mw-btn-cancel {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 14px; border-radius: 7px; font-size: 13px; cursor: pointer;
background: none; border: 1px solid var(--mw-b2); color: var(--mw-t3);
}
.mw-btn-cancel:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mw-btn-save {
padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
background: var(--mw-v); border: 1px solid var(--mw-v2); color: #fff;
}
.mw-btn-save:hover { opacity: .88; }
.mw-btn-save:disabled { opacity: .35; cursor: not-allowed; }
.mw-btn-del {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd); color: var(--mw-rd);
}
.mw-btn-del:hover { background: var(--mw-rd); border-color: var(--mw-rd); color: #fff; }
.mw-btn-del:disabled { opacity: .35; cursor: not-allowed; }
.mw-btn-add-row {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
background: var(--mw-bg4); border: 1px solid var(--mw-b2); color: var(--mw-t3);
}
.mw-btn-add-row:hover { color: var(--mw-t2); border-color: var(--mw-b3); }
.mw-btn-add-row:disabled { opacity: .35; cursor: not-allowed; }
/* Modal outer container */
.mw-modal-box {
background: var(--mw-bg3);
border: 1px solid var(--mw-b2);
border-radius: 11px;
box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
.mw-modal-inner {
display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
.mw-modal-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* ═══════════════════════════════════════════════════════
DNS Modal
═══════════════════════════════════════════════════════ */
.dns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .dns-grid { grid-template-columns: 1fr; } }
.dns-section-head {
display: flex; align-items: center; gap: 7px; font-size: 11px;
margin-bottom: 10px; flex-wrap: wrap;
}
.dns-step-badge {
font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
background: var(--mw-vbg); color: var(--mw-v2); border: 1px solid var(--mw-vbd);
}
.dns-tag-badge {
font-size: 10px; padding: 1px 7px; border-radius: 4px; margin-left: auto;
background: var(--mw-bg4); color: var(--mw-t3); border: 1px solid var(--mw-b2);
}
.dns-records { display: flex; flex-direction: column; gap: 8px; }
.dns-rec {
border-radius: 8px; border: 1px solid var(--mw-b2);
background: var(--mw-bg4); overflow: hidden;
}
.dns-rec.ok { border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.08); }
.dns-rec.missing { border-color: rgba(239,68,68,.32); background: rgba(239,68,68,.09); }
.dns-rec.syntax { border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.08); }
.dns-rec.neutral { border-color: var(--mw-b2); background: var(--mw-bg4); }
.dns-rec-head {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 10px; gap: 8px;
}
.dns-rec-name {
font-size: 11.5px; color: var(--mw-t2); min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 860px) {
.dns-rec-name { white-space: normal; word-break: break-all; }
.mw-modal-body { padding: 12px 14px; }
}
.dns-rec-value {
font-family: ui-monospace, monospace; font-size: 11px;
color: var(--mw-t3); margin: 0; padding: 6px 10px 8px;
border-top: 1px solid var(--mw-b1);
white-space: pre-wrap; word-break: break-all; line-height: 1.5;
}
.dns-rec-actual {
font-family: ui-monospace, monospace; font-size: 10.5px;
color: var(--mw-t4); padding: 4px 10px 6px;
}
.dns-copy-btn {
flex-shrink: 0; width: 24px; height: 24px; border-radius: 5px;
background: var(--mw-bg3); border: 1px solid var(--mw-b2);
color: var(--mw-t4); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dns-copy-btn:hover { color: var(--mw-t2); border-color: var(--mw-b3); }
/* DNS record type badges */
.dns-type-badge {
font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
white-space: nowrap; flex-shrink: 0;
background: var(--mw-bg3); color: var(--mw-t3); border: 1px solid var(--mw-b2);
}
.dns-type-badge.a { background: rgba(6,182,212,.14); color: #67e8f9; border-color: rgba(6,182,212,.28); }
.dns-type-badge.aaaa { background: rgba(59,130,246,.14); color: #93c5fd; border-color: rgba(59,130,246,.28); }
.dns-type-badge.mx { background: rgba(34,197,94,.14); color: #86efac; border-color: rgba(34,197,94,.28); }
.dns-type-badge.cname { background: rgba(167,139,250,.14); color: #c4b5fd; border-color: rgba(167,139,250,.28); }
.dns-type-badge.ptr { background: rgba(245,158,11,.14); color: #fcd34d; border-color: rgba(245,158,11,.28); }
.dns-type-badge.txt { background: rgba(139,92,246,.14); color: #c4b5fd; border-color: rgba(139,92,246,.28); }
.dns-type-badge.srv { background: rgba(251,113,133,.14); color: #fda4af; border-color: rgba(251,113,133,.28); }
.dns-type-badge.tlsa { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.28); }
/* ═══════════════════════════════════════════════════════
MQ — Mail Queue & Quarantine
═══════════════════════════════════════════════════════ */
.mq-page-header {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.mq-page-title {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600; color: var(--mw-t1);
}
.mq-page-sub { font-size: 11px; color: var(--mw-t4); font-weight: 400; }
.mq-total-badge {
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
border-radius: 10px; padding: 1px 7px; font-size: 11px;
font-weight: 500; color: var(--mw-t3);
}
.mq-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mq-search-wrap {
display: flex; align-items: center; gap: 6px;
background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
padding: 0 10px; height: 30px; color: var(--mw-t4);
}
.mq-search-input {
background: none; border: none; outline: none;
color: var(--mw-t1); font-size: 12px; width: 180px;
}
.mq-search-input::placeholder { color: var(--mw-t4); }
.mq-select {
background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
color: var(--mw-t2); font-size: 12px; padding: 0 8px; height: 30px; outline: none;
}
.mq-btn-mute {
display: flex; align-items: center; gap: 5px;
background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
color: var(--mw-t2); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-mute:hover { background: var(--mw-bg4); }
.mq-btn-danger {
display: flex; align-items: center; gap: 5px;
background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); border-radius: 7px;
color: var(--mw-rd); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-danger:hover { background: rgba(239,68,68,.2); }
.mq-btn-danger-outline {
background: none; border: 1px solid var(--mw-b2); border-radius: 7px;
color: var(--mw-t3); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-danger-outline:hover { border-color: var(--mw-rd); color: var(--mw-rd); }
.mq-btn-icon {
background: none; border: none; cursor: pointer; color: var(--mw-t4);
padding: 4px; border-radius: 5px;
}
.mq-btn-icon:hover { background: var(--mw-bg4); color: var(--mw-t2); }
/* Tabs */
.mq-tabs {
display: flex; gap: 2px; margin-bottom: 12px;
background: var(--mw-bg3); border: 1px solid var(--mw-b2);
border-radius: 8px; padding: 3px; width: fit-content;
}
.mq-tab {
display: flex; align-items: center; gap: 5px;
background: none; border: none; border-radius: 6px;
color: var(--mw-t3); font-size: 12px; padding: 4px 10px; cursor: pointer;
white-space: nowrap;
}
.mq-tab:hover { color: var(--mw-t2); }
.mq-tab.active { background: var(--mw-bg4); color: var(--mw-t1); font-weight: 500; }
.mq-tab-n {
background: var(--mw-bg2); border-radius: 8px; padding: 0 5px;
font-size: 10px; color: var(--mw-t4);
}
.mq-tab.active .mq-tab-n { color: var(--mw-t3); }
/* Status dots */
.mq-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
display: inline-block;
}
.mq-dot.ok { background: var(--mw-gr); }
.mq-dot.warn { background: var(--mw-am); }
.mq-dot.na { background: var(--mw-b3); }
.mq-dot.off { background: var(--mw-rd); }
/* Badges */
.mq-badge {
display: inline-flex; align-items: center;
border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 500;
}
.mq-badge.ok { background: rgba(34,197,94,.12); color: var(--mw-gr); }
.mq-badge.warn { background: rgba(234,179,8,.12); color: var(--mw-am); }
.mq-badge.na { background: var(--mw-bg4); color: var(--mw-t3); }
.mq-badge.off { background: rgba(239,68,68,.12); color: var(--mw-rd); }
/* Card / Table */
.mq-card {
background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 10px;
overflow: hidden;
}
.mq-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mq-table th {
padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 500;
color: var(--mw-t4); border-bottom: 1px solid var(--mw-b2);
background: var(--mw-bg4); white-space: nowrap;
}
.mq-table td { padding: 8px 12px; border-bottom: 1px solid var(--mw-b1); vertical-align: middle; }
.mq-row:last-child td { border-bottom: none; }
.mq-row:hover td { background: var(--mw-bg4); }
.mq-check { accent-color: var(--mw-v); cursor: pointer; }
.mq-id { font-family: monospace; font-size: 11px; color: var(--mw-t3); }
.mq-addr { color: var(--mw-t2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-subject { color: var(--mw-t1); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-num { color: var(--mw-t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-reason { color: var(--mw-t4); font-size: 11.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Empty state */
.mq-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 60px 20px; color: var(--mw-t4); text-align: center;
}
.mq-empty p { margin: 0; font-size: 13px; }
.mq-empty small { font-size: 11px; color: var(--mw-t4); }
/* Score */
.mq-score-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 80px; }
.mq-score { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-score.ok { color: var(--mw-gr); }
.mq-score.warn { color: var(--mw-am); }
.mq-score.off { color: var(--mw-rd); }
.mq-score.na { color: var(--mw-t4); }
.mq-score-bar { height: 3px; background: var(--mw-bg4); border-radius: 2px; overflow: hidden; }
.mq-score-fill { height: 100%; border-radius: 2px; }
.mq-score-fill.ok { background: var(--mw-gr); }
.mq-score-fill.warn { background: var(--mw-am); }
.mq-score-fill.off { background: var(--mw-rd); }
.mq-score-fill.na { background: var(--mw-b3); }
/* Modal detail rows */
.mq-detail-row { display: flex; flex-direction: column; gap: 3px; }
.mq-detail-label { font-size: 11px; color: var(--mw-t4); }
.mq-detail-val { color: var(--mw-t1); font-size: 13px; word-break: break-all; }
.mq-header-pre {
background: var(--mw-bg2); border: 1px solid var(--mw-b1); border-radius: 6px;
padding: 10px 12px; font-size: 11px; font-family: monospace; color: var(--mw-t3);
overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto;
margin-top: 6px;
}
/* Score block in modal */
.mq-score-block {
background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-radius: 8px;
padding: 12px 14px;
}
.mq-score-big { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-score-big.ok { color: var(--mw-gr); }
.mq-score-big.warn { color: var(--mw-am); }
.mq-score-big.off { color: var(--mw-rd); }
.mq-score-big.na { color: var(--mw-t4); }
.mq-score-track { height: 6px; background: var(--mw-bg2); border-radius: 4px; overflow: hidden; }
/* Symbols list */
.mq-symbols { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.mq-symbol {
display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
background: var(--mw-bg4); border-radius: 5px;
border-left: 2px solid var(--mw-b2);
}
.mq-symbol.pos { border-left-color: var(--mw-rd); }
.mq-symbol.neg { border-left-color: var(--mw-gr); }
.mq-sym-name { font-size: 11.5px; font-family: monospace; color: var(--mw-t2); flex-shrink: 0; }
.mq-sym-score { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; }
.mq-symbol.pos .mq-sym-score { color: var(--mw-rd); }
.mq-symbol.neg .mq-sym-score { color: var(--mw-gr); }
.mq-sym-desc { font-size: 11px; color: var(--mw-t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ─── Role Badges ────────────────────────────────────────────── */
.role-badge-admin {
display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
background: var(--mw-vbg); border: 1px solid var(--mw-vbd); color: var(--mw-v2);
}
.role-badge-op {
display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #93c5fd;
}
/* ─── Security Pages ─────────────────────────────────────────── */
.sec-layout { display: grid; grid-template-columns: 1fr 270px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sec-layout { grid-template-columns: 1fr; } }
.sec-label { display: block; font-size: 11px; color: var(--mw-t3); margin-bottom: 6px; letter-spacing: .02em; }
.sec-input {
display: block; width: 100%; height: 33px; border-radius: 7px;
border: 1px solid var(--mw-b2); background: var(--mw-bg3);
color: var(--mw-t1); font-size: 12.5px; padding: 0 10px;
outline: none; box-sizing: border-box; transition: border-color .15s;
}
.sec-input:focus { border-color: var(--mw-b3); }
textarea.sec-input { height: auto; line-height: 1.55; padding: 8px 10px; resize: vertical; }
.sec-hint { font-size: 10.5px; color: var(--mw-t4); margin-top: 5px; line-height: 1.4; }
.sec-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sec-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.sec-group { padding: 14px 16px; }
.sec-divider { border: none; border-top: 1px solid var(--mw-b1); margin: 14px 0; }
/* Toggle switch */
.sec-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sec-check input[type="checkbox"] {
-webkit-appearance: none; appearance: none;
width: 32px; height: 18px; border-radius: 9px; flex-shrink: 0; cursor: pointer;
background-color: var(--mw-b3);
background-image: radial-gradient(circle, rgba(255,255,255,.45) 4.5px, transparent 5px);
background-repeat: no-repeat; background-position: 3px center; background-size: 12px 12px;
border: 1px solid var(--mw-b3);
transition: background-color .18s, border-color .18s, background-position .18s;
}
.sec-check input[type="checkbox"]:checked {
background-color: var(--mw-v); border-color: var(--mw-v);
background-image: radial-gradient(circle, #fff 4.5px, transparent 5px);
background-position: calc(100% - 3px) center;
}
.sec-check-label { font-size: 12.5px; color: var(--mw-t2); }
/* Backup source selector cards */
.bk-src-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-src-card {
display: flex; flex-direction: column; gap: 6px; position: relative;
padding: 12px 13px; border-radius: 8px;
background: var(--mw-bg4); border: 1px solid var(--mw-b2);
cursor: pointer; user-select: none;
transition: border-color .15s, background .15s;
}
.bk-src-card:has(input:checked) { background: var(--mw-vbg); border-color: var(--mw-vbd); }
.bk-src-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-src-icon { color: var(--mw-t4); transition: color .15s; display: flex; }
.bk-src-card:has(input:checked) .bk-src-icon { color: var(--mw-v2); }
.bk-src-name { font-size: 12px; font-weight: 500; color: var(--mw-t3); transition: color .15s; }
.bk-src-card:has(input:checked) .bk-src-name { color: var(--mw-v2); }
.bk-src-hint { font-size: 10.5px; color: var(--mw-t4); line-height: 1.4; }
/* Blacklist badge + button */
.sec-bl-badge {
display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(239,68,68,.3);
background: rgba(239,68,68,.08); color: #fca5a5;
}
.sec-bl-btn {
display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(239,68,68,.3);
background: rgba(239,68,68,.08); color: #fca5a5; cursor: pointer;
transition: border-color .15s;
}
.sec-bl-btn:hover { border-color: rgba(239,68,68,.5); }
/* Fail2Ban banlist rows */
.f2b-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--mw-b2); margin-bottom: 6px; font-size: 12.5px; }
.f2b-row:last-child { margin-bottom: 0; }
.f2b-row.temporary { border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.06); }
.f2b-row.permanent { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.07); }
.f2b-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.f2b-dot.temporary { background: rgba(245,158,11,.9); }
.f2b-dot.permanent { background: rgba(239,68,68,.9); }
.f2b-jail-badge { font-size: 10px; color: var(--mw-t4); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--mw-b1); background: var(--mw-bg3); }
/* IP sidebar items */
.f2b-ip-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); margin-bottom: 5px; font-size: 12px; }
.f2b-ip-item:last-child { margin-bottom: 0; }
/* SSL cert rows */
.ssl-cert { padding: 12px 16px; border-bottom: 1px solid var(--mw-b1); }
.ssl-cert:last-child { border-bottom: none; }
.ssl-domains { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ssl-domain-pill { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t3); font-family: monospace; }
/* TLS preset buttons */
.tls-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tls-preset-btn { padding: 5px 13px; border-radius: 7px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t2); font-size: 12px; cursor: pointer; transition: all .15s; }
.tls-preset-btn.active { border-color: var(--mw-vbd); background: var(--mw-vbg); color: var(--mw-v2); }
.tls-preset-btn:hover:not(.active) { border-color: var(--mw-b3); color: var(--mw-t1); }
/* Rspamd threshold slider row */
.rspamd-thres { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rspamd-thres-label { font-size: 11.5px; color: var(--mw-t3); min-width: 100px; }
/* Audit log rows */
.audit-row {
padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--mw-b1);
display: grid; grid-template-columns: 148px 72px 1fr; align-items: baseline; gap: 8px;
border-left: 3px solid transparent; transition: background .1s;
}
.audit-row:last-child { border-bottom: none; }
.audit-row:hover { background: var(--mw-bg4); }
.audit-row.info { border-left-color: rgba(59,130,246,.4); }
.audit-row.debug { border-left-color: rgba(148,163,184,.25); }
.audit-row.warning { border-left-color: rgba(245,158,11,.55); background: rgba(245,158,11,.02); }
.audit-row.error { border-left-color: rgba(239,68,68,.5); background: rgba(239,68,68,.025); }
.audit-row.critical { border-left-color: #ef4444; background: rgba(239,68,68,.055); }
.audit-row.warning:hover { background: rgba(245,158,11,.045); }
.audit-row.error:hover { background: rgba(239,68,68,.05); }
.audit-row.critical:hover { background: rgba(239,68,68,.09); }
.audit-time { font-size: 10.5px; color: var(--mw-t4); white-space: nowrap; font-family: ui-monospace,monospace; letter-spacing: -.01em; }
.audit-level { display: inline-block; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid; font-weight: 600; letter-spacing: .04em; text-align: center; }
.audit-level.info { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.08); color: #93c5fd; }
.audit-level.debug { border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.06); color: #94a3b8; }
.audit-level.warning { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); color: #fcd34d; }
.audit-level.error { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); color: #fca5a5; }
.audit-level.critical { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.15); color: #f87171; font-weight: 700; }
.audit-msg { color: var(--mw-t2); min-width: 0; word-break: break-word; line-height: 1.55; font-family: ui-monospace,monospace; font-size: 11.5px; }
/* ── Pagination (Queue / Quarantine) ────────────────────────────── */
.mq-pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--mw-b2); }
.mq-pag-info { font-size: 11.5px; color: var(--mw-t4); }
.mq-pag-btns { display: flex; align-items: center; gap: 4px; }
.mq-pag-btn { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--mw-b2); background: transparent; color: var(--mw-t3); font-size: 12px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mq-pag-btn:hover:not(:disabled) { background: var(--mw-bg3); color: var(--mw-t1); }
.mq-pag-btn.active { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.5); color: #c4b5fd; }
.mq-pag-btn:disabled { opacity: .35; cursor: default; }
Reference in New Issue View Git Blame Copy Permalink