X-Git-Url: https://git.librecmc.org/?a=blobdiff_plain;f=themes%2Fluci-theme-bootstrap%2Fhtdocs%2Fluci-static%2Fbootstrap%2Fcascade.css;h=f61e7b02d4e10bf55c937424fb4f8e89f616b06c;hb=d7810e7650bfef36d5583342e11f14112299da0a;hp=a6ff0dc7334b30a043c7422cc7246f2ec14e4177;hpb=a68006245df16599145c00b949d2c8c97a327295;p=oweals%2Fluci.git diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index a6ff0dc73..f61e7b02d 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -13,28 +13,12 @@ /* 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; + box-sizing: border-box; } abbr[title], acronym[title] { @@ -52,15 +36,7 @@ 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%; @@ -74,14 +50,8 @@ a:hover, a:active { outline: 0; } -article, -aside, -details, -figcaption, -figure, footer, header, -hgroup, nav, section { display: block; @@ -103,7 +73,6 @@ sub { } img { - border: 0; -ms-interpolation-mode: bicubic; } @@ -116,12 +85,7 @@ textarea { 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 { @@ -135,6 +99,7 @@ input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; + word-break: break-all; } button[disabled], @@ -164,13 +129,12 @@ textarea { * ------------------------------------------------------------------------------------------- */ 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; + padding: 58px 5px 5px 5px; } .container { @@ -211,6 +175,10 @@ a:hover { float: left; } +.nowrap { + white-space: nowrap; +} + /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ @@ -416,11 +384,6 @@ fieldset legend { 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 { @@ -429,25 +392,26 @@ form .cbi-tab-descr { } form .clearfix, -form .cbi-value { +.cbi-value { margin-bottom: 18px; zoom: 1; } form .clearfix:before, form .clearfix:after, -form .cbi-value:before, form .cbi-value:after { +.cbi-value:before, .cbi-value:after { display: table; content: ""; zoom: 1; } form .clearfix:after, -form .cbi-value:after { +.cbi-value:after { clear: both; } label, input, +button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -457,11 +421,11 @@ textarea { } form .input, -form .cbi-value-field { +.cbi-value-field { margin-left: 200px; } -form .cbi-value label.cbi-value-title { +.cbi-value label.cbi-value-title { padding-top: 6px; font-size: 13px; line-height: 18px; @@ -475,6 +439,12 @@ input[type=checkbox], input[type=radio] { cursor: pointer; } +label > input[type="checkbox"], +label > input[type="radio"] { + vertical-align: bottom; + margin: 0; +} + input, textarea, select, @@ -482,22 +452,77 @@ select, .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 { +input, +select, +.cbi-dropdown:not(.btn):not(.cbi-button), +.uneditable-input { + height: 30px; +} + +.uneditable-input { + color: #808080; +} + +.cbi-dropdown, +.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 #ccc; + background: #fff; + padding: 2px 2em 2px 4px; + border: 1px solid #ccc; + border-radius: 3px; + position: relative; + pointer-events: none; +} + +.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 #ccc; + 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; +} + select { padding: initial; background: #fff; @@ -530,25 +555,16 @@ input[type=button], input[type=reset], input[type=submit] { 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 { +.td > .cbi-dropdown, +.cbi-dynlist > .add-item > .cbi-dropdown { width: 100%; } @@ -568,12 +584,13 @@ textarea { color: #bfbfbf; } -.btn, .cbi-button, input, textarea { +.item::after, .btn, .cbi-button, input, button, 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, +.item:hover::after, +.btn:hover, .cbi-button:hover, button:hover, input:focus, textarea:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8) !important; @@ -587,9 +604,11 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { } input[disabled], +button[disabled], select[disabled], textarea[disabled], input[readonly], +button[readonly], select[readonly], textarea[readonly] { background-color: #f5f5f5; @@ -724,6 +743,16 @@ textarea[readonly] { 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 * ---------------------------------------------------------------------------- */ @@ -733,7 +762,7 @@ header { top: 0; left: 0; right: 0; - z-index: 10000; + z-index: 800; overflow: visible; color: #BFBFBF; } @@ -1010,44 +1039,61 @@ header .dropdown-menu a.hover, } .tabs, .cbi-tabmenu { - margin: 0 0 18px; - padding: 0; + margin: 0 -5px 18px; + padding: 0 2px; 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; + display: flex; + flex-wrap: wrap; + background: linear-gradient(#fff 28px, #ddd 28px); + background-size: 1px 29px; + background-position: left bottom; } .tabs > li, .cbi-tabmenu > li { - float: left; + flex: 0 1 auto; + display: flex; + align-items: center; + height: 25px; + max-width: 48%; + margin: 4px 2px 0 2px; + background: #fff; + border: 1px solid #ddd; + border-bottom: none; + border-radius: 4px 4px 0 0; + color: #0069d6; } .tabs > li > a, .cbi-tabmenu > li > a { - display: block; + 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, -.cbi-tabmenu { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; +.tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover { + background: linear-gradient(#fff 90%, #ddd 100%); } -.tabs > li, -.cbi-tabmenu > li { - position: relative; - margin-bottom: -1px; +.tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled { + color: #999; + background: linear-gradient(#eee 90%, #ddd 100%); +} + +.cbi-tab-disabled[data-errors]::after { + content: attr(data-errors); + background: #c43c35; + color: #fff; + min-width: 12px; + line-height: 14px; + border-radius: 7px; + text-align: center; + margin: 0 5px 0 0; + padding: 1px 2px; } .cbi-tabmenu.map { @@ -1063,53 +1109,23 @@ header .dropdown-menu a.hover, 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 { +.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, -.cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after { +.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, -.cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle { +.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, -.cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after { +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { border-top-color: #555; } @@ -1153,6 +1169,62 @@ footer { border-top: 1px solid #eee; } +#modal_overlay { + position: fixed; + top: 0; + bottom: 0; + left: -10000px; + right: 10000px; + background: rgba(0, 0, 0, 0.7); + z-index: 900; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + transition: opacity .125s ease-in; + opacity: 0; + visibility: hidden; +} + +.modal { + width: 90%; + margin: 5em auto; + display: flex; + flex-wrap: wrap; + min-height: 32px; + max-width: 600px; + align-items: center; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 3px #444; + padding: 1em 1em .5em 1em; + max-height: 2400px; + min-width: 270px; +} + +.modal > * { + flex-basis: 100%; + line-height: normal; + margin-bottom: .5em; + max-width: 100%; +} + +.modal > pre, +.modal > textarea { + white-space: pre-wrap; + overflow: auto; +} + +body.modal-overlay-active { + overflow: hidden; + height: 100vh; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; + visibility: visible; +} + .btn.danger, .alert-message.danger, .btn.danger:hover, @@ -1168,7 +1240,8 @@ footer { .btn.info, .alert-message.info, .btn.info:hover, -.alert-message.info:hover { +.alert-message.info:hover, +.cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info { color: #fff; } @@ -1180,30 +1253,32 @@ footer { .btn.danger, .alert-message.danger, .btn.error, -.alert-message.error { +.alert-message.error, +.cbi-tooltip.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 { +.btn.success, .alert-message.success, .cbi-tooltip.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 { +.btn.info, .alert-message.info, .cbi-tooltip.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 { +.alert-message.notice, .cbi-tooltip.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); } +.item::after, .btn, .cbi-button { cursor: pointer; @@ -1226,6 +1301,8 @@ footer { } .cbi-input-invalid, +.cbi-input-invalid.cbi-dropdown, +.cbi-input-invalid.cbi-dropdown:not([open]) > ul > li, .cbi-value-error input { color: #f00; border-color: #f00; @@ -1316,6 +1393,7 @@ footer { color: #404040; } +.cbi-dynlist > .item:focus, .cbi-dropdown:focus { outline: 2px solid #4b6e9b; } @@ -1352,6 +1430,7 @@ footer { font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; + justify-content: center; } .cbi-dropdown > ul > li { @@ -1409,10 +1488,11 @@ footer { border: 1px solid #918e8c; box-shadow: 0 0 4px #918e8c; position: absolute; - z-index: 1000; + z-index: 1100; max-width: none; min-width: 100%; width: auto; + transition: max-height .125s ease-in; } .cbi-dropdown > ul > li[display], @@ -1452,11 +1532,44 @@ footer { 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-dropdown[disabled] { pointer-events: none; opacity: .6; } +input[type="text"] + .cbi-button, +input[type="password"] + .cbi-button, +select + .cbi-button { + border-radius: 0 3px 3px 0; + border-color: #ccc; + margin-left: -2px; + padding: 0 6px; + vertical-align: top; + height: 30px; + font-size: 14px; + line-height: 28px; +} + +select + .cbi-button { + border-left-color: transparent; +} + +.cbi-title-ref { + color: #37c; +} + +.cbi-title-ref::after { + content: "➙"; +} + .cbi-tooltip-container { cursor: help; } @@ -1464,9 +1577,14 @@ footer { .cbi-tooltip { position: absolute; z-index: 1000; - left: -1000px; + left: -10000px; + box-shadow: 0 0 2px #ccc; + border-radius: 3px; + background: #fff; + white-space: pre; + padding: 2px 5px; opacity: 0; - transition: opacity .25s ease-out; + transition: opacity .25s ease-in; } .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { @@ -1475,6 +1593,37 @@ footer { transition: opacity .25s ease-in; } +.cbi-progressbar { + border: 1px solid #ccc; + border-radius: 3px; + position: relative; + min-width: 170px; + height: 20px; + margin: 4px 0; + background: #f9f9f9; +} + +.cbi-progressbar > div { + background: #90c0e0; + height: 100%; + transition: width .25s ease-in; + width: 0%; +} + +.cbi-progressbar::after { + position: absolute; + bottom: 0; + top: 0; + right: 0; + left: 0; + text-align: center; + text-shadow: 0 0 2px #fff; + content: attr(title); + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; +} + .zonebadge .cbi-tooltip { padding: 1px; background: inherit; @@ -1515,14 +1664,12 @@ footer { .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; } @@ -1562,8 +1709,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .alert-message { position: relative; - padding: 7px 15px; - margin-bottom: 18px; + padding: .5em .5em .25em .5em; + margin-bottom: .5em; color: #404040; background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); @@ -1580,30 +1727,22 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { *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 h4, +.alert-message h5, +.alert-message pre, +.alert-message ul, +.alert-message li, .alert-message p { - margin-bottom: 0; + color: inherit; + border: none; + line-height: inherit; + background: transparent; + padding: 0; + margin: .25em 0; } -.alert-message div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; +.alert-message button { + margin: .25em 0; } .label { @@ -1646,19 +1785,6 @@ a.label:hover { /* 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; } @@ -1866,23 +1992,36 @@ table table td, .network-status-table .ifacebox-body > span { flex: 10 10 auto; + height: 100%; } .network-status-table .ifacebox-body > div { - display: flex; - flex-wrap: wrap; margin: -.125em; } +#dsl_status_table .ifacebox-body span > strong { + display: inline-block; + min-width: 35%; +} + .ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge { - display: inline-flex; + 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; @@ -1924,48 +2063,57 @@ div.cbi-value var, color: #0069d6; } +#modal_overlay > .modal.uci-dialog, +#modal_overlay > .modal.cbi-modal { + max-width: 900px; +} + .uci-change-list { - font-family: monospace; + line-height: 170%; + white-space: pre; } +.uci-change-list del, .uci-change-list ins, -.uci-change-legend-label ins { +.uci-change-list var, +.uci-change-legend-label del, +.uci-change-legend-label ins, +.uci-change-legend-label var { text-decoration: none; - border: 1px solid #0f0; - background-color: #cfc; - display: block; + font-family: monospace; + font-style: normal; + border: 1px solid #ccc; + background: #eee; padding: 2px; + display: block; + line-height: 15px; + margin-bottom: 1px; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + border-color: #0f0; + background: #cfc; } .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; + border-color: #f00; + background: #fcc; } .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; + border-color: #ccc; + background: #eee; } .uci-change-list var ins, .uci-change-list var del { - display: inline; - /*border: none;*/ - white-space: pre; - font-style: normal; - padding: 0px; + display: inline-block; + border: none; + width: 100%; + padding: 0; } .uci-change-legend { @@ -1982,17 +2130,229 @@ div.cbi-value var, .uci-change-legend-label > var { float: left; margin-right: 4px; - width: 10px; - height: 10px; + width: 16px; + height: 16px; display: block; + position: relative; } .uci-change-legend-label var ins, .uci-change-legend-label var del { - line-height: 6px; border: none; + position: absolute; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; +} + +#modal_overlay { + position: fixed; + top: 0; + bottom: 0; + left: -10000px; + right: 10000px; + background: rgba(0, 0, 0, 0.7); + z-index: 900; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + transition: opacity .125s ease-in; + opacity: 0; +} + +#modal_overlay > .modal { + width: 90%; + margin: 5em auto; + display: flex; + flex-wrap: wrap; + min-height: 32px; + max-width: 600px; + align-items: center; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 3px #444; + padding: 1em 1em .5em 1em; + max-height: 2400px; + min-width: 270px; +} + +#modal_overlay .modal > * { + flex-basis: 100%; + line-height: normal; + margin-bottom: .5em; +} + +#modal_overlay .modal > pre, +#modal_overlay .modal > textarea { + white-space: pre-wrap; + overflow: auto; +} + +body.modal-overlay-active { + overflow: hidden; + height: 100vh; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; } html body.apply-overlay-active { height: calc(100vh - 63px); } + +#applyreboot-section { + line-height: 300%; +} + +[data-page="admin-network-dhcp"] [data-name="ip"] { + width: 15%; +} + +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} + +.flash { + animation: flash .35s; +} + +.spinning { + position: relative; + padding-left: 32px !important; +} + +.spinning::before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 32px; + content: " "; + background: url(../resources/icons/loading.gif) no-repeat center; + background-size: 16px; +} + +[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; +}