diff options
Diffstat (limited to 'themes')
4 files changed, 108 insertions, 4 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 48ec658e92..6a4e862f5c 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -624,9 +624,11 @@ select, border-radius: 3px; color: var(--text-color-high); position: relative; - pointer-events: none; + pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */ overflow: hidden; word-break: break-all; + cursor: move; /* drag-and-drop */ + user-select: text; /* text selection in drag-and-drop */ } .cbi-dynlist > .item::after { @@ -645,10 +647,35 @@ select, pointer-events: auto; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .item.drag-over { + border-top: 1px solid var(--text-color-highest); +} + +/* Make item being dragged in UIDynamicList partially transparent*/ +.cbi-dynlist > .item.dragging { + opacity: 0.5; +} + +/* prevent pointer changing when over the span element in UIDynamicList */ +.cbi-dynlist > .item > span { + pointer-events: none; +} + .cbi-dynlist > .add-item { display: flex; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-input-text.drag-over { + border-top: 1px solid var(--text-color-highest); +} + +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-button-add.drag-over { + border-top: 1px solid var(--text-color-highest); +} + .cbi-dynlist > .add-item > input, .cbi-dynlist > .add-item > button { flex: 1 1 auto; 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 fdcb98eb5b..29d83bd42e 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -1378,10 +1378,12 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { max-width: 25rem; margin-right: 2em; padding: .5em .25em .25em 0; - pointer-events: none; + pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */ color: #666; border-bottom: 2px solid rgba(0, 0, 0, .26); outline: 0; + cursor: move; /* drag-and-drop */ + user-select: text; /* text selection in drag-and-drop */ } .cbi-dynlist[name="sshkeys"] > .item { @@ -1403,9 +1405,21 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { background-color: var(--red-color-high); } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .item.drag-over { + border-top: 1px solid black; +} + +/* Make item being dragged in UIDynamicList partially transparent*/ +.cbi-dynlist > .item.dragging { + opacity: 0.5; +} + +/* prevent pointer changing when over the span element in UIDynamicList */ .cbi-dynlist > .item > span { white-space: normal; word-break: break-word; + pointer-events: none; } .cbi-dynlist > .add-item { @@ -1415,6 +1429,16 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { min-width: 16rem; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-input-text.drag-over { + border-top: 1px solid black; +} + +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-button-add.drag-over { + border-top: 1px solid black; +} + .cbi-dynlist > .add-item:not([ondrop]) > input { overflow: hidden; width: 100%; diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index 46120e8131..3297b08681 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -1173,9 +1173,11 @@ textarea { position: relative; overflow: hidden; transition: box-shadow .25s ease-in-out; - pointer-events: none; + pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */ flex: 1 1 100%; word-break: break-all; + cursor: move; /* drag-and-drop */ + user-select: text; /* text selection in drag-and-drop */ } .cbi-dynlist > .item::after { @@ -1196,6 +1198,20 @@ textarea { pointer-events: all; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .item.drag-over { + border-top: 1px solid black; +} + +/* Make item being dragged in UIDynamicList partially transparent*/ +.cbi-dynlist > .item.dragging { + opacity: 0.5; +} +/* prevent pointer changing when over the span element in UIDynamicList */ +.cbi-dynlist > .item > span { + pointer-events: none; +} + .cbi-dynlist[disabled] > .item::after { pointer-events: none; } @@ -1209,6 +1225,16 @@ textarea { display: flex; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-input-text.drag-over { + border-top: 1px solid black; +} + +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-button-add.drag-over { + border-top: 1px solid black; +} + .cbi-dynlist > .add-item > input { flex: 1; min-width: 18.5rem; 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 6ef9d63e72..2e7ba94aef 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 @@ -1340,10 +1340,12 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after { border: 1px outset #000; border-radius: 3px; position: relative; - pointer-events: none; + pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + cursor: move; /* drag-and-drop */ + user-select: text; /* text selection in drag-and-drop */ } .cbi-dynlist > .item::after { @@ -1364,10 +1366,35 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after { height: auto; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .item.drag-over { + border-top: 1px solid red; +} + +/* Make item being dragged in UIDynamicList partially transparent*/ +.cbi-dynlist > .item.dragging { + opacity: 0.5; +} + +/* prevent pointer changing when over the span element in UIDynamicList */ +.cbi-dynlist > .item > span { + pointer-events: none; +} + .cbi-dynlist > .add-item { display: flex; } +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-input-text.drag-over { + border-top: 1px solid re; +} + +/* indication line for drag-and-drop in UIDynamicList*/ +.cbi-dynlist > .add-item > .cbi-button-add.drag-over { + border-top: 1px solid red; +} + .cbi-dynlist > .add-item > input { flex: 1 1 auto; } |