thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-30 17:32:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add gradient overlay for channel banner

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-18 10:52:54 -04:00
1 parent c1a48ea5f3
commit cd966c28af
3 files changed
+17 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tokens.css
+13 -3
View File
@@ -17,7 +17,15 @@
--surface-overlay-strong: var(--color-overlay-strong);
--surface-overlay-darker: var(--color-overlay-darker);
--surface-overlay-black: var(--color-overlay-black);
--surface-overlay-banner: var(--color-overlay-banner);
--surface-overlay-banner: var(--surface-overlay-banner-bottom);
--surface-overlay-banner-bottom: var(--color-overlay-banner-bottom);
--surface-overlay-banner-transparent: var(--color-overlay-banner-transparent);
--surface-overlay-banner-gradient: linear-gradient(
to top,
var(--surface-overlay-banner-bottom) 0%,
var(--surface-overlay-banner-transparent) 30%,
var(--surface-overlay-banner-transparent) 100%
);
--surface-overlay-panel: var(--color-overlay-panel);
--surface-overlay-panel-soft: var(--color-overlay-panel-soft);
--surface-overlay-panel-tint: var(--color-overlay-panel-tint);
@@ -500,7 +508,8 @@
--color-modal-backdrop: rgb(15 23 42 / 0.28);
--color-modal-surface: rgb(255 255 255 / 0.94);
--color-overlay-veil: rgb(103 112 133 / 0.45);
--color-overlay-banner: rgb(214 219 232 / 0.6);
--color-overlay-banner-bottom: rgb(255 255 255 / 0.5);
--color-overlay-banner-transparent: rgb(255 255 255 / 0);
--color-overlay-backdrop: rgb(15 23 42 / 0.2);
--color-sidebar-surface: rgb(255 255 255 / 0.9);
@@ -651,7 +660,8 @@
--color-modal-backdrop: rgb(5 8 14 / 0.68);
--color-modal-surface: rgb(14 22 38 / 0.88);
--color-overlay-veil: rgb(4 6 12 / 0.94);
--color-overlay-banner: rgb(24 36 56 / 0.94);
--color-overlay-banner-bottom: rgb(0 0 0 / 0.5);
--color-overlay-banner-transparent: rgb(0 0 0 / 0);
--color-overlay-backdrop: rgb(5 8 14 / 0.75);
--color-sidebar-surface: rgb(12 18 30 / 0.94);
tailwind.config.cjs
+3 -2
View File
@@ -38,7 +38,6 @@ module.exports = {
strong: "var(--surface-overlay-strong)",
darker: "var(--surface-overlay-darker)",
veil: "var(--surface-veil)",
banner: "var(--surface-overlay-banner)",
panel: "var(--surface-overlay-panel)",
"panel-soft": "var(--surface-overlay-panel-soft)",
"panel-tint": "var(--surface-overlay-panel-tint)",
@@ -233,7 +232,6 @@ module.exports = {
"surface-muted": "var(--surface-muted)",
"overlay-strong": "var(--surface-overlay-strong)",
"overlay-muted": "var(--surface-overlay-muted)",
"overlay-banner": "var(--surface-overlay-banner)",
"overlay-panel": "var(--surface-overlay-panel)",
"overlay-panel-soft": "var(--surface-overlay-panel-soft)",
"overlay-panel-glass": "var(--surface-overlay-panel-glass)",
@@ -244,6 +242,9 @@ module.exports = {
"status-private-surface": "var(--status-private-surface)",
"status-neutral-surface": "var(--status-neutral-surface)"
},
backgroundImage: {
"overlay-banner": "var(--surface-overlay-banner-gradient)"
},
borderColor: {
surface: "var(--border-default)",
"surface-strong": "var(--border-strong)",
views/channel-profile.html
+1 -1
View File
@@ -11,7 +11,7 @@
referrerpolicy="no-referrer"
data-fallback-src="assets/jpg/bitvid.jpg"
/>
<div class="absolute inset-0 rounded-lg bg-overlay-banner"></div>
<div class="pointer-events-none absolute inset-0 rounded-lg bg-overlay-banner"></div>
<div
class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"