/*! * 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. */ /* Variables * --------- */ :root { --background-color-delta-l-sign: -1; --background-color-h: 0; --background-color-s: 0%; --background-color-l: 100%; --background-color-high-hsl: var(--background-color-h), var(--background-color-s), var(--background-color-l); --background-color-high: hsl(var(--background-color-high-hsl)); --background-color-medium-hsl: var(--background-color-h), var(--background-color-s), calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(6 / 255 * 100%)); --background-color-medium: hsl(var(--background-color-medium-hsl)); --background-color-low-hsl: var(--background-color-h), var(--background-color-s), calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(10 / 255 * 100%)); --background-color-low: hsl(var(--background-color-low-hsl)); --text-color-delta-l-sign: 1; --text-color-h: 0; --text-color-s: 0%; --text-color-l: 0%; --text-color-highest-hsl: var(--text-color-h), var(--text-color-s), var(--text-color-l); --text-color-highest: hsl(var(--text-color-highest-hsl)); --text-color-high-hsl: var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(64 / 255 * 100%)); --text-color-high: hsl(var(--text-color-high-hsl)); --text-color-medium-hsl: var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(128 / 255 * 100%)); --text-color-medium: hsl(var(--text-color-medium-hsl)); --text-color-low-hsl: var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(191 / 255 * 100%)); --text-color-low: hsl(var(--text-color-low-hsl)); --border-color-delta-l-sign: -1; --border-color-h: var(--background-color-h); --border-color-s: var(--background-color-s); --border-color-l: var(--background-color-l); --border-color-high-hsl: var(--border-color-h), var(--border-color-s), calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(51 / 255 * 100%)); --border-color-high: hsl(var(--border-color-high-hsl)); --border-color-medium-hsl: var(--border-color-h), var(--border-color-s), calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(34 / 255 * 100%)); --border-color-medium: hsl(var(--border-color-medium-hsl)); --border-color-low-hsl: var(--border-color-h), var(--border-color-s), calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(17 / 255 * 100%)); --border-color-low: hsl(var(--border-color-low-hsl)); --primary-color-high: #1976d2; --primary-color-medium: #1564c0; --primary-color-low: #0d46a1; --on-primary-color: var(--background-color-high); --error-color-high-rgb: 246, 43, 18; --error-color-high: rgb(var(--error-color-high-rgb)); --error-color-medium: #e8210d; --error-color-low: #d00000; --on-error-color: var(--background-color-high); --success-color-high-rgb: 0, 172, 89; --success-color-high: rgb(var(--success-color-high-rgb)); --success-color-medium: #009a4c; --success-color-low: #007936; --on-success-color: var(--background-color-high); --warn-color-high: #efbd0b; --warn-color-medium: #f0c629; --warn-color-low: #f2d24f; --on-warn-color: var(--text-color-highest); --disabled-opacity: .7; color-scheme: light; } :root[data-darkmode="true"] { --background-color-delta-l-sign: 1; --background-color-h: 0; --background-color-s: 0%; --background-color-l: calc(34 / 255 * 100%); --text-color-delta-l-sign: -1; --text-color-h: 0; --text-color-s: 0%; --text-color-l: 100%; --border-color-delta-l-sign: 1; --primary-color-high: #4da1c0; --primary-color-medium: #448da6; --primary-color-low: #3c7a8d; --error-color-high-rgb: 209, 86, 83; --error-color-medium: #bf4e4c; --error-color-low: #b14946; --success-color-high-rgb: 0, 166, 108; --success-color-medium: #00945e; --success-color-low: #008252; --warn-color-high: #a69461; --warn-color-medium: #a68d45; --warn-color-low: #a68732; --on-warn-color: var(--background-color-high); --disabled-opacity: .4; color-scheme: dark; } /* 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). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; } abbr[title], acronym[title] { border-bottom: 1px dotted; font-weight: inherit; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { -ms-interpolation-mode: bicubic; } button, input, select, option, textarea { font-size: 100%; margin: 0; box-sizing: border-box; vertical-align: baseline; line-height: 2em; } 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; word-break: break-all; } button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] { opacity: var(--disabled-opacity); } 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; } .control-group { display: inline-flex; gap: .2em; } .control-group > input + :not(input):not(select), .control-group > select + :not(input):not(select) { margin-left: calc(-.2em + -2px); border-radius: 0 3px 3px 0; padding: 0 6px; } /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { background-color: var(--background-color-high); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: var(--text-color-high); padding: 5px; min-height: 100%; display: flex; flex-direction: column; } .container { width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; zoom: 1; } a { color: var(--primary-color-high); text-decoration: none; line-height: inherit; font-weight: inherit; } a:hover { color: var(--primary-color-low); text-decoration: underline; } .pull-right { float: right; } .pull-left { float: left; } .nowrap { white-space: nowrap; } /* 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: var(--text-color-low); } h1, h2, h3, legend, h4, h5, h6 { font-weight: bold; color: var(--text-color-high); } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: var(--text-color-low); } 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: var(--text-color-low); 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: var(--text-color-medium); } 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 var(--border-color-low); } 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: var(--border-color-low); color: var(--text-color-high); padding: 1px 3px; } pre { --border-color-h: var(--background-color-h); --border-color-s: var(--background-color-s); --border-color-delta-l: 100%; --border-color-l: calc(var(--background-color-l) + var(--background-color-delta-l-sign) * var(--border-color-delta-l)); --border-color-a: 0.15; --border-color: hsla(var(--border-color-hsl), var(--border-color-a)); background-color: var(--background-color-low); display: block; padding: 8.5px; margin: 0 0 18px; line-height: 18px; font-size: 12px; border: 1px solid var(--border-color); 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 * ------------------------------------------------------------- */ fieldset { margin-bottom: 9px; padding-top: 9px; } fieldset legend { display: block; font-size: 19.5px; line-height: 1; color: var(--text-color-high); padding-top: 20px; } label, input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: normal; } .cbi-value { display: flex; flex-wrap: wrap; margin-bottom: 18px; } .cbi-value-field { margin-left: 20px; flex: 1; } .cbi-value label.cbi-value-title { padding-top: 6px; font-size: 13px; line-height: 18px; flex: 0 0 180px; text-align: right; color: var(--text-color-high); } .cbi-value > .cbi-section, .cbi-value > .cbi-tblsection { width: 100%; } label > input[type="checkbox"], label > input[type="radio"] { vertical-align: text-top; margin: 0; } label[for] { cursor: pointer; } input, textarea, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) { display: inline-block; width: 210px; padding: 4px; background: var(--background-color-high); color: var(--text-color-high); font-size: 13px; line-height: 18px; border: 1px solid var(--border-color-high); border-radius: 3px; } input, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) { height: 30px; } .cbi-dropdown:not(.btn):not(.cbi-button), .cbi-dynlist { min-width: 210px; max-width: 400px; width: auto; } .cbi-dynlist { height: auto; min-height: 30px; display: inline-flex; flex-direction: column; } .cbi-dynlist > .item { margin-bottom: 4px; box-shadow: 0 0 2px var(--border-color-high); background: var(--background-color-high); padding: 6px 2em 6px 4px; border: 1px solid var(--border-color-high); border-radius: 3px; color: var(--text-color-high); position: relative; pointer-events: none; overflow: hidden; word-break: break-all; } .cbi-dynlist > .item::after { content: "×"; position: absolute; display: inline-flex; align-items: center; top: -1px; right: -1px; bottom: -1px; padding: 0 6px; border: 1px solid var(--border-color-high); border-radius: 0 3px 3px 0; font-weight: bold; color: #c44; pointer-events: auto; } .cbi-dynlist > .add-item { display: flex; } .cbi-dynlist > .add-item > input, .cbi-dynlist > .add-item > button { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cbi-value-field > .cbi-checkbox, .cbi-value-field > div > .cbi-radio { height: 30px; display: inline-flex; align-items: center; } .cbi-radio { cursor: pointer; gap: .125em; } .cbi-select { padding: 0; position: relative; background: linear-gradient(var(--background-color-high), var(--border-color-low)); } .cbi-select select, .cbi-select select:focus { -webkit-appearance: none; appearance: none; outline: none; border: none; background: transparent; height: 100%; width: 100%; padding: 0 .3em; cursor: pointer; margin-right: .6em; } .cbi-select::before { position: absolute; top: 0; right: 0; bottom: 0; content: "▾"; padding: 0 .3em; background: linear-gradient(var(--background-color-high), var(--border-color-low)); pointer-events: none; border-radius: 3px; display: flex; flex-direction: column; justify-content: center; } .cbi-select select option { background: var(--background-color-low); color: var(--text-color-high); } .cbi-select select option:hover { background: var(--primary-color-low); color: var(--on-primary-color); } .cbi-select select option:checked { background: var(--primary-color-medium); color: var(--on-primary-color); } input[type=file] { 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[multiple] { height: inherit; background-color: #fff; } input[type="checkbox"], input[type="radio"] { --bd-color: var(--border-color-high); --fg-color: var(--text-color-high); appearance: none; -webkit-appearance: none; width: 14px; height: 14px; color: var(--fg-color); position: relative; display: inline-block; cursor: pointer; background: none; border: none; } input[type="checkbox"]::before, input[type="checkbox"]::after, input[type="radio"]::before, input[type="radio"]::after { position: absolute; content: ""; } input[type="checkbox"]::before, input[type="radio"]::before { top: 0; left: 0; width: 14px; height: 14px; background: linear-gradient(var(--background-color-high), var(--background-color-low)); border: 1px solid var(--bd-color); border-radius: 2px; } input[type="radio"], input[type="radio"]::before { border-radius: 50%; } input[type="checkbox"]::after, input[type="radio"]::after { top: 2px; left: 2px; width: 10px; height: 10px; } input[type="checkbox"]:checked::after, input[type="radio"]:checked::after { --checkmark-icon: url("data:image/svg+xml,"); -webkit-mask: var(--checkmark-icon) center/cover no-repeat; mask: var(--checkmark-icon) center/cover no-repeat; background: var(--fg-color); } input[type="radio"]:checked:after { --checkmark-icon: url("data:image/svg+xml,"); } input[type="checkbox"].cbi-input-invalid, input[type="radio"].cbi-input-invalid { --bd-color: var(--error-color-medium); --fg-color: var(--error-color-high); } .td > input[type=text], .td > input[type=password], .td > select, .td > .cbi-dropdown:not(.btn):not(.cbi-button), .cbi-dynlist > .add-item > .cbi-dropdown { width: 100%; } ::placeholder { color: var(--text-color-medium); } .item::after, .btn, .cbi-button, .cbi-select, .cbi-dropdown, .cbi-dynlist > .item, input[type="checkbox"]::before, input[type="radio"]::before, input, button, textarea, select { transition: border linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01); } .item:hover::after, .btn:hover, .btn:focus, .cbi-button:hover, .cbi-button:focus, .cbi-select.focus, .cbi-dropdown:focus, .cbi-dropdown[open], .cbi-dynlist > .item:focus, input[type="checkbox"]:focus::before, input[type="radio"]:focus::before, input:focus, button:hover, textarea:focus, select:focus { --focus-color-rgb: 82, 168, 236; outline: 0; border-color: rgba(var(--focus-color-rgb), 0.8) !important; box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01), 0 0 8px rgba(var(--focus-color-rgb), 0.6); text-decoration: none; } .cbi-input-invalid:focus, .cbi-select.cbi-input-invalid, input[type="checkbox"].cbi-input-invalid:focus::before, input[type="radio"].cbi-input-invalid:focus::before { --focus-color-rgb: var(--error-color-high-rgb); } input[disabled], button[disabled], select[disabled], textarea[disabled], .cbi-select[disabled]::before, .cbi-dropdown[disabled]:not(.btn):not(.cbi-button), input[type="checkbox"][disabled]::before, input[type="checkbox"][disabled]::after, input[type="radio"][disabled]::before, input[type="radio"][disabled]::after { opacity: var(--disabled-opacity); pointer-events: none; cursor: default; } input[readonly], select[readonly], textarea[readonly] { border-color: hsla(var(--border-color-high-hsl), var(--disabled-opacity)); pointer-events: auto; cursor: auto; } .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: var(--background-color-low); margin-bottom: 18px; padding: 17px 20px 18px 17px; border-top: 1px solid var(--border-color-medium); 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; margin: 0; } /* * 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 .tr:first-child .th { padding-top: 9px; font-weight: bold; vertical-align: top; } .table .td, .table .th { border-top: 1px solid var(--border-color-medium); } .tr.placeholder { height: calc(3em + 20px); } .tr.placeholder > .td { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; line-height: 3em; } .tr.drag-over-above, .tr.drag-over-below { border: 2px solid #0069d6; border-width: 2px 0 0 0; } .tr.drag-over-below { border-width: 0 0 2px 0; } /* Patterns.less * Repeatable UI elements outside the base styles provided from the scaffolding * ---------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 800; overflow: visible; color: #BFBFBF; margin: -5px -5px 15px -5px; display: flex; } header a { color: #bfbfbf; text-shadow: 0 -1px 0 hsla(var(--border-color-low-hsl), .25); } header .brand:hover, header ul .active > a { background-color: #333; background-color: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; } header .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -15px; color: #fff; font-size: 20px; font-weight: 200; line-height: 1; } header .pull-right { margin-left: auto; margin-right: 5px; align-self: center; } header p { margin: 0; line-height: 40px; } header { background: linear-gradient(#333333, #222222); box-shadow: 0 1px 3px hsla(var(--border-color-low-hsl), .25), inset 0 -1px 0 hsla(var(--border-color-low-hsl), .01); padding: 0; /* the redundant properties below work around a csstidy bug */ padding-left: calc((100% - 940px) / 2); padding-right: calc((100% - 940px) / 2); } .nav { display: block; float: left; margin: 0 10px 0 0; position: relative; left: 0; } .nav > li { display: block; float: left; } .nav a { display: block; float: none; padding: 10px 10px 11px; line-height: 19px; text-decoration: none; } .nav a:hover { color: #fff; text-decoration: none; } .nav .active > a { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } .nav a.menu:hover { background: #444; background: rgba(255, 255, 255, 0.05); } .nav .dropdown-menu { background-color: #333; } .nav .dropdown-menu a.menu { color: #fff; } .nav .dropdown-menu li a { color: #999; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .nav .dropdown-menu li a:hover { background-color: #191919; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #292929, #191919); color: #fff; } .nav .dropdown-menu .active a { color: #fff; } .nav .dropdown-menu li a { padding: 4px 15px; } li.menu, .dropdown { position: relative; } a.menu: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; } .dropdown-menu { background-color: #fff; float: left; position: absolute; top: 40px; left: -9999px; z-index: 900; min-width: 160px; max-width: 220px; 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; } .dropdown-menu li { float: none; display: block; background-color: transparent; } .dropdown-menu a { display: block; padding: 4px 15px; clear: both; font-weight: normal; line-height: 18px; color: #808080; text-shadow: 0 1px 0 #fff; } .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); } .dropdown:hover ul.dropdown-menu { left: 0; } .dropdown-menu .dropdown-menu { position: absolute; left: 159px; } .dropdown-menu li { position: relative; } .tabs, .cbi-tabmenu { --tab-bar-background-color: var(--background-color-high); --tab-inactive-background-color-h: var(--border-color-low-h); --tab-inactive-background-color-s: var(--border-color-low-s); --tab-inactive-background-color-l: var(--border-color-low-l); --tab-inactive-background-color: var(--border-color-low); --tab-inactive-border-color: var(--border-color-medium); --tab-inactive-text-color-delta-l: calc(85 / 255 * 100%); --tab-inactive-text-color-l: calc(var(--tab-inactive-background-color-l) + var(--background-color-delta-l-sign) * var(--tab-inactive-text-color-delta-l)); --tab-inactive-text-color: hsl(var(--tab-inactive-background-color-hsl)); --tab-inactive-hover-background-color: var(--background-color-high); --tab-active-background-color: var(--background-color-high); --tab-active-text-color: #0069d6; --tab-active-border-color: var(--border-color-medium); margin: 0 -5px 18px; padding: 0 2px; list-style: none; display: flex; flex-wrap: wrap; background: linear-gradient(var(--tab-bar-background-color) 28px, var(--tab-inactive-border-color) 28px); background-size: 1px 29px; background-position: left bottom; } .tabs > li, .cbi-tabmenu > li { flex: 0 1 auto; display: flex; align-items: center; height: 25px; max-width: 48%; margin: 4px 2px 0 2px; background: var(--tab-active-background-color); border: 1px solid var(--tab-active-border-color); border-bottom: none; border-radius: 4px 4px 0 0; color: var(--primary-color-high); } .tabs > li > a, .cbi-tabmenu > li > a { padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; border-radius: 4px 4px 0 0; line-height: 25px; outline: none; } .tabs > li > a:focus-visible, .cbi-tabmenu > li > a:focus-visible { text-decoration: underline; } .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover { background: linear-gradient(var(--tab-inactive-hover-background-color) 90%, var(--tab-inactive-border-color) 100%); } .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled { color: var(--tab-inactive-text-color); background: linear-gradient(var(--tab-inactive-background-color) 90%, var(--tab-inactive-border-color) 100%); } .cbi-tab-disabled[data-errors]::after { content: attr(data-errors); background: #c43c35; color: #fff; height: 16px; min-width: 16px; border-radius: 8px; text-align: center; margin: 0 5px 0 0; padding: 3px 2px 1px 2px; display: inline-flex; flex-direction: column; justify-content: center; font-size: 12px; } .cbi-tabmenu.map { margin: 0; } .cbi-tabmenu.map > li { font-size: 16.5px; font-weight: bold; } .cbi-tab-descr { margin: -9px 0 18px 0; } .tabs .menu-dropdown, .tabs .dropdown-menu { top: 35px; border-width: 1px; border-radius: 0 6px 6px 6px; } .tabs a.menu:after, .tabs .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { border-color: #999; } .tabs li.open a.menu:after, .tabs .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: linear-gradient(to bottom, var(--background-color-high), var(--background-color-low)); border: 1px solid var(--border-color-medium); border-radius: 3px; display: flex; flex: 0; } .breadcrumb li { list-style: none; } .breadcrumb li:not(:last-child)::after { content: "|"; padding: 0 5px; } .breadcrumb .active a { color: var(--text-color-medium); } footer { padding-top: 17px; margin-top: auto; border-top: 1px solid var(--border-color-low); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--text-color-medium); /* the redundant properties below work around a csstidy bug */ padding-left: calc((100% - 940px) / 2); padding-right: calc((100% - 940px) / 2); } footer a { color: var(--primary-color-low); } footer span { margin-bottom: 1em; } footer ul.breadcrumb { margin-left: auto; } #modal_overlay { position: fixed; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 900; overflow: auto; transition: opacity .125s ease-in; opacity: 0; visibility: hidden; } .modal { width: 90%; margin: 5em auto; min-height: 32px; max-width: 600px; border-radius: 3px; background: var(--background-color-high); border: 1px solid var(--border-color-low); box-shadow: 0 0 3px var(--background-color-low); padding: 1em 1em .5em 1em; min-width: 270px; } .modal > * { line-height: normal; margin-bottom: .5em; max-width: 100%; } .modal > pre, .modal > textarea { white-space: pre-wrap; overflow: auto; width: 100%; } body.modal-overlay-active { overflow: hidden; height: 100vh; } body.modal-overlay-active #modal_overlay { left: 0; right: 0; opacity: 1; visibility: visible; } .btn .close, .alert-message .close { font-family: Arial, sans-serif; line-height: 18px; } .btn.danger, .alert-message.danger, .btn.error, .alert-message.error, .cbi-tooltip.error { background: linear-gradient(var(--error-color-low), var(--error-color-medium)); color: var(--on-error-color); border-color: var(--error-color-high) var(--error-color-high) var(--error-color-low); } .btn.success, .alert-message.success, .cbi-tooltip.success { background: linear-gradient(var(--success-color-low), var(--success-color-medium)); color: var(--on-error-color); border-color: var(--success-color-high) var(--success-color-high) var(--success-color-low); } .btn.info, .alert-message.info, .cbi-tooltip.info { background: linear-gradient(var(--primary-color-low), var(--primary-color-medium)); color: var(--on-primary-color); border-color: var(--primary-color-high) var(--primary-color-high) var(--primary-color-low); } .alert-message.notice, .cbi-tooltip.notice { background: linear-gradient(var(--background-color-low), var(--background-color-medium)); border-color: var(--background-color-high) var(--background-color-high) var(--background-color-low); color: var(--text-color-high); } .alert-message.warning { background: linear-gradient(var(--warn-color-low), var(--warn-color-medium)); border-color: var(--warn-color-high) var(--warn-color-high) var(--warn-color-low); color: var(--on-warn-color); } .modal.alert-message { color: var(--text-color-high); } .item::after, .btn, .cbi-button { --default-btn-background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-low)); --on-color: var(--text-color-high); cursor: pointer; display: inline-block; background: var(--default-btn-background); padding: 0 14px; color: var(--on-color); font-size: 13px; line-height: 2em; border: 1px solid var(--border-color-high); border-radius: 4px; white-space: pre; } .cbi-input-invalid, .cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button), .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li, .cbi-value-error input { color: var(--error-color-high); border-color: var(--error-color-medium); } .cbi-button-positive, .cbi-button-fieldadd, .cbi-button-add, .cbi-button-save { --on-color: var(--success-color-high); border-color: var(--on-color); } .cbi-button-neutral, .cbi-button-download, .cbi-button-find, .cbi-button-link, .cbi-button-up, .cbi-button-down { color: var(--text-color-high); } .btn.primary, .cbi-button-action, .cbi-button-apply, .cbi-button-reload, .cbi-button-edit { --on-color: var(--primary-color-high); border-color: var(--on-color); } .cbi-button-negative, .cbi-section-remove .cbi-button, .cbi-button-reset, .cbi-button-remove { --on-color: var(--error-color-high); border-color: var(--on-color); } .cbi-page-actions::after { display: table; content: ""; clear: both; } .cbi-page-actions > * { vertical-align: middle; } .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) { float: left; margin-right: .4em; } .btn.primary, .cbi-button-action.important, .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit { --on-color: var(--on-primary-color); background: linear-gradient(var(--primary-color-medium), var(--primary-color-low)); border-color: var(--primary-color-high); } .cbi-button-positive.important, .cbi-page-actions .cbi-button-save { --on-color: var(--on-success-color); background: linear-gradient(var(--success-color-medium), var(--success-color-low)); border-color: var(--success-color-high); } .cbi-button-negative.important { --on-color: var(--on-error-color); background: linear-gradient(var(--error-color-medium), var(--error-color-low)); border-color: var(--error-color-high); } .cbi-page-actions .cbi-button-apply + .cbi-button-save, .cbi-page-actions .cbi-button-negative + .cbi-button-save { --on-color: var(--success-color-high); border-color: var(--on-color); background: var(--default-btn-background); } .cbi-dropdown { display: inline-flex !important; cursor: pointer; height: auto; position: relative; padding: 0 !important; } .cbi-dropdown:not(.btn):not(.cbi-button) { background: linear-gradient(var(--background-color-high) 0%, var(--border-color-low) 100%); border: 1px solid var(--border-color-high); border-radius: 3px; color: var(--text-color-high); } .cbi-dropdown > ul { margin: 0 !important; padding: 0; list-style: none; overflow-x: hidden; overflow-y: hidden; display: flex; width: 100%; } .cbi-dropdown.btn > ul:not(.dropdown), .cbi-dropdown.cbi-button > ul:not(.dropdown) { margin: 0 0 0 13px !important; } .cbi-dropdown.btn.spinning > ul:not(.dropdown), .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) { margin: 0 !important; } .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 .3em; } .cbi-dropdown.btn > .open, .cbi-dropdown.cbi-button > .open { padding: 0 .5em; margin-left: .5em; border-left: 1px solid; } .cbi-dropdown > .more, .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] { color: var(--text-color-medium); display: none; } .cbi-dropdown > ul > li { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; flex-grow: 1; align-items: center; align-self: center; color: inherit; } .cbi-dropdown > ul.dropdown > li, .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li { min-height: 20px; padding: .25em; color: var(--text-color-high); } .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 var(--border-color-high); } .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 .25em 0 0; } .cbi-dropdown > ul > li input[type="text"] { height: 20px; } .cbi-dropdown[open] { position: relative; } .cbi-dropdown[open] > ul.dropdown { display: block; background: var(--background-color-low); border: 1px solid #918e8c; box-shadow: 0 0 4px #918e8c; position: absolute; z-index: 1100; max-width: none; min-width: 100%; width: auto; transition: max-height .125s ease-in; overflow-y: 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 !important; } .cbi-dropdown[empty] > ul > li, .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder] { display: block !important; } .cbi-dropdown[multiple][open] > ul.dropdown > li > form { display: flex !important; } .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 var(--border-color-high); } .cbi-dropdown[open] > ul.dropdown > li[selected] { background: var(--primary-color-medium); color: var(--on-primary-color); } .cbi-dropdown[open] > ul.dropdown > li.focus { background: var(--primary-color-low); color: var(--on-primary-color); } .cbi-dropdown[open] > ul.dropdown > li[selected].focus { background: linear-gradient(90deg, var(--primary-color-medium) 50%, var(--primary-color-low)); } .cbi-dropdown[open] > ul.dropdown > li:last-child { margin-bottom: 0; border-bottom: none; } .cbi-dropdown[open] > ul.dropdown > li[unselectable] { opacity: 0.7; } .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child { width: 100%; } .cbi-title-ref { color: #37c; } .cbi-title-ref::after { content: "➙"; } .cbi-tooltip-container { cursor: help; } .cbi-tooltip { position: absolute; z-index: 1000; left: -10000px; box-shadow: 0 0 2px var(--border-color-high); border-radius: 3px; background: var(--background-color-high); white-space: pre; padding: 2px 5px; opacity: 0; transition: opacity .25s ease-in; } .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { left: auto; opacity: 1; transition: opacity .25s ease-in; } .cbi-progressbar { border: 1px solid var(--border-color-high); border-radius: 3px; position: relative; min-width: 170px; height: 8px; margin: 1.4em 0 4px 0; background: var(--background-color-medium); } .cbi-progressbar > div { background: var(--primary-color-medium); height: 100%; transition: width .25s ease-in; width: 0%; border-radius: 2px; } .cbi-progressbar::before { position: absolute; top: -1.4em; left: 0; content: attr(title); white-space: pre; overflow: hidden; text-overflow: ellipsis; } .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; z-index: 2; position: relative; } .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 hsla(var(--border-color-low-hsl), .25), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, .btn[disabled] { cursor: default; opacity: var(--disabled-opacity); 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: .5em .5em .25em .5em; margin-bottom: .5em; color: var(--on-warn-color); background: linear-gradient(#fceec1, #eedc94); border: 1px solid var(--border-color-low); border-color: var(--border-color-high) var(--border-color-high) var(--border-color-low); border-radius: 4px; box-shadow: 1px 1px 1px var(--border-color-low); white-space: unset; } .alert-message .close { margin-top: 1px; } .alert-message h4, .alert-message h5, .alert-message pre, .alert-message ul, .alert-message li, .alert-message p { color: inherit; border: none; line-height: inherit; background: transparent; padding: 0; margin: .25em 0; } .alert-message button { margin: .25em 0; } .label, header [data-indicator] { padding: 3px 3px 2px; font-size: 9.75px; font-weight: bold; color: var(--text-color-high); text-transform: uppercase; white-space: nowrap; background-color: var(--background-color-low); border-radius: 3px; text-shadow: none; margin: .125em 0 .125em .4em; } header [data-indicator][data-clickable] { cursor: pointer; } a.label:link, a.label:visited { color: #fff; } a.label:hover { text-decoration: none; } .label.important { background-color: var(--primary-color-high); color: var(--on-primary-color); } .label.warning { background-color: var(--warn-color-high); color: var(--on-warn-color); } .label.success { background-color: var(--success-color-high); color: var(--on-success-color); } .label.notice, header [data-indicator][data-style="active"] { color: var(--on-primary-color); background-color: var(--primary-color-high); } /* LuCI specific items */ .hidden { display: none } form.inline { display: inline; margin-bottom: 0; } #modemenu li:last-child span.divider { display: none } #syslog { width: 100%; color: var(--text-color-highest); margin-bottom: 18px; font-family: monospace; } .cbi-section-table .tr:hover .td, .cbi-section-table .tr:hover .th, .cbi-section-table .tr:hover::before { background-color: var(--background-color-low); } .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-titles.named::before, .cbi-section-table-descr.named::before, .cbi-section-table-row[data-title]::before { border-top: 1px solid var(--border-color-medium); } .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; } 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, .table.cbi-section-table .cbi-select { width: 100%; min-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, .table.cbi-section-table .td.cbi-section-table-cell .cbi-select { width: inherit; } .td.cbi-section-actions { text-align: right; vertical-align: middle; width: 15%; } .td.cbi-section-actions > * { display: flex; } .td.cbi-section-actions > :not(.cbi-dropdown) > *, .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, .tr.table-titles, .tr.cbi-section-table-titles { background: var(--background-color-medium); } th[data-sortable-row] { cursor: pointer; } th[data-sort-direction="asc"]::after { content: "\a0\25b2"; } th[data-sort-direction="desc"]::after { content: "\a0\25bc"; } .cbi-value-description { margin: .25em 0 0 1.25em; position: relative; } .cbi-value-description:not(:empty)::before { --help-icon: url("data:image/svg+xml,"); position: absolute; left: -1.25em; content: "\a0"; display: inline-block; width: 1em; height: 1em; margin-right: .25em; background: var(--primary-color-high); mask-image: var(--help-icon); mask-size: cover; -webkit-mask-image: var(--help-icon); -webkit-mask-size: cover; } .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 { border: 1px solid var(--border-color-high); margin: 0 10px; text-align: center; white-space: nowrap; background: linear-gradient(var(--background-color-high), var(--background-color-medium)); border-radius: 4px; box-shadow: inset 0 1px 0 hsla(var(--text-color-low-hsl), 0.05); display: inline-flex; flex-direction: column; line-height: 1.2em; min-width: 100px; } .ifacebox .ifacebox-head { border-bottom: 1px solid var(--border-color-high); border-radius: 3px 3px 0 0; padding: 2px; background: #eee; color: var(--text-color-high); } .ifacebox .ifacebox-head[style] { text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); } .ifacebox .ifacebox-head.active { background: var(--primary-color-high); color: var(--on-primary-color); } [data-darkmode="true"] .zonebadge[style], [data-darkmode="true"] .ifacebox-head[style] { background: linear-gradient(rgba(var(--zone-color-rgb), .4), rgba(var(--zone-color-rgb), .3)) !important; } .ifacebox .ifacebox-body { padding: .25em; } .ifacebadge { display: inline-block; flex-direction: row; white-space: nowrap; border: 1px solid var(--border-color-high); padding: 2px; background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium)); color: var(--text-color-high); text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 hsla(var(--background-color-high-hsl), 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; height: 100%; } .network-status-table .ifacebox-body > div { margin: -.125em; display: flex; flex-wrap: wrap; } #dsl_status_table .ifacebox-body span > strong { display: inline-block; min-width: 35%; } .ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge { display: flex; flex: 1; padding: .25em; min-width: 220px; margin: .125em; } .ifacebadge.large { display: inline-flex; } .network-status-table .ifacebox-body .ifacebadge > span { overflow: hidden; text-overflow: ellipsis; } .ifacebadge > *, .ifacebadge.large > * { margin: 0 .125em; } .zonebadge { padding: 2px; border-radius: 4px; display: inline-block; white-space: nowrap; color: var(--text-color-high); text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 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; } div.cbi-value var[data-tooltip], .td.cbi-value-field var[data-tooltip], div.cbi-value var.cbi-tooltip-container, .td.cbi-value-field var.cbi-tooltip-container { cursor: help; border-bottom: 1px dotted #0069d6; } div.cbi-value var.cbi-tooltip-container, .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip { font-style: normal; white-space: normal; color: var(--text-color-high); } #modal_overlay > .modal.uci-dialog, #modal_overlay > .modal.cbi-modal { max-width: 900px; } #modal_overlay > .modal.login > button.important { font-size: 120% !important; margin-top: .5em; width: 100%; } .uci-change-list { line-height: 170%; white-space: pre; } .uci-dialog div > del, .uci-dialog div > ins, .uci-dialog div > var { margin-bottom: 2px; border: 1px solid var(--border-color-high); line-height: 15px; overflow: hidden; text-overflow: ellipsis; padding: 2px; position: relative; background-color: var(--background-color-low); } .uci-dialog div > ins { background-color: rgba(var(--success-color-high-rgb), .3); border-color: rgba(var(--success-color-high-rgb), .6); } .uci-dialog div > del { background-color: rgba(var(--error-color-high-rgb), .3); border-color: rgba(var(--error-color-high-rgb), .6); } .uci-dialog var > ins { background-color: rgba(var(--success-color-high-rgb), .3); } .uci-dialog var > del { background-color: rgba(var(--error-color-high-rgb), .3); } .uci-change-list > var > * { overflow: hidden; text-overflow: ellipsis; } .uci-dialog del, .uci-dialog ins, .uci-dialog var { text-decoration: none; font-family: monospace; font-style: normal; color: var(--text-color-high); display: block; } .uci-change-legend { display: flex; flex-wrap: wrap; } .uci-change-legend-label { flex-basis: 150px; margin: 2px; display: flex; align-items: center; } .uci-change-legend-label > ins, .uci-change-legend-label > del, .uci-change-legend-label > var { margin-right: 4px; width: 16px; height: 16px; display: flex; } .uci-change-legend-label > * > * { flex-basis: 100%; padding: 1px; } #applyreboot-section { line-height: 300%; } @keyframes flash { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } .flash { animation: flash .35s; } #view > div.spinning:first-child { display: table; margin: 15vh auto; } .spinning { position: relative; padding-left: 32px !important; } .spinning::before { --spinner-icon: url("data:image/svg+xml,"); position: absolute; top: calc(50% - 10px); left: 6px; width: 20px; height: 20px; content: " "; background: var(--on-color, #000); mask: var(--spinner-icon) center/cover no-repeat; -webkit-mask: var(--spinner-icon) center/cover no-repeat; } [data-darkmode="true"] .spinning::before { background: var(--on-color, #fff); } [data-tab-title] { height: 0; opacity: 0; overflow: hidden; } [data-tab-active="true"] { opacity: 1; height: auto; overflow: visible; transition: opacity .25s ease-in; } .cbi-filebrowser { min-width: 210px; max-width: 100%; border: 1px solid #ccc; border-radius: 3px; display: flex; flex-direction: column; opacity: 0; height: 0; overflow: hidden; } .cbi-filebrowser.open { opacity: 1; height: auto; overflow: visible; transition: opacity .25s ease-in; } .cbi-filebrowser > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 0 .25em 0; margin: .25em .25em 0px .25em; white-space: nowrap; border-bottom: 1px solid #ccc; } .cbi-filebrowser .cbi-button-positive { margin-right: .25em; } .cbi-filebrowser > div { border-bottom: none; } .cbi-filebrowser > ul > li { display: flex; flex-direction: row; } .cbi-filebrowser > ul > li:hover { background: #f5f5f5; } .cbi-filebrowser > ul > li > div:first-child { flex: 10; overflow: hidden; text-overflow: ellipsis; } .cbi-filebrowser > ul > li > div:last-child { flex: 3; text-align: right; } .cbi-filebrowser > ul > li > div:last-child > button { padding: .125em .25em; margin: 1px 0 1px .25em; } .cbi-filebrowser .upload { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 -.125em .25em -.125em; padding: 0 0 .125em 0px; border-bottom: 1px solid #ccc; } .cbi-filebrowser .upload > * { margin: .125em; flex: 1; } .cbi-filebrowser .upload > .btn { flex-basis: 60px; } .cbi-filebrowser .upload > div { flex: 10; min-width: 150px; } .cbi-filebrowser .upload > div > input { width: 100%; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-in { animation: fade-in .4s ease; } .fade-out { animation: fade-out .4s ease; } .assoclist .ifacebadge { display: flex; flex-direction: column; align-items: center; white-space: normal; text-align: center; } .assoclist .ifacebadge > img { margin: .2em; } .assoclist .td:nth-of-type(3), .assoclist .td:nth-of-type(5) { width: 25%; } .assoclist .td:nth-of-type(6) button { word-break: normal; } [data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img { filter: invert(100%) hue-rotate(150deg); } [data-page="admin-system-admin-sshkeys"] .cbi-dynlist { max-width: none; }