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   border-bottom: none;
  22 }
  23
  24 .label:hover {
  25   background: #d8d8d8;
  26   border: 1px solid #ccc;
  27   border-bottom: none;
  28 }
  29
  30 .radiotab:checked + .label {
  31   border: 1px solid #ccc;
  32   border-bottom: none;
  33   background: #f0f0f0;
  34   color: black;
  35 }
  36
  37 .panel {
  38   display: none;
  39   width: 100%;
  40   border-top: 1px solid #ccc;
  41 }
  42
  43 .radiotab:checked + .label + .panel {
  44   display: block;
  45 }
  46
  47 @media (prefers-color-scheme: dark) {
  48
  49   .panel {
  50     border-top: 1px solid #666;
  51   }
  52
  53   .label {
  54     color: #bdc1c6;
  55     border: 1px solid #666;
  56     border-bottom: none;
  57   }
  58
  59   .label:hover {
  60     background: #373e48;
  61     border: 1px solid #666;
  62   }
  63
  64   .radiotab:checked + .label {
  65     border: 1px solid #666;
  66     background: #373e48;
  67     color: white;
  68   }
  69 }
  70
  71 @media (min-width: 600px) {
  72
  73   .panel {
  74     order: 99;
  75   }
  76
  77   .label {
  78     width: 33.33%;
  79     border: 1px solid transparent;
  80     border-bottom: none;
  81   }
  82 }