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

refactoring

Browse Source
This commit is contained in:
Devaev Maxim
2018-11-14 02:52:00 +03:00
parent 49a09a6ba1
commit 2916c7fe06
23 changed files with 332 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
web/css/about.css → web/css/kvm/about.css
View File

0
web/css/hid.css → web/css/kvm/hid.css
View File

23
web/css/keyboard.css → web/css/kvm/keyboard.css
View File

@@ -40,7 +40,7 @@ div.keyboard div.key, div.modifier {
}
div.keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-ctl);
background-color: var(--bg-color-menu);
}
div.keyboard div.pressed {
box-shadow: none;
@@ -99,6 +99,27 @@ div.keyboard b {
color: var(--bg-color-intensive);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
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;
}

8
web/css/msd.css → web/css/kvm/msd.css
View File

@@ -1,12 +1,8 @@
div#msd-menu {
width: 450px;
}
div#msd-menu
div#msd-not-in-operate,
div#msd-current-image-broken,
div#msd-another-another-user-uploads,
input#msd-select-new-image-file,
div#msd-new-image {
div.msd-message, input.msd-message {
display: none;
}

90
web/css/kvm/stream.css Normal file
View File

@@ -0,0 +1,90 @@
div#stream-info {
display: none;
}
img#stream-image {
width: 640px;
height: 480px;
display: block;
background-color: black;
}
img.stream-image-active {
-webkit-filter: none;
filter: none;
}
img.stream-image-inactive {
-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div#stream-box {
position: relative;
display: inline-block;
border: var(--border-dark-thin);
}
div.stream-box-inactive::after {
cursor: wait;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: radial-gradient(transparent 20%, black);
}
div.stream-box-mouse-enabled {
cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
}
div.stream-slider-box {
margin-top: 5px;
display: flex;
}
table#stream-auto-resize-box {
width: 100%;
border-collapse: collapse;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
}
}
div#stream-mouse-buttons {
display: none;
margin: 0;
padding: 0;
font-size: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
div#stream-window {
padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !important;
top: 50px !important;
left: 50% !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(--fg-color-dark);
}
div#stream-mouse-buttons {
display: block !important;
}
}

107
web/css/main.css
View File

@@ -83,6 +83,12 @@ select:active {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
button, select {
height: 45px !important;
}
}
.row50 {
display: inline-block;
width: 50%;
@@ -105,98 +111,7 @@ img.svg-gray {
vertical-align: middle;
}
img#logo {
padding-left: 16px;
}
ul#ctl {
box-shadow: var(--shadow-small);
list-style-type: none;
margin: 0;
padding: 0;
background-color: var(--bg-color-ctl);
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 2147483646;
}
ul#ctl li.ctl-logo {
line-height: 50px;
margin-top: -2px;
float: left;
}
ul#ctl li.ctl-right-actions {
float: right;
}
ul#ctl img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
ul#ctl li a.ctl-item {
line-height: 50px;
outline: none;
cursor: pointer;
border-left: var(--border-black-thin);
display: inline-block;
color: var(--fg-color-normal);
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
}
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-hovered);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-ctl) !important;
}
}
ul#ctl li a.ctl-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important;
}
div.ctl-dropdown-content {
visibility: hidden;
overflow: hidden;
white-space: nowrap;
border: var(--border-intensive-2px);
border-top: var(--border-dark-thin);
border-radius: 0 0 8px 8px;
position: absolute;
background-color: var(--bg-color-ctl);
min-width: 180px;
box-shadow: var(--shadow-big);
z-index: 2147483645;
}
div.ctl-dropdown-content button, select {
text-align: left;
padding: 0 16px;
}
div.ctl-dropdown-content div.buttons-row {
margin: 0;
padding: 0;
font-size: 0;
}
div.ctl-dropdown-content hr {
margin: 0;
display: block;
height: 0px;
padding: 0;
border: none;
border-top: var(--border-dark-thin);
}
div.ctl-dropdown-content-buttons {
background-color: var(--bg-color-normal);
}
div.ctl-dropdown-content-text {
margin: 10px 15px 10px 15px;
font-size: 14px;
}
ul#footer {
ul.footer {
list-style-type: none;
bottom: 0;
position: fixed;
@@ -206,15 +121,15 @@ ul#footer {
color: var(--fg-color-inactive);
z-index: -10;
}
ul#footer li {
ul.footer li {
padding: 0 10px;
}
ul#footer li.footer-left {
ul.footer li.footer-left {
float: left;
}
ul#footer li.footer-right {
ul.footer li.footer-right {
float: right;
}
ul#footer li a {
ul.footer li a {
color: var(--fg-color-inactive);
}

88
web/css/menu.css Normal file
View File

@@ -0,0 +1,88 @@
ul.menu {
box-shadow: var(--shadow-small);
list-style-type: none;
margin: 0;
padding: 0;
background-color: var(--bg-color-menu);
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 2147483646;
}
ul.menu li.menu-logo {
line-height: 50px;
margin-top: -2px;
margin-left: 16px;
float: left;
}
ul.menu li.menu-right-actions {
float: right;
}
ul.menu img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
ul.menu li a.menu-item {
line-height: 50px;
outline: none;
cursor: pointer;
border-left: var(--border-black-thin);
display: inline-block;
color: var(--fg-color-normal);
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
}
ul.menu li a.menu-item:hover:not(.active) {
background-color: var(--bg-color-hovered);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
ul.menu li a.menu-item:hover:not(.active) {
background-color: var(--bg-color-menu) !important;
}
}
ul.menu li a.menu-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important;
}
div.menu-dropdown-content {
visibility: hidden;
overflow: hidden;
white-space: nowrap;
border: var(--border-intensive-2px);
border-top: var(--border-dark-thin);
border-radius: 0 0 8px 8px;
position: absolute;
background-color: var(--bg-color-menu);
min-width: 180px;
box-shadow: var(--shadow-big);
z-index: 2147483645;
}
div.menu-dropdown-content button, select {
text-align: left;
padding: 0 16px;
}
div.menu-dropdown-content div.buttons-row {
margin: 0;
padding: 0;
font-size: 0;
}
div.menu-dropdown-content hr {
margin: 0;
display: block;
height: 0px;
padding: 0;
border: none;
border-top: var(--border-dark-thin);
}
div.menu-dropdown-content-buttons {
background-color: var(--bg-color-normal);
}
div.menu-dropdown-content-text {
margin: 10px 15px 10px 15px;
font-size: 14px;
}

65
web/css/mobile.css
View File

@@ -1,65 +0,0 @@
/*
http://stephen.io/mediaqueries/
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
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#stream-window {
padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !important;
top: 50px !important;
left: 50% !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(--fg-color-dark);
}
div#stream-mouse-buttons {
display: block !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
button, select {
height: 45px !important;
}
@supports (-webkit-appearance: none) {
input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
}
}

7
web/css/sliders.css
View File

@@ -20,6 +20,13 @@
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
}
}
input[type=range].slider:disabled {
cursor: default;
}

57
web/css/stream.css
View File

@@ -1,57 +0,0 @@
div#stream-info {
display: none;
}
img#stream-image {
width: 640px;
height: 480px;
display: block;
background-color: var(--bg-color-stream-screen);
}
img.stream-image-active {
-webkit-filter: none;
filter: none;
}
img.stream-image-inactive {
-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div#stream-box {
position: relative;
display: inline-block;
border: var(--border-dark-thin);
}
div.stream-box-inactive::after {
cursor: wait;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: radial-gradient(transparent 20%, black);
}
div.stream-box-mouse-enabled {
cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
}
div.stream-slider-box {
margin-top: 5px;
display: flex;
}
table#stream-auto-resize-box {
width: 100%;
border-collapse: collapse;
}
div#stream-mouse-buttons {
display: none;
margin: 0;
padding: 0;
font-size: 0;
}

6
web/css/vars.css
View File

@@ -3,7 +3,7 @@
--bg-color-light: #484b51;
--bg-color-gray: #3b3e43;
--bg-color-dark: #17191d;
--bg-color-ctl: #202225;
--bg-color-menu: #202225;
--bg-color-intensive: #436a8a;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717;
@@ -14,10 +14,8 @@
--fg-color-inactive: #6c7481;
--fg-color-selected: var(--fg-color-inactive);
--bg-color-stream-screen: black;
--border-color-normal: var(--bg-color-normal);
--border-color-gray: var(--bg-color-ctl);
--border-color-gray: var(--bg-color-menu);
--border-color-dark: var(--bg-color-dark);
--border-color-intensive: #5b90bb;
--border-color-important: #ff6467;