[Feature request] Добавление отдельной темы для OpenWRT #16
Description
Подробно опишите проблему
Сейчас эти кислотно-синие оттенки на фоне серо-чёрного LuCI выглядят как инородный элемент, даже глазам больно
Какое решение вы предлагаете?
Я тут на коленке набросал стиль - пока применяю его через nginx поверх стокового:
/* === 1. Глобальные, Текст и Выделение === */
html, body { background: #222 !important; color: #e0e0e0 !important; }
::selection, ::-moz-selection { background: #4a9eff !important; color: #eff5fb !important; }
/* Общий светлый текст для всех компонентов */
.MuiTypography-root, .MuiInputBase-input, .MuiMenuItem-root, .MuiFormLabel-root,
.cm-content, .cm-editor, .MuiPaper-root, .MuiCard-root, .MuiDialog-paper,
.MuiMenu-list, .MuiMenu-paper, .MuiBox-root:has(> .MuiBox-root > .MuiStack-root) {
color: #e0e0e0 !important;
}
/* === 2. Шапка, Футер и Панели === */
.MuiBox-root:has(> .MuiBox-root > .MuiStack-root), .MuiBox-root > .MuiBox-root:has(> .MuiStack-root),
.MuiMenu-list, .MuiMenu-paper { background: #1a1a1a !important; border: none !important; }
.MuiBox-root:has(> .MuiBox-root > .MuiStack-root) a { color: #bfbfbf !important; text-decoration: none !important; }
.MuiPaper-root, .MuiCard-root, .cm-lineNumbers, .cm-foldGutter, .cm-gutters { background: #2a2a2a !important; }
/* === 3. Вкладки (Tabs) === */
.MuiTab-root { background: #222 !important; color: #aaa !important; transition: 0.2s !important; }
.MuiTab-root:hover { background: #2a2a2a !important; color: #fff !important; }
.MuiTab-root.Mui-selected { background: #1a1a1a !important; }
.MuiTab-root.Mui-selected, .MuiTab-root.MuiTab-textColorPrimary.Mui-selected,
.MuiTab-root.Mui-selected :not(svg):not(path) { color: #ccc !important; }
.MuiTabs-indicator { background: #ccc !important; }
/* === 4. Редактор кода (CodeMirror) === */
.cm-line:nth-child(odd) { background: #282828 !important; }
.cm-line:nth-child(even), .MuiDialog-paper { background: #222 !important; }
.cm-content, .cm-editor { background: transparent !important; }
.cm-lineNumbers, .cm-foldGutter, .cm-gutters { color: #aaa !important; border-right: 1px solid #444 !important; }
/* === 5. Окно входа (Стиль OpenWRT) === */
.MuiDialog-container.MuiDialog-scrollPaper { background: #0a0a0a !important; }
.MuiBackdrop-root { background: transparent !important; }
.MuiDialog-paperWidthXs.MuiDialog-paper { background: #1e1e1e !important; border: 1px solid #333 !important; border-radius: 4px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.9) !important; }
.MuiDialogTitle-root { border-bottom: 1px solid #333 !important; padding-bottom: 12px !important; margin-bottom: 10px !important; }
.MuiDialog-paperWidthXs button { border-radius: 3px !important; text-transform: none !important; }
/* === 6. Главные кнопки (Градиент OpenWRT) === */
.MuiButton-containedPrimary {
background: linear-gradient(to top, #008252, #00925d) !important; color: #fff !important;
border: 1px solid #006e45 !important; border-radius: 3px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.3) !important;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3) !important; text-transform: none !important;
font-weight: 500 !important; padding: 6px 16px !important; transition: 0.1s !important;
}
.MuiButton-containedPrimary:hover { background: linear-gradient(to top, #00925d, #00a368) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.4) !important; }
.MuiButton-containedPrimary:active { background: #008252 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important; transform: translateY(1px) !important; }
.MuiTouchRipple-root { display: none !important; }
/* Убираем синеву у прозрачных/контурных кнопок и при их выделении (фокусе) */
.MuiButton-textPrimary, .MuiButton-outlinedPrimary, .MuiButton-colorPrimary:focus, .MuiButton-colorPrimary.Mui-selected { color: #ccc !important; }
.MuiButton-outlinedPrimary { border-color: #444 !important; }
.MuiButton-textPrimary:hover, .MuiButton-outlinedPrimary:hover { background: rgba(255,255,255,0.05) !important; }