/* ------------------------------------------------------------------ Pill-style picker dropdown Colours (primary/hover/focus) come from bs_theme() in R/themes.R. ------------------------------------------------------------------ */ :root { --anresis-pill-h: 44px; --anresis-pill-pad-x: 12px; } /* Picker menus are rendered on (see options = list(container = "body") in the pickerInput call); make sure they sit above the plotly canvas. */ .bootstrap-select .dropdown-menu, .dropdown-menu { z-index: 999999 !important; } /* Wrapper row: top padding gives the absolutely-placed caption room to sit above the pill without being clipped by the page. */ .anresis-controls-row { padding: 24px 16px 16px 16px; margin: 0 -16px 4px -16px; overflow: visible; } /* Column that holds the pill. `inline-block` shrink-wraps to the pill's width, keeping the pill on the left of the row. `position: relative` makes it the positioning context for the caption. */ .anresis-pill-col { position: relative; display: inline-block; vertical-align: top; } /* Caption is pulled out of normal flow and floats above the pill. `bottom: calc(100% + 10px)` parks it 10px above the column's top edge. `left: 0; right: 0; text-align: center` centres the text within the column's width (= the pill's width). */ .anresis-pill-caption { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; text-align: center; font-size: 12px; line-height: 1.15; color: rgba(29, 29, 31, 0.6); white-space: nowrap; pointer-events: none; } /* The pill itself */ .anresis-pill { width: auto !important; height: var(--anresis-pill-h) !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } .anresis-pill label, .anresis-pill .control-label { display: none !important; } .anresis-pill .bootstrap-select { width: auto !important; } .anresis-pill .shiny-input-container, .anresis-pill .form-group { width: auto !important; max-width: none !important; margin-bottom: 0 !important; } /* Round toggle button with soft shadow */ .anresis-pill .bootstrap-select > .dropdown-toggle { height: var(--anresis-pill-h) !important; border-radius: 999px !important; padding: 0 var(--anresis-pill-pad-x) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important; color: rgba(29, 29, 31, 0.92) !important; display: flex !important; align-items: center !important; font-size: 13px !important; } .anresis-pill .bootstrap-select > .dropdown-toggle .filter-option { display: flex !important; align-items: center !important; } /* Rounded, shadowed open menu */ .anresis-pill .bootstrap-select .dropdown-menu { border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important; overflow: hidden; } /* Mobile: pill takes full width; column becomes block */ @media (max-width: 600px) { .anresis-pill { width: 100% !important; } .anresis-pill-col { display: block; width: 100%; } .anresis-pill .bootstrap-select > .dropdown-toggle { width: 100% !important; } } /* View-switcher: a single pill containing two icon buttons (segmented control) */ .anresis-toolbar { display: inline-flex; align-items: center; height: var(--anresis-pill-h); padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .anresis-toolbtn { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--anresis-pill-h) - 8px); padding: 0 18px; border-radius: 999px; background: transparent; border: none; color: rgba(0, 0, 0, 0.50); /* the colour of the inactive button */ cursor: pointer; transition: background 0.15s ease; } .anresis-toolbtn:hover { /* what happens when hovering over the inactive button */ color: #1d1d1f; background: rgba(0, 0, 0, 0.05); } .anresis-toolbtn:focus { outline: none; } .anresis-toolbtn.active { background: #ffffff; color: #1d1d1f; border: 1px solid rgba(0, 0, 0, 0.08); }