/* ========================================================================== RecipeRegisterAdmin - admin-spesifikke tillegg. Design-tokens, knapper, skjemafelt og tabellstil gjenbrukes fra ../RecipeRegister/assets/css/style.css (lastet inn før denne filen). ========================================================================== */ /* --- Header: "Admin"-merke + navigasjon --- */ .admin-header__brand { display: flex; align-items: center; gap: 12px; } .admin-header__badge { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--paprika-soft); border: 1px solid rgba(242, 236, 223, 0.35); border-radius: 999px; padding: 3px 10px; } .admin-header__nav { display: flex; align-items: center; gap: 18px; } .admin-header__nav a { color: #F2ECDF; font-size: 0.9rem; text-decoration: none; opacity: 0.85; } .admin-header__nav a:hover { opacity: 1; color: #fff; } /* Se header.php - skjuler den uendret "Peter's Oppskrifter"-toppbaren (inkl. "Se nettstedet" og hamburgermenyen) når siden vises inni referansedata-overlayet, siden den er helt uten hensikt der. */ .in-overlay .admin-header { display: none; } /* --- Hamburgermeny (Kategorier/Tidsklasse/Terningkast/Enheter/Ingredienser/CSV/Logg ut) --- */ .hamburger-menu { position: relative; } .hamburger-menu__trigger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: none; color: #F2ECDF; cursor: pointer; opacity: 0.85; border-radius: 50%; } .hamburger-menu__trigger:hover, .hamburger-menu__trigger[aria-expanded="true"] { opacity: 1; background: rgba(242, 236, 223, 0.15); } .hamburger-menu__trigger svg { width: 20px; height: 20px; } .hamburger-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(38, 32, 25, 0.22); padding: 6px; display: flex; flex-direction: column; z-index: 50; } .hamburger-menu__panel[hidden] { display: none; } .hamburger-menu__panel a { display: block; padding: 9px 12px; border-radius: calc(var(--radius) - 3px); color: var(--ink); font-size: 0.9rem; text-decoration: none; } .hamburger-menu__panel a:hover { background: var(--bg); } .hamburger-menu__divider { border: none; border-top: 1px solid var(--line); margin: 6px 2px; } /* --- Innloggingsside --- */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .login-form-wrap h1 { font-family: var(--font-display); color: var(--herb-900); text-align: center; margin-bottom: 4px; } .login-form__subtitle { text-align: center; color: var(--muted); margin: 0 0 24px; } .login-form button { margin-top: 8px; } /* --- Dashboard (index.php) --- */ .admin-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .admin-toolbar h1 { font-family: var(--font-display); color: var(--herb-900); margin: 0; } .admin-toolbar h1[title] { cursor: help; border-bottom: 1px dotted var(--muted); display: inline-block; } .admin-toolbar__count { color: var(--muted); font-weight: 400; font-size: 1.1rem; } .admin-page-title { font-family: var(--font-display); color: var(--herb-900); margin: 0 0 20px; } .admin-flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; } .admin-flash--success { background: #E7EFE6; color: var(--herb-900); border: 1px solid var(--herb-600); } .admin-flash--error { background: var(--paprika-soft); color: var(--herb-900); border: 1px solid var(--paprika); } .admin-hint { color: var(--muted); font-size: 0.9rem; margin: -8px 0 20px; max-width: 640px; } .translate-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: rgba(122, 94, 58, 0.06); border: 1px solid rgba(122, 94, 58, 0.2); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; } .translate-panel__label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; } .translate-panel__label select { font-family: var(--font-body); padding: 4px 8px; border-radius: var(--radius); border: 1px solid var(--border); } .translate-panel__status { font-size: 0.85rem; color: var(--muted); } .translate-panel__status--error { color: var(--paprika); font-weight: 600; } .translate-panel__hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.82rem; } .sync-panel { max-width: 640px; } .sync-panel__actions { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } .sync-panel__summary { margin-top: 16px; font-size: 0.9rem; } .sync-panel__summary p { margin: 0 0 8px; } .admin-badge { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .admin-badge--muted { color: var(--muted); } /* --- Skjema: dynamiske blokker (innledning/steg). Mindre luft enn default (redusert padding/margin) etter ønske om en tettere layout. --- */ .admin-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 2px; background: var(--surface); } /* --- Drag-håndtak: rekkefølgen bestemmes av posisjonen boksen/raden har i DOM-en når skjemaet sendes inn (se assets/js/sortable.js) - ingen egen "posisjon"-input vist til brukeren. Kun Innledning-/Slik gjør du-boksene har håndtak direkte i boksen (.admin-block--draggable) - Ingrediens- del-boksene beholder vanlig padding, siden håndtaket der sitter på hver enkelt ingredienslinje i stedet (.drag-handle--inline). --- */ .admin-block--draggable { position: relative; padding-left: 30px; } .drag-handle { cursor: grab; color: var(--muted); font-size: 1rem; line-height: 1; user-select: none; touch-action: none; flex-shrink: 0; } .drag-handle:hover { color: var(--herb-700); } .drag-handle:active { cursor: grabbing; } .admin-block--draggable > .drag-handle { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); } .drag-handle--inline { display: inline-flex; align-items: center; justify-content: center; } .is-dragging { opacity: 0.55; box-shadow: 0 6px 14px rgba(38, 32, 25, 0.18); } .admin-block__row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .admin-block__row:last-child { margin-bottom: 0; } .admin-block__row textarea, .admin-block__row input[type="text"] { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); } .admin-block__row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); } .admin-block textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); margin-bottom: 0; resize: vertical; box-sizing: border-box; } .form-fieldset__hint { color: var(--muted); font-size: 0.85rem; margin: -4px 0 12px; } /* Tettere fieldset-avstand enn default fra RecipeRegister sin style.css (kun i admin - RecipeRegister sin egen bruk av .form-fieldset er urørt). Minimal sidepadding: boksene inni (admin-block, recipe-form__detalj osv.) skal strekke seg nesten helt ut til samme bredde som Tittel/Kildelenke- feltene over, ikke ha et synlig innrykk fra fieldset-rammen. */ .recipe-form .form-fieldset { margin-bottom: 14px; padding: 10px 0 12px; } .recipe-form .form-fieldset legend { margin-left: 4px; } /* --- Rediger/Ny oppskrift: 300px bredere enn admin-sidens vanlige .page (1080px), slik at de to skjema-kolonnene får mer plass. Kun denne siden - resten av admin (oversikt, innlogging) bruker fortsatt 1080px fra RecipeRegister sin style.css. --- */ .page--wide { max-width: 1380px; } /* --- To-kolonners skjema-layout: 50/50 --- */ .recipe-form__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 10px; align-items: start; } @media (max-width: 860px) { .recipe-form__layout { grid-template-columns: 1fr; } } /* Rad med Vurdering/Antall/Enhet/Tidsklasse: Vurdering og Antall er halvparten så brede (kolonnebredde) som Enhet og Tidsklasse. Alle fire headere/labels OG verdier er sentrert. */ .form-grid--compact { grid-template-columns: 0.5fr 0.5fr 1fr 1fr; } .form-grid--compact .form-field { text-align: center; } .form-grid--compact .form-field select, .form-grid--compact .form-field input { width: 100%; box-sizing: border-box; text-align: center; } @media (max-width: 640px) { .form-grid--compact { grid-template-columns: repeat(2, 1fr); } } /* --- Kategorier side-om-side (Type / Kjøkken / Kategori) --- */ .category-columns { display: flex; gap: 16px; flex-wrap: wrap; } .category-columns .form-checkbox-group { flex: 1 1 110px; min-width: 100px; margin-bottom: 0; } .form-checkbox--block { display: flex; margin-right: 0; padding: 2px 0; } /* --- Ingrediensrad: alt på ÉN linje, faste bredder på mengde/enhet/fjern-knapp --- */ .recipe-form__detalj { display: grid; grid-template-columns: 16px 62px 52px minmax(124px, 0.4fr) 0.6fr 0.7fr 24px; gap: 6px; align-items: center; margin-bottom: 6px; } @media (max-width: 640px) { .recipe-form__detalj { grid-template-columns: 14px 56px 46px minmax(116px, 0.4fr) 0.6fr 0.7fr 22px; } } .recipe-form__detalj input, .recipe-form__detalj select { padding: 6px 7px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.85rem; width: 100%; box-sizing: border-box; } .recipe-form__detalj-remove { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--paprika); cursor: pointer; padding: 6px 0; } /* --- Oppskrifts linker --- */ .recipe-form__link-row { display: grid; grid-template-columns: 1fr 1fr 26px; gap: 6px; margin-bottom: 6px; } .recipe-form__link-row select { padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.85rem; width: 100%; box-sizing: border-box; } /* --- Bilde-felt: kompakt knapp + status, plass til å ligge på samme linje som f.eks. steg-type-nedtrekket. Selve opplastingen skjer i en popup (.image-modal-overlay), se lenger ned. --- */ .image-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; flex-shrink: 0; } .image-field__controls { display: inline-flex; align-items: center; gap: 6px; } .image-field__thumb { width: 168px; height: 168px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); } /* Større forhåndsvisning for hovedbildet (se renderImageField($large=true)) */ .image-field--large { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .image-field--large .image-field__thumb { width: 100%; max-width: 360px; height: 200px; border-radius: var(--radius); } .image-field__status { color: var(--muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .image-field__remove { display: inline-flex; align-items: center; background: none; border: none; color: var(--paprika); cursor: pointer; padding: 2px 4px; flex-shrink: 0; } .image-field__remove[hidden] { display: none; } .image-field__remove:hover { opacity: 0.7; } /* --- Bilde-popup (drag-and-drop + filvalg) --- */ .image-modal-overlay { position: fixed; inset: 0; background: rgba(38, 32, 25, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; } .image-modal-overlay[hidden] { display: none; } .image-modal { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius); padding: 20px; box-shadow: 0 12px 32px rgba(38, 32, 25, 0.25); } .image-modal h2 { margin: 0 0 14px; font-family: var(--font-display); font-style: italic; color: var(--herb-900); font-size: 1.15rem; } .image-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* --- Drag-and-drop-sonen selv (kun brukt inni popupen nå) --- */ .image-dropzone { position: relative; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background 0.15s ease; } .image-dropzone.is-dragover { border-color: var(--herb-600); background: #EEF2E9; } .image-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; } .image-dropzone__preview-img { width: 100%; max-height: 260px; object-fit: cover; display: block; } .image-dropzone__placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12px; color: var(--muted); text-align: center; font-weight: 600; font-size: 0.9rem; } /* --- Sticky lagre-knapp: alltid synlig nederst, uten å måtte scrolle helt ned --- */ .form-actions--sticky { position: sticky; bottom: 0; display: flex; gap: 12px; padding: 14px 16px; margin: 24px -16px -16px; background: rgba(250, 246, 237, 0.95); backdrop-filter: blur(4px); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(38, 32, 25, 0.08); z-index: 20; align-items: center; } .form-actions__sync-toggle { margin-left: 12px; font-size: 0.85rem; color: var(--muted); cursor: help; } .admin-recipe-table__actions { text-align: right; width: 1%; } .icon-btn--danger-outline { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--paprika); cursor: pointer; } .icon-btn--danger-outline:hover { background: var(--paprika); color: #fff; border-color: var(--paprika); } .icon-btn--danger-outline svg { width: 16px; height: 16px; } .btn--danger-solid { background: var(--paprika); border-color: var(--paprika); color: #fff; } .btn--danger-solid:hover { background: #A8431F; border-color: #A8431F; } /* --- Referansedata-overlay (Kategorier/Tidsklasse/Terningkast/Enheter/ Ingredienser rett fra hamburgermenyen) - samme mønster som .image-modal-overlay, men mye større siden den viser en hel side (iframe). Ingen egen tittel-rad her (den ga en forvirrende DOBBEL tittel sammen med sidens egen

inni iframen) - kun en flytende lukk-knapp oppå selve iframen øverst til høyre, omtrent på høyde med sidens egen gjenværende tittel (se .in-overlay .admin-header i denne filen for hvorfor "Peter's Oppskrifter"-toppbaren er skjult der). --- */ .reference-overlay { position: fixed; inset: 0; background: rgba(38, 32, 25, 0.5); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 210; } .reference-overlay[hidden] { display: none; } .reference-overlay__panel { position: relative; width: 100%; max-width: 960px; /* 90% av skjermhøyden på desktop (var før maks 820px, som i praksis havnet under halve skjermhøyden på store skjermer). */ height: 90vh; background: var(--surface); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(38, 32, 25, 0.25); overflow: hidden; } .reference-overlay__close { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; box-shadow: 0 2px 8px rgba(38, 32, 25, 0.18); } .reference-overlay__close:hover { background: var(--paprika); color: #fff; border-color: var(--paprika); } .reference-overlay__iframe { display: block; width: 100%; height: 100%; border: none; background: var(--bg); } @media (max-width: 640px) { .reference-overlay { padding: 0; } /* Mobil beholder full skjermhøyde som før (uendret ønsket oppførsel - kun desktop-visningen var for lav). */ .reference-overlay__panel { max-width: none; height: 100%; border-radius: 0; } } /* --- Bekreftelsesmodal (sletting av oppskrift) - samme monster som .image-modal-overlay, men egen klasse siden den brukes fra flere sider. --- */ .confirm-modal-overlay { position: fixed; inset: 0; background: rgba(38, 32, 25, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; } .confirm-modal-overlay[hidden] { display: none; } .confirm-modal { width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: 0 12px 32px rgba(38, 32, 25, 0.25); } .confirm-modal h2 { margin: 0 0 12px; font-family: var(--font-display); font-style: italic; color: var(--herb-900); font-size: 1.2rem; } .confirm-modal p { margin: 0 0 10px; line-height: 1.5; } .confirm-modal__warning { color: var(--paprika); font-size: 0.88rem; } .confirm-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* --- "Lookup"-administrasjon (Tidsklasse/Terningkast/Enheter/Ingredienser/ Kategorier) - en enkel redigerbar liste, hver rad er sitt eget skjema. --- */ .lookup-list { display: flex; flex-direction: column; gap: 4px; max-width: 720px; } .lookup-list__header { display: grid; grid-template-columns: 1fr 130px auto; gap: 10px; padding: 0 4px 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .lookup-list__row { display: grid; grid-template-columns: 1fr 130px auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); } .lookup-list__row--new { border-bottom: none; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); } .lookup-list--maaltidsdel .lookup-list__header, .lookup-list--maaltidsdel .lookup-list__row { grid-template-columns: 24px 1fr 100px auto; } .lookup-list--maaltidsdel [data-drag-handle] { justify-self: center; } /* Kort, diskret bekreftelse på at en AJAX-lagring faktisk skjedde (se ingredient-ajax-save.js) - siden det ikke lenger er noen full sideinnlasting å "merke" at noe skjedde ved. Klassen fjernes igjen av JS etter 1,5 sekund. */ .lookup-list__row.is-just-saved { animation: lookup-row-flash 1.5s ease-out; } @keyframes lookup-row-flash { 0% { background-color: var(--paprika-soft); } 100% { background-color: transparent; } } /* Glidende fjerning ved sletting (se ingredient-ajax-save.js sin animateRowRemoval()) - selve høyde/luft-verdiene som transitions HER settes direkte som inline style av JS-en (må ha en eksplisitt start- pikselverdi å transitionere FRA, "auto" kan ikke animeres) - denne klassen sin eneste jobb er å legge på selve transition-egenskapen. */ .lookup-list__row.is-deleting { transition: height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, margin-bottom 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease, border-width 0.25s ease; } /* Ulagrede endringer (se ingredient-ajax-save.js sin dirty-sporing) - en diskret farget kant i venstre marg PLUSS at selve Lagre-knappen fylles med aksentfargen i stedet for å være en nøytral "ghost"-knapp, slik at blikket naturlig trekkes mot akkurat den knappen man faktisk trenger å trykke på. Forsvinner automatisk igjen så snart raden er lagret (den byttes uansett helt ut med fersk HTML da) eller feltene tilbakestilles til sin opprinnelige verdi for hånd. */ .lookup-list__row.is-dirty { box-shadow: inset 3px 0 0 var(--paprika); } .lookup-list__row.is-dirty button[type="submit"] { background: var(--paprika); color: #fff; border-color: var(--paprika); } /* Mens en AJAX-lagring faktisk er underveis (se ingredient-ajax-save.js / enhet-ajax-save.js) - dempet og "låst" helt til svaret kommer tilbake, i tillegg til selve knapp-teksten som endres til "Lagrer …" med en liten spinner (se .btn__spinner under). pointer-events:none hindrer at man rekker å endre noe i feltene mens forespørselen fortsatt er i flukt. */ .lookup-list__row.is-saving { opacity: 0.6; pointer-events: none; } .btn__spinner { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid rgba(0, 0, 0, 0.2); border-top-color: currentColor; border-radius: 50%; animation: btn-spinner-rotate 0.6s linear infinite; } @keyframes btn-spinner-rotate { to { transform: rotate(360deg); } } .lookup-list__row input[type="text"], .lookup-list__row input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-body); } .lookup-list__count { color: var(--muted); font-size: 0.9rem; text-align: center; } .lookup-list__count a { color: inherit; text-decoration: underline; } .lookup-list__actions { display: flex; align-items: center; gap: 6px; } /* Terningkast-varianten trenger en ekstra smal kolonne for posisjon + en bredere for bilde */ .lookup-list--terningkast .lookup-list__header, .lookup-list--terningkast .lookup-list__row { grid-template-columns: 70px 1fr 120px 130px auto; } .lookup-list__pic { display: flex; align-items: center; gap: 6px; } .lookup-list__pic-thumb { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); } .lookup-list__pic input[type="file"] { font-size: 0.75rem; max-width: 90px; } .lookup-list--enheter .lookup-list__header, .lookup-list--enheter .lookup-list__row { grid-template-columns: 1fr 180px 110px auto; } /* Mobil: "Alias for"-nedtrekket (fast 180px) og antall-kolonnen (fast 110px) i Enheter var beregnet for desktop og spiste nesten all tilgjengelig bredde på en smal skjerm - Navn-feltet ble da presset ned til nesten ingenting. Smalere faste bredder her gir Navn (1fr) nok plass igjen. MÅ stå ETTER den vanlige (ikke-media-query) regelen over - lik spesifisitet betyr at CSS-en som kommer SIST i filen vinner, uansett om den andre står inni en media query som matcher eller ikke. Hadde denne media-queryen tidligere stått FØR den vanlige regelen, og ble derfor alltid overstyrt av den - selv på mobil. (Ingredienser hadde samme mønster her tidligere, men har nå sine egne, mer omfattende regler lenger ned i filen siden den også fikk Beskrivelse/Bilde-kolonner.) */ @media (max-width: 640px) { .lookup-list--enheter .lookup-list__header, .lookup-list--enheter .lookup-list__row { grid-template-columns: 1fr 92px 40px auto; gap: 6px; } } .icon-btn--danger-outline[disabled] { opacity: 0.35; cursor: not-allowed; color: var(--muted); } .icon-btn--danger-outline[disabled]:hover { background: var(--surface); color: var(--muted); border-color: var(--line); } /* --- Søkefelt for å finne fram i en lang lookup-liste uten å måtte scrolle (se assets/js/lookup-filter.js) + sticky kolonne-header, slik at man alltid vet hvilken kolonne som er hvilken selv langt nede i listen. --- */ .lookup-list__toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; max-width: 720px; } /* Vises kun mens ingrediens-radene lastes inn i biter - se assets/js/ingredienser-batch-load.js. Fjernes helt fra DOM-en når siste bit er hentet (ikke bare skjult), så den ikke tar opp plass etterpå. */ .lookup-list__load-progress { max-width: 720px; margin-bottom: 14px; } .lookup-list__load-progress-bar { height: 6px; border-radius: 3px; background: var(--paprika-soft); overflow: hidden; } .lookup-list__load-progress-fill { height: 100%; width: 0%; background: var(--paprika); border-radius: 3px; transition: width 0.2s ease; } .lookup-list__load-progress-text { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); } .lookup-list__load-progress--error .lookup-list__load-progress-bar { background: var(--paprika); } .lookup-list__load-progress--error .lookup-list__load-progress-text { color: var(--paprika); } .lookup-list__filter { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-body); font-size: 0.92rem; } .lookup-list__filter-count { color: var(--muted); font-size: 0.82rem; white-space: nowrap; } .lookup-list__header { position: sticky; top: 0; background: var(--bg); z-index: 2; } [data-lookup-row][hidden] { display: none; } /* --- Ingredienser: Navn/Alias for/Overordnet/Beskrivelse/Bilde/Oppskrifter/ Actions ALLE på én rad på desktop (var før Beskrivelse+Bilde en egen, wrappet rad under - se v5-kontekstnotatet for historikken). Bredere enn standard .lookup-list sin 720px-grense, siden 7 kolonner trenger mer plass. Beskrivelse-textarea-en er bevisst smal og kun 1 rad høy som standard (rows="1") - dra i hjørnet (resize:vertical, "stretch"- funksjonen) for å se mer ved behov, samme mønster som før. Bilde-kolonnen er bevisst smal (kun 52px, selve boksen er 47px - minimalt med luft rundt den bevisst) - var opprinnelig 150px, som etterlot mye tom "luft" rundt den lille bilde-boksen uten grunn. Alias for/Overordnet er 140px hver (ned fra 150px) - den frigjorte plassen (38px totalt) tilfaller Navn (1fr), som ellers ble litt for smal. VIKTIG - siste kolonne (Actions) er et FAST tall (130px), IKKE "auto" (som den var opprinnelig, og fortsatt er i de andre lookup-listene): en header-rad og hver enkelt data-rad er HVER SIN EGEN, uavhengige CSS Grid-container (ikke én delt grid) - en "auto"-kolonne regnes derfor ut SEPARAT for header vs. hver rad, basert KUN på det som faktisk ligger i akkurat DEN gridden. Header-radens siste celle er tom, mens hver data-rads siste celle inneholder en "Lagre"-knapp + søppelbøtte-ikon - "auto"-bredden ble derfor SMALERE i header enn i radene. Siden 1fr (Navn) er beregnet ut fra "det som er igjen ETTER de faste + auto- kolonnene", ga dette Navn-kolonnen en ANNEN faktisk pikselbredde i header enn i radene - som igjen dyttet ALLE kolonnene etter Navn ut av innbyrdes justering mellom header og rader (kumulativ forskyvning, verifisert som selve årsaken til at overskriftene så "sentrert men feil plassert" ut, uansett hvor mye sentrerings-CSS som ble lagt på selve teksten - problemet lå aldri i tekstjusteringen). --- */ .lookup-list--ingredienser { max-width: 1020px; } .lookup-list--ingredienser .lookup-list__header, .lookup-list--ingredienser .lookup-list__row { grid-template-columns: 1fr 140px 140px 200px 52px 52px 130px; align-items: center; } /* Overskriftene skal sitte SENTRERT over hver sin kolonne, uansett kolonnens egen bredde eller hva slags felt som faktisk ligger under (tekstfelt, dropdown, bilde-boks e.l.) - i motsetning til selve INNHOLDET i radene under, som stort sett er venstrejustert (tekstfelt/ dropdown) eller har egen sentrering (bilde-boksen). Overstyrer derfor alle disse (høyere spesifisitet enn f.eks. .lookup-list__count sin egen text-align, som ellers ville vunnet). */ .lookup-list--ingredienser .lookup-list__header span { display: flex; align-items: center; justify-content: center; text-align: center; } /* Radens egen topp-/bunn-padding er 0 her (var 3px, opprinnelig 6px) - hele den plassen er "lånt" til Beskrivelse-feltet under (min-height 47px -> 53px, +3px i hver ende) i stedet. Radhøyden er UENDRET (0 + 53 = 3 + 47 + 3 = 53px) - Beskrivelse-feltet er nå det som avgjør radhøyden i stedet for bilde-boksen (fortsatt 47px, uendret), ikke lenger nøyaktig likt som den. Bevisst valgt bort litt luft mellom radene (kun den vanlige 1px border-bottom skiller dem nå) til fordel for mer synlig tekst i feltet - se README/samtale for hvorfor. */ .lookup-list--ingredienser .lookup-list__row { padding: 0 4px; } .lookup-list__parent-col { display: flex; align-items: center; } .lookup-list__parent-col [data-lookup-parent-field] { width: 100%; } /* --- Søk-mens-du-skriver for Alias for/Overordnet (Ingredienser) - se assets/js/ingrediens-picker.js. Selve tekstfeltet arver allerede .lookup-list__row input[type="text"] sin grunnstil (kant/padding/bunn) over - trenger derfor kun det som er SPESIELT for denne varianten: plass til fjern-knappen inni feltet, og selve knappens utseende. --- */ .ingrediens-picker { position: relative; display: block; width: 100%; } .ingrediens-picker__input { padding-right: 26px !important; } .ingrediens-picker__input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; } .ingrediens-picker__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted); font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 4px; } .ingrediens-picker__clear:hover { color: var(--paprika); } .lookup-list__desc-col textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 0.85rem; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); resize: vertical; min-height: 53px; } /* Vises i stedet for Beskrivelse-/Bilde-feltet når raden er en slave (alias) - se lookup-master-slave.js. Egen [hidden]-regel siden display:flex på klassen ellers ville overstyrt det native hidden-attributtet (samme fallgruve som bilde-boksen tidligere - se v5-kontekstnotatet). */ .lookup-list__slave-note { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 0.78rem; font-style: italic; } .lookup-list__slave-note[hidden] { display: none; } /* Sentrerer selve bilde-boksen (og "n/a"-notisen for slaver) horisontalt i sin kolonne - var venstrejustert som standard tidligere. */ .lookup-list__img-col { display: flex; justify-content: center; align-items: center; } /* --- Kompakt bilde-boks for lookup-lister (Ingredienser) - fast størrelse uansett om bildet finnes eller ikke, med et plassholder-ikon når det ikke gjør det. Selve boksen ER dropzonen (dra & slipp) OG åpner filvelgeren ved klikk (den er en