style.css

/* Copy the entire style.css but fix the button border-radius */
/* ========================================
   HyprWave Color Scheme & Variables
   Edit these to customize your theme!
   ======================================== */

:root {
    /* Background Colors - Frosted Glass */
    --bg-primary: rgba(240, 245, 250, 0.75);
    --bg-secondary: rgba(230, 238, 245, 0.75);
    --bg-album-cover: rgba(220, 228, 235, 0.85);
    --bg-album-secondary: rgba(210, 220, 230, 0.85);
    
    /* Button Colors - Default (Prev/Next) - Teal Base */
    --btn-default: rgba(60, 120, 140, 0.85);
    --btn-default-secondary: rgba(50, 110, 130, 0.85);
    --btn-default-hover: rgba(80, 140, 160, 0.92);
    --btn-default-hover-secondary: rgba(70, 130, 150, 0.92);

    /* Button Colors - Play/Pause - Hot Pink/Orange */
    --btn-play: rgba(255, 100, 150, 0.95);
    --btn-play-secondary: rgba(255, 140, 80, 0.95);
    --btn-play-hover: rgba(255, 120, 170, 0.98);
    --btn-play-hover-secondary: rgba(255, 160, 100, 0.98);
    --btn-play-active: rgba(235, 80, 130, 0.95);
    --btn-play-active-secondary: rgba(245, 120, 60, 0.95);

    /* Button Colors - Expand - Cyan Glow */
    --btn-expand: rgba(50, 200, 255, 0.95);
    --btn-expand-secondary: rgba(80, 220, 255, 0.95);
    --btn-expand-hover: rgba(70, 220, 255, 0.98);
    --btn-expand-hover-secondary: rgba(100, 240, 255, 0.98);
    --btn-expand-active: rgba(30, 180, 235, 0.95);
    --btn-expand-active-secondary: rgba(60, 200, 245, 0.95);
    
    /* Progress Bar Colors */
    --progress-bg: rgba(200, 210, 220, 0.25);
    --progress-fill-start: rgba(160, 170, 180, 0.95);
    --progress-fill-end: rgba(180, 190, 200, 0.95);
    
    /* Slider Handle Colors */
    --handle-color: rgba(140, 150, 160, 0.98);
    --handle-hover: rgba(120, 130, 140, 1.0);
    --handle-border: rgba(100, 110, 120, 0.5);
    --handle-shadow: rgba(0, 0, 0, 0.3);
    
    /* Text Colors */
    --text-primary: rgba(40, 50, 60, 0.95);
    --text-secondary: rgba(60, 70, 80, 0.85);
    --text-tertiary: rgba(80, 90, 100, 0.75);
    --text-muted: rgba(100, 110, 120, 0.65);
    
    /* Border Colors */
    --border-primary: rgba(180, 190, 200, 0.35);
    --border-button: rgba(170, 180, 190, 0.3);
    --border-button-hover: rgba(160, 170, 180, 0.45);
    --border-play: rgba(150, 160, 170, 0.4);
    --border-play-hover: rgba(140, 150, 160, 0.55);
    --border-expand: rgba(155, 165, 175, 0.4);
    --border-expand-hover: rgba(145, 155, 165, 0.55);
    
    /* Shadow Colors */
    --shadow-default: rgba(0, 0, 0, 0.15);
    --shadow-button: rgba(0, 0, 0, 0.1);
    --shadow-play: rgba(100, 110, 120, 0.2);
    --shadow-play-hover: rgba(90, 100, 110, 0.3);
    --shadow-expand: rgba(100, 110, 120, 0.2);
    --shadow-expand-hover: rgba(90, 100, 110, 0.3);
    --shadow-focus: rgba(120, 130, 140, 0.4);
    
    /* Spacing & Sizes */
    --border-radius-container: 100px;
    --border-radius-section: 20px;
    --border-radius-album: 16px;
    --border-radius-button: 50%;
    --border-radius-progress: 2px;

    --padding-container: 12px;
    --padding-section: 16px;
}

/* Visualizer bars - pure white with strong glow */
.visualizer-bar {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.98),
        rgba(230, 230, 230, 0.98));
    border-radius: 0px;
    transition: all 0.05s ease-out;
    margin: 0px;
    min-width: 1px;
    min-height: 3px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
                0 0 8px rgba(255, 255, 255, 0.6);
}

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

/* GTK4 transparent window - CRITICAL for compositor transparency */
window, 
window.background,
.hyprwave-window {
    background-color: transparent;
    background-image: none;
}

/* Ensure ALL window-level elements are transparent */
window > * {
    background: transparent;
}

/* Main container - transparent */
.main-container {
    background: transparent;
}

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

.control-container {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    border-radius: var(--border-radius-container);
    border: 1px solid var(--border-primary);

    padding: var(--padding-container);
    margin: 0;

    /* Size is set dynamically from config - don't override */
}

/* ========================================
   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: 1px solid var(--border-primary);

    /* Horizontal padding - reduced for small buttons */
    padding: 2px 6px;
    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: 1px solid var(--border-primary);
    padding: var(--padding-section);
    margin: 0;
    margin-top: 4px;  /* Reduced spacing from control bar */

    min-width: 200px;
}

/* ========================================
   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: 1px 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: 1px 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;
}

/* Player label (clickable switcher) */
.player-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.player-label:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* 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. Size is set in C via gtk_widget_set_size_request. */
.control-button {
    padding: 0;
    margin: 0.75px;
    min-width: 0;
    min-height: 0;

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

    border: none;
    box-shadow: 0 0 8px var(--shadow-button);
    border-radius: 50%;
}

/* Per-size container padding (selected by class added in layout.c).
   Values approximate button_size * 0.17, rounded for crisp rendering. */
.control-container.size-tiny,
.control-container-horizontal.size-tiny       { padding: 6px; }
.control-container.size-small,
.control-container-horizontal.size-small      { padding: 9px; }
.control-container.size-default,
.control-container-horizontal.size-default    { padding: 12px; }
.control-container.size-large,
.control-container-horizontal.size-large      { padding: 16px; }

.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: 1px solid var(--border-primary);
    padding: 10px 12px;  /* Reduced from 12px to 10px vertical padding */
    min-width: 280px;
}

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

.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: 1px 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 - Expanded Section
   ======================================== */

/* Container in expanded section */
.visualizer-container {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 8px;
    min-height: 32px;
}


.visualizer-bar {
    /* Gradient for visual appeal */
    background: linear-gradient(90deg,
        rgba(100, 180, 255, 0.8),   /* Light blue */
        rgba(150, 120, 255, 0.8));  /* Purple tint */
    border-radius: 2px;
    transition: all 0.05s ease-out;
    margin: 1px;
    min-width: 3px;
    min-height: 2px;
}
/* Smooth control bar height transitions for idle mode */
.control-container-horizontal {
    transition: all 0.3s 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: 'VT323', monospace;
    font-size: 28px;
    font-weight: bold;
    color: black; /* Match visualizer bar color */
    letter-spacing: 0px;
    line-height: 1.2;
}

.vertical-display-container.size-tiny       { padding: 4px 2px; }
.vertical-display-container.size-small      { padding: 6px 3px; }
.vertical-display-container.size-default    { padding: 8px 4px; }
.vertical-display-container.size-large      { padding: 11px 5px; }

.vertical-display-container.size-tiny .vertical-display-label    { font-size: 14px; }
.vertical-display-container.size-small .vertical-display-label   { font-size: 21px; }
.vertical-display-container.size-default .vertical-display-label { font-size: 28px; }
.vertical-display-container.size-large .vertical-display-label   { font-size: 37px; }

/* Custom: Light icons for prev/next buttons */
button.prev,
button.next,
.prev-button,
.next-button,
#prev-button,
#next-button {
    -gtk-icon-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

button.prev image,
button.next image,
.prev-button image,
.next-button image,
#prev-button image,
#next-button image {
    -gtk-icon-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}