diff options
author | Devaev Maxim <[email protected]> | 2020-07-15 10:34:49 +0300 |
---|---|---|
committer | Devaev Maxim <[email protected]> | 2020-07-15 10:34:49 +0300 |
commit | 6fa59bd7a136bdda7640abb1748910aa52031a02 (patch) | |
tree | 80dacd72bd058f492bbb1a31d9e639c5b7d70621 /web/share/css | |
parent | 3e7315c44872995108b5512c3a9b11d48dbc0f33 (diff) |
kvm pug
Diffstat (limited to 'web/share/css')
-rw-r--r-- | web/share/css/navbar.css (renamed from web/share/css/menu.css) | 94 | ||||
-rw-r--r-- | web/share/css/vars.css | 16 |
2 files changed, 55 insertions, 55 deletions
diff --git a/web/share/css/menu.css b/web/share/css/navbar.css index 0a84b303..c52a6050 100644 --- a/web/share/css/menu.css +++ b/web/share/css/navbar.css @@ -20,12 +20,12 @@ *****************************************************************************/ -ul#menu { +ul#navbar { box-shadow: var(--shadow-small); list-style-type: none; margin: 0; padding: 0; - background-color: var(--cs-menu-default-bg); + background-color: var(--cs-navbar-default-bg); position: fixed; top: 0; width: 100%; @@ -33,107 +33,107 @@ ul#menu { z-index: 2147483646; } -ul#menu li.menu-right-items { - border-left: var(--border-menu-thin); +ul#navbar li.right { + border-left: var(--border-navbar-item-thin); float: right; } -ul#menu li.menu-left-items { - border-right: var(--border-menu-thin); +ul#navbar li.left { + border-right: var(--border-navbar-item-thin); float: left; } -ul#menu li a#menu-logo { +ul#navbar li a#logo { line-height: 50px; outline: none; cursor: pointer; display: inline-block; - color: var(--cs-menu-default-fg); + color: var(--cs-navbar-default-fg); padding-left: 16px; padding-right: 16px; text-decoration: none; } -ul#menu li a.menu-item img { - vertical-align: middle; - margin-right: 10px; - height: 20px; -} - -ul#menu li a#menu-logo img { - margin-top: -2px; - height: 24px; -} - -ul#menu li a.menu-item { +ul#navbar li a.menu-button { line-height: 50px; outline: none; cursor: pointer; display: inline-block; - color: var(--cs-menu-default-fg); + color: var(--cs-navbar-default-fg); padding-left: 16px; padding-right: 16px; text-decoration: none; } -ul#menu li a#menu-logo:hover:not(.active), -ul#menu li a.menu-item:hover:not(.active) { - background-color: var(--cs-menu-hovered-bg); +ul#navbar li a#logo:hover:not(.active), +ul#navbar li a.menu-button:hover:not(.active) { + background-color: var(--cs-navbar-item-hovered-bg); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* iPad 8 */ - ul#menu li a#menu-item:hover:not(.active), - ul#menu li a.menu-item:hover:not(.active) { - background-color: var(--cs-menu-default-bg) !important; + ul#navbar li a#menu-button:hover:not(.active), + ul#navbar li a.menu-button:hover:not(.active) { + background-color: var(--cs-navbar-default-bg) !important; } } -ul#menu li a.menu-item-selected { - box-shadow: var(--shadow-menu-pressed); - background-color: var(--cs-menu-pressed-bg) !important; +ul#navbar li a#logo img { + margin-top: -2px; + height: 24px; +} + +ul#navbar li a.menu-button img { + vertical-align: middle; + margin-right: 10px; + height: 20px; +} + +ul#navbar li a.menu-button-pressed { + box-shadow: var(--shadow-navbar-item-pressed); + background-color: var(--cs-navbar-item-pressed-bg) !important; } -ul#menu li div.menu-item-content { +ul#navbar li div.menu { visibility: hidden; outline: none; overflow: hidden; white-space: nowrap; - border: var(--border-menu-item-content-default-2px); - border-top: var(--border-menu-item-content-top-thin); + border: var(--border-navbar-menu-default-2px); + border-top: var(--border-navbar-menu-top-thin); border-radius: 0 0 8px 8px; position: absolute; - background-color: var(--cs-menu-default-bg); + background-color: var(--cs-navbar-default-bg); min-width: 180px; box-shadow: var(--shadow-big); z-index: 2147483645; } -ul#menu li div.menu-item-content-active { - border: var(--border-menu-item-content-active-2px) !important; - border-top: var(--border-menu-item-content-top-thin) !important; +ul#navbar li div.menu-active { + border: var(--border-navbar-menu-active-2px) !important; + border-top: var(--border-navbar-menu-top-thin) !important; } -ul#menu li div.menu-item-content-buttons { +ul#navbar li div.menu div.buttons { background-color: var(--cs-control-default-bg); } -ul#menu li div.menu-item-content-text { +ul#navbar li div.menu div.text { margin: 10px 15px 10px 15px; font-size: 14px; } -ul#menu li div.menu-item-content-text table.one-line-switch { +ul#navbar li div.menu div.text table.one-line-switch { width: 100%; border-collapse: collapse; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { @supports (-webkit-appearance: none) { - ul#menu li div.menu-item-content-text table.one-line-switch { + ul#navbar li div.menu div.text table.one-line-switch { margin: 20px 0 20px 0 !important; } } } -ul#menu li div.menu-item-content table.menu-item-content-kv { +ul#navbar li div.menu table.kv { -webkit-user-select: text; -moz-user-select: text; user-select: text; @@ -141,14 +141,14 @@ ul#menu li div.menu-item-content table.menu-item-content-kv { margin: 0 10px 0 10px; font-size: 12px; } -ul#menu li div.menu-item-content table.menu-item-content-kv td.value { +ul#navbar li div.menu table.kv td.value { font-weight: bold; max-width: 310px; overflow: hidden; } -ul#menu li div.menu-item-content-buttons button, -ul#menu li div.menu-item-content-buttons select { +ul#navbar li div.menu div.buttons button, +ul#navbar li div.menu div.buttons select { box-shadow: none; border: none; border-radius: 0; @@ -156,7 +156,7 @@ ul#menu li div.menu-item-content-buttons select { padding: 0 16px; } -ul#menu li div.menu-item-content hr { +ul#navbar li div.menu hr { margin: 0; display: block; height: 0px; @@ -165,7 +165,7 @@ ul#menu li div.menu-item-content hr { border-top: var(--border-control-thin); } -ul#menu li div.menu-item-content img.sign { +ul#navbar li div.menu img.sign { vertical-align: middle; margin-right: 10px; height: 20px; diff --git a/web/share/css/vars.css b/web/share/css/vars.css index d4e5f49b..46ccf0a7 100644 --- a/web/share/css/vars.css +++ b/web/share/css/vars.css @@ -34,10 +34,10 @@ --cs-control-pressed-fg: #6c7481; --cs-control-disabled-fg: #6c7481; - --cs-menu-default-bg: #202225; - --cs-menu-default-fg: #c3c3c3; - --cs-menu-hovered-bg: #1a1c1f; - --cs-menu-pressed-bg: #171717; + --cs-navbar-default-bg: #202225; + --cs-navbar-default-fg: #c3c3c3; + --cs-navbar-item-hovered-bg: #1a1c1f; + --cs-navbar-item-pressed-bg: #171717; --cs-window-default-bg: #484b51; --cs-window-default-fg: #c3c3c3; @@ -69,18 +69,18 @@ --shadow-micro: 1px 2px 4px 0 rgba(0, 0, 0, 0.4); --shadow-small: 0 2px 4px 0 rgba(0, 0, 0, 0.2); --shadow-big: 0 8px 16px 0 rgba(0, 0, 0, 0.4); - --shadow-menu-pressed: 0 5px 0 #5b90bb inset; + --shadow-navbar-item-pressed: 0 5px 0 #5b90bb inset; --border-default-thin: thin solid #36393f; --border-default-2px: 2px solid #36393f; - --border-menu-thin: thin solid black; + --border-navbar-item-thin: thin solid black; --border-control-thin: thin solid #17191d; --border-window-thin: thin solid #17191d; --border-key-thin: thin solid #202225; --border-intensive-2px: 2px solid #5b90bb; --border-intensive-thin: thin solid #5b90bb; - --border-menu-item-content-default-2px: 2px solid black; - --border-menu-item-content-active-2px: 2px solid #5b90bb; + --border-navbar-menu-default-2px: 2px solid black; + --border-navbar-menu-active-2px: 2px solid #5b90bb; --border-menu-item-content-top-thin: thin solid #17191d; } |