mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-13 01:30:31 +08:00
fixed browser detection, loading css from js
This commit is contained in:
Maxim Devaev
parent
5d54b32ab6
commit
e5ed253d68
@ -90,7 +90,7 @@ tr.server {
|
|||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (display-mode: standalone) {
|
@media only screen and (display-mode: standalone) {
|
||||||
div#app-keyboard-warning {
|
div#app-keyboard-warning {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -139,15 +139,3 @@ div.keypad div.label {
|
|||||||
div.keypad b {
|
div.keypad b {
|
||||||
color: var(--cs-key-holded-bg);
|
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 {
|
div#keyboard-desktop {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
div#keyboard-mobile {
|
div#keyboard-mobile {
|
||||||
display: none;
|
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 {
|
div#stream-mouse-buttons {
|
||||||
display: none;
|
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);
|
border: var(--border-key-thin);
|
||||||
box-shadow: var(--shadow-micro);
|
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,
|
button:disabled,
|
||||||
select:disabled,
|
select:disabled,
|
||||||
input[type=file]:disabled::-webkit-file-selector-button,
|
input[type=file]:disabled::-webkit-file-selector-button,
|
||||||
@ -214,17 +180,6 @@ input[type=text], input[type=password] {
|
|||||||
height: 30px;
|
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 {
|
div.buttons-row {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@ -74,8 +74,3 @@ div.modal div.modal-window div.modal-buttons button {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
height: 40px;
|
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) {
|
ul#navbar li a.menu-button:hover:not(.active) {
|
||||||
background-color: var(--cs-navbar-item-hovered-bg);
|
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 {
|
ul#navbar li a#logo img {
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
|
|||||||
@ -45,11 +45,6 @@ div.radio-box label:not(:last-of-type) {
|
|||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
box-shadow: 1px 0 0 0 var(--cs-control-pressed-bg);
|
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 {
|
div.radio-box label:first-of-type {
|
||||||
border-top-left-radius: 4px;
|
border-top-left-radius: 4px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
@ -59,15 +54,6 @@ div.radio-box label:last-of-type {
|
|||||||
border-bottom-right-radius: 4px;
|
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 {
|
div.radio-box input[type=radio]:checked + label {
|
||||||
/*font-weight: bold;*/
|
/*font-weight: bold;*/
|
||||||
text-shadow: 0.5px 0 0 currentColor;
|
text-shadow: 0.5px 0 0 currentColor;
|
||||||
|
|||||||
@ -42,13 +42,6 @@
|
|||||||
margin-right: 0;
|
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 {
|
input[type=range].slider:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
@ -61,13 +54,6 @@ input[type=range].slider::-webkit-slider-runnable-track {
|
|||||||
input[type=range].slider:disabled::-webkit-slider-runnable-track {
|
input[type=range].slider:disabled::-webkit-slider-runnable-track {
|
||||||
cursor: default;
|
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 {
|
input[type=range].slider::-webkit-slider-thumb {
|
||||||
border: var(--border-intensive-2px);
|
border: var(--border-intensive-2px);
|
||||||
@ -92,13 +78,6 @@ input[type=range].slider::-moz-range-track {
|
|||||||
input[type=range].slider:disabled::-moz-range-track {
|
input[type=range].slider:disabled::-moz-range-track {
|
||||||
cursor: default;
|
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 {
|
input[type=range].slider::-moz-range-thumb {
|
||||||
border: var(--border-intensive-2px);
|
border: var(--border-intensive-2px);
|
||||||
|
|||||||
@ -79,16 +79,6 @@ div.switch-box label span.switch-inner:after {
|
|||||||
text-align: right;
|
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 {
|
div.switch-box label span.switch {
|
||||||
display: block;
|
display: block;
|
||||||
width: 13px;
|
width: 13px;
|
||||||
|
|||||||
@ -53,11 +53,6 @@ div.tabs-box label {
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: 1px;
|
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 {
|
div.tabs-box label:last-of-type {
|
||||||
border-right: var(--border-default-thin);
|
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 {
|
div.tabs-box input[type="radio"]:checked + label {
|
||||||
background-color: var(--cs-control-default-bg);
|
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 {
|
div.tabs-box input[type="radio"]:checked + label + .tab {
|
||||||
display: block;
|
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 {
|
div.window.window-full-tab button.window-button-exit-full-tab {
|
||||||
visibility: visible !important;
|
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);
|
||||||
|
}
|
||||||
@ -23,7 +23,82 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
export function checkBrowser() {
|
export var browser = new function() {
|
||||||
|
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
|
||||||
|
|
||||||
|
// Opera 8.0+
|
||||||
|
let is_opera = (
|
||||||
|
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|
||||||
|
|| !!window.opera
|
||||||
|
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Firefox 1.0+
|
||||||
|
let is_firefox = (typeof InstallTrigger !== "undefined");
|
||||||
|
|
||||||
|
// Safari 3.0+ "[object HTMLElementConstructor]"
|
||||||
|
let is_safari = (function() {
|
||||||
|
if (/constructor/i.test(String(window["HTMLElement"]))) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
let push = null;
|
||||||
|
try {
|
||||||
|
push = window.top["safari"].pushNotification;
|
||||||
|
} catch {
|
||||||
|
try {
|
||||||
|
push = window["safari"].pushNotification;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return String(push) === "[object SafariRemoteNotification]";
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Chrome 1+
|
||||||
|
let is_chrome = !!window.chrome;
|
||||||
|
|
||||||
|
// Blink engine detection
|
||||||
|
let is_blink = ((is_chrome || is_opera) && !!window.CSS);
|
||||||
|
|
||||||
|
// Any browser on Mac
|
||||||
|
let is_mac = ((
|
||||||
|
window.navigator.oscpu
|
||||||
|
|| window.navigator.platform
|
||||||
|
|| window.navigator.appVersion
|
||||||
|
|| "Unknown"
|
||||||
|
).indexOf("Mac") !== -1);
|
||||||
|
|
||||||
|
// Any Windows
|
||||||
|
let is_win = (navigator && !!(/win/i).exec(navigator.platform));
|
||||||
|
|
||||||
|
// iOS browsers
|
||||||
|
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
|
||||||
|
// https://github.com/lancedikson/bowser/issues/329
|
||||||
|
let is_ios = (!!navigator.platform && (
|
||||||
|
/iPad|iPhone|iPod/.test(navigator.platform)
|
||||||
|
|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
|
||||||
|
));
|
||||||
|
|
||||||
|
let is_android = /android/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
let flags = {
|
||||||
|
"is_opera": is_opera,
|
||||||
|
"is_firefox": is_firefox,
|
||||||
|
"is_safari": is_safari,
|
||||||
|
"is_chrome": is_chrome,
|
||||||
|
"is_blink": is_blink,
|
||||||
|
"is_mac": is_mac,
|
||||||
|
"is_win": is_win,
|
||||||
|
"is_ios": is_ios,
|
||||||
|
"is_android": is_android,
|
||||||
|
"is_mobile": (is_ios || is_android),
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("===== BB flags:", flags);
|
||||||
|
return flags;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function checkBrowser(desktop_css, mobile_css) {
|
||||||
if (
|
if (
|
||||||
!window.navigator
|
!window.navigator
|
||||||
|| window.navigator.userAgent.indexOf("MSIE ") > 0
|
|| window.navigator.userAgent.indexOf("MSIE ") > 0
|
||||||
@ -52,7 +127,30 @@ export function checkBrowser() {
|
|||||||
`;
|
`;
|
||||||
document.body.appendChild(el_modal);
|
document.body.appendChild(el_modal);
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
if (browser.is_mobile) {
|
||||||
|
__addCssLink("/share/css/x-mobile.css");
|
||||||
|
if (mobile_css) {
|
||||||
|
__addCssLink(mobile_css);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
__addCssLink("/share/css/x-desktop.css");
|
||||||
|
if (desktop_css) {
|
||||||
|
__addCssLink(desktop_css);
|
||||||
|
}
|
||||||
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function __addCssLink(path) {
|
||||||
|
console.log("===== Adding CSS:", path);
|
||||||
|
let el_head = document.getElementsByTagName("head")[0];
|
||||||
|
let el_link = document.createElement("link");
|
||||||
|
el_link.rel = "stylesheet";
|
||||||
|
el_link.type = "text/css";
|
||||||
|
el_link.href = path;
|
||||||
|
el_link.media = "all";
|
||||||
|
el_head.appendChild(el_link);
|
||||||
|
}
|
||||||
|
|||||||
@ -31,7 +31,7 @@ import {wm, initWindowManager} from "../wm.js";
|
|||||||
export function main() {
|
export function main() {
|
||||||
initWindowManager();
|
initWindowManager();
|
||||||
|
|
||||||
if (checkBrowser()) {
|
if (checkBrowser(null, null)) {
|
||||||
__setAppText();
|
__setAppText();
|
||||||
__loadKvmdInfo();
|
__loadKvmdInfo();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,7 +31,7 @@ import {Session} from "./session.js";
|
|||||||
|
|
||||||
|
|
||||||
export function main() {
|
export function main() {
|
||||||
if (checkBrowser()) {
|
if (checkBrowser(null, "/share/css/kvm/x-mobile.css")) {
|
||||||
tools.storage.bindSimpleSwitch($("page-close-ask-switch"), "page.close.ask", true, function(value) {
|
tools.storage.bindSimpleSwitch($("page-close-ask-switch"), "page.close.ask", true, function(value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
window.onbeforeunload = function(event) {
|
window.onbeforeunload = function(event) {
|
||||||
|
|||||||
@ -29,7 +29,7 @@ import {wm, initWindowManager} from "../wm.js";
|
|||||||
|
|
||||||
|
|
||||||
export function main() {
|
export function main() {
|
||||||
if (checkBrowser()) {
|
if (checkBrowser(null, null)) {
|
||||||
initWindowManager();
|
initWindowManager();
|
||||||
|
|
||||||
tools.el.setOnClick($("login-button"), __login);
|
tools.el.setOnClick($("login-button"), __login);
|
||||||
|
|||||||
@ -23,6 +23,9 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
import {browser} from "./bb.js";
|
||||||
|
|
||||||
|
|
||||||
export var tools = new function() {
|
export var tools = new function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
@ -335,78 +338,7 @@ export var tools = new function() {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
self.browser = new function() {
|
self.browser = browser;
|
||||||
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
|
|
||||||
|
|
||||||
// Opera 8.0+
|
|
||||||
let is_opera = (
|
|
||||||
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|
|
||||||
|| !!window.opera
|
|
||||||
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Firefox 1.0+
|
|
||||||
let is_firefox = (typeof InstallTrigger !== "undefined");
|
|
||||||
|
|
||||||
// Safari 3.0+ "[object HTMLElementConstructor]"
|
|
||||||
let is_safari = (function() {
|
|
||||||
if (/constructor/i.test(String(window["HTMLElement"]))) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
let push = null;
|
|
||||||
try {
|
|
||||||
push = window.top["safari"].pushNotification;
|
|
||||||
} catch {
|
|
||||||
try {
|
|
||||||
push = window["safari"].pushNotification;
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return String(push) === "[object SafariRemoteNotification]";
|
|
||||||
})();
|
|
||||||
|
|
||||||
// Chrome 1+
|
|
||||||
let is_chrome = !!window.chrome;
|
|
||||||
|
|
||||||
// Blink engine detection
|
|
||||||
let is_blink = ((is_chrome || is_opera) && !!window.CSS);
|
|
||||||
|
|
||||||
// Any browser on Mac
|
|
||||||
let is_mac = ((
|
|
||||||
window.navigator.oscpu
|
|
||||||
|| window.navigator.platform
|
|
||||||
|| window.navigator.appVersion
|
|
||||||
|| "Unknown"
|
|
||||||
).indexOf("Mac") !== -1);
|
|
||||||
|
|
||||||
// Any Windows
|
|
||||||
let is_win = (navigator && !!(/win/i).exec(navigator.platform));
|
|
||||||
|
|
||||||
// iOS browsers
|
|
||||||
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
|
|
||||||
// https://github.com/lancedikson/bowser/issues/329
|
|
||||||
let is_ios = (!!navigator.platform && (
|
|
||||||
/iPad|iPhone|iPod/.test(navigator.platform)
|
|
||||||
|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
|
|
||||||
));
|
|
||||||
|
|
||||||
let is_android = /android/i.test(navigator.userAgent);
|
|
||||||
|
|
||||||
return {
|
|
||||||
"is_opera": is_opera,
|
|
||||||
"is_firefox": is_firefox,
|
|
||||||
"is_safari": is_safari,
|
|
||||||
"is_chrome": is_chrome,
|
|
||||||
"is_blink": is_blink,
|
|
||||||
"is_mac": is_mac,
|
|
||||||
"is_win": is_win,
|
|
||||||
"is_ios": is_ios,
|
|
||||||
"is_android": is_android,
|
|
||||||
"is_mobile": (is_ios || is_android),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
self.info("Browser:", self.browser);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export var $ = (id) => document.getElementById(id);
|
export var $ = (id) => document.getElementById(id);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user