/** * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI * * luci-theme-material * Copyright 2015 Lutty Yang * * 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 * Copyright 2008 Jo-Philipp Wich * Copyright 2012 David Menting * * MUI: * https://github.com/muicss/mui * * Licensed to the public under the Apache License 2.0 */ /* * Font generate by Icomoon */ @font-face { font-family: 'icomoon'; src: url('../fonts/font.eot'); src: url('../fonts/font.eot') format('embedded-opentype'), url('../fonts/font.ttf') format('truetype'), url('../fonts/font.woff') format('woff'), url('../fonts/font.svg') format('svg'); font-weight: normal; font-style: normal; } .cbi-button-up, .cbi-button-down, .cbi-value-helpicon, .showSide, [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; speak: none; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { margin: 0; padding: 0; font-size: 1rem; font-size: 100%; box-sizing: border-box; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } html, body { margin: 0px; padding: 0px; height: 100%; font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } select { padding: 0.36rem 0.8rem; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; } input { padding: 0.36rem 0.5rem; } code { color: #0099CC; } abbr { color: #0099CC; text-decoration: underline; cursor: help; } header, footer, .main { width: 100%; position: absolute; } header { height: 4rem; box-shadow: 0 2px 5px rgba(0, 0, 0, .26); transition: box-shadow .2s; float: left; position: fixed; z-index: 101; } .main { top: 4rem; bottom: 0rem; } .main-left { float: left; width: 15%; width: calc(0% + 17rem); height: 100%; overflow-y: auto; background-color: white; } .main-right { width: 85%; width: calc(100% - 17rem); float: right; overflow-y: auto; height: 100%; background-color: #EEE; } .pull-right { float: right; } .pull-left { float: left; } header { background: #0099CC; color: white; } header > .container { margin-top: 0.5rem; padding: 0.5rem 1rem 0 1rem; } header > .container > .brand { font-size: 1.5rem; color: white; text-decoration: none; cursor: default; vertical-align: text-bottom; } .warning { background-color: #FF7D60 !important; color: #FFF; } .errorbox, .alert-message { margin: 2rem 0 0 0; padding: 2rem; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; min-width: inherit; overflow: auto; border-radius: 0; background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } .errorbox{ color: #fff; background-color: #f0ad4e; border-color: #eea236; } #maincontent > .container > div:nth-child(1).alert-message.warning > a { box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; min-width: 6rem; padding: 0.5rem 1rem; font-size: 1.1rem; line-height: 1.42857143; color: #fff; background-color: #5bc0de; border-color: #46b8da; margin-top: 2rem; text-decoration: inherit; } .main > .main-left > .nav { margin-top: 0.5rem; } .main > .main-left > .nav > li a { color: #404040; } .main > .main-left > .nav > li:nth-last-child(1) { margin-top: 2rem; } .main > .main-left > .nav > li { padding: 0.5rem 1rem; cursor: pointer; } .main > .main-left > .nav > .slide { padding: 0; } .main > .main-left > .nav > .slide > ul { display: none; } .main > .main-left > .nav > .slide > .menu { display: block; padding: 0.5rem 1rem; text-decoration: none; cursor: default; font-size: 1.2rem; } .main > .main-left > .nav > li:hover, .main > .main-left > .nav > .slide > .menu:hover { background: #D4D4D4; } .main > .main-left > .nav > .slide:hover { background: none; } .main > .main-left > .nav > .slide > .slide-menu > li { padding: 0.4rem 2rem; } .main > .main-left > .nav > .slide > .slide-menu > .active { background-color: #0099CC; } .main > .main-left > .nav > .slide > .slide-menu > li > a { text-decoration: none; white-space: nowrap; } .main > .main-left > .nav > .slide > .slide-menu > .active > a { color: white; } .main > .main-left > .nav > .slide > .slide-menu > li:hover { background: #D4D4D4; } .main > .main-left > .nav > .slide > .slide-menu > .active:hover { background-color: #0099CC; cursor: hand; } li { list-style-type: none; } #maincontent > .container { margin: 0 2rem 3rem 2rem; } h1 { font-size: 4rem; padding-bottom: 10px; border-bottom: 1px solid #eee; } h2 { margin: 2rem 0 0 0; font-size: 2.5rem; padding-bottom: 10px; border-bottom: 1px solid #eee; } h3 { margin: 2rem 0 0 0; font-size: 2rem; padding-bottom: 10px; } h4 { } fieldset { margin: 2rem 0 0 0; padding: 2rem; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; min-width: inherit; overflow: auto; border-radius: 0; background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } fieldset > legend { display: none !important; } fieldset > fieldset { margin: 0; padding: 0; border: none; box-shadow: none; } .panel-title { width: 100%; display: block; line-height: 1; color: #404040; font-size: 1.9rem; padding-bottom: 2rem; border-bottom: 1px solid #eee; } table { border-spacing: 0; border-collapse: collapse; width: 100%; border: 1px solid #eee; } table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th { padding: 8px; line-height: 1.42857143; border-top: 1px solid #ddd; white-space: nowrap; } .cbi-section-table-cell { text-align: center; } .cbi-section-table-row { text-align: center; } fieldset > table > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; } footer { position: fixed; z-index: 1000; bottom: 0; left: 0; } /* fix progress bar */ #memfree > div, #membuff > div, #conns > div, #memtotal > div { width: 100% !important; height: 1.4rem !important; } #memfree > div > div, #membuff > div > div, #conns > div > div, #memtotal > div > div { height: 1.4rem !important; background-color: #0099CC !important; } /* fix multiple table */ table table { border: none; } .cbi-value-field table { border: none; } td > table > tbody > tr > td { border: none; } .cbi-value-field > table > tbody > tr > td { border: none; } /* button style */ .cbi-button { box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; color: #333; background-color: #fff; border-color: #ccc; min-width: 6rem; padding: 0.5rem 1rem; font-size: 1.1rem; line-height: 1.42857143; } .cbi-button-reset, .cbi-input-remove { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .cbi-input-save, .cbi-button-add, .cbi-button-save, .cbi-button-find, .cbi-input-reload, .cbi-button-reload { color: #fff !important; background-color: #337ab7 !important; border-color: #2e6da4 !important; } .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { color: #fff !important; background-color: #5bc0de !important; border-color: #46b8da !important; } .cbi-input-reset, .cbi-button-remove { color: #fff !important; background-color: #d9534f !important; border-color: #d43f3a !important; } /* table */ .tabs { margin: 0 -2rem; padding-left: 0.5rem; background-color: #FFFFFF; } .cbi-tabmenu > li, .tabs > li { display: inline-block; padding: 0.9rem 0rem; } .cbi-tabmenu > li > a, .tabs > li > a { text-decoration: none; color: #404040; padding: 0.9rem 1.5rem; } .tabs > li[class~="active"], .tabs > li:hover { cursor: pointer; background-color: white; border-bottom: 0.2rem solid #0099CC; color: #0099CC; } .tabs > li[class~="active"] > a { color: #0099cc; } .tabs > li:hover { border-bottom: 0.2rem solid #C9C9C9; } .cbi-tabmenu { border-top: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; } .cbi-tabmenu > li:hover { background-color: #F1F1F1; } .cbi-tabmenu > li[class~="cbi-tab"] { background-color: white; } .cbi-tabmenu { background-color: #D4D4D4; } .cbi-section-node-tabbed { padding: 0; margin-top: 0; border-bottom: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4; border-right: 1px solid #D4D4D4; } .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { background-color: #f9f9f9; } .cbi-value-field, .cbi-value-description { display: table-cell; } .cbi-value-helpicon > img { display: none; } .cbi-value-helpicon:before { content: "\f059"; } .cbi-value-description { font-size: small; opacity: 0.5; padding: 0.5rem 0 0 0; } .cbi-value-title { padding-top: 0.6rem; min-width: 23rem; display: inline-block; float: left; text-align: right; padding-right: 2rem; } .cbi-value { padding: 1rem; } .cbi-section-table-descr > .cbi-section-table-cell, .cbi-section-table-titles > .cbi-section-table-cell { border: none; } .cbi-rowstyle-2 { background-color: #eee; } .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { width: auto !important; } /* desc */ .cbi-section-descr, .cbi-map-descr { padding: 0.5rem; color: #999; } /* luci */ .hidden { display: none } .left { text-align: left !important; } .right { text-align: right !important; } .inline { display: inline-block; } .cbi-page-actions { border-top: 1px solid #eee; padding-top: 2rem; text-align: right; } /* input */ .cbi-value input[type="password"], .cbi-value input[type="text"] { box-sizing: border-box; padding: 0.36rem 1rem; color: #555; min-width: 15rem; background-color: #fff; background-image: none; border: 1px solid #ccc; margin-bottom: 0.3rem; } .cbi-value-field input[type="password"], .cbi-value-field input[type="text"] { box-sizing: border-box; padding: 0.36rem 1rem; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; } /* select */ .cbi-value-field .cbi-input-select { width: 95%; min-width: 15rem; padding: 0.36rem 0.8rem; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; } .ifacebadge { display: inline-block; min-width: 8rem; border: 1px solid #CCCCCC; padding: 0.5rem 1rem; -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); } .ifacebadge > img { float: right; margin-left: 0.3rem; } /*textarea*/ .cbi-input-textarea { box-sizing: border-box; width: 100%; min-height: 15rem; padding: 1rem; font-size: 1.2rem; } #syslog { width: 90%; width: calc(100% - 2rem); min-height: 15rem; padding: 1rem; font-size: 1rem; color: #5F5F5F; margin-bottom: 20px; border-radius: 0; background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); border: none; } /* change */ .uci-change-list { font-family: monospace; } .uci-change-list ins, .uci-change-legend-label ins { text-decoration: none; border: 1px solid #00FF00; background-color: #CCFFCC; display: block; padding: 2px; } .uci-change-list del, .uci-change-legend-label del { text-decoration: none; border: 1px solid #FF0000; background-color: #FFCCCC; display: block; font-style: normal; padding: 2px; } .uci-change-list var, .uci-change-legend-label var { text-decoration: none; border: 1px solid #CCCCCC; background-color: #EEEEEE; display: block; font-style: normal; padding: 2px; } .uci-change-list var ins, .uci-change-list var del { border: none; white-space: pre; font-style: normal; padding: 0px; } .uci-change-legend { padding: 5px; } .uci-change-legend-label { width: 150px; float: left; } .uci-change-legend-label > ins, .uci-change-legend-label > del, .uci-change-legend-label > var { float: left; margin-right: 4px; width: 10px; height: 10px; display: block; } .uci-change-legend-label var ins, .uci-change-legend-label var del { line-height: 6px; border: none; } .uci-change-list var, .uci-change-list del, .uci-change-list ins { padding: 0.5rem; } /* other fix */ #iwsvg, #iwsvg2, #bwsvg { border: 1px solid #D4D4D4 !important; border-top: none !important; } .ifacebox { border: 1px solid #999; background-color: #f9f9f9; } .cbi-image-button { margin-left: 0.5rem; } .zonebadge { padding: 0.2rem 0.5rem; display: inline-block; cursor: pointer; } .zonebadge > .ifacebadge { padding: 0.2rem 1rem; margin: 0.3rem; border: 1px solid #6C6C6C; } .zonebadge > input[type="text"] { padding: 0.16rem 1rem; min-width: 10rem; margin-top: 0.3rem; } .cbi-value-field .cbi-input-checkbox, .cbi-value-field .cbi-input-radio { margin-top: 1rem; } .cbi-section-table-row > .cbi-value-field .cbi-input-select { min-width: 7rem; } .cbi-section-create > .cbi-button-add { margin: 0.5rem; } div.cbi-value var, td.cbi-value-field var { font-style: italic; color: #0069D6; } small { font-size: smaller; white-space: normal; } .cbi-button-up, .cbi-button-down { display: inline-block; min-width: 0; padding: 0.2rem 0.3rem; font-size: 1.3rem; } #diag-rc-output > pre { background-color: #f5f5f5; display: block; padding: 8.5px; margin: 0 0 18px; line-height: 1.5rem; -moz-border-radius: 3px; white-space: pre-wrap; word-wrap: break-word; font-size: 1.5rem; color: #404040; } input[name="ping"], input[name="traceroute"], input[name="nslookup"] { width: 80%; } #xhr_poll_status { position: relative; top: 0.45rem; cursor: pointer; } #xhr_poll_status > .label.success { background-color: #14CE14; } #xhr_poll_status > .label { padding: 0.3rem 0.8rem; font-size: 1rem; box-sizing: border-box; font-weight: bold; color: #ffffff !important; text-transform: uppercase; white-space: nowrap; background-color: #bfbfbf; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: none; } .showSide { display: none; } .darkMask { width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.56); content: ""; z-index: 99; display: none; } /* fix Main Login*/ .node-main-login > .main > .main-left { display: none; } .node-main-login > .main > .main-right { width: 100%; } .node-main-login > .main fieldset { margin-bottom: 2rem; margin-bottom: 2rem; display: inline; background: none; border: none; box-shadow: none; } .node-main-login > .main .cbi-value-title { min-width: 6rem; } .node-main-login > .main #maincontent { text-align: center; } .node-main-login > .main .container { display: inline-block; padding: 2rem 4rem; margin-top: 2rem !important; background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); text-align: left; } .node-main-login > .main form > div:nth-last-child(1) { float: right; } /* fix status processes */ .node-status-processes > .main table tr td:nth-child(3) { white-space: normal; } .node-status-firewall > .main fieldset li { display: inline-block; } .node-status-firewall > .main fieldset li > a { box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; color: #333; min-width: 6rem; padding: 0.5rem 1rem; font-size: 1.1rem; line-height: 1.42857143; background-color: #f0ad4e; border-color: #eea236; color: #fff; text-decoration: none; } /* fix system reboot */ .node-system-reboot > .main > .main-right p, .node-system-reboot > .main > .main-right h3 { padding-left: 2rem; } .node-system-reboot > .main > .main-right p > a { margin-top: 2rem; text-decoration: none; box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; min-width: 6rem; padding: 0.5rem 1rem; font-size: 1.1rem; line-height: 1.42857143; text-decoration: none; color: #fff; background-color: #d9534f !important; border-color: #d43f3a !important; } /* fix Services Network Shares*/ .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; } .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ .node-system-software > .main table tr td:nth-child(4) { white-space: normal; font-size: small; color: #404040; } .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.5rem 1rem; } .node-status-firewall fieldset, .node-system-software fieldset, .node-system-backup_flash_firmware fieldset { margin-top: 0; } .node-status-firewall .cbi-tabmenu, .node-system-software .cbi-tabmenu, .node-system-backup_flash_firmware .cbi-tabmenu { border: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } @media screen and (max-width: 1600px) { .main-left { width: calc(0% + 15rem); } .main-right { width: calc(100% - 15rem); } .cbi-button { padding: 0.3rem 0.6rem; font-size: 1rem; line-height: 1.5; } #xhr_poll_status { top: 0.35rem; } #xhr_poll_status > .label { padding: 0.2rem 0.6rem; } .cbi-value-title { min-width: 15rem; } fieldset { padding: 1rem; } } @media screen and (max-width: 1280px) { .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.2rem 0.5rem; } } @media screen and (max-width: 992px) { * { font-size: 100%; } .main-left { width: 0; position: fixed; z-index: 100; } .main-right { width: 100%; } .showSide { padding: 0.1rem; margin-right: 0.5rem; display: inline-block; } .showSide:before { content: "\e20e"; font-size: 1.7rem; } .node-main-login .showSide { display: none !important; } .cbi-value-title { min-width: 6rem; } .node-network-diagnostics > .main .cbi-map fieldset > div *{ width: 100% !important; } .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{ margin: 3rem 0 0 0 !important; } .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{ margin: 0 !important; } .node-network-diagnostics > .main .cbi-map fieldset > div select, .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{ margin: 1rem 0 0 0; } .node-network-diagnostics > .main .cbi-map fieldset > div{ width: 100% !important; } #diag-rc-output > pre { font-size: 1.2rem; } } @media screen and (max-width: 480px) { * { font-size: 90%; } fieldset { padding: 1rem; margin: 1rem 0 0 0; } .tabs { margin: 0 -1rem; } #maincontent > .container { margin: 0 1rem 1.5rem 1rem; } .main > .main-left > .nav > .slide > .menu { font-size: 1.3rem; } .main > .main-left > .nav > .slide > .slide-menu > li > a { font-size: 1.1rem; } .cbi-value-title { min-width: 0rem !important; display: block; margin-top: 1rem; margin-bottom: 0.5rem; } .cbi-value-field, .cbi-value-description { width: 100%; box-sizing: border-box; } .cbi-value > .cbi-value-field { display: inline-block; } .cbi-tabmenu > li, .tabs > li { padding: 0.6rem 0rem; } .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.2rem 0.7rem; } .cbi-page-actions > div { display: none; } .node-main-login > .main .container { padding: 0.5rem 1rem 2rem 1rem; } .node-main-login > .main .cbi-value { padding: 0; } .node-main-login > .main form > div:nth-last-child(1) { margin-top: 2rem; } .node-main-login > .main .cbi-value-title { font-size: 1.2rem; } .node-main-login > .main fieldset { margin: 0; } h2 { font-size: 2rem; } .tabs > li > a { font-size: 1.2rem; } header { height: 3.5rem; } header > .container { margin-top: 0.25rem; } .main { top: 3.5rem; } select, input { font-size: 1.2rem; } }