mirror of
https://github.com/webadderallorg/Recordly.git
synced 2026-09-25 07:16:02 +00:00
Alan Trebugeais
df785a8cbc
add: launchTheme.css for consistent styling accross the whole components spectrum related to LaunchWindow add: correct styles accross the popovers! with unstyled parameters in Popover.tsx because it was needed to make sure its the same
274 lines
6.1 KiB
CSS
274 lines
6.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Disable Electron/Chromium focus highlight (yellow/orange ring) */
|
|
*:focus:not(:focus-visible) {
|
|
outline: none !important;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: 2px solid rgb(var(--brand-accent-rgb));
|
|
outline-offset: 2px;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
html.hud-overlay-window,
|
|
body.hud-overlay-window,
|
|
#root.hud-overlay-window {
|
|
overflow: hidden;
|
|
}
|
|
|
|
:root {
|
|
--app-font-sans: "SF Pro Display", "SF Pro Text", Helvetica, sans-serif;
|
|
--brand-accent: #2563eb;
|
|
--brand-accent-rgb: 37, 99, 235;
|
|
--background: 0 0% 100%;
|
|
--foreground: 20 14.3% 4.1%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 20 14.3% 4.1%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 20 14.3% 4.1%;
|
|
--primary: 221 83% 53%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 60 4.8% 95.9%;
|
|
--secondary-foreground: 24 9.8% 10%;
|
|
--muted: 60 4.8% 95.9%;
|
|
--muted-foreground: 25 5.3% 44.7%;
|
|
--accent: 214 100% 97%;
|
|
--accent-foreground: 221 83% 40%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 60 9.1% 97.8%;
|
|
--border: 20 5.9% 90%;
|
|
--input: 20 5.9% 90%;
|
|
--ring: 221 83% 53%;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.5rem;
|
|
|
|
/* Editor surface colors — light mode */
|
|
--editor-bg: 0 0% 100%;
|
|
--editor-header: 0 0% 97%;
|
|
--editor-panel: 0 0% 98%;
|
|
--editor-surface: 0 0% 97%;
|
|
--editor-surface-alt: 0 0% 95%;
|
|
--editor-dialog: 0 0% 100%;
|
|
--editor-dialog-alt: 0 0% 98%;
|
|
--editor-timeline: 220 13% 91%;
|
|
--editor-row: 220 13% 88%;
|
|
--editor-subrow: 220 13% 85%;
|
|
|
|
/* Slider track colors — light mode */
|
|
--slider-track: 0 0% 0% / 0.12;
|
|
--slider-thumb: 0 0% 10%;
|
|
--slider-thumb-shadow: 0 0% 0% / 0.22;
|
|
--slider-glow: 0 0% 0% / 0.35;
|
|
}
|
|
.dark {
|
|
--background: 20 14.3% 4.1%;
|
|
--foreground: 60 9.1% 97.8%;
|
|
--card: 20 14.3% 4.1%;
|
|
--card-foreground: 60 9.1% 97.8%;
|
|
--popover: 20 14.3% 4.1%;
|
|
--popover-foreground: 60 9.1% 97.8%;
|
|
--primary: 221 83% 53%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 12 6.5% 15.1%;
|
|
--secondary-foreground: 60 9.1% 97.8%;
|
|
--muted: 12 6.5% 15.1%;
|
|
--muted-foreground: 24 5.4% 63.9%;
|
|
--accent: 217 33% 17%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 60 9.1% 97.8%;
|
|
--border: 12 6.5% 15.1%;
|
|
--input: 12 6.5% 15.1%;
|
|
--ring: 221 83% 53%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
|
|
/* Editor surface colors — dark mode */
|
|
--editor-bg: 240 6% 7%;
|
|
--editor-header: 240 5% 8.5%;
|
|
--editor-panel: 240 5% 9%;
|
|
--editor-surface: 240 4% 10%;
|
|
--editor-surface-alt: 240 5% 11%;
|
|
--editor-dialog: 240 10% 3%;
|
|
--editor-dialog-alt: 237 9% 5%;
|
|
--editor-timeline: 240 6% 7%;
|
|
--editor-row: 240 4% 10%;
|
|
--editor-subrow: 240 7% 15%;
|
|
|
|
/* Slider track colors — dark mode */
|
|
--slider-track: 0 0% 100% / 0.12;
|
|
--slider-thumb: 0 0% 100%;
|
|
--slider-thumb-shadow: 0 0% 100% / 0.32;
|
|
--slider-glow: 0 0% 100% / 0.5;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
font-family: var(--app-font-sans);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
body .font-mono,
|
|
body kbd {
|
|
font-family: var(--app-font-sans);
|
|
}
|
|
}
|
|
|
|
/* Smooth timeline cursor animations */
|
|
@layer utilities {
|
|
.timeline-cursor-smooth {
|
|
will-change: transform;
|
|
transition:
|
|
left 33ms linear,
|
|
right 33ms linear;
|
|
}
|
|
|
|
.indeterminate-progress {
|
|
position: relative;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.indeterminate-progress::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 38%;
|
|
min-width: 3.5rem;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(37, 99, 235, 0) 0%,
|
|
rgba(37, 99, 235, 0.35) 18%,
|
|
rgba(96, 165, 250, 0.92) 52%,
|
|
rgba(37, 99, 235, 0.3) 82%,
|
|
rgba(37, 99, 235, 0) 100%
|
|
);
|
|
animation: indeterminate-progress 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
/* Hidden scrollbar - still scrollable but invisible */
|
|
.custom-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
/* Smooth playback scrubber */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
border-radius: 100px;
|
|
height: 4px;
|
|
background: hsl(var(--slider-track));
|
|
}
|
|
|
|
input[type="range"]::-moz-range-track {
|
|
border-radius: 100px;
|
|
height: 4px;
|
|
background: hsl(var(--slider-track));
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: hsl(var(--slider-thumb));
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px hsl(var(--slider-thumb-shadow));
|
|
border: 2px solid hsl(var(--slider-thumb));
|
|
transition: all 0.08s ease-out;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb:hover {
|
|
background: hsl(var(--slider-thumb));
|
|
transform: scale(1.15);
|
|
box-shadow: 0 3px 10px hsl(var(--slider-glow));
|
|
border-color: var(--brand-accent);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb:active {
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: hsl(var(--slider-thumb));
|
|
cursor: pointer;
|
|
border: 2px solid hsl(var(--slider-thumb));
|
|
box-shadow: 0 2px 8px hsl(var(--slider-thumb-shadow));
|
|
transition: all 0.08s ease-out;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb:hover {
|
|
background: hsl(var(--slider-thumb));
|
|
transform: scale(1.15);
|
|
box-shadow: 0 3px 10px hsl(var(--slider-glow));
|
|
border-color: var(--brand-accent);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb:active {
|
|
transform: scale(1.25);
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-progress {
|
|
0% {
|
|
transform: translateX(-150%);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(270%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(270%);
|
|
}
|
|
}
|
|
|
|
|
|
|