extra/webapps/help/search.css

   1 .tabs {
   2   display: flex;
   3   flex-wrap: wrap;
   4   margin: 0 auto 10px;
   5 }
   6
   7 .radiotab {
   8   position: absolute;
   9   opacity: 0;
  10 }
  11
  12 .label {
  13   width: 100%;
  14   padding: 5px;
  15   cursor: pointer;
  16   font-weight: bold;
  17   font-size: 14pt;
  18   color: #7f7f7f;
  19   text-align: center;
  20   border: 1px solid #ccc;
  21 }
  22
  23 .label:hover {
  24   background: #d8d8d8;
  25   border: 1px solid #ccc;
  26 }
  27
  28 .radiotab:checked + .label {
  29   border: 1px solid #ccc;
  30   background: #f0f0f0;
  31   color: black;
  32 }
  33
  34 .panel {
  35   display: none;
  36   width: 100%;
  37   border-top: 1px solid #ccc;
  38 }
  39
  40 .radiotab:checked + .label + .panel {
  41   display: block;
  42 }
  43
  44 @media (prefers-color-scheme: dark) {
  45
  46   .panel {
  47     border-top: 1px solid #666;
  48   }
  49
  50   .label {
  51     color: #bdc1c6;
  52     border: 1px solid #666;
  53   }
  54
  55   .label:hover {
  56     background: #373e48;
  57     border: 1px solid #666;
  58   }
  59
  60   .radiotab:checked + .label {
  61     border: 1px solid #666;
  62     background: #373e48;
  63     color: white;
  64   }
  65 }
  66
  67 @media (max-width: 599px) {
  68
  69   .panel {
  70     border-top: none;
  71   }
  72 }
  73
  74 @media (min-width: 600px) {
  75
  76   .panel {
  77     order: 99;
  78   }
  79
  80   .label {
  81     width: 33.33%;
  82     border: 1px solid transparent;
  83     border-bottom: none;
  84   }
  85
  86   .label:hover {
  87     border-bottom: none;
  88   }
  89
  90   .radiotab:checked + .label {
  91     border-bottom: none;
  92   }
  93 }