diff options
| author | Devaev Maxim <[email protected]> | 2018-07-28 14:32:03 +0300 |
|---|---|---|
| committer | Devaev Maxim <[email protected]> | 2018-07-28 14:32:03 +0300 |
| commit | 8bac7382bb16981c615c6af79dc00febd16949b4 (patch) | |
| tree | 1c489d81ffa36fb14e13da75fcfbfc4f39f8dd14 /kvmd/web | |
| parent | 55da818b8e8320e52fb02c9992e2649e280b7619 (diff) | |
pretty menu selecting
Diffstat (limited to 'kvmd/web')
| -rw-r--r-- | kvmd/web/css/main.css | 7 | ||||
| -rw-r--r-- | kvmd/web/css/vars.css | 2 | ||||
| -rw-r--r-- | kvmd/web/js/ui.js | 4 |
3 files changed, 10 insertions, 3 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index 7106dd50..f20fb6e4 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -51,10 +51,15 @@ ul#ctl li a.ctl-item { ul#ctl li a.ctl-item:hover:not(.active) { background-color: var(--bg-color-hovered); } +ul#ctl li a.ctl-item-selected { + box-shadow: 0 5px 0 var(--border-color-intensive) inset; + background-color: var(--bg-color-selected) !important; +} div.ctl-dropdown-content { overflow: hidden; white-space: nowrap; - border: var(--dark-border); + border: var(--intensive-border); + border-top: none; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; diff --git a/kvmd/web/css/vars.css b/kvmd/web/css/vars.css index 3bf15d76..3c25cec0 100644 --- a/kvmd/web/css/vars.css +++ b/kvmd/web/css/vars.css @@ -9,6 +9,8 @@ --small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); --big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4); + --border-color-intensive: #5b90bb; + --bg-color-normal: #36393f; --bg-color-light: #484b51; --bg-color-gray: #3b3e43; diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js index 3d16ec29..95b61a8d 100644 --- a/kvmd/web/js/ui.js +++ b/kvmd/web/js/ui.js @@ -92,12 +92,12 @@ var ui = new function() { __ctl_items.forEach(function(el_item) { var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content"); if (el_item === el_a && el_menu.style.display === "none") { + el_item.classList.add("ctl-item-selected"); el_menu.style.display = "block"; - el_item.setAttribute("style", "background-color: var(--bg-color-selected)"); all_hidden &= false; } else { + el_item.classList.remove("ctl-item-selected"); el_menu.style.display = "none"; - el_item.setAttribute("style", "background-color: default"); } }); if (all_hidden) { |