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

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