mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-01-29 17:11:52 +08:00
Add support for PiKVM Switch and related features
This commit introduces several new components and improvements: - Added Switch module with firmware update and configuration support - Implemented new media streaming capabilities - Updated various UI elements and CSS styles - Enhanced keyboard and mouse event handling - Added new validators and configuration options - Updated Python version support to 3.13 - Improved error handling and logging
This commit is contained in:
@@ -28,3 +28,7 @@ div#msd-menu div.msd-message,
|
||||
div#msd-menu input.msd-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#msd-menu select#msd-image-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -85,7 +85,8 @@ div.stream-box-mouse-none {
|
||||
}
|
||||
|
||||
img#stream-image,
|
||||
video#stream-video {
|
||||
video#stream-video,
|
||||
canvas#stream-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
@@ -41,6 +41,13 @@
|
||||
--led-spin-slow: spin 6s linear infinite;
|
||||
--led-spin-medium: spin 3s linear infinite;
|
||||
--led-spin-fast: spin 2s linear infinite;
|
||||
|
||||
/* Additional colors for GPIO */
|
||||
--led-filter-blue: invert(0.5) sepia(1) saturate(5) hue-rotate(170deg);
|
||||
--led-filter-cyan: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg);
|
||||
--led-filter-magenta: invert(0.5) sepia(1) saturate(5) hue-rotate(200deg);
|
||||
--led-filter-pink: invert(0.5) sepia(1) saturate(5) hue-rotate(300deg);
|
||||
--led-filter-white: invert(1) sepia(1);
|
||||
}
|
||||
|
||||
img.led-gray {
|
||||
@@ -48,19 +55,16 @@ img.led-gray {
|
||||
-webkit-filter: var(--led-filter-gray);
|
||||
filter: var(--led-filter-gray);
|
||||
}
|
||||
|
||||
img.led-green {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-green);
|
||||
filter: var(--led-filter-green);
|
||||
}
|
||||
|
||||
img.led-red {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-red);
|
||||
filter: var(--led-filter-red);
|
||||
}
|
||||
|
||||
img.led-yellow {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-yellow);
|
||||
@@ -73,10 +77,36 @@ img.led-red-rotating-fast {
|
||||
-webkit-animation: var(--led-spin-fast);
|
||||
animation: var(--led-spin-fast);
|
||||
}
|
||||
|
||||
img.led-yellow-rotating-fast {
|
||||
-webkit-filter: var(--led-filter-yellow);
|
||||
filter: var(--led-filter-yellow);
|
||||
-webkit-animation: var(--led-spin-fast);
|
||||
animation: var(--led-spin-fast);
|
||||
}
|
||||
|
||||
/* Additional colors for GPIO */
|
||||
img.led-blue {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-blue);
|
||||
filter: var(--led-filter-blue);
|
||||
}
|
||||
img.led-cyan {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-cyan);
|
||||
filter: var(--led-filter-cyan);
|
||||
}
|
||||
img.led-magenta {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-magenta);
|
||||
filter: var(--led-filter-magenta);
|
||||
}
|
||||
img.led-pink {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-pink);
|
||||
filter: var(--led-filter-pink);
|
||||
}
|
||||
img.led-white {
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-filter: var(--led-filter-white);
|
||||
filter: var(--led-filter-white);
|
||||
}
|
||||
|
||||
@@ -88,12 +88,17 @@ img.svg-gray {
|
||||
}
|
||||
|
||||
img.inline-lamp {
|
||||
vertical-align: middle;
|
||||
height: 1em;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
img.inline-lamp-small {
|
||||
vertical-align: middle;
|
||||
height: 8px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
img.inline-lamp-big {
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
@@ -104,7 +109,8 @@ img.inline-lamp-big {
|
||||
button,
|
||||
select,
|
||||
input[type=file]::-webkit-file-selector-button,
|
||||
input[type=file]::file-selector-button {
|
||||
input[type=file]::file-selector-button,
|
||||
input[type=color] {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--cs-control-default-fg);
|
||||
@@ -117,11 +123,9 @@ input[type=file]::file-selector-button {
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 5px;
|
||||
}
|
||||
select[size] {
|
||||
@@ -194,6 +198,7 @@ select:not([size]) option.comment {
|
||||
input[type=text], input[type=password] {
|
||||
overflow-x: auto;
|
||||
font-family: monospace;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: var(--border-default-thin);
|
||||
color: var(--cs-code-default-fg);
|
||||
@@ -223,42 +228,35 @@ textarea::-webkit-input-placeholder {
|
||||
}
|
||||
|
||||
div.buttons-row {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.row50 {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
.row33 {
|
||||
display: inline-block;
|
||||
width: 33.33%;
|
||||
}
|
||||
.row25 {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
}
|
||||
.row16 {
|
||||
display: inline-block;
|
||||
width: 16.66%;
|
||||
}
|
||||
.row50:not(:first-child),
|
||||
.row33:not(:first-child),
|
||||
.row25:not(:first-child),
|
||||
.row16:not(:first-child) {
|
||||
div.buttons-row button:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: var(--border-control-thin) !important;
|
||||
}
|
||||
.row50:not(:last-child),
|
||||
.row33:not(:last-child),
|
||||
.row25:not(:last-child),
|
||||
.row16:not(:last-child) {
|
||||
div.buttons-row button:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
button.row100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
button.row50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
button.row33 {
|
||||
width: 33.33% !important;
|
||||
}
|
||||
button.row25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
button.row16 {
|
||||
width: 16.66% !important;
|
||||
}
|
||||
|
||||
table.kv {
|
||||
border-spacing: 5px;
|
||||
|
||||
@@ -63,9 +63,11 @@ div.modal div.modal-window div.modal-content {
|
||||
|
||||
div.modal div.modal-window div.modal-buttons {
|
||||
border-top: var(--border-control-thin);
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.modal div.modal-window div.modal-buttons button {
|
||||
|
||||
@@ -172,6 +172,7 @@ ul#navbar li div.menu div.buttons select {
|
||||
border-radius: 0;
|
||||
text-align: left;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul#navbar li div.menu input[type=text] {
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
|
||||
@supports (-webkit-appearance:none) {
|
||||
input[type=range].slider {
|
||||
input[type=range] {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
}
|
||||
@supports not (-webkit-appearance:none) {
|
||||
input[type=range].slider {
|
||||
input[type=range] {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
@@ -42,20 +42,20 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
input[type=range].slider:disabled {
|
||||
input[type=range]:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type=range].slider::-webkit-slider-runnable-track {
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
height: 5px;
|
||||
background: var(--cs-control-default-bg);
|
||||
border-radius: 3px;
|
||||
}
|
||||
input[type=range].slider:disabled::-webkit-slider-runnable-track {
|
||||
input[type=range]:disabled::-webkit-slider-runnable-track {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type=range].slider::-webkit-slider-thumb {
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
border: var(--border-intensive-2px);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
@@ -64,29 +64,29 @@ input[type=range].slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
input[type=range].slider:disabled::-webkit-slider-thumb {
|
||||
input[type=range]:disabled::-webkit-slider-thumb {
|
||||
cursor: default;
|
||||
border: var(--border-default-2px);
|
||||
background: var(--cs-thumb-disabled-bg);
|
||||
}
|
||||
|
||||
input[type=range].slider::-moz-range-track {
|
||||
input[type=range]::-moz-range-track {
|
||||
height: 5px;
|
||||
background: var(--cs-control-default-bg);
|
||||
border-radius: 3px;
|
||||
}
|
||||
input[type=range].slider:disabled::-moz-range-track {
|
||||
input[type=range]:disabled::-moz-range-track {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type=range].slider::-moz-range-thumb {
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: var(--border-intensive-2px);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: 25px;
|
||||
background: var(--cs-thumb-default-bg);
|
||||
}
|
||||
input[type=range].slider:disabled::-moz-range-thumb {
|
||||
input[type=range]:disabled::-moz-range-thumb {
|
||||
cursor: default;
|
||||
border: var(--border-default-2px);
|
||||
background: var(--cs-thumb-disabled-bg);
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
button:enabled:hover,
|
||||
select:not([size]):enabled:hover,
|
||||
input[type=file]:enabled:hover::-webkit-file-selector-button,
|
||||
input[type=file]:enabled:hover::file-selector-button {
|
||||
input[type=file]:enabled:hover::file-selector-button,
|
||||
input[type=color]:enabled:hover {
|
||||
color: var(--cs-control-hovered-fg);
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
@@ -33,7 +34,8 @@ input[type=file]:enabled:hover::file-selector-button {
|
||||
button:active,
|
||||
select:not([size]):active,
|
||||
input[type=file]:active::-webkit-file-selector-button,
|
||||
input[type=file]:active::file-selector-button {
|
||||
input[type=file]:active::file-selector-button,
|
||||
input[type=color]:active {
|
||||
color: var(--cs-control-pressed-fg) !important;
|
||||
background-color: var(--cs-control-pressed-bg) !important;
|
||||
}
|
||||
@@ -60,12 +62,12 @@ div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
|
||||
/* ===== slider.css ===== */
|
||||
|
||||
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
|
||||
input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
|
||||
input[type=range]: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 {
|
||||
input[type=range]:not(:disabled):hover::-moz-range-track {
|
||||
background-color: var(--cs-control-hovered-bg);
|
||||
}
|
||||
|
||||
|
||||
@@ -92,7 +92,7 @@ ul#navbar li a.menu-button:hover:not(.active) {
|
||||
|
||||
/*@media only screen and (orientation: portrait) {
|
||||
@supports (-webkit-appearance: none) {
|
||||
input[type=range].slider {
|
||||
input[type=range] {
|
||||
margin: 20px 0 20px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user