zaine/adventure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial 2
Some checks failed
CI / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Zaine
2026-06-26 09:26:50 +01:00
parent 194330fb47
commit 3b37368e7d
213 changed files with 14688 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
apps/web/src/app/globals.css Executable file
View File

@@ -0,0 +1,215 @@
@import "tailwindcss";
@import "../themes/index.css";
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: calc(14px * var(--density));
color: var(--color-text);
background-color: var(--color-body-bg);
background-image: var(--color-body-bg-image);
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: var(--effect-scanlines);
z-index: 9999;
}
@theme inline {
--color-xp-blue: var(--color-accent);
--color-bliss-green: var(--color-positive);
--color-parchment: var(--color-surface);
--color-gold: var(--color-gold);
--color-ink: var(--color-text);
--font-sans: var(--font-sans);
--font-serif: var(--font-serif);
}
.retro-window {
background: var(--color-surface);
border: 2px solid;
border-color: var(--color-border-light) var(--color-border-dark) var(--color-border-dark)
var(--color-border-light);
box-shadow: var(--window-shadow);
}
.retro-window-inset {
border: 2px solid;
border-color: var(--color-border-dark) var(--color-border-light) var(--color-border-light)
var(--color-border-dark);
background: var(--color-surface-inset);
color: var(--color-text);
}
.retro-titlebar {
background: linear-gradient(
180deg,
var(--color-titlebar-start) 0%,
var(--color-titlebar-mid) 8%,
var(--color-titlebar-end) 100%
);
color: var(--color-accent-text);
padding: 4px 8px;
font-weight: bold;
font-size: 13px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.retro-btn {
background: linear-gradient(180deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
border: 2px solid;
border-color: var(--color-border-light) var(--color-border-dark) var(--color-border-dark)
var(--color-border-light);
padding: 4px 12px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-text);
cursor: pointer;
}
.retro-btn:hover {
background: linear-gradient(180deg, var(--color-surface-raised) 0%, var(--color-btn-hover) 100%);
}
.retro-btn:active {
border-color: var(--color-border-dark) var(--color-border-light) var(--color-border-light)
var(--color-border-dark);
padding: 5px 11px 3px 13px;
}
.retro-btn-primary {
background: linear-gradient(180deg, var(--color-btn-primary-start) 0%, var(--color-accent) 100%);
color: var(--color-accent-text);
border-color: var(--color-btn-primary-border-light) var(--color-btn-primary-border-dark)
var(--color-btn-primary-border-dark) var(--color-btn-primary-border-light);
}
.skill-bar-track {
height: 14px;
background: var(--color-skill-track);
border: 1px solid var(--color-border-dark);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.skill-bar-fill {
height: 100%;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-skill-fill) 80%, white) 0%,
var(--color-skill-fill) 50%,
color-mix(in srgb, var(--color-skill-fill) 70%, black) 100%
);
border-right: 1px solid var(--color-gold);
transition: width 600ms ease-out;
}
.skill-bar-fill-gold {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-skill-fill-gold) 80%, white) 0%,
var(--color-skill-fill-gold) 50%,
color-mix(in srgb, var(--color-skill-fill-gold) 60%, black) 100%
);
}
@media (prefers-reduced-motion: reduce) {
.skill-bar-fill {
transition: none;
}
}
.serif {
font-family: var(--font-serif);
}
.xp-toast {
animation: slideUp 200ms ease-out, fadeOut 3s ease-in 2s forwards;
}
.action-toast {
animation: slideUp 200ms ease-out;
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
.book-spine {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
min-height: 120px;
padding: 8px 4px;
border-radius: 2px 4px 4px 2px;
cursor: pointer;
transition: transform 150ms;
}
.book-spine:hover {
transform: rotate(180deg) translateY(-4px);
}
.parchment-bg {
background: var(--color-surface);
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.theme-preview-card {
cursor: pointer;
transition: transform 150ms, box-shadow 150ms;
}
.theme-preview-card:hover {
transform: translateY(-2px);
}
.theme-preview-card.selected {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.theme-preview-bar {
height: 20px;
border-radius: 2px 2px 0 0;
}
.theme-preview-body {
padding: 8px;
display: flex;
gap: 4px;
}
.theme-preview-swatch {
width: 16px;
height: 16px;
border-radius: 2px;
}