🌴 Sync 2023-11-11 12:47

This commit is contained in:
github-actions[bot] 2023-11-11 12:47:22 +08:00
parent 282fcd29e2
commit 6f683715eb
10 changed files with 968 additions and 0 deletions

17
luci-theme-Light/Makefile Normal file
View File

@ -0,0 +1,17 @@
#
# Copyright (C) 2020 Mod By-Ameng Openwrt
#
# This is free software, licensed under the Apache License, Version 2.0 .
#
include $(TOPDIR)/rules.mk
LUCI_TITLE:=luci-theme-Light
LUCI_PKGARCH:=all
PKG_VERSION:=1.6
PKG_RELEASE:=202000308
include $(TOPDIR)/feeds/luci/luci.mk
# call BuildPackage - OpenWrt buildroot signature

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1,661 @@
/*
* LuCI Bootstrap Theme
* Author: Mod By_Ameng
* Author URI:
------------------------------------------------------- */
/* Reset */ /* 页面背景 最上面的字体大小 */
body,html{height:100%}
body{background:#fff;color:#333;font-family:Helvetica,Arial,sans-serif;font-size:13.5px;line-height:1.8;margin:0;padding-top:47px;margin:unset} /* 状态和上面的距离和整个页面全部整体字体大小 */
a{color:#08c;text-decoration:none;outline:0}
a:hover{opacity:1}
.cbi-map-descr,.cbi-section-descr,h1,h2,h3,h4,h5,h6,p{color:#906BDA;margin-top:0;margin-bottom:10px} /* 系统下面显示的配置路由器基础信息文字颜色 */
ol,ul{margin:0;padding:0;list-style:none}
.tr,tr{display:table-row}
legend{color:#48D1CC;font-size:0.8pc;font-weight:600;padding:0 0 1px} /* 系统内存等字体大小及颜色 */
.left{text-align:left!important}
.right{text-align:right!important}
.center{text-align:center!important}
.top{vertical-align:top!important}
.middle{vertical-align:middle!important}
.bottom{vertical-align:bottom!important}
.pull-left{float:left!important}
.pull-right{float:right!important}
.inline{display:inline}
.hidden{display:none}
/* Style */
.container:first-child{min-height:40px} /* 登陆主页上面蓝色横条宽度 */
.container{max-width:75pc;margin:0 auto}
/* 隐藏登录用户栏 */
#.container form[action$="/cgi-bin/luci"] .cbi-map fieldset fieldset div:first-child { display: none; }
#.pull-left, .left { float: left; }#ff0000
#.pull-right, .right { float: right; }
#.inline { display: inline; }
#.hidden { display: none; }
/* Header */ /* 顶栏横条 */
header{font-size:14px;position:fixed;top:0;left:0;right:0;background:#71B7E6;box-shadow:0 2px 2px rgba(0,0,0,.1);z-index:100;border-bottom:2.5px solid #726bda}
/* .brand{float:left;color:#fff;font-size:24px;font-weight:400;line-height:40px;margin-right:20px;position:absolute;left:0;margin-left:20px} */
.brand{float:left;color:#fff;font-size:24px;font-weight:450;line-height:40px;margin-right:20px; position:absolute;width:200px;left:50%;margin-left:-780px;} /* openwrt显示大小以及定死位置 */
header:before{background:#000 linear-gradient(to left,#00FF00,#FF8C00,#FF7F00,#FFFF00,#00FF00,#00FF00,#FFFF00,#FF7F00,#FF8C00,#00FF00);content:"";height:2px;position:absolute;top:0;width:100%;min-width:5in} /* 最上面彩虹 */
.brand:hover { opacity: 1; }
.nav li { float: left; }
.nav a { display: block; color:#404040; line-height: 48px; padding: 0 19px;} /* 顶栏中字体颜色 */
/* .brand { display:none; } */
.brand:hover{opacity:1}
.nav li{float:left}
.nav a{display:block;color:#404040;line-height:40px;padding:0 15px} /* 顶栏中字体颜色 */
.nav a:hover {}
/* Dropdown */ /* 鼠标点击状态出现下面的字体 修改里面的背景和圆角还有颜色字体 */
.dropdown{position:relative}
.dropdown:hover{background-color:#71BCFA}/* 鼠标点击状态后面出现的背景颜色 */
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu{display:none;position:absolute;top:40px;background:#ffffff;border-radius:5px;padding:5px 0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.3);}/* 鼠标点击状态下面选项的背景颜色 */
.dropdown-menu:before{content:'';position:absolute;top:-6px;left:23px;border-bottom:6px solid #F8F8FF;border-left:7px solid transparent;border-right:7px solid transparent} /* 选择菜单出现的小三角形箭头颜色 */
.dropdown-menu a { color: #454C59; line-height: 24px; min-width: 135px; font-size:13px; margin: 1px 0; padding: 0 20px; } /* 选择菜单横条间长度和间距和字体颜色 */
.dropdown-menu a:hover { background: rgba(0,0,0,.1); color: #0099cc} /* 选择菜单鼠标放上后出现的字体颜色 */
.cbi-dropdown{display:inline-block;width:210px;height:30px;padding:4px;font-size:13px;line-height:18px;color:gray;border:1px solid #ccc;border-radius:3px;box-sizing:border-box}
.cbi-dropdown{border:1px solid #ccc;border-radius:3px;display:inline-flex;padding:0;cursor:pointer;height:auto;background:linear-gradient(#fff 0%,#e9e8e6 100%);position:relative;color:#404040}
.cbi-dropdown{max-width:25pc;width:auto}
.cbi-dropdown:focus{outline:2px solid #4b6e9b}
.cbi-dropdown>ul{margin:0!important;padding:0;list-style:none;overflow-x:hidden;overflow-y:auto;display:flex;width:100%}
.cbi-dropdown>ul.preview{display:none}
.cbi-dropdown>.more,.cbi-dropdown>.open{flex-grow:0;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;text-align:center;line-height:2em;padding:0 .25em}
.cbi-dropdown>.more,.cbi-dropdown>ul>li[placeholder]{color:#777;font-weight:700;text-shadow:1px 1px 0 #fff;display:none}
.cbi-dropdown>ul>li{display:none;padding:.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;flex-grow:1;align-items:center;align-self:center;min-height:20px}
.cbi-dropdown>ul>li .hide-open{display:block;display:initial}
.cbi-dropdown>ul>li .hide-close{display:none}
.cbi-dropdown>ul>li[display]:not([display="0"]){border-left:1px solid #ccc}
.cbi-dropdown[empty]>ul{max-width:1px}
.cbi-dropdown>ul>li>form{display:none;margin:0;padding:0;pointer-events:none}
.cbi-dropdown>ul>li img{vertical-align:middle;margin-right:.25em}
.cbi-dropdown>ul>li>form>input[type=checkbox]{margin:0}
.cbi-dropdown>ul>li input[type=text]{height:20px}
.cbi-dropdown[open]{position:relative}
.cbi-dropdown[open]>ul.dropdown{display:block;background:#f6f6f5;border:1px solid #918e8c;box-shadow:0 0 4px #918e8c;position:absolute;z-index:1000;max-width:none;min-width:100%;width:auto}
.cbi-dropdown>ul>li[display],
.cbi-dropdown[open]>ul.preview,
.cbi-dropdown[open]>ul.dropdown>li,
.cbi-dropdown[multiple]>ul>li>label,
.cbi-dropdown[multiple][open]>ul.dropdown>li,
.cbi-dropdown[multiple][more]>.more,
.cbi-dropdown[multiple][empty]>.more {
flex-grow: 1;
display: flex;
}
.cbi-dropdown[empty]>ul>li,
.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
display: block;
}
.cbi-dropdown[open]>ul.dropdown>li .hide-open {
display: none;
}
.cbi-dropdown[open]>ul.dropdown>li .hide-close {
display: block;
display: initial;
}
.cbi-dropdown[open]>ul.dropdown>li {
border-bottom: 1px solid #ccc;
}
.cbi-dropdown[open]>ul.dropdown>li[selected] {
background: #b0d0f0;
}
.cbi-dropdown[open]>ul.dropdown>li.focus {
background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
}
.cbi-dropdown[open]>ul.dropdown>li:last-child {
margin-bottom: 0;
border-bottom: none;
}
.cbi-dropdown[disabled] {
pointer-events: none;
opacity: .6;
}
/* Label */ /* 右上角自动刷新 */
.label{border-radius:15px!important;display:inline-block;background:#bbb;border-bottom: 0.4px solid rgba(0,0,0,.0);border-radius:15px;color:#fff;font-size:10px;line-height:24px;text-transform:uppercase;margin-top:6px;padding:2px 9px;cursor:pointer}
.label.success{background:#7ADD7A}
.label.notice{background:#F48FB1}
.label.important{background:#f00}
.label.warning{background:#fc0}
/* Main */
h2{margin-bottom:15px;padding:.2rem;width:180px;border-right:6px solid #6A5ACD;border-left:6px solid #FF1493;border-radius:40px 0;color:#2F4F4F;text-align:center;text-shadow:5px 2px 6px #708090;font-size:1.2pc;line-height:24px} /* 状态左右两边颜色和距离下面系统间距 */
ul, ol { margin: 0; padding: 0; list-style: none; }
h2 a { color: #333; }
h2 a:hover { opacity: 1; }
h2+.cbi-map-descr { margin-top: -10px; }
.alert-message { position: relative; padding: 20px; margin-bottom: 20px; background: #fe8; border: 1px solid rgba(0, 0, 0, .1); border-width: 1px 0; border-radius:2px}
.alert-message>h4,p{margin:0}
.error,.errorbox{display:inline}
.error{color:#f00}
.errorbox{color:#3b3}
#maincontainer { box-shadow: 0 0 1px rgba(0,0,0,.3); border-radius: 4px; width: 500px; margin: 120px auto 0; padding: 30px; }
#syslog { background: #fafafa; color: #666; width: 100%; }
/* Change List */
.uci-change-legend{padding-top:15px}
.uci-change-legend-label{float:left;margin-right:100px}
.uci-change-legend-label>del,.uci-change-legend-label>ins,.uci-change-legend-label>var{float:left;width:10px;height:10px;margin-top:3px;margin-right:6px}
.uci-change-list{font-family:monospace}
.uci-change-legend-label del,.uci-change-legend-label ins,.uci-change-legend-label var,.uci-change-list del,.uci-change-list ins,.uci-change-list var{display:block;text-decoration:none;padding:2px}
.uci-change-legend-label ins,.uci-change-list ins{background:#cfc;border:2px solid #4f4}
.uci-change-legend-label del,.uci-change-list del{background:#fcc;border:2px solid #f00}
.uci-change-legend-label var,.uci-change-list var{background:#f2f2f2;border:2px solid #ccc}
.uci-change-list var del,.uci-change-list var ins{border:0;white-space:pre;padding:0}
.uci-change-legend-label var del,.uci-change-legend-label var ins{border:0;line-height:6px}
/* Tabs */ /* 系统属性下面文字颜色 */
.cbi-tabmenu,.tabs{border-bottom:1px dashed #eee;margin-bottom:20px}
.cbi-tabmenu li,.tabs li{display:inline-block}
.cbi-tabmenu a,.tabs a{display:block;color:#19a4e6;line-height:34px;margin-bottom:-1px;margin-right:20px;padding:0 3px}
.active a,.cbi-tab a{border-bottom:1px dashed #19a4e6;color:#19a4e6}
/* Fieldset */ /* 主页系统内存网络等字体颜色和错位问题#85d9ff */
fieldset{border:0;margin:10px 0;padding:0}
fieldset legend {
margin: 5px 0;
padding: 3px 20px;
border: 1.8px dashed #1e7ace;
border-radius: 20px;
background: #fff;
color: #1e7ace;
font-weight: 700;
transform:rotate(-4.2deg);
-ms-transform:rotate(-4.2deg); /* IE 9 */
-moz-transform:rotate(-4.2deg); /* Firefox */
-webkit-transform:rotate(-4.2deg); /* Safari and Chrome */
-o-transform:rotate(-4.2deg); /* Opera */
} /* 修改系统天气内存字体角度添加阴影颜色 */
fieldset fieldset{margin:0}
.cbi-value{margin-bottom:10px;zoom:1;clear:both}
.table .cbi-value-field,table .cbi-value-field{display:table-cell}
.cbi-value-title{float:left;display:table-cell;margin-right:8px;padding-top:6px;width:180px;color:#595;text-align:right;line-height:15px;} /* app选项间隔大小和主机名时区颜色 */
.cbi-value-field{color:#404040;display:table-cell}
.cbi-section-table-cell{white-space:nowrap}
.cbi-section-create{margin:-3px;display:inline-flex;align-items:center}
.cbi-section-create>*{margin:3px;flex:1 1 auto}
/* Table */ /* 主机名 主机型号 里面的字体颜色 */
/* .cbi-section table tbody tr:nth-child(odd) { background-color: #fdfdfd; } */
.table,table{width:100%;display:table;margin:0 0 10px!important;border-radius:5px;border-collapse:collapse;position:relative}
/* table tr:first-child, .table .tr:first-child { border-top: 1px solid #b0e6b9; } */
/* table tr, .table .tr { border-bottom: 1px solid #b0e6b9; } */
table tr:first-child { border-top: 1px dashed #D3D3D3; }
.table .td,.table .th,table td,table th{color:#404040;padding:5px 3px!important} /* 主机名固件版本右侧字体颜色 */
.table .tr+.tr .td,table tr+tr td{border-top:1px solid #fff} /* 间隔横条颜色 */
.table .th,table th{text-align:left;font-weight:700}
.table .td:first-child,table td:first-child{color:#333} /* 主机名固件版本等字体颜色 */
.table[width="33%"],.td[width="33%"],.th[width="33%"]{width:33%}
.table[width="100%"],.td[width="100%"],.th[width="100%"]{width:100%}
.table .td,.table .th{display:table-cell;vertical-align:middle}
.table .tr.placeholder{height:calc(3em + 20px)}
.table .tr.placeholder>.td{position:absolute;left:0;right:0;bottom:0;text-align:center;line-height:3em}
.td.cbi-section-actions>*{display:flex}
.td.cbi-section-actions>*>*,.td.cbi-section-actions>*>form>*{flex:1 1 4em;margin:0 1px}
.cbi-input-up,.td.cbi-section-actions>*>.cbi-button-up{background:unset}
.cbi-input-down,.td.cbi-section-actions>*>.cbi-button-down{background:unset}
#cbi-network .tr,#cbi-network tr,#cbi-wireless .tr,#cbi-wireless tr,.tr .tr:first-child,tr tr:first-child{border-top:0}
#cbi-network .tr,#cbi-network tr,#cbi-wireless .tr,#cbi-wireless tr,.tr .tr,tr tr{border-bottom:0}
#conns,#cpu_free,#membuff,#memcache,#memfree,#memtotal,#swapfree,#swaptotal{line-height:18px}
#conns>div,#cpu_free>div,#membuff>div,#memcache>div,#memfree>div,#memtotal>div,#swapfree>div,#swaptotal>div{border:1.4px dashed #aaa!important;border-radius:3px;width:220px!important}
#conns>div>div,#cpu_free>div>div,#membuff>div>div,#memcache>div>div,#memfree>div>div,#memtotal>div>div,#swapfree>div>div,#swaptotal>div>div{background:#85d9ff!important;height:19px!important;border-radius:2px}
/* Form */ /* 各个选项窗口圆角参数 solid实线 dashed虚线 */
input,select,textarea{display:inline-block;box-sizing:border-box;padding:6px;width:190px;border:1px dashed #5F8CFF;border-radius:15px;color:#666;font:inherit;line-height:16px;} /* 选项窗口颜色 */
.table.cbi-section-table input,.table.cbi-section-table select,.table.cbi-section-table textarea,table.cbi-section-table input,table.cbi-section-table select,table.cbi-section-table textarea{width:auto}
#cbi-firewall-redirect select,#cbi-firewall-zone select,#cbi-network-switch_vlan select{width:auto}
input:active, input:focus { outline: 0; border-color: #08c; }
input[type=checkbox]:focus,input[type=file]:focus,select:focus,textarea:focus{outline:0}
button,input[type=button],input[type=reset],input[type=submit]{width:auto!important}
input[type=checkbox],input[type=radio]{width:auto;margin:0;vertical-align:middle;cursor:pointer}
input[type=file]{padding:0;border:0}
.cbi-input-invalid,.cbi-value-error input{color:#f00;border-color:#f00!important}
.cbi-image-button{margin:10px 8px;vertical-align:middle}
.uneditable-input{background:#fafafa;border-color:#f2f2f2;color:#ccc;cursor:not-allowed}
.uneditable-input:active,.uneditable-input:focus{border-color:#f2f2f2}
.cbi-value-description{background-image:url(/luci-static/resources/cbi/help.gif);background-position:0 .3em;background-repeat:no-repeat;padding:0 1.2rem}
.cbi-value-description img{display:none;vertical-align:sub}
.cbi-page-actions{text-align:light;padding:10px 0} /* 保存按钮设置为左侧 */
.cbi-page-actions.right{float:inherit}
/* Button */ /* 各个按钮圆角颜色及添加阴影 */
.cbi-button { border-radius: 15px !important; display: inline-block; background: #fff; border: 2px solid #7ADD7A; border-radius: 2px; box-shadow: 0 4px 4px rgba(0, 0, 0, .0); color: #333; line-height: 16px; padding: 6px 12px; cursor: pointer; }
.cbi-button:active, .cbi-button:focus { border-color: #bbb; } /* 扫描按钮 */
.cbi-button-up, .cbi-input-up {
background-position: center;
background-image: url('../resources/cbi/up.gif'), linear-gradient(#3BB8ED, #3BB8ED 50%, #3BB8ED);
background-repeat: no-repeat;
}
.cbi-button-down, .cbi-input-down {
background-position: center;
background-image: url('../resources/cbi/down.gif'), linear-gradient(#3BB8ED, #3BB8ED 50%, #3BB8ED);
background-repeat: no-repeat;
}
.cbi-button-add, .cbi-input-add { background: #63AFF2; border-color: #63AFF2;border: dashed #778899 1.5px; color: #fff; } /* 添加按钮 */
.cbi-button-add:active, .cbi-button-add:focus, .cbi-input-add:active, .cbi-input-add:focus { border-color: #63AFF2; opacity: .8; }
.cbi-button-remove, .cbi-input-remove, .cbi-section-remove input { background: #B873B9; border-color: #B873B9;border: dashed #778899 1.5px; color: #fff; } /* 删除按钮 */
.cbi-button-remove:active, .cbi-button-remove:focus, .cbi-input-remove:active, .cbi-input-remove:focus, .cbi-section-remove input:active, .cbi-section-remove input:focus { border-color: #B873B9; opacity: .8; }
.cbi-button-reload, .cbi-input-reload { background: rgb(255,157,89); border-color: rgb(255,157,89); border: dashed #778899 1.5px;color: #fff; } /* 重启按钮 */
.cbi-button-reload:active, .cbi-button-reload:focus, .cbi-input-reload:active, .cbi-input-reload:focus { border-color: rgb(255,157,89); opacity: .8; }
.cbi-button-reset, .cbi-input-reset { background: #FF6060; border-color: #FF6060;border: dashed #778899 1.5px; color: #fff; } /* 复位按钮 */
.cbi-button-reset:active, .cbi-button-reset:focus, .cbi-input-reset:active, .cbi-input-reset:focus { border-color: #FF6060; opacity: .8; }
.cbi-button-edit, .cbi-input-edit { background: #6B72D8; border-color: #6B72D8;border: dashed #696969 1.5px; color: #fff; } /* 编辑修改按钮 */
.cbi-button-edit:active, .cbi-button-edit:focus, .cbi-input-edit:active, .cbi-input-edit:focus { border-color: #6B72D8; opacity: .8; }
.cbi-button-apply, .cbi-input-apply { background: rgb(129,192,128); border-color: rgb(129,192,128); border: dashed #778899 1.5px;color: #fff; } /* 保存应用按钮 */
.cbi-button-apply:active, .cbi-button-apply:focus, .cbi-input-apply:active, .cbi-input-apply:focus { border-color: rgb(129,192,128); opacity: .8; }
.cbi-button-save, .cbi-input-save { background: rgb(95,140,255); border-color: rgb(95,140,255);border: dashed #778899 1.5px;color: #fff; } /* 保存按钮 */
.cbi-button-save:active, .cbi-button-save:focus, .cbi-input-save:active, .cbi-input-save:focus { border-color: rgb(95,140,255); opacity: .8; }
/* Input Error */
.cbi-section-error{background:#fee;border:1px solid #f00;padding:10px}
.cbi-section-error ul{padding-left:20px}
.cbi-section-error ul li{color:#f00;list-style:disc}
/* Interface */
.ifacebox{text-align:center;margin-right:60px}
.ifacebox .ifacebox-head{border-bottom:1px solid #ccc;padding:2px;background:#eee}
.ifacebox .ifacebox-head.active{background:#b9b6eb}
.ifacebox .ifacebox-body{border:1px dashed #7B68EE;border-top:0;border-radius:0 0 4px 4px;padding:2px 10px}
.network-status-table .ifacebox-body{display:flex;flex-direction:column;height:100%;text-align:left}
.network-status-table .ifacebox{margin:.5em;flex-grow:1}
.ifacebox .ifacebox-body{padding:.25em}
.ifacebox {
background-color: #fff;
border: 1px solid #ccc;
margin: 0 10px;
text-align: center;
white-space: nowrap;
background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-flex;
flex-direction: column;
line-height: 1.2em;
min-width: 100px;
}
.ifacebadge {
display: inline-block;
flex-direction: row;
white-space: nowrap;
background-color: #fff;
border: 1px solid #ccc;
padding: 2px;
background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: default;
line-height: 1.2em;
}
.ifacebadge.large,.network-status-table .ifacebox-body .ifacebadge{display:inline-flex;flex:1;padding:.25em;min-width:220px;margin:.125em;float:left}
.ifacebadge img{width:16px;height:16px;vertical-align:middle}
.ifacebadge.large>*,.ifacebadge>*{margin:0 .125em}
.ifacebadge.large>*,.ifacebadge>*{margin:0 .125em}
.network-status-table{position:absolute;z-index:1000;left:-625pc;box-shadow:0 0 2px #ccc;border-radius:3px;background:#fff;white-space:pre;opacity:0;transition:opacity .25s ease-in;padding:2px 5px}
.cbi-tooltip{position:absolute;z-index:1000;left:-1000px;opacity:0;transition:opacity .25s ease-out}
.cbi-tooltip-container {
/* cursor: help; */
}
/* Firewall */
.zonebadge{display:inline-block;border-radius:4px;color:#333;white-space:nowrap;padding:0 8px;cursor:pointer}
.zonebadge em,.zonebadge strong{margin:0 5px}
.zonebadge-empty{border:2px dashed #ddd;color:#ddd;font-style:italic}
.zone-forwards{display:flex;flex-wrap:wrap}
.zone-forwards .zone-dest,.zone-forwards .zone-src{display:flex;flex-direction:column}
.zone-forwards>span{flex-basis:10%;text-align:center}
.zone-forwards>*{flex:1 1 40%;padding:1px}
/* Footer */ /* 最底栏颜色 */
footer{border-top:1.5px dashed #726bda;color:#FF6060;font-size: 12px;margin-top:10px;padding:10px 0 ;text-align:center}
footer a{color:#726bda}
footer a:hover{color:#B873B9}
/* diy */
#wan4_i,
#wan6_i {
vertical-align: top;
width: 50px !important;
}
/* login */
body.node-main-login {
background-image:url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-background-size: cover; /* IE 9 */
-moz-background-size: cover; /* Firefox */
-webkit-background-size: cover; /* Safari and Chrome */
-o-background-size: cover; /* Opera */
/* Global values */
-ms-padding-top: unset;
-moz-padding-top: unset;
-webkit-padding-top: unset;
-o-padding-top: unset;
}
body.node-main-login>header {
background: none;
border-bottom: none;
}
body.node-main-login .alert-message {
z-index: 999;
}
.node-main-login>.container>form {
width: 20rem;
display: inline-block;
padding: 1rem 1rem;
border-radius: .375rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: auto;
}
.node-main-login>.container>form .errorbox {
color: red;
}
.node-main-login > .container > form > .cbi-map > h2{
width: 110px;
height: 110px;
color: #fff;
text-align: center;
letter-spacing: 4px;
display: block;
margin: -100px auto 20px auto;
padding: 0;
text-indent: -500px;
overflow: hidden;
border-radius: 60px;
border: #118af3 2px solid;
background-image: url(wifi.png);
background-size: cover;
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}
.node-main-login > .container > form input[name='luci_username'], .node-main-login > .container > form input[name='luci_password'] {
background:unset;
color: #32CD32;
}
.node-main-login>.container>form>.cbi-map>.cbi-section {
display: inline-block;
}
.node-main-login>.container>footer {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin-top: 60px;
display: none;
}
.node-main-login>.container>form .cbi-page-actions {
text-align: center !important;
}
/* luci 19 */
body.modal-overlay-active {
overflow: hidden;
height: 100vh;
}
body.modal-overlay-active #modal_overlay {
visibility: visible;
left: 0;
right: 0;
opacity: 1;
}
body.modal-overlay-active #modal_overlay>.modal {
align-items: center;
box-shadow: 0 0 3px #444;
display: flex;
flex-wrap: wrap;
max-height: unset;
max-width: unset;
min-height: 32px;
min-width: 270px;
background: #d9d6ff !important;
border-radius: 3px;
padding: 1em;
margin: 0;
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%, -15%);
}
#modal_overlay {
visibility: hidden;
position: fixed;
top: 0;
bottom: 0;
left: -10000px;
right: 10000px;
background: rgba(0, 0, 0, 0.7);
z-index: 900;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transition: opacity .125s ease-in;
opacity: 0;
}
#modal_overlay>.modal.uci-dialog,
#modal_overlay>.modal.cbi-modal {
max-width: 900px;
}
/*.modal.alert-message.notice {
position: absolute;
padding: 15px;
margin-bottom: 10px;
background: #d9d6ff;
border: 1px solid rgba(0, 0, 0, .1);
border-width: 2px 0;
}*/
.modal>* {
flex-basis: 100%;
line-height: normal;
margin-bottom: .5em;
max-width: 100%;
}
#modal_overlay .modal>* {
flex-basis: 100%;
line-height: normal;
margin-bottom: .5em;
}
[data-tab-title] {
height: 0;
opacity: 0;
overflow: hidden;
}
[data-tab-active="true"],
.cbi-filebrowser.open {
height: auto;
opacity: 1;
overflow: visible;
transition: opacity .25s ease-in;
}
.tabs>li:not(.active),
.cbi-tabmenu>.cbi-tab-disabled {
color: #999;
}
.cbi-dynlist {
height: auto;
min-height: 30px;
display: inline-flex;
flex-direction: column;
}
.cbi-dropdown:not(.btn):not(.cbi-button),
.cbi-dynlist {
min-width: 210px;
max-width: 400px;
width: auto;
background: white;
border: 1px solid #118af3;
border-radius: 5px;
box-sizing: border-box;
padding: 0.3em !important;
}
.cbi-dynlist>.item {
margin-bottom: 4px;
box-shadow: 0 0 2px #ccc;
background: #fff;
border: 1px solid #118af3;
border-radius: 3px;
position: relative;
pointer-events: none;
padding: 2px 2em 2px 4px;
}
.cbi-dynlist>.item::after {
content: "×";
position: absolute;
display: inline-flex;
align-items: center;
top: -1px;
right: -1px;
bottom: -1px;
border: 1px solid #ccc;
border-radius: 0 3px 3px 0;
font-weight: 700;
color: #c44;
pointer-events: auto;
padding: 0 6px;
}
.cbi-dynlist>.add-item,
.td.cbi-section-actions>* {
display: flex;
}
.cbi-dynlist>.add-item>input,
.cbi-dynlist>.add-item>button {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cbi-dropdown.btn>.open,
.cbi-dropdown.cbi-button>.open {
margin-left: .5em;
border-left: 1px solid;
padding: 0 .5em;
}
.cbi-dropdown.btn>ul:not(.dropdown),
.cbi-dropdown.cbi-button>ul:not(.dropdown) {
margin: 0 0 0 13px !important;
}
.btn.primary,
.cbi-button-action.important,
.cbi-section-actions .cbi-button-edit {
color: #fff;
background: #726bda;
border: 1px solid #726bda;
}
.cbi-dropdown {
display: inline-flex !important;
cursor: pointer;
height: auto;
position: relative;
padding: 0 !important;
}
.cbi-progressbar {
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
min-width: 170px;
height: 20px;
background: #f9f9f9;
margin: 4px 0;
}
.cbi-progressbar>div {
background: #d9d6ff;
height: 100%;
transition: width .25s ease-in;
width: 0%;
}
.cbi-progressbar::after {
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
text-align: center;
text-shadow: 0 0 2px #fff;
content: attr(title);
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1,3 @@
// HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed
// Uncompressed source: https://github.com/aFarkas/html5shiv
(function(a,b){function f(a){var c,d,e,f;b.documentMode>7?(c=b.createElement("font"),c.setAttribute("data-html5shiv",a.nodeName.toLowerCase())):c=b.createElement("shiv:"+a.nodeName);while(a.firstChild)c.appendChild(a.childNodes[0]);for(d=a.attributes,e=d.length,f=0;f<e;++f)d[f].specified&&c.setAttribute(d[f].nodeName,d[f].nodeValue);c.style.cssText=a.style.cssText,a.parentNode.replaceChild(c,a),c.originalElement=a}function g(a){var b=a.originalElement;while(a.childNodes.length)b.appendChild(a.childNodes[0]);a.parentNode.replaceChild(b,a)}function h(a,b){b=b||"all";var c=-1,d=[],e=a.length,f,g;while(++c<e){f=a[c],g=f.media||b;if(f.disabled||!/print|all/.test(g))continue;d.push(h(f.imports,g),f.cssText)}return d.join("")}function i(c){var d=new RegExp("(^|[\\s,{}])("+a.html5.elements.join("|")+")","gi"),e=c.split("{"),f=e.length,g=-1;while(++g<f)e[g]=e[g].split("}"),b.documentMode>7?e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,'$1font[data-html5shiv="$2"]'):e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,"$1shiv\\:$2"),e[g]=e[g].join("}");return e.join("{")}var c=function(a){return a.innerHTML="<x-element></x-element>",a.childNodes.length===1}(b.createElement("a")),d=function(a,b,c){return b.appendChild(a),(c=(c?c(a):a.currentStyle).display)&&b.removeChild(a)&&c==="block"}(b.createElement("nav"),b.documentElement,a.getComputedStyle),e={elements:"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivDocument:function(a){a=a||b;if(a.documentShived)return;a.documentShived=!0;var f=a.createElement,g=a.createDocumentFragment,h=a.getElementsByTagName("head")[0],i=function(a){f(a)};c||(e.elements.join(" ").replace(/\w+/g,i),a.createElement=function(a){var b=f(a);return b.canHaveChildren&&e.shivDocument(b.document),b},a.createDocumentFragment=function(){return e.shivDocument(g())});if(!d&&h){var j=f("div");j.innerHTML=["x<style>","article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}","audio{display:none}","canvas,video{display:inline-block;*display:inline;*zoom:1}","[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}","mark{background:#FF0;color:#000}","</style>"].join(""),h.insertBefore(j.lastChild,h.firstChild)}return a}};e.shivDocument(b),a.html5=e;if(c||!a.attachEvent)return;a.attachEvent("onbeforeprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;b.namespaces.shiv||b.namespaces.add("shiv");var c=-1,d=new RegExp("^("+a.html5.elements.join("|")+")$","i"),e=b.getElementsByTagName("*"),g=e.length,j,k=i(h(function(a,b){var c=[],d=a.length;while(d)c.unshift(a[--d]);d=b.length;while(d)c.unshift(b[--d]);c.sort(function(a,b){return a.sourceIndex-b.sourceIndex}),d=c.length;while(d)c[--d]=c[d].styleSheet;return c}(b.getElementsByTagName("style"),b.getElementsByTagName("link"))));while(++c<g)j=e[c],d.test(j.nodeName)&&f(j);b.appendChild(b._shivedStyleSheet=b.createElement("style")).styleSheet.cssText=k}),a.attachEvent("onafterprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;var c=-1,d=b.getElementsByTagName("*"),e=d.length,f;while(++c<e)f=d[c],f.originalElement&&g(f);b._shivedStyleSheet&&b._shivedStyleSheet.parentNode.removeChild(b._shivedStyleSheet)})})(this,document)

View File

@ -0,0 +1,21 @@
header h3 a, header .brand {
display:none !important;
}
@media screen and (max-device-width: 600px) {
#maincontent.container {
margin-top: 30px;
}
}
@media screen and (max-device-width: 360px) {
#maincontent.container {
margin-top: 60px;
}
}
@media screen and (max-device-width: 200px) {
#maincontent.container {
margin-top: 230px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -0,0 +1,55 @@
<%#
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
Copyright 2018-2019 By Ameng
Licensed to the public under the Apache License 2.0.
-%>
<%
local ver = require "luci.version"
local disp = require "luci.dispatcher"
local request = disp.context.path
local category = request[1]
local tree = disp.node()
local categories = disp.node_childs(tree)
%>
<footer>
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
<% if #categories > 1 then %>
<ul class="breadcrumb pull-right" id="modemenu">
<% for i, r in ipairs(categories) do %>
<li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
<% end %>
</ul>
<% end %>
</footer>
</div>
</div>
</body>
<script>
window.onload = function(){
var content = document.getElementsByName("content");
var luci_username = document.getElementsByName("luci_username");
var luci_password = document.getElementsByName("luci_password");
if (content.length == 1 && luci_username.length == 1 && luci_password.length == 1) {
//需要登录
document.body.classList.add('node-main-login');
luci_username[0].parentElement.parentElement.classList.add('luci_username_div');
luci_username[0].parentElement.parentElement.children[0].style.display = "none";
luci_password[0].parentElement.parentElement.classList.add('luci_password_div');
luci_password[0].parentElement.parentElement.children[0].style.display = "none";
var errorbox = document.getElementsByClassName("errorbox");
if (errorbox.length == 1) {
var tips = document.getElementsByClassName("cbi-map-descr");
if (tips.length == 1) {
tips[0].innerHTML = errorbox[0].innerHTML;
tips[0].classList.add('errorbox');
errorbox[0].style.display = "none";
}
}
}
}
</script>
</html>

View File

@ -0,0 +1,204 @@
<%#
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
Copyright 2012 David Menting <david@nut-bolt.nl>
Licensed to the public under the Apache License 2.0.
-%>
<%
local sys = require "luci.sys"
local util = require "luci.util"
local http = require "luci.http"
local disp = require "luci.dispatcher"
local boardinfo = util.ubus("system", "board")
local request = disp.context.path
local request2 = disp.context.request
local category = request[1]
local cattree = category and disp.node(category)
local leaf = request2[#request2]
local tree = disp.node()
local node = disp.context.dispatched
local categories = disp.node_childs(tree)
local c = tree
local i, r
-- tag all nodes leading to this page
for i, r in ipairs(request) do
if c.nodes and c.nodes[r] then
c = c.nodes[r]
c._menu_selected = true
end
end
-- send as HTML5
http.prepare_content("text/html")
local function nodeurl(prefix, name, query)
local url = controller .. prefix .. name .. "/"
if query then
url = url .. http.build_querystring(query)
end
return pcdata(url)
end
local function subtree(prefix, node, level)
if not level then
level = 1
end
local childs = disp.node_childs(node)
if #childs > 0 then
if level > 2 then
%>
<ul class="tabs">
<%
end
local selected_node
local selected_name
local i, v
for i, v in ipairs(childs) do
local nnode = node.nodes[v]
if nnode._menu_selected then
selected_node = nnode
selected_name = v
end
if level > 2 then
%>
<li class="tabmenu-item-<%=v%><%- if nnode._menu_selected or (node.leaf and v == leaf) then %> active<% end %>">
<a href="<%=nodeurl(prefix, v, nnode.query)%>"><%=striptags(translate(nnode.title))%></a>
</li>
<% end
end
if level > 2 then
%>
</ul>
<% end
if selected_node then
subtree(prefix .. selected_name .. "/", selected_node, level + 1)
end
end
end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">
<head>
<meta charset="utf-8">
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
<!--[if lt IE 9]><script src="<%=media%>/html5.js"></script><![endif]-->
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="<%=media%>/cascade.css">
<link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %><link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%>
<% if css then %><style title="text/css">
<%-= css %>
</style>
<% end -%>
<script src="<%=resource%>/xhr.js"></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>">
<header>
<div class="fill">
<div class="container">
<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
<ul class="nav">
<%-
local function submenu(prefix, node)
local childs = disp.node_childs(node)
if #childs > 0 then
%>
<ul class="dropdown-menu">
<%-
for i, r in ipairs(childs) do
local nnode = node.nodes[r]
local href = controller .. prefix .. r ..
(nnode.query and http.build_querystring(nnode.query) or "")
%>
<li><a href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a></li>
<%-
end
%>
</ul>
<%-
end
end
childs = disp.node_childs(cattree)
if #childs > 0 then
for i, r in ipairs(childs) do
local nnode = cattree.nodes[r]
local href = controller .. "/" .. category .. "/" .. r ..
(nnode.query and http.build_querystring(k.query) or "")
local grandchildren = disp.node_childs(nnode)
if #grandchildren > 0 then
%>
<li class="dropdown">
<a class="menu" href="#"><%=pcdata(striptags(translate(nnode.title)))%></a>
<%- submenu("/" .. category .. "/" .. r .. "/", nnode) %>
</li>
<% else %>
<li>
<a href="<%=pcdata(href)%>"><%=pcdata(striptags(translate(nnode.title)))%></a>
</li>
<%
end
end
end
%>
</ul>
<%
-- calculate the number of unsaved changes
if tree.nodes[category] and tree.nodes[category].ucidata then
local ucichanges = 0
for i, j in pairs(require("luci.model.uci").cursor():changes()) do
for k, l in pairs(j) do
for m, n in pairs(l) do
ucichanges = ucichanges + 1;
end
end
end
%>
<div class="pull-right">
<% if ucichanges > 0 then %>
<a class="label notice" href="<%=controller%>/<%=category%>/uci/changes"><%:Unsaved Changes%>: <%=ucichanges%></a>
<% end %>
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
<span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span>
<span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span>
</span>
</div>
<% end %>
</div>
</div>
</header>
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
<div class="container">
<div class="alert-message warning">
<h4><%:No password set!%></h4>
<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br>
<a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a>
</div>
</div>
<%- end -%>
<div id="maincontent" class="container">
<% if category then subtree("/" .. category .. "/", cattree) end %>

View File

@ -0,0 +1,7 @@
#!/bin/sh
uci batch <<-EOF
set luci.themes.Light=/luci-static/Light
set luci.main.mediaurlbase=/luci-static/Light
commit luci
EOF
exit 0