jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

style(frontend): add textured inventory surfaces

Browse source
This commit is contained in:
Jason Fraley 2026-08-28 01:20:33 -04:00
parent 1f2f7b6269
commit 9e822c037b
1 changed files with 234 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/app/(frontend)/styles.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@ -13,7 +13,6 @@
*/
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
@ -94,7 +93,6 @@
*/
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
@ -159,9 +157,9 @@
--sidebar-ring: oklch(0.708 0 0);
--font-sans: 'Geist', sans-serif;
--font-sans: "Geist", sans-serif;
--font-mono: 'Geist Mono', monospace;
--font-mono: "Geist Mono", monospace;
}
/*
@ -169,7 +167,6 @@
*/
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
@ -320,6 +317,35 @@
box-shadow: 0 0 0 3px rgb(251 191 36 / 0.9);
}
.app-background-texture {
background-image: repeating-linear-gradient(
135deg,
rgb(255 255 255 / 0.018) 0 1px,
transparent 1px 7px
);
}
.inventory-frame {
background-color: rgb(7 10 12 / 0.78);
background-image:
linear-gradient(rgb(255 255 255 / 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.018) 1px, transparent 1px),
radial-gradient(circle at 50% 0%, rgb(120 150 145 / 0.09), transparent 55%);
background-size:
48px 48px,
48px 48px,
100% 100%;
box-shadow:
inset 0 1px rgb(255 255 255 / 0.04),
0 12px 35px rgb(0 0 0 / 0.18);
}
@media (prefers-reduced-motion: reduce) {
.locker-search-highlight {
animation: none;
}
}
@property --medal-border-angle {
syntax: "<angle>";
inherits: false;
@ -343,13 +369,23 @@
}
.medal-card::before {
content: '';
content: "";
position: absolute;
inset: -0.125rem;
z-index: 0;
border-radius: inherit;
border: 2px solid transparent;
background: linear-gradient(var(--background), var(--background)) padding-box, repeating-conic-gradient(from var(--medal-border-angle), transparent 0deg 150deg, peru 159deg, rgb(253 224 71) 168deg, white 178deg, transparent 178deg) border-box;
background:
linear-gradient(var(--background), var(--background)) padding-box,
repeating-conic-gradient(
from var(--medal-border-angle),
transparent 0deg 150deg,
peru 159deg,
rgb(253 224 71) 168deg,
white 178deg,
transparent 178deg
)
border-box;
animation: border-spin-animate 10s linear infinite;
pointer-events: none;
}
@ -369,7 +405,7 @@
}
.medal-card::after {
content: '';
content: "";
background: radial-gradient(circle, transparent, rgb(253 224 71 / 0.1));
position: absolute;
inset: 0;