mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-20 06:28:14 -04:00
546c5ec132
- Introduced new features for file renaming, new folder creation, and creating folders with items. - Implemented inline editing for file names, integrating with existing keybinds and context menus. - Enhanced backend with new actions for renaming and folder creation, including validation and job management. - Developed frontend components for inline editing and integrated them into GridView and ListView. - Added context menu options for renaming and creating folders, improving user experience. - Updated styles for job progress indicators to include a barber-pole animation for pending jobs.
140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
@import "@sd/ui/style/colors.scss";
|
|
|
|
/* 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%;
|
|
}
|
|
}
|
|
|
|
@keyframes barber-pole {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 28px 0;
|
|
}
|
|
}
|
|
|
|
/* Hide TanStack Query devtools button logo but keep it clickable */
|
|
.tsqd-open-btn-container {
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.tsqd-open-btn-container > [aria-hidden="true"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.tsqd-open-btn-container .tsqd-open-btn {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
.tsqd-open-btn-container .tsqd-open-btn > * {
|
|
display: none !important;
|
|
}
|