R3ap3r
3178b8f4f7
- Spotify playlist, library, album and artist browsing with in-app playback - Song, playlist and album downloads via spotdl with YouTube and Bandcamp fallbacks - Electron desktop app (castLabs Widevine) with a permanent sidebar layout - Linux and Windows packaging scripts
161 lines
3.8 KiB
CSS
161 lines
3.8 KiB
CSS
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Outfit:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--z-overlay: 400;
|
|
|
|
--z-spotlight: 1000;
|
|
--z-critical: 2000;
|
|
--spacing-1: 0.25rem;
|
|
--spacing-2: 0.5rem;
|
|
--spacing-3: 0.75rem;
|
|
--spacing-4: 1rem;
|
|
--spacing-6: 1.5rem;
|
|
--spacing-8: 2rem;
|
|
--spacing-12: 3rem;
|
|
--spacing-16: 4rem;
|
|
--spacing-20: 5rem;
|
|
}
|
|
|
|
:root {
|
|
--background: #0b0c10;
|
|
--foreground: #f4f6f8;
|
|
--surface: #111319;
|
|
--surface-foreground: #f0f3f5;
|
|
--sidebar: #101216;
|
|
--sidebar-foreground: #edf1f4;
|
|
--card: #15181f;
|
|
--card-foreground: #f4f6f8;
|
|
--popup: #181b22;
|
|
--popup-foreground: #f4f6f8;
|
|
--primary: #18bfd0;
|
|
--primary-foreground: #041013;
|
|
--secondary: #20242d;
|
|
--secondary-foreground: #f0f3f5;
|
|
--accent: #7867d9;
|
|
--accent-foreground: #ffffff;
|
|
--muted: #1b1f27;
|
|
--muted-foreground: #8f99a6;
|
|
--success: #3ad7a5;
|
|
--success-foreground: #03120d;
|
|
--error: #ff5d8f;
|
|
--error-foreground: #24040f;
|
|
--warning: #ffcb66;
|
|
--warning-foreground: #1e1200;
|
|
--info: #5ca8ef;
|
|
--info-foreground: #031326;
|
|
--info-hover: #6fb8ff;
|
|
--info-active: #2c92ef;
|
|
--border: #2a2f39;
|
|
--aurora-cyan: #18bfd0;
|
|
--aurora-teal: #3ad7a5;
|
|
--aurora-blue: #4f90d9;
|
|
--aurora-violet: #7867d9;
|
|
--aurora-magenta: #a965c9;
|
|
--aurora-deep: #0b0c10;
|
|
--aurora-panel: #15181f;
|
|
--aurora-panel-strong: #181b22;
|
|
--aurora-glow-cyan: rgba(24, 191, 208, .1);
|
|
--aurora-glow-violet: rgba(120, 103, 217, .08);
|
|
--font-family-base: 'Plus Jakarta Sans', sans-serif;
|
|
--font-family-display: 'Outfit', sans-serif;
|
|
--font-family-monospace: 'JetBrains Mono', monospace;
|
|
--font-family-cursive: cursive;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, .35);
|
|
--shadow-md: 0 3px 10px rgba(0, 0, 0, .26);
|
|
--shadow-lg: 0 6px 18px rgba(0, 0, 0, .3);
|
|
--shadow-focus: 0 0 0 2px rgba(24, 191, 208, .18);
|
|
--radius-sm: 3px;
|
|
--radius: 4px;
|
|
--radius-md: 5px;
|
|
--radius-lg: 6px;
|
|
--radius-full: 999px;
|
|
--animation-duration-fast: 120ms;
|
|
--animation-duration-normal: 220ms;
|
|
--animation-duration-slow: 420ms;
|
|
--chart-color-1: #17eaf2;
|
|
--chart-color-2: #1687ff;
|
|
--chart-color-3: #8b5cf6;
|
|
--chart-color-4: #d05cff;
|
|
--chart-color-5: #2cf2b3;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0b0c10;
|
|
--foreground: #f6fbff;
|
|
--surface: #111319;
|
|
--surface-foreground: #eef9ff;
|
|
--sidebar: #101216;
|
|
--sidebar-foreground: #e8f8ff;
|
|
--card: #15181f;
|
|
--card-foreground: #f6fbff;
|
|
--popup: #181b22;
|
|
--popup-foreground: #f6fbff;
|
|
--primary: #18bfd0;
|
|
--primary-foreground: #031012;
|
|
--secondary: #20242d;
|
|
--secondary-foreground: #eef7ff;
|
|
--accent: #7867d9;
|
|
--accent-foreground: #ffffff;
|
|
--muted: #1b1f27;
|
|
--muted-foreground: #8f99a6;
|
|
--success: #3ad7a5;
|
|
--success-foreground: #03120d;
|
|
--error: #ff5d8f;
|
|
--error-foreground: #24040f;
|
|
--warning: #ffcb66;
|
|
--warning-foreground: #1e1200;
|
|
--info: #4ea8ff;
|
|
--info-foreground: #031326;
|
|
--info-hover: #6fb8ff;
|
|
--info-active: #2c92ef;
|
|
--border: #2a2f39;
|
|
}
|
|
@layer base {
|
|
:root {
|
|
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-family-base);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
th, td {
|
|
display: table-cell!important;
|
|
}
|
|
}
|
|
.rbc-month-view {
|
|
overflow: visible !important;
|
|
}
|