thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-31 09:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Themed action buttons for video controls

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-18 09:44:16 -04:00
1 parent fa2f5c78f3
commit 095c90d728
5 files changed
+79 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+22 -11
View File
@@ -1548,8 +1548,11 @@
}
.video-modal__action-button {
@apply inline-flex h-11 items-center justify-center gap-2 rounded-full border border-border border-opacity-30 bg-panel px-3 text-sm font-semibold text-text transition duration-base ease-out hover:bg-panel-hover;
@apply inline-flex h-11 items-center justify-center gap-2 rounded-full text-sm font-semibold transition duration-base ease-out;
min-width: var(--video-modal-action-min-width);
padding-inline: var(--space-md);
border-width: 1px;
border-style: solid;
}
.video-modal__action-label {
@@ -2011,52 +2014,60 @@
pointer-events: none;
}
.accent-action-button,
.channel-action-button {
--channel-action-bg: color-mix(
--accent-action-bg: color-mix(
in srgb,
var(--surface-overlay-panel) 78%,
transparent
);
--channel-action-border: color-mix(
--accent-action-border: color-mix(
in srgb,
var(--border-overlay) 92%,
transparent
);
--channel-action-bg-hover: color-mix(
--accent-action-bg-hover: color-mix(
in srgb,
var(--color-accent) 22%,
var(--surface-overlay-panel)
);
--channel-action-ring: color-mix(
--accent-action-ring: color-mix(
in srgb,
var(--color-accent) 48%,
transparent
);
--channel-action-bg-active: color-mix(
--accent-action-bg-active: color-mix(
in srgb,
var(--color-accent-pressed) 28%,
var(--surface-overlay-panel)
);
color: var(--color-text);
background-color: var(--channel-action-bg);
border: 1px solid var(--channel-action-border);
background-color: var(--accent-action-bg);
border-color: var(--accent-action-border);
border-style: solid;
border-width: 1px;
}
.accent-action-button:hover,
.accent-action-button:focus-visible,
.channel-action-button:hover,
.channel-action-button:focus-visible {
color: var(--color-accent-strong);
background-color: var(--channel-action-bg-hover);
background-color: var(--accent-action-bg-hover);
}
.accent-action-button:focus,
.accent-action-button:focus-visible,
.channel-action-button:focus,
.channel-action-button:focus-visible {
box-shadow: 0 0 0 var(--icon-button-ring-width) var(--channel-action-ring);
box-shadow: 0 0 0 var(--icon-button-ring-width) var(--accent-action-ring);
}
.accent-action-button:active,
.channel-action-button:active {
color: var(--color-accent-pressed);
background-color: var(--channel-action-bg-active);
background-color: var(--accent-action-bg-active);
}
.modal-nav .icon-button {