diff options
Diffstat (limited to 'web/share/css/switch.css')
| -rw-r--r-- | web/share/css/switch.css | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/web/share/css/switch.css b/web/share/css/switch.css new file mode 100644 index 00000000..00defe4a --- /dev/null +++ b/web/share/css/switch.css @@ -0,0 +1,103 @@ +/***************************************************************************** +# # +# KVMD - The main Pi-KVM daemon. # +# # +# Copyright (C) 2018 Maxim Devaev <[email protected]> # +# # +# This program is free software: you can redistribute it and/or modify # +# it under the terms of the GNU General Public License as published by # +# the Free Software Foundation, either version 3 of the License, or # +# (at your option) any later version. # +# # +# This program is distributed in the hope that it will be useful, # +# but WITHOUT ANY WARRANTY; without even the implied warranty of # +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the # +# GNU General Public License for more details. # +# # +# You should have received a copy of the GNU General Public License # +# along with this program. If not, see <https://www.gnu.org/licenses/>. # +# # +*****************************************************************************/ + + +div.switch-box { + display: inline-block; + vertical-align: middle; + position: relative; + width: 50px; + -webkit-user-select: none; + -moz-user-select: none; +} + +div.switch-box input[type=checkbox].switch-checkbox { + display: none; +} + +div.switch-box label.switch-label { + display: block; + overflow: hidden; + cursor: pointer; + border: none; + border-radius: 15px; +} + +div.switch-box label.switch-label span.switch-inner { + display: block; + width: 200%; + margin-left: -100%; +} + +div.switch-box label.switch-label span.switch-inner:before, span.switch-inner:after { + display: block; + float: left; + width: 50%; + height: 20px; + padding: 0; + line-height: 22px; + font-size: 10px; + font-family: sans-serif !important; + font-weight: bold; + box-sizing: border-box; +} + +div.switch-box label.switch-label span.switch-inner:before { + content: "ON"; + padding-left: 5px; + background-color: var(--cs-control-default-bg); + color: var(--cs-control-default-fg); + text-align: left; +} + +div.switch-box label.switch-label span.switch-inner:after { + content: "OFF"; + padding-right: 5px; + background-color: var(--cs-control-default-bg); + color: var(--cs-control-disabled-fg); + text-align: right; +} + +div.switch-box label.switch-label span.switch { + display: block; + width: 15px; + margin: 0px; + background: var(--cs-thumb-default-bg); + position: absolute; + top: 0; + bottom: 0; + right: 31px; + border: var(--border-intensive-2px); + border-radius: 15px; +} + +div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch-inner { + margin-left: 0; +} + +div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch { + right: 0px; +} + +div.switch-box input[type=checkbox].switch-checkbox:disabled + label.switch-label span.switch { + background: var(--cs-thumb-disabled-bg); + border: var(--border-default-2px); +} |