LibrePortal/containers/libreportal/frontend/themes/nebula/theme.css

/* Nebula — default theme. Matches the loading/login aurora gradient. */
[data-theme="nebula"] {
  /* Gradient stops (shared by surface-bg and install/login screens).
     Three deep cosmic stops: indigo -> violet-blue -> ocean. */
  --gradient-from: #1a1442;
  --gradient-mid:  #1b2a5e;
  --gradient-to:   #0f3b6e;

  /* Surfaces */
  --surface-bg:       linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-mid) 50%, var(--gradient-to) 100%);
  --surface-bg-solid: #0f1729;
  --surface-elevated: rgba(255, 255, 255, 0.07);
  --surface-sunken:   rgba(0, 0, 0, 0.22);
  --surface-hover:    rgba(255, 255, 255, 0.10);
  --surface-selected: rgba(0, 212, 255, 0.18);

  /* Borders — bright enough to read as glass edges */
  --border:         rgba(255, 255, 255, 0.16);
  --border-strong:  rgba(255, 255, 255, 0.26);
  --border-subtle:  rgba(255, 255, 255, 0.08);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-muted:     rgba(255, 255, 255, 0.65);
  --text-on-accent: #0a1426;

  /* Accent (cyan from the loading screen) */
  --accent:       #00d4ff;
  --accent-hover: #0099cc;
  --accent-soft:  rgba(0, 212, 255, 0.15);
  --accent-rgb:   0, 212, 255;

  /* Status colors — stable across themes */
  --status-success:       #28a745;
  --status-success-hover: #218838;
  --status-success-rgb:   40, 167, 69;
  --status-danger:        #dc3545;
  --status-danger-hover:  #c82333;
  --status-danger-rgb:    220, 53, 69;
  --status-warning:       #ffc107;
  --status-warning-rgb:   255, 193, 7;
  --status-info:          #17a2b8;
  --status-info-rgb:      23, 162, 184;

  /* Theme-aware foreground RGB triplets for overlays */
  --text-rgb: 255, 255, 255;
  --bg-rgb:   0, 0, 0;

  /* Components — cards LIFT off the gradient with a light glassy tint
     instead of darkening it. The cyan undertone keeps them on-theme. */
  --card-bg:           linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(0, 212, 255, 0.05) 100%);
  --card-border:       rgba(255, 255, 255, 0.16);
  --card-shadow:       0 4px 18px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --card-shadow-hover: 0 10px 32px rgba(0, 212, 255, 0.18), 0 4px 18px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --input-bg:          rgba(255, 255, 255, 0.06);
  --input-border:      rgba(255, 255, 255, 0.18);
  --input-text:        #ffffff;
  --console-bg:        rgba(0, 0, 0, 0.40);
  --console-text:      #00d4ff;
  --code-bg:           rgba(255, 255, 255, 0.06);
  --code-text:         #e6f3ff;
  --tooltip-bg:        rgba(10, 20, 38, 0.95);
  --tooltip-text:      #ffffff;

  /* Chrome — translucent so the cosmic gradient bleeds through.
     The backdrop-filter on .topbar/.sidebar frosts them into glass. */
  --topbar-bg:      rgba(15, 25, 50, 0.40);
  --topbar-text:    #ffffff;
  --topbar-border:  rgba(255, 255, 255, 0.12);
  --sidebar-bg:     rgba(15, 25, 50, 0.30);
  --sidebar-text:   #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.10);

  /* Legacy aliases — kept so older style.css var() refs resolve */
  --bg-primary:        var(--topbar-bg);
  --bg-secondary:      var(--surface-elevated);
  --bg-tertiary:       var(--surface-hover);
  --text-color:        var(--text-primary);
  --primary-color:     var(--accent);
  --primary-hover:     var(--accent-hover);
  --primary-color-rgb: var(--accent-rgb);
  --border-color:      var(--border);
  --content-bg:        var(--surface-bg);
  --hover-bg:          var(--surface-hover);
  --error-color:       var(--status-danger);
  --danger-color:      var(--status-danger);
}

/* Every rule below must be prefixed with [data-theme="nebula"] — the
   theme-registry loads every theme's CSS file at boot, so unscoped
   selectors here would apply on light / dark-blue / example as well. */

/* Notifications float over arbitrary content (apps grid, task logs, etc.),
   so the default --card-bg gradient — designed for cards inside a container
   — bleeds the page through them. Use the sidebar's navy with a much higher
   opacity so the toast reads as a solid panel without losing the glass feel. */
[data-theme="nebula"] .notification {
  background: rgba(15, 25, 50, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* App-page tab strips: anchor every tab bar to the same surface as
   the sidebar so the chrome reads as one coherent navy surface.
   Using var(--sidebar-bg) directly so any future sidebar tweak
   carries through. Covers all three tab places on the apps page:
     1. .tab-navigation — main app tabs (Config / Services / …) and
        the Backup-location sub-tabs (Local / Remote 1 / Remote 2).
     2. .tabs-list inside .tabs-wrapper — config sub-tabs that the
        app-config form renders inside the Config tab. */
[data-theme="nebula"] .tab-navigation,
[data-theme="nebula"] .tabs-wrapper .tabs-list,
[data-theme="nebula"] .tabs-content {
  background: var(--sidebar-bg);
}

[data-theme="nebula"] .login-btn {
  color: #ffffff;
}

/* "Back to Apps" — same translucent design as Update Configuration (btn-manage),
   but tinted with the warning amber so it reads as a distinct secondary action. */
[data-theme="nebula"] .config-actions .btn-secondary,
[data-theme="nebula"] .console-actions .btn-secondary {
  background: rgba(var(--status-warning-rgb), 0.20) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-warning-rgb), 0.55) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .config-actions .btn-secondary:hover:not(:disabled),
[data-theme="nebula"] .console-actions .btn-secondary:hover:not(:disabled) {
  background: rgba(var(--status-warning-rgb), 0.35) !important;
  border-color: rgba(var(--status-warning-rgb), 0.80) !important;
  transform: translateY(-1px);
}

/* Advanced badge — bump the red to a brighter coral pink so it pops
   on the cosmic gradient. The theme --status-danger (#dc3545) reads
   as muddy maroon against nebula's blue/indigo, similar to how
   --status-success needed a lift to #86efac for task pills. */
[data-theme="nebula"] .is-advanced .domains-header h3::after,
[data-theme="nebula"] .is-advanced .config-category h3::after {
  background: rgba(252, 165, 165, 0.18);
  border-color: rgba(252, 165, 165, 0.65);
  color: #fca5a5;
}