.hsfb-wrapper {
height: 100vh !important;
overflow: auto !important;
display: flex !important;
position: relative !important;
background: #111;
color: #fff;
} #filebrowser-container {
display: flex;
width: 100%;
height: calc(100vh - 60px);
border: 1px solid #333;
background: #111;
color: #fff;
overflow: auto;
position: relative;
padding: 10px;
} #filebrowser-list {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow-y: auto !important;
} #filebrowser-preview {
width: 320px;
max-width: 35%;
padding-left: 15px;
border-left: 1px solid #333;
overflow-y: auto;
position: sticky;
top: 0;
height: 100vh;
background: #111;
} .file-item {
display: flex;
align-items: center;
padding: 8px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 4px;
}
.file-item:hover {
background: #222;
}
.file-icon {
width: 48px;
height: 48px;
margin-right: 12px;
} #preview-inner {
text-align: center;
}
#preview-thumbnail img {
max-width: 100%;
max-height: 200px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 15px;
}
#preview-meta {
text-align: left;
font-size: 14px;
color: #ddd;
}
.meta-row {
margin-bottom: 8px;
}
#meta-extra {
margin-top: 15px;
color: #aaa;
font-size: 13px;
} .hsfb-download-button {
display: inline-block;
padding: 8px 12px;
background: #0073aa;
color: white;
border-radius: 4px;
text-decoration: none;
}
.hsfb-download-button:hover {
background: #005f8d;
color: black;
}
#hsfb-upload-form {
margin-bottom: 10px;
}
.hsfb-upload-button {
padding: 6px 12px;
background: #28a745;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
}
.hsfb-upload-button:hover {
background: #218838;
color: black;
}
#hsfb-newfolder-button {
background: #444 !important;
margin-bottom: 10px;
}
#hsfb-newfolder-button:hover {
background: #555 !important;
}
.hsfb-stream-button {
display: inline-block;
background: #0073aa;
color: white;
padding: 8px 14px;
border-radius: 4px;
text-decoration: none;
border: none;
cursor: pointer;
margin-top: 8px;
font-size: 14px;
}
.hsfb-stream-button:hover {
background: #006799;
color: black;
}
.hsfb-delete-button {
display: inline-block;
padding: 8px 12px;
background: #cc0000;
color: white;
border-radius: 4px;
text-decoration: none;
margin-top: 5px;
}
.hsfb-delete-button:hover {
background: #990000;
color: black;
} .hsfb-audio-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.75);
z-index: 999998;
display: flex;
align-items: center;
justify-content: center;
animation: hsfb-fadein 0.2s ease-out;
}
.hsfb-audio-box {
background: #111;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 0 25px rgba(0,0,0,0.6);
min-width: 320px;
max-width: 90%;
text-align: center;
animation: hsfb-popin 0.15s ease-out;
}
.hsfb-audio-box audio {
width: 100%;
outline: none;
} @keyframes hsfb-fadein {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes hsfb-popin {
from { transform: scale(0.9); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
} #filebrowser-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
padding: 10px;
}
.plex-item {
background: #222;
border-radius: 6px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: transform 0.15s ease;
}
.plex-item:hover {
transform: scale(1.05);
}
.plex-thumb {
width: 100%;
height: 200px; object-fit: cover; border-radius: 4px;
}
.plex-title {
margin-top: 8px;
font-size: 14px;
color: #ddd;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}