mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-21 23:18:06 -04:00
139 lines
3.4 KiB
CSS
139 lines
3.4 KiB
CSS
/* Spacedrive V2 - Color System
|
|
* Colors are defined in packages/ui/style/colors.js
|
|
* and converted to CSS variables here for web/desktop use
|
|
*/
|
|
|
|
:root {
|
|
/* Hue for dark theme */
|
|
--dark-hue: 235;
|
|
|
|
/* Accent color */
|
|
--color-accent: 220, 90%, 56%;
|
|
--color-accent-faint: 220, 90%, 64%;
|
|
--color-accent-deep: 220, 90%, 47%;
|
|
|
|
/* Text colors (ink) */
|
|
--color-ink: 235, 15%, 92%;
|
|
--color-ink-dull: 235, 10%, 70%;
|
|
--color-ink-faint: 235, 10%, 55%;
|
|
|
|
/* Sidebar colors */
|
|
--color-sidebar: 235, 15%, 7%;
|
|
--color-sidebar-box: 235, 15%, 16%;
|
|
--color-sidebar-line: 235, 15%, 23%;
|
|
--color-sidebar-ink: 235, 15%, 92%;
|
|
--color-sidebar-ink-dull: 235, 10%, 70%;
|
|
--color-sidebar-ink-faint: 235, 10%, 55%;
|
|
--color-sidebar-divider: 235, 15%, 17%;
|
|
--color-sidebar-button: 235, 15%, 18%;
|
|
--color-sidebar-selected: 235, 15%, 24%;
|
|
|
|
/* Main app colors */
|
|
--color-app: 235, 15%, 13%;
|
|
--color-app-box: 235, 15%, 18%;
|
|
--color-app-dark-box: 235, 10%, 7%;
|
|
--color-app-overlay: 235, 15%, 16%;
|
|
--color-app-line: 235, 15%, 23%;
|
|
--color-app-frame: 235, 15%, 25%;
|
|
--color-app-button: 235, 15%, 20%;
|
|
--color-app-hover: 235, 15%, 22%;
|
|
--color-app-selected: 235, 15%, 24%;
|
|
|
|
/* Menu colors (for dropdowns, context menus) */
|
|
--color-menu: 235, 15%, 13%;
|
|
--color-menu-line: 235, 15%, 23%;
|
|
--color-menu-hover: 235, 15%, 20%;
|
|
--color-menu-selected: 235, 15%, 24%;
|
|
--color-menu-shade: 235, 15%, 8%;
|
|
--color-menu-ink: 235, 15%, 92%;
|
|
--color-menu-faint: 235, 10%, 55%;
|
|
}
|
|
|
|
/* Top bar blur effect (macOS specific) */
|
|
.top-bar-blur {
|
|
backdrop-filter: saturate(120%) blur(18px);
|
|
}
|
|
|
|
/* Window frame border (macOS) */
|
|
.frame::before {
|
|
content: "";
|
|
pointer-events: none;
|
|
user-select: none;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: var(--color-app-frame);
|
|
mask: linear-gradient(black, black) content-box content-box,
|
|
linear-gradient(black, black);
|
|
mask-composite: xor;
|
|
-webkit-mask-composite: xor;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Fade mask for scrollable content */
|
|
.mask-fade-out {
|
|
mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
|
|
}
|
|
|
|
/* Checkerboard pattern for transparent images */
|
|
.checkerboard {
|
|
background-image: linear-gradient(45deg, #16161b 25%, transparent 25%),
|
|
linear-gradient(-45deg, #16161b 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #16161b 75%),
|
|
linear-gradient(-45deg, transparent 75%, #16161b 75%);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
|
}
|
|
|
|
/* Animated gradient for audio player background */
|
|
.audio-gradient {
|
|
position: relative;
|
|
background: #000;
|
|
}
|
|
|
|
.audio-gradient::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
|
background-size: 400% 400%;
|
|
animation: audio-gradient-shift 15s ease infinite;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.audio-gradient::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.audio-gradient.paused::before {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes audio-gradient-shift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|