summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web/css/kvm/msd.css6
-rw-r--r--web/css/kvm/stream.css34
-rw-r--r--web/css/main.css8
-rw-r--r--web/css/menu.css39
-rw-r--r--web/css/switches.css10
-rw-r--r--web/css/windows.css2
-rw-r--r--web/js/ui.js4
-rw-r--r--web/kvm.html378
8 files changed, 243 insertions, 238 deletions
diff --git a/web/css/kvm/msd.css b/web/css/kvm/msd.css
index de22d6e5..4a1c5d28 100644
--- a/web/css/kvm/msd.css
+++ b/web/css/kvm/msd.css
@@ -2,11 +2,11 @@ div#msd-menu {
width: 450px;
}
-div.msd-message, input.msd-message {
+div#msd-menu div.msd-message, input.msd-message {
display: none;
}
-table.msd-info {
+div#msd-menu table.msd-info {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
@@ -15,7 +15,7 @@ table.msd-info {
font-size: 12px;
}
-table.msd-info td.msd-info-value {
+div#msd-menu table.msd-info td.msd-info-value {
font-weight: bold;
max-width: 310px;
overflow: hidden;
diff --git a/web/css/kvm/stream.css b/web/css/kvm/stream.css
index 4cdb7fe4..10670ef4 100644
--- a/web/css/kvm/stream.css
+++ b/web/css/kvm/stream.css
@@ -2,23 +2,6 @@ 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;
@@ -39,6 +22,23 @@ div.stream-box-mouse-enabled {
cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
}
+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-slider-box {
margin-top: 5px;
display: flex;
diff --git a/web/css/main.css b/web/css/main.css
index 65a9afe9..a9f9600f 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -4,6 +4,8 @@ body {
color: var(--fg-color-normal);
background-color: var(--bg-color-normal);
font-family: sans-serif !important;
+}
+body.body-no-select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
@@ -96,6 +98,12 @@ select:active {
}
}
+div.buttons-row {
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+}
+
.row50 {
display: inline-block;
width: 50%;
diff --git a/web/css/menu.css b/web/css/menu.css
index b70419f9..581aaf97 100644
--- a/web/css/menu.css
+++ b/web/css/menu.css
@@ -10,20 +10,24 @@ ul.menu {
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 {
+
+ul.menu li.menu-right-items {
float: right;
}
+
ul.menu img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
+
ul.menu li a.menu-item {
line-height: 50px;
outline: none;
@@ -35,6 +39,7 @@ ul.menu li a.menu-item {
padding-right: 16px;
text-decoration: none;
}
+
ul.menu li a.menu-item:hover:not(.active) {
background-color: var(--bg-color-hovered);
}
@@ -44,11 +49,13 @@ 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 {
+
+ul.menu li div.menu-item-content {
visibility: hidden;
overflow: hidden;
white-space: nowrap;
@@ -61,16 +68,22 @@ div.menu-dropdown-content {
box-shadow: var(--shadow-big);
z-index: 2147483645;
}
-div.menu-dropdown-content button, select {
+
+ul.menu li div.menu-item-content-buttons {
+ background-color: var(--bg-color-normal);
+}
+
+ul.menu li div.menu-item-content-text {
+ margin: 10px 15px 10px 15px;
+ font-size: 14px;
+}
+
+ul.menu li div.menu-item-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 {
+
+ul.menu li div.menu-item-content hr {
margin: 0;
display: block;
height: 0px;
@@ -78,11 +91,3 @@ div.menu-dropdown-content hr {
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;
-}
-
diff --git a/web/css/switches.css b/web/css/switches.css
index 08e50033..603115c4 100644
--- a/web/css/switches.css
+++ b/web/css/switches.css
@@ -19,13 +19,13 @@ div.switch-box label.switch-label {
border-radius: 15px;
}
-div.switch-box span.switch-inner {
+div.switch-box label.switch-label span.switch-inner {
display: block;
width: 200%;
margin-left: -100%;
}
-div.switch-box span.switch-inner:before, span.switch-inner:after {
+div.switch-box label.switch-label span.switch-inner:before, span.switch-inner:after {
display: block;
float: left;
width: 50%;
@@ -38,7 +38,7 @@ div.switch-box span.switch-inner:before, span.switch-inner:after {
box-sizing: border-box;
}
-div.switch-box span.switch-inner:before {
+div.switch-box label.switch-label span.switch-inner:before {
content: "ON";
padding-left: 5px;
background-color: var(--bg-color-gray);
@@ -46,7 +46,7 @@ div.switch-box span.switch-inner:before {
text-align: left;
}
-div.switch-box span.switch-inner:after {
+div.switch-box label.switch-label span.switch-inner:after {
content: "OFF";
padding-right: 5px;
background-color: var(--bg-color-gray);
@@ -54,7 +54,7 @@ div.switch-box span.switch-inner:after {
text-align: right;
}
-div.switch-box span.switch {
+div.switch-box label.switch-label span.switch {
display: block;
width: 15px;
margin: 0px;
diff --git a/web/css/windows.css b/web/css/windows.css
index 56f06106..68351896 100644
--- a/web/css/windows.css
+++ b/web/css/windows.css
@@ -67,7 +67,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-close {
+ div.window div.window-header button.window-button-close {
height: 40px !important;
}
}
diff --git a/web/js/ui.js b/web/js/ui.js
index 754e80b0..ff19cf25 100644
--- a/web/js/ui.js
+++ b/web/js/ui.js
@@ -155,7 +155,7 @@ function Ui() {
var all_hidden = true;
__menu_items.forEach(function(el_item) {
- var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+ var el_menu = el_item.parentElement.querySelector(".menu-item-content");
if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
el_item.focus();
el_item.classList.add("menu-item-selected");
@@ -184,7 +184,7 @@ function Ui() {
var __closeAllMenues = function() {
document.onkeyup = null;
__menu_items.forEach(function(el_item) {
- var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+ var el_menu = el_item.parentElement.querySelector(".menu-item-content");
el_item.classList.remove("menu-item-selected");
el_menu.style.visibility = "hidden";
});
diff --git a/web/kvm.html b/web/kvm.html
index 8df1b83d..27c23a86 100644
--- a/web/kvm.html
+++ b/web/kvm.html
@@ -42,7 +42,7 @@
<script>window.onload = main;</script>
</head>
-<body>
+<body class="body-no-select">
<div id="bad-browser-modal" class="modal">
<div class="modal-window">
<div class="modal-content">
@@ -66,234 +66,226 @@
<img class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" />
</li>
- <li class="menu-right-actions">
- <div class="menu-dropdown">
- <a class="menu-item" href="#">
- <img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
- <img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
- <img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
- <img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
- System &#8628;
- </a>
- <div data-dont-hide-menu class="menu-dropdown-content">
- <div class="menu-dropdown-content-buttons">
- <button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
- <hr>
- <button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
- <button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
- <button data-force-hide-menu id="show-about-button">&bull; Show about</button>
- </div>
- <hr>
- <div class="menu-dropdown-content-text">
- Stream quality: <span id="stream-quality-value">80%</span>
- <div class="stream-slider-box">
- <input disabled type="range" id="stream-quality-slider" class="slider" />
- </div>
- </div>
+ <li class="menu-right-items">
+ <a class="menu-item" href="#">
+ <img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
+ <img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
+ <img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
+ <img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
+ System &#8628;
+ </a>
+ <div data-dont-hide-menu class="menu-item-content">
+ <div class="menu-item-content-buttons">
+ <button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
<hr>
- <div class="menu-dropdown-content-text">
- Stream FPS: <span id="stream-desired-fps-value">30</span>
- <div class="stream-slider-box">
- <input disabled type="range" id="stream-desired-fps-slider" class="slider" />
- </div>
- </div>
- <hr>
- <div class="menu-dropdown-content-text">
- Stream size: <span id="stream-size-value">100%</span>
- <div class="stream-slider-box">
- <input type="range" id="stream-size-slider" class="slider" />
- </div>
+ <button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
+ <button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
+ <button data-force-hide-menu id="show-about-button">&bull; Show about</button>
+ </div>
+ <hr>
+ <div class="menu-item-content-text">
+ Stream quality: <span id="stream-quality-value">80%</span>
+ <div class="stream-slider-box">
+ <input disabled type="range" id="stream-quality-slider" class="slider" />
</div>
- <hr>
- <div class="menu-dropdown-content-text">
- <table id="stream-auto-resize-box"><tr>
- <td>Auto-resize stream:</td>
- <td align="right">
- <div class="switch-box">
- <input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked />
- <label class="switch-label" for="stream-auto-resize-checkbox">
- <span class="switch-inner"></span>
- <span class="switch"></span>
- </label>
- </div>
- </td>
- </tr></table>
+ </div>
+ <hr>
+ <div class="menu-item-content-text">
+ Stream FPS: <span id="stream-desired-fps-value">30</span>
+ <div class="stream-slider-box">
+ <input disabled type="range" id="stream-desired-fps-slider" class="slider" />
</div>
- <div class="menu-dropdown-content-buttons">
- <hr>
- <button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
- <button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
- <button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
+ </div>
+ <hr>
+ <div class="menu-item-content-text">
+ Stream size: <span id="stream-size-value">100%</span>
+ <div class="stream-slider-box">
+ <input type="range" id="stream-size-slider" class="slider" />
</div>
+ </div>
+ <hr>
+ <div class="menu-item-content-text">
+ <table id="stream-auto-resize-box"><tr>
+ <td>Auto-resize stream:</td>
+ <td align="right">
+ <div class="switch-box">
+ <input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked />
+ <label class="switch-label" for="stream-auto-resize-checkbox">
+ <span class="switch-inner"></span>
+ <span class="switch"></span>
+ </label>
+ </div>
+ </td>
+ </tr></table>
+ </div>
+ <div class="menu-item-content-buttons">
<hr>
- <div class="menu-dropdown-content-buttons">
- <button data-force-hide-menu id="open-log-button">&bull; Open log</button>
- </div>
+ <button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
+ <button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
+ <button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
+ </div>
+ <hr>
+ <div class="menu-item-content-buttons">
+ <button data-force-hide-menu id="open-log-button">&bull; Open log</button>
</div>
</div>
</li>
- <li class="menu-right-actions">
- <div class="menu-dropdown">
- <a class="menu-item" href="#">
- <img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
- <img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
- ATX &#8628;
- </a>
- <div class="menu-dropdown-content menu-dropdown-content-buttons">
- <button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
- <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
- <hr>
- <button disabled id="atx-reset-button">&bull; Click Reset</button>
- </div>
+ <li class="menu-right-items">
+ <a class="menu-item" href="#">
+ <img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
+ <img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
+ ATX &#8628;
+ </a>
+ <div class="menu-item-content menu-item-content-buttons">
+ <button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
+ <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
+ <hr>
+ <button disabled id="atx-reset-button">&bull; Click Reset</button>
</div>
</li>
- <li class="menu-right-actions">
- <div class="menu-dropdown">
- <a class="menu-item" href="#">
- <img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
- Mass Storage &#8628;
- </a>
- <div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content">
- <div id="msd-not-in-operate" class="msd-message">
- <div class="menu-dropdown-content-text">
- <table>
- <tr>
- <td><img src="svg/warning.svg" /></td>
- <td><b>Mass Storage Device is not operational</b></td>
- </tr>
- </table>
- </div>
- <hr>
+ <li class="menu-right-items">
+ <a class="menu-item" href="#">
+ <img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
+ Mass Storage &#8628;
+ </a>
+ <div data-dont-hide-menu id="msd-menu" class="menu-item-content">
+ <div id="msd-not-in-operate" class="msd-message">
+ <div class="menu-item-content-text">
+ <table>
+ <tr>
+ <td><img src="svg/warning.svg" /></td>
+ <td><b>Mass Storage Device is not operational</b></td>
+ </tr>
+ </table>
</div>
+ <hr>
+ </div>
- <div id="msd-current-image-broken" class="msd-message">
- <div class="menu-dropdown-content-text">
- <table>
- <tr>
- <td><img src="svg/warning.svg" /></td>
- <td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td>
- </tr>
- </table>
- </div>
- <hr>
+ <div id="msd-current-image-broken" class="msd-message">
+ <div class="menu-item-content-text">
+ <table>
+ <tr>
+ <td><img src="svg/warning.svg" /></td>
+ <td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td>
+ </tr>
+ </table>
</div>
+ <hr>
+ </div>
- <div id="msd-another-another-user-uploads" class="msd-message">
- <div class="menu-dropdown-content-text">
- <table>
- <tr>
- <td><img src="svg/info.svg" /></td>
- <td><b>Another user uploads an image</b></td>
- </tr>
- </table>
- </div>
- <hr>
+ <div id="msd-another-another-user-uploads" class="msd-message">
+ <div class="menu-item-content-text">
+ <table>
+ <tr>
+ <td><img src="svg/info.svg" /></td>
+ <td><b>Another user uploads an image</b></td>
+ </tr>
+ </table>
</div>
-
- <table class="msd-info">
- <tr>
- <td>Status: </td>
- <td id="msd-status" class="msd-info-value"></td>
- </tr>
- </table>
<hr>
+ </div>
+
+ <table class="msd-info">
+ <tr>
+ <td>Status: </td>
+ <td id="msd-status" class="msd-info-value"></td>
+ </tr>
+ </table>
+ <hr>
+ <table class="msd-info">
+ <tr>
+ <td>Current image:</td>
+ <td id="msd-current-image-name" class="msd-info-value"></td>
+ </tr>
+ <tr>
+ <td>Image size:</td>
+ <td id="msd-current-image-size" class="msd-info-value"></td>
+ </tr>
+ <tr>
+ <td>Storage size:</td>
+ <td id="msd-storage-size" class="msd-info-value"></td>
+ </tr>
+ </table>
+ <hr>
+
+ <input type="file" id="msd-select-new-image-file" class="msd-message" />
+ <div class="menu-item-content-buttons buttons-row">
+ <button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
+ <button disabled id="msd-upload-new-image-button" class="row25">Start</button>
+ <button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
+ </div>
+ <hr>
+
+ <div id="msd-new-image" class="msd-message">
<table class="msd-info">
<tr>
- <td>Current image:</td>
- <td id="msd-current-image-name" class="msd-info-value"></td>
+ <td>New name:</td>
+ <td id="msd-new-image-name" class="msd-info-value"></td>
</tr>
<tr>
- <td>Image size:</td>
- <td id="msd-current-image-size" class="msd-info-value"></td>
- </tr>
- <tr>
- <td>Storage size:</td>
- <td id="msd-storage-size" class="msd-info-value"></td>
+ <td>Upload size:</td>
+ <td id="msd-new-image-size" class="msd-info-value"></td>
</tr>
</table>
<hr>
-
- <input type="file" id="msd-select-new-image-file" class="msd-message" />
- <div class="menu-dropdown-content-buttons buttons-row">
- <button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
- <button disabled id="msd-upload-new-image-button" class="row25">Start</button>
- <button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
- </div>
- <hr>
-
- <div id="msd-new-image" class="msd-message">
- <table class="msd-info">
- <tr>
- <td>New name:</td>
- <td id="msd-new-image-name" class="msd-info-value"></td>
- </tr>
- <tr>
- <td>Upload size:</td>
- <td id="msd-new-image-size" class="msd-info-value"></td>
- </tr>
- </table>
- <hr>
- <div class="menu-dropdown-content-text">
- <div id="msd-progress" class="progress">
- <span id="msd-progress-value" class="progress-value"></span>
- </div>
+ <div class="menu-item-content-text">
+ <div id="msd-progress" class="progress">
+ <span id="msd-progress-value" class="progress-value"></span>
</div>
- <hr>
</div>
+ <hr>
+ </div>
- <div class="menu-dropdown-content-buttons buttons-row">
- <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
- <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
- </div>
+ <div class="menu-item-content-buttons buttons-row">
+ <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
+ <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
</div>
</div>
</li>
- <li class="menu-right-actions">
- <div class="menu-dropdown">
- <a class="menu-item" href="#">
- <img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
- Shortcuts &#8628;
- </a>
- <div data-dont-hide-menu class="menu-dropdown-content">
- <div class="menu-dropdown-content-buttons">
- <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
- <hr>
- <button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
- <hr>
- <div class="buttons-row">
- <button data-force-hide-menu data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>
- <button data-force-hide-menu data-shortcut="MetaLeft" class="row50">&bull; Left Win</button>
- </div>
- <hr>
- <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button>
- <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button>
- <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button>
- <button data-force-hide-menu data-shortcut="MetaLeft Space">&bull; Win+Space</button>
- <hr>
- <button data-force-hide-menu data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
- <button data-force-hide-menu data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
- <button data-force-hide-menu data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
- <button data-force-hide-menu data-shortcut="AltLeft F4">&bull; Alt+F4</button>
- <hr>
- <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
- </div>
+ <li class="menu-right-items">
+ <a class="menu-item" href="#">
+ <img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
+ Shortcuts &#8628;
+ </a>
+ <div data-dont-hide-menu class="menu-item-content">
+ <div class="menu-item-content-buttons">
+ <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
<hr>
- <div class="menu-dropdown-content-text">
- &darr; Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup>
- </div>
+ <button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
<hr>
- <div class="menu-dropdown-content-buttons buttons-row">
- <button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
- <button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
- <button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
- <button data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button>
- <button data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button>
- <button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button>
+ <div class="buttons-row">
+ <button data-force-hide-menu data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>
+ <button data-force-hide-menu data-shortcut="MetaLeft" class="row50">&bull; Left Win</button>
</div>
+ <hr>
+ <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button>
+ <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button>
+ <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button>
+ <button data-force-hide-menu data-shortcut="MetaLeft Space">&bull; Win+Space</button>
+ <hr>
+ <button data-force-hide-menu data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
+ <button data-force-hide-menu data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
+ <button data-force-hide-menu data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
+ <button data-force-hide-menu data-shortcut="AltLeft F4">&bull; Alt+F4</button>
+ <hr>
+ <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
+ </div>
+ <hr>
+ <div class="menu-item-content-text">
+ &darr; Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup>
+ </div>
+ <hr>
+ <div class="menu-item-content-buttons buttons-row">
+ <button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
+ <button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
+ <button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
+ <button data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button>
+ <button data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button>
+ <button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button>
</div>
</div>
</li>