/* ============================================================================ ACTIVITY COMPOSER FIELDS ============================================================================ Only the two rows vryno-activity-composer.js adds below each pane's fields are styled here. The fields themselves deliberately have no rules of their own: they are built with .form-label / .form-control / .form-select, so they inherit this project's existing form sizing, radius, focus ring and dark-theme treatment (vryno-select.css) rather than carrying a second, drifting copy of it. Everything below uses the same tokens the detail panels already use -- var(--border-color), var(--gray-*), var(--primary) -- and falls back to the literal each token resolves to today, so a page that loads this file without the theme still renders. ============================================================================ */ .vr-ac-shared { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 8px; margin-top: 2px; border-top: 1px solid var(--border-color, #ececec); } /* ---- "Associated with " ---------------------------------------- */ .vr-ac-assoc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--gray-500, #707070); } .vr-ac-assoc i { font-size: 14px; color: var(--gray-400, #b3b3bd); flex-shrink: 0; } .vr-ac-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 9px; border-radius: 20px; background: var(--primary-transparent, rgba(72, 45, 193, .1)); color: var(--primary, #482dc1); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- the follow-up task offer ------------------------------------------ A sentence with two selects sitting inside it, so the controls have to line up on the text baseline and wrap as a sentence would on a narrow column rather than stretching to full width like a form row. */ .vr-ac-follow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12.5px; color: var(--gray-700, #4a4a52); cursor: pointer; } .vr-ac-follow>input[type="checkbox"] { flex-shrink: 0; cursor: pointer; } /* Specificity, not novelty: the platform's stylesheets are injected into ahead of the page's own bootstrap.min.css, so a plain .vr-ac-inline-select ties with .form-select { width: 100% } and loses on order -- the selects then filled their line and broke the sentence onto four rows. vryno-select.css hits the same wall and answers it the same way, with html + element + class. */ html select.form-select.vr-ac-inline-select { width: auto; min-width: 0; height: 28px; padding: 0 26px 0 8px; font-size: 12px; font-weight: 600; line-height: 26px; background-position: right 8px center; cursor: pointer; flex: 0 0 auto; } /* ---- narrow columns ---------------------------------------------------- The composer lives in a column the user can now drag down to roughly a third of the row (see vryno-detail-layout.css), and at that width a two-up .col-md-6 field pair is unreadable. Bootstrap's md breakpoint watches the viewport, not the column, so it cannot help here -- the container query can. */ @supports (container-type: inline-size) { .action-composer-pane { container-type: inline-size; background: #f6f6f6; padding: 10px; border-radius: 10px; } @container (max-width: 430px) { .vr-ac-fields>[class*="col-md-"] { flex: 0 0 100%; width: 100%; } } } /* ---- dark theme -------------------------------------------------------- Deliberately empty. Every colour above is a token that the dark theme already redefines -- style.css and dark-theme-fixes.css restate --border-color, --primary-transparent and the whole --gray-* ramp under the dark selector -- so the rules above follow the theme with no second copy to keep in step. Worth knowing before adding anything here: the grey ramp INVERTS rather than shifting. --gray-700 is #454646 in light and #b9c0d4 in dark, while --gray-300 goes the other way, #9D9D9D to #3a3a63. So "a lighter grey for dark mode" means reaching for a HIGHER number, not a lower one; picking --gray-300 for body text here rendered it near-black on a near-black card. Use --gray-700 for text and --gray-500 for muted text in both themes and the flip takes care of itself. ============================================================================ */