diff options
Diffstat (limited to 'themes')
3 files changed, 194 insertions, 14 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 67e19e7d0..73e6c3bed 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -492,12 +492,47 @@ select, box-sizing: border-box; } -.cbi-dropdown { +.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; +} + select { padding: initial; background: #fff; @@ -548,7 +583,8 @@ textarea { .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 +604,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; @@ -1206,6 +1243,7 @@ footer { 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; @@ -1318,6 +1356,7 @@ footer { color: #404040; } +.cbi-dynlist > .item:focus, .cbi-dropdown:focus { outline: 2px solid #4b6e9b; } @@ -1354,6 +1393,7 @@ footer { font-weight: bold; text-shadow: 1px 1px 0px #fff; display: none; + justify-content: center; } .cbi-dropdown > ul > li { @@ -1454,6 +1494,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; diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index a4d71eeb6..e62c9be21 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -153,7 +153,9 @@ input, } select:not([multiple="multiple"]):focus, -input:focus { +input:focus, +.cbi-dropdown:focus, +.cbi-dynlist > .item:focus { border-color: var(--main-color, #0099CC); } @@ -642,7 +644,7 @@ td > table > tbody > tr > td, /* button style */ -.btn, .cbi-button { +.btn, .cbi-button, .item::after { -webkit-appearance: none; text-transform: uppercase; color: rgba(0, 0, 0, 0.87); @@ -675,6 +677,7 @@ td > table > tbody > tr > td, .cbi-button:hover, .cbi-button:focus, .cbi-button:active, +.item:hover::after, .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover, .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus, .cbi-page-actions .cbi-button-apply + .cbi-button-save:active { @@ -958,6 +961,7 @@ td > table > tbody > tr > td, } +.cbi-dynlist, .cbi-dropdown { display: inline-flex; cursor: pointer; @@ -966,10 +970,6 @@ td > table > tbody > tr > td, height: auto; } -.cbi-dropdown:focus { - outline: 2px solid #4b6e9b; -} - .cbi-dropdown > ul { margin: 0 !important; padding: 0; @@ -1109,6 +1109,22 @@ td > table > tbody > tr > td, 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[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; @@ -1122,6 +1138,68 @@ td > table > tbody > tr > td, width: auto; } +.cbi-dynlist { + height: auto; + min-height: 30px; + display: inline-flex; + flex-direction: column; +} + +.cbi-dynlist > .item { + margin: 0 2em 4px 0; + padding: 2px 4px; + border-bottom: 2px solid rgba(0, 0, 0, .26); + position: relative; + pointer-events: none; + cursor: default; +} + +.cbi-dynlist > .item::after { + content: "×"; + position: absolute; + display: inline-flex; + align-items: center; + top: 0; + right: -2em; + bottom: 0; + padding: 0 6px; + border: 1px solid #c44; + font-weight: bold; + color: #c44; + pointer-events: auto; +} + +.cbi-dynlist { + height: auto; + min-height: 30px; + display: inline-flex; + flex-direction: column; +} + +.cbi-dynlist > .item { + margin: 0 2em 4px 0; + padding: 2px 4px; + border-bottom: 2px solid rgba(0, 0, 0, .26); + position: relative; + pointer-events: none; + cursor: default; +} + +.cbi-dynlist > .item::after { + content: "×"; + position: absolute; + display: inline-flex; + align-items: center; + top: 0; + right: -2em; + bottom: 0; + padding: 0 6px; + border: 1px solid #c44; + font-weight: bold; + color: #c44; + pointer-events: auto; +} + /* luci */ diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 94d6b5729..e650aa55a 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -516,7 +516,8 @@ input.cbi-input-password + img { .td select, .td .cbi-dropdown, -.td input[type=text] { +.td input[type=text], +.cbi-dynlist > .add-item > .cbi-dropdown { width: 100%; } @@ -531,7 +532,7 @@ img.cbi-image-button { vertical-align: middle; } -.btn, .cbi-button { +.btn, .cbi-button, .item::after { padding: 0 .5em; border-radius: 3px; border: 1px solid #aaa; @@ -545,9 +546,11 @@ img.cbi-image-button { font-weight: bold; line-height: 13pt; height: 16pt; + box-sizing: border-box; + cursor: pointer; } -.btn:hover, .cbi-button:hover { +.btn:hover, .cbi-button:hover, .item:hover::after { box-shadow: 0 0 3px #37c; } @@ -1009,7 +1012,8 @@ ul.cbi-tabmenu li.cbi-tab { background: #fff; } -.cbi-dropdown:focus { +.cbi-dropdown:focus, +.cbi-dynlist > .item:focus { outline: 2px solid #4b6e9b; } @@ -1150,11 +1154,60 @@ ul.cbi-tabmenu li.cbi-tab { 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; } +.cbi-dynlist { + height: auto; + min-height: 30px; + min-width: 210px; + max-width: 100%; + width: auto; + display: inline-flex; + flex-direction: column; +} + +.cbi-dynlist > .item { + margin-bottom: 4px; + background: #eee; + padding: 2px 2em 2px 4px; + border: 1px outset #000; + border-radius: 3px; + position: relative; + pointer-events: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cbi-dynlist > .item::after { + content: "×"; + position: absolute; + display: inline-flex; + align-items: center; + top: -1px; + right: -1px; + bottom: -1px; + padding: 0 6px; + border: 1px outset #000; + background: #fff; + border-radius: 0 3px 3px 0; + font-weight: bold; + color: #c44; + pointer-events: auto; + height: auto; +} + input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button { @@ -1695,13 +1748,14 @@ select + .cbi-button { height: 1.4em; } - [data-dynlist] > input, input.cbi-input-password { width: calc(100% - 20px); } + .cbi-dynlist, .cbi-dropdown { min-width: 100%; + display: flex; } .btn, .cbi-button { |