arch-config/config/matugen/templates/hyprwave.css

/* ========================================
   HyprWave - Matugen Theme
   ======================================== */

:root {
  /* Background Colors - Deep Black */
  --bg-primary: {{colors.surface.default.hex}};
  --bg-secondary: {{colors.surface.default.hex}};
  --bg-album-cover: {{colors.on_secondary_fixed.default.hex}};
  --bg-album-secondary: {{colors.on_secondary_fixed.default.hex}};

  /* Button Colors - Default (Prev/Next) - Soft White */
  --btn-default: {{colors.primary.default.hex}};
  --btn-default-secondary: {{colors.primary.default.hex}};

  --btn-default-active: {{colors.inverse_primary.default.hex}};
  --btn-default-hover: {{colors.primary_container.default.hex}};
  --btn-default-hover-secondary: {{colors.primary_container.default.hex}};

  /* Button Colors - Play/Pause - Bright White */
  --btn-play: {{colors.primary.default.hex}};
  --btn-play-secondary: {{colors.primary.default.hex}};
  --btn-play-hover: {{colors.primary_container.default.hex}};
  --btn-play-hover-secondary: {{colors.primary_container.default.hex}};
  --btn-play-active: {{colors.inverse_primary.default.hex}};
  --btn-play-active-secondary: {{colors.inverse_primary.default.hex}};

  /* Button Colors - Expand - Cool White */
  --btn-expand: {{colors.primary.default.hex}};
  --btn-expand-secondary: {{colors.primary.default.hex}};
  --btn-expand-hover: {{colors.primary_container.default.hex}};
  --btn-expand-hover-secondary: {{colors.primary_container.default.hex}};
  --btn-expand-active: {{colors.inverse_primary.default.hex}};
  --btn-expand-active-secondary: {{colors.inverse_primary.default.hex}};

  /* Progress Bar Colors */
  --progress-bg: {{colors.inverse_on_surface.default.hex}};
  --progress-fill-start: #ff0100;
  --progress-fill-end: {{colors.primary.default.hex}};

  /* Slider Handle Colors */
  --handle-color: {{colors.primary.default.hex}};
  --handle-hover: {{colors.primary.default.hex}};
  --handle-border: {{colors.primary.default.hex}};
  --handle-shadow: {{colors.primary.default.hex}};

  /* Text Colors - Bright white on pure black */
  --text-primary: {{colors.primary.default.hex}};
  --text-secondary: {{colors.primary_container.default.hex}};
  --text-tertiary: {{colors.primary_container.default.hex}};
  --text-muted: {{colors.primary.default.hex}};

  /* Border Colors */
  --border-primary: {{colors.primary.default.hex}};
  --border-button: rgba(100, 100, 100, 0);
  --border-button-hover: rgba(120, 120, 120, 0);
  --border-play: rgba(255, 255, 255, 0);
  --border-play-hover: rgba(255, 255, 255, 0);
  --border-expand: rgba(235, 235, 240, 0);
  --border-expand-hover: rgba(245, 245, 250, 0);

  /* Shadow Colors */
  --shadow-default: rgba(0, 0, 0, 0);
  --shadow-button: rgba(0, 0, 0, 0);
  --shadow-play: rgba(255, 255, 255, 0);
  --shadow-play-hover: rgba(255, 255, 255, 0);
  --shadow-expand: rgba(235, 235, 240, 0);
  --shadow-expand-hover: rgba(245, 245, 250, 0);
  --shadow-focus: rgba(255, 255, 255, 0);

  /* Spacing & Sizes */
  --border-radius-container: 20px;
  --border-radius-section: 20px;
  --border-radius-album: 4px;
  --border-radius-button: 50%;
  --border-radius-progress: 4px;

  --padding-container: 20px;
  --padding-section: 20px;
}

/* Visualizer bars - pure white with strong glow */

/* ========================================
   Base Styles
   ======================================== */

/* GTK4 transparent window - CRITICAL for compositor transparency */
window {
  background-color: transparent;
}

/* Ensure ALL window-level elements are transparent */


/* Main container - transparent */
.main-container {
  background: transparent;
  min-height: 500px;
  min-width: 500px;
}

/* ========================================
   Control Container (Vertical Bar)
   ======================================== */

.control-container {
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-container);
  border: 4px solid var(--border-primary);
  padding: var(--padding-container);
  margin: 0;
}

/* ========================================
   Control Container (Horizontal Bar)
   For Top/Bottom Layouts
   ======================================== */

.control-container-horizontal {
  /* Match the vertical style exactly for consistency */
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-container);
  /* Keeps the pill shape */
  border: 4px solid var(--border-primary);

  /* Horizontal padding is critical here to prevent buttons 
       from touching the rounded edges */
  padding: 8px 24px;
  margin: 0;
}

/* ========================================
   Expanded Section (Album Details Card)
   ======================================== */

.expanded-section {
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-section);
  border: 4px solid var(--border-primary);
  padding: var(--padding-section);
  margin: 0;
  margin-top: 4px;
  /* Reduced spacing from control bar */


}

/* ========================================
   Expanded Section (Horizontal Layout)
   For Top/Bottom Layouts
   ======================================== */

.expanded-section-horizontal {
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-section);
  border: 4px solid var(--border-primary);


  /* Slightly different padding/margin to look good below/above the bar */
  padding: var(--padding-section);
  margin-top: 2px;
  /* Adds gap between control bar and this panel */
  margin-bottom: 2px;

  /* Ensure it doesn't get too squeezed */
  min-width: 300px;
}

/* Album cover */
.album-cover {
  background: linear-gradient(135deg, var(--bg-album-cover), var(--bg-album-secondary));
  border-radius: var(--border-radius-album);
  border: 4px solid var(--border-button);
  box-shadow: 0 4px 16px var(--shadow-button);
}

/* ========================================
   Text Styles
   ======================================== */

/* Source label (e.g., "Spotify") */
.source-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Track title */
.track-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

/* Artist label */
.artist-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

/* Time remaining */
.time-remaining {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

/* ========================================
   Progress Bar - FIXED FOR GTK4
   ======================================== */

.track-progress {
  min-height: 4px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* The background track */
.track-progress trough {
  background: var(--progress-bg);
  border-radius: var(--border-radius-progress);
  min-height: 4px;
}

/* The filled progress portion - GTK4 specific */
.track-progress progress {
  background: linear-gradient(90deg, var(--progress-fill-start), var(--progress-fill-end));
  border-radius: var(--border-radius-progress);
  min-height: 4px;
}

/* GTK4 also needs this for the fill bar to show */
progressbar trough {
  background: var(--progress-bg);
  border-radius: var(--border-radius-progress);
  min-height: 4px;
}

progressbar progress {
  background: linear-gradient(90deg, var(--progress-fill-start), var(--progress-fill-end));
  border-radius: var(--border-radius-progress);
  min-height: 4px;
}

/* ========================================
   Control Buttons - FIXED ROUNDED SHAPE
   ======================================== */

/* All control buttons - base styles */
.control-button {
  padding: 0;

  /* Add margin to compensate for removed border */
  margin: 1.5px;
  /* Same as the old border width */

  min-width: 44px;
  min-height: 44px;

  background: linear-gradient(135deg, var(--btn-default), var(--btn-default-secondary));

  border: none;
  box-shadow:
    inset 0 0 0 1.5px var(--border-button),
    0 4px 16px var(--shadow-button),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);

  border-radius: 50%;
}

.control-button:hover {
  background: linear-gradient(135deg, var(--btn-default-hover), var(--btn-default-hover-secondary));
  border-color: var(--border-button-hover);
  box-shadow:
    0 6px 20px var(--shadow-button),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.control-button:active {
  transform: scale(0.96);
  box-shadow:
    0 2px 8px var(--shadow-button),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Play/Pause Button (Blue)
   ======================================== */

.play-button {
  background: linear-gradient(135deg, var(--btn-play), var(--btn-play-secondary));
  border-color: var(--border-play);
  box-shadow:
    0 4px 16px var(--shadow-play),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.play-button:hover {
  background: linear-gradient(135deg, var(--btn-play-hover), var(--btn-play-hover-secondary));
  border-color: var(--border-play-hover);
  box-shadow:
    0 6px 20px var(--shadow-play-hover),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.play-button:active {
  background: linear-gradient(135deg, var(--btn-play-active), var(--btn-play-active-secondary));
  box-shadow:
    0 2px 10px var(--shadow-play),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Expand Button (Purple)
   ======================================== */

.expand-button {
  background: linear-gradient(135deg, var(--btn-expand), var(--btn-expand-secondary));
  border-color: var(--border-expand);
  box-shadow:
    0 4px 16px var(--shadow-expand),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.expand-button:hover {
  background: linear-gradient(135deg, var(--btn-expand-hover), var(--btn-expand-hover-secondary));
  border-color: var(--border-expand-hover);
  box-shadow:
    0 6px 20px var(--shadow-expand-hover),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.expand-button:active {
  background: linear-gradient(135deg, var(--btn-expand-active), var(--btn-expand-active-secondary));
  box-shadow:
    0 2px 10px var(--shadow-expand),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Previous/Next Buttons
   ======================================== */

.prev-button,
.next-button {
  background: linear-gradient(135deg, var(--btn-default), var(--btn-default-secondary));
}

.prev-button:hover,
.next-button:hover {
  background: linear-gradient(135deg, var(--btn-default-hover), var(--btn-default-hover-secondary));
}

/* ========================================
   Focus & Accessibility
   ======================================== */

button {
  outline: none;
}

button:focus {
  outline: none;
  box-shadow:
    0 0 0 3px var(--shadow-focus),
    0 4px 16px var(--shadow-play),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* ========================================
   Notification Styles
   ======================================== */

.notification-window {
  background: transparent;
}

.notification-container {
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-section);
  border: 4px solid var(--border-primary);
  padding: 10px 12px;
  /* Reduced from 12px to 10px vertical padding */
  min-width: 280px;
  /* Reduced from 320px */
  max-width: 300px;
  /* Added max-width */
}

.notification-album {
  background: linear-gradient(135deg, var(--bg-album-cover), var(--bg-album-secondary));
  border-radius: var(--border-radius-album);
  border: 4px solid var(--border-button);
  margin: 5px;
}

.notification-header {
  color: var(--text-muted);
  font-size: 10px;
  /* Reduced from 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  /* Reduced from 8px */
}

.notification-song {
  color: var(--text-primary);
  font-size: 13px;
  /* Reduced from 14px */
  font-weight: 600;
  line-height: 1.2;
  /* Added for tighter spacing */
}

.notification-artist {
  color: var(--text-secondary);
  font-size: 11px;
  /* Reduced from 12px */
  font-weight: 500;
  line-height: 1.2;
  /* Added for tighter spacing */
}

/* ========================================
   Volume Control Styles
   ======================================== */

.volume-container {
  background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
  border-radius: var(--border-radius-section);
  border: 4px solid var(--border-primary);
  padding: 12px;
  margin: 0px;
}

.volume-icon {
  min-width: 20px;
  min-height: 20px;
}

.volume-percentage {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
}

/* Volume slider - similar to progress bar but with different colors */
.volume-slider {
  min-height: 24px;
  min-width: 24px;
}

/* The background track */
.volume-slider trough {
  background: var(--progress-bg);
  border-radius: var(--border-radius-progress);
  min-height: 6px;
  min-width: 6px;
}

/* The filled portion */
.volume-slider progress {
  background: linear-gradient(90deg, var(--btn-default), var(--btn-default-secondary));
  border-radius: var(--border-radius-progress);
  min-height: 6px;
  min-width: 6px;
}

/* The slider handle */
.volume-slider slider {
  min-height: 16px;
  min-width: 16px;
  background: linear-gradient(135deg, var(--btn-default), var(--btn-default-secondary));
  border: 2px solid var(--border-button);
  border-radius: 50%;

}

.volume-slider slider:hover {
  background: linear-gradient(135deg, var(--btn-default-hover), var(--btn-default-hover-secondary));
  border-color: var(--border-button-hover);
  transform: scale(1.1);
}

.volume-slider slider:active {
  background: linear-gradient(135deg, var(--btn-default), var(--btn-default-secondary));
  transform: scale(0.95);
}

/* GTK4 specific for vertical sliders */
.volume-slider.vertical trough {
  min-width: 6px;
}

.volume-slider.vertical progress {
  min-width: 6px;
}


/* ========================================
   Visualizer Bars - Idle Mode Animation
   ======================================== */

/* Container padding to keep bars inside control bar edges */
.visualizer-container {
  padding: 0px;
  /* 5px padding on left/right keeps bars inside */
  padding-bottom: 1px;
  /* Small bottom padding to align with control bar bottom */
  border-radius: 0 0 12px 12px;
}

Smooth control bar height transitions for idle mode */ .control-container-horizontal {
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth button fade transitions */
.control-button {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease-in-out;
}

/* Ensure overlay respects size changes */
overlay {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical Display (for vertical layouts) */
.vertical-display-container {
  background: transparent;
  padding: 8px 4px;
}

.vertical-display-label {
  font-family: 'IosevkaTerm Nerd Font', monospace;
  font-size: 28px;
  font-weight: bold;
  color: white;
  /* Match visualizer bar color */
  letter-spacing: 0px;
  line-height: 1.2;
}