diff options
Diffstat (limited to 'themes/luci-theme-bootstrap')
3 files changed, 727 insertions, 156 deletions
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 260f5e31c..21a2291e5 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, ins, 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 { @@ -164,13 +128,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 +174,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 +383,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,20 +391,20 @@ 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; } @@ -457,11 +419,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 +437,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, @@ -486,18 +454,67 @@ select, padding: 4px; font-size: 13px; line-height: 18px; - color: #808080; border: 1px solid #ccc; border-radius: 3px; - box-sizing: border-box; } -.cbi-dropdown { +.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 +547,20 @@ 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; + height: auto !important; } .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,11 +580,12 @@ textarea { color: #bfbfbf; } -.btn, .cbi-button, input, textarea { +.item::after, .btn, .cbi-button, input, textarea { transition: border linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } +.item:hover::after, .btn:hover, .cbi-button:hover, input:focus, textarea:focus { outline: 0; @@ -733,7 +746,7 @@ header { top: 0; left: 0; right: 0; - z-index: 10000; + z-index: 800; overflow: visible; color: #BFBFBF; } @@ -1010,44 +1023,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 +1093,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 +1153,61 @@ 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; +} + +.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 +1223,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 +1236,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 +1284,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 +1376,7 @@ footer { color: #404040; } +.cbi-dynlist > .item:focus, .cbi-dropdown:focus { outline: 2px solid #4b6e9b; } @@ -1352,6 +1413,7 @@ footer { font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; + justify-content: center; } .cbi-dropdown > ul > li { @@ -1409,10 +1471,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,6 +1515,14 @@ 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; @@ -1462,12 +1533,11 @@ input[type="password"] + .cbi-button, select + .cbi-button { border-radius: 0 3px 3px 0; border-color: #ccc; - margin: 0 0 1px -2px; + margin-left: -2px; padding: 0 6px; vertical-align: top; - height: 28px; + height: 30px; font-size: 14px; - font-weight: bold; line-height: 28px; } @@ -1491,8 +1561,13 @@ select + .cbi-button { position: absolute; z-index: 1000; left: -1000px; + 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) { @@ -1501,6 +1576,37 @@ select + .cbi-button { 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; @@ -1672,19 +1778,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; } @@ -1900,7 +1993,7 @@ table table td, margin: -.125em; } -#dsl_status_table .ifacebox-body > span > strong { +#dsl_status_table .ifacebox-body span > strong { display: inline-block; min-width: 35%; } @@ -2033,6 +2126,59 @@ div.cbi-value var, 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); } @@ -2040,3 +2186,46 @@ html body.apply-overlay-active { #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; +} diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css index b74f20904..062d274b7 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -6,11 +6,367 @@ header h3 a, header .brand { #maincontent.container { margin-top: 30px; } + + .tabs, .cbi-tabmenu { + background: linear-gradient(#fff 20%, #ddd 100%); + background-size: 1px 34px; + margin-bottom: 10px; + } + + .tabs > li, .cbi-tabmenu > li { + height: 30px; + } + + .tabs > li > a, .cbi-tabmenu > li > a { + padding: 0 8px; + line-height: 30px; + } + + .table { + display: flex; + flex-direction: column; + width: 100%; + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + border-top: 1px solid #ddd; + padding: 5px 0; + margin: 0 -3px; + } + + .table .th, + .table .td, + .table .tr::before { + flex: 2 2 33%; + align-self: flex-start; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + display: inline-block; + border-top: none; + padding: 3px; + box-sizing: border-box; + } + + .table .td.cbi-dropdown-open { + overflow: visible; + } + + .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } + .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } + .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } + .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } + .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } + .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } + .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } + .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } + .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } + .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; } + + .td select { + word-wrap: normal; + } + + .td[data-type="button"], + .td[data-type="fvalue"] { + flex: 1 1 17%; + text-align: left; + } + + .td.cbi-value-field { + align-self: flex-start; + } + + .td.cbi-value-field .cbi-button { + width: 100%; + } + + .table.cbi-section-table { + border: none; + background: none; + margin: 0; + } + + .tr.table-titles, + .cbi-section-table-titles, + .cbi-section-table-descr { + display: none; + } + + .cbi-section-table-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 0 .5em 0; + } + + .cbi-section-table + .cbi-section-create { + padding-top: 0; + } + + .tr[data-title]::before { + display: block; + flex: 1 1 100%; + background: #f5f5f5 !important; + font-size: 16px; + border-bottom: 1px solid #ddd; + } + + .td[data-title]::before, + .td[data-description]::after { + display: block; + } + + .td[data-title] ~ .td.cbi-section-actions { + align-self: flex-start; + } + + .td[data-title] ~ .td.cbi-section-actions::before { + display: block; + content: "\a0"; + } + + .td.cbi-section-actions { + overflow: initial; + max-width: 100%; + padding: 3px 2px; + } + + .hide-sm, + .hide-xs { + display: none !important; + } + + .td.cbi-value-field { + flex-basis: 100%; + } + + .td.cbi-value-field[data-type="dvalue"] { + flex-basis: 50%; + } + + .td.cbi-value-field[data-type="button"], + .td.cbi-value-field[data-type="fvalue"] { + flex-basis: 25%; + text-align: left; + } + + .cbi-section-table .tr:hover .td, + .cbi-section-table .tr:hover .th, + .cbi-section-table .tr:hover::before { + background-color: transparent; + } + + .cbi-value { + padding-bottom: .5em; + border-bottom: 1px solid #ddd; + margin-bottom: .5em; + } + + .cbi-value label.cbi-value-title { + float: none; + font-weight: bold; + } + + .cbi-value-field, .cbi-dropdown { + width: 100%; + margin: 0; + } + + input, textarea, select { + font-size: 16px !important; + line-height: 28px; + } + + select, input[type="text"], input[type="password"] { + width: 100%; + height: 30px; + } + + input.cbi-input-password { + width: calc(100% - 25px); + } + + [data-dynlist] { + display: block; + } + + [data-dynlist] > .add-item > input { + width: calc(100% - 21px); + } + + [data-dynlist] > .add-item > .cbi-button { + margin-right: -1px; + } + + input[type="text"] + .cbi-button, + input[type="password"] + .cbi-button, + select + .cbi-button { + font-size: 14px !important; + line-height: 28px; + height: 30px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-value-field input[type="checkbox"], + .cbi-value-field input[type="radio"] { + margin: 0; + } + + .btn, .cbi-button { + font-size: 14px !important; + padding: 4px 8px; + } + + .actions, + .cbi-page-actions { + border-top: none; + margin-top: -.5em; + padding: 8px; + } + + [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-child, + [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-child { + flex-grow: 1; + } + + header .pull-right .label { + white-space: normal; + display: inline-block; + text-align: center; + line-height: 12px; + margin: 1px 0; + } + + header > .fill { + padding: 1px; + } + + header > .fill > .container { + display: flex; + flex-direction: row; + } + + header .nav { + flex: 3 3 80%; + margin: 2px 5px 2px 0; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + header .nav a { + padding: 2px 6px; + } + + header .pull-right { + flex: 1 1 20%; + display: flex; + flex-direction: column; + padding: 0; + justify-content: space-around; + } + + .menu-dropdown, .dropdown-menu { + top: 23px; + } + + body { + padding-top: 30px; + } + + .cbi-optionals, + .cbi-section-create { + padding: 0 0 14px 0; + } + + #cbi-network-switch_vlan .th, + #cbi-network-switch_vlan .td { + flex-basis: 12%; + } + + #cbi-network-switch_vlan .td.cbi-section-actions { + flex-basis: 100%; + } + + #cbi-network-switch_vlan .td.cbi-section-actions::before { + display: none; + } + + #cbi-network-switch_vlan .td.cbi-section-actions > * { + width: auto; + display: block; + } + + #wifi_assoclist_table .td, + [data-page="admin-status-processes"] .td { + flex-basis: 50% !important; + } + + [data-page="admin-status-processes"] .td[data-type="button"] { + flex-basis: 33% !important; + } + + [data-page="admin-status-processes"] .td[data-name="PID"], + [data-page="admin-status-processes"] .td[data-name="USER"] { + flex-basis: 25% !important; + } + + [data-page="admin-system-fstab"] .td[data-type="button"]::before, + [data-page="admin-system-startup"] .td[data-type="button"]::before, + [data-page="admin-status-processes"] .td[data-type="button"]::before { + display: none; + } } -@media screen and (max-device-width: 360px) { +@media screen and (max-device-width: 375px) { #maincontent.container { - margin-top: 60px; + margin-top: 55px; + } + + .cbi-page-actions { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 -1px; + padding: 0; + } + + .cbi-page-actions .cbi-button { + flex: 1 1 calc(50% - 2px); + margin: 1px !important; + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-page-actions .cbi-button-primary, + .cbi-page-actions .cbi-button-apply { + flex-basis: calc(100% - -2px); + } + + .cbi-section-actions .cbi-button { + overflow: hidden; + text-overflow: ellipsis; + } + + body[data-page="admin-network-wireless"] .td.col-2 { + max-width: 50px; + } + + body[data-page="admin-network-wireless"] .td.col-2 > .ifacebadge { + display: flex; + align-items: center; + flex-direction: column; + } + + body[data-page="admin-network-network"] .td.col-3 { + min-width: 250px; } } @@ -18,4 +374,29 @@ header h3 a, header .brand { #maincontent.container { margin-top: 230px; } -}
\ No newline at end of file +} + +@media screen and (max-width: 375px) { + .td .ifacebox { + width: 100%; + margin: 0 !important; + flex-direction: row; + } + + .td .ifacebox .ifacebox-head { + min-width: 25%; + justify-content: space-around; + } + + .td .ifacebox .ifacebox-head, + .td .ifacebox .ifacebox-body { + display: flex; + border-bottom: none; + align-items: center; + } + + .td .ifacebox .ifacebox-head > *, + .ifacebox .ifacebox-body > * { + margin: .125em; + } +} diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index a6bb32697..d784e4ff9 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -98,7 +98,7 @@ local nnode = node.nodes[r] write('<li><a href="%s">%s</a></li>' %{ nodeurl(prefix, r, nnode.query), - pcdata(striptags(translate(nnode.title))) + striptags(translate(nnode.title)) }) end @@ -116,13 +116,13 @@ local grandchildren = disp.node_childs(nnode) if #grandchildren > 0 then - write('<li class="dropdown"><a class="menu" href="#">%s</a>' % pcdata(striptags(translate(nnode.title)))) + write('<li class="dropdown"><a class="menu" href="#">%s</a>' % striptags(translate(nnode.title))) render_submenu(category .. "/" .. r, nnode) write('</li>') else write('<li><a href="%s">%s</a></li>' %{ nodeurl(category, r, nnode.query), - pcdata(striptags(translate(nnode.title))) + striptags(translate(nnode.title)) }) end end @@ -167,11 +167,12 @@ <% if css then %> <style title="text/css"><%= css %></style> <% end -%> + <script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> <script src="<%=resource%>/cbi.js"></script> <script src="<%=resource%>/xhr.js"></script> </head> - <body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>"> + <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= table.concat(disp.context.requestpath, "-") %>"> <header> <div class="fill"> <div class="container"> @@ -193,7 +194,7 @@ <div class="alert-message warning"> <h4><%:No password set!%></h4> <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> - <% if disp.lookup("amdin/system/admin") then %> + <% if disp.lookup("admin/system/admin") then %> <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> <% end %> </div> |