mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-01-29 00:51:53 +08:00
fixed browser detection, loading css from js
This commit is contained in:
Maxim Devaev
@@ -90,7 +90,7 @@ tr.server {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@media all and (display-mode: standalone) {
|
||||
@media only screen and (display-mode: standalone) {
|
||||
div#app-keyboard-warning {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -139,15 +139,3 @@ div.keypad div.label {
|
||||
div.keypad b {
|
||||
color: var(--cs-key-holded-bg);
|
||||
}
|
||||
|
||||
@media only screen and (pointer: coarse) {
|
||||
div.keypad {
|
||||
zoom: 1.28 !important;
|
||||
}
|
||||
|
||||
div.keypad div.key:hover,
|
||||
div.keypad div.modifier:hover {
|
||||
color: var(--cs-key-default-fg);
|
||||
background-color: var(--cs-key-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,38 +20,9 @@
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
@media only screen and (pointer: coarse) {
|
||||
div#keyboard-window {
|
||||
visibility: visible !important;
|
||||
padding-top: 9px !important;
|
||||
padding-bottom: 30px !important;
|
||||
border-bottom: 0 !important;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
top: unset !important;
|
||||
bottom: 0 !important;
|
||||
width: 100% !important;
|
||||
left: 50% !important;
|
||||
-webkit-transform: translateX(-50%) !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
div#keyboard-window-header {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
|
||||
div#keyboard-desktop {
|
||||
display: block;
|
||||
}
|
||||
div#keyboard-mobile {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (pointer: coarse) {
|
||||
div#keyboard-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
div#keyboard-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,33 +102,3 @@ div#stream-window.window-active:fullscreen div#stream-box div#stream-fullscreen-
|
||||
div#stream-mouse-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (pointer: coarse) {
|
||||
div#stream-window {
|
||||
padding-top: 3px !important;
|
||||
padding-bottom: 80px !important;
|
||||
border-top: 0 !important;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
top: 50px !important;
|
||||
left: 50% !important;
|
||||
width: 100% !important;
|
||||
-webkit-transform: translateX(-50%) !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
div#stream-window-header {
|
||||
display: none !important;
|
||||
}
|
||||
div#stream-info {
|
||||
display: block !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 3px;
|
||||
font-size: 0.8em;
|
||||
color: var(--cs-window-header-default-fg);
|
||||
}
|
||||
div#stream-mouse-buttons {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
85
web/share/css/kvm/x-mobile.css
Normal file
85
web/share/css/kvm/x-mobile.css
Normal file
@@ -0,0 +1,85 @@
|
||||
/*****************************************************************************
|
||||
# #
|
||||
# KVMD - The main PiKVM daemon. #
|
||||
# #
|
||||
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
|
||||
# #
|
||||
# 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/>. #
|
||||
# #
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
/* ===== stream.css ===== */
|
||||
|
||||
div#stream-window {
|
||||
padding-top: 3px !important;
|
||||
padding-bottom: 80px !important;
|
||||
border-top: 0 !important;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
top: 50px !important;
|
||||
left: 50% !important;
|
||||
width: 100% !important;
|
||||
-webkit-transform: translateX(-50%) !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
div#stream-window-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div#stream-info {
|
||||
display: block !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 3px;
|
||||
font-size: 0.8em;
|
||||
color: var(--cs-window-header-default-fg);
|
||||
}
|
||||
|
||||
div#stream-mouse-buttons {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== keyboard.css ===== */
|
||||
|
||||
div#keyboard-window {
|
||||
visibility: visible !important;
|
||||
padding-top: 9px !important;
|
||||
padding-bottom: 30px !important;
|
||||
border-bottom: 0 !important;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
top: unset !important;
|
||||
bottom: 0 !important;
|
||||
width: 100% !important;
|
||||
left: 50% !important;
|
||||
-webkit-transform: translateX(-50%) !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
div#keyboard-window-header {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
div#keyboard-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div#keyboard-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
@@ -134,40 +134,6 @@ select.key {
|
||||
border: var(--border-key-thin);
|
||||
box-shadow: var(--shadow-micro);
|
||||
}
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
button:enabled:hover,
|
||||
select:enabled:hover,
|
||||
input[type=file]:enabled:hover::-webkit-file-selector-button,
|
||||
input[type=file]:enabled:hover::file-selector-button {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
button:active,
|
||||
select:active,
|
||||
input[type=file]:active::-webkit-file-selector-button,
|
||||
input[type=file]:active::file-selector-button {
|
||||
color: var(--cs-control-pressed-fg) !important;
|
||||
background-color: var(--cs-control-pressed-bg) !important;
|
||||
}
|
||||
button.key:active,
|
||||
select.key:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
select:enabled:hover {
|
||||
background-image: url("../svg/select-arrow-intensive.svg") !important;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
/* If we DON'T have a mouse cursor */
|
||||
button:active,
|
||||
select:active,
|
||||
input[type=file]:active::-webkit-file-selector-button,
|
||||
input[type=file]:active::file-selector-button {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
}
|
||||
button:disabled,
|
||||
select:disabled,
|
||||
input[type=file]:disabled::-webkit-file-selector-button,
|
||||
@@ -214,17 +180,6 @@ input[type=text], input[type=password] {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (pointer: coarse) and (orientation: portrait) {
|
||||
button,
|
||||
select,
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=file]::-webkit-file-selector-button,
|
||||
input[type=file]::file-selector-button {
|
||||
height: 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.buttons-row {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -74,8 +74,3 @@ div.modal div.modal-window div.modal-buttons button {
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
}
|
||||
@media only screen and (pointer: coarse) and (orientation: portrait) {
|
||||
div.modal-buttons button {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,12 +82,6 @@ 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 (pointer: coarse) {
|
||||
ul#navbar li a#logo:hover:not(.active),
|
||||
ul#navbar li a.menu-button:hover:not(.active) {
|
||||
background-color: var(--cs-navbar-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
ul#navbar li a#logo img {
|
||||
margin-top: -2px;
|
||||
|
||||
@@ -45,11 +45,6 @@ div.radio-box label:not(:last-of-type) {
|
||||
margin-right: 1px;
|
||||
box-shadow: 1px 0 0 0 var(--cs-control-pressed-bg);
|
||||
}
|
||||
@media only screen and (pointer: coarse) and (orientation: portrait) {
|
||||
div.radio-box input[type=radio] + label {
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
div.radio-box label:first-of-type {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
@@ -59,15 +54,6 @@ div.radio-box label:last-of-type {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
|
||||
border: var(--border-hovered-2px);
|
||||
color: var(--cs-control-hovered-fg) !important;
|
||||
background-color: var(--cs-control-hovered-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.radio-box input[type=radio]:checked + label {
|
||||
/*font-weight: bold;*/
|
||||
text-shadow: 0.5px 0 0 currentColor;
|
||||
|
||||
@@ -42,13 +42,6 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (pointer: coarse) and (orientation: portrait) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
input[type=range].slider {
|
||||
margin: 20px 0 20px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type=range].slider:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
@@ -61,13 +54,6 @@ input[type=range].slider::-webkit-slider-runnable-track {
|
||||
input[type=range].slider:disabled::-webkit-slider-runnable-track {
|
||||
cursor: default;
|
||||
}
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
|
||||
input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range].slider::-webkit-slider-thumb {
|
||||
border: var(--border-intensive-2px);
|
||||
@@ -92,13 +78,6 @@ input[type=range].slider::-moz-range-track {
|
||||
input[type=range].slider:disabled::-moz-range-track {
|
||||
cursor: default;
|
||||
}
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
|
||||
input[type=range].slider:not(:disabled):hover::-moz-range-track {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range].slider::-moz-range-thumb {
|
||||
border: var(--border-intensive-2px);
|
||||
|
||||
@@ -79,16 +79,6 @@ div.switch-box label span.switch-inner:after {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
div.switch-box label span.switch-inner:not(:disabled):hover::before {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
div.switch-box label span.switch-inner:not(:disabled):hover::after {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
}
|
||||
|
||||
div.switch-box label span.switch {
|
||||
display: block;
|
||||
width: 13px;
|
||||
|
||||
@@ -53,11 +53,6 @@ div.tabs-box label {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
@media only screen and (pointer: coarse) and (orientation: portrait) {
|
||||
div.tabs-box label {
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.tabs-box label:last-of-type {
|
||||
border-right: var(--border-default-thin);
|
||||
@@ -66,12 +61,6 @@ div.tabs-box label:last-of-type {
|
||||
div.tabs-box input[type="radio"]:checked + label {
|
||||
background-color: var(--cs-control-default-bg);
|
||||
}
|
||||
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
|
||||
/* If we have a mouse cursor */
|
||||
div.tabs-box input[type="radio"]:not(:checked):hover + label {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
}
|
||||
}
|
||||
|
||||
div.tabs-box input[type="radio"]:checked + label + .tab {
|
||||
display: block;
|
||||
|
||||
@@ -169,22 +169,3 @@ div.window button.window-button-exit-full-tab:hover {
|
||||
div.window.window-full-tab button.window-button-exit-full-tab {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@media only screen and (pointer: coarse) {
|
||||
div.window {
|
||||
padding-top: 45px !important;
|
||||
}
|
||||
div.window div.window-header {
|
||||
height: 35px !important;
|
||||
}
|
||||
div.window div.window-header div.window-grab {
|
||||
height: 35px !important;
|
||||
}
|
||||
div.window div.window-header button.window-button-full-screen,
|
||||
div.window div.window-header button.window-button-enter-full-tab,
|
||||
div.window div.window-header button.window-button-original,
|
||||
div.window div.window-header button.window-button-maximize,
|
||||
div.window div.window-header button.window-button-close {
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
88
web/share/css/x-desktop.css
Normal file
88
web/share/css/x-desktop.css
Normal file
@@ -0,0 +1,88 @@
|
||||
/*****************************************************************************
|
||||
# #
|
||||
# KVMD - The main PiKVM daemon. #
|
||||
# #
|
||||
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
|
||||
# #
|
||||
# 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/>. #
|
||||
# #
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
/* ===== main.css ===== */
|
||||
|
||||
button:enabled:hover,
|
||||
select:enabled:hover,
|
||||
input[type=file]:enabled:hover::-webkit-file-selector-button,
|
||||
input[type=file]:enabled:hover::file-selector-button {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
button:active,
|
||||
select:active,
|
||||
input[type=file]:active::-webkit-file-selector-button,
|
||||
input[type=file]:active::file-selector-button {
|
||||
color: var(--cs-control-pressed-fg) !important;
|
||||
background-color: var(--cs-control-pressed-bg) !important;
|
||||
}
|
||||
|
||||
button.key:active,
|
||||
select.key:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
select:enabled:hover {
|
||||
background-image: url("../svg/select-arrow-intensive.svg") !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== radio.css ===== */
|
||||
|
||||
/* If we have a mouse cursor */
|
||||
div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
|
||||
border: var(--border-hovered-2px);
|
||||
color: var(--cs-control-hovered-fg) !important;
|
||||
background-color: var(--cs-control-hovered-bg) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== slider.css ===== */
|
||||
|
||||
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
|
||||
input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
|
||||
input[type=range].slider:not(:disabled):hover::-moz-range-track {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
|
||||
/* ===== switch.css ===== */
|
||||
|
||||
div.switch-box label span.switch-inner:not(:disabled):hover::before {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
div.switch-box label span.switch-inner:not(:disabled):hover::after {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
|
||||
/* ===== tabs.css ===== */
|
||||
|
||||
div.tabs-box input[type="radio"]:not(:checked):hover + label {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
}
|
||||
121
web/share/css/x-mobile.css
Normal file
121
web/share/css/x-mobile.css
Normal file
@@ -0,0 +1,121 @@
|
||||
/*****************************************************************************
|
||||
# #
|
||||
# KVMD - The main PiKVM daemon. #
|
||||
# #
|
||||
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
|
||||
# #
|
||||
# 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/>. #
|
||||
# #
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
/* ===== main.css ===== */
|
||||
|
||||
button:active,
|
||||
select:active,
|
||||
input[type=file]:active::-webkit-file-selector-button,
|
||||
input[type=file]:active::file-selector-button {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
button,
|
||||
select,
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=file]::-webkit-file-selector-button,
|
||||
input[type=file]::file-selector-button {
|
||||
height: 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== window.css ===== */
|
||||
|
||||
div.window {
|
||||
padding-top: 45px !important;
|
||||
}
|
||||
div.window div.window-header {
|
||||
height: 35px !important;
|
||||
}
|
||||
div.window div.window-header div.window-grab {
|
||||
height: 35px !important;
|
||||
}
|
||||
div.window div.window-header button.window-button-full-screen,
|
||||
div.window div.window-header button.window-button-enter-full-tab,
|
||||
div.window div.window-header button.window-button-original,
|
||||
div.window div.window-header button.window-button-maximize,
|
||||
div.window div.window-header button.window-button-close {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== modal.css ===== */
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
div.modal-buttons button {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== navbar.css ===== */
|
||||
|
||||
ul#navbar li a#logo:hover:not(.active),
|
||||
ul#navbar li a.menu-button:hover:not(.active) {
|
||||
background-color: var(--cs-navbar-default-bg);
|
||||
}
|
||||
|
||||
|
||||
/* ===== radio.css ===== */
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
div.radio-box input[type=radio] + label {
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== slider.css ===== */
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
input[type=range].slider {
|
||||
margin: 20px 0 20px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== tabs.css ===== */
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
div.tabs-box label {
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== keypad.css ===== */
|
||||
|
||||
div.keypad {
|
||||
zoom: 1.28 !important;
|
||||
}
|
||||
|
||||
div.keypad div.key:hover,
|
||||
div.keypad div.modifier:hover {
|
||||
color: var(--cs-key-default-fg);
|
||||
background-color: var(--cs-key-default-bg);
|
||||
}
|
||||
Reference in New Issue
Block a user