398 lines
8.4 KiB
SCSS
398 lines
8.4 KiB
SCSS
@import '@angular/cdk/overlay-prebuilt.css';
|
|
|
|
@keyframes profile-card-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.97) translateY(4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 262.1 83.3% 57.8%;
|
|
--primary-foreground: 210 20% 98%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 262.1 83.3% 57.8%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings:
|
|
'rlig' 1,
|
|
'calt' 1;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
|
|
/* Custom utilities */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.workspace-bright-theme {
|
|
--background: 220 14% 92%;
|
|
--foreground: 222 16% 18%;
|
|
--card: 220 18% 97%;
|
|
--card-foreground: 222 16% 18%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 16% 18%;
|
|
--primary: 214 72% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 14% 88%;
|
|
--secondary-foreground: 222 16% 18%;
|
|
--muted: 220 12% 85%;
|
|
--muted-foreground: 220 10% 38%;
|
|
--accent: 220 14% 90%;
|
|
--accent-foreground: 222 16% 18%;
|
|
--destructive: 0 72% 56%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 12% 78%;
|
|
--input: 220 12% 78%;
|
|
--ring: 214 72% 50%;
|
|
--radius: 0.375rem;
|
|
}
|
|
|
|
.theme-icon-slot {
|
|
display: none;
|
|
}
|
|
|
|
.theme-icon-slot[data-theme-visible='true'] {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.theme-settings__workspace {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
|
|
align-items: stretch;
|
|
min-height: 0;
|
|
}
|
|
|
|
.theme-settings__sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.theme-settings__main {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__workspace {
|
|
gap: 0.75rem;
|
|
grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.theme-studio-fullscreen-shell {
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable both-edges;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--muted-foreground) / 0.6) hsl(var(--card) / 0.75);
|
|
}
|
|
|
|
.theme-studio-fullscreen-shell::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
.theme-studio-fullscreen-shell::-webkit-scrollbar-track {
|
|
border-radius: 999px;
|
|
background: hsl(var(--card) / 0.75);
|
|
}
|
|
|
|
.theme-studio-fullscreen-shell::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
border-radius: 999px;
|
|
background: hsl(var(--muted-foreground) / 0.6);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.theme-studio-fullscreen-shell::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--primary) / 0.45);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__sidebar {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__sidebar .theme-studio-card:last-child {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__main {
|
|
gap: 0.875rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-studio-card {
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__hero-grid {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__hero-stat {
|
|
border-radius: 0.5rem;
|
|
padding: 0.65rem 0.75rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__hero-label {
|
|
font-size: 0.64rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__hero-value {
|
|
margin-top: 0.3rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__workspace-tab,
|
|
.theme-settings--fullscreen .theme-settings__entry-button {
|
|
border-radius: 0.5rem;
|
|
padding: 0.72rem 0.8rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__search-input {
|
|
border-radius: 0.5rem;
|
|
padding: 0.72rem 0.85rem;
|
|
}
|
|
|
|
.theme-settings--fullscreen .theme-settings__entry-list {
|
|
max-height: none;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.theme-studio-card {
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--card));
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
|
|
}
|
|
|
|
.theme-settings__hero-grid {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.theme-settings__hero-stat {
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--secondary) / 0.3);
|
|
padding: 0.75rem 0.875rem;
|
|
}
|
|
|
|
.theme-settings__hero-label {
|
|
display: block;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.theme-settings__hero-value {
|
|
display: block;
|
|
margin-top: 0.35rem;
|
|
font-size: 0.95rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.theme-settings__workspace-tab {
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--secondary) / 0.25);
|
|
padding: 0.75rem 0.875rem;
|
|
text-align: left;
|
|
transition:
|
|
background-color 160ms ease,
|
|
border-color 160ms ease;
|
|
}
|
|
|
|
.theme-settings__workspace-tab:hover {
|
|
background: hsl(var(--secondary) / 0.45);
|
|
}
|
|
|
|
.theme-settings__workspace-tab--active {
|
|
border-color: hsl(var(--primary) / 0.35);
|
|
background: hsl(var(--primary) / 0.08);
|
|
}
|
|
|
|
.theme-settings__workspace-tab-title {
|
|
display: block;
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.theme-settings__workspace-tab-description {
|
|
display: block;
|
|
margin-top: 0.35rem;
|
|
font-size: 0.76rem;
|
|
line-height: 1.45;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.theme-settings__search-input {
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--secondary));
|
|
padding: 0.65rem 0.8rem;
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
outline: none;
|
|
transition:
|
|
border-color 160ms ease,
|
|
box-shadow 160ms ease,
|
|
background-color 160ms ease;
|
|
}
|
|
|
|
.theme-settings__search-input:focus {
|
|
border-color: hsl(var(--primary) / 0.4);
|
|
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
.theme-settings__entry-list {
|
|
display: flex;
|
|
max-height: min(60vh, 34rem);
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
overflow: auto;
|
|
padding-right: 0.15rem;
|
|
}
|
|
|
|
.theme-settings__entry-button {
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--secondary) / 0.25);
|
|
padding: 0.75rem 0.875rem;
|
|
text-align: left;
|
|
transition:
|
|
background-color 160ms ease,
|
|
border-color 160ms ease;
|
|
}
|
|
|
|
.theme-settings__entry-button:hover {
|
|
background: hsl(var(--secondary) / 0.45);
|
|
}
|
|
|
|
.theme-settings__entry-button--active {
|
|
border-color: hsl(var(--primary) / 0.35);
|
|
background: hsl(var(--primary) / 0.08);
|
|
}
|
|
|
|
@media (max-width: 1279px) {
|
|
.theme-settings__hero-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.theme-settings__workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.theme-settings__sidebar {
|
|
position: static;
|
|
}
|
|
|
|
.theme-settings__entry-list {
|
|
max-height: 24rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.theme-settings__hero-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
[data-theme-key][data-theme-linked='true'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-theme-key][data-theme-picker-active='true'] {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
[data-theme-key][data-theme-picker-hovered='true'] {
|
|
outline: 2px solid hsl(var(--primary));
|
|
outline-offset: -2px;
|
|
box-shadow: inset 0 0 0 9999px hsl(var(--primary) / 0.08);
|
|
}
|
|
|
|
[data-theme-key][data-theme-picker-selected='true'] {
|
|
outline: 2px solid hsl(var(--primary));
|
|
outline-offset: -2px;
|
|
box-shadow:
|
|
0 0 0 3px hsl(var(--primary) / 0.18),
|
|
inset 0 0 0 9999px hsl(var(--primary) / 0.06);
|
|
}
|