GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 17:20:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

minor ui improvements

Browse Source
This commit is contained in:
Devaev Maxim 2018-10-09 04:50:55 +03:00
parent 4e6ebbc60e
commit 2c241fab44
2 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/css/sliders.css
View File

@ -20,12 +20,18 @@
margin-right: 0; margin-right: 0;
} }
} }
input[type=range].slider:disabled {
cursor: default;
}
input[type=range].slider::-webkit-slider-runnable-track { input[type=range].slider::-webkit-slider-runnable-track {
height: 5px; height: 5px;
background: var(--bg-color-light); background: var(--bg-color-light);
border-radius: 3px; border-radius: 3px;
} }
input[type=range].slider:disabled::-webkit-slider-runnable-track {
cursor: default;
}
input[type=range].slider::-webkit-slider-thumb { input[type=range].slider::-webkit-slider-thumb {
border: var(--border-intensive-2px); border: var(--border-intensive-2px);
@ -37,6 +43,7 @@ input[type=range].slider::-webkit-slider-thumb {
margin-top: -7px; margin-top: -7px;
} }
input[type=range].slider:disabled::-webkit-slider-thumb { input[type=range].slider:disabled::-webkit-slider-thumb {
cursor: default;
border: var(--border-inactive-2px); border: var(--border-inactive-2px);
background: var(--bg-color-normal); background: var(--bg-color-normal);
} }
@ -46,6 +53,9 @@ input[type=range].slider::-moz-range-track {
background: var(--bg-color-light); background: var(--bg-color-light);
border-radius: 3px; border-radius: 3px;
} }
input[type=range].slider:disabled::-moz-range-track {
cursor: default;
}
input[type=range].slider::-moz-range-thumb { input[type=range].slider::-moz-range-thumb {
border: var(--border-intensive-2px); border: var(--border-intensive-2px);
@ -55,6 +65,7 @@ input[type=range].slider::-moz-range-thumb {
background: var(--bg-color-intensive); background: var(--bg-color-intensive);
} }
input[type=range].slider:disabled::-moz-range-thumb { input[type=range].slider:disabled::-moz-range-thumb {
cursor: default;
border: var(--border-inactive-2px); border: var(--border-inactive-2px);
background: var(--bg-color-normal); background: var(--bg-color-normal);
} }

62
web/index.html
View File

@ -68,30 +68,30 @@
<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" /> <img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
System &#8628; System &#8628;
</a> </a>
<div class="ctl-dropdown-content"> <div data-dont-hide-menu class="ctl-dropdown-content">
<div class="ctl-dropdown-content-buttons"> <div class="ctl-dropdown-content-buttons">
<button disabled id="stream-screenshot-button">&bull; Take a screenshot</button> <button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
<hr> <hr>
<button id="show-stream-button">&bull; Show stream</button> <button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
<button id="show-keyboard-button">&bull; Show keyboard</button> <button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
<button id="show-about-button">&bull; Show about</button> <button data-force-hide-menu id="show-about-button">&bull; Show about</button>
</div> </div>
<hr> <hr>
<div data-dont-hide-menu class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
Stream quality: <span id="stream-quality-value">80%</span> Stream quality: <span id="stream-quality-value">80%</span>
<div class="stream-slider-box"> <div class="stream-slider-box">
<input disabled type="range" id="stream-quality-slider" class="slider" /> <input disabled type="range" id="stream-quality-slider" class="slider" />
</div> </div>
</div> </div>
<hr> <hr>
<div data-dont-hide-menu class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
Stream size: <span id="stream-size-value">100%</span> Stream size: <span id="stream-size-value">100%</span>
<div class="stream-slider-box"> <div class="stream-slider-box">
<input type="range" id="stream-size-slider" class="slider" /> <input type="range" id="stream-size-slider" class="slider" />
</div> </div>
</div> </div>
<hr> <hr>
<div data-dont-hide-menu class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
<table id="stream-auto-resize-box"><tr> <table id="stream-auto-resize-box"><tr>
<td>Auto-resize stream:</td> <td>Auto-resize stream:</td>
<td align="right"> <td align="right">
@ -107,9 +107,9 @@
</div> </div>
<div class="ctl-dropdown-content-buttons"> <div class="ctl-dropdown-content-buttons">
<hr> <hr>
<button disabled id="stream-reset-button">&bull; Reset stream</button> <button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
<button disabled id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button> <button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
<button disabled id="msd-reset-button">&bull; Reset mass storage</button> <button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
</div> </div>
</div> </div>
</div> </div>
@ -240,28 +240,28 @@
<img data-dont-hide-menu id="hid-pak-led" class="led-off" src="svg/gear-led.svg" /> <img data-dont-hide-menu id="hid-pak-led" class="led-off" src="svg/gear-led.svg" />
Shortcuts &#8628; Shortcuts &#8628;
</a> </a>
<div class="ctl-dropdown-content"> <div data-dont-hide-menu class="ctl-dropdown-content">
<div class="ctl-dropdown-content-buttons"> <div class="ctl-dropdown-content-buttons">
<textarea data-dont-hide-menu id="hid-pak-text" placeholder="Paste your text here"></textarea> <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
<hr> <hr>
<button disabled id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button> <button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
<hr> <hr>
<div class="buttons-row"> <div class="buttons-row">
<button data-shortcut="CapsLock" class="row50">&bull; CapsLock</button> <button data-force-hide-menu data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>
<button data-shortcut="MetaLeft" class="row50">&bull; Left Win</button> <button data-force-hide-menu data-shortcut="MetaLeft" class="row50">&bull; Left Win</button>
</div> </div>
<hr> <hr>
<button data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button> <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button>
<button data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button> <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button>
<button data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button> <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button>
<button data-shortcut="MetaLeft Space">&bull; Win+Space</button> <button data-force-hide-menu data-shortcut="MetaLeft Space">&bull; Win+Space</button>
<hr> <hr>
<button data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button> <button data-force-hide-menu data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
<button data-shortcut="AltLeft Tab">&bull; Alt+Tab</button> <button data-force-hide-menu data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
<button data-shortcut="AltLeft Enter">&bull; Alt+Enter</button> <button data-force-hide-menu data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
<button data-shortcut="AltLeft F4">&bull; Alt+F4</button> <button data-force-hide-menu data-shortcut="AltLeft F4">&bull; Alt+F4</button>
<hr> <hr>
<button data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button> <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
</div> </div>
<hr> <hr>
<div class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
@ -269,12 +269,12 @@
</div> </div>
<hr> <hr>
<div class="ctl-dropdown-content-buttons buttons-row"> <div class="ctl-dropdown-content-buttons buttons-row">
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button> <button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button> <button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button> <button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button> <button data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button>
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button> <button data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button>
<button data-dont-hide-menu data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button> <button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button>
</div> </div>
</div> </div>
</div> </div>