vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: minor visual fixes
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 42s
Details

Browse Source
This commit is contained in:
khannurien
2026-06-27 20:10:55 +00:00
parent c29f45fbc8
commit bcbb8f5583
8 changed files with 75 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.css
View File

@@ -3229,7 +3229,7 @@ body.has-fab .page-content {
} }
/* ── Inline new-playlist form ── */ /* ── Inline new-playlist form ── */
.modal-new-playlist-toggle { .modal-new-item-toggle {
background: none; background: none;
border: 1px dashed var(--color-border-subtle); border: 1px dashed var(--color-border-subtle);
border-radius: 8px; border-radius: 8px;
@@ -3242,7 +3242,7 @@ body.has-fab .page-content {
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.modal-new-playlist-toggle:hover { .modal-new-item-toggle:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 8%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent);
} }
@@ -3463,7 +3463,7 @@ body.has-fab .page-content {
} }
/* ── New playlist toggle (profile page header) ── */ /* ── New playlist toggle (profile page header) ── */
.new-playlist-toggle { .new-item-toggle {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -3474,7 +3474,7 @@ body.has-fab .page-content {
white-space: nowrap; white-space: nowrap;
} }
.new-playlist-toggle:hover { .new-item-toggle:hover {
opacity: 0.75; opacity: 0.75;
} }

2
src/components/NewPlaylistForm.tsx
View File

@@ -15,7 +15,7 @@ export function NewPlaylistForm(
{ {
onCreated, onCreated,
toggleLabel, toggleLabel,
toggleClassName = "new-playlist-toggle", toggleClassName = "new-item-toggle",
}: NewPlaylistFormProps, }: NewPlaylistFormProps,
) { ) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

2
src/components/PlaylistMembershipPanel.tsx
View File

@@ -74,7 +74,7 @@ export function PlaylistMembershipPanel({
: ( : (
<button <button
type="button" type="button"
className="modal-new-playlist-toggle" className="modal-new-item-toggle"
onClick={() => setShowNewForm(true)} onClick={() => setShowNewForm(true)}
> >
<Trans>+ New playlist</Trans> <Trans>+ New playlist</Trans>

2
src/pages/UserDumps.tsx
View File

@@ -108,7 +108,7 @@ export function UserDumps() {
actions={isOwnProfile && ( actions={isOwnProfile && (
<button <button
type="button" type="button"
className="new-playlist-toggle" className="new-item-toggle"
onClick={() => setCreateModalOpen(true)} onClick={() => setCreateModalOpen(true)}
> >
+<span className="btn-new-label"> +<span className="btn-new-label">

2
src/pages/UserPublicProfile.tsx
View File

@@ -1260,7 +1260,7 @@ function DumpList(
{isOwnProfile && ( {isOwnProfile && (
<button <button
type="button" type="button"
className="new-playlist-toggle" className="new-item-toggle"
onClick={() => setCreateModalOpen(true)} onClick={() => setCreateModalOpen(true)}
> >
+<span className="btn-new-label"> +<span className="btn-new-label">

16
src/themes/brutalist.css
View File

@@ -176,7 +176,7 @@
[data-style="brutalist"] .vote-btn, [data-style="brutalist"] .vote-btn,
[data-style="brutalist"] .emoji-picker-float [frimousse-emoji], [data-style="brutalist"] .emoji-picker-float [frimousse-emoji],
[data-style="brutalist"] .emoji-picker-close-btn, [data-style="brutalist"] .emoji-picker-close-btn,
[data-style="brutalist"] .new-playlist-toggle, [data-style="brutalist"] .new-item-toggle,
[data-style="brutalist"] .btn--ghost, [data-style="brutalist"] .btn--ghost,
[data-style="brutalist"] .audio-player-btn, [data-style="brutalist"] .audio-player-btn,
[data-style="brutalist"] .audio-player-vol-btn, [data-style="brutalist"] .audio-player-vol-btn,
@@ -186,8 +186,8 @@
[data-style="brutalist"] .auth-link-btn, [data-style="brutalist"] .auth-link-btn,
[data-style="brutalist"] .form-cancel, [data-style="brutalist"] .form-cancel,
[data-style="brutalist"] .form-label-action { [data-style="brutalist"] .form-label-action {
border: none; border: none !important;
box-shadow: none; box-shadow: none !important;
} }
[data-style="brutalist"] .user-menu-trigger:hover:not(:disabled), [data-style="brutalist"] .user-menu-trigger:hover:not(:disabled),
@@ -200,8 +200,8 @@
[data-style="brutalist"] .form-cancel:active, [data-style="brutalist"] .form-cancel:active,
[data-style="brutalist"] .form-label-action:hover:not(:disabled), [data-style="brutalist"] .form-label-action:hover:not(:disabled),
[data-style="brutalist"] .form-label-action:active { [data-style="brutalist"] .form-label-action:active {
transform: none; transform: none !important;
box-shadow: none; box-shadow: none !important;
} }
[data-style="brutalist"] .modal-close-btn:hover, [data-style="brutalist"] .modal-close-btn:hover,
@@ -210,13 +210,13 @@
[data-style="brutalist"] .vote-btn:hover:not(:disabled), [data-style="brutalist"] .vote-btn:hover:not(:disabled),
[data-style="brutalist"] .emoji-picker-float [frimousse-emoji]:hover, [data-style="brutalist"] .emoji-picker-float [frimousse-emoji]:hover,
[data-style="brutalist"] .emoji-picker-close-btn:hover, [data-style="brutalist"] .emoji-picker-close-btn:hover,
[data-style="brutalist"] .new-playlist-toggle:hover:not(:disabled), [data-style="brutalist"] .new-item-toggle:hover:not(:disabled),
[data-style="brutalist"] .btn--ghost: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-btn:hover:not(:disabled),
[data-style="brutalist"] .audio-player-vol-btn:hover:not(:disabled), [data-style="brutalist"] .audio-player-vol-btn:hover:not(:disabled),
[data-style="brutalist"] .rich-content-thumbnail-btn:hover:not(:disabled) { [data-style="brutalist"] .rich-content-thumbnail-btn:hover:not(:disabled) {
transform: none; transform: none !important;
box-shadow: none; box-shadow: none !important;
} }
/* ── Segmented controls / visibility-toggle ──────────────────────── */ /* ── Segmented controls / visibility-toggle ──────────────────────── */

6
src/themes/geocities.css
View File

@@ -302,8 +302,8 @@
[data-style="geocities"] .playlist-card-delete-btn, [data-style="geocities"] .playlist-card-delete-btn,
[data-style="geocities"] .emoji-picker-float [frimousse-emoji], [data-style="geocities"] .emoji-picker-float [frimousse-emoji],
[data-style="geocities"] .emoji-picker-close-btn, [data-style="geocities"] .emoji-picker-close-btn,
[data-style="geocities"] .new-playlist-toggle,
[data-style="geocities"] .btn--ghost, [data-style="geocities"] .btn--ghost,
[data-style="geocities"] .new-item-toggle,
[data-style="geocities"] .audio-player-btn, [data-style="geocities"] .audio-player-btn,
[data-style="geocities"] .audio-player-vol-btn, [data-style="geocities"] .audio-player-vol-btn,
[data-style="geocities"] .rich-content-thumbnail-btn, [data-style="geocities"] .rich-content-thumbnail-btn,
@@ -312,8 +312,8 @@
[data-style="geocities"] .auth-link-btn, [data-style="geocities"] .auth-link-btn,
[data-style="geocities"] .form-cancel, [data-style="geocities"] .form-cancel,
[data-style="geocities"] .form-label-action { [data-style="geocities"] .form-label-action {
border: none; border: none !important;
box-shadow: none; box-shadow: none !important;
} }
/* ── Segmented controls ──────────────────────────────────────────── */ /* ── Segmented controls ──────────────────────────────────────────── */

100
src/themes/smooth.css
View File

@@ -77,37 +77,37 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root:not([data-style]), :root:not([data-style]),
:root[data-style="smooth"]:not([data-color-scheme]) { :root[data-style="smooth"]:not([data-color-scheme]) {
--color-text: #001427; /* Prussian Blue */ --color-text: #0e3a42; /* darkened deep teal */
--color-text-secondary: #3a5a70; --color-text-secondary: #2c6671;
--color-text-muted: #6a8898; --color-text-muted: #5c8a91;
--color-on-accent: #ffffff; --color-on-accent: #fef8e6; /* cream on teal */
--color-bg: #f0f4f8; --color-bg: #fef8e6; /* cream */
--color-surface: #ffffff; --color-surface: #fffdf6;
--color-border: transparent; --color-border: transparent;
--color-border-subtle: rgba(0, 20, 39, 0.12); --color-border-subtle: rgba(48, 144, 161, 0.18);
--color-accent: #bf0603; /* Brick Ember — pops on light bg */ --color-accent: #bc5148; /* terracotta — pops on cream bg */
--color-accent-hover: #8d0801; --color-accent-hover: #97392f;
--color-link: #bf0603; --color-link: #bc5148;
--color-link-hover: #8d0801; --color-link-hover: #97392f;
--color-danger: #bf0603; --color-danger: #bc5148; /* terracotta */
--color-danger-bg: #fde8e8; --color-danger-bg: #f8e3e0;
--color-danger-hover: #8d0801; --color-danger-hover: #97392f;
--color-success: #4a6e60; /* darkened Deep Teal */ --color-success: #2e8a86; /* darkened light teal */
--color-success-bg: #e0ede8; --color-success-bg: #ddf2f1;
--color-success-hover: #2e5448; --color-success-hover: #1f6b67;
--color-overlay: rgba(0, 10, 20, 0.4); --color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(0, 20, 39, 0.07); --color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(0, 20, 39, 0.13); --color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #f5f7fa; --color-option-bg: #fff9ec;
--color-option-border: #dde3ea; --color-option-border: #ece4cc;
} }
} }
@@ -144,27 +144,39 @@
:root:not([data-style])[data-color-scheme="light"], :root:not([data-style])[data-color-scheme="light"],
:root[data-style="smooth"][data-color-scheme="light"] { :root[data-style="smooth"][data-color-scheme="light"] {
color-scheme: light; color-scheme: light;
--color-text: #001427; --color-text: #0e3a42;
--color-text-secondary: #3a5a70; --color-text-secondary: #2c6671;
--color-text-muted: #6a8898; --color-text-muted: #5c8a91;
--color-on-accent: #ffffff; --color-on-accent: #fef8e6;
--color-bg: #f0f4f8; --color-bg: #fef8e6;
--color-surface: #ffffff; --color-surface: #fffdf6;
--color-border: transparent; --color-border: transparent;
--color-border-subtle: rgba(0, 20, 39, 0.12); --color-border-subtle: rgba(48, 144, 161, 0.18);
--color-accent: #bf0603; --color-accent: #bc5148;
--color-accent-hover: #8d0801; --color-accent-hover: #97392f;
--color-link: #bf0603; --color-link: #bc5148;
--color-link-hover: #8d0801; --color-link-hover: #97392f;
--color-danger: #bf0603; --color-danger: #bc5148;
--color-danger-bg: #fde8e8; --color-danger-bg: #f8e3e0;
--color-danger-hover: #8d0801; --color-danger-hover: #97392f;
--color-success: #4a6e60; --color-success: #2e8a86;
--color-success-bg: #e0ede8; --color-success-bg: #ddf2f1;
--color-success-hover: #2e5448; --color-success-hover: #1f6b67;
--color-overlay: rgba(0, 10, 20, 0.4); --color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(0, 20, 39, 0.07); --color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(0, 20, 39, 0.13); --color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #f5f7fa; --color-option-bg: #fff9ec;
--color-option-border: #dde3ea; --color-option-border: #ece4cc;
}
/* ══════════════════════════════════════════════════════════════════════
Structural overrides
══════════════════════════════════════════════════════════════════════ */
/* On hover the danger button fills with the solid dark danger colour. The
resting text colour is --color-text, which is dark in the light variant,
so force white on hover to keep it legible. */
:root:not([data-style]) .btn-danger:hover,
:root[data-style="smooth"] .btn-danger:hover {
color: #fff;
} }