v3: tracked down many visual inconsistencies, added two new themes
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 43s
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 43s
This commit is contained in:
khannurien
504
src/themes/geocities.css
Normal file
504
src/themes/geocities.css
Normal file
@@ -0,0 +1,504 @@
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
GeoCities / NeoCities theme — turn-of-the-millennium personal-homepage
|
||||
maximalism: tiled starfield wallpaper, Comic Sans, ridged 3D boxes,
|
||||
clashing neon accents, rainbow dividers, blinking badges.
|
||||
|
||||
Dark scheme → NeoCities "neon on black" revival.
|
||||
Light scheme → classic GeoCities pastel-on-wallpaper.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
:root[data-style="geocities"] {
|
||||
--color-text: #f2f0ff;
|
||||
--color-text-secondary: #7fdbff; /* cyan */
|
||||
--color-text-muted: #a99ad6; /* faded violet */
|
||||
--color-on-accent: #000000; /* black on hot magenta */
|
||||
|
||||
--color-bg: #0a0a2e; /* deep indigo night */
|
||||
--color-surface: #1b1b46; /* raised panel */
|
||||
|
||||
--color-border: #00ffff; /* neon cyan */
|
||||
--color-border-subtle: rgba(0, 255, 255, 0.28);
|
||||
|
||||
--color-accent: #ff00ff; /* hot magenta */
|
||||
--color-accent-hover: #ff5cff;
|
||||
|
||||
--color-link: #00ffff; /* classic bright link */
|
||||
--color-link-hover: #ffff00; /* yellow on hover, very 1999 */
|
||||
|
||||
--color-danger: #ff3860;
|
||||
--color-danger-bg: #3a0a1a;
|
||||
--color-danger-hover: #ff6b8a;
|
||||
|
||||
--color-success: #39ff14; /* neon green */
|
||||
--color-success-bg: #0a2e0a;
|
||||
--color-success-hover: #6fff52;
|
||||
|
||||
--color-overlay: rgba(8, 0, 28, 0.72);
|
||||
--color-header-user-bg: rgba(0, 255, 255, 0.1);
|
||||
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
|
||||
|
||||
--color-option-bg: #14143a;
|
||||
--color-option-border: #00ffff;
|
||||
|
||||
/* Theme-local helpers */
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffee00,
|
||||
#00d11a,
|
||||
#00b3ff,
|
||||
#b300ff
|
||||
);
|
||||
/* Starfield: white pinpricks plus the odd coloured star */
|
||||
--geo-pattern:
|
||||
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
|
||||
radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
|
||||
--geo-pattern-size: 200px 200px;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="geocities"]:not([data-color-scheme]) {
|
||||
--color-text: #2a1a4e;
|
||||
--color-text-secondary: #aa00aa;
|
||||
--color-text-muted: #7a6a9a;
|
||||
--color-on-accent: #ffffff;
|
||||
|
||||
--color-bg: #fff0f8; /* pale lavender wallpaper */
|
||||
--color-surface: #ffffff;
|
||||
|
||||
--color-border: #d000d0;
|
||||
--color-border-subtle: rgba(208, 0, 208, 0.25);
|
||||
|
||||
--color-accent: #d000d0;
|
||||
--color-accent-hover: #a000a0;
|
||||
|
||||
--color-link: #0000ee; /* unvisited blue */
|
||||
--color-link-hover: #551a8b; /* visited purple */
|
||||
|
||||
--color-danger: #cc0033;
|
||||
--color-danger-bg: #ffe0e8;
|
||||
--color-danger-hover: #990022;
|
||||
|
||||
--color-success: #008800;
|
||||
--color-success-bg: #e0ffe0;
|
||||
--color-success-hover: #006600;
|
||||
|
||||
--color-overlay: rgba(40, 0, 40, 0.4);
|
||||
--color-header-user-bg: rgba(208, 0, 208, 0.08);
|
||||
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
|
||||
|
||||
--color-option-bg: #fff0fb;
|
||||
--color-option-border: #d000d0;
|
||||
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffcc00,
|
||||
#00aa1a,
|
||||
#0077dd,
|
||||
#8800cc
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
|
||||
--geo-pattern-size: 22px 22px, 22px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="geocities"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #f2f0ff;
|
||||
--color-text-secondary: #7fdbff;
|
||||
--color-text-muted: #a99ad6;
|
||||
--color-on-accent: #000000;
|
||||
--color-bg: #0a0a2e;
|
||||
--color-surface: #1b1b46;
|
||||
--color-border: #00ffff;
|
||||
--color-border-subtle: rgba(0, 255, 255, 0.28);
|
||||
--color-accent: #ff00ff;
|
||||
--color-accent-hover: #ff5cff;
|
||||
--color-link: #00ffff;
|
||||
--color-link-hover: #ffff00;
|
||||
--color-danger: #ff3860;
|
||||
--color-danger-bg: #3a0a1a;
|
||||
--color-danger-hover: #ff6b8a;
|
||||
--color-success: #39ff14;
|
||||
--color-success-bg: #0a2e0a;
|
||||
--color-success-hover: #6fff52;
|
||||
--color-overlay: rgba(8, 0, 28, 0.72);
|
||||
--color-header-user-bg: rgba(0, 255, 255, 0.1);
|
||||
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
|
||||
--color-option-bg: #14143a;
|
||||
--color-option-border: #00ffff;
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffee00,
|
||||
#00d11a,
|
||||
#00b3ff,
|
||||
#b300ff
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
|
||||
radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
|
||||
--geo-pattern-size: 200px 200px;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="geocities"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #2a1a4e;
|
||||
--color-text-secondary: #aa00aa;
|
||||
--color-text-muted: #7a6a9a;
|
||||
--color-on-accent: #ffffff;
|
||||
--color-bg: #fff0f8;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #d000d0;
|
||||
--color-border-subtle: rgba(208, 0, 208, 0.25);
|
||||
--color-accent: #d000d0;
|
||||
--color-accent-hover: #a000a0;
|
||||
--color-link: #0000ee;
|
||||
--color-link-hover: #551a8b;
|
||||
--color-danger: #cc0033;
|
||||
--color-danger-bg: #ffe0e8;
|
||||
--color-danger-hover: #990022;
|
||||
--color-success: #008800;
|
||||
--color-success-bg: #e0ffe0;
|
||||
--color-success-hover: #006600;
|
||||
--color-overlay: rgba(40, 0, 40, 0.4);
|
||||
--color-header-user-bg: rgba(208, 0, 208, 0.08);
|
||||
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
|
||||
--color-option-bg: #fff0fb;
|
||||
--color-option-border: #d000d0;
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffcc00,
|
||||
#00aa1a,
|
||||
#0077dd,
|
||||
#8800cc
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
|
||||
--geo-pattern-size: 22px 22px, 22px 22px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Structural overrides
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Typography — the one true homepage font ──────────────────────── */
|
||||
[data-style="geocities"] {
|
||||
--font-body: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue",
|
||||
"Marker Felt", cursive;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Tiled wallpaper, fixed so content scrolls over it ────────────── */
|
||||
[data-style="geocities"] body {
|
||||
background-color: var(--color-bg);
|
||||
background-image: var(--geo-pattern);
|
||||
background-size: var(--geo-pattern-size);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* ── Loud headings with a soft glow ──────────────────────────────── */
|
||||
[data-style="geocities"] h1,
|
||||
[data-style="geocities"] .app-header-brand {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
|
||||
}
|
||||
|
||||
/* ── Links — always underlined, bold ─────────────────────────────── */
|
||||
[data-style="geocities"] a,
|
||||
[data-style="geocities"] .md a {
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* …except navigation chrome and avatar links, which aren't prose. */
|
||||
[data-style="geocities"] a:has(.avatar-img),
|
||||
[data-style="geocities"] a:has(.avatar-initials),
|
||||
[data-style="geocities"] .index-presence-avatar,
|
||||
[data-style="geocities"] .app-header-brand,
|
||||
[data-style="geocities"] .app-header-user,
|
||||
[data-style="geocities"] .nav-search-btn,
|
||||
[data-style="geocities"] .user-menu-item,
|
||||
[data-style="geocities"] .user-list-popover-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Blink + marquee-ish keyframes ───────────────────────────────── */
|
||||
@keyframes geo-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Buttons — chunky Win95 outset bevel, press = inset ──────────── */
|
||||
[data-style="geocities"] button {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
transition: border-color 0.1s, background 0.12s;
|
||||
}
|
||||
|
||||
[data-style="geocities"] button:active:not(:disabled) {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .btn-primary,
|
||||
[data-style="geocities"] .btn-secondary,
|
||||
[data-style="geocities"] .btn-danger,
|
||||
[data-style="geocities"] .btn-border,
|
||||
[data-style="geocities"] .follow-btn,
|
||||
[data-style="geocities"] .vote-btn,
|
||||
[data-style="geocities"] .feed-sort-btn,
|
||||
[data-style="geocities"] .invite-btn,
|
||||
[data-style="geocities"] .btn-add-playlist,
|
||||
[data-style="geocities"] .load-more-btn,
|
||||
[data-style="geocities"] .comment-submit-btn,
|
||||
[data-style="geocities"] .comment-cancel-btn,
|
||||
[data-style="geocities"] .search-bar-btn {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Ghost / icon-only buttons stay flat */
|
||||
[data-style="geocities"] .modal-close-btn,
|
||||
[data-style="geocities"] .playlist-remove-btn,
|
||||
[data-style="geocities"] .playlist-card-delete-btn,
|
||||
[data-style="geocities"] .emoji-picker-float [frimousse-emoji],
|
||||
[data-style="geocities"] .emoji-picker-close-btn,
|
||||
[data-style="geocities"] .new-playlist-toggle,
|
||||
[data-style="geocities"] .btn--ghost,
|
||||
[data-style="geocities"] .audio-player-btn,
|
||||
[data-style="geocities"] .audio-player-vol-btn,
|
||||
[data-style="geocities"] .rich-content-thumbnail-btn,
|
||||
[data-style="geocities"] .user-menu-trigger,
|
||||
[data-style="geocities"] .nav-search-btn,
|
||||
[data-style="geocities"] .auth-link-btn,
|
||||
[data-style="geocities"] .form-cancel,
|
||||
[data-style="geocities"] .form-label-action {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── Segmented controls ──────────────────────────────────────────── */
|
||||
[data-style="geocities"] .visibility-toggle {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .visibility-toggle button {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ── Cards & panels — ridged "table border" with a soft neon halo ─── */
|
||||
[data-style="geocities"] .dump-card,
|
||||
[data-style="geocities"] .playlist-card,
|
||||
[data-style="geocities"] .dump-post-header,
|
||||
[data-style="geocities"] .auth-card,
|
||||
[data-style="geocities"] .notification-item,
|
||||
[data-style="geocities"] .user-result-item,
|
||||
[data-style="geocities"] .journal-card {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
|
||||
}
|
||||
|
||||
/* Comments nest deeply, so the full frame piled up. Keep the squared retro
|
||||
edge but lighten it: thin flat border, just a whisper of the same halo. */
|
||||
[data-style="geocities"] .comment-node-inner,
|
||||
[data-style="geocities"] .comment-top-form {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border-subtle);
|
||||
box-shadow: 0 0 6px var(--color-border-subtle);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .dump-card:hover,
|
||||
[data-style="geocities"] .playlist-card:hover,
|
||||
[data-style="geocities"] .user-result-item:hover,
|
||||
[data-style="geocities"] .journal-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 75%, transparent);
|
||||
}
|
||||
|
||||
/* ── App header — rainbow divider ────────────────────────────────── */
|
||||
[data-style="geocities"] .app-header,
|
||||
[data-style="geocities"] .header-search-below {
|
||||
border-bottom: 4px solid;
|
||||
border-image: var(--geo-rainbow) 1;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .app-header-user {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
}
|
||||
|
||||
/* ── Rainbow dividers — on each element's real edge ──────────────── */
|
||||
[data-style="geocities"] .profile-section > h2,
|
||||
[data-style="geocities"] .profile-section-header,
|
||||
[data-style="geocities"] .profile-tabs-scroller {
|
||||
border-bottom: 3px solid;
|
||||
border-image: var(--geo-rainbow) 1;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .comment-section,
|
||||
[data-style="geocities"] .related-section {
|
||||
border-top: 3px solid;
|
||||
border-image: var(--geo-rainbow) 1;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .comment-section-title,
|
||||
[data-style="geocities"] .related-section-title {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ── Inputs / textareas — sunken inset field ─────────────────────── */
|
||||
[data-style="geocities"]
|
||||
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
|
||||
[type="radio"]
|
||||
),
|
||||
[data-style="geocities"] textarea {
|
||||
border-radius: 0 !important;
|
||||
border: 2px inset var(--color-border) !important;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .search-bar-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Modals — heavy ridged frame ─────────────────────────────────── */
|
||||
[data-style="geocities"] .modal-card,
|
||||
[data-style="geocities"] .confirm-modal,
|
||||
[data-style="geocities"] .user-menu-dropdown,
|
||||
[data-style="geocities"] .user-list-popover,
|
||||
[data-style="geocities"] .mention-dropdown,
|
||||
[data-style="geocities"] .emoji-picker-float {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .modal-header {
|
||||
border-bottom: 2px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
/* ── Avatars — framed snapshots ──────────────────────────────────── */
|
||||
[data-style="geocities"] .avatar-img {
|
||||
border: 2px ridge var(--color-border);
|
||||
}
|
||||
|
||||
/* ── Rich content cards — keep brand borders, add neon hover glow ── */
|
||||
[data-style="geocities"] .rich-content-card {
|
||||
border-radius: 0;
|
||||
border-width: 3px;
|
||||
border-style: ridge;
|
||||
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .rich-content-card:has(.rich-content-body:hover),
|
||||
[data-style="geocities"]
|
||||
.rich-content-card--youtube:has(.rich-content-body:hover),
|
||||
[data-style="geocities"]
|
||||
.rich-content-card--bandcamp:has(.rich-content-body:hover),
|
||||
[data-style="geocities"]
|
||||
.rich-content-card--soundcloud:has(.rich-content-body:hover) {
|
||||
box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .rich-content-badge {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Global player — neon console ────────────────────────────────── */
|
||||
[data-style="geocities"] .global-player {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-accent);
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .global-player-iframe-wrap,
|
||||
[data-style="geocities"] .global-player-media-wrap,
|
||||
[data-style="geocities"] .global-player .audio-player,
|
||||
[data-style="geocities"] .global-player .video-player {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .global-player .audio-player-btn {
|
||||
color: var(--color-on-accent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .global-player .audio-player-vol-btn,
|
||||
[data-style="geocities"] .global-player .btn--ghost {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ── File drop zone ──────────────────────────────────────────────── */
|
||||
[data-style="geocities"] .fdz {
|
||||
border-radius: 0;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
/* ── Pills / badges — squared, and the unread bits blink ─────────── */
|
||||
[data-style="geocities"] .notifications-unread-pill,
|
||||
[data-style="geocities"] .playlist-badge,
|
||||
[data-style="geocities"] .dump-card-private-badge,
|
||||
[data-style="geocities"] .notif-icon,
|
||||
[data-style="geocities"] .md code,
|
||||
[data-style="geocities"] .md pre,
|
||||
[data-style="geocities"] .error-card,
|
||||
[data-style="geocities"] .feed-tab {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .notification-badge {
|
||||
border-radius: 0;
|
||||
animation: geo-blink 1.1s step-start infinite;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .notif-dot,
|
||||
[data-style="geocities"] .unread-dot {
|
||||
border-radius: 0;
|
||||
animation: geo-blink 1.3s step-start infinite;
|
||||
}
|
||||
|
||||
/* ── Floating "new" affordance / FAB-style accents ───────────────── */
|
||||
[data-style="geocities"] .fdz__upload-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Casual web-1.0 voice: lowercase everything (code excepted) ──── */
|
||||
[data-style="geocities"],
|
||||
[data-style="geocities"] * {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
[data-style="geocities"] input,
|
||||
[data-style="geocities"] textarea,
|
||||
[data-style="geocities"] .md code,
|
||||
[data-style="geocities"] .md pre,
|
||||
[data-style="geocities"] .invite-url {
|
||||
text-transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user