GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 00:51:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rework of #39 (#40)

Browse Source 
* Rework of #39 patch from @arykov (thanks)

* styled resize corner

* fixed squashing of resizaable window on moving

* keep window size and opsition after full screen

* not necessary

* attempt to fix desktop overflow

* improved

* ios fixes

* refactoring
This commit is contained in:
Maxim Devaev
2021-04-12 15:26:32 +03:00
committed by GitHub
parent 8158941833
commit 3af4a8b852
15 changed files with 1478 additions and 1332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/share/css/kvm/stream.css
View File

@@ -20,11 +20,19 @@
*****************************************************************************/
div#stream-window {
min-width: 400px;
min-height: 200px;
}
div#stream-info {
display: none;
}
div#stream-box {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
display: inline-block;
border: var(--border-window-thin);
@@ -45,8 +53,9 @@ div.stream-box-mouse-enabled {
}
img#stream-image {
width: 640px;
height: 480px;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background-color: black;
}
@@ -69,9 +78,12 @@ div#stream-mouse-buttons {
div#stream-window {
padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !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;
}

2
web/share/css/vars.css
View File

@@ -66,6 +66,8 @@
--cs-key-pressed-fg: #6c7481;
--cs-key-holded-bg: #436a8a;
--cs-corner-bg: #5b90bb;
--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);

51
web/share/css/window.css
View File

@@ -34,9 +34,31 @@ div.window {
background-color: var(--cs-window-default-bg);
padding: 30px 9px 9px 9px;
}
div.window-resizable {
resize: both;
}
div.window-active {
border: var(--border-intensive-2px) !important;
}
div.window-resizable.window-active::-webkit-resizer {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent var(--cs-corner-bg) transparent;
/* border-bottom-right-radius: 8px; */
/* Size does not work */
display:block;
width: 20px !important;
height: 20px !important;
}
div.window-full-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.window div.window-header {
overflow: hidden;
@@ -68,17 +90,43 @@ div.window div.window-header-grabbed {
border-bottom: var(--border-intensive-thin);
}
div.window div.window-header button.window-button-full-screen,
div.window div.window-header button.window-button-maximize,
div.window div.window-header button.window-button-close {
border: none;
position: absolute;
top: -2px;
right: -6px;
width: 44px;
height: 24px;
padding-left: 0;
padding-right: 0;
color: var(--cs-window-closer-default-fg);
display: inline-block;
}
div.window div.window-header button.window-button-full-screen {
right: 90px;
}
div.window div.window-header button.window-button-close {
right: 0px;
}
div.window div.window-header button.window-button-maximize {
right: 45px;
}
div.window div.window-lock-alert {
white-space: normal;
text-align: justify;
border: var(--border-window-thin);
border-radius: 8px;
box-sizing: border-box;
padding: 5px 5px 5px 5px;
background-color: var(--cs-window-default-bg);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad */
@@ -91,6 +139,7 @@ div.window div.window-header button.window-button-close {
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-close {
height: 40px !important;
}