Moved non-baseline features to @support blocks to suppress unuseful errors from new ESLint feat to avoid hacking config (eslint/css#33) ↞ [auto-sync from https://github.com/KudoAI/chatgpt.js-chrome-starter]

Author: kudo-sync-bot

starters/chrome/extension/popup/style.css

@@ -1,12 +1,12 @@
 /* General size */
 html { height: fit-content ; min-height: 89px }
-body { width: max-content ; margin: 0 ; overflow: clip }
+body { width: max-content ; margin: 0 }
 
 /* General font */
 body, button, input, select, textarea {
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
         "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif ;
-    font-size: .905rem ; user-select: none
+    font-size: .905rem
 }
 a { color: #999 ; text-decoration: none }
 a:focus, a:hover { text-decoration: underline ; color: inherit }
@@ -49,7 +49,7 @@ a:focus, a:hover { text-decoration: underline ; color: inherit }
     display: flex ; min-height: 2rem ; padding: 0 14px 0 2px ; white-space: nowrap ; font-size: 91%
 }
 .menu-icon { padding: 8px }
-.menu-area:focus, .menu-area:hover { background: rgb(100,149,237) ; cursor: pointer } /* add hover color/cursor */    
+.menu-area:focus, .menu-area:hover { background: rgb(100,149,237) } /* add hover color/cursor */    
 .menu-item:hover span:not(.slider) { filter: invert(1) } /* invert setting labels on hover */
 .menu-item > label > .slider { transform: scale(0.95) ; top: 1px } /* make child toggles smaller */
 .menu-prompt { margin-left: 2px } /* align non-toggle items */
@@ -58,7 +58,7 @@ a:focus, a:hover { text-decoration: underline ; color: inherit }
 .toggle-switch input[type="checkbox"] { display: none } /* hide checkbox from toggles */
 .toggle-switch .slider { /* style sliders */
     background-color: white;  display: block; border: 1px solid black; border-radius: 7px ; 
-    position: relative ; top: 0.05rem ; height: 10px ; width: 18px ; cursor: pointer ;
+    position: relative ; top: 0.05rem ; height: 10px ; width: 18px ;
 }
 .toggle-switch .slider::before { /* style slider knobs */
     position: absolute ; height: 0.625rem ; width: 0.625rem ; left: -0.04rem ; top: -0.05rem ;
@@ -70,8 +70,14 @@ a:focus, a:hover { text-decoration: underline ; color: inherit }
 /* Footer */
 footer { font-size: 12px ; text-align: center ; color: #999 ; background: #f5f5f5 ; height: 40px ; line-height: 40px }
 footer > .menu-icon { position: absolute ; bottom: -10px ; opacity: 0.7 }
-.chatgpt-js { position: absolute ; bottom: -.25rem ; left: 0.7rem ; cursor: pointer }
+.chatgpt-js { position: absolute ; bottom: -.25rem ; left: 0.7rem }
 
 /* Master toggle effects */
 .disabled { opacity: 0.3 ; pointer-events: none }
 .enabled { opacity: 1 }
+
+/* Non-baseline features */
+@supports (overflow: clip) { body { overflow: clip }}
+@supports (user-select: none) { body, button, input, select, textarea { user-select: none }}
+@supports (cursor: pointer) {
+    .menu-area:focus, .menu-area:hover, .toggle-switch .slider, .chatgpt-js { cursor: pointer }}