luci-theme-Butterfly: add new theme
This commit is contained in:
CN_SZTL
parent
e0a065ff35
commit
9ae352b947
@ -37,7 +37,8 @@ NanoPi R1s(h5) support: [jerrykuku/openwrt-nanopi-r1s-h5](https://github.com/jer
|
||||
NanoPi support: [speedyworldclub/nlede](https://github.com/speedyworldclub/nlede).<br/>
|
||||
luci-theme-opentomato source: [Leo-Jo-My/luci-theme-opentomato](https://github.com/Leo-Jo-My/luci-theme-opentomato).<br/>
|
||||
luci-theme-opentomcat source: [Leo-Jo-My/luci-theme-opentomcat](https://github.com/Leo-Jo-My/luci-theme-opentomcat).<br/>
|
||||
qntfs-driver source: [lbbboy/qntfs-driver](https://github.com/lbbboy/qntfs-driver).
|
||||
qntfs-driver source: [lbbboy/qntfs-driver](https://github.com/lbbboy/qntfs-driver).<br/>
|
||||
luci-theme-Butterfly source: [Leo-Jo-My/luci-theme-Butterfly](https://github.com/Leo-Jo-My/luci-theme-Butterfly).
|
||||
|
||||
## License
|
||||
### Depending on their own License.
|
||||
|
||||
14
package/ctcgfw/luci-theme-Butterfly/Makefile
Normal file
14
package/ctcgfw/luci-theme-Butterfly/Makefile
Normal file
@ -0,0 +1,14 @@
|
||||
#
|
||||
# Copyright (C) 2008-2014 The LuCI Team <luci@lists.subsignal.org>
|
||||
#
|
||||
# This is free software, licensed under the Apache License, Version 2.0 .
|
||||
#
|
||||
|
||||
include $(TOPDIR)/rules.mk
|
||||
|
||||
LUCI_TITLE:=Butterfly Theme
|
||||
LUCI_DEPENDS:=
|
||||
|
||||
include $(TOPDIR)/feeds/luci/luci.mk
|
||||
|
||||
# call BuildPackage - OpenWrt buildroot signature
|
||||
@ -0,0 +1,76 @@
|
||||
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
|
||||
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
|
||||
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
|
||||
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
|
||||
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
|
||||
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4);
|
||||
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
|
||||
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
|
||||
.btn-block { width: 100%; display:block; }
|
||||
|
||||
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
|
||||
|
||||
body, html {
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-color:#0476A4;
|
||||
}
|
||||
.lin {
|
||||
margin: auto;
|
||||
padding: 15% 0 0;
|
||||
width:360px;
|
||||
height:300px;
|
||||
}
|
||||
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height:40px;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
|
||||
-webkit-transition: box-shadow .5s ease;
|
||||
-moz-transition: box-shadow .5s ease;
|
||||
-o-transition: box-shadow .5s ease;
|
||||
-ms-transition: box-shadow .5s ease;
|
||||
transition: box-shadow .5s ease;
|
||||
}
|
||||
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
|
||||
|
||||
#Hi{
|
||||
width: 200px;
|
||||
height:200px;
|
||||
margin: -10px;
|
||||
#padding: 5px;
|
||||
}
|
||||
|
||||
.land_logo {
|
||||
display: block;
|
||||
width: 360px;
|
||||
height: 105px;
|
||||
padding-bottom: 20px;
|
||||
background: transparent url("/luci-static/bootstrap/images/wifilogo.png") no-repeat scroll 0% 0%;
|
||||
}
|
||||
|
||||
.loginfoot {
|
||||
position: absolute;
|
||||
padding-top: 100px;
|
||||
text-align: left;
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
width: 600px;
|
||||
padding-right: 120px;
|
||||
left: -40px;
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
.main-nav {
|
||||
background: #3092c0;
|
||||
|
||||
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
|
||||
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
|
||||
/*-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
-ms-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
border-radius: 8px;*/
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.main-nav:after {
|
||||
clear: both;
|
||||
content: "\00a0";
|
||||
display: block;
|
||||
height: 0;
|
||||
font: 0px/0 serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-brand a {
|
||||
display: block;
|
||||
padding: 10px 10px 10px 20px;
|
||||
color: #fff;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
line-height: 29px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main-menu {
|
||||
clear: both;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#main-menu {
|
||||
float: right;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mobile menu top separator */
|
||||
|
||||
#main-menu:before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
font: 1px/1px sans-serif;
|
||||
overflow: hidden;
|
||||
background: #2e8cb8;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#main-menu:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mobile menu toggle button */
|
||||
|
||||
.main-menu-btn {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
text-indent: 29px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
/* hamburger icon */
|
||||
|
||||
.main-menu-btn-icon,
|
||||
.main-menu-btn-icon:before,
|
||||
.main-menu-btn-icon:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
height: 2px;
|
||||
width: 24px;
|
||||
background: #fff;
|
||||
-webkit-transition: all 0.25s;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.main-menu-btn-icon:before {
|
||||
content: '';
|
||||
top: -7px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main-menu-btn-icon:after {
|
||||
content: '';
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* x icon */
|
||||
|
||||
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
|
||||
height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
/* hide menu state checkbox (keep it visible to screen readers) */
|
||||
|
||||
#main-menu-state {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
|
||||
/* hide the menu in mobile view */
|
||||
|
||||
#main-menu-state:not(:checked) ~ #main-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main-menu-state:checked ~ #main-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* hide the button in desktop view */
|
||||
.main-menu-btn {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
}
|
||||
/* always show the menu in desktop view */
|
||||
#main-menu-state:not(:checked) ~ #main-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import 'mixins/_sub-items-indentation.scss';
|
||||
@import 'mixins/_round-corners-last-item.scss';
|
||||
@ -0,0 +1,586 @@
|
||||
// This file is best viewed with Tab size 4 code indentation
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
// 1. Theme Quick Settings (Variables)
|
||||
// (for further control, you will need to dig into the actual CSS in 2.)
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.1. Colors
|
||||
// ----------------------------------------------------------
|
||||
|
||||
$sm-blue__blue: #3092c0 !default;
|
||||
$sm-blue__blue-dark: darken($sm-blue__blue, 5%) !default;
|
||||
$sm-blue__blue-darker: #006892 !default;
|
||||
$sm-blue__blue-light: lighten($sm-blue__blue, 30%) !default;
|
||||
$sm-blue__white: #fff !default;
|
||||
$sm-blue__gray: darken($sm-blue__white, 34%) !default;
|
||||
|
||||
$sm-blue__text-shadow: rgba(0, 0, 0, 0.2) !default;
|
||||
$sm-blue__box-shadow: rgba(0, 0, 0, 0.2) !default;
|
||||
|
||||
$sm-blue__gradients_amount: 2% !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.2. Breakpoints
|
||||
// ----------------------------------------------------------
|
||||
|
||||
$sm-blue__desktop-vp: 768px !default; // switch from collapsible to desktop
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.3. Typography
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Import "PT Sans Narrow" font from Google fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
|
||||
|
||||
$sm-blue__font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif !default;
|
||||
$sm-blue__font-size-base: 18px !default;
|
||||
$sm-blue__font-size-small: 16px !default;
|
||||
$sm-blue__line-height: 23px !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.4. Borders
|
||||
// ----------------------------------------------------------
|
||||
|
||||
$sm-blue__border-width: 1px !default;
|
||||
$sm-blue__border-radius-base: 8px !default;
|
||||
$sm-blue__border-radius-small: 4px !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.5. Collapsible main menu
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Menu box
|
||||
$sm-blue__collapsible-bg: transparent !default;
|
||||
$sm-blue__collapsible-border-radius: $sm-blue__border-radius-base !default;
|
||||
$sm-blue__collapsible-box-shadow: 0 1px 4px $sm-blue__box-shadow !default;
|
||||
|
||||
// Items
|
||||
$sm-blue__collapsible-item-color: $sm-blue__white !default;
|
||||
$sm-blue__collapsible-item-bg: $sm-blue__blue !default;
|
||||
$sm-blue__collapsible-item-current-color: $sm-blue__white !default;
|
||||
$sm-blue__collapsible-item-current-bg: $sm-blue__blue-darker !default;
|
||||
$sm-blue__collapsible-item-disabled-color: lighten($sm-blue__blue, 30%) !default;
|
||||
$sm-blue__collapsible-item-padding-vertical: 10px !default;
|
||||
$sm-blue__collapsible-item-padding-horizontal: 20px !default;
|
||||
|
||||
// Toggle button (sub menu indicators)
|
||||
$sm-blue__collapsible-toggle-bg: rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.6. Collapsible sub menus
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Menu box
|
||||
$sm-blue__collapsible-sub-bg: $sm-blue__white !default;
|
||||
|
||||
// Items
|
||||
$sm-blue__collapsible-sub-item-color: $sm-blue__blue-dark !default;
|
||||
$sm-blue__collapsible-sub-item-bg: transparent !default;
|
||||
$sm-blue__collapsible-sub-item-current-color: $sm-blue__white !default;
|
||||
$sm-blue__collapsible-sub-item-current-bg: $sm-blue__blue-darker !default;
|
||||
$sm-blue__collapsible-sub-item-disabled-color: darken($sm-blue__white, 30%) !default;
|
||||
|
||||
// Items separators
|
||||
$sm-blue__collapsible-sub-separators-color: rgba(0, 0, 0, 0.05) !default;
|
||||
|
||||
// Items text indentation for deeper levels
|
||||
$sm-blue__collapsible-sub-item-indentation: 8px !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.7. Desktop main menu
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Menu box
|
||||
$sm-blue__desktop-bg: $sm-blue__blue !default;
|
||||
$sm-blue__desktop-border-radius: $sm-blue__border-radius-base !default;
|
||||
$sm-blue__desktop-box-shadow: 0 1px 1px $sm-blue__box-shadow !default;
|
||||
|
||||
// Items
|
||||
$sm-blue__desktop-item-color: $sm-blue__white !default;
|
||||
$sm-blue__desktop-item-bg: $sm-blue__blue !default;
|
||||
$sm-blue__desktop-item-hover-bg: darken($sm-blue__blue, 5%) !default;
|
||||
$sm-blue__desktop-item-current-color: $sm-blue__white !default;
|
||||
$sm-blue__desktop-item-current-bg: $sm-blue__blue-darker !default;
|
||||
$sm-blue__desktop-item-disabled-color: lighten($sm-blue__blue, 30%) !default;
|
||||
$sm-blue__desktop-item-padding-vertical: 13px !default;
|
||||
$sm-blue__desktop-item-padding-horizontal: 24px !default;
|
||||
|
||||
// Items separators
|
||||
$sm-blue__desktop-separators-size: 1px !default;
|
||||
$sm-blue__desktop-separators-color: darken($sm-blue__blue, 5%) !default;
|
||||
|
||||
// Sub menu indicators
|
||||
$sm-blue__desktop-arrow-size: 5px !default; // border-width
|
||||
$sm-blue__desktop-arrow-color: $sm-blue__blue-light !default;
|
||||
|
||||
// Vertical menu box
|
||||
$sm-blue__desktop-vertical-box-shadow: 0 1px 4px $sm-blue__box-shadow !default;
|
||||
|
||||
// Vertical items
|
||||
$sm-blue__desktop-vertical-item-padding-vertical: 9px !default;
|
||||
$sm-blue__desktop-vertical-item-padding-horizontal: 23px !default;
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 1.8. Desktop sub menus
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// Menu box
|
||||
$sm-blue__desktop-sub-bg: $sm-blue__white !default;
|
||||
$sm-blue__desktop-sub-border-color: $sm-blue__gray !default;
|
||||
$sm-blue__desktop-sub-border-radius: $sm-blue__border-radius-small !default;
|
||||
$sm-blue__desktop-sub-box-shadow: 0 5px 12px $sm-blue__box-shadow !default;
|
||||
$sm-blue__desktop-sub-padding-vertical: 7px !default;
|
||||
$sm-blue__desktop-sub-padding-horizontal: 0 !default;
|
||||
|
||||
// Items
|
||||
$sm-blue__desktop-sub-item-color: $sm-blue__blue-dark !default;
|
||||
$sm-blue__desktop-sub-item-bg: transparent !default;
|
||||
$sm-blue__desktop-sub-item-hover-color: $sm-blue__white !default;
|
||||
$sm-blue__desktop-sub-item-hover-bg: $sm-blue__blue !default;
|
||||
$sm-blue__desktop-sub-item-current-color: $sm-blue__white !default;
|
||||
$sm-blue__desktop-sub-item-current-bg: $sm-blue__blue-darker !default;
|
||||
$sm-blue__desktop-sub-item-disabled-color: darken($sm-blue__white, 30%) !default;
|
||||
$sm-blue__desktop-sub-item-padding-vertical: 9px !default;
|
||||
$sm-blue__desktop-sub-item-padding-horizontal: 23px !default;
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
// 2. Theme CSS
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 2.1. Collapsible mode (mobile first)
|
||||
// ----------------------------------------------------------
|
||||
|
||||
// calc item height and sub menus toggle button size
|
||||
$sm-blue__item-height: $sm-blue__line-height + $sm-blue__collapsible-item-padding-vertical * 2;
|
||||
// set toggle button size to 80% of item height
|
||||
$sm-blue__toggle-size: floor($sm-blue__item-height * 0.8);
|
||||
$sm-blue__toggle-spacing: floor($sm-blue__item-height * 0.1);
|
||||
|
||||
// Main menu box
|
||||
.sm-blue {
|
||||
background: $sm-blue__collapsible-bg;
|
||||
border-radius: $sm-blue__collapsible-border-radius;
|
||||
box-shadow: $sm-blue__collapsible-box-shadow;
|
||||
|
||||
// Main menu items
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
padding: $sm-blue__collapsible-item-padding-vertical $sm-blue__collapsible-item-padding-horizontal;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: $sm-blue__collapsible-item-padding-horizontal + $sm-blue__toggle-size + $sm-blue__toggle-spacing;
|
||||
background: $sm-blue__collapsible-item-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__collapsible-item-bg, $sm-blue__gradients_amount), darken($sm-blue__collapsible-item-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__collapsible-item-color;
|
||||
font-family: $sm-blue__font-family;
|
||||
font-size: $sm-blue__font-size-base;
|
||||
font-weight: bold;
|
||||
line-height: $sm-blue__line-height;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $sm-blue__text-shadow;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: $sm-blue__collapsible-item-current-bg;
|
||||
background-image: linear-gradient(to bottom, darken($sm-blue__collapsible-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__collapsible-item-current-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__collapsible-item-current-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $sm-blue__collapsible-item-disabled-color;
|
||||
}
|
||||
|
||||
// Toggle buttons (sub menu indicators)
|
||||
.sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(ceil($sm-blue__toggle-size / 2));
|
||||
left: auto;
|
||||
right: $sm-blue__toggle-spacing;
|
||||
width: $sm-blue__toggle-size;
|
||||
height: $sm-blue__toggle-size;
|
||||
overflow: hidden;
|
||||
font: bold #{$sm-blue__font-size-small}/#{$sm-blue__toggle-size} monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: $sm-blue__collapsible-toggle-bg;
|
||||
border-radius: $sm-blue__border-radius-small;
|
||||
}
|
||||
.sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
&.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
// round the corners of the first item
|
||||
> li:first-child > a, > li:first-child > :not(ul) a {
|
||||
border-radius: $sm-blue__collapsible-border-radius $sm-blue__collapsible-border-radius 0 0;
|
||||
}
|
||||
// round the corners of the last item
|
||||
@include sm-blue__round-corners-last-item($sm-blue__collapsible-border-radius);
|
||||
|
||||
// Sub menus box
|
||||
ul {
|
||||
background: $sm-blue__collapsible-sub-bg;
|
||||
|
||||
// darken the background of the 2+ level sub menus
|
||||
ul {
|
||||
background: rgba(darken($sm-blue__collapsible-sub-bg, 60%), 0.1);
|
||||
}
|
||||
|
||||
// Sub menus items
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $sm-blue__collapsible-sub-item-bg;
|
||||
color: $sm-blue__collapsible-sub-item-color;
|
||||
font-size: $sm-blue__font-size-small;
|
||||
text-shadow: none;
|
||||
// add indentation for sub menus text
|
||||
border-left: $sm-blue__collapsible-sub-item-indentation solid transparent;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: $sm-blue__collapsible-sub-item-current-bg;
|
||||
background-image: linear-gradient(to bottom, darken($sm-blue__collapsible-sub-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__collapsible-sub-item-current-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__collapsible-sub-item-current-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $sm-blue__collapsible-sub-item-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Add indentation for sub menus text for deeper levels
|
||||
@include sm-blue__sub-items-indentation($sm-blue__collapsible-sub-item-indentation);
|
||||
|
||||
// Sub menus items separators
|
||||
li {
|
||||
border-top: 1px solid $sm-blue__collapsible-sub-separators-color;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// :: 2.2. Desktop mode
|
||||
// ----------------------------------------------------------
|
||||
|
||||
@media (min-width: $sm-blue__desktop-vp) {
|
||||
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-blue ul{position:absolute;width:12em;}
|
||||
.sm-blue li{float:left;}
|
||||
.sm-blue.sm-rtl li{float:right;}
|
||||
.sm-blue ul li,.sm-blue.sm-rtl ul li,.sm-blue.sm-vertical li{float:none;}
|
||||
.sm-blue a{white-space:nowrap;}
|
||||
.sm-blue ul a,.sm-blue.sm-vertical a{white-space:normal;}
|
||||
.sm-blue .sm-nowrap > li > a,.sm-blue .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
|
||||
/* ...end */
|
||||
|
||||
// Main menu box
|
||||
.sm-blue {
|
||||
background: $sm-blue__desktop-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__desktop-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-bg, $sm-blue__gradients_amount));
|
||||
border-radius: $sm-blue__desktop-border-radius;
|
||||
box-shadow: $sm-blue__desktop-box-shadow;
|
||||
|
||||
// Main menu items
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.highlighted {
|
||||
padding: $sm-blue__desktop-item-padding-vertical $sm-blue__desktop-item-padding-horizontal;
|
||||
background: $sm-blue__desktop-item-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__desktop-item-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__desktop-item-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.highlighted {
|
||||
background: $sm-blue__desktop-item-hover-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__desktop-item-hover-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-hover-bg, $sm-blue__gradients_amount));
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: $sm-blue__desktop-item-current-bg;
|
||||
background-image: linear-gradient(to bottom, darken($sm-blue__desktop-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__desktop-item-current-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__desktop-item-current-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: $sm-blue__desktop-item-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__desktop-item-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__desktop-item-disabled-color;
|
||||
}
|
||||
|
||||
// Sub menu indicators
|
||||
.sub-arrow {
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -$sm-blue__desktop-arrow-size;
|
||||
right: auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: $sm-blue__desktop-arrow-size;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: $sm-blue__desktop-arrow-color transparent transparent transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
// reset mobile first style
|
||||
.sub-arrow::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// round the corners of the first and last items
|
||||
> li:first-child > a, > li:first-child > :not(ul) a {
|
||||
border-radius: $sm-blue__desktop-border-radius 0 0 $sm-blue__desktop-border-radius;
|
||||
}
|
||||
> li:last-child > a, > li:last-child > :not(ul) a {
|
||||
border-radius: 0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0 !important;
|
||||
}
|
||||
|
||||
// Main menu items separators
|
||||
> li {
|
||||
border-left: $sm-blue__desktop-separators-size solid $sm-blue__desktop-separators-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menus box
|
||||
ul {
|
||||
border: $sm-blue__border-width solid $sm-blue__desktop-sub-border-color;
|
||||
padding: $sm-blue__desktop-sub-padding-vertical $sm-blue__desktop-sub-padding-horizontal;
|
||||
background: $sm-blue__desktop-sub-bg;
|
||||
border-radius: 0 0 $sm-blue__desktop-sub-border-radius $sm-blue__desktop-sub-border-radius !important;
|
||||
box-shadow: $sm-blue__desktop-sub-box-shadow;
|
||||
|
||||
// 2+ sub levels need rounding of all corners
|
||||
ul {
|
||||
border-radius: $sm-blue__desktop-sub-border-radius !important;
|
||||
background: $sm-blue__desktop-sub-bg;
|
||||
}
|
||||
|
||||
// Sub menus items
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.highlighted {
|
||||
border: 0 !important;
|
||||
padding: $sm-blue__desktop-sub-item-padding-vertical $sm-blue__desktop-sub-item-padding-horizontal;
|
||||
background: $sm-blue__desktop-sub-item-bg;
|
||||
color: $sm-blue__desktop-sub-item-color;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.highlighted {
|
||||
background: $sm-blue__desktop-sub-item-hover-bg;
|
||||
background-image: linear-gradient(to bottom, lighten($sm-blue__desktop-sub-item-hover-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-sub-item-hover-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__desktop-sub-item-hover-color;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: $sm-blue__desktop-sub-item-current-bg;
|
||||
background-image: linear-gradient(to bottom, darken($sm-blue__desktop-sub-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__desktop-sub-item-current-bg, $sm-blue__gradients_amount));
|
||||
color: $sm-blue__desktop-sub-item-current-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: $sm-blue__desktop-sub-bg;
|
||||
color: $sm-blue__desktop-sub-item-disabled-color;
|
||||
}
|
||||
|
||||
// Sub menu indicators
|
||||
.sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -$sm-blue__desktop-arrow-size;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent $sm-blue__desktop-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
// No sub menus items separators
|
||||
li {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
|
||||
.scroll-up,
|
||||
.scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: $sm-blue__desktop-sub-bg;
|
||||
height: 20px;
|
||||
// width and position will be set automatically by the script
|
||||
}
|
||||
.scroll-up-arrow,
|
||||
.scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
// we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 8px; // tweak size of the arrow
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent $sm-blue__desktop-sub-item-color transparent;
|
||||
}
|
||||
.scroll-down-arrow {
|
||||
top: 6px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: $sm-blue__desktop-sub-item-color transparent transparent transparent;
|
||||
}
|
||||
|
||||
|
||||
// Rigth-to-left
|
||||
|
||||
// Main menu box
|
||||
&.sm-rtl {
|
||||
|
||||
// Vertical main menu items
|
||||
&.sm-vertical {
|
||||
a {
|
||||
// Sub menu indicators
|
||||
.sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent $sm-blue__desktop-arrow-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// round the corners of the first and last items
|
||||
> li:first-child > a, > li:first-child > :not(ul) a {
|
||||
border-radius: 0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0;
|
||||
}
|
||||
> li:last-child > a, > li:last-child > :not(ul) a {
|
||||
border-radius: $sm-blue__desktop-border-radius 0 0 $sm-blue__desktop-border-radius !important;
|
||||
}
|
||||
|
||||
// Main menu items separators
|
||||
> li {
|
||||
&:first-child {
|
||||
border-left: $sm-blue__desktop-separators-size solid $sm-blue__desktop-separators-color;
|
||||
}
|
||||
&:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menus box
|
||||
ul {
|
||||
a {
|
||||
// Sub menu indicators
|
||||
.sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent $sm-blue__desktop-arrow-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Vertical main menu
|
||||
|
||||
// Main menu box
|
||||
&.sm-vertical {
|
||||
box-shadow: $sm-blue__desktop-vertical-box-shadow;
|
||||
|
||||
// Main menu items
|
||||
a {
|
||||
padding: $sm-blue__desktop-vertical-item-padding-vertical $sm-blue__desktop-vertical-item-padding-horizontal;
|
||||
|
||||
// Sub menu indicators
|
||||
.sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -$sm-blue__desktop-arrow-size;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent $sm-blue__desktop-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
// round the corners of the first and last items
|
||||
> li:first-child > a, > li:first-child > :not(ul) a {
|
||||
border-radius: $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0 0;
|
||||
}
|
||||
> li:last-child > a, > li:last-child > :not(ul) a {
|
||||
border-radius: 0 0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius !important;
|
||||
}
|
||||
|
||||
// No main menu item separators
|
||||
> li {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
// Sub menus box
|
||||
ul {
|
||||
border-radius: $sm-blue__desktop-sub-border-radius !important;
|
||||
|
||||
// Sub menus items
|
||||
a {
|
||||
padding: $sm-blue__desktop-sub-item-padding-vertical $sm-blue__desktop-sub-item-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
// Generate rules to round the corners of the last collapsible item
|
||||
|
||||
@mixin sm-blue__round-corners-last-item($amount, $chainable: 'ul > li:last-child > ', $level: 4, $chain_prefix: '> li:last-child > ', $chain: '', $selector: '') {
|
||||
$chain: $chain_prefix;
|
||||
$selector: $chain + 'a, ' + $chain + '*:not(ul) a, ' + $chain + 'ul';
|
||||
@for $i from 1 through $level {
|
||||
$chain: $chain + $chainable;
|
||||
$selector: $selector + ',
|
||||
' + $chain + ' a, ' + $chain + '*:not(ul) a, ' + $chain + ' ul';
|
||||
}
|
||||
#{$selector} {
|
||||
border-radius: 0 0 $amount $amount;
|
||||
}
|
||||
// highlighted items, don't need rounding since their sub is open
|
||||
$chain: $chain_prefix;
|
||||
$selector: $chain + 'a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
|
||||
@for $i from 1 through $level {
|
||||
$chain: $chain + $chainable;
|
||||
$selector: $selector + ',
|
||||
' + $chain + ' a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
|
||||
}
|
||||
#{$selector} {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
// Generate rules to indent sub menus text
|
||||
//
|
||||
// We'll use left border to avoid messing with the padding.
|
||||
|
||||
@mixin sm-blue__sub-items-indentation($amount, $chainable: 'ul ', $level: 4, $chain: '') {
|
||||
@for $i from 1 through $level {
|
||||
$chain: $chain + $chainable;
|
||||
#{$chain} a,
|
||||
#{$chain} a:hover,
|
||||
#{$chain} a:focus,
|
||||
#{$chain} a:active {
|
||||
border-left: ($amount * ($i + 1)) solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,333 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
|
||||
.sm-blue {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
|
||||
padding: 10px 20px;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: 58px;
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 23px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a.disabled {
|
||||
color: #a1d1e8;
|
||||
}
|
||||
.sm-blue a .sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
left: auto;
|
||||
right: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
font: bold 16px/34px monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sm-blue a .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-blue a.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-blue ul {
|
||||
background: #fff;
|
||||
}
|
||||
.sm-blue ul ul {
|
||||
background: rgba(102, 102, 102, 0.1);
|
||||
}
|
||||
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
|
||||
background: transparent;
|
||||
color: #2b82ac;
|
||||
font-size: 16px;
|
||||
text-shadow: none;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
.sm-blue ul a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.disabled {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.sm-blue ul ul a,
|
||||
.sm-blue ul ul a:hover,
|
||||
.sm-blue ul ul a:focus,
|
||||
.sm-blue ul ul a:active {
|
||||
border-left: 16px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul a,
|
||||
.sm-blue ul ul ul a:hover,
|
||||
.sm-blue ul ul ul a:focus,
|
||||
.sm-blue ul ul ul a:active {
|
||||
border-left: 24px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul ul a,
|
||||
.sm-blue ul ul ul ul a:hover,
|
||||
.sm-blue ul ul ul ul a:focus,
|
||||
.sm-blue ul ul ul ul a:active {
|
||||
border-left: 32px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul ul ul a,
|
||||
.sm-blue ul ul ul ul ul a:hover,
|
||||
.sm-blue ul ul ul ul ul a:focus,
|
||||
.sm-blue ul ul ul ul ul a:active {
|
||||
border-left: 40px solid transparent;
|
||||
}
|
||||
.sm-blue ul li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.sm-blue ul li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-blue ul {
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.sm-blue li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sm-blue.sm-rtl li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-blue a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sm-blue ul a, .sm-blue.sm-vertical a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ...end */
|
||||
.sm-blue {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
|
||||
padding: 13px 24px;
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
|
||||
background: #2b82ac;
|
||||
background-image: linear-gradient(to bottom, #2d89b4, #297ca3);
|
||||
}
|
||||
.sm-blue a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a.disabled {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #a1d1e8;
|
||||
}
|
||||
.sm-blue a .sub-arrow {
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
right: auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #a1d1e8 transparent transparent transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-blue a .sub-arrow::before {
|
||||
display: none;
|
||||
}
|
||||
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
}
|
||||
.sm-blue > li {
|
||||
border-left: 1px solid #2b82ac;
|
||||
}
|
||||
.sm-blue > li:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-blue ul {
|
||||
border: 1px solid #a8a8a8;
|
||||
padding: 7px 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 4px 4px !important;
|
||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue ul ul {
|
||||
border-radius: 4px !important;
|
||||
background: #fff;
|
||||
}
|
||||
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
|
||||
border: 0 !important;
|
||||
padding: 9px 23px;
|
||||
background: transparent;
|
||||
color: #2b82ac;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.disabled {
|
||||
background: #fff;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.sm-blue ul a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #a1d1e8;
|
||||
}
|
||||
.sm-blue ul li {
|
||||
border: 0;
|
||||
}
|
||||
.sm-blue .scroll-up,
|
||||
.sm-blue .scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 20px;
|
||||
}
|
||||
.sm-blue .scroll-up-arrow,
|
||||
.sm-blue .scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 8px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #2b82ac transparent;
|
||||
}
|
||||
.sm-blue .scroll-down-arrow {
|
||||
top: 6px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #2b82ac transparent transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-rtl.sm-vertical a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #a1d1e8 transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
|
||||
border-radius: 8px 0 0 8px !important;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:first-child {
|
||||
border-left: 1px solid #2b82ac;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-blue.sm-rtl ul a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #a1d1e8 transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-vertical {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue.sm-vertical a {
|
||||
padding: 9px 23px;
|
||||
}
|
||||
.sm-blue.sm-vertical a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #a1d1e8;
|
||||
}
|
||||
.sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
|
||||
border-radius: 0 0 8px 8px !important;
|
||||
}
|
||||
.sm-blue.sm-vertical > li {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
.sm-blue.sm-vertical ul {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.sm-blue.sm-vertical ul a {
|
||||
padding: 9px 23px;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=sm-blue.css.map */
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["_sm-blue-theme.scss","mixins/_round-corners-last-item.scss","mixins/_sub-items-indentation.scss"],
|
||||
"names": [],
|
||||
"file": "sm-blue.css"
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
@import '_mixins.scss';
|
||||
|
||||
// the variables + the CSS
|
||||
@import '_sm-blue-theme.scss';
|
||||
@ -0,0 +1,14 @@
|
||||
/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
|
||||
You need this once per page no matter how many menu trees or different themes you use.
|
||||
-------------------------------------------------------------------------------------------*/
|
||||
|
||||
.sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
||||
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
|
||||
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
|
||||
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
|
||||
.sm ul{display:none;}
|
||||
.sm li,.sm a{position:relative;}
|
||||
.sm a{display:block;}
|
||||
.sm a.disabled{cursor:default;}
|
||||
.sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
|
||||
.sm *,.sm *::before,.sm *::after{box-sizing:inherit;}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 931 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
5
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/jquery.min.js
vendored
Normal file
5
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/jquery.smartmenus.min.js
vendored
Normal file
3
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/jquery.smartmenus.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/prefixfree.min.js
vendored
Normal file
18
package/ctcgfw/luci-theme-Butterfly/htdocs/luci-static/Butterfly/js/prefixfree.min.js
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* StyleFix 1.0.3 & PrefixFree 1.0.7
|
||||
* @author Lea Verou
|
||||
* MIT license
|
||||
*/
|
||||
(function(){function k(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),d=c.replace(/[^\/]+$/,""),h=(/^[a-z]{3,10}:/.exec(d)||[""])[0],l=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],g=/^([^?]*)\??/.exec(c)[1],m=a.parentNode,f=new XMLHttpRequest,n;f.onreadystatechange=function(){4===f.readyState&&
|
||||
n()};n=function(){var b=f.responseText;if(b&&a.parentNode&&(!f.status||400>f.status||600<f.status)){b=e.fix(b,!0,a);if(d)var b=b.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(b,a,c){return/^([a-z]{3,10}:|#)/i.test(c)?b:/^\/\//.test(c)?'url("'+h+c+'")':/^\//.test(c)?'url("'+l+c+'")':/^\?/.test(c)?'url("'+g+c+'")':'url("'+d+c+'")'}),c=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"),b=b.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+c,"gi"),"$1");c=document.createElement("style");c.textContent=
|
||||
b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));m.insertBefore(c,a);m.removeChild(a);c.media=a.media}};try{f.open("GET",c),f.send(null)}catch(p){"undefined"!=typeof XDomainRequest&&(f=new XDomainRequest,f.onerror=f.onprogress=function(){},f.onload=n,f.open("GET",c),f.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=
|
||||
a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){k('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);k("style").forEach(StyleFix.styleElement);k("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b,c){for(var d=0;d<e.fixers.length;d++)a=e.fixers[d](a,b,c)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-",
|
||||
"")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(b){return"-"+b.toLowerCase()})}};(function(){setTimeout(function(){k('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
|
||||
(function(k){function e(b,c,d,h,l){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+d,"gi"),l=l.replace(b,h));return l}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c,d){var h=a.prefix;-1<a.functions.indexOf("linear-gradient")&&(b=b.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(b,a,c,d){return a+(c||"")+"linear-gradient("+(90-d)+"deg"}));b=e("functions","(\\s|:|,)","\\s*\\(","$1"+h+"$2(",b);b=e("keywords","(\\s|:)","(\\s|;|\\}|$)",
|
||||
"$1"+h+"$2$3",b);b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+h+"$2:",b);if(a.properties.length){var l=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi");b=e("valueProperties","\\b",":(.+?);",function(a){return a.replace(l,h+"$1")},b)}c&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+h+"$1",b));b=b.replace(RegExp("-"+h,"g"),"-");return b=b.replace(/-\*-(?=[a-z]+)/gi,a.prefix)},property:function(b){return(0<=a.properties.indexOf(b)?a.prefix:"")+b},value:function(b,c){b=
|
||||
e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b);0<=a.valueProperties.indexOf(c)&&(b=e("properties","(^|\\s|,)","($|\\s|,)","$1"+a.prefix+"$2$3",b));return b},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,c){var d=a.prefix+b;return c?StyleFix.camelCase(d):d}};(function(){var b={},c=[],d=getComputedStyle(document.documentElement,null),h=document.createElement("div").style,
|
||||
l=function(a){if("-"===a.charAt(0)){c.push(a);a=a.split("-");var d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in h&&-1===c.indexOf(d)&&c.push(d)}};if(0<d.length)for(var g=0;g<d.length;g++)l(d[g]);else for(var e in d)l(StyleFix.deCamelCase(e));var g=0,f,k;for(k in b)d=b[k],g<d&&(f=k,g=d);a.prefix="-"+f+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(f=e.slice(a.prefix.length),StyleFix.camelCase(f)in
|
||||
h||a.properties.push(f));!("Ms"!=a.Prefix||"transform"in h||"MsTransform"in h)&&"msTransform"in h&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){h[b]="";h[b]=a;return!!h[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=
|
||||
c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var d={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","max-content":"width","min-content":"width","fit-content":"width","fill-available":"width"};a.functions=[];a.keywords=[];var h=document.createElement("div").style,e;for(e in c){var g=c[e],k=g.property,g=e+"("+g.params+")";!b(g,k)&&
|
||||
b(a.prefix+g,k)&&a.functions.push(e)}for(var f in d)k=d[f],!b(f,k)&&b(a.prefix+f,k)&&a.keywords.push(f)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},d={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=k.appendChild(document.createElement("style")),l;for(l in c){var g=l+(c[l]?"("+c[l]+")":"");!b(g)&&b(a.prefixSelector(g))&&a.selectors.push(l)}for(var m in d)g=
|
||||
m+" "+(d[m]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(m);k.removeChild(e)})();a.valueProperties=["transition","transition-property"];k.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
|
||||
@ -0,0 +1,236 @@
|
||||
/**
|
||||
* Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
|
||||
*
|
||||
* luci-theme-material
|
||||
* Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
*
|
||||
* Have a bug? Please create an issue here on GitHub!
|
||||
* https://github.com/LuttyYang/luci-theme-material/issues
|
||||
*
|
||||
* luci-theme-bootstrap:
|
||||
* Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
* Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
*
|
||||
* MUI:
|
||||
* https://github.com/muicss/mui
|
||||
*
|
||||
* Licensed to the public under the Apache License 2.0
|
||||
*/
|
||||
(function ($) {
|
||||
$(".main > .loading").fadeOut();
|
||||
|
||||
/**
|
||||
* trim text, Remove spaces, wrap
|
||||
* @param text
|
||||
* @returns {string}
|
||||
*/
|
||||
function trimText(text) {
|
||||
return text.replace(/[ \t\n\r]+/g, " ");
|
||||
}
|
||||
|
||||
|
||||
var lastNode = undefined;
|
||||
var mainNodeName = undefined;
|
||||
|
||||
var nodeUrl = "";
|
||||
(function(node){
|
||||
if (node[0] == "admin"){
|
||||
luciLocation = [node[1], node[2]];
|
||||
}else{
|
||||
luciLocation = node;
|
||||
}
|
||||
|
||||
for(var i in luciLocation){
|
||||
nodeUrl += luciLocation[i];
|
||||
if (i != luciLocation.length - 1){
|
||||
nodeUrl += "/";
|
||||
}
|
||||
}
|
||||
})(luciLocation);
|
||||
|
||||
/**
|
||||
* get the current node by Burl (primary)
|
||||
* @returns {boolean} success?
|
||||
*/
|
||||
function getCurrentNodeByUrl() {
|
||||
var ret = false;
|
||||
if (!$('body').hasClass('logged-in')) {
|
||||
luciLocation = ["Main", "Login"];
|
||||
return true;
|
||||
}
|
||||
|
||||
$(".main > .main-left > .nav > .slide > .menu").each(function () {
|
||||
var ulNode = $(this);
|
||||
ulNode.next().find("a").each(function () {
|
||||
var that = $(this);
|
||||
var href = that.attr("href");
|
||||
|
||||
if (href.indexOf(nodeUrl) != -1) {
|
||||
ulNode.click();
|
||||
ulNode.next(".slide-menu").stop(true, true);
|
||||
lastNode = that.parent();
|
||||
lastNode.addClass("active");
|
||||
ret = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .menu").click(function () {
|
||||
var ul = $(this).next(".slide-menu");
|
||||
var menu = $(this);
|
||||
if (!ul.is(":visible")) {
|
||||
menu.addClass("active");
|
||||
ul.addClass("active");
|
||||
ul.stop(true).slideDown("fast");
|
||||
} else {
|
||||
ul.stop(true).slideUp("fast", function () {
|
||||
menu.removeClass("active");
|
||||
ul.removeClass("active");
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* hook menu click and add the hash
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).parent().addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
return true;
|
||||
});
|
||||
|
||||
/**
|
||||
* fix menu click
|
||||
*/
|
||||
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
|
||||
if (lastNode != undefined) lastNode.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
window.location = $($(this).find("a")[0]).attr("href");
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* get current node and open it
|
||||
*/
|
||||
if (getCurrentNodeByUrl()) {
|
||||
mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
|
||||
mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
|
||||
$("body").addClass(mainNodeName);
|
||||
}
|
||||
$(".cbi-button-up").val("⇧");
|
||||
$(".cbi-button-down").val("⇩");
|
||||
|
||||
|
||||
/**
|
||||
* hook other "A Label" and add hash to it.
|
||||
*/
|
||||
$("#maincontent > .container").find("a").each(function () {
|
||||
var that = $(this);
|
||||
var onclick = that.attr("onclick");
|
||||
if (onclick == undefined || onclick == "") {
|
||||
that.click(function () {
|
||||
var href = that.attr("href");
|
||||
if (href.indexOf("#") == -1) {
|
||||
$(".main > .loading").fadeIn("fast");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Sidebar expand
|
||||
*/
|
||||
var showSide = false;
|
||||
$(".showSide").click(function () {
|
||||
if (showSide) {
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "0"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
showSide = false;
|
||||
} else {
|
||||
$(".darkMask").stop(true).fadeIn("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "15rem"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "hidden");
|
||||
showSide = true;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(".darkMask").click(function () {
|
||||
if (showSide) {
|
||||
showSide = false;
|
||||
$(".darkMask").stop(true).fadeOut("fast");
|
||||
$(".main-left").stop(true).animate({
|
||||
width: "0"
|
||||
}, "fast");
|
||||
$(".main-right").css("overflow-y", "auto");
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
if ($(window).width() > 921) {
|
||||
$(".main-left").css("width", "");
|
||||
$(".darkMask").stop(true);
|
||||
$(".darkMask").css("display", "none");
|
||||
showSide = false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* fix legend position
|
||||
*/
|
||||
$("legend").each(function () {
|
||||
var that = $(this);
|
||||
that.after("<span class='panel-title'>" + that.text() + "</span>");
|
||||
});
|
||||
|
||||
$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
|
||||
var that = $(this);
|
||||
if (that.text().trim() == ""){
|
||||
that.css("display", "none");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
$("input").attr("size", "0");
|
||||
|
||||
if (mainNodeName != undefined) {
|
||||
console.log(mainNodeName);
|
||||
switch (mainNodeName) {
|
||||
case "node-status-system_log":
|
||||
case "node-status-kernel_log":
|
||||
$("#syslog").focus(function () {
|
||||
$("#syslog").blur();
|
||||
$(".main-right").focus();
|
||||
$(".main-right").blur();
|
||||
});
|
||||
break;
|
||||
case "node-status-firewall":
|
||||
var button = $(".node-status-firewall > .main fieldset li > a");
|
||||
button.addClass("cbi-button cbi-button-reset a-to-btn");
|
||||
break;
|
||||
case "node-system-reboot":
|
||||
var button = $(".node-system-reboot > .main > .main-right p > a");
|
||||
button.addClass("cbi-button cbi-input-reset a-to-btn");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
@ -0,0 +1,166 @@
|
||||
<%#
|
||||
|
||||
luci-theme-Butterfly
|
||||
Copyright 2017 Tracemouse <tracemouse@wcan.in>
|
||||
|
||||
Smart Menu:
|
||||
https://www.smartmenus.org/
|
||||
|
||||
Font Awesome:
|
||||
http://fontawesome.io/
|
||||
|
||||
|
||||
luci-theme-material
|
||||
Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
|
||||
luci-theme-bootstrap:
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
|
||||
MUI:
|
||||
https://github.com/muicss/mui
|
||||
|
||||
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)
|
||||
%>
|
||||
</div>
|
||||
<footer class="mobile-hide" style="text-align:center">
|
||||
<a href="https://github.com/openwrt/luci">Powered by LeoJo <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
|
||||
<a href="http://butong.me/"><%= ver.distversion %></a> /
|
||||
<% 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>
|
||||
|
||||
<script>
|
||||
// thanks for Jo-Philipp Wich <jow@openwrt.org>
|
||||
var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
|
||||
</script>
|
||||
<script src="<%=media%>/js/jquery.min.js?v=git-17.016.25656-a85807d"></script>
|
||||
<script src="<%=media%>/js/script.js?v=git-17.016.25656-a85807d"></script>
|
||||
<script src="<%=media%>/js/jquery.smartmenus.min.js?v=git-20.033.33881-3c72cd1"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// SmartMenus init
|
||||
$(function() {
|
||||
$('#main-menu').smartmenus({
|
||||
subMenusSubOffsetX: 1,
|
||||
subMenusSubOffsetY: -8
|
||||
});
|
||||
});
|
||||
|
||||
// SmartMenus mobile menu toggle button
|
||||
$(function() {
|
||||
var $mainMenuState = $('#main-menu-state');
|
||||
if ($mainMenuState.length) {
|
||||
// animate mobile menu
|
||||
$mainMenuState.change(function(e) {
|
||||
var $menu = $('#main-menu');
|
||||
if (this.checked) {
|
||||
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
|
||||
} else {
|
||||
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
|
||||
}
|
||||
});
|
||||
// hide mobile menu beforeunload
|
||||
$(window).bind('beforeunload unload', function() {
|
||||
if ($mainMenuState[0].checked) {
|
||||
$mainMenuState[0].click();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//onload
|
||||
$(document).ready(function(){
|
||||
//add icon for login title
|
||||
str=$(".node-main-login > .main form > div > h2").html();
|
||||
str="<i class='fa fa-lock'></i> " + str;
|
||||
$(".node-main-login > .main form > div > h2").html(str);
|
||||
|
||||
//add icons for navbar
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='新春版客户端'] > i";
|
||||
$(status).attr("class","fa fa-windows");
|
||||
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Status'] > i";
|
||||
$(status).attr("class","fa fa-university");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='System'] > i";
|
||||
$(status).attr("class","fa fa-cogs");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Docker'] > i";
|
||||
$(status).attr("class","fa fa-cubes");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Control'] > i";
|
||||
$(status).attr("class","fa fa-life-ring");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='NAS'] > i";
|
||||
$(status).attr("class","fa fa-recycle");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='VPN'] > i";
|
||||
$(status).attr("class","fa fa-paper-plane-o");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Services'] > i";
|
||||
$(status).attr("class","fa fa-sitemap");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Network'] > i";
|
||||
$(status).attr("class","fa fa-globe");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Bandwidth Monitor'] > i";
|
||||
$(status).attr("class","fa fa-gg-circle");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='QOS'] > i";
|
||||
$(status).attr("class","fa fa-drupal");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Quick Guide'] > i";
|
||||
$(status).attr("class","fa fa-paper-plane");
|
||||
|
||||
status = ".main-nav > #main-menu > .slide > a[data-title='Logout'] > i";
|
||||
$(status).attr("class","fa fa-mail-reply-all");
|
||||
|
||||
//icons
|
||||
/*
|
||||
$('img').each(function(){
|
||||
img = $(this).attr('src');
|
||||
//alert(img);
|
||||
if (img.indexOf("images/wifi.png"))
|
||||
{
|
||||
$(this).after("<i class='fa fa-wifi'></i>");
|
||||
$(this).remove();
|
||||
}
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?9d64293436438b5ccd227072050a13a7";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,243 @@
|
||||
<%#
|
||||
|
||||
luci-theme-Butterfly
|
||||
Copyright 2017 Tracemouse <tracemouse@wcan.in>
|
||||
|
||||
Smart Menu:
|
||||
https://www.smartmenus.org/
|
||||
|
||||
Font Awesome:
|
||||
http://fontawesome.io/
|
||||
|
||||
|
||||
luci-theme-material
|
||||
Copyright 2015 Lutty Yang <lutty@wcan.in>
|
||||
|
||||
luci-theme-bootstrap:
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
|
||||
MUI:
|
||||
https://github.com/muicss/mui
|
||||
|
||||
Licensed to the public under the Apache License 2.0
|
||||
-%>
|
||||
|
||||
<%
|
||||
local ver = require "luci.version"
|
||||
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>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
|
||||
<meta name="format-detection" content="telephone=no, email=no"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<meta name="full-screen" content="yes">
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<meta name="browsermode" content="application">
|
||||
<meta name="theme-color" content="#0099CC">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<meta name="msapplication-TileColor" content="#0099CC">
|
||||
|
||||
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
|
||||
<meta name="msapplication-TileImage" content="<%=media%>/images/favicon.png"/>
|
||||
<link rel="icon" href="<%=media%>/images/favicon.png" sizes="144x144">
|
||||
<link rel="apple-touch-icon-precomposed" href="<%=media%>/images/favicon.png" sizes="144x144">
|
||||
|
||||
<link href='<%=media%>/css/sm-core-css.css' rel='stylesheet' type='text/css' />
|
||||
<link href='<%=media%>/css/sm-blue/sm-blue.css' rel='stylesheet' type='text/css' />
|
||||
<link href='<%=media%>/css/mainmenu.css' rel='stylesheet' type='text/css' />
|
||||
|
||||
<link href='<%=media%>/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css' />
|
||||
|
||||
<link rel="stylesheet" href="<%=media%>/css/style.css?v=git-17.016.25656-a85807d">
|
||||
<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?v=git-17.016.25656-a85807d"></script>
|
||||
<script src="<%=media%>/js/jquery.min.js?v=1.0"></script>
|
||||
</head>
|
||||
|
||||
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>">
|
||||
|
||||
<div class="header-logo">
|
||||
<div class="container"><img src="<%=media%>/images/logo.png" style="margin-top:0px;"></div>
|
||||
</div>
|
||||
|
||||
<nav class="main-nav" role="navigation">
|
||||
|
||||
<!-- Mobile menu toggle button (hamburger/x icon) -->
|
||||
<input id="main-menu-state" type="checkbox" />
|
||||
<label class="main-menu-btn" for="main-menu-state">
|
||||
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
|
||||
</label>
|
||||
|
||||
<p class="nav-brand"><a href="/cgi-bin/luci/"><%=striptags( (boardinfo.hostname or "?") ) %></a></p>
|
||||
|
||||
<ul id="main-menu" class="sm sm-blue">
|
||||
<%-
|
||||
local function submenu(prefix, node)
|
||||
local childs = disp.node_childs(node)
|
||||
if #childs > 0 then
|
||||
%>
|
||||
<ul class="slide-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 data-title="<%=pcdata(striptags(nnode.title))%>" 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="slide">
|
||||
<a class="menu" data-title="<%=pcdata(striptags(nnode.title))%>" href="#">
|
||||
<i class="fa fa-gear"></i>
|
||||
<%=pcdata(striptags(translate(nnode.title)))%>
|
||||
</a>
|
||||
<%- submenu("/" .. category .. "/" .. r .. "/", nnode) %>
|
||||
</li>
|
||||
<% else %>
|
||||
<li class="slide">
|
||||
<a class="menu" data-title="<%=pcdata(striptags(nnode.title))%>" href="<%=href%>">
|
||||
<i class="fa fa-window-close-o"></i>
|
||||
<%=pcdata(striptags(translate(nnode.title)))%></a>
|
||||
</li>
|
||||
|
||||
<%
|
||||
end
|
||||
end
|
||||
end
|
||||
%>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="main">
|
||||
<div style="" class="loading"><span><div class="loading-img"></div>Loading...</span></div>
|
||||
<div class="main-right">
|
||||
<div class="darkMask"></div>
|
||||
<div id="maincontent">
|
||||
<div class="container">
|
||||
<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
|
||||
<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>
|
||||
<%- end -%>
|
||||
<% if category then subtree("/" .. category .. "/", cattree) end %>
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
<%#
|
||||
不同生活(a@lce.cc)
|
||||
-%>
|
||||
|
||||
<%
|
||||
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
|
||||
-%>
|
||||
|
||||
<html lang="<%=luci.i18n.context.lang%>">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; 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%>/js/html5.js"></script><![endif]-->
|
||||
<script src="<%=media%>/js/prefixfree.min.js" type="text/javascript" ></script>
|
||||
<link rel="stylesheet" href="<%=media%>/css/loginstyle.css">
|
||||
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
|
||||
<meta name="msapplication-TileImage" content="<%=media%>/images/favicon.png"/>
|
||||
<link rel="icon" href="<%=media%>/images/favicon.png" sizes="144x144">
|
||||
<link rel="apple-touch-icon-precomposed" href="<%=media%>/images/favicon.png" sizes="144x144">
|
||||
</head>
|
||||
|
||||
<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>">
|
||||
|
||||
|
||||
|
||||
<% if category then subtree("/" .. category .. "/", cattree) end %>
|
||||
<div class="lin">
|
||||
<form method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
|
||||
<div class="land_logo"></div>
|
||||
<div class="input">
|
||||
<input class="text_value" name="luci_username" required="required" type="text" value="<%=duser%>" />
|
||||
<input class="text_value" name="luci_password" required="required" type="password" placeholder="默认密码butongwifi" />
|
||||
</div>
|
||||
<input type="submit" value="<%:Login%>" class="btn btn-primary btn-block btn-large" />
|
||||
|
||||
|
||||
<%- if fuser then %>
|
||||
<div class="error"><%:Invalid username and/or password! Please try again.%></div>
|
||||
<br />
|
||||
<% end -%>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
var input = document.getElementsByName('luci_password')[0];
|
||||
if (input)
|
||||
input.focus();
|
||||
//]]></script>
|
||||
|
||||
<%
|
||||
local uci = require "luci.model.uci".cursor()
|
||||
local fs = require "nixio.fs"
|
||||
local https_key = uci:get("uhttpd", "main", "key")
|
||||
local https_port = uci:get("uhttpd", "main", "listen_https")
|
||||
if type(https_port) == "table" then
|
||||
https_port = https_port[1]
|
||||
end
|
||||
|
||||
if https_port and fs.access(https_key) then
|
||||
https_port = https_port:match("(%d+)$")
|
||||
%>
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
if (document.location.protocol != 'https:') {
|
||||
var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
|
||||
var img=new Image;
|
||||
img.onload=function(){window.location = url};
|
||||
img.src='https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
|
||||
setTimeout(function(){
|
||||
img.src=''
|
||||
}, 5000);
|
||||
}
|
||||
//]]></script>
|
||||
|
||||
<% end %>
|
||||
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
#!/bin/sh
|
||||
uci batch <<-EOF
|
||||
set luci.themes.Butterflyi=/luci-static/Butterfly
|
||||
set luci.main.mediaurlbase=/luci-static/Butterfly
|
||||
commit luci
|
||||
EOF
|
||||
exit 0
|
||||
Loading…
Reference in New Issue
Block a user