/*! * LuCI Bootstrap Theme * Copyright 2012 Nut & Bolt * By David Menting * Based on Bootstrap v1.4.0 * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ html { margin: 0; padding: 0; } body { margin: 0; padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, .table, .tbody, .tfoot, .thead, .tr, .th, .td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } html { overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; } button, input, select, option, textarea { font-size: 100%; margin: 0; box-sizing: border-box; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; *overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] { opacity: 0.7; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { background-color: #ffffff; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: #404040; padding-top: 58px; } .container { width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; zoom: 1; } .container:before, .container:after { display: table; content: ""; zoom: 1; } .container:after { clear: both; } a { color: #0069d6; text-decoration: none; line-height: inherit; font-weight: inherit; } a:hover { color: #00438a; text-decoration: underline; } .pull-right { float: right; } .pull-left { float: left; } /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ p, .cbi-map-descr, .cbi-section-descr { font-size: 13px; font-weight: normal; line-height: 18px; margin-bottom: 9px; } p small { font-size: 11px; color: #bfbfbf; } h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #404040; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #bfbfbf; } h1 { margin-bottom: 18px; font-size: 30px; line-height: 36px; } h1 small { font-size: 18px; } h2 { font-size: 24px; line-height: 36px; } h2 small { font-size: 14px; } h3, h4, h5, h6 { line-height: 36px; } h3 { font-size: 18px; } h3 small { font-size: 14px; } h4 { font-size: 16px; } h4 small { font-size: 12px; } h5 { font-size: 14px; } h6 { font-size: 13px; color: #bfbfbf; text-transform: uppercase; } ul, ol { margin: 0 0 18px 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } ul { list-style: disc; } ol { list-style: decimal; } li { line-height: 18px; color: #808080; } ul.unstyled { list-style: none; margin-left: 0; } dl { margin-bottom: 18px; } dl dt, dl dd { line-height: 18px; } dl dt { font-weight: bold; } dl dd { margin-left: 9px; } hr { margin: 20px 0 19px; border: 0; border-bottom: 1px solid #eee; } strong { font-style: inherit; font-weight: bold; } em { font-style: italic; font-weight: inherit; line-height: inherit; } small { font-size: 0.9em } address { display: block; line-height: 18px; margin-bottom: 18px; } code, pre { padding: 0 3px 2px; font-family: Monaco, Andale Mono, Courier New, monospace; font-size: 12px; border-radius: 3px; } code { background-color: #fee9cc; color: rgba(0, 0, 0, 0.75); padding: 1px 3px; } pre { background-color: #f5f5f5; display: block; padding: 8.5px; margin: 0 0 18px; line-height: 18px; font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* Forms.less * Base styles for various input types, form layouts, and states * ------------------------------------------------------------- */ form { margin-bottom: 18px; } fieldset { margin-bottom: 9px; padding-top: 9px; } fieldset legend { display: block; font-size: 19.5px; line-height: 1; color: #404040; padding-top: 20px; *padding: 0 0 5px 0px; /* IE6-7 */ *line-height: 1.5; /* IE6-7 */ } form .cbi-tab-descr { line-height: 18px; margin-bottom: 18px; } form .clearfix, form .cbi-value { margin-bottom: 18px; zoom: 1; } form .clearfix:before, form .clearfix:after, form .cbi-value:before, form .cbi-value:after { display: table; content: ""; zoom: 1; } form .clearfix:after, form .cbi-value:after { clear: both; } label, input, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: normal; } form .input, form .cbi-value-field { margin-left: 200px; } form .cbi-value label.cbi-value-title { padding-top: 6px; font-size: 13px; line-height: 18px; float: left; width: 180px; text-align: right; color: #404040; } input[type=checkbox], input[type=radio] { cursor: pointer; } input, textarea, select, .cbi-dropdown, .uneditable-input { display: inline-block; width: 210px; height: 30px; padding: 4px; font-size: 13px; line-height: 18px; color: #808080; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; } .cbi-dropdown { min-width: 210px; max-width: 400px; width: auto; } select { padding: initial; background: #fff; box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); } input[type=checkbox], input[type=radio] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; } input[type=file] { background-color: #ffffff; padding: initial; border: initial; line-height: initial; box-shadow: none; width: auto !important; } input[type=button], input[type=reset], input[type=submit] { width: auto; height: auto; } select, input[type=file] { *height: auto; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } select[multiple] { height: inherit; background-color: #ffffff; } textarea { height: auto; } .uneditable-input { background-color: #ffffff; display: block; border-color: #eee; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); cursor: not-allowed; } ::-moz-placeholder { color: #bfbfbf; } ::-webkit-input-placeholder { color: #bfbfbf; } input, textarea { transition: border linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } input:focus, textarea:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } input[type=file]:focus, input[type=checkbox]:focus, select:focus { box-shadow: none; outline: 1px dotted #666; } form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { color: #b94a48; } form .clearfix.error input, form .clearfix.error textarea { color: #b94a48; border-color: #ee5f5b; } form .clearfix.error input:focus, form .clearfix.error textarea:focus { border-color: #e9322d; box-shadow: 0 0 6px #f8b9b7; } form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { color: #b94a48; background-color: #fce6e6; border-color: #b94a48; } form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { color: #c09853; } form .clearfix.warning input, form .clearfix.warning textarea { color: #c09853; border-color: #ccae64; } form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { border-color: #be9a3f; box-shadow: 0 0 6px #e5d6b1; } form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { color: #c09853; background-color: #d2b877; border-color: #c09853; } form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { color: #468847; } form .clearfix.success input, form .clearfix.success textarea { color: #468847; border-color: #57a957; } form .clearfix.success input:focus, form .clearfix.success textarea:focus { border-color: #458845; box-shadow: 0 0 6px #9acc9a; } form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { color: #468847; background-color: #bcddbc; border-color: #468847; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { background-color: #f5f5f5; border-color: #ddd; } .actions, .cbi-page-actions { background: #f5f5f5; margin-bottom: 18px; padding: 17px 20px 18px 17px; border-top: 1px solid #ddd; border-radius: 0 0 3px 3px; text-align: right; } .actions .secondary-action, .cbi-page-actions .secondary-action{ float: right; } .actions .secondary-action a, .cbi-page-actions .secondary-action a { line-height: 30px; } .actions .secondary-action a:hover, .cbi-page-actions .secondary-action a:hover { text-decoration: underline; } .help-inline, .help-block { font-size: 13px; line-height: 18px; color: #bfbfbf; } .help-inline { padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ } .help-block { display: block; max-width: 600px; } /* * Tables.less * Tables for, you guessed it, tabular data * ---------------------------------------- */ .tr { display: table-row; } .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } .table { display: table; width: 100%; margin-bottom: 18px; padding: 0; font-size: 13px; border-collapse: collapse; } .table .th, .table .td { display: table-cell; vertical-align: middle; /* Fixme */ padding: 10px 10px 9px; line-height: 18px; text-align: left; } .table .th { padding-top: 9px; font-weight: bold; vertical-align: middle; } .table .td { vertical-align: top; border-top: 1px solid #ddd; } .table .tbody .th { border-top: 1px solid #ddd; vertical-align: top; } /* Patterns.less * Repeatable UI elements outside the base styles provided from the scaffolding * ---------------------------------------------------------------------------- */ header { height: 40px; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; overflow: visible; color: #BFBFBF; } header a { color: #bfbfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } header h3 a:hover, header .brand:hover, header ul .active > a { background-color: #333; background-color: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; } header h3 { position: relative; } header h3 a, header .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; color: #ffffff; font-size: 20px; font-weight: 200; line-height: 1; } header p { margin: 0; line-height: 40px; } header .fill { background-color: #222; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #333333, #222222); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); padding: 0 5px; } header div > ul, .nav { display: block; float: left; margin: 0 10px 0 0; position: relative; left: 0; } header div > ul > li, .nav > li { display: block; float: left; } header div > ul a, .nav a { display: block; float: none; padding: 10px 10px 11px; line-height: 19px; text-decoration: none; } header div > ul a:hover, .nav a:hover { color: #ffffff; text-decoration: none; } header div > ul .active > a, .nav .active > a { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } header div > ul.secondary-nav, .nav.secondary-nav { float: right; margin-left: 10px; margin-right: 0; } header div > ul.secondary-nav .menu-dropdown, .nav.secondary-nav .menu-dropdown, header div > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu { right: 0; border: 0; } header div > ul a.menu:hover, .nav a.menu:hover, header div > ul li.open .menu, .nav li.open .menu, header div > ul .dropdown-toggle:hover, .nav .dropdown-toggle:hover, header div > ul .dropdown.open .dropdown-toggle, .nav .dropdown.open .dropdown-toggle { background: #444; background: rgba(255, 255, 255, 0.05); } header div > ul .menu-dropdown, .nav .menu-dropdown, header div > ul .dropdown-menu, .nav .dropdown-menu { background-color: #333; } header div > ul .menu-dropdown a.menu, .nav .menu-dropdown a.menu, header div > ul .dropdown-menu a.menu, .nav .dropdown-menu a.menu, header div > ul .menu-dropdown .dropdown-toggle, .nav .menu-dropdown .dropdown-toggle, header div > ul .dropdown-menu .dropdown-toggle, .nav .dropdown-menu .dropdown-toggle { color: #ffffff; } header div > ul .menu-dropdown a.menu.open, .nav .menu-dropdown a.menu.open, header div > ul .dropdown-menu a.menu.open, .nav .dropdown-menu a.menu.open, header div > ul .menu-dropdown .dropdown-toggle.open, .nav .menu-dropdown .dropdown-toggle.open, header div > ul .dropdown-menu .dropdown-toggle.open, .nav .dropdown-menu .dropdown-toggle.open { background: #444; background: rgba(255, 255, 255, 0.05); } header div > ul .menu-dropdown li a, .nav .menu-dropdown li a, header div > ul .dropdown-menu li a, .nav .dropdown-menu li a { color: #999; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } header div > ul .menu-dropdown li a:hover, .nav .menu-dropdown li a:hover, header div > ul .dropdown-menu li a:hover, .nav .dropdown-menu li a:hover { background-color: #191919; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #292929, #191919); color: #ffffff; } header div > ul .menu-dropdown .active a, .nav .menu-dropdown .active a, header div > ul .dropdown-menu .active a, .nav .dropdown-menu .active a { color: #ffffff; } header div > ul .menu-dropdown .divider, .nav .menu-dropdown .divider, header div > ul .dropdown-menu .divider, .nav .dropdown-menu .divider { background-color: #222; border-color: #444; } header ul .menu-dropdown li a, header ul .dropdown-menu li a { padding: 4px 15px; } li.menu, .dropdown { position: relative; } a.menu:after, .dropdown-toggle:after { width: 0; height: 0; display: inline-block; content: "↓"; text-indent: -99999px; vertical-align: top; margin-top: 8px; margin-left: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; opacity: 0.5; } .menu-dropdown, .dropdown-menu { background-color: #ffffff; float: left; position: absolute; top: 40px; left: -9999px; z-index: 900; min-width: 160px; max-width: 220px; _width: 160px; margin-left: 0; margin-right: 0; padding: 6px 0; zoom: 1; border-color: #999; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 0 1px 1px; border-radius: 0 0 6px 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background-clip: padding-box; } .menu-dropdown li, .dropdown-menu li { float: none; display: block; background-color: transparent; } .menu-dropdown .divider, .dropdown-menu .divider { height: 1px; margin: 5px 0; overflow: hidden; background-color: #eee; border-bottom: 1px solid #ffffff; } header .dropdown-menu a, .dropdown-menu a { display: block; padding: 4px 15px; clear: both; font-weight: normal; line-height: 18px; color: #808080; text-shadow: 0 1px 0 #ffffff; } header .dropdown-menu a:hover, .dropdown-menu a:hover, header .dropdown-menu a.hover, .dropdown-menu a.hover { background-color: #dddddd; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #eeeeee, #dddddd); color: #404040; text-decoration: none; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); } .open .menu, .dropdown.open .menu, .open .dropdown-toggle, .dropdown.open .dropdown-toggle { color: #ffffff; background: #ccc; background: rgba(0, 0, 0, 0.3); } .open .menu-dropdown, .dropdown.open .menu-dropdown, .open .dropdown-menu, .dropdown.open .dropdown-menu { left: 0; } .dropdown:hover ul.dropdown-menu { left: 0; } .dropdown-menu .dropdown-menu { position: absolute; left: 159px; } .dropdown-menu li { position: relative; } .tabs, .cbi-tabmenu { margin: 0 0 18px; padding: 0; list-style: none; zoom: 1; } .tabs:before, .cbi-tabmenu:before, .tabs:after, .cbi-tabmenu:after { display: table; content: ""; zoom: 1; } .tabs:after, .cbi-tabmenu:after { clear: both; } .tabs > li, .cbi-tabmenu > li { float: left; } .tabs > li > a, .cbi-tabmenu > li > a { display: block; } .tabs, .cbi-tabmenu { border-color: #ddd; border-style: solid; border-width: 0 0 1px; } .tabs > li, .cbi-tabmenu > li { position: relative; margin-bottom: -1px; } .cbi-tabmenu.map { margin: 0; } .cbi-tabmenu.map > li { font-size: 16.5px; font-weight: bold; } .cbi-tabcontainer > fieldset.cbi-section[id] > legend { display: none; } .tabs > li > a, .cbi-tabmenu > li > a { padding: 0 15px; margin-right: 2px; line-height: 34px; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .tabs > li > a:hover, .cbi-tabmenu > li > a:hover { text-decoration: none; background-color: #eee; border-color: #eee #eee #ddd; } .tabs .active > a, .tabs .active > a:hover, .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, .cbi-tab > a:link, .cbi-tab > a:hover { color: #808080; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } .tabs .menu-dropdown, .tabs .dropdown-menu, .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { top: 35px; border-width: 1px; border-radius: 0 6px 6px 6px; } .tabs a.menu:after, .tabs .dropdown-toggle:after, .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle, .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle { border-color: #999; } .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after, .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after { border-top-color: #555; } .tab-content > .tab-pane, .tab-content > div { display: none; } .tab-content > .active { display: block; } .breadcrumb { padding: 7px 14px; margin: 0 0 18px; background-color: #f5f5f5; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); border: 1px solid #ddd; border-radius: 3px; box-shadow: inset 0 1px 0 #ffffff; } .breadcrumb li { display: inline; text-shadow: 0 1px 0 #ffffff; } .breadcrumb .divider { padding: 0 5px; color: #bfbfbf; } .breadcrumb .active a { color: #404040; } footer { margin-top: 17px; padding-top: 17px; border-top: 1px solid #eee; } .btn.danger, .alert-message.danger, .btn.danger:hover, .alert-message.danger:hover, .btn.error, .alert-message.error, .btn.error:hover, .alert-message.error:hover, .btn.success, .alert-message.success, .btn.success:hover, .alert-message.success:hover, .btn.info, .alert-message.info, .btn.info:hover, .alert-message.info:hover { color: #ffffff; } .btn .close, .alert-message .close { font-family: Arial, sans-serif; line-height: 18px; } .btn.danger, .alert-message.danger, .btn.error, .alert-message.error { background-color: #c43c35; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.success, .alert-message.success { background-color: #57a957; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #62c462, #57a957); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { background-color: #339bb9; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #5bc0de, #339bb9); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn, .cbi-button { cursor: pointer; display: inline-block; background-color: #e6e6e6; background-repeat: no-repeat; background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); color: #333; font-size: 13px; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, .cbi-button:hover { color: #333; text-decoration: none; } .btn:focus, .cbi-button:focus { outline: 1px dotted #666; } .btn.primary, .cbi-page-actions .cbi-button-apply, .cbi-page-actions .cbi-button-save, .cbi-page-actions .cbi-button-reset { color: #ffffff; padding: 5px 14px 6px; background-color: #0064cd; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #049cdb, #0064cd); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #0064cd #0064cd #003f81; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .cbi-input-invalid, .cbi-value-error input { color: #FF0000; border-color: #FF0000; } .cbi-button-up, .cbi-input-up { background-position: center center; background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-down, .cbi-input-down { background-position: center center; background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-find, .cbi-input-find { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-add, .cbi-input-add { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-apply, .cbi-input-apply { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-reset, .cbi-input-reset { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-edit, .cbi-input-edit { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-remove, .cbi-input-remove { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-reload, .cbi-input-reload { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-link, .cbi-input-link { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-button-download, .cbi-input-download { background-position: 6px center, left top; padding-left: 28px; background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } .cbi-dropdown { border: 1px solid #ccc; border-radius: 3px; display: inline-flex; padding: 0; cursor: pointer; height: auto; background: linear-gradient(#fff 0%, #e9e8e6 100%); position: relative; color: #404040; } .cbi-dropdown:focus { outline: 2px solid #4b6e9b; } .cbi-dropdown > ul { margin: 0 !important; padding: 0; list-style: none; overflow-x: hidden; overflow-y: auto; display: flex; width: 100%; } .cbi-dropdown > ul.preview { display: none; } .cbi-dropdown > .open, .cbi-dropdown > .more { flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 2em; padding: 0 .25em; } .cbi-dropdown > .more, .cbi-dropdown > ul > li[placeholder] { color: #777; font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; } .cbi-dropdown > ul > li { display: none; padding: .25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; flex-grow: 1; align-items: center; align-self: center; color: #404040; min-height: 20px; } .cbi-dropdown > ul > li .hide-open { display: initial; } .cbi-dropdown > ul > li .hide-close { display: none; } .cbi-dropdown > ul > li[display]:not([display="0"]) { border-left: 1px solid #ccc; } .cbi-dropdown[empty] > ul { max-width: 1px; } .cbi-dropdown > ul > li > form { display: none; margin: 0; padding: 0; pointer-events: none; } .cbi-dropdown > ul > li img { vertical-align: middle; margin-right: .25em; } .cbi-dropdown > ul > li > form > input[type="checkbox"] { margin: 0; } .cbi-dropdown > ul > li input[type="text"] { height: 20px; } .cbi-dropdown[open] { position: relative; } .cbi-dropdown[open] > ul.dropdown { display: block; background: #f6f6f5; border: 1px solid #918e8c; box-shadow: 0 0 4px #918e8c; position: absolute; z-index: 1000; max-width: none; min-width: 100%; width: auto; } .cbi-dropdown > ul > li[display], .cbi-dropdown[open] > ul.preview, .cbi-dropdown[open] > ul.dropdown > li, .cbi-dropdown[multiple] > ul > li > label, .cbi-dropdown[multiple][open] > ul.dropdown > li, .cbi-dropdown[multiple][more] > .more, .cbi-dropdown[multiple][empty] > .more { flex-grow: 1; display: flex; } .cbi-dropdown[empty] > ul > li, .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], .cbi-dropdown[multiple][open] > ul.dropdown > li > form { display: block; } .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } .cbi-dropdown[open] > ul.dropdown > li { border-bottom: 1px solid #ccc; } .cbi-dropdown[open] > ul.dropdown > li[selected] { background: #b0d0f0; } .cbi-dropdown[open] > ul.dropdown > li.focus { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } .cbi-dropdown[open] > ul.dropdown > li:last-child { margin-bottom: 0; border-bottom: none; } .cbi-dropdown[disabled] { pointer-events: none; opacity: .6; } .btn.active, .btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled { cursor: default; background-image: none; opacity: 0.65; box-shadow: none; } .btn[disabled] { cursor: default; background-image: none; opacity: 0.65; box-shadow: none; } .btn.large { font-size: 15px; line-height: normal; padding: 9px 14px 9px; border-radius: 6px; } .btn.small { padding: 7px 9px 7px; font-size: 11px; } /* Button icons for specific pages */ .Startup .cbi-section-table input.cbi-input-apply, .Startup .cbi-section-table input.cbi-button-apply { background-image: url("../resources/cbi/apply.gif"); background-position: 7px 4px; padding: 3px 9px 3px 27px; } .Processes .cbi-section-table input.cbi-input-reload, .Startup .cbi-section-table input.cbi-input-reload { background-image: url("../resources/cbi/reload.gif"); background-position: 7px 4px; padding: 3px 9px 3px 27px; } .Processes .cbi-section-table input.cbi-input-remove, .Processes .cbi-section-table div.cbi-section-remove input, .Startup .cbi-section-table input.cbi-input-remove, .Startup .cbi-section-table div.cbi-section-remove input { background-image: url("../resources/cbi/remove.gif"); background-position: 7px 4px; padding: 3px 9px 3px 27px; } .Processes .cbi-section-table input.cbi-input-reset, .Processes .cbi-section-table input.cbi-button-reset, .Startup .cbi-section-table input.cbi-input-reset, .Startup .cbi-section-table input.cbi-button-reset { background-image: url("../resources/cbi/reset.gif"); background-position: 7px 4px; padding: 3px 9px 3px 27px; } .Startup .cbi-section-table input.cbi-input-save, .Startup .cbi-section-table input.cbi-button-save { background-image: url("../resources/cbi/save.gif"); background-position: 7px 4px; padding: 3px 9px 3px 27px; } button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } .close { float: right; color: #000000; font-size: 20px; font-weight: bold; line-height: 13.5px; text-shadow: 0 1px 0 #ffffff; opacity: 0.25; } .close:hover { color: #000000; text-decoration: none; opacity: 0.4; } .alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; color: #404040; background-color: #eedc94; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #fceec1, #eedc94); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .alert-message .close { margin-top: 1px; *margin-top: 0; } .alert-message a { font-weight: bold; color: #404040; } .alert-message.danger p a, .alert-message.error p a, .alert-message.success p a, .alert-message.info p a { color: #ffffff; } .alert-message h5 { line-height: 18px; } .alert-message p { margin-bottom: 0; } .alert-message div { margin-top: 5px; margin-bottom: 2px; line-height: 28px; } .alert-message .btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .label { padding: 1px 3px 2px; font-size: 9.75px; font-weight: bold; color: #ffffff !important; text-transform: uppercase; white-space: nowrap; background-color: #bfbfbf; border-radius: 3px; text-shadow: none; } a.label:link, a.label:visited { color: #ffffff; } a.label:hover { text-decoration: none; } .label.important { background-color: #c43c35; } .label.warning { background-color: #f89406; } .label.success { background-color: #46a546; } .label.notice { background-color: #62cffc; } /* LuCI specific items */ .hidden { display: none } #memtotal > div, #memfree > div, #memcache > div, #membuff > div, #conns > div { border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; color: #808080; display: inline-block; font-size: 13px; line-height: 18px; } #xhr_poll_status { cursor: pointer; } form.inline { display: inline } header .pull-right { padding-top: 8px; } #modemenu li:last-child span.divider { display: none } #syslog { width: 100%; } .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th { background-color: #f9f9f9; } .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th { background-color: #f5f5f5; } .cbi-section-table tr.cbi-section-table-descr th { font-weight: normal; } .left { text-align: left !important; } .right { text-align: right !important; } .center { text-align: center !important; } .cbi-value-field { line-height: 1.5em; } .cbi-value-field input[type=checkbox], .cbi-value-field input[type=radio] { margin-top: 8px; margin-right: 6px; } table table td, .cbi-value-field table td { border: none; } .table.cbi-section-table input, .table.cbi-section-table textarea, .table.cbi-section-table select { width: auto; } .table.cbi-section-table .td.cbi-section-table-cell { white-space: nowrap; text-align: right; } .table.cbi-section-table .td.cbi-section-table-cell select { width: inherit; } .table.valign-middle .td { vertical-align: middle; } .cbi-value-description { display: inline; } .cbi-value-description img { vertical-align: middle; } .cbi-section-error { border: 1px solid #FF0000; border-radius: 3px; background-color: #FCE6E6; padding: 5px; } .cbi-section-error ul { margin: 0 0 0 20px; } .cbi-section-error ul li { color: #FF0000; font-weight: bold; } .ifacebox { background-color: #FFFFFF; border: 1px solid #CCCCCC; margin: 0 10px; text-align: center; white-space: nowrap; background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-flex; flex-direction: column; line-height: 1.2em; min-width: 100px; } .ifacebox .ifacebox-head { border-bottom: 1px solid #CCCCCC; padding: 2px; background: #eee; } .ifacebox .ifacebox-head.active { background: #90c0e0; } .ifacebox .ifacebox-body { padding: 6px; } .ifacebadge { display: inline-flex; flex-direction: row; white-space: nowrap; background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 2px; background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: default; line-height: 1.2em; } .ifacebadge img { width: 16px; height: 16px; vertical-align: middle; margin-right: .25em; } .ifacebadge-active { border-color: #000000; font-weight: bold; } .network-status-table { display: flex; flex-wrap: wrap; } .network-status-table .ifacebox { margin: .5em; flex-grow: 1; } .network-status-table .ifacebox-body { display: flex; flex-direction: column; height: 100%; text-align: left; } .network-status-table .ifacebox-body > span { flex: 10; } .network-status-table .ifacebox-body > div { display: flex; flex-wrap: wrap; } .network-status-table .ifacebox-body .ifacebadge { flex: 1; margin: .5em .25em 0 .25em; padding: .5em; min-width: 220px; } .zonebadge { padding: 2px; border-radius: 4px; display: inline-block; white-space: nowrap; color: #666666; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); cursor: pointer; } .zonebadge > em, .zonebadge > strong { margin: 0 2px; display: inline-block; } .zonebadge input { width: 6em; } .zonebadge > .ifacebadge { margin-left: 2px; } .zonebadge-empty { border: 1px dashed #AAAAAA; color: #AAAAAA; font-style: italic; font-size: smaller; } div.cbi-value var, .td.cbi-value-field var { font-style: italic; color: #0069D6; } .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; line-height: 19px; white-space: pre; } .uci-change-list var ins, .uci-change-list var del { display: inline; /*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; } html body.apply-overlay-active { height: calc(100vh - 63px); }