pavel/discord
1
0
Fork 0
Code Issues Pull requests Projects Releases 60 Packages Wiki Activity Actions

fix: mobile
All checks were successful
/ upload (release) Successful in 22s
Details

Browse source
This commit is contained in:
pavel 2026-02-13 19:26:21 +01:00
commit b353deffbb
3 changed files with 166 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

87
static/styles.css
View file

@ -515,12 +515,93 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
.radio-text strong { font-size: 16px; }
.radio-text span { font-size: 12px; color: var(--text-muted); }
/* Mobile Overlay */
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 90;
opacity: 1;
transition: opacity 0.2s ease;
}
.overlay.hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
/* Mobile Toggle Buttons */
.mobile-toggle-btn {
display: none;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
color: var(--text-normal);
background: transparent;
margin-right: 8px;
}
.mobile-toggle-btn:hover {
background: var(--bg-modifier-hover);
border-radius: 4px;
}
@media (max-width: 1100px) {
.shell { grid-template-columns: 72px 240px 1fr; }
.utility-sidebar { display: none; }
.utility-sidebar {
position: fixed;
top: 0; bottom: 0; right: 0;
width: 240px;
z-index: 100;
box-shadow: -2px 0 10px rgba(0,0,0,0.5);
transform: translateX(100%);
transition: transform 0.2s ease;
}
.utility-sidebar.active {
transform: translateX(0);
display: flex;
}
.chat-header .mobile-toggle-btn { display: flex; }
}
@media (max-width: 768px) {
.shell { grid-template-columns: 72px 1fr; }
.channel-sidebar { display: none; }
.shell {
grid-template-columns: 1fr;
}
/* Hide sidebars by default on mobile */
.server-rail, .channel-sidebar {
position: fixed;
top: 0; bottom: 0;
z-index: 100;
transition: transform 0.2s ease;
}
.server-rail {
left: 0;
width: 72px;
transform: translateX(-100%);
}
.channel-sidebar {
left: 72px;
width: 240px;
transform: translateX(-312px); /* 72 + 240 */
box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
/* When menu is active */
.shell.menu-open .server-rail {
transform: translateX(0);
}
.shell.menu-open .channel-sidebar {
transform: translateX(0);
display: flex; /* Override display: none from previous rule */
}
/* Adjust chat header for mobile */
.chat-header {
padding: 0 8px;
}
}