Просмотр исходного кода

Fix nav/icon button hover stuck on mobile by gating under @media (hover: hover)

ZiB 4 месяцев назад
Родитель
Сommit
e997f0fc55
1 измененных файлов с 8 добавлено и 7 удалено
  1. 8 7
      room_cal/vue/calendar.html

+ 8 - 7
room_cal/vue/calendar.html

@@ -89,8 +89,6 @@
       transition: background 0.14s, border-color 0.14s, color 0.14s;
       user-select: none;
     }
-    .nav-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
-
     /* ── Toolbar icon buttons ────────────────────────────────── */
     .icon-btn {
       width: 32px; height: 32px;
@@ -105,17 +103,20 @@
       user-select: none;
       padding: 0;
     }
-    .icon-btn:not(:disabled):hover { background: var(--text); border-color: var(--text); color: var(--bg); }
     .icon-btn:disabled { cursor: default; opacity: 0.45; }
     .icon-btn.is-on { background: var(--selected); border-color: var(--selected); color: #fff; }
-    .icon-btn.is-on:not(:disabled):hover { opacity: 0.82; background: var(--selected); border-color: var(--selected); color: #fff; }
     .icon-btn.is-health-ok    { border-color: #2d7a4f; color: #2d7a4f; }
     .icon-btn.is-health-warn  { border-color: #b07d1a; color: #b07d1a; }
     .icon-btn.is-health-error { border-color: #c04a2a; color: #c04a2a; }
-    .icon-btn.is-health-ok:not(:disabled):hover    { background: #2d7a4f; border-color: #2d7a4f; color: #fff; }
-    .icon-btn.is-health-warn:not(:disabled):hover  { background: #b07d1a; border-color: #b07d1a; color: #fff; }
-    .icon-btn.is-health-error:not(:disabled):hover { background: #c04a2a; border-color: #c04a2a; color: #fff; }
     .icon-btn.is-health-checking svg { animation: spin 0.7s linear infinite; }
+    @media (hover: hover) {
+      .nav-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
+      .icon-btn:not(:disabled):hover { background: var(--text); border-color: var(--text); color: var(--bg); }
+      .icon-btn.is-on:not(:disabled):hover { opacity: 0.82; background: var(--selected); border-color: var(--selected); color: #fff; }
+      .icon-btn.is-health-ok:not(:disabled):hover    { background: #2d7a4f; border-color: #2d7a4f; color: #fff; }
+      .icon-btn.is-health-warn:not(:disabled):hover  { background: #b07d1a; border-color: #b07d1a; color: #fff; }
+      .icon-btn.is-health-error:not(:disabled):hover { background: #c04a2a; border-color: #c04a2a; color: #fff; }
+    }
 
     /* ── Page layout ─────────────────────────────────────────── */
     .page-layout {