webapps.help: tabs on mobile are better

diff --git a/extra/webapps/help/search.css b/extra/webapps/help/search.css
index 58eb0300de5441c8e0da067e59c5a2d277bbf766..e09643efc53ffbda77f83afad10bddaa09c17c5b 100644 (file)
--- a/extra/webapps/help/search.css
+++ b/extra/webapps/help/search.css
@@ -10,37 +10,52 @@
 }
 
 .label {
-  width: 100%;
   padding: 5px;
   cursor: pointer;
   font-weight: bold;
   font-size: 14pt;
   color: #7f7f7f;
   text-align: center;
-  border: 1px solid #ccc;
+  width: 33.33%;
+  border: 1px solid transparent;
+  border-bottom: none;
 }
 
 .label:hover {
   background: #d8d8d8;
   border: 1px solid #ccc;
+  border-bottom: none;
 }
 
 .radiotab:checked + .label {
-  border: 1px solid #ccc;
   background: #f0f0f0;
   color: black;
+  border: 1px solid #ccc;
+  border-bottom: none;
 }
 
 .panel {
   display: none;
   width: 100%;
   border-top: 1px solid #ccc;
+  order: 99;
 }
 
 .radiotab:checked + .label + .panel {
   display: block;
 }
 
+@media (max-width: 599px) {
+
+  .label {
+    width: 30%;
+  }
+
+  .label:nth-of-type(2) {
+    width: 40%;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
 
   .panel {
@@ -63,31 +78,3 @@
     color: white;
   }
 }
-
-@media (max-width: 599px) {
-
-  .panel {
-    border-top: none;
-  }
-}
-
-@media (min-width: 600px) {
-
-  .panel {
-    order: 99;
-  }
-
-  .label {
-    width: 33.33%;
-    border: 1px solid transparent;
-    border-bottom: none;
-  }
-
-  .label:hover {
-    border-bottom: none;
-  }
-
-  .radiotab:checked + .label {
-    border-bottom: none;
-  }
-}