Веб-интерфейс

[sunny]

"Запилил" таки я темную тему.
Переделав стандартную по умолчанию:
luci-theme-bootstrap
===
Тема Dark, основные правки здесь:
./openwrt/feeds/luci/themes/luci-theme-dark/htdocs/luci-static/dark/cascade.css

Я закомментировал (на русском) ту часть кода, с которой я разобрался.
Достаточно легко при желании настроить под себя кнопки, поменять иконки, цвет фона и т.д. и т.п.
Цвет шрифта также гибко настраивается.

Так это выглядит:

Развернуть для просмотра

[свернуть]

Выкладываю для "Бета-тестирования", полезные дополнения и предложения только приветствуются
Во вложении готовый пакет:

Удалить:
opkg remove luci-theme-dark
Установить:
opkg install luci-theme-dark_git-18.039.79865-52b3f19-1_all.ipk

Можно будет собрать с темой прошивку (транк), если подложить размещенный здесь файл: feeds.conf.default.txt
Переименуйте его в feeds.conf.default и закиньте с заменой фалов в ./openwrt/feeds.conf.default

Затем обновите фиды:

./scripts/feeds clean -a
./scripts/feeds update -a
./scripts/feeds install -a

Выберите тему Dark в 'make menuconfig' и сможете собрать с ней прошивку.

Для желающих покопаться , код здесь в бранче мастер:
https://github.com/user7887/luci

[stD]

Прикольно. Иконки бы нужно отодвинуть от полей ввода, а так шик!

[sunny]

Не смог подменить белый фон графиков - в принципе выглядит нормально.
Описания цветов графиков так и не нашел, пробовал произвольно подсовывать:

	background-color: #222222;

Без результатно, имхо здесь лучший вариант, кнопки почти черные:

Развернуть для просмотра

[свернуть]

Задал в качестве основных цветов переменные, теперь любой пользователь может поэкспериментировать с цветами, отредактировав заголовок в файле:
./openwrt/feeds/luci/themes/luci-theme-dark/htdocs/luci-static/dark/cascade.css

html {
/* Цвет основного фона 1 */
--fonn1: #333333;
/* Цвет вспомогательного фона 2 */
--fonn2: #222222;

/* Цвет основного шрифта 1 на основном фоне */
--font1: #FFFFFF;
/* Цвет вспомогательного шрифта 2 на фоне отличном от основного */
--font2: #222222;
/* Цвет выделенного шрифта 1 */
--font3: #1E90FF;
/* Цвет выделенного шрифта 2 при наведении курсора в выпадающей вкладке верхнего бара #32CD32 */
--font4: #FFFFFF;

/* Цвет шрифта надписей на кнопках 1 */
--font5: #FFFFFF;
/* Цвет шрифта надписей на кнопках 2 при наведении курсора #32CD32 */
--font6: #1E90FF;

/* Цвет кнопки 1 кнопки с иконками и без (темный тон, низ): */
--butt1: #000;
/* Цвет кнопки 2 кнопки с иконками и без (светлый тон, верх): */
--butt2: #444444;
/* Цвет кнопки 3 кнопки Save&Apply&Reset (темный тон, низ): */
--butt3: #0064CD;
/* Цвет кнопки 4 кнопки Save&Apply&Reset (светлый тон, верх): */
--butt4: #049cdb;

/* Цвет обрамления кнопки и рамок #FF0000 */
--butt5: #FFFFFF;

/* Цвет больших иконок интерфейсов (темный тон, низ): */
--butt6: #333;
/* Цвет больших иконок интерфейсов (светлый тон, верх): */
--butt7: #474a51;
/* Цвет маленьких иконок интерфейсов (темный тон, низ): */
--butt8: #000;
/* Цвет маленьких иконок интерфейсов (светлый тон, верх): */
--butt9: #444444;

/* Цвет фона выделения - окно загрузки файла прошивки, окно сообщения
* при перезагрузке или ошибки ввода пароля */
/* темный тон */
--fon1: #DDDDDD;
/* светлый тон */
--fon2: #eeeeee;
}

Готовый пакет для установки:
*.ipk.zip
Тема Dark для самостоятельной сборки:
luci-theme-dark.zip

[sunny]

Проще всего заменить 3 кнопки:
- Сохранить и применить
- Сохранить
- Сбросить



http://shpargalkablog.ru/2012/04/css-knopki.html#on
http://www.internet-technologies.ru/...animaciey.html
https://www.sanwebe.com/css3-button-generator

[sunny]

Можно подменить иконки на свои скопировав их свойства:
- размер
- разрешение
- название


"Но это все цветочки"

[sunny]

А вот и "ягодки"
===
Правим этот файл:
./openwrt/feeds/luci/themes/luci-theme-dark/htdocs/luci-static/dark/cascade.css
Добавляем всего 2 строчки (выделил красным):

/* Основные цвета фона */
body {
	background: url(fon.png) no-repeat center center fixed;
	background-size: cover;
	background-color: var(--fonn1);
	margin: 0;

И кидаем сюда свою картинку *.png или *.jpg:

И получаем результат:

Развернуть для просмотра

[свернуть]

[sunny]

Гифки тоже работают:

/* Основные цвета фона */
body {
	background: url(fon.gif) no-repeat center center fixed;
	background-size: cover;
	background-color: var(--fonn1);
	margin: 0;

Просто демонстрация:

[sunny]

Для самостоятельного встраивания фонового изоражения под HD экран:
Изображение нужно уменьшать до размеров 1920x896
Высота верхнего бара (полосы) - 40
===
Парочка готовых пакетов темы с фоном под HD экран 1920х1080.

[sunny]

[sunny]

Да цвет фона и рамки графиков задается отдельно здесь:
/luci/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
/luci/modules/luci-mod-admin-full/luasrc/view/admin_status/bandwidth.htm
/luci/modules/luci-mod-admin-full/luasrc/view/admin_status/load.htm
/luci/modules/luci-mod-admin-full/luasrc/view/admin_status/wireless.htm
http://cyber-place.ru/showpost.php?p=39223&postcount=9

Развернуть для просмотра

[свернуть]