feat: Theme engine
big changes
This commit is contained in:
@@ -87,3 +87,306 @@
|
||||
--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: 1.5rem;
|
||||
grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.theme-settings__sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-settings__main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.theme-settings--fullscreen .theme-settings__workspace {
|
||||
gap: 0.875rem;
|
||||
grid-template-columns: minmax(15.5rem, 17rem) 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: 1rem;
|
||||
box-shadow: 0 10px 24px rgb(15 23 42 / 0.08);
|
||||
}
|
||||
|
||||
.theme-settings--fullscreen .theme-settings__hero-grid {
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.theme-settings--fullscreen .theme-settings__hero-stat {
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
}
|
||||
|
||||
.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.92rem;
|
||||
}
|
||||
|
||||
.theme-settings--fullscreen .theme-settings__workspace-tab,
|
||||
.theme-settings--fullscreen .theme-settings__entry-button {
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.72rem 0.8rem;
|
||||
}
|
||||
|
||||
.theme-settings--fullscreen .theme-settings__search-input {
|
||||
border-radius: 0.85rem;
|
||||
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: 1.5rem;
|
||||
background:
|
||||
linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--background) / 0.96)),
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.08), transparent 45%);
|
||||
box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
|
||||
}
|
||||
|
||||
.theme-settings__hero-grid {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.theme-settings__hero-stat {
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--background) / 0.72);
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
|
||||
.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.45rem;
|
||||
font-size: 0.98rem;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.theme-settings__workspace-tab {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--background) / 0.72);
|
||||
padding: 0.85rem 0.95rem;
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
border-color 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.theme-settings__workspace-tab:hover {
|
||||
background: hsl(var(--secondary) / 0.78);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.theme-settings__workspace-tab--active {
|
||||
border-color: hsl(var(--primary) / 0.4);
|
||||
background: hsl(var(--primary) / 0.08);
|
||||
box-shadow: 0 8px 22px hsl(var(--primary) / 0.12);
|
||||
}
|
||||
|
||||
.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.95rem;
|
||||
background: hsl(var(--background) / 0.82);
|
||||
padding: 0.8rem 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
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 3px hsl(var(--primary) / 0.12);
|
||||
}
|
||||
|
||||
.theme-settings__entry-list {
|
||||
display: flex;
|
||||
max-height: min(60vh, 34rem);
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
overflow: auto;
|
||||
padding-right: 0.15rem;
|
||||
}
|
||||
|
||||
.theme-settings__entry-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--background) / 0.72);
|
||||
padding: 0.9rem 0.95rem;
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
border-color 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.theme-settings__entry-button:hover {
|
||||
background: hsl(var(--secondary) / 0.72);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.theme-settings__entry-button--active {
|
||||
border-color: hsl(var(--primary) / 0.42);
|
||||
background: hsl(var(--primary) / 0.08);
|
||||
box-shadow: 0 8px 24px hsl(var(--primary) / 0.12);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user