diff --git a/luci-base/htdocs/luci-static/resources/cbi.js b/luci-base/htdocs/luci-static/resources/cbi.js index 0a1961916..a7f999d87 100644 --- a/luci-base/htdocs/luci-static/resources/cbi.js +++ b/luci-base/htdocs/luci-static/resources/cbi.js @@ -465,31 +465,16 @@ function cbi_d_add(field, dep, index) { } function cbi_d_checkvalue(target, ref) { - var t = document.getElementById(target); - var value; + var value = null, + query = 'input[id="'+target+'"], input[name="'+target+'"], ' + + 'select[id="'+target+'"], select[name="'+target+'"]'; - if (!t) { - var tl = document.getElementsByName(target); + document.querySelectorAll(query).forEach(function(i) { + if (value === null && ((i.type !== 'radio' && i.type !== 'checkbox') || i.checked === true)) + value = i.value; + }); - if( tl.length > 0 && (tl[0].type == 'radio' || tl[0].type == 'checkbox')) - for( var i = 0; i < tl.length; i++ ) - if( tl[i].checked ) { - value = tl[i].value; - break; - } - - value = value ? value : ""; - } else if (!t.value) { - value = ""; - } else { - value = t.value; - - if (t.type == "checkbox") { - value = t.checked ? value : ""; - } - } - - return (value == ref) + return (((value !== null) ? value : "") == ref); } function cbi_d_check(deps) { @@ -634,6 +619,10 @@ function cbi_init() { node.getAttribute('data-type')); } + document.querySelectorAll('.cbi-dropdown').forEach(function(s) { + cbi_dropdown_init(s); + }); + cbi_d_update(); } @@ -1574,3 +1563,484 @@ function E() return elem; } + +if (typeof(window.CustomEvent) !== 'function') { + function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent('CustomEvent'); + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); + return evt; + } + + CustomEvent.prototype = window.Event.prototype; + window.CustomEvent = CustomEvent; +} + +CBIDropdown = { + openDropdown: function(sb) { + var st = window.getComputedStyle(sb, null), + ul = sb.querySelector('ul'), + li = ul.querySelectorAll('li'), + sel = ul.querySelector('[selected]'), + rect = sb.getBoundingClientRect(), + h = sb.clientHeight - parseFloat(st.paddingTop) - parseFloat(st.paddingBottom), + mh = this.dropdown_items * h, + eh = Math.min(mh, li.length * h); + + document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) { + s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {})); + }); + + ul.style.maxHeight = mh + 'px'; + sb.setAttribute('open', ''); + + ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0; + ul.querySelectorAll('[selected] input[type="checkbox"]').forEach(function(c) { + c.checked = true; + }); + + ul.style.top = ul.style.bottom = ''; + ul.style[((sb.getBoundingClientRect().top + eh) > window.innerHeight) ? 'bottom' : 'top'] = rect.height + 'px'; + ul.classList.add('dropdown'); + + var pv = ul.cloneNode(true); + pv.classList.remove('dropdown'); + pv.classList.add('preview'); + + sb.insertBefore(pv, ul.nextElementSibling); + + li.forEach(function(l) { + l.setAttribute('tabindex', 0); + }); + + sb.lastElementChild.setAttribute('tabindex', 0); + + this.setFocus(sb, sel || li[0], true); + }, + + closeDropdown: function(sb, no_focus) { + if (!sb.hasAttribute('open')) + return; + + var pv = sb.querySelector('ul.preview'), + ul = sb.querySelector('ul.dropdown'), + li = ul.querySelectorAll('li'); + + li.forEach(function(l) { l.removeAttribute('tabindex'); }); + sb.lastElementChild.removeAttribute('tabindex'); + + sb.removeChild(pv); + sb.removeAttribute('open'); + sb.style.width = sb.style.height = ''; + + ul.classList.remove('dropdown'); + + if (!no_focus) + this.setFocus(sb, sb); + + this.saveValues(sb, ul); + }, + + toggleItem: function(sb, li, force_state) { + if (li.hasAttribute('unselectable')) + return; + + if (this.multi) { + var cbox = li.querySelector('input[type="checkbox"]'), + items = li.parentNode.querySelectorAll('li'), + label = sb.querySelector('ul.preview'), + sel = li.parentNode.querySelectorAll('[selected]').length, + more = sb.querySelector('.more'), + ndisplay = this.display_items, + n = 0; + + if (li.hasAttribute('selected')) { + if (force_state !== true) { + if (sel > 1 || this.optional) { + li.removeAttribute('selected'); + cbox.checked = cbox.disabled = false; + sel--; + } + else { + cbox.disabled = true; + } + } + } + else { + if (force_state !== false) { + li.setAttribute('selected', ''); + cbox.checked = true; + cbox.disabled = false; + sel++; + } + } + + while (label.firstElementChild) + label.removeChild(label.firstElementChild); + + for (var i = 0; i < items.length; i++) { + items[i].removeAttribute('display'); + if (items[i].hasAttribute('selected')) { + if (ndisplay-- > 0) { + items[i].setAttribute('display', n++); + label.appendChild(items[i].cloneNode(true)); + } + var c = items[i].querySelector('input[type="checkbox"]'); + if (c) + c.disabled = (sel == 1 && !this.optional); + } + } + + if (ndisplay < 0) + sb.setAttribute('more', ''); + else + sb.removeAttribute('more'); + + if (ndisplay === this.display_items) + sb.setAttribute('empty', ''); + else + sb.removeAttribute('empty'); + + more.innerHTML = (ndisplay === this.display_items) ? this.placeholder : '···'; + } + else { + var sel = li.parentNode.querySelector('[selected]'); + if (sel) { + sel.removeAttribute('display'); + sel.removeAttribute('selected'); + } + + li.setAttribute('display', 0); + li.setAttribute('selected', ''); + + this.closeDropdown(sb, true); + } + + this.saveValues(sb, li.parentNode); + }, + + transformItem: function(sb, li) { + var cbox = E('form', {}, E('input', { type: 'checkbox', tabindex: -1, onclick: 'event.preventDefault()' })), + label = E('label'); + + while (li.firstChild) + label.appendChild(li.firstChild); + + li.appendChild(cbox); + li.appendChild(label); + }, + + saveValues: function(sb, ul) { + var sel = ul.querySelectorAll('[selected]'), + div = sb.lastElementChild; + + while (div.lastElementChild) + div.removeChild(div.lastElementChild); + + sel.forEach(function (s) { + div.appendChild(E('input', { + type: 'hidden', + name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''), + value: s.hasAttribute('value') ? s.getAttribute('value') : s.innerText + })); + }); + + cbi_d_update(); + }, + + setFocus: function(sb, elem, scroll) { + if (sb && sb.hasAttribute && sb.hasAttribute('locked-in')) + return; + + document.querySelectorAll('.focus').forEach(function(e) { + if (e.nodeName.toLowerCase() !== 'input') { + e.classList.remove('focus'); + e.blur(); + } + }); + + if (elem) { + elem.focus(); + elem.classList.add('focus'); + + if (scroll) + elem.parentNode.scrollTop = elem.offsetTop - elem.parentNode.offsetTop; + } + }, + + createItems: function(sb, value) { + var sbox = this, + val = (value || '').trim().split(/\s+/), + ul = sb.querySelector('ul'); + + if (!sbox.multi) + val.length = Math.min(val.length, 1); + + val.forEach(function(item) { + var new_item = null; + + ul.childNodes.forEach(function(li) { + if (li.getAttribute && li.getAttribute('value') === item) + new_item = li; + }); + + if (!new_item) { + var markup, + tpl = sb.querySelector(sbox.template); + + if (tpl) + markup = (tpl.textContent || tpl.innerHTML || tpl.firstChild.data).replace(/^$/, '').trim(); + else + markup = '
  • {{value}}
    • '; + + new_item = E(markup.replace(/{{value}}/g, item)); + + if (sbox.multi) { + sbox.transformItem(sb, new_item); + } + else { + var old = ul.querySelector('li[created]'); + if (old) + ul.removeChild(old); + + new_item.setAttribute('created', ''); + } + + new_item = ul.insertBefore(new_item, ul.lastElementChild); + } + + sbox.toggleItem(sb, new_item, true); + sbox.setFocus(sb, new_item, true); + }); + }, + + closeAllDropdowns: function() { + document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) { + s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {})); + }); + }, + + findParent: function(node, selector) { + while (node) + if (node.msMatchesSelector && node.msMatchesSelector(selector)) + return node; + else if (node.matches && node.matches(selector)) + return node; + else + node = node.parentNode; + + return null; + } +}; + +function cbi_dropdown_init(sb) { + if (!(this instanceof cbi_dropdown_init)) + return new cbi_dropdown_init(sb); + + this.multi = sb.hasAttribute('multiple'); + this.optional = sb.hasAttribute('optional'); + this.placeholder = sb.getAttribute('placeholder') || '---'; + this.display_items = parseInt(sb.getAttribute('display-items') || 3); + this.dropdown_items = parseInt(sb.getAttribute('dropdown-items') || 5); + this.create = sb.getAttribute('item-create') || '.create-item-input'; + this.template = sb.getAttribute('item-template') || 'script[type="item-template"]'; + + var sbox = this, + ul = sb.querySelector('ul'), + items = ul.querySelectorAll('li'), + more = sb.appendChild(E('span', { class: 'more', tabindex: -1 }, '···')), + open = sb.appendChild(E('span', { class: 'open', tabindex: -1 }, '▾')), + canary = sb.appendChild(E('div')), + create = sb.querySelector(this.create), + ndisplay = this.display_items, + n = 0; + + if (this.multi) { + for (var i = 0; i < items.length; i++) { + sbox.transformItem(sb, items[i]); + + if (items[i].hasAttribute('selected') && ndisplay-- > 0) + items[i].setAttribute('display', n++); + } + } + else { + var sel = sb.querySelectorAll('[selected]'); + + sel.forEach(function(s) { + s.removeAttribute('selected'); + }); + + var s = sel[0] || items[0]; + if (s) { + s.setAttribute('selected', ''); + s.setAttribute('display', n++); + } + + ndisplay--; + + if (this.optional && !ul.querySelector('li[value=""]')) { + var placeholder = E('li', { placeholder: '' }, this.placeholder); + ul.firstChild ? ul.insertBefore(placeholder, ul.firstChild) : ul.appendChild(placeholder); + } + } + + sbox.saveValues(sb, ul); + + ul.setAttribute('tabindex', -1); + sb.setAttribute('tabindex', 0); + + if (ndisplay < 0) + sb.setAttribute('more', '') + else + sb.removeAttribute('more'); + + if (ndisplay === this.display_items) + sb.setAttribute('empty', '') + else + sb.removeAttribute('empty'); + + more.innerHTML = (ndisplay === this.display_items) ? this.placeholder : '···'; + + + sb.addEventListener('click', function(ev) { + if (!this.hasAttribute('open')) { + if (ev.target.nodeName.toLowerCase() !== 'input') + sbox.openDropdown(this); + } + else { + var li = sbox.findParent(ev.target, 'li'); + if (li && li.parentNode.classList.contains('dropdown')) + sbox.toggleItem(this, li); + } + + ev.preventDefault(); + ev.stopPropagation(); + }); + + sb.addEventListener('keydown', function(ev) { + if (ev.target.nodeName.toLowerCase() === 'input') + return; + + if (!this.hasAttribute('open')) { + switch (ev.keyCode) { + case 37: + case 38: + case 39: + case 40: + sbox.openDropdown(this); + ev.preventDefault(); + } + } + else + { + var active = sbox.findParent(document.activeElement, 'li'); + + switch (ev.keyCode) { + case 27: + sbox.closeDropdown(this); + break; + + case 13: + if (active) { + if (!active.hasAttribute('selected')) + sbox.toggleItem(this, active); + sbox.closeDropdown(this); + ev.preventDefault(); + } + break; + + case 32: + if (active) { + sbox.toggleItem(this, active); + ev.preventDefault(); + } + break; + + case 38: + if (active && active.previousElementSibling) { + sbox.setFocus(this, active.previousElementSibling); + ev.preventDefault(); + } + break; + + case 40: + if (active && active.nextElementSibling) { + sbox.setFocus(this, active.nextElementSibling); + ev.preventDefault(); + } + break; + } + } + }); + + sb.addEventListener('cbi-dropdown-close', function(ev) { + sbox.closeDropdown(this, true); + }); + + if ('ontouchstart' in window) { + sb.addEventListener('touchstart', function(ev) { ev.stopPropagation(); }); + window.addEventListener('touchstart', sbox.closeAllDropdowns); + } + else { + sb.addEventListener('mouseover', function(ev) { + if (!this.hasAttribute('open')) + return; + + var li = sbox.findParent(ev.target, 'li'); + if (li) { + if (li.parentNode.classList.contains('dropdown')) + sbox.setFocus(this, li); + + ev.stopPropagation(); + } + }); + + sb.addEventListener('focus', function(ev) { + document.querySelectorAll('.cbi-dropdown[open]').forEach(function(s) { + if (s !== this || this.hasAttribute('open')) + s.dispatchEvent(new CustomEvent('cbi-dropdown-close', {})); + }); + }); + + canary.addEventListener('focus', function(ev) { + sbox.closeDropdown(this.parentNode); + }); + + window.addEventListener('mouseover', sbox.setFocus); + window.addEventListener('click', sbox.closeAllDropdowns); + } + + if (create) { + create.addEventListener('keydown', function(ev) { + switch (ev.keyCode) { + case 13: + sbox.createItems(sb, this.value); + ev.preventDefault(); + this.value = ''; + this.blur(); + break; + } + }); + + create.addEventListener('focus', function(ev) { + var cbox = sbox.findParent(this, 'li').querySelector('input[type="checkbox"]'); + if (cbox) cbox.checked = true; + sb.setAttribute('locked-in', ''); + }); + + create.addEventListener('blur', function(ev) { + var cbox = sbox.findParent(this, 'li').querySelector('input[type="checkbox"]'); + if (cbox) cbox.checked = false; + sb.removeAttribute('locked-in'); + }); + + var li = sbox.findParent(create, 'li'); + + li.setAttribute('unselectable', ''); + li.addEventListener('click', function(ev) { + this.querySelector(sbox.create).focus(); + }); + } +} + +cbi_dropdown_init.prototype = CBIDropdown; diff --git a/luci-base/luasrc/cbi.lua b/luci-base/luasrc/cbi.lua index 4800d2aa7..d275c5b27 100644 --- a/luci-base/luasrc/cbi.lua +++ b/luci-base/luasrc/cbi.lua @@ -1417,6 +1417,12 @@ function AbstractValue.parse(self, section, novld) self:add_error(section, "invalid", val_err) end + if self.alias then + self.section.aliased = self.section.aliased or {} + self.section.aliased[section] = self.section.aliased[section] or {} + self.section.aliased[section][self.alias] = true + end + if fvalue and (self.forcewrite or not (fvalue == cvalue)) then if self:write(section, fvalue) then -- Push events @@ -1426,10 +1432,16 @@ function AbstractValue.parse(self, section, novld) end else -- Unset the UCI or error if self.rmempty or self.optional then - if self:remove(section) then - -- Push events - self.section.changed = true - --luci.util.append(self.map.events, self.events) + if not self.alias or + not self.section.aliased or + not self.section.aliased[section] or + not self.section.aliased[section][self.alias] + then + if self:remove(section) then + -- Push events + self.section.changed = true + --luci.util.append(self.map.events, self.events) + end end elseif cvalue ~= fvalue and not novld then -- trigger validator with nil value to get custom user error msg. @@ -1455,7 +1467,7 @@ function AbstractValue.cfgvalue(self, section) if self.tag_error[section] then value = self:formvalue(section) else - value = self.map:get(section, self.option) + value = self.map:get(section, self.alias or self.option) end if not value then @@ -1496,12 +1508,12 @@ AbstractValue.transform = AbstractValue.validate -- Write to UCI function AbstractValue.write(self, section, value) - return self.map:set(section, self.option, value) + return self.map:set(section, self.alias or self.option, value) end -- Remove from UCI function AbstractValue.remove(self, section) - return self.map:del(section, self.option) + return self.map:del(section, self.alias or self.option) end @@ -1834,6 +1846,15 @@ function DynamicList.formvalue(self, section) end +DropDown = class(MultiValue) + +function DropDown.__init__(self, ...) + ListValue.__init__(self, ...) + self.template = "cbi/dropdown" + self.delimiter = " " +end + + --[[ TextValue - A multi-line value rows: Rows diff --git a/luci-base/luasrc/model/uci.lua b/luci-base/luasrc/model/uci.lua index 461ba9d5a..92c0d8f69 100644 --- a/luci-base/luasrc/model/uci.lua +++ b/luci-base/luasrc/model/uci.lua @@ -8,7 +8,7 @@ local table = require "table" local setmetatable, rawget, rawset = setmetatable, rawget, rawset local require, getmetatable, assert = require, getmetatable, assert -local error, pairs, ipairs = error, pairs, ipairs +local error, pairs, ipairs, select = error, pairs, ipairs, select local type, tostring, tonumber, unpack = type, tostring, tonumber, unpack -- The typical workflow for UCI is: Get a cursor instance from the @@ -106,7 +106,7 @@ function changes(self, config) local _, change for _, change in ipairs(changes) do local operation, section, option, value = unpack(change) - if option and value and operation ~= "add" then + if option and operation ~= "add" then res[package][section] = res[package][section] or { } if operation == "list-add" then @@ -373,15 +373,15 @@ function add(self, config, stype) return self:section(config, stype) end -function set(self, config, section, option, value) - if value == nil then +function set(self, config, section, option, ...) + if select('#', ...) == 0 then local sname, err = self:section(config, option, section) return (not not sname), err else local _, err = call("set", { config = config, section = section, - values = { [option] = value } + values = { [option] = select(1, ...) } }) return (err == nil), ERRSTR[err] end diff --git a/luci-base/luasrc/view/cbi/dropdown.htm b/luci-base/luasrc/view/cbi/dropdown.htm new file mode 100644 index 000000000..bdf724837 --- /dev/null +++ b/luci-base/luasrc/view/cbi/dropdown.htm @@ -0,0 +1,42 @@ +<%+cbi/valueheader%> + +<%- + local selected = { } + + if self.multiple then + local val + for val in luci.util.imatch(self:cfgvalue(section)) do + selected[val] = true + end + else + selected[self:cfgvalue(section)] = true + end + + if not next(selected) and self.default then + selected[self.default] = true + end +-%> + +
    > + +
    + +<%+cbi/valuefooter%> diff --git a/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/luci-base/luasrc/view/cbi/firewall_zonelist.htm index b4260707e..3a108020b 100644 --- a/luci-base/luasrc/view/cbi/firewall_zonelist.htm +++ b/luci-base/luasrc/view/cbi/firewall_zonelist.htm @@ -24,26 +24,42 @@ end -%> - - + <%+cbi/valuefooter%> diff --git a/luci-base/src/po2lmo b/luci-base/src/po2lmo new file mode 100755 index 000000000..a9535aeab Binary files /dev/null and b/luci-base/src/po2lmo differ diff --git a/luci-base/src/po2lmo.o b/luci-base/src/po2lmo.o new file mode 100644 index 000000000..5fe6fe2fb Binary files /dev/null and b/luci-base/src/po2lmo.o differ diff --git a/luci-base/src/template_lmo.o b/luci-base/src/template_lmo.o new file mode 100644 index 000000000..45d49f11c Binary files /dev/null and b/luci-base/src/template_lmo.o differ diff --git a/luci-mod-admin-full/Makefile b/luci-mod-admin-full/Makefile index f36a13194..d47136753 100644 --- a/luci-mod-admin-full/Makefile +++ b/luci-mod-admin-full/Makefile @@ -11,6 +11,7 @@ LUCI_TITLE:=LuCI Administration - full-featured for full control LUCI_DEPENDS:=+luci-base +luci-app-firewall PKG_BUILD_DEPENDS:=iwinfo +PKG_LICENSE:=Apache-2.0 include ../luci/luci.mk diff --git a/luci-mod-admin-full/luasrc/model/cbi/admin_network/ifaces.lua b/luci-mod-admin-full/luasrc/model/cbi/admin_network/ifaces.lua index 153d4dac4..90647b7a3 100644 --- a/luci-mod-admin-full/luasrc/model/cbi/admin_network/ifaces.lua +++ b/luci-mod-admin-full/luasrc/model/cbi/admin_network/ifaces.lua @@ -381,7 +381,6 @@ if has_firewall then fwzone.template = "cbi/firewall_zonelist" fwzone.network = arg[1] - fwzone.rmempty = false function fwzone.cfgvalue(self, section) self.iface = section @@ -390,22 +389,16 @@ if has_firewall then end function fwzone.write(self, section, value) - local zone = fw:get_zone(value) - - if not zone and value == '-' then - value = m:formvalue(self:cbid(section) .. ".newzone") - if value and #value > 0 then - zone = fw:add_zone(value) - else - fw:del_network(section) - end - end - + local zone = fw:get_zone(value) or fw:add_zone(value) if zone then fw:del_network(section) zone:add_network(section) end end + + function fwzone.remove(self, section) + fw:del_network(section) + end end diff --git a/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi.lua b/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi.lua index cacaa2595..d51a72aba 100644 --- a/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi.lua +++ b/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi.lua @@ -390,22 +390,16 @@ network.novirtual = true function network.write(self, section, value) local i = nw:get_interface(section) if i then - if value == '-' then - value = m:formvalue(self:cbid(section) .. ".newnet") - if value and #value > 0 then - local n = nw:add_network(value, {proto="none"}) - if n then n:add_interface(i) end - else - local n = i:get_network() - if n then n:del_interface(i) end - end - else - local v - for _, v in ipairs(i:get_networks()) do - v:del_interface(i) - end - for v in ut.imatch(value) do - local n = nw:get_network(v) + local _, net, old, new = nil, nil, {}, {} + + for _, net in ipairs(i:get_networks()) do + old[net:name()] = true + end + + for net in ut.imatch(value) do + new[net] = true + if not old[net] then + local n = nw:get_network(net) or nw:add_network(net, { proto = "none" }) if n then if not n:is_empty() then n:set("type", "bridge") @@ -414,6 +408,15 @@ function network.write(self, section, value) end end end + + for net, _ in pairs(old) do + if not new[net] then + local n = nw:get_network(net) + if n then + n:del_interface(i) + end + end + end end end diff --git a/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi_add.lua b/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi_add.lua index 8277deb2f..e8a305882 100644 --- a/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi_add.lua +++ b/luci-mod-admin-full/luasrc/model/cbi/admin_network/wifi_add.lua @@ -94,14 +94,9 @@ function newnet.parse(self, section) local net, zone if has_firewall then - local zval = fwzone:formvalue(section) - zone = fw:get_zone(zval) - - if not zone and zval == '-' then - zval = m:formvalue(fwzone:cbid(section) .. ".newzone") - if zval and #zval > 0 then - zone = fw:add_zone(zval) - end + local value = fwzone:formvalue(section) + if value and #value > 0 then + zone = fw:get_zone(value) or fw:add_zone(value) end end diff --git a/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css b/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css index 5bf534098..5771a94aa 100644 --- a/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css +++ b/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css @@ -430,7 +430,6 @@ form .clearfix, form .cbi-value { margin-bottom: 18px; zoom: 1; - overflow: hidden; } form .clearfix:before, form .clearfix:after, @@ -477,6 +476,7 @@ input[type=checkbox], input[type=radio] { input, textarea, select, +.cbi-dropdown, .uneditable-input { display: inline-block; width: 210px; @@ -487,6 +487,13 @@ select, color: #808080; border: 1px solid #ccc; border-radius: 3px; + box-sizing: border-box; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; } select { @@ -1365,6 +1372,159 @@ footer { background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); } +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + .btn.active, .btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -1456,7 +1616,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { opacity: 0.4; } -.alert-message, .errorbox { +.alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; @@ -1679,7 +1839,6 @@ table table td, background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 2px; - margin-left: 2px; background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); border-radius: 4px; @@ -1745,7 +1904,7 @@ table table td, .zonebadge > em, .zonebadge > strong { - margin: 5px; + margin: 0 2px; display: inline-block; } @@ -1753,6 +1912,10 @@ table table td, width: 6em; } +.zonebadge > .ifacebadge { + margin-left: 2px; +} + .zonebadge-empty { border: 1px dashed #AAAAAA; color: #AAAAAA; diff --git a/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css.orig b/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css.orig new file mode 100644 index 000000000..4a40f6d68 --- /dev/null +++ b/luci-theme-openmptcprouter/htdocs/luci-static/openmptcprouter/cascade.css.orig @@ -0,0 +1,1970 @@ +/*! + * LuCI Bootstrap Theme + * Copyright 2012 Nut & Bolt + * By David Menting + * Based on Bootstrap v1.4.0 + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ +/* Reset.less + * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). + * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ +html { + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 5px; +} + +h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s, +small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, +form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, +.table, .tbody, .tfoot, .thead, .tr, .th, .td { + margin: 0; + padding: 0; + border: 0; + font-weight: normal; + font-style: normal; + font-size: 100%; + line-height: 1; + font-family: inherit; +} + +abbr[title], acronym[title] { + border-bottom: 1px dotted; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +ol, ul { + list-style: none; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a:focus { + outline: thin dotted; +} + +a:hover, a:active { + outline: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +button, +input, +select, +option, +textarea { + font-size: 100%; + margin: 0; + box-sizing: border-box; + vertical-align: baseline; + *vertical-align: middle; +} + +button, input { + line-height: normal; + *overflow: visible; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +button[disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled] { + opacity: 0.7; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +/* + * Scaffolding + * Basic and global styles for generating a grid system, structural layout, and page templates + * ------------------------------------------------------------------------------------------- */ +body { + background-color: #ffffff; + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 18px; + color: #404040; + padding-top: 58px; +} + +.container { + width: 100%; + max-width: 940px; + margin-left: auto; + margin-right: auto; + zoom: 1; +} + +.container:before, .container:after { + display: table; + content: ""; + zoom: 1; +} + +.container:after { + clear: both; +} + +a { + color: #0069d6; + text-decoration: none; + line-height: inherit; + font-weight: inherit; +} + +a:hover { + color: #00438a; + text-decoration: underline; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +/* Typography.less + * Headings, body text, lists, code, and more for a versatile and durable typography system + * ---------------------------------------------------------------------------------------- */ +p, +.cbi-map-descr, +.cbi-section-descr { + font-size: 13px; + font-weight: normal; + line-height: 18px; + margin-bottom: 9px; +} + +p small { + font-size: 11px; + color: #bfbfbf; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + color: #404040; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + color: #bfbfbf; +} + +h1 { + margin-bottom: 18px; + font-size: 30px; + line-height: 36px; +} + +h1 small { + font-size: 18px; +} + +h2 { + font-size: 24px; + line-height: 36px; +} + +h2 small { + font-size: 14px; +} + +h3, +h4, +h5, +h6 { + line-height: 36px; +} + +h3 { + font-size: 18px; +} + +h3 small { + font-size: 14px; +} + +h4 { + font-size: 16px; +} + +h4 small { + font-size: 12px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 13px; + color: #bfbfbf; + text-transform: uppercase; +} + +ul, ol { + margin: 0 0 18px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + line-height: 18px; + color: #808080; +} + +ul.unstyled { + list-style: none; + margin-left: 0; +} + +dl { + margin-bottom: 18px; +} + +dl dt, dl dd { + line-height: 18px; +} + +dl dt { + font-weight: bold; +} + +dl dd { + margin-left: 9px; +} + +hr { + margin: 20px 0 19px; + border: 0; + border-bottom: 1px solid #eee; +} + +strong { + font-style: inherit; + font-weight: bold; +} + +em { + font-style: italic; + font-weight: inherit; + line-height: inherit; +} + +small { font-size: 0.9em } + +address { + display: block; + line-height: 18px; + margin-bottom: 18px; +} + +code, pre { + padding: 0 3px 2px; + font-family: Monaco, Andale Mono, Courier New, monospace; + font-size: 12px; + border-radius: 3px; +} + +code { + background-color: #fee9cc; + color: rgba(0, 0, 0, 0.75); + padding: 1px 3px; +} + +pre { + background-color: #f5f5f5; + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 18px; + font-size: 12px; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 3px; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Forms.less + * Base styles for various input types, form layouts, and states + * ------------------------------------------------------------- */ +form { + margin-bottom: 18px; +} + +fieldset { + margin-bottom: 9px; + padding-top: 9px; +} + +fieldset legend { + display: block; + font-size: 19.5px; + line-height: 1; + color: #404040; + padding-top: 20px; + *padding: 0 0 5px 0px; + /* IE6-7 */ + + *line-height: 1.5; + /* IE6-7 */ + +} +form .cbi-tab-descr { + line-height: 18px; + margin-bottom: 18px; +} + +form .clearfix, +form .cbi-value { + margin-bottom: 18px; + zoom: 1; +} + +form .clearfix:before, form .clearfix:after, +form .cbi-value:before, form .cbi-value:after { + display: table; + content: ""; + zoom: 1; +} + +form .clearfix:after, +form .cbi-value:after { + clear: both; +} + +label, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: normal; +} + +form .input, +form .cbi-value-field { + margin-left: 200px; +} + +form .cbi-value label.cbi-value-title { + padding-top: 6px; + font-size: 13px; + line-height: 18px; + float: left; + width: 180px; + text-align: right; + color: #404040; +} + +input[type=checkbox], input[type=radio] { + cursor: pointer; +} + +input, +textarea, +select, +.cbi-dropdown, +.uneditable-input { + display: inline-block; + width: 210px; + height: 30px; + padding: 4px; + font-size: 13px; + line-height: 18px; + color: #808080; + border: 1px solid #ccc; + border-radius: 3px; + box-sizing: border-box; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; +} + +select { + padding: initial; + background: #fff; + box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); +} + +input[type=checkbox], input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + /* IE6-7 */ + + line-height: normal; + border: none; +} + +input[type=file] { + background-color: #ffffff; + padding: initial; + border: initial; + line-height: initial; + box-shadow: none; + width: auto !important; +} + +input[type=button], input[type=reset], input[type=submit] { + width: auto; + height: auto; +} + +select, input[type=file] { + *height: auto; + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ +} + +select[multiple] { + height: inherit; + background-color: #ffffff; +} + +textarea { + height: auto; +} + +.uneditable-input { + background-color: #ffffff; + display: block; + border-color: #eee; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + cursor: not-allowed; +} + +::-moz-placeholder { + color: #bfbfbf; +} + +::-webkit-input-placeholder { + color: #bfbfbf; +} + +input, textarea { + transition: border linear 0.2s, box-shadow linear 0.2s; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} + +input:focus, textarea:focus { + outline: 0; + border-color: rgba(82, 168, 236, 0.8); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type=file]:focus, input[type=checkbox]:focus, select:focus { + box-shadow: none; + outline: 1px dotted #666; +} + +form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { + color: #b94a48; +} + +form .clearfix.error input, form .clearfix.error textarea { + color: #b94a48; + border-color: #ee5f5b; +} + +form .clearfix.error input:focus, form .clearfix.error textarea:focus { + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { + color: #b94a48; + background-color: #fce6e6; + border-color: #b94a48; +} + +form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { + color: #c09853; +} + +form .clearfix.warning input, form .clearfix.warning textarea { + color: #c09853; + border-color: #ccae64; +} + +form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { + border-color: #be9a3f; + box-shadow: 0 0 6px #e5d6b1; +} + +form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { + color: #c09853; + background-color: #d2b877; + border-color: #c09853; +} + +form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { + color: #468847; +} + +form .clearfix.success input, form .clearfix.success textarea { + color: #468847; + border-color: #57a957; +} + +form .clearfix.success input:focus, form .clearfix.success textarea:focus { + border-color: #458845; + box-shadow: 0 0 6px #9acc9a; +} + +form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { + color: #468847; + background-color: #bcddbc; + border-color: #468847; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + background-color: #f5f5f5; + border-color: #ddd; +} + +.actions, +.cbi-page-actions { + background: #f5f5f5; + margin-bottom: 18px; + padding: 17px 20px 18px 17px; + border-top: 1px solid #ddd; + border-radius: 0 0 3px 3px; + text-align: right; +} + +.actions .secondary-action, +.cbi-page-actions .secondary-action{ + float: right; +} + +.actions .secondary-action a, +.cbi-page-actions .secondary-action a { + line-height: 30px; +} + +.actions .secondary-action a:hover, +.cbi-page-actions .secondary-action a:hover { + text-decoration: underline; +} + +.help-inline, .help-block { + font-size: 13px; + line-height: 18px; + color: #bfbfbf; +} + +.help-inline { + padding-left: 5px; + *position: relative; + /* IE6-7 */ + + *top: -5px; + /* IE6-7 */ + +} + +.help-block { + display: block; + max-width: 600px; +} + +/* + * Tables.less + * Tables for, you guessed it, tabular data + * ---------------------------------------- */ +.tr { display: table-row; } +.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } +.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + +.table { + display: table; + width: 100%; + margin-bottom: 18px; + padding: 0; + font-size: 13px; + border-collapse: collapse; +} + +.table .th, .table .td { + display: table-cell; + vertical-align: middle; /* Fixme */ + padding: 10px 10px 9px; + line-height: 18px; + text-align: left; +} + +.table .th { + padding-top: 9px; + font-weight: bold; + vertical-align: middle; +} + +.table .td { + vertical-align: top; + border-top: 1px solid #ddd; +} + +.table .tbody .th { + border-top: 1px solid #ddd; + vertical-align: top; +} + +/* Patterns.less + * Repeatable UI elements outside the base styles provided from the scaffolding + * ---------------------------------------------------------------------------- */ +header { + height: 40px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; + overflow: visible; + color: #BFBFBF; +} + +header a { + color: #bfbfbf; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +header h3 a:hover, header .brand:hover, header ul .active > a { + background-color: #333; + background-color: rgba(255, 255, 255, 0.05); + color: #ffffff; + text-decoration: none; +} + +header h3 { + position: relative; +} + +header h3 a, header .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -20px; + color: #ffffff; + font-size: 20px; + font-weight: 200; + line-height: 1; +} + +header p { + margin: 0; + line-height: 40px; +} + +header .fill { + background-color: #222; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #333333, #222222); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + padding: 0 5px; +} + +header div > ul, .nav { + display: block; + float: left; + margin: 0 10px 0 0; + position: relative; + left: 0; +} + +header div > ul > li, .nav > li { + display: block; + float: left; +} + +header div > ul a, .nav a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + text-decoration: none; +} + +header div > ul a:hover, .nav a:hover { + color: #ffffff; + text-decoration: none; +} + +header div > ul .active > a, .nav .active > a { + background-color: #222; + background-color: rgba(0, 0, 0, 0.5); +} + +header div > ul.secondary-nav, .nav.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; +} + +header div > ul.secondary-nav .menu-dropdown, +.nav.secondary-nav .menu-dropdown, +header div > ul.secondary-nav .dropdown-menu, +.nav.secondary-nav .dropdown-menu { + right: 0; + border: 0; +} + +header div > ul a.menu:hover, +.nav a.menu:hover, +header div > ul li.open .menu, +.nav li.open .menu, +header div > ul .dropdown-toggle:hover, +.nav .dropdown-toggle:hover, +header div > ul .dropdown.open .dropdown-toggle, +.nav .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255, 255, 255, 0.05); +} + +header div > ul .menu-dropdown, +.nav .menu-dropdown, +header div > ul .dropdown-menu, +.nav .dropdown-menu { + background-color: #333; +} + +header div > ul .menu-dropdown a.menu, +.nav .menu-dropdown a.menu, +header div > ul .dropdown-menu a.menu, +.nav .dropdown-menu a.menu, +header div > ul .menu-dropdown .dropdown-toggle, +.nav .menu-dropdown .dropdown-toggle, +header div > ul .dropdown-menu .dropdown-toggle, +.nav .dropdown-menu .dropdown-toggle { + color: #ffffff; +} + +header div > ul .menu-dropdown a.menu.open, +.nav .menu-dropdown a.menu.open, +header div > ul .dropdown-menu a.menu.open, +.nav .dropdown-menu a.menu.open, +header div > ul .menu-dropdown .dropdown-toggle.open, +.nav .menu-dropdown .dropdown-toggle.open, +header div > ul .dropdown-menu .dropdown-toggle.open, +.nav .dropdown-menu .dropdown-toggle.open { + background: #444; + background: rgba(255, 255, 255, 0.05); +} + +header div > ul .menu-dropdown li a, +.nav .menu-dropdown li a, +header div > ul .dropdown-menu li a, +.nav .dropdown-menu li a { + color: #999; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); +} + +header div > ul .menu-dropdown li a:hover, +.nav .menu-dropdown li a:hover, +header div > ul .dropdown-menu li a:hover, +.nav .dropdown-menu li a:hover { + background-color: #191919; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #292929, #191919); + color: #ffffff; +} + +header div > ul .menu-dropdown .active a, +.nav .menu-dropdown .active a, +header div > ul .dropdown-menu .active a, +.nav .dropdown-menu .active a { + color: #ffffff; +} + +header div > ul .menu-dropdown .divider, +.nav .menu-dropdown .divider, +header div > ul .dropdown-menu .divider, +.nav .dropdown-menu .divider { + background-color: #222; + border-color: #444; +} + +header ul .menu-dropdown li a, header ul .dropdown-menu li a { + padding: 4px 15px; +} + +li.menu, .dropdown { + position: relative; +} + +a.menu:after, .dropdown-toggle:after { + width: 0; + height: 0; + display: inline-block; + content: "↓"; + text-indent: -99999px; + vertical-align: top; + margin-top: 8px; + margin-left: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + opacity: 0.5; +} + +.menu-dropdown, .dropdown-menu { + background-color: #ffffff; + float: left; + position: absolute; + top: 40px; + left: -9999px; + z-index: 900; + min-width: 160px; + max-width: 220px; + _width: 160px; + margin-left: 0; + margin-right: 0; + padding: 6px 0; + zoom: 1; + border-color: #999; + border-color: rgba(0, 0, 0, 0.2); + border-style: solid; + border-width: 0 1px 1px; + border-radius: 0 0 6px 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-clip: padding-box; +} + +.menu-dropdown li, .dropdown-menu li { + float: none; + display: block; + background-color: transparent; +} + +.menu-dropdown .divider, .dropdown-menu .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid #ffffff; +} + +header .dropdown-menu a, .dropdown-menu a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #808080; + text-shadow: 0 1px 0 #ffffff; +} + +header .dropdown-menu a:hover, +.dropdown-menu a:hover, +header .dropdown-menu a.hover, +.dropdown-menu a.hover { + background-color: #dddddd; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #eeeeee, #dddddd); + color: #404040; + text-decoration: none; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); +} + +.open .menu, +.dropdown.open .menu, +.open .dropdown-toggle, +.dropdown.open .dropdown-toggle { + color: #ffffff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} + +.open .menu-dropdown, +.dropdown.open .menu-dropdown, +.open .dropdown-menu, +.dropdown.open .dropdown-menu { + left: 0; +} + +.dropdown:hover ul.dropdown-menu { + left: 0; +} + +.dropdown-menu .dropdown-menu { + position: absolute; + left: 159px; +} + +.dropdown-menu li { + position: relative; +} + +.tabs, .cbi-tabmenu { + margin: 0 0 18px; + padding: 0; + list-style: none; + zoom: 1; +} + +.tabs:before, +.cbi-tabmenu:before, +.tabs:after, +.cbi-tabmenu:after { + display: table; + content: ""; + zoom: 1; +} + +.tabs:after, .cbi-tabmenu:after { + clear: both; +} + +.tabs > li, .cbi-tabmenu > li { + float: left; +} + +.tabs > li > a, .cbi-tabmenu > li > a { + display: block; +} + +.tabs, +.cbi-tabmenu { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; +} + +.tabs > li, +.cbi-tabmenu > li { + position: relative; + margin-bottom: -1px; +} + +.cbi-tabmenu.map { + margin: 0; +} + +.cbi-tabmenu.map > li { + font-size: 16.5px; + font-weight: bold; +} + +.cbi-tabcontainer > fieldset.cbi-section[id] > legend { + display: none; +} + +.tabs > li > a, +.cbi-tabmenu > li > a { + padding: 0 15px; + margin-right: 2px; + line-height: 34px; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} + +.tabs > li > a:hover, +.cbi-tabmenu > li > a:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; +} + +.tabs .active > a, .tabs .active > a:hover, +.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, +.cbi-tab > a:link, .cbi-tab > a:hover { + color: #808080; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + +.tabs .menu-dropdown, .tabs .dropdown-menu, +.cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { + top: 35px; + border-width: 1px; + border-radius: 0 6px 6px 6px; +} + +.tabs a.menu:after, .tabs .dropdown-toggle:after, +.cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; +} + +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle, +.cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle { + border-color: #999; +} + +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after, +.cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after { + border-top-color: #555; +} + +.tab-content > .tab-pane, +.tab-content > div { + display: none; +} + +.tab-content > .active { + display: block; +} + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + background-color: #f5f5f5; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); + border: 1px solid #ddd; + border-radius: 3px; + box-shadow: inset 0 1px 0 #ffffff; +} + +.breadcrumb li { + display: inline; + text-shadow: 0 1px 0 #ffffff; +} + +.breadcrumb .divider { + padding: 0 5px; + color: #bfbfbf; +} + +.breadcrumb .active a { + color: #404040; +} + +footer { + margin-top: 17px; + padding-top: 17px; + border-top: 1px solid #eee; +} + +.btn.danger, +.alert-message.danger, +.btn.danger:hover, +.alert-message.danger:hover, +.btn.error, +.alert-message.error, +.btn.error:hover, +.alert-message.error:hover, +.btn.success, +.alert-message.success, +.btn.success:hover, +.alert-message.success:hover, +.btn.info, +.alert-message.info, +.btn.info:hover, +.alert-message.info:hover { + color: #ffffff; +} + +.btn .close, .alert-message .close { + font-family: Arial, sans-serif; + line-height: 18px; +} + +.btn.danger, +.alert-message.danger, +.btn.error, +.alert-message.error { + background-color: #c43c35; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #c43c35 #c43c35 #882a25; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.success, .alert-message.success { + background-color: #57a957; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #62c462, #57a957); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #57a957 #57a957 #3d773d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn.info, .alert-message.info { + background-color: #339bb9; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #5bc0de, #339bb9); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #339bb9 #339bb9 #22697d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn, +.cbi-button { + cursor: pointer; + display: inline-block; + background-color: #e6e6e6; + background-repeat: no-repeat; + background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + color: #333; + font-size: 13px; + line-height: normal; + border: 1px solid #ccc; + border-bottom-color: #bbb; + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn:hover, +.cbi-button:hover { + color: #333; + text-decoration: none; +} + +.btn:focus, +.cbi-button:focus { + outline: 1px dotted #666; +} + +.btn.primary, +.cbi-page-actions .cbi-button-apply, +.cbi-page-actions .cbi-button-save, +.cbi-page-actions .cbi-button-reset { + color: #ffffff; + padding: 5px 14px 6px; + background-color: #0064cd; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #049cdb, #0064cd); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.cbi-input-invalid, +.cbi-value-error input { + color: #FF0000; + border-color: #FF0000; +} + +.cbi-button-up, +.cbi-input-up { + background-position: center center; + background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-down, +.cbi-input-down { + background-position: center center; + background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-find, +.cbi-input-find { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-add, +.cbi-input-add { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-apply, +.cbi-input-apply { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-reset, +.cbi-input-reset { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-edit, +.cbi-input-edit { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-remove, +.cbi-input-remove { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-reload, +.cbi-input-reload { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-link, +.cbi-input-link { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-button-download, +.cbi-input-download { + background-position: 6px center, left top; + padding-left: 28px; + background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +} + +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; +} + +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1000; + max-width: none; + min-width: 100%; + width: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +.btn.active, .btn:active { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn.disabled { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn[disabled] { + cursor: default; + background-image: none; + opacity: 0.65; + box-shadow: none; +} + +.btn.large { + font-size: 15px; + line-height: normal; + padding: 9px 14px 9px; + border-radius: 6px; +} + +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; +} + +/* Button icons for specific pages */ +.Startup .cbi-section-table input.cbi-input-apply, +.Startup .cbi-section-table input.cbi-button-apply { + background-image: url("../resources/cbi/apply.gif"); + background-position: 7px 4px; + padding: 3px 9px 3px 27px; +} + +.Processes .cbi-section-table input.cbi-input-reload, +.Startup .cbi-section-table input.cbi-input-reload { + background-image: url("../resources/cbi/reload.gif"); + background-position: 7px 4px; + padding: 3px 9px 3px 27px; +} + +.Processes .cbi-section-table input.cbi-input-remove, +.Processes .cbi-section-table div.cbi-section-remove input, +.Startup .cbi-section-table input.cbi-input-remove, +.Startup .cbi-section-table div.cbi-section-remove input { + background-image: url("../resources/cbi/remove.gif"); + background-position: 7px 4px; + padding: 3px 9px 3px 27px; +} + +.Processes .cbi-section-table input.cbi-input-reset, +.Processes .cbi-section-table input.cbi-button-reset, +.Startup .cbi-section-table input.cbi-input-reset, +.Startup .cbi-section-table input.cbi-button-reset { + background-image: url("../resources/cbi/reset.gif"); + background-position: 7px 4px; + padding: 3px 9px 3px 27px; +} + +.Startup .cbi-section-table input.cbi-input-save, +.Startup .cbi-section-table input.cbi-button-save { + background-image: url("../resources/cbi/save.gif"); + background-position: 7px 4px; + padding: 3px 9px 3px 27px; +} + +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +.close { + float: right; + color: #000000; + font-size: 20px; + font-weight: bold; + line-height: 13.5px; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.25; +} + +.close:hover { + color: #000000; + text-decoration: none; + opacity: 0.4; +} + +.alert-message { + position: relative; + padding: 7px 15px; + margin-bottom: 18px; + color: #404040; + background-color: #eedc94; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #fceec1, #eedc94); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #eedc94 #eedc94 #e4c652; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + border-width: 1px; + border-style: solid; + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.alert-message .close { + margin-top: 1px; + *margin-top: 0; +} + +.alert-message a { + font-weight: bold; + color: #404040; +} + +.alert-message.danger p a, +.alert-message.error p a, +.alert-message.success p a, +.alert-message.info p a { + color: #ffffff; +} + +.alert-message h5 { + line-height: 18px; +} + +.alert-message p { + margin-bottom: 0; +} + +.alert-message div { + margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; +} + +.alert-message .btn { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.label { + padding: 1px 3px 2px; + font-size: 9.75px; + font-weight: bold; + color: #ffffff !important; + text-transform: uppercase; + white-space: nowrap; + background-color: #bfbfbf; + border-radius: 3px; + text-shadow: none; +} + +a.label:link, +a.label:visited { + color: #ffffff; +} + +a.label:hover { + text-decoration: none; +} + +.label.important { + background-color: #c43c35; +} + +.label.warning { + background-color: #f89406; +} + +.label.success { + background-color: #46a546; +} + +.label.notice { + background-color: #62cffc; +} + +/* LuCI specific items */ +.hidden { display: none } + +#memtotal > div, +#memfree > div, +#memcache > div, +#membuff > div, +#conns > div { + border: 1px solid #CCCCCC; + border-radius: 3px 3px 3px 3px; + color: #808080; + display: inline-block; + font-size: 13px; + line-height: 18px; +} + +#xhr_poll_status { + cursor: pointer; +} + +form.inline { display: inline } + +header .pull-right { padding-top: 8px; } + +#modemenu li:last-child span.divider { display: none } + +#syslog { width: 100%; } + +.cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + +.cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th { + background-color: #f5f5f5; +} + +.cbi-section-table tr.cbi-section-table-descr th { + font-weight: normal; +} + +.left { text-align: left !important; } + +.right { text-align: right !important; } + +.center { text-align: center !important; } + +.cbi-value-field { line-height: 1.5em; } + +.cbi-value-field input[type=checkbox], +.cbi-value-field input[type=radio] { + margin-top: 8px; + margin-right: 6px; +} + +table table td, +.cbi-value-field table td { + border: none; +} + +.table.cbi-section-table input, +.table.cbi-section-table textarea, +.table.cbi-section-table select { + width: auto; +} + +.table.cbi-section-table .td.cbi-section-table-cell { + white-space: nowrap; + text-align: right; +} + +.table.cbi-section-table .td.cbi-section-table-cell select { + width: inherit; +} + +.table.valign-middle .td { + vertical-align: middle; +} + +.cbi-value-description { display: inline; } + +.cbi-value-description img { vertical-align: middle; } + +.cbi-section-error { + border: 1px solid #FF0000; + border-radius: 3px; + background-color: #FCE6E6; + padding: 5px; +} + +.cbi-section-error ul { margin: 0 0 0 20px; } + +.cbi-section-error ul li { + color: #FF0000; + font-weight: bold; +} + +.ifacebox { + background-color: #FFFFFF; + border: 1px solid #CCCCCC; + margin: 0 10px; + text-align: center; + white-space: nowrap; + background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid #CCCCCC; + padding: 2px; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: #90c0e0; +} + +.ifacebox .ifacebox-body { + padding: 6px; +} + +.ifacebadge { + display: inline-flex; + flex-direction: row; + white-space: nowrap; + background-color: #FFFFFF; + border: 1px solid #CCCCCC; + padding: 2px; + background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; + margin-right: .25em; +} + +.ifacebadge-active { + border-color: #000000; + font-weight: bold; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.network-status-table .ifacebox { + margin: .5em; + flex-grow: 1; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; +} + +.network-status-table .ifacebox-body > span { + flex: 10; +} + +.network-status-table .ifacebox-body > div { + display: flex; + flex-wrap: wrap; +} + +.network-status-table .ifacebox-body .ifacebadge { + flex: 1; + margin: .5em .25em 0 .25em; + padding: .5em; + min-width: 220px; +} + +.zonebadge { + padding: 2px; + border-radius: 4px; + display: inline-block; + white-space: nowrap; + color: #666666; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + cursor: pointer; +} + +.zonebadge > em, +.zonebadge > strong { + margin: 0 2px; + display: inline-block; +} + +.zonebadge input { + width: 6em; +} + +.zonebadge > .ifacebadge { + margin-left: 2px; +} + +.zonebadge-empty { + border: 1px dashed #AAAAAA; + color: #AAAAAA; + font-style: italic; + font-size: smaller; +} + +div.cbi-value var, +.td.cbi-value-field var { + font-style: italic; + color: #0069D6; +} + +.uci-change-list { + font-family: monospace; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + text-decoration: none; + border: 1px solid #00FF00; + background-color: #CCFFCC; + display: block; + padding: 2px; +} + +.uci-change-list del, +.uci-change-legend-label del { + text-decoration: none; + border: 1px solid #FF0000; + background-color: #FFCCCC; + display: block; + font-style: normal; + padding: 2px; +} + +.uci-change-list var, +.uci-change-legend-label var { + text-decoration: none; + border: 1px solid #CCCCCC; + background-color: #EEEEEE; + display: block; + font-style: normal; + padding: 2px; + line-height: 19px; + white-space: pre; +} + +.uci-change-list var ins, +.uci-change-list var del { + display: inline; + /*border: none;*/ + white-space: pre; + font-style: normal; + padding: 0px; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; +} + +.uci-change-legend-label > ins, +.uci-change-legend-label > del, +.uci-change-legend-label > var { + float: left; + margin-right: 4px; + width: 10px; + height: 10px; + display: block; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + line-height: 6px; + border: none; +} + +html body.apply-overlay-active { + height: calc(100vh - 63px); +} diff --git a/luci-theme-openmptcprouter/luasrc/view/themes/openmptcprouter/header.htm b/luci-theme-openmptcprouter/luasrc/view/themes/openmptcprouter/header.htm index b796c6587..4933a2c2c 100644 --- a/luci-theme-openmptcprouter/luasrc/view/themes/openmptcprouter/header.htm +++ b/luci-theme-openmptcprouter/luasrc/view/themes/openmptcprouter/header.htm @@ -190,22 +190,20 @@ - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> -
    +
    + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>

    <%:No password set!%>

    - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
    - "><%:Go to password configuration...%> +

    <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>

    +
    "><%:Go to password configuration...%>
    -
    - <%- end -%> + <%- end -%> - + -
    <% if category then render_tabmenu(category, cattree) end %>