/* ============================================================================ Layout variants ---------------------------------------------------------------------------- One set of markup, two arrangements. A calculator page emits three regions [data-region="config"] the input form [data-region="results"] the priced output [data-region="basket"] the running basket inside a .calc-shell, and everything below places those regions differently per [data-layout] on . Pages therefore gain every layout for free, and adding a third means editing this file alone rather than every template. "classic" is the historical layout and stays the default, so a user who never opens the picker sees no change at all. ========================================================================== */ .calc-shell { display: grid; gap: 1.25rem; align-items: start; } /* Regions carry no layout opinion of their own; the variants below place them. */ .calc-shell > [data-region] { min-width: 0; } /* An empty basket would otherwise leave a gap where its region sits. */ .calc-shell:has([data-region="basket"] #historySection.d-none) [data-region="basket"] { display: none; } /* ---------------------------------------------------------------- classic -- */ /* Tall sticky config column on the left, basket above results on the right. */ [data-layout="classic"] .calc-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "config basket" "config results"; grid-template-rows: auto 1fr; } [data-layout="classic"] [data-region="config"] { grid-area: config; } [data-layout="classic"] [data-region="basket"] { grid-area: basket; } [data-layout="classic"] [data-region="results"] { grid-area: results; } [data-layout="classic"] [data-region="config"] > .card { position: sticky; top: 70px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; } [data-layout="classic"] [data-region="config"] .card-body { overflow-y: auto; min-height: 0; /* clearance for the sticky submit bar that overlays the foot of the scroll */ padding-bottom: 80px; } /* ------------------------------------------------------------ command bar -- */ /* Inputs collapse into one horizontal band; results take the full width below. */ [data-layout="commandbar"] .calc-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "config" "basket" "results"; gap: 1rem; } [data-layout="commandbar"] [data-region="config"] { grid-area: config; } [data-layout="commandbar"] [data-region="basket"] { grid-area: basket; } [data-layout="commandbar"] [data-region="results"] { grid-area: results; } [data-layout="commandbar"] [data-region="config"] > .card { position: sticky; top: 60px; z-index: 3; } /* The config card header would waste a whole row in a horizontal band. */ [data-layout="commandbar"] [data-region="config"] .card-header { display: none; } [data-layout="commandbar"] [data-region="config"] .card-body { padding: 0.85rem 1rem; overflow: visible; } /* The form's top-level groups are already flat siblings, so they can simply be flowed across instead of stacked. Each group keeps its own internal markup. */ [data-layout="commandbar"] .calc-shell #calcForm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55rem 0.8rem; } [data-layout="commandbar"] .calc-shell #calcForm > * { margin-bottom: 0 !important; flex: 0 1 auto; min-width: 0; } [data-layout="commandbar"] .calc-shell [data-cfg="region"] { flex: 1 1 300px; min-width: 250px; } [data-layout="commandbar"] .calc-shell [data-cfg="series"] { flex: 3 1 420px; min-width: 320px; } [data-layout="commandbar"] .calc-shell [data-cfg="type"] { flex: 0 1 140px; } [data-layout="commandbar"] .calc-shell [data-cfg="size"] { flex: 0 1 170px; } [data-layout="commandbar"] .calc-shell [data-cfg="os"] { flex: 0 1 160px; } [data-layout="commandbar"] .calc-shell [data-cfg="disk"] { flex: 1 1 250px; min-width: 230px; } [data-layout="commandbar"] .calc-shell [data-cfg="disksize"]{ flex: 0 1 140px; } [data-layout="commandbar"] .calc-shell [data-cfg="submit"] { flex: 0 0 auto; margin-left: auto; } [data-layout="commandbar"] .calc-shell #validationMsg { flex: 1 1 100%; margin-bottom: 0 !important; } [data-layout="commandbar"] .calc-shell [data-cfg="region"] .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } [data-layout="commandbar"] .calc-shell #seriesGrid { max-height: 92px; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } [data-layout="commandbar"] .calc-shell .series-legend { display: none; } [data-layout="commandbar"] .calc-shell #vmDiskTypeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } [data-layout="commandbar"] .calc-shell [data-cfg="disksize"] .btn-quick-disk { display: none; } [data-layout="commandbar"] .calc-shell #validationMsg { grid-column: 1 / -1; margin-bottom: 0 !important; } /* Cores and RAM are their own groups in the markup but one control each. */ [data-layout="commandbar"] .calc-shell [data-cfg="size"] { display: contents; } [data-layout="commandbar"] .calc-shell [data-cfg="size"] > .col-6 { width: auto; display: flex; flex-direction: column; justify-content: flex-end; } /* TomSelect renders its own control; truncate inside it, not around it. */ [data-layout="commandbar"] .calc-shell [data-cfg="region"] .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* The submit bar sticks to the foot of a scrolling card in the other layouts; in a horizontal band it is just another item in the row. */ [data-layout="commandbar"] .calc-shell .calc-submit-bar { position: static !important; margin: 0 !important; padding: 0 !important; border-top: 0 !important; background: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* Three stacked region selects would set the height of the whole band. */ [data-layout="commandbar"] .calc-shell [data-cfg="region"] .d-flex.flex-column { flex-direction: row !important; gap: 0.4rem !important; } [data-layout="commandbar"] .calc-shell [data-cfg="region"] .form-select { min-width: 0; } /* A wrapped series grid gets clipped mid-card by any height cap, so scroll it sideways as a single row instead. */ [data-layout="commandbar"] .calc-shell #seriesGrid { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 4px; scrollbar-width: thin; } [data-layout="commandbar"] .calc-shell #seriesGrid > * { flex: 0 0 92px; } [data-layout="commandbar"] .calc-shell #seriesCatTabs { margin-bottom: 0.35rem !important; } [data-layout="commandbar"] .calc-shell [data-cfg="type"] .form-select { min-width: 130px; } /* --- density ------------------------------------------------------------- The controls below were drawn for a narrow vertical column. Laid out in a band they are the reason it reads as a slab rather than a bar, so shrink them here only - the classic column keeps its roomier sizing. */ /* Series tiles: smaller, and no taller than one row. */ [data-layout="commandbar"] .calc-shell .series-card { padding: 4px 3px 3px; } [data-layout="commandbar"] .calc-shell .series-card .series-name { font-size: .64rem; } [data-layout="commandbar"] .calc-shell .series-card .series-sub { font-size: .5rem; } [data-layout="commandbar"] .calc-shell .series-card .series-elig { margin-top: 2px; gap: 2px; } [data-layout="commandbar"] .calc-shell .series-card .elig-dot { width: 11px; height: 11px; font-size: .48rem; } [data-layout="commandbar"] .calc-shell #seriesGrid > * { flex: 0 0 78px; } [data-layout="commandbar"] .calc-shell .cat-tab { font-size: .66rem; padding: 2px 8px; } /* Region selects: keep long labels on one line instead of growing the row. */ [data-layout="commandbar"] .calc-shell [data-cfg="region"] .form-select, [data-layout="commandbar"] .calc-shell [data-cfg="region"] .ts-control { font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: .3rem; padding-bottom: .3rem; } /* Disk cards: two lines of text each is a lot for a band. */ [data-layout="commandbar"] .calc-shell .vm-disk-card { padding: 4px 3px 3px !important; } [data-layout="commandbar"] .calc-shell .vm-disk-name { font-size: .66rem; } [data-layout="commandbar"] .calc-shell .vm-disk-sub { display: none; } /* Labels do a lot of vertical damage when repeated across a row. */ [data-layout="commandbar"] .calc-shell #calcForm .form-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: .15rem !important; } [data-layout="commandbar"] .calc-shell #calcForm .form-select, [data-layout="commandbar"] .calc-shell #calcForm .form-control { padding-top: .3rem; padding-bottom: .3rem; } [data-layout="commandbar"] .calc-shell [data-region="config"] .card-body { padding: .7rem .9rem; } /* ------------------------------------------------------------- responsive -- */ /* Below tablet width every layout collapses to a single column. The picker is still honoured, it simply has nothing to arrange horizontally. */ @media (max-width: 991.98px) { [data-layout] .calc-shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "config" "basket" "results" !important; } [data-layout] [data-region="config"] > .card, [data-layout] [data-region="basket"] { position: static !important; max-height: none !important; } [data-layout="commandbar"] .calc-shell #calcForm { display: block; } [data-layout="commandbar"] .calc-shell #calcForm > * { margin-bottom: 1rem !important; } [data-layout="commandbar"] [data-region="config"] .card-header { display: block; } } /* ----------------------------------------------------------- the picker ---- */ .layout-thumb { width: 100%; height: 54px; background: var(--bs-tertiary-bg, #f7f9fc); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 5px; padding: 3px; display: flex; flex-direction: column; gap: 2px; } .layout-thumb i { background: var(--bs-border-color, #c9d3e0); border-radius: 1.5px; display: block; } .layout-thumb .lt-row { display: flex; gap: 2px; flex: 1; min-height: 0; } .layout-thumb .lt-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .layout-thumb .lt-on { background: var(--bs-primary, #1a73e8); } .layout-option { border: 1.5px solid var(--bs-border-color, #dee2e6); border-radius: 9px; padding: 8px; background: var(--bs-body-bg, #fff); cursor: pointer; text-align: left; position: relative; transition: border-color .12s, box-shadow .12s; } .layout-option:hover { border-color: var(--bs-primary, #1a73e8); } .layout-option.active { border-color: var(--bs-primary, #1a73e8); box-shadow: 0 0 0 3px rgba(26, 115, 232, .15); } .layout-option .lo-name { font-size: .8rem; font-weight: 700; margin-top: 6px; } .layout-option .lo-desc { font-size: .68rem; line-height: 1.3; color: var(--bs-secondary-color, #6c757d); } .layout-option .lo-check { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bs-primary, #1a73e8); color: #fff; font-size: .7rem; display: none; align-items: center; justify-content: center; border: 2px solid var(--bs-body-bg, #fff); } .layout-option.active .lo-check { display: flex; }