thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-06 21:02:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine player modal styles

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-13 20:32:44 -04:00
1 parent b18e87a20d
commit 22995594a5
2 files changed
+97 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+80
View File
@@ -877,6 +877,86 @@
padding-inline: clamp(1rem, 3vw, 2rem);
}
#playerModal .modal-info-panel {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#playerModal h2#videoTitle {
margin: 0;
font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.875rem);
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
}
#playerModal .modal-meta {
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-text-muted);
}
#playerModal .modal-view-count {
font-weight: 600;
color: var(--color-text);
}
#playerModal .channel-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-radius: 1rem;
border: 1px solid var(--color-border-translucent);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
#playerModal .channel-card__avatar {
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: 9999px;
overflow: hidden;
background-color: var(--color-border-subtle);
}
#playerModal .channel-card__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#playerModal .channel-card__name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
}
#playerModal .channel-card__npub {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-muted);
}
#playerModal .description-panel {
padding: 1.25rem 1.5rem;
border-radius: 1rem;
border: 1px solid var(--color-border-translucent);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
#playerModal .description-panel p {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-text);
}
.player-modal__content {
@apply video-modal__panel;
}