/* ===================================================================== vryno-select.css -- a lets the text run under the chevron on a narrow column; the right padding above reserves the room, and this keeps a long option label from pushing the field wider than its cell. */ text-overflow: ellipsis; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* Firefox draws the option text with a system highlight on focus unless the colour is restated; and the dotted inner focus ring is not this theme's. */ html select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]):-moz-focusring, html select.form-select:not(.form-select-sm):not([multiple]):-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--body-color); } html select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]):focus, html select.form-select:not(.form-select-sm):not([multiple]):focus { border-color: var(--border-color); background-color: var(--white); outline: 0; box-shadow: none; } html select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]):disabled, html select.form-select:not(.form-select-sm):not([multiple]):disabled { background-color: var(--light); color: var(--gray-500); } /* A select whose current option is the disabled prompt is showing a placeholder, and a placeholder is quieter than a value -- the same distinction the inputs beside it already make. */ html select.select:not(.select2-hidden-accessible).is-placeholder, html select.form-select.is-placeholder { color: var(--gray-500); font-weight: 400; } /* The prompt row inside the open list stays quiet too. */ html select.select > option[value=""], html select.form-select > option[value=""] { color: var(--gray-500); } /* Inside an input group the field must not keep its own outer corners. */ html .input-group > select.select:not(:last-child), html .input-group > select.form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } html .input-group > select.select:not(:first-child), html .input-group > select.form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* A select sitting in a page-form column should fill it, the way the input next to it does -- these forms lay their fields out on a .row/.col grid. */ html .vp-form-card select.select:not(.select2-hidden-accessible):not(.d-none), html .vp-form-card select.form-select:not(.form-select-sm) { width: 100%; } /* --------------------------------------------------------------- dark mode Matching dark-theme-fixes.css's own treatment of .form-control and .form-select, and using its variables rather than new colours, so a select and an input in the same row are the same surface. */ html[data-bs-theme="dark"] select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]), html[data-bs-theme="dark"] select.form-select:not(.form-select-sm):not([multiple]) { background-color: var(--dtf-surface-3); border-color: var(--dtf-border); color: var(--dtf-heading); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9b1c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5.5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-bs-theme="dark"] select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]):focus, html[data-bs-theme="dark"] select.form-select:not(.form-select-sm):not([multiple]):focus { background-color: var(--dtf-surface-3); border-color: var(--primary); color: var(--dtf-heading); } html[data-bs-theme="dark"] select.select:not(.select2-hidden-accessible):not(.d-none):not([multiple]):disabled, html[data-bs-theme="dark"] select.form-select:not(.form-select-sm):not([multiple]):disabled { background-color: var(--dtf-surface-2); color: var(--dtf-muted); } html[data-bs-theme="dark"] select.select.is-placeholder, html[data-bs-theme="dark"] select.form-select.is-placeholder { color: var(--dtf-faint); } /* The open list is painted by the OS from these two properties, so without them a dark page opens a white dropdown. */ html[data-bs-theme="dark"] select.select > option, html[data-bs-theme="dark"] select.form-select > option { background-color: var(--dtf-surface-2); color: var(--dtf-heading); } html[data-bs-theme="dark"] select.select > option[value=""], html[data-bs-theme="dark"] select.form-select > option[value=""] { color: var(--dtf-faint); } /* ============================================================ one chevron Three different arrows could appear in one form: select2 draws a 5px CSS border-triangle, Bootstrap's `.dropdown-toggle` draws its own caret, and a native select styled above draws the chevron. Same control, same row, three glyphs. This settles them on the chevron. `b` is hidden rather than restyled: style.css builds that triangle out of border widths and colours across three rules, one of them `!important`, and unpicking it declaration by declaration is how the two arrows would end up overlapping. The chevron is drawn on the arrow box instead, which already has a fixed 38x34 to centre in. Specificity: one type plus three classes, so it clears style.css's three-class rule despite loading earlier. */ html .select2-container .select2-selection--single .select2-selection__arrow b, html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { display: none !important; } html .select2-container .select2-selection--single .select2-selection__arrow { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23707070' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5.5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 14px 11px; transition: transform 0.12s ease-in-out; } html .select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(180deg); } /* Bootstrap's caret, on a button that is dressed as a field. Same treatment, so a `.form-control.dropdown-toggle` and a select agree. */ html .dropdown-toggle.form-control::after { display: inline-block; width: 14px; height: 11px; /* Bootstrap's own spacing, kept: these buttons are not all flex rows, and `margin-left: auto` computes to 0 outside one, which would jam the chevron against the label. Only the glyph changes here. */ margin-left: 0.255em; border: 0; vertical-align: middle; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23707070' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5.5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 14px 11px; content: ""; } /* The value select2 shows should read exactly like the text in the input beside it -- style.css leaves it at Bootstrap's 400 while .form-control is 500, which is visible when the two sit in adjacent columns. */ html .select2-container--default .select2-selection--single .select2-selection__rendered { font-weight: 500; color: var(--body-color); } html .select2-container--default .select2-selection--single .select2-selection__placeholder { font-weight: 400; color: var(--gray-500); } html[data-bs-theme="dark"] .select2-container .select2-selection--single .select2-selection__arrow, html[data-bs-theme="dark"] .dropdown-toggle.form-control::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9b1c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5.5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dtf-heading); } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dtf-faint); } /* A disabled select2 keeps select2's own `#eee`, which is one digit off this theme's `--light` #edeeee -- close enough that nobody would see it, and still worth stating rather than leaving to a vendor default. */ html .select2-container--disabled .select2-selection--single, html .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--light); border-color: var(--border-color); } html[data-bs-theme="dark"] .select2-container--disabled .select2-selection--single, html[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--dtf-surface-2) !important; color: var(--dtf-muted); } /* ================================================= one well, in dark mode Measured with CSS.getMatchedStylesForNode rather than guessed, because three separate rules were fighting and the loser differed by field type. In dark mode today: input[type=text].form-control #0d0d26 dtf-surface input[type=email].form-control #1b1b3c dtf-surface-3 select #0d0d26 dtf-surface .select2-selection--single #13132e dtf-surface-2 Three grounds across four controls that sit in the same row. The causes are all pre-existing and all in dark-theme-fixes.css: line 549 declares fields to be `--dtf-surface-3` ("hover / active / input wells"), a blanket `html[data-bs-theme="dark"] select, ... input[type=text]` rule further down overrides that with `--dtf-surface` !important as collateral from a surface sweep aimed at cards and panels, and select2 is pinned separately to `--dtf-surface-2`. `--dtf-surface-3` is the right answer of the three: it is what the file itself calls an input well, and it is the only one of the three that makes a field read as recessed against the `--dtf-surface` card it sits on rather than merging into it. `!important` is needed to clear the blanket rule, and the selectors are deliberately narrow -- a form field, not every `select` on the page, so the inline pill selects in table rows keep the ground they have. The `input[type]` and `select.select` forms below are not decoration. The blanket rule is `html[data-bs-theme="dark"] select, ... input[type=text]`, which is (0,2,2), and both declarations carry `!important` -- so specificity is what decides. A plain `html[data-bs-theme="dark"] .form-control` is only (0,2,1) and loses: measured, after the first attempt moved the selects and left the inputs behind at `--dtf-surface`. Naming the attribute takes it to (0,3,2). */ html[data-bs-theme="dark"] input[type].form-control, html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] textarea.form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] select.select, html[data-bs-theme="dark"] select.form-select, html[data-bs-theme="dark"] .select2-container .select2-selection--single, html[data-bs-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--dtf-surface-3) !important; border-color: var(--dtf-border) !important; } /* A field you cannot type in is quieter than one you can, and has to clear the rule above -- hence the attribute form here too. */ html[data-bs-theme="dark"] input[type].form-control:disabled, html[data-bs-theme="dark"] input[type].form-control[readonly], html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-control[readonly], html[data-bs-theme="dark"] select.select:disabled, html[data-bs-theme="dark"] .form-select:disabled { background-color: var(--dtf-surface-2) !important; color: var(--dtf-muted); } /* ------------------------------------------------------- label alignment `.form-label` is inline-block, so a naked inline-block select used to sit on the same line as its label; a block-level field pushes itself onto the next line and the label needs its usual gap back. Scoped to the entry forms so no other layout shifts. */ html .vp-form-card .form-label { display: block; margin-bottom: 0.375rem; }