/*! * 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: #fff; 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, .table .tr.cbi-section-table-descr .th { font-size: 13px; font-weight: normal; line-height: 18px; margin-bottom: 9px; } p small { font-size: 11px; color: #bfbfbf; } h1, h2, h3, legend, 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, legend, h4, h5, h6 { line-height: 36px; } h3, legend { 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: #fff; 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: #fff; } textarea { height: auto; } .td > input[type=text], .td > input[type=password], .td > select, .td > .cbi-dropdown { width: 100%; } .uneditable-input { background-color: #fff; 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); } .btn:hover, .cbi-button:hover, input:focus, textarea:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8) !important; 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; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { background-color: #f5f5f5; border-color: #ddd; pointer-events: none; cursor: default; } .cbi-optionals, .cbi-section-create { padding: 0 0 10px 10px; } .cbi-section-create { margin: -3px; display: inline-flex; align-items: center; } .cbi-section-create > * { margin: 3px; flex: 1 1 auto; } .cbi-section-create > * > input { width: 100%; } .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; } .cbi-page-actions > form { display: inline; } .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; position: relative; } .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, .table .tbody .th { border-top: 1px solid #ddd; } .tr.placeholder { height: calc(3em + 20px); } .tr.placeholder > .td { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; line-height: 3em; } /* 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: #fff; text-decoration: none; } header h3 { position: relative; } header h3 a, header .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; color: #fff; 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: #fff; 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: #fff; } 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: #fff; } 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: #fff; } 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 #fff; opacity: 0.5; } .menu-dropdown, .dropdown-menu { background-color: #fff; 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 #fff; } 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 #fff; } header .dropdown-menu a:hover, .dropdown-menu a:hover, header .dropdown-menu a.hover, .dropdown-menu a.hover { background-color: #ddd; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #eee, #ddd); 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: #fff; 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: #fff; 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, #fff, #f5f5f5); border: 1px solid #ddd; border-radius: 3px; box-shadow: inset 0 1px 0 #fff; } .breadcrumb li { display: inline; text-shadow: 0 1px 0 #fff; } .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: #fff; } .btn .close, .alert-message .close { font-family: Arial, sans-serif; line-height: 18px; } .btn.danger, .alert-message.danger, .btn.error, .alert-message.error { background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 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: linear-gradient(to bottom, #62c462, #57a957) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 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: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .alert-message.notice { background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); 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: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; 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:focus, .cbi-button:focus { outline: 1px dotted #666; } .cbi-input-invalid, .cbi-value-error input { color: #f00; border-color: #f00; } .cbi-button-positive, .cbi-button-fieldadd, .cbi-button-add, .cbi-button-save { border-color: #4a4; color: #4a4; } .cbi-button-neutral, .cbi-button-download, .cbi-button-find, .cbi-button-link, .cbi-button-up, .cbi-button-down { color: #444; } .btn.primary, .cbi-button-action, .cbi-button-apply, .cbi-button-reload, .cbi-button-edit { border-color: #0069d6; color: #0069d6; } .cbi-button-negative, .cbi-section-remove .cbi-button, .cbi-button-reset, .cbi-button-remove { border-color: #c44; color: #c44; } .cbi-page-actions .cbi-button-link, .cbi-page-actions form[method="get"]:first-child { float: left; } .btn.primary, .cbi-button-action.important, .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit { color: #fff; background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .cbi-button-positive.important, .cbi-page-actions .cbi-button-save { color: #fff; background: linear-gradient(to bottom, #4a4, #484) no-repeat; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .cbi-button-negative.important { color: #fff; background: linear-gradient(to bottom, #c44, #c00) no-repeat; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .cbi-page-actions .cbi-button-apply + .cbi-button-save { background: linear-gradient(#fff, #fff 25%, #e6e6e6); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); color: #4a4; } .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: block; display: initial; } .cbi-dropdown > ul > li .hide-close { display: none; } .cbi-dropdown > ul > li[display]:not([display="0"]) { border-left: 1px solid #ccc; } .cbi-dropdown[empty] > ul { max-width: 1px; } .cbi-dropdown > ul > li > form { display: none; margin: 0; padding: 0; pointer-events: none; } .cbi-dropdown > ul > li img { vertical-align: middle; margin-right: .25em; } .cbi-dropdown > ul > li > form > input[type="checkbox"] { margin: 0; } .cbi-dropdown > ul > li input[type="text"] { height: 20px; } .cbi-dropdown[open] { position: relative; } .cbi-dropdown[open] > ul.dropdown { display: block; background: #f6f6f5; border: 1px solid #918e8c; box-shadow: 0 0 4px #918e8c; position: absolute; z-index: 1000; max-width: none; min-width: 100%; width: auto; } .cbi-dropdown > ul > li[display], .cbi-dropdown[open] > ul.preview, .cbi-dropdown[open] > ul.dropdown > li, .cbi-dropdown[multiple] > ul > li > label, .cbi-dropdown[multiple][open] > ul.dropdown > li, .cbi-dropdown[multiple][more] > .more, .cbi-dropdown[multiple][empty] > .more { flex-grow: 1; display: flex; } .cbi-dropdown[empty] > ul > li, .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], .cbi-dropdown[multiple][open] > ul.dropdown > li > form { display: block; } .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; } .cbi-dropdown[open] > ul.dropdown > li { border-bottom: 1px solid #ccc; } .cbi-dropdown[open] > ul.dropdown > li[selected] { background: #b0d0f0; } .cbi-dropdown[open] > ul.dropdown > li.focus { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } .cbi-dropdown[open] > ul.dropdown > li:last-child { margin-bottom: 0; border-bottom: none; } .cbi-dropdown[disabled] { pointer-events: none; opacity: .6; } .cbi-tooltip-container { cursor: help; } .cbi-tooltip { position: absolute; z-index: 1000; left: -1000px; opacity: 0; transition: opacity .25s ease-out; } .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { left: auto; opacity: 1; transition: opacity .25s ease-in; } .zonebadge .cbi-tooltip { padding: 1px; background: inherit; margin: -1.6em 0 0 -5px; border-radius: 3px; pointer-events: none; box-shadow: 0 0 3px #444; } .zonebadge .cbi-tooltip > * { margin: 1px; } .zone-forwards { display: flex; flex-wrap: wrap; } .zone-forwards > * { flex: 1 1 40%; padding: 1px; } .zone-forwards > span { flex-basis: 10%; text-align: center; } .zone-forwards .zone-src, .zone-forwards .zone-dest { display: flex; flex-direction: column; } .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.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } .close { float: right; color: #000; font-size: 20px; font-weight: bold; line-height: 13.5px; text-shadow: 0 1px 0 #fff; opacity: 0.25; } .close:hover { color: #000; text-decoration: none; opacity: 0.4; } .alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; color: #404040; background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 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: #fff; } .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: #fff !important; text-transform: uppercase; white-space: nowrap; background-color: #bfbfbf; border-radius: 3px; text-shadow: none; } a.label:link, a.label:visited { color: #fff; } 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 #ccc; 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; } .cbi-section-table-titles.named::before, .cbi-section-table-descr.named::before, .cbi-section-table-row[data-title]::before { content: attr(data-title) " "; display: table-cell; padding: 10px 10px 9px; line-height: 18px; font-weight: bold; vertical-align: middle; } .cbi-section-table-row[data-title]::before { border-top: 1px solid #ddd; } .left { text-align: left !important; } .right { text-align: right !important; } .center { text-align: center !important; } .top { vertical-align: top !important; } .middle { vertical-align: middle !important; } .bottom { vertical-align: bottom !important; } .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[type="password"], .table.cbi-section-table input[type="text"], .table.cbi-section-table textarea, .table.cbi-section-table select { width: 100%; } .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; } .td.cbi-section-actions { text-align: right; vertical-align: middle; } .td.cbi-section-actions > * { display: flex; } .td.cbi-section-actions > * > *, .td.cbi-section-actions > * > form > * { flex: 1 1 4em; margin: 0 1px; } .td.cbi-section-actions > * > form { display: inline-flex; margin: 0; } .table.valign-middle .td { vertical-align: middle; } .cbi-rowstyle-2 { background: #f9f9f9; } .cbi-value-description { background-image: url(/luci-static/resources/cbi/help.gif); background-position: .25em .2em; background-repeat: no-repeat; margin: .25em 0 0 0; padding: 0 0 0 1.7em; } .cbi-section-error { border: 1px solid #f00; border-radius: 3px; background-color: #fce6e6; padding: 5px; margin-bottom: 18px; } .cbi-section-error ul { margin: 0 0 0 20px; } .cbi-section-error ul li { color: #f00; font-weight: bold; } .ifacebox { background-color: #fff; border: 1px solid #ccc; margin: 0 10px; text-align: center; white-space: nowrap; background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-flex; flex-direction: column; line-height: 1.2em; min-width: 100px; } .ifacebox .ifacebox-head { border-bottom: 1px solid #ccc; padding: 2px; background: #eee; } .ifacebox .ifacebox-head.active { background: #90c0e0; } .ifacebox .ifacebox-body { padding: .25em; } .ifacebadge { display: inline-block; flex-direction: row; white-space: nowrap; background-color: #fff; border: 1px solid #ccc; padding: 2px; background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: default; line-height: 1.2em; } .ifacebadge img { width: 16px; height: 16px; vertical-align: middle; } .ifacebadge-active { border-color: #000; 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 > * { margin: .25em; } .network-status-table .ifacebox-body > span { flex: 10 10 auto; } .network-status-table .ifacebox-body > div { display: flex; flex-wrap: wrap; } .ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge { display: inline-flex; flex: 1; padding: .25em; min-width: 220px; } .ifacebadge > *, .ifacebadge.large > * { margin: 0 .125em; } .zonebadge { padding: 2px; border-radius: 4px; display: inline-block; white-space: nowrap; color: #666; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); } .zonebadge > em, .zonebadge > strong { margin: 0 2px; display: inline-block; } .zonebadge input { width: 6em; } .zonebadge > .ifacebadge { margin-left: 2px; } .zonebadge-empty { border: 1px dashed #aaa; color: #aaa; 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 #0f0; background-color: #cfc; display: block; padding: 2px; } .uci-change-list del, .uci-change-legend-label del { text-decoration: none; border: 1px solid #f00; background-color: #fcc; display: block; font-style: normal; padding: 2px; } .uci-change-list var, .uci-change-legend-label var { text-decoration: none; border: 1px solid #ccc; background-color: #eee; 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); }