Koko210/miku-discord
1
0
Fork 0
Code Issues 34 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive CSS breakpoints for mobile and tablet support

Browse Source 
- 1200px: Adjust panel widths to 55/45
- 1024px: Stack panels vertically, logs below main content
- 768px: Tab buttons flow into auto-fill grid rows
- 480px: Two-column tab grid, reduced padding for small screens
This commit is contained in:
koko210Serve
2026-02-28 23:48:23 +02:00
parent 191a368258
commit e0dc190710
1 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
bot/static/index.html
View File

@@ -596,6 +596,40 @@
background: #9932CC !important; background: #9932CC !important;
border-color: #9932CC !important; border-color: #9932CC !important;
} }
/* Responsive breakpoints */
@media (max-width: 1200px) {
.panel { width: 55%; padding: 1.5rem; }
.logs { width: 45%; }
}
@media (max-width: 1024px) {
body { flex-direction: column; }
.panel { width: 100%; padding: 1.5rem; }
.logs {
width: 100%;
height: 300px;
border-left: none;
border-top: 2px solid #333;
}
}
@media (max-width: 768px) {
.panel { padding: 1rem; }
.tab-buttons {
grid-template-rows: none;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.tab-button { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
}
@media (max-width: 480px) {
.panel { padding: 0.5rem; }
.tab-buttons { grid-template-columns: 1fr 1fr; }
.tab-button { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
h1 { font-size: 1.2rem; }
}
</style> </style>
</head> </head>
<body> <body>