DonaldFang 方士碩
8902f25f6e
- 建立 styles 目錄 - 分離 CSS 為 5 個模組： * base.css - CSS 變數、Reset、全域樣式 * layout.css - 容器、Header、模組切換器 * components.css - 按鈕、表單、卡片、Toast、Modal * modules.css - 模組專屬樣式（預留） * utilities.css - 工具類別與響應式設計 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
57 lines
1.1 KiB
CSS
57 lines
1.1 KiB
CSS
/**
|
|
* Utilities Styles - 工具類別與響應式設計
|
|
* 包含快速工具類別、響應式斷點
|
|
*/
|
|
|
|
/* ==================== Utility Classes ==================== */
|
|
/* (可按需添加工具類別，如 .mt-1, .text-center 等) */
|
|
|
|
/* ==================== Responsive Design ==================== */
|
|
@media (max-width: 768px) {
|
|
/* Form Grid */
|
|
.form-grid,
|
|
.form-grid.three-cols {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Form Actions */
|
|
.form-actions {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.action-buttons {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Module Selector */
|
|
.module-selector {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.module-btn {
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* User Info Bar */
|
|
.user-info-bar {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-info {
|
|
justify-content: center;
|
|
}
|
|
|
|
.logout-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|