v3: added multiple stylesheets, improved user profiles
This commit is contained in:
khannurien
479
src/themes/brutalist.css
Normal file
479
src/themes/brutalist.css
Normal file
@@ -0,0 +1,479 @@
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Brutalist theme — pastel palette, hard edges, bold type
|
||||
Palette: Eggshell · Burnt Peach · Twilight Indigo · Muted Teal · Apricot Cream
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
:root[data-style="brutalist"] {
|
||||
--color-text: #f4f1de; /* Eggshell */
|
||||
--color-text-secondary: #c8c5b2;
|
||||
--color-text-muted: #8e8c80;
|
||||
--color-on-accent: #3d405b; /* Twilight Indigo on Apricot Cream */
|
||||
|
||||
--color-bg: #252838; /* darkened Twilight Indigo */
|
||||
--color-surface: #2e3145;
|
||||
|
||||
--color-border: #4a4e6a;
|
||||
--color-border-subtle: rgba(74, 78, 106, 0.4);
|
||||
|
||||
--color-accent: #f2cc8f; /* Apricot Cream */
|
||||
--color-accent-hover: #d4a860;
|
||||
|
||||
--color-link: #f2cc8f;
|
||||
--color-link-hover: #d4a860;
|
||||
|
||||
--color-danger: #e07a5f; /* Burnt Peach */
|
||||
--color-danger-bg: #3a1e18;
|
||||
--color-danger-hover: #c85a40;
|
||||
|
||||
--color-success: #81b29a; /* Muted Teal */
|
||||
--color-success-bg: #1a2e26;
|
||||
--color-success-hover: #5a9878;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(242, 204, 143, 0.07);
|
||||
--color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
|
||||
|
||||
--color-option-bg: #222436;
|
||||
--color-option-border: #252838;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="brutalist"]:not([data-color-scheme]) {
|
||||
--color-text: #3d405b; /* Twilight Indigo */
|
||||
--color-text-secondary: #5a5e80;
|
||||
--color-text-muted: #7a7e9a;
|
||||
--color-on-accent: #f4f1de; /* Eggshell on Burnt Peach */
|
||||
|
||||
--color-bg: #f4f1de; /* Eggshell */
|
||||
--color-surface: #f8f5e8;
|
||||
|
||||
--color-border: #8a8da8;
|
||||
--color-border-subtle: rgba(61, 64, 91, 0.25);
|
||||
|
||||
--color-accent: #e07a5f; /* Burnt Peach — visible against Eggshell */
|
||||
--color-accent-hover: #c05040;
|
||||
|
||||
--color-link: #b85a3a; /* darkened Burnt Peach for legibility */
|
||||
--color-link-hover: #943020;
|
||||
|
||||
--color-danger: #c04030;
|
||||
--color-danger-bg: #fae4e0;
|
||||
--color-danger-hover: #a02820;
|
||||
|
||||
--color-success: #3a7860;
|
||||
--color-success-bg: #e0f0ea;
|
||||
--color-success-hover: #286048;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.5);
|
||||
--color-header-user-bg: rgba(224, 122, 95, 0.08);
|
||||
--color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
|
||||
|
||||
--color-option-bg: #ede9d4;
|
||||
--color-option-border: #e0dcc8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="brutalist"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #f4f1de;
|
||||
--color-text-secondary: #c8c5b2;
|
||||
--color-text-muted: #8e8c80;
|
||||
--color-on-accent: #3d405b;
|
||||
--color-bg: #252838;
|
||||
--color-surface: #2e3145;
|
||||
--color-border: #4a4e6a;
|
||||
--color-border-subtle: rgba(74, 78, 106, 0.4);
|
||||
--color-accent: #f2cc8f;
|
||||
--color-accent-hover: #d4a860;
|
||||
--color-link: #f2cc8f;
|
||||
--color-link-hover: #d4a860;
|
||||
--color-danger: #e07a5f;
|
||||
--color-danger-bg: #3a1e18;
|
||||
--color-danger-hover: #c85a40;
|
||||
--color-success: #81b29a;
|
||||
--color-success-bg: #1a2e26;
|
||||
--color-success-hover: #5a9878;
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(242, 204, 143, 0.07);
|
||||
--color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
|
||||
--color-option-bg: #222436;
|
||||
--color-option-border: #252838;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="brutalist"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #3d405b;
|
||||
--color-text-secondary: #5a5e80;
|
||||
--color-text-muted: #7a7e9a;
|
||||
--color-on-accent: #f4f1de;
|
||||
--color-bg: #f4f1de;
|
||||
--color-surface: #f8f5e8;
|
||||
--color-border: #8a8da8;
|
||||
--color-border-subtle: rgba(61, 64, 91, 0.25);
|
||||
--color-accent: #e07a5f;
|
||||
--color-accent-hover: #c05040;
|
||||
--color-link: #b85a3a;
|
||||
--color-link-hover: #943020;
|
||||
--color-danger: #c04030;
|
||||
--color-danger-bg: #fae4e0;
|
||||
--color-danger-hover: #a02820;
|
||||
--color-success: #3a7860;
|
||||
--color-success-bg: #e0f0ea;
|
||||
--color-success-hover: #286048;
|
||||
--color-overlay: rgba(0, 0, 0, 0.5);
|
||||
--color-header-user-bg: rgba(224, 122, 95, 0.08);
|
||||
--color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
|
||||
--color-option-bg: #ede9d4;
|
||||
--color-option-border: #e0dcc8;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Structural overrides
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Typography ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] {
|
||||
font-family: "Space Grotesk", "Saira", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Only section-level headings get the uppercase treatment */
|
||||
[data-style="brutalist"] h1 {
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* ── Buttons — square corners, modest hard shadow ────────────────── */
|
||||
[data-style="brutalist"] button {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
font-weight: 700;
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease, border-color 0.1s;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] button:hover:not(:disabled) {
|
||||
border-color: var(--color-border);
|
||||
box-shadow: none;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* Ghost / icon-only buttons — keep borderless, no press effect */
|
||||
[data-style="brutalist"] .modal-close-btn,
|
||||
[data-style="brutalist"] .playlist-remove-btn,
|
||||
[data-style="brutalist"] .playlist-card-delete-btn,
|
||||
[data-style="brutalist"] .vote-btn,
|
||||
[data-style="brutalist"] .emoji-picker-float [frimousse-emoji],
|
||||
[data-style="brutalist"] .emoji-picker-close-btn,
|
||||
[data-style="brutalist"] .new-playlist-toggle,
|
||||
[data-style="brutalist"] .btn--ghost,
|
||||
[data-style="brutalist"] .audio-player-btn,
|
||||
[data-style="brutalist"] .audio-player-vol-btn,
|
||||
[data-style="brutalist"] .rich-content-thumbnail-btn {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .modal-close-btn:hover,
|
||||
[data-style="brutalist"] .playlist-remove-btn:hover,
|
||||
[data-style="brutalist"] .playlist-card-delete-btn:hover,
|
||||
[data-style="brutalist"] .vote-btn:hover:not(:disabled),
|
||||
[data-style="brutalist"] .emoji-picker-float [frimousse-emoji]:hover,
|
||||
[data-style="brutalist"] .emoji-picker-close-btn:hover,
|
||||
[data-style="brutalist"] .new-playlist-toggle:hover:not(:disabled),
|
||||
[data-style="brutalist"] .btn--ghost:hover:not(:disabled),
|
||||
[data-style="brutalist"] .audio-player-btn:hover:not(:disabled),
|
||||
[data-style="brutalist"] .audio-player-vol-btn:hover:not(:disabled),
|
||||
[data-style="brutalist"] .rich-content-thumbnail-btn:hover:not(:disabled) {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── Segmented controls / visibility-toggle ──────────────────────── */
|
||||
[data-style="brutalist"] .visibility-toggle {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .visibility-toggle button {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .visibility-toggle button:hover:not(:disabled) {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── Cards ───────────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .dump-card,
|
||||
[data-style="brutalist"] .playlist-card {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
transition:
|
||||
box-shadow 0.08s ease,
|
||||
transform 0.08s ease,
|
||||
border-color 0.1s,
|
||||
grid-template-rows 0.32s ease,
|
||||
opacity 0.25s ease,
|
||||
filter 0.3s ease;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .dump-card:hover,
|
||||
[data-style="brutalist"] .playlist-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 3px 3px 0 var(--color-accent);
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
|
||||
/* Don't shift cards that are animating out */
|
||||
[data-style="brutalist"] .dump-card--fading,
|
||||
[data-style="brutalist"] .dump-card--dismissing {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ── Dump post detail header ─────────────────────────────────────── */
|
||||
[data-style="brutalist"] .dump-post-header {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
}
|
||||
|
||||
/* ── App header ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .app-header {
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .app-header-user {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.1s;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .app-header-user:hover {
|
||||
box-shadow: none;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* ── Inputs / textareas ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"]
|
||||
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
|
||||
[type="radio"]
|
||||
),
|
||||
[data-style="brutalist"] textarea {
|
||||
border-radius: 0 !important;
|
||||
border-width: 2px !important;
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .dump-form input:focus,
|
||||
[data-style="brutalist"] .dump-form textarea:focus,
|
||||
[data-style="brutalist"] .auth-form input:focus,
|
||||
[data-style="brutalist"] .auth-form textarea:focus,
|
||||
[data-style="brutalist"] .mention-textarea-wrap textarea:focus {
|
||||
box-shadow: 2px 2px 0 var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── Search bar ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .search-bar-input,
|
||||
[data-style="brutalist"] .search-bar-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Modals ──────────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .modal-card,
|
||||
[data-style="brutalist"] .confirm-modal {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 4px 4px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .modal-header {
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ── Section headings ────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .profile-section > h2,
|
||||
[data-style="brutalist"] .profile-section-header,
|
||||
[data-style="brutalist"] .comment-section-title {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .profile-section > h2,
|
||||
[data-style="brutalist"] .profile-section-header {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
/* ── Avatars — square ────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .avatar-img,
|
||||
[data-style="brutalist"] .avatar-initials {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .avatar-change-overlay {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Rich content cards ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .rich-content-card {
|
||||
border-radius: 0;
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
}
|
||||
|
||||
/* Neutralise provider brand border-colors so they don't fight the hard shadow */
|
||||
[data-style="brutalist"] .rich-content-card--youtube,
|
||||
[data-style="brutalist"] .rich-content-card--bandcamp,
|
||||
[data-style="brutalist"] .rich-content-card--soundcloud {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"]
|
||||
.rich-content-card--youtube:has(.rich-content-body:hover),
|
||||
[data-style="brutalist"]
|
||||
.rich-content-card--bandcamp:has(.rich-content-body:hover),
|
||||
[data-style="brutalist"]
|
||||
.rich-content-card--soundcloud:has(.rich-content-body:hover) {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 3px 3px 0 var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── File drop zone ──────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .fdz {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Global persistent player ────────────────────────────────────── */
|
||||
[data-style="brutalist"] .global-player {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 0 0 0 2px var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player-iframe-wrap,
|
||||
[data-style="brutalist"] .global-player-media-wrap,
|
||||
[data-style="brutalist"] .global-player .audio-player,
|
||||
[data-style="brutalist"] .global-player .video-player {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player .audio-player-btn {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player .audio-player-btn:hover {
|
||||
background: var(--color-border-subtle);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player .audio-player-vol-btn {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player .btn--ghost {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ── Notification items ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .notification-item {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notifications-unread-pill {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notif-dot {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notif-icon {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Notification badge ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .notification-badge {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Markdown code ───────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .md code,
|
||||
[data-style="brutalist"] .md pre {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── User result items (search) ──────────────────────────────────── */
|
||||
[data-style="brutalist"] .user-result-item {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease, border-color 0.1s;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .user-result-item:hover {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 2px 2px 0 var(--color-accent);
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
|
||||
/* ── Feed tab bar ────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .feed-tab {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── btn-primary ─────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .btn-primary {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .btn-primary:hover:not(:disabled) {
|
||||
box-shadow: none;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .btn-primary:active {
|
||||
box-shadow: none;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* ── btn-border ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .btn-border,
|
||||
[data-style="brutalist"] .btn-border-danger,
|
||||
[data-style="brutalist"] .btn-border-success {
|
||||
border-radius: 0;
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .btn-border:hover,
|
||||
[data-style="brutalist"] .btn-border-danger:hover,
|
||||
[data-style="brutalist"] .btn-border-success:hover {
|
||||
box-shadow: none;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* ── Comment actions ─────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .comment-submit-btn,
|
||||
[data-style="brutalist"] .comment-action-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Error card ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .error-card {
|
||||
border-radius: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user