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 }
  38
  39 .radiotab:checked + .label + .panel {
  40   display: block;
  41 }
  42
  43 @media (prefers-color-scheme: dark) {
  44
  45   .label {
  46     color: #bdc1c6;
  47     border: 1px solid #666;
  48     border-bottom: none;
  49   }
  50
  51   .label:hover {
  52     background: #373e48;
  53     border: 1px solid #666;
  54   }
  55
  56   .radiotab:checked + .label {
  57     border: 1px solid #666;
  58     background: #373e48;
  59     color: white;
  60   }
  61 }
  62
  63 @media (min-width: 600px) {
  64
  65   .panel {
  66     order: 99;
  67     border-top: 1px solid #ccc;
  68   }
  69
  70   .label {
  71     width: 33.33%;
  72     border: 1px solid transparent;
  73     border-bottom: none;
  74   }
  75
  76   .label:hover {
  77     border-bottom: none;
  78   }
  79
  80   .radiotab:checked + .label {
  81     border-bottom: none;
  82   }
  83 }
  84
  85 @media (min-width: 600px and prefers-color-scheme: dark) {
  86
  87   .panel {
  88     border-top: 1px solid #666;
  89   }
  90 }