/* ========================================================================== STARLITweb — nástěnka s widgety (Azure DevOps style positional grid) Bootstrap 5 friendly. No JS libraries, no icon font. ========================================================================== */ .dsh { --dsh-cols: 4; --dsh-row: 168px; /* height of one grid row */ --dsh-gap: 12px; --dsh-radius: 8px; --dsh-tile-pad: .625rem; --dsh-surface: var(--bs-body-bg, #fff); --dsh-border: var(--bs-border-color, #dee2e6); --dsh-head-bg: var(--bs-tertiary-bg, #f8f9fa); --dsh-muted: var(--bs-secondary-color, #6c757d); --dsh-accent: var(--bs-primary, #0d6efd); --dsh-danger: var(--bs-danger, #dc3545); --dsh-ok: var(--bs-success, #198754); position: relative; } /* ---- toolbar ----------------------------------------------------------- */ .dsh-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--dsh-gap); min-height: 2.25rem; } .dsh-toolbar__title { font-size: 1.25rem; font-weight: 600; margin: 0; } .dsh-toolbar__hint { display: inline-flex; align-items: center; gap: .3rem; margin-left: .75rem; font-size: .8125rem; color: var(--dsh-muted); } .dsh-toolbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin-left: auto; } .dsh-toolbar__sep { width: 1px; height: 1.5rem; background: var(--dsh-border); margin: 0 .25rem; } .dsh-cols { display: inline-flex; align-items: center; gap: .125rem; padding: .125rem .375rem; border: 1px solid var(--dsh-border); border-radius: .375rem; } .dsh-cols__label { font-size: .75rem; color: var(--dsh-muted); margin-right: .25rem; } .dsh-cols__btn { min-width: 1.5rem; padding: .05rem .25rem; font-size: .8125rem; border: 0; border-radius: .25rem; background: transparent; color: var(--dsh-muted); cursor: pointer; } .dsh-cols__btn:hover { background: var(--dsh-head-bg); } .dsh-cols__btn.is-on { background: var(--dsh-accent); color: #fff; } /* ---- layout: canvas + catalogue ---------------------------------------- */ .dsh-body { display: flex; align-items: flex-start; gap: var(--dsh-gap); } .dsh-canvas { position: relative; flex: 1 1 auto; min-width: 0; } /* ---- the grid ---------------------------------------------------------- */ .dsh-grid { position: relative; display: grid; grid-template-columns: repeat(var(--dsh-cols), minmax(0, 1fr)); grid-auto-rows: var(--dsh-row); gap: var(--dsh-gap); } /* decorative cell guides while editing */ .dsh-guides { position: absolute; inset: 0; display: grid; gap: var(--dsh-gap); pointer-events: none; z-index: 0; } .dsh-guide { border: 1px dashed var(--dsh-border); border-radius: var(--dsh-radius); } /* ---- tile ------------------------------------------------------------- */ /* NOTE: deliberately no `z-index` here. A positioned element with a z-index creates a stacking context, which would trap everything inside the tile — including a widget's `position: fixed` Bootstrap modal (z-index 1055) — underneath the modal backdrop that Bootstrap appends to at z-index 1050. The modal would then render, look dimmed and swallow every click. Tiles stack above the guides by DOM order instead. */ .dsh-tile { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--dsh-surface); border: 1px solid var(--dsh-border); border-radius: var(--dsh-radius); box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: box-shadow .15s ease, opacity .15s ease; } .dsh-tile:hover { box-shadow: 0 3px 10px rgb(0 0 0 / .08); } .dsh-tile__head { display: flex; align-items: center; gap: .375rem; padding: .375rem .625rem; min-height: 2.25rem; background: var(--dsh-head-bg); border-bottom: 1px solid var(--dsh-border); } /* Ikona má stejnou barvu jako titulek vedle ní — jedna barva na hlavičku. Když ji chcete zpátky v akcentu, stačí color: var(--dsh-accent). */ .dsh-tile__icon { color: inherit; line-height: 1; } .dsh-tile__grip { color: var(--dsh-muted); line-height: 1; cursor: grab; } .dsh-tile__title { font-size: 1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsh-tile__tools { display: flex; align-items: center; gap: .125rem; margin-left: auto; } .dsh-tile__body { flex: 1 1 auto; min-height: 0; padding: var(--dsh-tile-pad); overflow: auto; } /* content that should touch the frame (tables, lists) */ .dsh-tile__body--flush { padding: 0; } .dsh-tile--skeleton { border-style: dashed; background: linear-gradient(90deg, var(--dsh-head-bg) 25%, var(--dsh-surface) 37%, var(--dsh-head-bg) 63%); background-size: 400% 100%; animation: dsh-shimmer 1.4s ease infinite; } @keyframes dsh-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } } /* ---- icon buttons ----------------------------------------------------- */ .dsh-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--dsh-muted); cursor: pointer; } .dsh-iconbtn:hover { background: rgb(0 0 0 / .06); color: var(--dsh-accent); } .dsh-iconbtn--danger:hover { color: var(--dsh-danger); } /* ---- edit mode -------------------------------------------------------- */ .dsh.is-editing .dsh-tile { cursor: grab; border-color: var(--dsh-accent); border-style: dashed; } /* The widget itself must not swallow the drag gesture. The stripes are there so the "dead" content reads as deliberate instead of looking like a broken widget. */ .dsh.is-editing .dsh-tile__body { pointer-events: none; user-select: none; opacity: .75; background-image: repeating-linear-gradient( 45deg, transparent 0 8px, color-mix(in srgb, var(--dsh-accent) 5%, transparent) 8px 16px); } @supports not (background: color-mix(in srgb, red 10%, transparent)) { .dsh.is-editing .dsh-tile__body { background-image: repeating-linear-gradient( 45deg, transparent 0 8px, rgb(13 110 253 / .05) 8px 16px); } } .dsh-tile.is-dragging { opacity: .35; } .dsh-tile__resize { position: absolute; right: 0; bottom: 0; width: 1.25rem; height: 1.25rem; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1px; color: var(--dsh-accent); background: var(--dsh-surface); border-top-left-radius: .25rem; cursor: nwse-resize; z-index: 1; /* above tile content, below the drag preview */ } /* ---- drag preview + drop layer ---------------------------------------- */ .dsh-preview { z-index: 2; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; border-radius: var(--dsh-radius); pointer-events: none; } .dsh-preview.is-valid { border: 2px solid var(--dsh-ok); background: color-mix(in srgb, var(--dsh-ok) 12%, transparent); color: var(--dsh-ok); } .dsh-preview.is-invalid { border: 2px solid var(--dsh-danger); background: color-mix(in srgb, var(--dsh-danger) 12%, transparent); color: var(--dsh-danger); } /* Fallback for browsers without color-mix() */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .dsh-preview.is-valid { background: rgb(25 135 84 / .12); } .dsh-preview.is-invalid { background: rgb(220 53 69 / .12); } } .dsh-droplayer { position: absolute; inset: 0; display: grid; gap: var(--dsh-gap); z-index: 4; } .dsh-cell { border-radius: var(--dsh-radius); } /* ---- empty state ------------------------------------------------------ */ .dsh-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 12rem; color: var(--dsh-muted); text-align: center; pointer-events: auto; } /* ---- catalogue panel -------------------------------------------------- */ .dsh-catalog { flex: 0 0 20rem; max-width: 20rem; align-self: stretch; background: var(--dsh-surface); border: 1px solid var(--dsh-border); border-radius: var(--dsh-radius); overflow: hidden; } .dsh-catalog__head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--dsh-head-bg); border-bottom: 1px solid var(--dsh-border); } .dsh-catalog__head .dsh-iconbtn { margin-left: auto; } .dsh-catalog__hint { margin: 0; padding: .625rem .75rem; font-size: .8125rem; color: var(--dsh-muted); } .dsh-catalog__list { padding: 0 .75rem .75rem; max-height: 60vh; overflow-y: auto; } .dsh-catalog__group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dsh-muted); margin: .75rem 0 .375rem; } .dsh-card { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem; margin-bottom: .375rem; border: 1px solid var(--dsh-border); border-radius: .375rem; background: var(--dsh-surface); cursor: grab; } .dsh-card:hover { border-color: var(--dsh-accent); } .dsh-card.is-disabled { opacity: .5; cursor: not-allowed; } .dsh-catalog__foot { padding: .5rem .75rem .75rem; border-top: 1px solid var(--dsh-border); } .dsh-catalog__foot .dsh-catalog__hint { padding: 0; } .dsh-card__icon { color: inherit; line-height: 1; padding-top: .125rem; } .dsh-card__text { display: flex; flex-direction: column; min-width: 0; } .dsh-card__title { font-size: .875rem; font-weight: 600; } .dsh-card__desc { font-size: .75rem; color: var(--dsh-muted); } .dsh-card__meta { font-size: .6875rem; color: var(--dsh-muted); margin-top: .125rem; } .dsh-card__add { margin-left: auto; align-self: center; white-space: nowrap; } /* widget, který smí být na nástěnce jen jednou a už tam je */ .dsh-card__placed { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; align-self: center; white-space: nowrap; font-size: .75rem; color: var(--dsh-ok); } /* ---- settings dialog -------------------------------------------------- */ .dsh-modal { position: fixed; inset: 0; z-index: 1080; } /* potvrzení musí být nad dialogem nastavení */ .dsh-modal--confirm { z-index: 1090; } .dsh-modal--confirm:focus { outline: none; } .dsh-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .35); } .dsh-modal__panel { position: relative; width: min(30rem, calc(100vw - 2rem)); max-height: min(85vh, 44rem); margin: 6vh auto 0; display: flex; flex-direction: column; background: var(--dsh-surface); border-radius: .5rem; box-shadow: 0 1rem 3rem rgb(0 0 0 / .3); overflow: hidden; } /* POZOR na pořadí: obě šířkové varianty musí být AŽ ZA .dsh-modal__panel. Mají stejnou specificitu, takže když jsou před ním, přebije je width ze základního pravidla a dialog zůstane 30rem. (Přesně tohle se tu stalo — --narrow byl celou dobu bez účinku a nikdo si toho nevšiml.) */ .dsh-modal__panel--narrow { width: min(26rem, calc(100vw - 2rem)); } /* Nastavení, jehož obsahem je seznam (např. Zkratky). V 30rem se dlouhé názvy položek lámou do tří řádků a dialog je nepřehledný. */ .dsh-modal__panel--wide { width: min(46rem, calc(100vw - 2rem)); } .dsh-modal__head { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; background: var(--dsh-head-bg); border-bottom: 1px solid var(--dsh-border); } .dsh-modal__icon { color: inherit; line-height: 1; } .dsh-modal__body { padding: .875rem; overflow-y: auto; } .dsh-modal__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .625rem .875rem; border-top: 1px solid var(--dsh-border); } /* ---- size picker ------------------------------------------------------ */ .dsh-sizepicker { display: inline-grid; gap: 3px; } .dsh-sizepicker__cell { width: 1.5rem; height: 1.25rem; padding: 0; border: 1px solid var(--dsh-border); border-radius: 2px; background: var(--dsh-surface); cursor: pointer; } .dsh-sizepicker__cell:hover { border-color: var(--dsh-accent); } .dsh-sizepicker__cell.is-on { background: var(--dsh-accent); border-color: var(--dsh-accent); } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 1200px) { .dsh-catalog { flex-basis: 17rem; max-width: 17rem; } } @media (max-width: 900px) { /* Positional grids don't work on a phone: stack in reading order and hide the editing affordances. */ .dsh-grid { display: flex !important; flex-direction: column; grid-template-rows: none !important; } .dsh-tile { grid-column: auto !important; grid-row: auto !important; min-height: 10rem; } .dsh-guides, .dsh-droplayer, .dsh-preview, .dsh-tile__resize, .dsh-cols { display: none !important; } .dsh-body { flex-direction: column; } .dsh-catalog { flex: 1 1 auto; max-width: none; width: 100%; } .dsh.is-editing .dsh-tile__body { pointer-events: auto; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dsh-tile, .dsh-tile--skeleton { transition: none; animation: none; } } /* ---- dark mode (Bootstrap 5.3 colour modes) --------------------------- */ [data-bs-theme="dark"] .dsh { --dsh-surface: var(--bs-body-bg); --dsh-border: var(--bs-border-color); --dsh-head-bg: var(--bs-secondary-bg); } [data-bs-theme="dark"] .dsh-iconbtn:hover { background: rgb(255 255 255 / .08); } /* ---- print ------------------------------------------------------------ */ @media print { .dsh-toolbar, .dsh-tile__tools, .dsh-catalog, .dsh-guides { display: none !important; } .dsh-tile { break-inside: avoid; box-shadow: none; } } /* ============================================================================ Načítání v dlaždici (WidgetSpinner.razor) ============================================================================ */ .dsh-nacitani { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 100%; min-height: 3rem; padding: 1rem; color: var(--bs-secondary-color, #6c757d); font-size: .9em; } .dsh-nacitani__obal { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; } .dsh-nacitani__obsah { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Obnovování: obsah zůstane, jen zešedne. Žádný skok rozvržení. */ .dsh-nacitani__obsah.is-nacita { opacity: .45; transition: opacity .15s ease-out; pointer-events: none; } .dsh-nacitani__roh { position: absolute; top: .4rem; right: .4rem; z-index: 2; color: var(--bs-secondary-color, #6c757d); } /* Kdo si vypnul animace, nemá koukat na točící se kolečko. */ @media (prefers-reduced-motion: reduce) { .dsh-nacitani .spinner-border, .dsh-nacitani__roh .spinner-border { animation: none; border-right-color: currentColor; opacity: .6; } .dsh-nacitani__obsah.is-nacita { transition: none; } } /* Seznam položek v nastavení zkratek — ať dialog neroste do nekonečna. */ .zkratky-nastaveni__seznam { max-height: 18rem; overflow-y: auto; padding-right: .25rem; } /* Vybrané zkratky v nastavení — seznam s poli na název a popis. */ .zkratky-nastaveni__vybrane { max-height: 22rem; overflow-y: auto; } /* Skrytý pod vlastním tlačítkem Import. Ne display:none — to by prvek vyřadilo i z klávesnice a čteček obrazovky. */ .dsh-vizualne-skryto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Hláška o exportu/importu v liště. */ .dsh-toolbar__zprava { display: inline-flex; align-items: center; gap: .35rem; font-size: .85em; color: var(--bs-success, #198754); } .dsh-toolbar__zprava.is-chyba { color: var(--bs-danger, #dc3545); }