mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 08:21:39 -06:00
feat: expand background patterns and reorganize by visual type
This commit is contained in:
neon
+125
-17
@@ -10,10 +10,15 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ── Background patterns ─────────────────────────────────────
|
||||
Applied as a class on the library/lens/collection content area.
|
||||
Uses --dot-color and --primary from the active theme.
|
||||
────────────────────────────────────────────────────────────── */
|
||||
.pattern-preview {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pattern-preview[class*='pattern-']::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.pattern-dots {
|
||||
background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
@@ -97,24 +102,82 @@
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-polar-aurora {
|
||||
background-image:
|
||||
radial-gradient(120% 58% at 0% 22%, oklch(0.76 0.14 calc(var(--tint-h) + 20) / 0.13), transparent 68%),
|
||||
radial-gradient(120% 58% at 100% 34%, oklch(0.74 0.14 calc(var(--tint-h) + 190) / 0.12), transparent 68%),
|
||||
radial-gradient(130% 62% at 50% -12%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 72%);
|
||||
}
|
||||
|
||||
.pattern-isogrid::before {
|
||||
.pattern-spectrum-x::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.08;
|
||||
background-color: var(--primary);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='50' height='86' viewBox='0 0 50 86' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 21.5L25 36l25-14.5v29L25 65 0 50.5V21.5z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M25 36v29M0 21.5L25 7M50 21.5L25 7' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='50' height='86' viewBox='0 0 50 86' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 21.5L25 36l25-14.5v29L25 65 0 50.5V21.5z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M25 36v29M0 21.5L25 7M50 21.5L25 7' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
|
||||
mask-size: 100px 172px;
|
||||
background-image:
|
||||
linear-gradient(135deg, oklch(0.7 0.15 var(--tint-h) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(225deg, oklch(0.7 0.15 calc(var(--tint-h) + 90) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(315deg, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(45deg, oklch(0.7 0.15 calc(var(--tint-h) + 270) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-spectrum-plus::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to bottom, oklch(0.7 0.15 var(--tint-h) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to left, oklch(0.7 0.15 calc(var(--tint-h) + 90) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to top, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to right, oklch(0.7 0.15 calc(var(--tint-h) + 270) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-eclipse::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, oklch(0.7 0.15 var(--tint-h) / 0.12) 0%, transparent 65%),
|
||||
radial-gradient(at 100% 100%, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.12) 0%, transparent 65%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-nova::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(at 50% 50%, oklch(0.7 0.15 var(--tint-h) / 0.12) 0%, transparent 60%),
|
||||
linear-gradient(to bottom, oklch(0.7 0.15 calc(var(--tint-h) + 150) / 0.08) 0%, transparent 40%),
|
||||
linear-gradient(to top, oklch(0.7 0.15 calc(var(--tint-h) + 210) / 0.08) 0%, transparent 40%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-golden-ratio::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(at 38.2% 38.2%, oklch(0.7 0.15 var(--tint-h) / 0.1) 0%, transparent 55%),
|
||||
radial-gradient(at 61.8% 61.8%, oklch(0.7 0.15 calc(var(--tint-h) + 137.5) / 0.1) 0%, transparent 55%),
|
||||
radial-gradient(at 80% 20%, oklch(0.7 0.15 calc(var(--tint-h) + 275) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-millimeter::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in oklch, var(--primary) 5%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 5%, transparent) 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
.pattern-elevation::before {
|
||||
@@ -138,6 +201,51 @@
|
||||
background-image: repeating-linear-gradient(90deg, var(--primary), var(--primary) 1px, transparent 1px, transparent 40px);
|
||||
}
|
||||
|
||||
.pattern-vinyl::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image: repeating-radial-gradient(circle at 50% -25%, transparent, transparent 3px, color-mix(in oklch, var(--primary) 7%, transparent) 3.75px, transparent 4.5px);
|
||||
}
|
||||
|
||||
.pattern-carbon::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(45deg, color-mix(in oklch, var(--primary) 5%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, color-mix(in oklch, var(--primary) 5%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, color-mix(in oklch, var(--primary) 5%, transparent) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, color-mix(in oklch, var(--primary) 5%, transparent) 75%);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.pattern-perforated::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle at center, color-mix(in oklch, var(--primary) 8%, transparent) 1.5px, transparent 2px);
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
.pattern-blueprint::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
.pattern-wireframe::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
|
||||
+145
-113
@@ -1,7 +1,15 @@
|
||||
/* ── Background patterns ─────────────────────────────────────
|
||||
Applied as a class on the library/lens/collection content area.
|
||||
Uses --dot-color and --primary from the active theme.
|
||||
────────────────────────────────────────────────────────────── */
|
||||
.pattern-preview {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pattern-preview[class*='pattern-']::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ── Fundamental ───────────────────────────────────────────── */
|
||||
|
||||
.pattern-dots {
|
||||
background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
@@ -15,63 +23,40 @@
|
||||
12px 12px;
|
||||
}
|
||||
|
||||
.pattern-gradient {
|
||||
background-image: radial-gradient(ellipse 70% 55% at 0% 0%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 65%);
|
||||
}
|
||||
|
||||
.pattern-aurora {
|
||||
background-image:
|
||||
radial-gradient(ellipse 60% 45% at 0% 50%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 100%),
|
||||
radial-gradient(ellipse 50% 40% at 100% 50%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 100%),
|
||||
radial-gradient(ellipse 40% 35% at 50% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-horizon {
|
||||
background-image: linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--primary) 8%, transparent) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-mesh {
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, color-mix(in oklch, var(--primary) 20%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, color-mix(in oklch, var(--primary) 15%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, color-mix(in oklch, var(--primary) 20%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, color-mix(in oklch, var(--primary) 15%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 50% 50%, color-mix(in oklch, var(--primary) 10%, transparent) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.pattern-glow {
|
||||
background-image: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklch, var(--primary) 20%, transparent) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-circuit::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
background-color: var(--primary);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80h-80z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M30 10v30M70 10v30M10 50h30M10 70h30M60 50h30M60 70h30M50 30v40' stroke='black' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='40' r='2' fill='black'/%3E%3Ccircle cx='70' cy='40' r='2' fill='black'/%3E%3Ccircle cx='40' cy='50' r='2' fill='black'/%3E%3Ccircle cx='40' cy='70' r='2' fill='black'/%3E%3Ccircle cx='60' cy='50' r='2' fill='black'/%3E%3Ccircle cx='60' cy='70' r='2' fill='black'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80h-80z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M30 10v30M70 10v30M10 50h30M10 70h30M60 50h30M60 70h30M50 30v40' stroke='black' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='40' r='2' fill='black'/%3E%3Ccircle cx='70' cy='40' r='2' fill='black'/%3E%3Ccircle cx='40' cy='50' r='2' fill='black'/%3E%3Ccircle cx='40' cy='70' r='2' fill='black'/%3E%3Ccircle cx='60' cy='50' r='2' fill='black'/%3E%3Ccircle cx='60' cy='70' r='2' fill='black'/%3E%3C/svg%3E");
|
||||
-webkit-mask-size: 150px 150px;
|
||||
mask-size: 150px 150px;
|
||||
}
|
||||
|
||||
.pattern-scanlines::before {
|
||||
.pattern-terminal::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom, transparent 50%, color-mix(in oklch, var(--primary) 5%, transparent) 50%);
|
||||
background-size: 100% 4px;
|
||||
opacity: 0.05;
|
||||
background-image: repeating-linear-gradient(90deg, var(--primary), var(--primary) 1px, transparent 1px, transparent 40px);
|
||||
}
|
||||
|
||||
.pattern-parchment {
|
||||
.pattern-millimeter::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 30%, color-mix(in oklch, var(--primary) 5%, transparent) 0%, transparent 20%),
|
||||
radial-gradient(circle at 80% 70%, color-mix(in oklch, var(--primary) 5%, transparent) 0%, transparent 20%),
|
||||
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
|
||||
linear-gradient(to right, color-mix(in oklch, var(--primary) 5%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 5%, transparent) 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
/* ── Structural ────────────────────────────────────────────── */
|
||||
|
||||
.pattern-blueprint::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
.pattern-brushed {
|
||||
@@ -84,25 +69,88 @@
|
||||
);
|
||||
}
|
||||
|
||||
.pattern-stardust::before {
|
||||
.pattern-scanlines::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, var(--foreground) 100%, transparent), radial-gradient(1px 1px at 30% 50%, var(--foreground) 80%, transparent),
|
||||
radial-gradient(2px 2px at 50% 80%, var(--foreground) 60%, transparent), radial-gradient(1px 1px at 80% 10%, var(--foreground) 90%, transparent),
|
||||
radial-gradient(1.5px 1.5px at 90% 90%, var(--foreground) 70%, transparent),
|
||||
radial-gradient(1px 1px at 25% 35%, var(--foreground) 100%, transparent), radial-gradient(1px 1px at 65% 45%, var(--foreground) 80%, transparent),
|
||||
radial-gradient(1px 1px at 15% 75%, var(--foreground) 90%, transparent), radial-gradient(2px 2px at 75% 25%, var(--foreground) 60%, transparent),
|
||||
radial-gradient(1px 1px at 45% 15%, var(--foreground) 70%, transparent), radial-gradient(1px 1px at 5% 55%, var(--foreground) 100%, transparent),
|
||||
radial-gradient(1px 1px at 35% 85%, var(--foreground) 80%, transparent), radial-gradient(1px 1px at 55% 5%, var(--foreground) 90%, transparent),
|
||||
radial-gradient(2px 2px at 95% 45%, var(--foreground) 60%, transparent), radial-gradient(1px 1px at 40% 60%, var(--foreground) 70%, transparent);
|
||||
background-size: 300px 300px;
|
||||
background: linear-gradient(to bottom, transparent 50%, color-mix(in oklch, var(--primary) 5%, transparent) 50%);
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
|
||||
.pattern-carbon::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(45deg, color-mix(in oklch, var(--primary) 5%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, color-mix(in oklch, var(--primary) 5%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, color-mix(in oklch, var(--primary) 5%, transparent) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, color-mix(in oklch, var(--primary) 5%, transparent) 75%);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.pattern-vinyl::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image: repeating-radial-gradient(circle at 50% -25%, transparent, transparent 3px, color-mix(in oklch, var(--primary) 7%, transparent) 3.75px, transparent 4.5px);
|
||||
}
|
||||
|
||||
.pattern-perforated::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle at center, color-mix(in oklch, var(--primary) 8%, transparent) 1.5px, transparent 2px);
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
/* ── Ambient ───────────────────────────────────────────────── */
|
||||
|
||||
.pattern-aurora {
|
||||
background-image:
|
||||
radial-gradient(ellipse 60% 45% at 0% 50%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 100%),
|
||||
radial-gradient(ellipse 50% 40% at 100% 50%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 100%),
|
||||
radial-gradient(ellipse 40% 35% at 50% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-horizon {
|
||||
background-image: linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--primary) 8%, transparent) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-glow {
|
||||
background-image: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklch, var(--primary) 20%, transparent) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.pattern-mesh {
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, color-mix(in oklch, var(--primary) 20%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, color-mix(in oklch, var(--primary) 15%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, color-mix(in oklch, var(--primary) 20%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, color-mix(in oklch, var(--primary) 15%, transparent) 0px, transparent 50%),
|
||||
radial-gradient(at 50% 50%, color-mix(in oklch, var(--primary) 10%, transparent) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.pattern-elevation::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 5%, transparent), transparent 40%),
|
||||
linear-gradient(to top, color-mix(in oklch, var(--primary) 3%, transparent), transparent 30%);
|
||||
}
|
||||
|
||||
/* ── Refractive ────────────────────────────────────────────── */
|
||||
|
||||
.pattern-prism::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
@@ -128,84 +176,68 @@
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-elevation::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
background-color: var(--primary);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L85 15v70L50 100 15 85V15z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M50 10L78 22v56L50 90 22 78V22z' fill='none' stroke='black' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L85 15v70L50 100 15 85V15z' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M50 10L78 22v56L50 90 22 78V22z' fill='none' stroke='black' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
|
||||
mask-size: 400px 400px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.pattern-elevation::before {
|
||||
.pattern-spectrum-x::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--primary) 5%, transparent), transparent 40%),
|
||||
linear-gradient(to top, color-mix(in oklch, var(--primary) 3%, transparent), transparent 30%);
|
||||
linear-gradient(135deg, oklch(0.7 0.15 var(--tint-h) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(225deg, oklch(0.7 0.15 calc(var(--tint-h) + 90) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(315deg, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(45deg, oklch(0.7 0.15 calc(var(--tint-h) + 270) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-refraction::before {
|
||||
.pattern-spectrum-plus::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(135deg, color-mix(in oklch, var(--primary) 10%, transparent) 0%, transparent 15%),
|
||||
linear-gradient(315deg, color-mix(in oklch, var(--primary) 8%, transparent) 0%, transparent 20%);
|
||||
linear-gradient(to bottom, oklch(0.7 0.15 var(--tint-h) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to left, oklch(0.7 0.15 calc(var(--tint-h) + 90) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to top, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.08) 0%, transparent 50%),
|
||||
linear-gradient(to right, oklch(0.7 0.15 calc(var(--tint-h) + 270) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(160%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-radar::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.1;
|
||||
background-color: var(--primary);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='black' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='black' stroke-width='0.2'/%3E%3Cpath d='M50 2v96M2 50h96' stroke='black' stroke-width='0.2'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='black' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='black' stroke-width='0.2'/%3E%3Cpath d='M50 2v96M2 50h96' stroke='black' stroke-width='0.2'/%3E%3C/svg%3E");
|
||||
mask-size: 500px 500px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.pattern-origami::before {
|
||||
.pattern-eclipse::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(170deg, color-mix(in oklch, var(--primary) 4%, transparent) 0%, transparent 50%),
|
||||
linear-gradient(10deg, color-mix(in oklch, var(--primary) 3%, transparent) 0%, transparent 40%);
|
||||
radial-gradient(at 0% 0%, oklch(0.7 0.15 var(--tint-h) / 0.12) 0%, transparent 65%),
|
||||
radial-gradient(at 100% 100%, oklch(0.7 0.15 calc(var(--tint-h) + 180) / 0.12) 0%, transparent 65%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
.pattern-terminal::before {
|
||||
.pattern-nova::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
background-image: repeating-linear-gradient(90deg, var(--primary), var(--primary) 1px, transparent 1px, transparent 40px);
|
||||
background-image:
|
||||
radial-gradient(at 50% 50%, oklch(0.7 0.15 var(--tint-h) / 0.12) 0%, transparent 60%),
|
||||
linear-gradient(to bottom, oklch(0.7 0.15 calc(var(--tint-h) + 150) / 0.08) 0%, transparent 40%),
|
||||
linear-gradient(to top, oklch(0.7 0.15 calc(var(--tint-h) + 210) / 0.08) 0%, transparent 40%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
.glow-wrapper {
|
||||
.pattern-golden-ratio::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
url('/topbar.png'), radial-gradient(50% 50% at center -25px, color-mix(in oklch, var(--primary) 35%, transparent) 0%, transparent 100%);
|
||||
background-blend-mode: hard-light, color-dodge;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 12rem;
|
||||
radial-gradient(at 38.2% 38.2%, oklch(0.7 0.15 var(--tint-h) / 0.1) 0%, transparent 55%),
|
||||
radial-gradient(at 61.8% 61.8%, oklch(0.7 0.15 calc(var(--tint-h) + 137.5) / 0.1) 0%, transparent 55%),
|
||||
radial-gradient(at 80% 20%, oklch(0.7 0.15 calc(var(--tint-h) + 275) / 0.08) 0%, transparent 50%);
|
||||
filter: contrast(150%) brightness(110%);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ const themeStore = useThemeStore()
|
||||
class="w-full h-8 rounded overflow-hidden ring-2 transition-all"
|
||||
:class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
|
||||
>
|
||||
<div class="w-full h-full bg-background" :class="opt.cssClass" />
|
||||
<div class="w-full h-full bg-background pattern-preview" :class="opt.cssClass" />
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
|
||||
@@ -164,20 +164,35 @@ function toggleOverlay(key: CardOverlayKey) {
|
||||
<p class="settings-hint">Pattern shown behind the book grid</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<Tooltip v-for="opt in BACKGROUND_OPTIONS" :key="opt.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="w-18 h-12 rounded overflow-hidden transition-all ring-2 focus:outline-none shrink-0"
|
||||
:class="themeStore.background === opt.id ? 'ring-primary shadow-sm shadow-primary/20' : 'ring-border hover:ring-muted-foreground/40'"
|
||||
@click="themeStore.setBackground(opt.id)"
|
||||
>
|
||||
<div class="w-full h-full bg-background [transform:translate(0)]" :class="opt.cssClass" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ opt.label }}</TooltipContent>
|
||||
</Tooltip>
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="group in [
|
||||
{ label: 'Fundamental', ids: ['none', 'dots', 'cross', 'terminal', 'millimeter'] },
|
||||
{ label: 'Structural', ids: ['blueprint', 'brushed', 'scanlines', 'vinyl', 'carbon', 'perforated'] },
|
||||
{ label: 'Ambient', ids: ['aurora', 'horizon', 'glow', 'mesh', 'elevation'] },
|
||||
{ label: 'Refractive', ids: ['prism', 'spectrum', 'spectrum-x', 'spectrum-plus', 'eclipse', 'nova', 'golden-ratio'] },
|
||||
]"
|
||||
:key="group.label"
|
||||
>
|
||||
<p class="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-widest mb-2.5 ml-0.5">{{ group.label }}</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<Tooltip v-for="opt in BACKGROUND_OPTIONS.filter((o) => group.ids.includes(o.id))" :key="opt.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="w-18 h-12 rounded overflow-hidden transition-all ring-2 focus:outline-none shrink-0"
|
||||
:class="
|
||||
themeStore.background === opt.id ? 'ring-primary shadow-sm shadow-primary/20' : 'ring-border hover:ring-muted-foreground/40'
|
||||
"
|
||||
@click="themeStore.setBackground(opt.id)"
|
||||
>
|
||||
<div class="w-full h-full bg-background [transform:translate(0)] pattern-preview" :class="opt.cssClass" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ opt.label }}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+34
-16
@@ -43,17 +43,26 @@ export type Background =
|
||||
| 'none'
|
||||
| 'dots'
|
||||
| 'cross'
|
||||
| 'terminal'
|
||||
| 'millimeter'
|
||||
| 'blueprint'
|
||||
| 'brushed'
|
||||
| 'scanlines'
|
||||
| 'carbon'
|
||||
| 'vinyl'
|
||||
| 'perforated'
|
||||
| 'aurora'
|
||||
| 'horizon'
|
||||
| 'mesh'
|
||||
| 'glow'
|
||||
| 'scanlines'
|
||||
| 'brushed'
|
||||
| 'mesh'
|
||||
| 'elevation'
|
||||
| 'prism'
|
||||
| 'spectrum'
|
||||
| 'polar-aurora'
|
||||
| 'elevation'
|
||||
| 'terminal'
|
||||
| 'spectrum-x'
|
||||
| 'spectrum-plus'
|
||||
| 'eclipse'
|
||||
| 'nova'
|
||||
| 'golden-ratio'
|
||||
|
||||
export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
|
||||
{ id: 'white', label: 'White', color: '#fafafa' },
|
||||
@@ -103,27 +112,36 @@ export const RADIUS_OPTIONS: { id: Radius; label: string }[] = [
|
||||
]
|
||||
|
||||
export const BACKGROUND_OPTIONS: { id: Background; label: string; cssClass: string }[] = [
|
||||
// Basic
|
||||
// Fundamental
|
||||
{ id: 'none', label: 'None', cssClass: '' },
|
||||
{ id: 'dots', label: 'Dots', cssClass: 'pattern-dots' },
|
||||
{ id: 'cross', label: 'Cross', cssClass: 'pattern-cross' },
|
||||
{ id: 'terminal', label: 'Terminal', cssClass: 'pattern-terminal' },
|
||||
{ id: 'millimeter', label: 'Millimeter', cssClass: 'pattern-millimeter' },
|
||||
|
||||
// Atmospheric
|
||||
// Structural
|
||||
{ id: 'blueprint', label: 'Blueprint', cssClass: 'pattern-blueprint' },
|
||||
{ id: 'brushed', label: 'Brushed', cssClass: 'pattern-brushed' },
|
||||
{ id: 'scanlines', label: 'Scanlines', cssClass: 'pattern-scanlines' },
|
||||
{ id: 'vinyl', label: 'Vinyl', cssClass: 'pattern-vinyl' },
|
||||
{ id: 'carbon', label: 'Carbon', cssClass: 'pattern-carbon' },
|
||||
{ id: 'perforated', label: 'Perforated', cssClass: 'pattern-perforated' },
|
||||
|
||||
// Ambient
|
||||
{ id: 'aurora', label: 'Aurora', cssClass: 'pattern-aurora' },
|
||||
{ id: 'horizon', label: 'Horizon', cssClass: 'pattern-horizon' },
|
||||
{ id: 'glow', label: 'Glow', cssClass: 'pattern-glow' },
|
||||
{ id: 'mesh', label: 'Mesh', cssClass: 'pattern-mesh' },
|
||||
|
||||
// Technical
|
||||
{ id: 'scanlines', label: 'Scanlines', cssClass: 'pattern-scanlines' },
|
||||
{ id: 'terminal', label: 'Terminal', cssClass: 'pattern-terminal' },
|
||||
{ id: 'brushed', label: 'Brushed', cssClass: 'pattern-brushed' },
|
||||
|
||||
// Architectural
|
||||
{ id: 'elevation', label: 'Elevation', cssClass: 'pattern-elevation' },
|
||||
|
||||
// Refractive
|
||||
{ id: 'prism', label: 'Prism', cssClass: 'pattern-prism' },
|
||||
{ id: 'spectrum', label: 'Spectrum', cssClass: 'pattern-spectrum' },
|
||||
{ id: 'polar-aurora', label: 'Polar Aurora', cssClass: 'pattern-polar-aurora' },
|
||||
{ id: 'spectrum-x', label: 'Spectrum X', cssClass: 'pattern-spectrum-x' },
|
||||
{ id: 'spectrum-plus', label: 'Spectrum Plus', cssClass: 'pattern-spectrum-plus' },
|
||||
{ id: 'eclipse', label: 'Eclipse', cssClass: 'pattern-eclipse' },
|
||||
{ id: 'nova', label: 'Nova', cssClass: 'pattern-nova' },
|
||||
{ id: 'golden-ratio', label: 'Golden Ratio', cssClass: 'pattern-golden-ratio' },
|
||||
]
|
||||
|
||||
const ACCENT_IDS = ACCENT_OPTIONS.map((a) => a.id)
|
||||
|
||||
Reference in New Issue
Block a user