summaryrefslogtreecommitdiff
path: root/web/css
diff options
context:
space:
mode:
Diffstat (limited to 'web/css')
-rw-r--r--web/css/about.css5
-rw-r--r--web/css/keyboard.css18
-rw-r--r--web/css/leds.css36
-rw-r--r--web/css/main.css9
-rw-r--r--web/css/mobile.css36
-rw-r--r--web/css/modals.css19
-rw-r--r--web/css/msd.css31
-rw-r--r--web/css/progress.css23
-rw-r--r--web/css/windows.css24
9 files changed, 101 insertions, 100 deletions
diff --git a/web/css/about.css b/web/css/about.css
index 0db2e467..906f4167 100644
--- a/web/css/about.css
+++ b/web/css/about.css
@@ -4,10 +4,7 @@ div#about {
user-select: text;
}
-div#about
-td#about-version-kvmd,
-td#about-version-python,
-td#about-version-platform {
+div#about td.version {
font-weight: bold;
}
diff --git a/web/css/keyboard.css b/web/css/keyboard.css
index ce7468d0..cb42f2fa 100644
--- a/web/css/keyboard.css
+++ b/web/css/keyboard.css
@@ -105,3 +105,21 @@ div#keyboard-desktop {
div#keyboard-mobile {
display: none;
}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ /* iPad */
+ div.keyboard {
+ zoom: 1.28 !important;
+ }
+
+ div.keyboard div.key:hover, div.modifier:hover {
+ color: var(--fg-color-normal);
+ background-color: var(--bg-color-gray);
+ }
+
+ div#keyboard-desktop {
+ display: none !important;
+ }
+ div#keyboard-mobile {
+ display: block !important;
+ }
+}
diff --git a/web/css/leds.css b/web/css/leds.css
index ba8559b3..fe23a434 100644
--- a/web/css/leds.css
+++ b/web/css/leds.css
@@ -21,49 +21,43 @@
--led-spin-fast: spin 2s linear infinite;
}
-img.led-on {
- -webkit-filter: var(--led-filter-green);
- filter: var(--led-filter-green);
-}
-
-img.led-off {
+img.led-gray {
-webkit-filter: var(--led-filter-gray);
filter: var(--led-filter-gray);
}
-img.led-hdd-busy {
- -webkit-filter: var(--led-filter-red);
- filter: var(--led-filter-red);
+img.led-green {
+ -webkit-filter: var(--led-filter-green);
+ filter: var(--led-filter-green);
}
-img.led-msd-writing,
-img.led-hid-pak-typing {
- -webkit-filter: var(--led-filter-yellow);
- filter: var(--led-filter-yellow);
- -webkit-animation: var(--led-spin-fast);
- animation: var(--led-spin-fast);
+img.led-red {
+ -webkit-filter: var(--led-filter-red);
+ filter: var(--led-filter-red);
}
-img.led-link-connecting {
+img.led-yellow {
-webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow);
}
-img.led-fan-on {
+img.led-green-rotating-medium {
-webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green);
-webkit-animation: var(--led-spin-medium);
animation: var(--led-spin-medium);
}
-img.led-fan-slow {
+img.led-yellow-rotating-slow {
-webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-slow);
animation: var(--led-spin-slow);
}
-img.led-fan-fail {
- -webkit-filter: var(--led-filter-red);
- filter: var(--led-filter-red);
+img.led-yellow-rotating-fast {
+ -webkit-filter: var(--led-filter-yellow);
+ filter: var(--led-filter-yellow);
+ -webkit-animation: var(--led-spin-fast);
+ animation: var(--led-spin-fast);
}
diff --git a/web/css/main.css b/web/css/main.css
index 41730777..3979363b 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -15,6 +15,7 @@ a {
color: var(--fg-color-normal);
}
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+ /* If we have a mouse cursor */
a:hover {
text-decoration: underline;
}
@@ -38,6 +39,7 @@ button, select {
cursor: pointer;
}
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+ /* If we have a mouse cursor */
button:enabled:hover, select:enabled:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-dark) !important;
@@ -50,6 +52,7 @@ button, select {
}
}
@media (hover: none) {
+ /* If we DON'T have a mouse cursor */
button:active, select:active {
color: var(--fg-color-intensive);
background-color: var(--bg-color-dark);
@@ -142,6 +145,12 @@ ul#ctl li a.ctl-item {
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;
diff --git a/web/css/mobile.css b/web/css/mobile.css
index 1e5df8fd..eeaaf0e6 100644
--- a/web/css/mobile.css
+++ b/web/css/mobile.css
@@ -4,26 +4,6 @@
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- div.window {
- padding-top: 45px !important;
- }
- div.window-header {
- height: 35px !important;
- }
- div.window-grab {
- height: 35px !important;
- }
- button.window-button-close {
- height: 40px !important;
- }
-
- ul#ctl li a.ctl-item:hover:not(.active) {
- background-color: var(--bg-color-ctl) !important;
- }
-
- div.keyboard {
- zoom: 1.28 !important;
- }
div#keyboard-window {
visibility: visible !important;
padding-top: 9px !important;
@@ -42,16 +22,6 @@
div#keyboard-window-header {
display: none !important
}
- div.keyboard div.key:hover, div.modifier:hover {
- color: var(--fg-color-normal);
- background-color: var(--bg-color-gray);
- }
- div#keyboard-desktop {
- display: none !important;
- }
- div#keyboard-mobile {
- display: block !important;
- }
div#stream-window {
padding-top: 3px !important;
@@ -83,11 +53,7 @@
height: 45px !important;
}
- div.modal-buttons button {
- height: 50px !important;
- }
-
- @supports (-webkit-appearance:none) {
+ @supports (-webkit-appearance: none) {
input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
diff --git a/web/css/modals.css b/web/css/modals.css
index 4d49815e..955795bb 100644
--- a/web/css/modals.css
+++ b/web/css/modals.css
@@ -10,7 +10,7 @@ div.modal {
z-index: 2147483647;
}
-div.modal-window {
+div.modal div.modal-window {
display: table;
outline: none;
margin: 15% auto;
@@ -22,31 +22,36 @@ div.modal-window {
background-color: var(--bg-color-light);
padding: 0;
}
-div.modal-window:focus {
+div.modal div.modal-window:focus {
border: var(--border-intensive-2px) !important;
}
-
-div.modal-header {
+div.modal div.modal-window div.modal-header {
text-align: center;
font-weight: bold;
padding: 3px 9px 3px 9px;
border-bottom: var(--border-normal-thin);
}
-div.modal-content {
+div.modal div.modal-window div.modal-content {
max-width: 500px;
max-height: 500px;
padding: 16px 9px 16px 9px;
}
-div.modal-buttons {
+div.modal div.modal-window div.modal-buttons {
border-top: var(--border-dark-thin);
margin: 0;
padding: 0;
font-size: 0;
}
-div.modal-buttons button {
+div.modal div.modal-window div.modal-buttons button {
height: 40px;
}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+ /* iPad vertical */
+ div.modal-buttons button {
+ height: 50px !important;
+ }
+}
diff --git a/web/css/msd.css b/web/css/msd.css
index 91c6a280..46636f03 100644
--- a/web/css/msd.css
+++ b/web/css/msd.css
@@ -18,36 +18,9 @@ table.msd-info {
margin: 0 10px 0 10px;
font-size: 12px;
}
-table.msd-info
-td#msd-status,
-td#msd-current-image-name,
-td#msd-current-image-size,
-td#msd-storage-size,
-td#msd-new-image-name,
-td#msd-new-image-size {
+
+table.msd-info td.msd-info-value {
font-weight: bold;
max-width: 310px;
overflow: hidden;
}
-
-div#msd-progress {
- background-color: var(--bg-color-selected);
- height: 1.5em;
- width: 100%;
- position: relative;
-}
-div#msd-progress:before {
- color: var(--fg-color-intensive);
- content: attr(data-label);
- font-size: 0.8em;
- position: absolute;
- text-align: center;
- top: 4px;
- left: 0;
- right: 0;
-}
-div#msd-progress span#msd-progress-value {
- background-color: var(--bg-color-intensive);
- display: inline-block;
- height: 100%;
-}
diff --git a/web/css/progress.css b/web/css/progress.css
new file mode 100644
index 00000000..37eeb380
--- /dev/null
+++ b/web/css/progress.css
@@ -0,0 +1,23 @@
+div.progress {
+ background-color: var(--bg-color-selected);
+ height: 1.5em;
+ width: 100%;
+ position: relative;
+}
+
+div.progress:before {
+ color: var(--fg-color-intensive);
+ content: attr(data-label);
+ font-size: 0.8em;
+ position: absolute;
+ text-align: center;
+ top: 4px;
+ left: 0;
+ right: 0;
+}
+
+div.progress span.progress-value {
+ background-color: var(--bg-color-intensive);
+ display: inline-block;
+ height: 100%;
+}
diff --git a/web/css/windows.css b/web/css/windows.css
index 5c183f07..56f06106 100644
--- a/web/css/windows.css
+++ b/web/css/windows.css
@@ -15,7 +15,7 @@ div.window:focus {
border: var(--border-intensive-2px) !important;
}
-div.window-header {
+div.window div.window-header {
overflow: hidden;
top: 0;
left: 0;
@@ -28,7 +28,7 @@ div.window-header {
border-bottom: var(--border-normal-thin);
}
-div.window-grab {
+div.window div.window-header div.window-grab {
overflow: hidden;
top: 0;
left: 0;
@@ -39,13 +39,13 @@ div.window-grab {
padding: 3px 0 2px 20px;
}
-div.window-header-grabbed {
+div.window div.window-header-grabbed {
color: var(--fg-color-intensive);
background-color: var(--bg-color-intensive);
border-bottom: var(--border-intensive-thin);
}
-button.window-button-close {
+div.window div.window-header button.window-button-close {
position: absolute;
top: -2px;
right: -6px;
@@ -55,3 +55,19 @@ button.window-button-close {
color: var(--fg-color-inactive);
display: inline-block;
}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ /* iPad */
+ div.window {
+ padding-top: 45px !important;
+ }
+ div.window div.window-header {
+ height: 35px !important;
+ }
+ div.window div.window-header div.window-grab {
+ height: 35px !important;
+ }
+ div.window div.window-header button.window-button-close {
+ height: 40px !important;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-24 05:49:43 +0000