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

many style improvements

Browse Source
This commit is contained in:
Devaev Maxim
2020-07-19 16:54:50 +03:00
parent af89118eda
commit 903382fda5
12 changed files with 83 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/kvm/index.html
View File

@@ -148,8 +148,8 @@
<td>Auto-resize stream:</td>
<td align="right">
<div class="switch-box">
<input class="switch-checkbox" checked type="checkbox" id="stream-auto-resize-checkbox">
<label class="switch-label" for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
<input checked type="checkbox" id="stream-auto-resize-checkbox">
<label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
</td>
</table>

6
web/kvm/navbar-system.pug
View File

@@ -39,7 +39,11 @@ li(class="right")
table(class="one-line-switch")
td Auto-resize stream:
td(align="right")
+switch("stream-auto-resize-checkbox")
div(class="switch-box")
input(checked type="checkbox" id="stream-auto-resize-checkbox")
label(for="stream-auto-resize-checkbox")
span(class="switch-inner")
span(class="switch")
hr
div(class="buttons")
button(disabled data-force-hide-menu id="stream-reset-button") &bull; Reset stream

7
web/kvm/navbar.pug
View File

@@ -13,13 +13,6 @@ mixin menu_message(icon, short, classes="")
sup(style="line-height:1")
block
mixin switch(id)
div(class="switch-box")
input(checked type="checkbox" id=id class="switch-checkbox")
label(class="switch-label" for=id)
span(class="switch-inner")
span(class="switch")
ul(id="navbar")
li(class="left")
a(id="logo" href="/") &larr;&nbsp;&nbsp;

2
web/login/index.html
View File

@@ -61,7 +61,7 @@
<tr>
<td></td>
<td>
<button id="login-button">Login</button>
<button class="key" id="login-button">Login</button>
</td>
</tr>
</table>

2
web/login/index.pug
View File

@@ -17,7 +17,7 @@ block body
td #[input(type="password" id="passwd-input")]
tr
td
td #[button(id="login-button") Login]
td #[button(id="login-button" class="key") Login]
ul(class="footer")
li(class="footer-left")

13
web/share/css/main.css
View File

@@ -90,12 +90,10 @@ img.inline-lamp {
button,
select {
box-shadow: none;
border: var(--border-key-thin);
border: none;
border-radius: 4px;
color: var(--cs-control-default-fg);
background-color: var(--cs-control-default-bg);
box-shadow: var(--shadow-micro);
display: block;
width: 100%;
height: 30px;
@@ -107,6 +105,11 @@ select {
padding-left: 5px;
padding-right: 25px;
}
button.key,
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,
@@ -118,6 +121,9 @@ select {
select:active {
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 {
@@ -154,7 +160,6 @@ select:disabled {
}
select:active {
color: var(--cs-control-intensive-fg) !important;
background-color: var(--cs-bg-control-intensive) !important;
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
select option {

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

@@ -149,8 +149,6 @@ ul#navbar li div.menu table.kv td.value {
ul#navbar li div.menu div.buttons button,
ul#navbar li div.menu div.buttons select {
box-shadow: none;
border: none;
border-radius: 0;
text-align: left;
padding: 0 16px;

12
web/share/css/radio.css
View File

@@ -30,7 +30,8 @@ div.radio-box input[type=radio] {
}
div.radio-box label {
display: inline-block;
display: flex;
align-items: center;
text-align: center;
vertical-align: middle;
user-select: none;
@@ -38,6 +39,11 @@ div.radio-box label {
cursor: pointer;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
div.radio-box label {
height: 30px !important;
}
}
div.radio-box label:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
@@ -49,8 +55,10 @@ div.radio-box label:last-of-type {
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */
div.radio-box input[type=radio]:not(:disabled) + label:hover {
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;
}
}

14
web/share/css/slider.css
View File

@@ -61,6 +61,13 @@ 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);
@@ -85,6 +92,13 @@ 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);

33
web/share/css/switch.css
View File

@@ -29,11 +29,11 @@ div.switch-box {
-moz-user-select: none;
}
div.switch-box input[type=checkbox].switch-checkbox {
div.switch-box input[type=checkbox] {
display: none;
}
div.switch-box label.switch-label {
div.switch-box label {
display: block;
overflow: hidden;
cursor: pointer;
@@ -41,14 +41,14 @@ div.switch-box label.switch-label {
border-radius: 15px;
}
div.switch-box label.switch-label span.switch-inner {
div.switch-box label span.switch-inner {
display: block;
width: 200%;
margin-left: -100%;
}
div.switch-box label.switch-label span.switch-inner:before,
div.switch-box label.switch-label span.switch-inner:after {
div.switch-box label span.switch-inner:before,
div.switch-box label span.switch-inner:after {
display: block;
float: left;
width: 50%;
@@ -61,15 +61,14 @@ div.switch-box label.switch-label span.switch-inner:after {
box-sizing: border-box;
}
div.switch-box label.switch-label span.switch-inner:before {
div.switch-box label span.switch-inner:before {
content: "ON";
padding-left: 5px;
background-color: var(--cs-control-default-bg);
color: var(--cs-control-default-fg);
text-align: left;
}
div.switch-box label.switch-label span.switch-inner:after {
div.switch-box label span.switch-inner:after {
content: "OFF";
padding-right: 5px;
background-color: var(--cs-control-default-bg);
@@ -77,7 +76,17 @@ div.switch-box label.switch-label span.switch-inner:after {
text-align: right;
}
div.switch-box label.switch-label span.switch {
@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: 15px;
margin: 0px;
@@ -89,15 +98,15 @@ div.switch-box label.switch-label span.switch {
border-radius: 15px;
}
div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch-inner {
div.switch-box input[type=checkbox]:checked + label span.switch-inner {
margin-left: 0;
}
div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch {
div.switch-box input[type=checkbox]:checked + label span.switch {
right: 0px;
}
div.switch-box input[type=checkbox].switch-checkbox:disabled + label.switch-label span.switch {
div.switch-box input[type=checkbox]:disabled + label span.switch {
background: var(--cs-thumb-disabled-bg);
border: var(--border-default-2px);
}

14
web/share/css/tabs.css
View File

@@ -39,7 +39,8 @@ div.tabs-box div.tab {
div.tabs-box label {
order: 1;
display: block;
display: flex;
align-items: center;
text-align: center;
vertical-align: middle;
user-select: none;
@@ -50,6 +51,11 @@ div.tabs-box label {
position: relative;
top: 1px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
div.tabs-box label {
height: 30px !important;
}
}
div.tabs-box label:last-of-type {
border-right: var(--border-default-thin);
@@ -58,6 +64,12 @@ 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;

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

@@ -28,7 +28,7 @@
--cs-control-default-bg: #36393f;
--cs-control-default-fg: #c3c3c3;
--cs-control-intensive-fg: white;
--cs-control-hovered-bg: #202225;
--cs-control-hovered-bg: #2a2d31;
--cs-control-hovered-fg: white;
--cs-control-pressed-bg: #17191d;
--cs-control-pressed-fg: #6c7481;
@@ -60,7 +60,7 @@
--cs-key-default-bg: #3b3e43;
--cs-key-default-fg: #c3c3c3;
--cs-key-hovered-bg: #202225;
--cs-key-hovered-bg: #2a2d31;
--cs-key-hovered-fg: white;
--cs-key-pressed-bg: #17191d;
--cs-key-pressed-fg: #6c7481;
@@ -73,6 +73,7 @@
--border-default-thin: thin solid #36393f;
--border-default-2px: 2px solid #36393f;
--border-hovered-2px: 2px solid #2a2d31;
--border-navbar-item-thin: thin solid black;
--border-control-thin: thin solid #17191d;
--border-window-thin: thin solid #17191d;