gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-09 02:39:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: Fix Host Control mockup to use the actual 'Only I can control playback' toggle switch

Browse Source
This commit is contained in:
KoalaDev
2026-07-03 11:15:32 +02:00
parent ae3b837bb4
commit 23aa0c8a15
17 changed files with 116 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+49 -32
View File
@@ -3815,45 +3815,62 @@ header[id] {
font-weight: 700;
}
.bento-mockup-options {
display: flex;
gap: 0.5rem;
width: 100%;
}
.bento-option {
flex: 1;
.bento-mockup-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
color: var(--text-muted);
transition: all 0.25s ease;
white-space: nowrap;
}
.bento-option.active {
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.35);
justify-content: space-between;
gap: 12px;
font-size: 0.75rem;
color: white;
box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
font-weight: 600;
margin-top: 2px;
}
.bento-option .option-dot {
width: 6px;
height: 6px;
/* Custom switch toggle representation */
.bento-switch-wrap {
position: relative;
display: inline-block;
width: 28px;
height: 16px;
flex-shrink: 0;
}
.bento-switch-wrap input {
opacity: 0;
width: 0;
height: 0;
}
.bento-switch-slider {
position: absolute;
cursor: default;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
transition: .3s;
}
.bento-switch-slider:before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 2px;
bottom: 2px;
background-color: #94a3b8;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transition: background 0.25s ease;
transition: .3s;
}
.bento-option.active .option-dot {
background: var(--accent);
.bento-switch-wrap input:checked + .bento-switch-slider {
background-color: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.6);
box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}
.bento-switch-wrap input:checked + .bento-switch-slider:before {
transform: translateX(12px);
background-color: var(--accent);
box-shadow: 0 0 6px var(--accent-glow);
}