virtuality/web/static/themes.css

/* Virtuality theme layer. Default theme is Neon from app.css. */
html[data-theme="macos"] {
  --bg: #f5f5f7;
  --bg-soft: #ffffff;
  --panel: rgba(255, 255, 255, .92);
  --panel-solid: #ffffff;
  --panel-2: #f2f2f7;
  --line: rgba(60, 60, 67, .14);
  --line-strong: rgba(60, 60, 67, .24);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #8e8e93;
  --accent: #007aff;
  --accent-2: #0a84ff;
  --accent-glow: rgba(0, 122, 255, .12);
  --green: #34c759;
  --yellow: #ff9f0a;
  --red: #ff3b30;
  --purple: #af52de;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 55px rgba(0, 0, 0, .08);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, .06);
}

html[data-theme="macos"] body {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 48%, #ededf2 100%);
  color: var(--text);
}
html[data-theme="macos"] body::before { display: none; }

html[data-theme="macos"] .v-sidebar {
  background: rgba(246, 246, 248, .88);
  color: var(--text);
  border-right: 1px solid var(--line);
  box-shadow: 10px 0 30px rgba(0, 0, 0, .035);
  backdrop-filter: saturate(180%) blur(22px);
}
html[data-theme="macos"] .v-logo { border-bottom-color: var(--line); }
html[data-theme="macos"] .v-logo::before {
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, #007aff, #5e5ce6);
  box-shadow: none;
}
html[data-theme="macos"] .v-logo span,
html[data-theme="macos"] .v-nav-group-title,
html[data-theme="macos"] .muted,
html[data-theme="macos"] .small-note,
html[data-theme="macos"] .v-subtitle,
html[data-theme="macos"] .service-row small,
html[data-theme="macos"] .big-action span,
html[data-theme="macos"] .knowledge-list span,
html[data-theme="macos"] .meta-grid span { color: var(--muted); }

html[data-theme="macos"] .v-nav a,
html[data-theme="macos"] .v-nav-group-title {
  color: #3a3a3c;
  border-radius: 10px;
  font-weight: 700;
}
html[data-theme="macos"] .v-nav a:hover,
html[data-theme="macos"] .v-nav-group-title:hover {
  color: var(--text);
  background: rgba(0, 0, 0, .045);
  border-color: transparent;
  transform: none;
}
html[data-theme="macos"] .v-nav a.active {
  color: #fff;
  background: #007aff;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="macos"] .v-nav a.active::before { display: none; }
html[data-theme="macos"] .v-nav-group { background: transparent; border-color: transparent; }
html[data-theme="macos"] .v-nav-group.open { background: rgba(0, 0, 0, .035); border-color: transparent; }
html[data-theme="macos"] .v-nav-bottom { border-top-color: var(--line) !important; }

html[data-theme="macos"] .v-topbar,
html[data-theme="macos"] .topbar,
html[data-theme="macos"] .card,
html[data-theme="macos"] .auth-card {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(60, 60, 67, .12);
  box-shadow: var(--shadow-soft);
  backdrop-filter: saturate(180%) blur(18px);
}
html[data-theme="macos"] .card::before { display: none; }
html[data-theme="macos"] .v-title,
html[data-theme="macos"] .brand,
html[data-theme="macos"] h2,
html[data-theme="macos"] .value,
html[data-theme="macos"] .strong { color: var(--text); }
html[data-theme="macos"] .label,
html[data-theme="macos"] th { color: #86868b; font-weight: 700; }
html[data-theme="macos"] .top-meta span,
html[data-theme="macos"] .pill,
html[data-theme="macos"] .link-pill {
  color: #3a3a3c;
  background: #f2f2f7;
  border-color: rgba(60, 60, 67, .12);
  box-shadow: none;
}
html[data-theme="macos"] .link-pill:hover {
  color: #007aff;
  background: #e8f1ff;
  border-color: rgba(0, 122, 255, .18);
}
html[data-theme="macos"] .link-pill.accent,
html[data-theme="macos"] button.primary,
html[data-theme="macos"] .icon-action.accent {
  color: #fff;
  background: #007aff;
  border-color: #007aff;
  box-shadow: none;
}
html[data-theme="macos"] .link-pill.accent:hover,
html[data-theme="macos"] button.primary:hover,
html[data-theme="macos"] .icon-action.accent:hover {
  color: #fff;
  filter: none;
  transform: none;
  background: #0a84ff;
}

html[data-theme="macos"] table { border-spacing: 0 7px; }
html[data-theme="macos"] td { color: var(--text); background: #fff; border-color: rgba(60, 60, 67, .10); }
html[data-theme="macos"] tbody tr:hover td { background: #f7f7fa; border-color: rgba(0, 122, 255, .18); }
html[data-theme="macos"] .table-link { color: #007aff; }

html[data-theme="macos"] button,
html[data-theme="macos"] .icon-action {
  color: #1d1d1f;
  background: #f2f2f7;
  border-color: rgba(60, 60, 67, .12);
  border-radius: 10px;
  box-shadow: none;
  font-weight: 700;
}
html[data-theme="macos"] button:hover,
html[data-theme="macos"] .icon-action:hover {
  transform: none;
  color: #007aff;
  background: #e8f1ff;
  border-color: rgba(0, 122, 255, .18);
}
html[data-theme="macos"] button.danger,
html[data-theme="macos"] .icon-action.danger {
  color: #ff3b30;
  background: #fff1f0;
  border-color: rgba(255, 59, 48, .18);
}
html[data-theme="macos"] .icon-action.success {
  color: #248a3d;
  background: #edf9f0;
  border-color: rgba(52, 199, 89, .22);
}

html[data-theme="macos"] input,
html[data-theme="macos"] select {
  color: var(--text);
  background: #fff;
  border-color: rgba(60, 60, 67, .16);
  border-radius: 10px;
}
html[data-theme="macos"] input:focus,
html[data-theme="macos"] select:focus {
  border-color: rgba(0, 122, 255, .55);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .10);
}
html[data-theme="macos"] .form-subcard,
html[data-theme="macos"] .upload-box {
  background: #f5f5f7;
  border-color: rgba(0, 122, 255, .22);
}
html[data-theme="macos"] .service-row,
html[data-theme="macos"] .big-action,
html[data-theme="macos"] .knowledge-list div,
html[data-theme="macos"] .meta-grid div {
  background: #f7f7fa;
  border-color: rgba(60, 60, 67, .10);
}
html[data-theme="macos"] .service-link:hover,
html[data-theme="macos"] .big-action:hover { background: #eef5ff; border-color: rgba(0, 122, 255, .18); }

html[data-theme="macos"] .status::before { box-shadow: none; }
html[data-theme="macos"] .status.ok { color: #248a3d; background: #edf9f0; }
html[data-theme="macos"] .status.warn { color: #b26a00; background: #fff7e6; }
html[data-theme="macos"] .status.err { color: #d70015; background: #fff1f0; }
html[data-theme="macos"] .notice { color: #004b8d; background: #eef7ff; border-color: rgba(0, 122, 255, .18); }
html[data-theme="macos"] .alert.danger { color: #d70015; background: #fff1f0; border-color: rgba(255, 59, 48, .20); }
html[data-theme="macos"] .alert.success { color: #248a3d; background: #edf9f0; border-color: rgba(52, 199, 89, .20); }
html[data-theme="macos"] pre { color: #1d1d1f; background: #f2f2f7; border-color: rgba(60, 60, 67, .12); }
html[data-theme="macos"] .progress { background: #e5e5ea; border-color: rgba(60, 60, 67, .10); }
html[data-theme="macos"] .progress span { background: #007aff; box-shadow: none; }
html[data-theme="macos"] .upload-progress-wrap { background: #eef7ff; border-color: rgba(0, 122, 255, .18); }
html[data-theme="macos"] .upload-progress-head span { color: #007aff; }

.theme-switcher { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-top: 1px solid var(--line); }
.theme-switcher-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.theme-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.theme-button { min-height: 34px; padding: 7px 9px; border-radius: 10px; font-size: 12px; }
.theme-button.is-active { color: #00111f; background: linear-gradient(135deg, var(--accent), #60a5fa); border-color: transparent; }
html[data-theme="macos"] .theme-button.is-active { color: #fff; background: #007aff; }