commit a91143ea3cf6dc5b45ef76fe7c43becfc1b8ff25
parent e6f37eaa1f6a5966be82ae703f0d8e36b97a584d
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Mon, 31 Mar 2025 12:53:58 -0300
show hover effects only if mouse is used
Diffstat:
| M | data/style.css | | | 60 | +++++++++++++++++++++++++++++++++++++----------------------- |
1 file changed, 37 insertions(+), 23 deletions(-)
diff --git a/data/style.css b/data/style.css
@@ -28,6 +28,14 @@ td {
width: 100%;
}
+a, a:visited {
+ color: #00E;
+}
+
+h1 {
+ font-size: 36px;
+}
+
#main-toggle-div {
margin-bottom: 0.5em;
cursor: pointer;
@@ -66,10 +74,6 @@ td {
background-color: white;
}
-#from-time:hover, #to-time:hover {
- border-color: #828282;
-}
-
#timer-save-div {
padding: 18px 30px 30px 30px;
text-align: center;
@@ -94,8 +98,20 @@ td {
border: none;
}
-#timer-save:hover {
- border-color: #828282;
+@media (hover: hover) and (pointer: fine) {
+ #main-toggle-div:hover #main-checkbox,
+ #timer-enable:hover #timer-checkbox,
+ #from-time:hover, #to-time:hover,
+ #main-checkbox:hover, #timer-checkbox:hover,
+ #timer-save:hover {
+ border: 1px solid #999999;
+ }
+}
+
+#from-time:focus-visible,
+#to-time:focus-visible {
+ border: 1px solid #999999;
+ outline: none;
}
#buttons-div {
@@ -106,11 +122,6 @@ td {
user-select: none;
}
-hr {
- margin-top: 0;
- margin-bottom: 0;
-}
-
#info-div {
padding: 1.75em 1em 1em 1em;
font-size: 16px;
@@ -128,14 +139,6 @@ hr {
}
}
-a, a:visited {
- color: #00E;
-}
-
-h1 {
- font-size: 36px;
-}
-
#save-button {
padding: 0.25em 0 0 0;
text-align: right;
@@ -167,10 +170,6 @@ h1 {
}
}
-#main-checkbox:hover, #timer-checkbox:hover {
- border: 1px solid #828282;
-}
-
#main-checkbox[checked="1"], #timer-checkbox[checked="1"] {
background-color: #3584e4;
svg {
@@ -243,4 +242,19 @@ h1 {
background-color: #56C8FF;
color: #004263;
}
+
+ @media (hover: hover) and (pointer: fine) {
+ #main-toggle-div:hover #main-checkbox,
+ #timer-enable:hover #timer-checkbox,
+ #from-time:hover, #to-time:hover,
+ #main-checkbox:hover, #timer-checkbox:hover,
+ #timer-save:hover {
+ border: 1px solid #828282;
+ }
+ }
+
+ #from-time:focus-visible,
+ #to-time:focus-visible {
+ border: 1px solid #828282;
+ }
}
