/* TANGORA CSS */ .ts-panel { display:flex; } .ts-panel > * { flex:var(--ts-panelbox-flex, 1 1 auto); margin:var(--ts-panelbox-margin, 0px); padding:var(--ts-panelbox-padding, 0px); border-top:var(--ts-panelbox-bordertop, none); border-right:var(--ts-panelbox-borderright, none); border-bottom:var(--ts-panelbox-borderbottom, none); border-left:var(--ts-panelbox-borderleft, none) } /* RESOURCE #2 BEGIN */ /* ========================================================================== DKR – Indberetning (pageid 11, modullayout o-11l1) To kolonner: ejerdata venstre, kattedata højre. DOM (verificeret mod aktuelt markup): .o-11l1 ├── .o-11l1box1.owner – ejerfelter (box3–box9) ├── .o-11l1box2.cat – kattefelter (box10–box19) │ ├── box15 race – quicksearch (#race hidden + #race_QS text) │ ├── box17 køn – .choicegroup med radioknapper │ └── box18 – checkbox + .choicelabel ├── .o-11l1box20 – praksis (fuld bredde) └── div > input.tangorasavebutton – "Gem" (fuld bredde) ADVARSEL – rør ikke position på forfædre til quicksearch-feltet: Tangora.QuickSearch indsætter div.quicksearchselectorbox som søskende til inputtet og sætter inline position:absolute + left/top beregnet ved at summere offsetLeft/offsetTop op gennem offsetParent-kæden, altså i dokumentkoordinater. Får en forfader position:relative (eller transform/ filter/will-change, som også danner containing block), lander dropdownen forkert. Derfor er der bevidst ingen position:relative i denne fil. Specificitet: både modullayoutets CSS og .quicksearchselectorbox-reglerne indsættes EFTER /user/css.ashx i . Derfor dobbelt klasse (.o-11l1.o-11l1, .quicksearchselectorbox.quicksearchselectorbox) hvor der er kollision. Ingen id'er, ingen JS-afhængighed, ingen !important. ========================================================================== */ .o-11l1 { --ts-fg: #1f2933; --ts-muted: #5a6b7a; --ts-line: #d8e0e6; --ts-line-strong: #b9c5ce; --ts-bg: #ffffff; --ts-accent: #1c6b58; --ts-accent-ring: rgba(28, 107, 88, .18); --ts-radius: 10px; --ts-field-gap: 1rem; } /* ========================================================================== 1. Gridden ========================================================================== */ .o-11l1.o-11l1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.75rem; row-gap: 1.5rem; max-width: 1040px; margin: 1.5rem auto 3rem; padding: 0 1rem; color: var(--ts-fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.45; } /* default: alt andet end de to kolonner går på tværs */ .o-11l1 > div { grid-column: 1 / -1; } .o-11l1 > .owner { grid-column: 1; } .o-11l1 > .cat { grid-column: 2; } /* ========================================================================== 2. Kortene ========================================================================== */ .o-11l1 .owner, .o-11l1 .cat { background: var(--ts-bg); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 1.5rem 1.5rem .5rem; box-shadow: 0 1px 2px rgba(16, 32, 45, .05); } /* Sektionsoverskrifter findes ikke i markup, så de sættes her. */ .o-11l1 .owner::before, .o-11l1 .cat::before { display: block; padding-bottom: .5rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--ts-accent); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-accent); } .o-11l1 .owner::before { content: "Ejerens oplysninger"; } .o-11l1 .cat::before { content: "Kattens oplysninger"; } /* ========================================================================== 3. Felter ========================================================================== */ .o-11l1 .ts-field { margin: 0 0 var(--ts-field-gap); } .o-11l1 .ts-field label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 600; color: var(--ts-muted); } /* feltnavne kommer fra databasen i småt – stort begyndelsesbogstav. ::first-letter virker kun på blokelementer, så inline-labels (radio/checkbox) rammes ikke. */ .o-11l1 .ts-field label::first-letter { text-transform: uppercase; } .o-11l1 input[type="text"], .o-11l1 input[type="email"], .o-11l1 input[type="tel"], .o-11l1 input[type="number"], .o-11l1 input[type="date"], .o-11l1 select, .o-11l1 textarea { width: 100%; padding: .5rem .65rem; font: inherit; color: var(--ts-fg); background: var(--ts-bg); border: 1px solid var(--ts-line-strong); border-radius: 6px; transition: border-color .12s ease, box-shadow .12s ease; } .o-11l1 select { padding-right: .4rem; max-width: 100%; } .o-11l1 textarea { min-height: 5rem; resize: vertical; } /* modullayoutet sætter .o-11l1 :focus{outline:none} – synlig fokus tilbage */ .o-11l1 .ts-field input:focus, .o-11l1 .ts-field select:focus, .o-11l1 .ts-field textarea:focus { border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-ring); outline: 2px solid transparent; /* synlig i Windows High Contrast */ outline-offset: 2px; } .o-11l1 input::placeholder { color: #9aa7b2; } /* ========================================================================== 4. Radioknapper (køn) – .choicegroup Wrapper-div'ene har inline float:left. De gøres til flex-items, hvorved float ignoreres pr. spec – ingen !important og ingen clearfix nødvendig, og den kollapsede forældrehøjde fra floats forsvinder. ========================================================================== */ .o-11l1 .choicegroup { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; min-height: 2.35rem; } .o-11l1 .choicegroup > div, .o-11l1 .choicegroup > div > div { display: flex; align-items: center; } .o-11l1 .choicegroup input[type="radio"], .o-11l1 input[type="checkbox"] { width: auto; flex: none; margin: 0 .45rem 0 0; accent-color: var(--ts-accent); } .o-11l1 .choicegroup label { display: inline; margin: 0; font-size: .95rem; font-weight: 400; color: var(--ts-fg); cursor: pointer; } /* gruppeoverskriften (køn) bliver som de øvrige feltlabels */ .o-11l1 .labelbeforechoice { cursor: default; } .o-11l1 .choicegroup input[type="radio"]:focus-visible, .o-11l1 input[type="checkbox"]:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 2px; } /* ========================================================================== 5. Checkbox (neutraliseret) – label ud for feltet Feltet har både en label ovenover og en .choicelabel ved siden af afkrydsningsfeltet, med samme tekst. Den øverste skjules, så rækken læses som "[ ] Neutraliseret" på én linje. :has bruges, så reglen følger feltet og ikke boksnummeret – box-numre flytter sig, når layoutet redigeres. Fejler åbent: uden :has-understøttelse står labelen blot ovenover som før, intet knækker. ========================================================================== */ .o-11l1 .ts-field:has(input[type="checkbox"]) > div:first-child { display: none; } .o-11l1 .ts-field:has(input[type="checkbox"]) > div:last-child { display: flex; align-items: center; min-height: 2.35rem; } .o-11l1 .choicelabel { display: inline; margin: 0; font-size: .95rem; font-weight: 400; color: var(--ts-fg); cursor: pointer; } /* ========================================================================== 6. Quicksearch (race) Dropdownen indsættes af JS som søskende FØR inputtet og får inline position/left/top/max-height/overflow. Her sættes kun udseende – aldrig position, left, top eller width-mekanik der kolliderer med JS'en. ========================================================================== */ .quicksearchselectorbox.quicksearchselectorbox { width: 300px; max-width: calc(100vw - 2rem); padding: .25rem; background: var(--ts-bg, #fff); border: 1px solid var(--ts-line-strong, #b9c5ce); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 32, 45, .16); z-index: 50; } .quicksearchselectorbox.quicksearchselectorbox ul { margin: 0; padding: 0; list-style: none; } .quicksearchselectorbox.quicksearchselectorbox ul li { border: 0; } .quicksearchselectorbox.quicksearchselectorbox ul li a { display: block; margin: 0; padding: .45rem .6rem; border-radius: 5px; color: var(--ts-fg, #1f2933); font-size: .95rem; text-decoration: none; } /* JS tilføjer div.quicksearchselectorbox ul li a:focus med prikket outline ved runtime – dette selektor slår den med flere klasser i b-leddet */ .quicksearchselectorbox.quicksearchselectorbox ul li a:hover, .quicksearchselectorbox.quicksearchselectorbox ul li a:focus { background: var(--ts-accent, #1c6b58); color: #fff; outline: none; } /* ========================================================================== 7. Praksis, sidehoved og Gem-knap ========================================================================== */ .o-11l1 .o-11l1box20 { margin: 0; padding: 1.25rem 1.5rem; background: var(--ts-bg); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); } .pageheader { max-width: 1040px; margin: 2rem auto .25rem; padding: 0 1rem; font-size: 1.6rem; font-weight: 600; color: #1f2933; } .o-11l1 .actionlink, .o-11l1 button, .o-11l1 input[type="submit"] { display: inline-block; width: auto; padding: .65rem 1.6rem; font: inherit; font-weight: 600; color: #fff; background: var(--ts-accent); border: 1px solid var(--ts-accent); border-radius: 6px; text-decoration: none; cursor: pointer; } .o-11l1 .actionlink:hover, .o-11l1 button:hover, .o-11l1 input[type="submit"]:hover { filter: brightness(1.12); } .o-11l1 .actionlink:focus-visible, .o-11l1 input[type="submit"]:focus-visible { box-shadow: 0 0 0 3px var(--ts-accent-ring); outline: 2px solid transparent; outline-offset: 2px; } /* knappen deaktiveres af onclick-handleren under gem */ .o-11l1 input[type="submit"][disabled] { opacity: .55; cursor: default; filter: none; } /* wrapperen omkring Gem – ankret på knappen, ikke på positionen i DOM'en */ .o-11l1 > div:has(> .tangorasavebutton) { text-align: right; margin-top: .25rem; } /* ========================================================================== 8. Responsivt: én kolonne på smalle skærme ========================================================================== */ @media (max-width: 860px) { .o-11l1.o-11l1 { grid-template-columns: minmax(0, 1fr); } .o-11l1 > .cat { grid-column: 1; } .o-11l1 .owner, .o-11l1 .cat { padding: 1.25rem 1.25rem .25rem; } } /* ========================================================================== 9. Statuslinje under e-mail (ejeropslag) Indsættes af dkr-owner-lookup.js i feltets værdi-div. ========================================================================== */ .o-11l1 .ts-lookupstatus { min-height: 1.1rem; margin-top: .3rem; font-size: .8rem; line-height: 1.1rem; color: var(--ts-muted); } .o-11l1 .ts-lookupstatus[data-state="ok"] { color: var(--ts-accent); } .o-11l1 .ts-lookupstatus[data-state="busy"] { opacity: .75; } .o-11l1 .ts-lookupstatus[data-state="warn"] { color: #9a5b12; } /* låste felter: MitID/NemID-verificeret ejer, navn og adresse kan ikke ændres */ .o-11l1 input.ts-locked { background: var(--ts-panel, #f4f7f8); color: var(--ts-muted); border-style: dashed; cursor: not-allowed; } /* ========================================================================== 10. Valgliste når flere ejere deler e-mail Indsættes af dkr-owner-lookup.js under statuslinjen. ========================================================================== */ .o-11l1 .ts-ownerpicker { margin: .5rem 0 1rem; padding: .75rem; background: var(--ts-panel); border: 1px solid var(--ts-line-strong); border-radius: var(--ts-radius); } .o-11l1 .ts-ownerpicker-head { margin-bottom: .5rem; font-size: .8rem; font-weight: 600; color: var(--ts-muted); } .o-11l1 .ts-ownerpicker ul { margin: 0; padding: 0; list-style: none; } .o-11l1 .ts-ownerpicker li { margin-bottom: .35rem; } .o-11l1 .ts-ownerpicker-item { display: block; width: 100%; padding: .5rem .65rem; font: inherit; text-align: left; color: var(--ts-fg); background: var(--ts-bg); border: 1px solid var(--ts-line); border-radius: 6px; cursor: pointer; } .o-11l1 .ts-ownerpicker-item:hover, .o-11l1 .ts-ownerpicker-item:focus-visible { border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-ring); outline: 2px solid transparent; } .o-11l1 .ts-ownerpicker-name { display: block; font-weight: 600; } .o-11l1 .ts-ownerpicker-meta { display: block; margin-top: .15rem; font-size: .82rem; color: var(--ts-muted); } .o-11l1 .ts-ownerpicker-tag { margin-left: .5rem; padding: .05rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; vertical-align: middle; color: #fff; background: var(--ts-accent); border-radius: 999px; } .o-11l1 .ts-ownerpicker-new { margin-top: .35rem; padding: .45rem .9rem; font: inherit; color: var(--ts-accent); background: transparent; border: 1px dashed var(--ts-accent); border-radius: 6px; cursor: pointer; } .o-11l1 .ts-ownerpicker-note { margin-top: .5rem; font-size: .78rem; color: #9a5b12; } /* ejernummer: layoutet har label men intet input, så værdien vises her */ .o-11l1 .ts-ownernumber { display: inline-block; padding: .5rem 0; font-variant-numeric: tabular-nums; color: var(--ts-fg); } /* RESOURCE #2 END */