LuCI - OpenWrt Configuration Interface
Revisão | 466be1cebb3d20e392f01ce24ae8b15065db754d (tree) |
---|---|
Hora | 2022-01-26 17:12:04 |
Autor | Tianling Shen <cnsztl@immo...> |
Commiter | Tianling Shen |
luci-theme-bootstrap-mod: sync with upstream source
Signed-off-by: Tianling Shen <cnsztl@immortalwrt.org>
(cherry picked from commit bc7fccdd43483a50e57293bbe1ca134bd102a478)
@@ -1,4 +1,4 @@ | ||
1 | -# Copyright (C) 2020 Lienol <lawlienol@gmail.com> | |
1 | +# Copyright (C) 2018-2022 Lienol <lawlienol@gmail.com> | |
2 | 2 | # |
3 | 3 | # This is free software, licensed under the GNU General Public License v3. |
4 | 4 | # |
@@ -7,8 +7,8 @@ include $(TOPDIR)/rules.mk | ||
7 | 7 | |
8 | 8 | LUCI_TITLE:=Bootstrap Mod Theme By Lienol |
9 | 9 | LUCI_DEPENDS:= |
10 | -PKG_VERSION:=2 | |
11 | -PKG_DATE:=20200912 | |
10 | +PKG_VERSION:=20220102 | |
11 | +PKG_RELEASE:=1 | |
12 | 12 | |
13 | 13 | include ../../luci.mk |
14 | 14 |
@@ -6,8 +6,8 @@ body { | ||
6 | 6 | body { |
7 | 7 | background: #ffffff; |
8 | 8 | color: #333; |
9 | - font-family: Helvetica, Arial, sans-serif; | |
10 | - font-size: 14px; | |
9 | + font-family: "Helvetica Neue, Helvetica, Arial, sans-serif"; | |
10 | + font-size: 13px; | |
11 | 11 | line-height: 1.8; |
12 | 12 | margin: 0; |
13 | 13 | /* padding-top: 60px; */ |
@@ -556,23 +556,23 @@ p { | ||
556 | 556 | |
557 | 557 | .tabs, |
558 | 558 | .cbi-tabmenu { |
559 | - border-bottom: 2px solid #ddd; | |
560 | - margin-bottom: 20px; | |
559 | + border-bottom: 1px solid #ddd; | |
560 | + margin-bottom: 15px; | |
561 | 561 | } |
562 | 562 | |
563 | 563 | .tabs li, |
564 | 564 | .cbi-tabmenu li { |
565 | 565 | display: inline-block; |
566 | + margin-bottom: -1px; | |
566 | 567 | } |
567 | 568 | |
568 | 569 | .tabs a, |
569 | 570 | .cbi-tabmenu a { |
570 | 571 | display: block; |
571 | - color: #404040; | |
572 | + /* color: #404040; */ | |
572 | 573 | line-height: 34px; |
573 | - margin-bottom: -2px; | |
574 | - margin-right: 20px; | |
575 | - padding: 0 3px; | |
574 | + margin-right: 3px; | |
575 | + padding: 0 15px; | |
576 | 576 | } |
577 | 577 | |
578 | 578 | .active a, |
@@ -581,6 +581,13 @@ p { | ||
581 | 581 | color: #111; |
582 | 582 | } |
583 | 583 | |
584 | +.tabs>li>a:hover, | |
585 | +.cbi-tabmenu>li>a:hover { | |
586 | + text-decoration: none; | |
587 | + background-color: #eee; | |
588 | + border-color: #eee #eee #ddd; | |
589 | +} | |
590 | + | |
584 | 591 | |
585 | 592 | /* Fieldset */ |
586 | 593 |
@@ -603,6 +610,7 @@ fieldset fieldset { | ||
603 | 610 | table .cbi-value-field, |
604 | 611 | .table .cbi-value-field { |
605 | 612 | display: table-cell; |
613 | + width: unset; | |
606 | 614 | } |
607 | 615 | |
608 | 616 | .cbi-value-title { |
@@ -613,7 +621,7 @@ table .cbi-value-field, | ||
613 | 621 | padding-top: 0.4em; |
614 | 622 | line-height: 1.2em; |
615 | 623 | float: left; |
616 | - width: 13em; | |
624 | + width: 14em; | |
617 | 625 | margin-right: 1.5em; |
618 | 626 | text-align: right; |
619 | 627 | color: #404040; |
@@ -622,6 +630,7 @@ table .cbi-value-field, | ||
622 | 630 | .cbi-value-field { |
623 | 631 | color: #811; |
624 | 632 | display: table-cell; |
633 | + width: 0.1%; | |
625 | 634 | } |
626 | 635 | |
627 | 636 | .cbi-section-table-cell { |
@@ -808,6 +817,17 @@ select { | ||
808 | 817 | line-height: 18px; |
809 | 818 | } |
810 | 819 | |
820 | +input[disabled], | |
821 | +select[disabled], | |
822 | +textarea[disabled], | |
823 | +input[readonly], | |
824 | +select[readonly], | |
825 | +textarea[readonly] { | |
826 | + background-color: #f5f5f5; | |
827 | + border-color: #ddd; | |
828 | + color: unset; | |
829 | +} | |
830 | + | |
811 | 831 | table.cbi-section-table input, |
812 | 832 | table.cbi-section-table textarea, |
813 | 833 | table.cbi-section-table select, |
@@ -880,11 +900,11 @@ input[type=file] { | ||
880 | 900 | } |
881 | 901 | |
882 | 902 | .cbi-value-description { |
883 | - /* display: inline; */ | |
903 | + display: inline; | |
884 | 904 | background-image: url(/luci-static/resources/cbi/help.gif); |
885 | 905 | /* background-position-x: 0px; |
886 | 906 | background-position-y: 1px; */ |
887 | - background-position: 0em 0.3em; | |
907 | + background-position: 0em 0.2em; | |
888 | 908 | background-repeat: no-repeat; |
889 | 909 | padding: 0 1.2rem; |
890 | 910 | } |
@@ -961,8 +981,7 @@ button:focus { | ||
961 | 981 | .cbi-button-add:active, |
962 | 982 | .cbi-button-add:focus, |
963 | 983 | .cbi-input-add:active, |
964 | -.cbi-input-add:focus { | |
965 | -} | |
984 | +.cbi-input-add:focus {} | |
966 | 985 | |
967 | 986 | .cbi-button-remove, |
968 | 987 | .cbi-input-remove, |
@@ -977,8 +996,7 @@ button:focus { | ||
977 | 996 | .cbi-input-remove:active, |
978 | 997 | .cbi-input-remove:focus, |
979 | 998 | .cbi-section-remove input:active, |
980 | -.cbi-section-remove input:focus { | |
981 | -} | |
999 | +.cbi-section-remove input:focus {} | |
982 | 1000 | |
983 | 1001 | .cbi-button-reload, |
984 | 1002 | .cbi-input-reload { |
@@ -990,8 +1008,7 @@ button:focus { | ||
990 | 1008 | .cbi-button-reload:active, |
991 | 1009 | .cbi-button-reload:focus, |
992 | 1010 | .cbi-input-reload:active, |
993 | -.cbi-input-reload:focus { | |
994 | -} | |
1011 | +.cbi-input-reload:focus {} | |
995 | 1012 | |
996 | 1013 | .cbi-button-reset, |
997 | 1014 | .cbi-input-reset { |
@@ -1003,8 +1020,7 @@ button:focus { | ||
1003 | 1020 | .cbi-button-reset:active, |
1004 | 1021 | .cbi-button-reset:focus, |
1005 | 1022 | .cbi-input-reset:active, |
1006 | -.cbi-input-reset:focus { | |
1007 | -} | |
1023 | +.cbi-input-reset:focus {} | |
1008 | 1024 | |
1009 | 1025 | .cbi-button-edit, |
1010 | 1026 | .cbi-input-edit { |
@@ -1016,8 +1032,7 @@ button:focus { | ||
1016 | 1032 | .cbi-button-edit:active, |
1017 | 1033 | .cbi-button-edit:focus, |
1018 | 1034 | .cbi-input-edit:active, |
1019 | -.cbi-input-edit:focus { | |
1020 | -} | |
1035 | +.cbi-input-edit:focus {} | |
1021 | 1036 | |
1022 | 1037 | .cbi-button-apply, |
1023 | 1038 | .cbi-input-apply { |
@@ -1029,8 +1044,7 @@ button:focus { | ||
1029 | 1044 | .cbi-button-apply:active, |
1030 | 1045 | .cbi-button-apply:focus, |
1031 | 1046 | .cbi-input-apply:active, |
1032 | -.cbi-input-apply:focus { | |
1033 | -} | |
1047 | +.cbi-input-apply:focus {} | |
1034 | 1048 | |
1035 | 1049 | .cbi-button-save, |
1036 | 1050 | .cbi-input-save { |
@@ -1042,14 +1056,13 @@ button:focus { | ||
1042 | 1056 | .cbi-button-save:active, |
1043 | 1057 | .cbi-button-save:focus, |
1044 | 1058 | .cbi-input-save:active, |
1045 | -.cbi-input-save:focus { | |
1046 | -} | |
1059 | +.cbi-input-save:focus {} | |
1047 | 1060 | |
1048 | 1061 | /* LuCI 18 DynamicList */ |
1049 | -input[type="text"] + .cbi-button, | |
1050 | -input[type="password"] + .cbi-button, | |
1051 | -select + .cbi-button { | |
1052 | - padding: 4px 8px; | |
1062 | +input[type="text"]+.cbi-button, | |
1063 | +input[type="password"]+.cbi-button, | |
1064 | +select+.cbi-button { | |
1065 | + padding: 4px 8px; | |
1053 | 1066 | } |
1054 | 1067 | |
1055 | 1068 |
@@ -1121,9 +1134,9 @@ select + .cbi-button { | ||
1121 | 1134 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); |
1122 | 1135 | border-radius: 4px; |
1123 | 1136 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
1124 | - display: inline-flex; | |
1137 | + /* display: inline-flex; */ | |
1125 | 1138 | flex-direction: column; |
1126 | - line-height: 1.2em; | |
1139 | + line-height: 1.6em; | |
1127 | 1140 | min-width: 100px; |
1128 | 1141 | } |
1129 | 1142 |
@@ -1259,8 +1272,7 @@ footer a { | ||
1259 | 1272 | |
1260 | 1273 | /* login */ |
1261 | 1274 | body.node-main-login { |
1262 | - /* background: url(bg.jpg); */ | |
1263 | - background: linear-gradient(#22b9a4, #9a87d4); | |
1275 | + background: rgba(0, 0, 0, 0.7); | |
1264 | 1276 | background-repeat: no-repeat; |
1265 | 1277 | background-size: 100% 100%; |
1266 | 1278 | -moz-background-size: 100% 100%; |
@@ -1272,6 +1284,10 @@ body.node-main-login>header { | ||
1272 | 1284 | border-bottom: none; |
1273 | 1285 | } |
1274 | 1286 | |
1287 | +body.node-main-login>header .brand { | |
1288 | + display: none; | |
1289 | +} | |
1290 | + | |
1275 | 1291 | body.node-main-login .alert-message { |
1276 | 1292 | z-index: 999; |
1277 | 1293 | } |
@@ -1283,32 +1299,17 @@ body.node-main-login .alert-message { | ||
1283 | 1299 | border-radius: .375rem; |
1284 | 1300 | text-align: center; |
1285 | 1301 | position: absolute; |
1286 | - top: 50%; | |
1302 | + top: 30%; | |
1287 | 1303 | left: 50%; |
1288 | 1304 | transform: translate(-50%, -50%); |
1305 | + background: #fff; | |
1289 | 1306 | } |
1290 | 1307 | |
1291 | 1308 | .node-main-login>.container>form .errorbox { |
1292 | 1309 | color: red; |
1293 | 1310 | } |
1294 | 1311 | |
1295 | -.node-main-login>.container>form>.cbi-map>h2 { | |
1296 | - width: 100px; | |
1297 | - height: 100px; | |
1298 | - color: #fff; | |
1299 | - text-align: center; | |
1300 | - letter-spacing: 4px; | |
1301 | - display: block; | |
1302 | - margin: -100px auto 15px auto; | |
1303 | - padding: 0; | |
1304 | - text-indent: -500px; | |
1305 | - overflow: hidden; | |
1306 | - border-radius: 60px; | |
1307 | - /* border: #ccc 3px solid; */ | |
1308 | - background-image: url(wifi.png); | |
1309 | - background-size: cover; | |
1310 | - /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); */ | |
1311 | -} | |
1312 | +.node-main-login>.container>form>.cbi-map>h2 {} | |
1312 | 1313 | |
1313 | 1314 | .node-main-login>.container>form input[name='luci_username'], |
1314 | 1315 | .node-main-login>.container>form input[name='luci_password'] { |
@@ -1334,6 +1335,14 @@ body.node-main-login .alert-message { | ||
1334 | 1335 | text-align: center !important; |
1335 | 1336 | } |
1336 | 1337 | |
1338 | +.node-main-login>.container .cbi-button-apply { | |
1339 | + width: 100% !important; | |
1340 | +} | |
1341 | + | |
1342 | +.node-main-login>.container .cbi-button-reset { | |
1343 | + display: none; | |
1344 | +} | |
1345 | + | |
1337 | 1346 | /* luci18 */ |
1338 | 1347 | .cbi-section-table-titles.named::before { |
1339 | 1348 | content: attr(data-title) " "; |
@@ -1365,6 +1374,10 @@ body.node-main-login .alert-message { | ||
1365 | 1374 | } |
1366 | 1375 | |
1367 | 1376 | /* luci 19 */ |
1377 | +.node-main-login>header .nav { | |
1378 | + display: none; | |
1379 | +} | |
1380 | + | |
1368 | 1381 | body.modal-overlay-active { |
1369 | 1382 | overflow: hidden; |
1370 | 1383 | height: 100vh; |
@@ -1575,18 +1588,18 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1575 | 1588 | } |
1576 | 1589 | |
1577 | 1590 | header [data-indicator] { |
1578 | - padding: 1px 3px 2px; | |
1579 | - font-size: 9.75px; | |
1580 | - font-weight: bold; | |
1581 | - color: #fff !important; | |
1582 | - text-transform: uppercase; | |
1583 | - white-space: nowrap; | |
1584 | - background-color: #bfbfbf; | |
1585 | - border-radius: 3px; | |
1586 | - text-shadow: none; | |
1587 | - margin-left: .4em; | |
1591 | + padding: 1px 3px 2px; | |
1592 | + font-size: 9.75px; | |
1593 | + font-weight: bold; | |
1594 | + color: #fff !important; | |
1595 | + text-transform: uppercase; | |
1596 | + white-space: nowrap; | |
1597 | + background-color: #bfbfbf; | |
1598 | + border-radius: 3px; | |
1599 | + text-shadow: none; | |
1600 | + margin-left: .4em; | |
1588 | 1601 | } |
1589 | 1602 | |
1590 | 1603 | header [data-indicator][data-style="active"] { |
1591 | - background-color: #62cffc; | |
1604 | + background-color: #62cffc; | |
1592 | 1605 | } |
\ No newline at end of file |
@@ -19,7 +19,18 @@ | ||
19 | 19 | </body> |
20 | 20 | </html> |
21 | 21 | <script> |
22 | - window.onload = function(){ | |
22 | + function addLoadEvent(func) { | |
23 | + var oldonload = window.onload; | |
24 | + if (typeof window.onload != 'function') { | |
25 | + window.onload = func; | |
26 | + } else { | |
27 | + window.onload = function () { | |
28 | + oldonload(); | |
29 | + func(); | |
30 | + } | |
31 | + } | |
32 | + } | |
33 | + addLoadEvent(function(){ | |
23 | 34 | var content = document.getElementsByName("content"); |
24 | 35 | var luci_username = document.getElementsByName("luci_username"); |
25 | 36 | var luci_password = document.getElementsByName("luci_password"); |
@@ -49,6 +60,6 @@ | ||
49 | 60 | } |
50 | 61 | } |
51 | 62 | } |
52 | - } | |
63 | + }); | |
53 | 64 | </script> |
54 | 65 | </html> |