CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Refactor button-container styles for improved layout and responsiveness

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-08 16:07:32 +01:00
parent 292fcfc389
commit 2bed81c1f8
1 changed files with 16 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
View File

@@ -766,41 +766,23 @@
} }
.button-container { .button-container {
top: calc(50% + 24vh) !important; top: calc(50% + 25vh);
left: 50% !important; left: 50%;
transform: translateX(-50%) !important; transform: translateX(-50%) scale(0.95);
width: 100vw !important; width: 95vw;
flex-wrap: nowrap !important; flex-wrap: nowrap;
justify-content: center !important; justify-content: center;
gap: 12px !important; gap: 10px;
padding: 0 10px !important;
box-sizing: border-box !important;
} }
.button-container button { .button-container button {
min-width: unset !important;
margin: 0 !important; margin: 0 !important;
flex-shrink: 1 !important; min-width: 0 !important;
height: 45px !important; flex-shrink: 1;
max-width: fit-content !important;
} }
.button-container .play-button, .button-container .detailButton {
.button-container .trailer-button { min-width: 0 !important;
padding: 8px 14px !important;
border-radius: 8px !important;
font-size: 16px !important;
}
.button-container .detail-button,
.button-container .favorite-button {
width: 45px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
} }
.logo { .logo {
@@ -830,23 +812,13 @@
@media (max-width: 400px) { @media (max-width: 400px) {
.button-container { .button-container {
gap: 6px !important; gap: 5px;
top: calc(50% + 26.5vh) !important;
} }
.button-container .play-button, .play-button,
.button-container .trailer-button { .trailer-button {
padding: 6px 10px !important; padding: 8px 10px;
font-size: 14px !important; font-size: 14px;
}
.button-container button {
height: 40px !important;
}
.button-container .detail-button,
.button-container .favorite-button {
width: 40px !important;
} }
} }
} }