src/webui/www/private/css/vanillaSelectBox.css

   1 .hidden-search {
   2     display: none !important;
   3 }
   4
   5 li[data-parent].closed {
   6     display: none !important;
   7 }
   8
   9 li[data-parent].open:not(.hidden-search) {
  10     display: block !important;
  11 }
  12
  13 .vsb-menu {
  14     background-clip: padding-box;
  15     background-color: var(--color-background-default);
  16     border: 1px solid var(--color-border-default);
  17     cursor: pointer;
  18     display: block;
  19     font-size: 11px;
  20     position: absolute;
  21     visibility: hidden;
  22     z-index: 1000; /*Don't change*/
  23 }
  24
  25 .vsb-js-search-zone {
  26     min-height: 1.8em;
  27     padding: 2px;
  28     position: absolute;
  29     width: 80%;
  30     z-index: 1001; /*Don't change*/
  31 }
  32
  33 .vsb-js-search-zone input {
  34     border-radius: 4px;
  35     height: 25px !important;
  36     margin-left: 2px;
  37     width: 96%;
  38 }
  39
  40 .vsb-main {
  41     display: inline-block;
  42     position: relative;
  43     text-align: left;
  44     vertical-align: top; /*Don't change*/
  45 }
  46
  47 .vsb-menu ul {
  48     cursor: pointer;
  49     list-style: none;
  50     margin: 0;
  51     overflow-y: auto;
  52     padding: 0;
  53     user-select: none;
  54     white-space: nowrap;
  55 }
  56
  57 li.disabled {
  58     background-color: #999;
  59     cursor: not-allowed;
  60     opacity: 0.3;
  61 }
  62
  63 li.overflow {
  64     background-color: #999;
  65     cursor: not-allowed;
  66     opacity: 0.3;
  67 }
  68
  69 li.short {
  70     overflow: hidden;
  71     text-overflow: ellipsis;
  72 }
  73
  74 .vsb-main button {
  75     border: 1px solid var(--color-border-default);
  76     border-radius: 4px;
  77     min-width: 120px;
  78     padding: 6px 12px;
  79     text-align: left;
  80     width: 100%;
  81     z-index: 1;
  82 }
  83
  84 .vsb-main button.disabled {
  85     cursor: not-allowed;
  86     opacity: 0.65;
  87 }
  88
  89 .vsb-main .title {
  90     margin-right: 6px;
  91     user-select: none;
  92 }
  93
  94 .vsb-main ul {
  95     white-space: nowrap;
  96 }
  97
  98 .vsb-menu li {
  99     font-size: 12px;
 100     padding: 4px 26px;
 101 }
 102
 103 .vsb-menu li:hover {
 104     background-color: var(--color-background-hover);
 105     color: var(--color-text-white);
 106 }
 107
 108 .vsb-menu li.grouped-option b {
 109     display: inline-block;
 110     margin-left: 10px;
 111     transform: translate(-18px);
 112 }
 113
 114 .vsb-menu li.grouped-option.open span {
 115     border-radius: 2px;
 116     display: inline-block;
 117     font-size: inherit;
 118     height: 8px;
 119     margin-top: -2px;
 120     transform: translate(-38px) rotate(45deg);
 121     width: 8px;
 122 }
 123
 124 .vsb-menu li.grouped-option.closed span {
 125     border-radius: 2px;
 126     display: inline-block;
 127     font-size: inherit;
 128     height: 8px;
 129     transform: translate(-38px) rotate(-45deg);
 130     width: 8px;
 131 }
 132
 133 .vsb-menu li.grouped-option i {
 134     border: 1px solid;
 135     border-radius: 3px;
 136     display: inline-block;
 137     float: left;
 138     font-size: inherit;
 139     font-weight: bold;
 140     height: 11px;
 141     margin-left: 22px;
 142     margin-right: 2px;
 143     margin-top: 0px;
 144     padding: 1px 3px 2px;
 145     width: 8px;
 146 }
 147
 148 .vsb-menu li.grouped-option.checked i::after {
 149     content: "";
 150     display: inline-block;
 151     float: left;
 152     font-size: inherit;
 153     height: 8px;
 154     margin-left: 0px;
 155     transform: rotate(45deg);
 156     width: 5px;
 157 }
 158
 159 .vsb-menu :not(.multi) li.active {
 160     margin-left: 7px;
 161 }
 162
 163 .vsb-menu :not(.multi) li.active::before {
 164     border-bottom: 3px solid var(--color-border-blue);
 165     border-radius: 2px;
 166     border-right: 3px solid var(--color-border-blue);
 167     content: "";
 168     display: inline-block;
 169     font-size: inherit;
 170     height: 10px;
 171     margin-left: -18px;
 172     transform: rotate(45deg);
 173     width: 5px;
 174 }
 175
 176 .vsb-menu .multi li.grouped-option {
 177     padding-left: 5px;
 178 }
 179
 180 .vsb-menu .multi li.grouped-option:hover {
 181     color: rgb(52 31 112);
 182     font-weight: bold;
 183     text-decoration: underline;
 184 }
 185
 186 .vsb-menu .multi li:not(.grouped-option)::before {
 187     background: var(--color-background-popup);
 188     border: 1px solid;
 189     border-radius: 3px;
 190     content: "";
 191     display: inline-block;
 192     float: left;
 193     font-size: inherit;
 194     font-weight: bold;
 195     margin-left: -22px;
 196     margin-right: 2px;
 197     margin-top: 0px;
 198     padding: 7px;
 199 }
 200
 201 .vsb-menu .multi li:not(.grouped-option).active::after {
 202     border-bottom: 3px solid var(--color-border-blue);
 203     border-right: 3px solid var(--color-border-blue);
 204     content: "";
 205     display: inline-block;
 206     float: left;
 207     font-size: inherit;
 208     height: 8px;
 209     margin-left: -18px;
 210     margin-top: 1px;
 211     transform: rotate(45deg);
 212     width: 5px;
 213 }
 214
 215 .caret {
 216     border-left: 4px solid transparent;
 217     border-right: 4px solid transparent;
 218     border-top: 4px dashed;
 219     border-top: 4px solid;
 220     display: inline-block;
 221     height: 0;
 222     margin-left: 2px;
 223     vertical-align: middle;
 224     width: 0;
 225 }
 226
 227 li[data-parent] {
 228     padding-left: 50px !important;
 229 }