styles/tabs.css

   1 /* Copyright (c) 2018 Maen Artimy */
   2
   3 .tab-list {
   4     list-style: none;
   5     margin: 0px 0px 0px 10px;
   6     padding: 5px 10px 5px 10px;
   7     border-radius: 5px;
   8     background-color: var(--pcolor-2);
   9 }
  10
  11 .tab-control {
  12     cursor: pointer;
  13     padding: 10px;
  14     font-size: 14px;
  15     color: var(--tcolor-4);
  16     display: inline-block;
  17     background-color: var(--tcolor-2);
  18     border: 1px solid var(--tcolor-3);
  19     margin: 2px;
  20     border-radius: 5px;
  21     min-width: 80px;
  22     text-align: center;
  23 }
  24
  25 .tab-control:hover {
  26     background-color: var(--tcolor-0);
  27     color: white;
  28 }
  29
  30 .tab-control.active {
  31     color: white;
  32     background-color: var(--tcolor-3);
  33 }
  34
  35 .tab-panel {
  36     display: none;
  37     margin-left: 10px;
  38     margin-top: 20px;
  39     overflow-x: hidden;
  40     z-index: 0;
  41 }
  42
  43 .tab-panel.active {
  44     display: inherit;
  45 }
  46
  47 .msgoptions {
  48     margin: 0 0 10px 10px;
  49 }
  50
  51 .msgoptions button {
  52     width: 80px;
  53     padding: 5px 0px;
  54     margin-right: 20px;
  55         background-color: var(--scolor-2);
  56         border: none;
  57         color: var(--white);
  58         cursor: pointer;
  59         border-radius: 4px;
  60     font-weight: bold;
  61 }
  62
  63 /* The container must be positioned relative: */
  64
  65 .cselect {
  66     position: relative;
  67     display: inline;
  68     border: 1px solid var(--scolor-2);
  69     border-radius: 4px;
  70     overflow: hidden;
  71     padding: 2px 2px;
  72 }
  73
  74 .cselect select {
  75     padding: 5px 5px;
  76     border: none;
  77     width: 60px;
  78     box-shadow: none;
  79     background: transparent;
  80     background-image: none;
  81     -webkit-appearance: none;
  82     -moz-appearance: none;
  83     appearance: none;
  84 }
  85