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 ── */
.modal-new-playlist-toggle {
.modal-new-item-toggle {
background: none;
border: 1px dashed var(--color-border-subtle);
border-radius: 8px;
@@ -3242,7 +3242,7 @@ body.has-fab .page-content {
transition: border-color 0.15s, background 0.15s;
}
.modal-new-playlist-toggle:hover {
.modal-new-item-toggle:hover {
border-color: var(--color-accent);
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 {
.new-item-toggle {
background: none;
border: none;
cursor: pointer;
@@ -3474,7 +3474,7 @@ body.has-fab .page-content {
white-space: nowrap;
}
.new-playlist-toggle:hover {
.new-item-toggle:hover {
opacity: 0.75;
}

2
src/components/NewPlaylistForm.tsx
View File

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

2
src/components/PlaylistMembershipPanel.tsx
View File

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

2
src/pages/UserDumps.tsx
View File

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

2
src/pages/UserPublicProfile.tsx
View File

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

16
src/themes/brutalist.css
View File

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

100
src/themes/smooth.css
View File

@@ -77,37 +77,37 @@
@media (prefers-color-scheme: light) {
:root:not([data-style]),
:root[data-style="smooth"]:not([data-color-scheme]) {
--color-text: #001427; /* Prussian Blue */
--color-text-secondary: #3a5a70;
--color-text-muted: #6a8898;
--color-on-accent: #ffffff;
--color-text: #0e3a42; /* darkened deep teal */
--color-text-secondary: #2c6671;
--color-text-muted: #5c8a91;
--color-on-accent: #fef8e6; /* cream on teal */
--color-bg: #f0f4f8;
--color-surface: #ffffff;
--color-bg: #fef8e6; /* cream */
--color-surface: #fffdf6;
--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-hover: #8d0801;
--color-accent: #bc5148; /* terracotta — pops on cream bg */
--color-accent-hover: #97392f;
--color-link: #bf0603;
--color-link-hover: #8d0801;
--color-link: #bc5148;
--color-link-hover: #97392f;
--color-danger: #bf0603;
--color-danger-bg: #fde8e8;
--color-danger-hover: #8d0801;
--color-danger: #bc5148; /* terracotta */
--color-danger-bg: #f8e3e0;
--color-danger-hover: #97392f;
--color-success: #4a6e60; /* darkened Deep Teal */
--color-success-bg: #e0ede8;
--color-success-hover: #2e5448;
--color-success: #2e8a86; /* darkened light teal */
--color-success-bg: #ddf2f1;
--color-success-hover: #1f6b67;
--color-overlay: rgba(0, 10, 20, 0.4);
--color-header-user-bg: rgba(0, 20, 39, 0.07);
--color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
--color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #f5f7fa;
--color-option-border: #dde3ea;
--color-option-bg: #fff9ec;
--color-option-border: #ece4cc;
}
}
@@ -144,27 +144,39 @@
:root:not([data-style])[data-color-scheme="light"],
:root[data-style="smooth"][data-color-scheme="light"] {
color-scheme: light;
--color-text: #001427;
--color-text-secondary: #3a5a70;
--color-text-muted: #6a8898;
--color-on-accent: #ffffff;
--color-bg: #f0f4f8;
--color-surface: #ffffff;
--color-text: #0e3a42;
--color-text-secondary: #2c6671;
--color-text-muted: #5c8a91;
--color-on-accent: #fef8e6;
--color-bg: #fef8e6;
--color-surface: #fffdf6;
--color-border: transparent;
--color-border-subtle: rgba(0, 20, 39, 0.12);
--color-accent: #bf0603;
--color-accent-hover: #8d0801;
--color-link: #bf0603;
--color-link-hover: #8d0801;
--color-danger: #bf0603;
--color-danger-bg: #fde8e8;
--color-danger-hover: #8d0801;
--color-success: #4a6e60;
--color-success-bg: #e0ede8;
--color-success-hover: #2e5448;
--color-overlay: rgba(0, 10, 20, 0.4);
--color-header-user-bg: rgba(0, 20, 39, 0.07);
--color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
--color-option-bg: #f5f7fa;
--color-option-border: #dde3ea;
--color-border-subtle: rgba(48, 144, 161, 0.18);
--color-accent: #bc5148;
--color-accent-hover: #97392f;
--color-link: #bc5148;
--color-link-hover: #97392f;
--color-danger: #bc5148;
--color-danger-bg: #f8e3e0;
--color-danger-hover: #97392f;
--color-success: #2e8a86;
--color-success-bg: #ddf2f1;
--color-success-hover: #1f6b67;
--color-overlay: rgba(14, 58, 66, 0.35);
--color-header-user-bg: rgba(188, 81, 72, 0.08);
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
--color-option-bg: #fff9ec;
--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;
}