156 lines
14 KiB
CSS
156 lines
14 KiB
CSS
.site-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background-image: url("https://images.pexels.com/photos/30307748/pexels-photo-30307748.jpeg?auto=compress&cs=tinysrgb&w=1920");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.site-bg::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(226, 232, 240, .50);
|
|
}
|
|
.dark .site-bg::after {
|
|
background: rgba(9, 9, 11, .80);
|
|
}
|
|
.mobile-topbar { display: none; }
|
|
.mobile-menu-backdrop { display: none; }
|
|
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 292px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
|
|
body.sidebar-collapsed .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
|
|
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid rgb(226 232 240); background: rgba(255,255,255,.94); padding: 14px; backdrop-filter: blur(12px); overflow: hidden; }
|
|
.dark .sidebar { border-color: rgb(39 39 42); background: rgba(24,24,27,.94); }
|
|
.app-main { min-width: 0; padding: 18px; }
|
|
.sidebar-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
|
|
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; background: #16a34a; color: white; font-size: 13px; font-weight: 950; }
|
|
.sidebar-toggle { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; margin-left: auto; border-radius: 8px; border: 1px solid rgb(203 213 225); background: white; color: rgb(71 85 105); }
|
|
.dark .sidebar-toggle { border-color: rgb(63 63 70); background: rgb(39 39 42); color: white; }
|
|
.sidebar-toggle svg, .nav-icon svg, .sidebar-mini-action svg, .mobile-menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
|
|
.sidebar-nav { display: grid; gap: 8px; }
|
|
.sidebar-nav-item { width: 100%; display: flex; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; padding: 10px; color: rgb(51 65 85); font-size: 14px; font-weight: 850; text-align: left; transition: background .15s ease, color .15s ease, border-color .15s ease; }
|
|
.sidebar-nav-item:hover { border-color: rgb(187 247 208); background: rgb(240 253 244); color: #166534; }
|
|
.dark .sidebar-nav-item { color: rgb(212 212 216); }
|
|
.dark .sidebar-nav-item:hover { border-color: rgba(34,197,94,.34); background: rgba(22,163,74,.14); color: #86efac; }
|
|
.sidebar-nav-item.active { border-color: #16a34a; background: #16a34a; color: white; box-shadow: 0 10px 24px rgba(22,163,74,.24); }
|
|
.nav-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; }
|
|
.sidebar-panels { display: grid; gap: 12px; min-width: 0; }
|
|
.sidebar-panel { position: relative; border: 1px solid rgb(226 232 240); background: rgba(248,250,252,.8); border-radius: 8px; padding: 14px; min-width: 0; }
|
|
.dark .sidebar-panel { border-color: rgb(39 39 42); background: rgba(39,39,42,.72); }
|
|
.sidebar-panel-content { display: grid; gap: 10px; }
|
|
.sidebar-mini-action { display: none; width: 44px; height: 44px; place-items: center; border-radius: 8px; border: 1px solid rgb(203 213 225); background: white; color: #16a34a; }
|
|
.dark .sidebar-mini-action { border-color: rgb(63 63 70); background: rgb(39 39 42); }
|
|
.sidebar-footer { margin-top: auto; }
|
|
body.sidebar-collapsed .sidebar { align-items: center; padding-left: 12px; padding-right: 12px; }
|
|
body.sidebar-collapsed .sidebar-label, body.sidebar-collapsed .sidebar-panel-content { display: none; }
|
|
body.sidebar-collapsed .sidebar-brand { justify-content: center; }
|
|
body.sidebar-collapsed .sidebar-toggle { margin-left: 0; }
|
|
body.sidebar-collapsed .sidebar-nav-item { justify-content: center; padding: 11px; }
|
|
body.sidebar-collapsed .sidebar-panel { padding: 8px; border-color: transparent; background: transparent; }
|
|
body.sidebar-collapsed .sidebar-mini-action { display: grid; }
|
|
body.sidebar-collapsed .theme-item { width: 46px; }
|
|
.panel { border: 1px solid rgb(226 232 240); background: rgba(255,255,255,.92); border-radius: 8px; padding: 16px; }
|
|
.dark .panel { border-color: rgb(39 39 42); background: rgba(24,24,27,.92); }
|
|
.section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgb(71 85 105); margin-bottom: 10px; }
|
|
.dark .section-title { color: rgb(161 161 170); }
|
|
.input { width: 100%; border: 1px solid rgb(203 213 225); background: white; border-radius: 6px; padding: 10px 11px; font-size: 14px; outline: none; }
|
|
.dark .input { border-color: rgb(63 63 70); background: rgb(39 39 42); color: white; }
|
|
.btn-primary { border-radius: 6px; background: #16a34a; color: white; padding: 10px 12px; font-weight: 800; }
|
|
.btn-muted, .icon-btn { border-radius: 6px; border: 1px solid rgb(203 213 225); padding: 9px 11px; font-weight: 700; background: white; }
|
|
.dark .btn-muted, .dark .icon-btn { border-color: rgb(63 63 70); background: rgb(39 39 42); color: white; }
|
|
.action-tile { min-height: 108px; border-radius: 8px; border: 1px solid rgb(203 213 225); background: white; padding: 18px; text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
|
|
.action-tile:hover { transform: translateY(-1px); border-color: #16a34a; box-shadow: 0 12px 30px rgba(15,23,42,.08); }
|
|
.dark .action-tile { border-color: rgb(63 63 70); background: rgb(24 24 27); }
|
|
.dashboard-actions { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 12px; }
|
|
.dashboard-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.action-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #dcfce7; color: #15803d; font-weight: 950; }
|
|
.dark .action-icon { background: rgba(22,163,74,.18); color: #4ade80; }
|
|
.segmented { display: inline-grid; grid-auto-flow: column; gap: 4px; border: 1px solid rgb(203 213 225); background: rgb(248 250 252); border-radius: 8px; padding: 4px; }
|
|
.dark .segmented { border-color: rgb(63 63 70); background: rgb(39 39 42); }
|
|
.segmented button { border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 900; color: rgb(71 85 105); }
|
|
.dark .segmented button { color: rgb(212 212 216); }
|
|
.segmented button.active { background: #16a34a; color: white; }
|
|
.stepper { display: grid; gap: 10px; }
|
|
.step-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid rgb(226 232 240); border-radius: 8px; background: rgba(255,255,255,.72); }
|
|
.dark .step-row { border-color: rgb(39 39 42); background: rgba(39,39,42,.72); }
|
|
.step-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 999px; background: #16a34a; color: white; font-weight: 950; }
|
|
.step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
|
.card-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.card-choice input { position: absolute; opacity: 0; pointer-events: none; }
|
|
.card-choice label { display: flex; align-items: center; gap: 10px; border: 1px solid rgb(203 213 225); border-radius: 8px; padding: 12px; font-weight: 900; cursor: pointer; background: white; }
|
|
.dark .card-choice label { border-color: rgb(63 63 70); background: rgb(39 39 42); }
|
|
.card-choice input:checked + label { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
|
|
.card-swatch { width: 24px; height: 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
|
|
.card-swatch.yellow { background: #facc15; }
|
|
.card-swatch.red { background: #dc2626; }
|
|
.template-editor { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
|
|
.template-canvas-wrap { overflow: auto; border: 1px solid rgb(203 213 225); border-radius: 8px; background: rgba(15,23,42,.08); padding: 10px; }
|
|
.dark .template-canvas-wrap { border-color: rgb(63 63 70); background: rgba(0,0,0,.24); }
|
|
.template-canvas { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; background: white; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
|
|
.template-canvas:focus { outline: 2px solid rgba(22,163,74,.5); outline-offset: 4px; }
|
|
.template-canvas img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
|
|
.template-field { position: absolute; min-width: 44px; min-height: 20px; border: 2px solid #16a34a; border-radius: 4px; background: rgba(220,252,231,.78); color: #052e16; font-size: 12px; font-weight: 900; cursor: move; overflow: hidden; display: flex; align-items: center; padding: 2px 5px; }
|
|
.template-field.active { border-color: #f97316; background: rgba(255,237,213,.86); }
|
|
.template-side { display: grid; gap: 12px; }
|
|
.template-field-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
|
|
.template-field-list button { text-align: left; }
|
|
@media (max-width: 900px) {
|
|
.template-editor { grid-template-columns: 1fr; }
|
|
.dashboard-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.dashboard-panels { grid-template-columns: 1fr; }
|
|
}
|
|
.modal-root { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; }
|
|
.modal-root.hidden { display: none; }
|
|
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.68); backdrop-filter: blur(10px); }
|
|
.modal-card { position: relative; width: min(100%, 480px); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 8px; background: white; box-shadow: 0 32px 90px rgba(2,6,23,.38); }
|
|
.modal-card::before { content: ""; display: block; height: 7px; background: linear-gradient(90deg, #16a34a, #0f172a 48%, #f97316); }
|
|
.dark .modal-card { border-color: rgb(63 63 70); background: rgb(24 24 27); box-shadow: 0 32px 90px rgba(0,0,0,.62); }
|
|
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; background: linear-gradient(180deg, rgb(248 250 252), white); border-bottom: 1px solid rgb(226 232 240); }
|
|
.dark .modal-header { border-color: rgb(39 39 42); background: linear-gradient(180deg, rgb(39 39 42), rgb(24 24 27)); }
|
|
.modal-eyebrow { min-height: 16px; font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: #16a34a; }
|
|
.modal-title { margin-top: 4px; font-size: 28px; line-height: 1.08; font-weight: 950; color: rgb(15 23 42); }
|
|
.dark .modal-title { color: white; }
|
|
.modal-subtitle { margin-top: 8px; max-width: 34rem; font-size: 14px; line-height: 1.45; color: rgb(100 116 139); }
|
|
.dark .modal-subtitle { color: rgb(161 161 170); }
|
|
.modal-close { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; border: 1px solid rgb(203 213 225); background: white; font-size: 18px; font-weight: 900; color: rgb(71 85 105); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
|
|
.modal-close:hover { border-color: #16a34a; color: #15803d; }
|
|
.dark .modal-close { border-color: rgb(63 63 70); background: rgb(39 39 42); color: white; }
|
|
.modal-body { padding: 22px 24px 24px; overflow: auto; max-height: calc(100vh - 190px); }
|
|
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid rgb(226 232 240); }
|
|
.dark .modal-footer { border-color: rgb(39 39 42); }
|
|
.field { display: grid; gap: 7px; }
|
|
.field-label { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: rgb(71 85 105); }
|
|
.dark .field-label { color: rgb(161 161 170); }
|
|
.login-panel { border: 1px solid rgb(226 232 240); border-radius: 8px; padding: 14px; background: rgb(248 250 252); }
|
|
.dark .login-panel { border-color: rgb(39 39 42); background: rgb(39 39 42); }
|
|
.login-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #dcfce7; color: #166534; padding: 6px 10px; font-size: 12px; font-weight: 900; }
|
|
.dark .login-badge { background: rgba(22,163,74,.18); color: #86efac; }
|
|
.score-btn { border-radius: 8px; padding: 18px 12px; font-size: 20px; font-weight: 900; color: white; min-height: 76px; }
|
|
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
.table th { text-align: left; font-size: 12px; text-transform: uppercase; color: rgb(100 116 139); border-bottom: 1px solid rgb(226 232 240); padding: 10px 8px; }
|
|
.table td { border-bottom: 1px solid rgb(226 232 240); padding: 10px 8px; }
|
|
.dark .table th, .dark .table td { border-color: rgb(39 39 42); }
|
|
@media (max-width: 640px) {
|
|
.app-shell { display: block; min-height: 100vh; padding-top: 68px; }
|
|
.mobile-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 10px 14px; border-bottom: 1px solid rgb(226 232 240); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
|
|
.dark .mobile-topbar { border-color: rgb(39 39 42); background: rgba(24,24,27,.94); }
|
|
.mobile-menu-btn { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; border: 1px solid rgb(203 213 225); background: white; color: rgb(51 65 85); }
|
|
.dark .mobile-menu-btn { border-color: rgb(63 63 70); background: rgb(39 39 42); color: white; }
|
|
.sidebar { position: fixed; z-index: 55; top: 0; left: 0; width: min(86vw, 292px); height: 100vh; align-items: stretch; padding: 14px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 22px 0 60px rgba(15,23,42,.22); }
|
|
body.mobile-menu-open .sidebar { transform: translateX(0); }
|
|
.mobile-menu-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.52); backdrop-filter: blur(4px); }
|
|
body.mobile-menu-open .mobile-menu-backdrop { display: block; }
|
|
.sidebar-label, .sidebar-panel-content { display: block; }
|
|
.sidebar-brand { justify-content: flex-start; }
|
|
.sidebar-toggle { display: none; }
|
|
.sidebar-nav-item { justify-content: flex-start; padding: 10px; }
|
|
.sidebar-panel { padding: 14px; border-color: rgb(226 232 240); background: rgba(248,250,252,.88); }
|
|
.dark .sidebar-panel { border-color: rgb(39 39 42); background: rgba(39,39,42,.82); }
|
|
.sidebar-mini-action { display: none; }
|
|
.app-main { padding: 12px; }
|
|
.table { font-size: 12px; }
|
|
.table th, .table td { padding: 8px 5px; }
|
|
}
|