/* ------------------------------------------------------------------ Drikkeviser.dk To udseender: "aften" (standard, mørk) og "sangbog" (lys). Skiftet sker på , så alt andet arver farverne. ------------------------------------------------------------------ */ :root, [data-tema="aften"] { --bund: #14100C; --flade: #1E1811; --sænket: #100D09; --blæk: #F0E5D2; --blæk-dæmpet: #B0A088; --blæk-svag: #7C6E5B; --streg: #352A1F; --rav: #E5A63E; --rav-mørk: #B57E28; --messing: #77AFA3; --fare: #E08A72; --skygge: none; } [data-tema="sangbog"] { --bund: #E9DFCB; --flade: #F3EBDB; --sænket: #DFD3BB; --blæk: #241C14; --blæk-dæmpet: #5F5140; --blæk-svag: #8A7C68; --streg: #CDBFA3; --rav: #9A5E12; --rav-mørk: #7C4A0C; --messing: #2F6259; --fare: #9C3520; --skygge: 0 1px 0 rgba(36, 28, 20, .06); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Intet må kunne skubbe siden sidelæns. Et enkelt element, der stikker få pixels ud, får hele telefonen til at vippe, når man scroller. */ overflow-x: hidden; } body { margin: 0; background: var(--bund); color: var(--blæk); font-family: "Archivo", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--rav); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; } h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .5em; } h1 { font-weight: 900; font-size: clamp(30px, 6vw, 44px); } h2 { font-weight: 600; font-size: clamp(22px, 4vw, 28px); } h3 { font-weight: 600; font-size: 19px; } p { margin: 0 0 1em; } .under { color: var(--blæk-dæmpet); margin-top: -.4em; } .mini { color: var(--blæk-svag); font-size: 13.5px; } /* ---------- sidehoved ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--streg); background: var(--flade); position: sticky; top: 0; z-index: 40; } .brand { text-decoration: none; color: inherit; display: grid; gap: 1px; } .brand-name { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-size: 25px; letter-spacing: -.02em; } .brand-slogan { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--rav); font-size: 14px; } .topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } /* Korte navne på telefon, hele navne når der er plads */ .topnav .kort { display: none; } .topnav a { display: inline-block; padding: 11px 14px; border-radius: 3px; color: var(--blæk); text-decoration: none; font-size: 15.5px; font-weight: 500; background: none; border: 1px solid transparent; font-family: inherit; cursor: pointer; } .topnav a:hover { border-color: var(--streg); background: var(--sænket); } /* Tema-skiftet bor i sidefoden. Det bruges sjældent, og i toppen stjal det en linje fra navigationen på en telefon. */ .bund .tema-knap { background: none; border: none; padding: 0; font: inherit; font-size: 14.5px; color: var(--rav); text-decoration: underline; cursor: pointer; } .bund .tema-knap:hover { color: var(--rav-mørk); } .tema-knap span { display: none; } [data-tema="aften"] .tema-knap span[data-vis="aften"] { display: inline; } [data-tema="sangbog"] .tema-knap span[data-vis="sangbog"] { display: inline; } /* Mobil-tilpasningen skal stå EFTER grundreglerne ovenfor. Står den før, overskriver grundreglerne den, fordi de har samme specificitet og kommer senere i filen - så bliver menuen ved med at bruge desktop-polstring på en telefon. */ @media (max-width: 560px) { .topbar { padding: 10px 12px; gap: 6px; } /* Navn og slogan på én linje. To linjer koster for meget af skærmen. */ .brand { display: flex; flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; } .brand-name { font-size: 17px; white-space: nowrap; } .brand-slogan { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .brand-slogan::before { content: "— "; } .topnav { gap: 0; } .topnav a { padding: 9px 7px; font-size: 13.5px; } .topnav .lang { display: none; } .topnav .kort { display: inline; } } /* ---------- rammen om indholdet ---------- */ main { max-width: 720px; margin: 0 auto; padding: 28px 20px 80px; } main.bare { max-width: 460px; padding-top: 64px; } .blok { margin: 40px 0 0; } .flash, .kvittering { background: var(--flade); border-left: 3px solid var(--messing); padding: 12px 16px; margin: 0 0 22px; color: var(--blæk-dæmpet); } .fejl { background: var(--flade); border-left: 3px solid var(--fare); padding: 12px 16px; margin: 0 0 18px; color: var(--blæk); } .mangler { color: var(--blæk-svag); } /* ---------- forsiden ---------- */ .hero { padding: 26px 0 8px; } .hero h1 { font-size: clamp(34px, 8vw, 54px); line-height: 1.02; margin-bottom: .55em; } .soegefelt { display: flex; gap: 8px; margin: 0 0 22px; } .soegefelt input { flex: 1 1 auto; min-width: 0; padding: 15px 16px; font: inherit; font-size: 17px; color: var(--blæk); background: var(--flade); border: 1px solid var(--streg); border-radius: 3px; } .soegefelt input::placeholder { color: var(--blæk-svag); } .soegefelt button { padding: 15px 22px; font: inherit; font-weight: 600; font-size: 16px; border: none; border-radius: 3px; cursor: pointer; background: var(--rav); color: var(--bund); } .soegefelt.stor input { font-size: 18px; } /* Træf mens man skriver. Ligger lige under feltet, så tommelfingeren ikke skal flytte sig for at ramme det man leder efter. */ .live-traef { margin: -14px 0 22px; border: 1px solid var(--streg); background: var(--flade); border-radius: 3px; overflow: hidden; max-height: 62vh; overflow-y: auto; } .live-traef[hidden] { display: none; } .live-traf { display: grid; gap: 2px; padding: 13px 16px; text-decoration: none; color: var(--blæk); border-top: 1px solid var(--streg); } .live-traf:first-child { border-top: none; } .live-traf:hover, .live-traf.fremhaevet { background: var(--sænket); } .live-titel { font-weight: 600; font-size: 16.5px; } .live-melodi { color: var(--blæk-svag); font-size: 13.5px; } .live-tom { margin: 0; padding: 14px 16px; color: var(--blæk-svag); font-size: 15px; } .hero-knapper { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .knap { display: inline-block; padding: 14px 20px; border: 1px solid var(--streg); border-radius: 3px; background: var(--flade); color: var(--blæk); font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; text-align: center; } .knap:hover { border-color: var(--rav-mørk); } .knap.primaer { background: var(--rav); color: var(--bund); border-color: var(--rav); } .knap.primaer:hover { background: var(--rav-mørk); border-color: var(--rav-mørk); } .link-knap { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--rav); text-decoration: underline; } .link-knap.fare { color: var(--fare); } /* ---------- kategori-mærkater ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--streg); border-radius: 999px; background: var(--flade); color: var(--blæk); text-decoration: none; font-size: 15px; font-weight: 500; } .chip:hover { border-color: var(--rav-mørk); } .chip.valgt { background: var(--rav); color: var(--bund); border-color: var(--rav); } .chip .antal { color: var(--blæk-svag); font-size: 13px; font-variant-numeric: tabular-nums; } .chip.valgt .antal { color: var(--bund); opacity: .7; } .chips.lille .chip { padding: 7px 12px; font-size: 14px; } .filtre { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; } /* ---------- lister af viser ---------- */ .viseliste { list-style: none; margin: 14px 0 0; padding: 0; } .viseliste li { border-top: 1px solid var(--streg); } .viseliste li:first-child { border-top: none; } .viseliste a { display: grid; gap: 2px; padding: 15px 4px; text-decoration: none; color: var(--blæk); } .viseliste a:hover { background: var(--flade); } .viseliste .t { font-weight: 600; font-size: 17.5px; } .viseliste .m { color: var(--blæk-svag); font-size: 14px; } .bogstav-blok { margin-top: 30px; } .bogstav { font-size: 15px; font-family: "Archivo", sans-serif; font-weight: 600; letter-spacing: .18em; color: var(--rav); margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--streg); } /* ---------- selve visen ---------- */ .vise-hoved { padding-bottom: 8px; } .kladde-maerke { display: inline-block; margin: 0 0 12px; padding: 5px 11px; border: 1.5px solid var(--fare); border-radius: 2px; color: var(--fare); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .alt-titler { color: var(--blæk-dæmpet); font-style: italic; margin-top: -.6em; } /* Melodien står oppe ved titlen - den skal man vide FØR man synger */ .melodi-linje { margin: 6px 0 0; font-size: 15.5px; color: var(--blæk-dæmpet); } /* Credits står under sangen. De er til at slå op, ikke til at læse først. */ .fakta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--streg); } .fakta div { display: grid; gap: 0; } .fakta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blæk-svag); font-weight: 600; } .fakta dd { margin: 0; font-size: 15px; color: var(--blæk-dæmpet); } /* Skillelinjen mellem titel og tekst. Plusset sidder for enden af den, så det er inden for rækkevidde uden at stjæle plads fra titlen. */ .tekst-skille { margin: 28px 0 0; border-top: 1px solid var(--streg); height: 0; display: flex; justify-content: flex-end; } .tekst-skille .knap.plus { transform: translateY(-50%); /* Egen baggrund, så linjen ikke løber tværs gennem knappen */ background: var(--bund); } .tekst-skille .knap.plus.paa-listen { background: var(--messing); } .tekst { margin: 0; padding-top: 34px; } .tekst section { margin: 0 0 30px; } .blok-maerkat { font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--blæk-svag); font-weight: 600; margin: 0 0 7px; } .blok-chorus .blok-maerkat { color: var(--rav); } .linjer { margin: 0; font-size: 19.5px; line-height: 1.62; white-space: normal; } .blok-chorus .linjer { border-left: 3px solid var(--rav); padding-left: 16px; font-style: italic; } /* Syng med står ved titlen, så det er det første man rammer */ .titel-linje { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; /* nowrap: knapperne skal blive ved titlen, også når titlen er lang. Titlen ombrydes i stedet inde i sig selv. */ flex-wrap: nowrap; } /* Titlen skal altid have mindst to tredjedele - den er sidens navn */ .titel-linje h1 { flex: 1 1 auto; min-width: 66%; margin-bottom: 0; } .titel-handlinger { display: flex; gap: 8px; flex: 0 0 auto; padding-top: 5px; } /* Plusset er kun et plus - hvad det gør, står i dets aria-label */ .knap.plus { width: 48px; padding: 0; font-size: 24px; line-height: 1; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; } .knap.plus.paa-listen { background: var(--messing); border-color: var(--messing); color: var(--bund); } .knap.lille { padding: 10px 15px; font-size: 14.5px; font-weight: 500; } /* Kategorierne hører til under sangen sammen med credits */ .kategorier-bund { margin: 18px 0 0; } /* Del hører til under sangen - den bruges når man er færdig med at læse */ .del-linje { margin: 18px 0 0; } @media (max-width: 560px) { .vise-handlinger .knap { padding: 11px 16px; font-size: 15px; } .knap.lille { padding: 9px 14px; font-size: 14px; } } .video summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 17px; border-top: 1px solid var(--streg); border-bottom: 1px solid var(--streg); } .video-ramme { position: relative; margin-top: 16px; aspect-ratio: 16 / 9; width: 100%; background: var(--sænket); border: 1px solid var(--streg); display: flex; align-items: center; justify-content: center; } .video-ramme iframe { width: 100%; height: 100%; border: 0; } .video-start { padding: 14px 22px; font: inherit; font-weight: 600; cursor: pointer; background: var(--rav); color: var(--bund); border: none; border-radius: 3px; } .historie p { color: var(--blæk-dæmpet); } .historie .kilde { font-size: 14.5px; color: var(--blæk-svag); } .tilbage-til-hoved, .admin-genvej { font-size: 15px; color: var(--blæk-svag); margin-top: 30px; } /* ---------- festtilstand ---------- */ .fest { position: fixed; inset: 0; z-index: 100; background: #0B0906; color: #F6EEDC; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); /* Intet må kunne skubbes til siden herinde - man rammer skævt, når man synger og holder et glas i den anden hånd */ overflow: hidden; overscroll-behavior: contain; touch-action: pan-y; max-width: 100vw; } .fest[hidden] { display: none; } .fest-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #2C2318; } .fest-titel { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 17px; color: #C8B698; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fest-vaerktoej { display: flex; gap: 6px; flex: 0 0 auto; } .fest-top button { background: none; border: 1px solid #3A2F21; color: #C8B698; padding: 10px 14px; border-radius: 3px; font: inherit; cursor: pointer; min-width: 44px; } #fest-mindre, #fest-stoerre { font-size: 15px; font-weight: 600; } .fest-scene { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden; padding: 20px 0; overscroll-behavior: contain; width: 100%; max-width: 100%; } .fest-blok { width: 100%; max-width: 100%; } .fest-blok[hidden] { display: none; } .fest-maerkat { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #8C7A5E; font-weight: 600; margin: 0 0 16px; text-align: center; } .fest-linjer { margin: 0; text-align: center; /* Skalaen sættes af A- og A+ og huskes på telefonen */ font-size: calc(clamp(26px, 6.2vw, 44px) * var(--fest-skala, 1)); line-height: 1.38; font-weight: 500; /* Et langt ord må hellere brydes end skubbe hele siden sidelæns */ overflow-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; } .fest-bund { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #2C2318; } .fest-bund button { flex: 1 1 0; padding: 20px 10px; background: #1B150E; border: 1px solid #3A2F21; color: #F6EEDC; font: inherit; font-weight: 600; font-size: 17px; border-radius: 3px; cursor: pointer; } .fest-bund button:disabled { opacity: .35; } /* Tippet til den der åbner Syng med første gang */ .fest-tip { margin: 0 0 10px; padding: 11px 14px; border: 1px solid #2C2318; border-radius: 3px; background: #14100C; color: #8C7A5E; font-size: 13.5px; line-height: 1.45; text-align: center; transition: opacity .35s ease; } .fest-tip[hidden] { display: none; } .fest-tip.gemmer { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fest-tip { transition: none; } } /* Tælleren er en knap: tryk for at hoppe direkte til et vers */ #fest-tael { flex: 0 0 auto; color: #C8B698; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 74px; text-align: center; background: none; border: 1px solid #3A2F21; border-radius: 3px; padding: 20px 8px; font-family: inherit; cursor: pointer; } /* Knapperne siger hvad man hopper til, så teksten kan blive lang */ .fest-bund button { min-width: 0; } .fest-bund #fest-forrige, .fest-bund #fest-naeste { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- hop til et vers ---------- */ .fest-oversigt { position: absolute; inset: 0; background: #0B0906; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); z-index: 2; } .fest-oversigt[hidden] { display: none; } .fest-oversigt-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #2C2318; color: #8C7A5E; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } .fest-oversigt-top button { background: none; border: 1px solid #3A2F21; color: #C8B698; padding: 10px 16px; border-radius: 3px; font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; } .fest-oversigt-liste { list-style: none; margin: 0; padding: 8px 0 0; overflow-y: auto; flex: 1 1 auto; counter-reset: hop; } .fest-oversigt-liste li { counter-increment: hop; } .fest-hop { display: block; width: 100%; text-align: left; padding: 16px 14px; background: none; border: none; border-bottom: 1px solid #1E1810; color: #F6EEDC; font: inherit; font-size: 18px; cursor: pointer; } .fest-hop::before { content: counter(hop); display: inline-block; min-width: 34px; color: #8C7A5E; font-size: 14px; font-variant-numeric: tabular-nums; } .fest-hop.nu { color: #E5A63E; font-weight: 600; } .fest-hop.nu::before { color: #E5A63E; } /* ---------- formularer ---------- */ .formular { display: grid; gap: 20px; margin-top: 22px; } .formular label { display: grid; gap: 6px; } .formular label > span { font-weight: 600; font-size: 15px; } .formular small { color: var(--blæk-svag); font-size: 13.5px; line-height: 1.45; } .formular input[type="text"], .formular input[type="url"], .formular input[type="password"], .formular input[type="search"], .formular select, .formular textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--blæk); background: var(--flade); border: 1px solid var(--streg); border-radius: 3px; } .formular textarea { line-height: 1.55; resize: vertical; } .tekstfelt { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; } .formular fieldset { border: 1px solid var(--streg); border-radius: 3px; padding: 18px 20px 22px; margin: 0; display: grid; gap: 18px; } .formular legend { padding: 0 8px; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--rav); } .to-kolonner, .tre-kolonner { display: grid; gap: 18px; } @media (min-width: 640px) { .to-kolonner { grid-template-columns: 1fr 1fr; } .tre-kolonner { grid-template-columns: 1fr 1fr .6fr; } } .valg { display: flex !important; align-items: center; gap: 10px; } .valg input { width: 20px; height: 20px; accent-color: var(--rav); } .gem-linje { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--streg); position: sticky; bottom: 0; background: var(--bund); } .gem-linje .knap { margin-left: auto; } .hjaelp { color: var(--blæk-svag); font-size: 14px; } .login-kort { background: var(--flade); border: 1px solid var(--streg); padding: 30px 28px 34px; border-radius: 4px; } .login-brand { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-size: 22px; color: var(--blæk); text-decoration: none; display: block; margin-bottom: 18px; } .tilbage { margin: 22px 0 0; font-size: 15px; } /* ---------- admin ---------- */ .admin-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .admin-nav { display: flex; gap: 8px; flex-wrap: wrap; } .admin-nav .knap { padding: 11px 15px; font-size: 15px; } .tabel-ramme { overflow-x: auto; margin-top: 22px; } .admin-tabel { width: 100%; border-collapse: collapse; font-size: 15px; } .admin-tabel th { text-align: left; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--blæk-svag); padding: 0 12px 8px 0; border-bottom: 1px solid var(--streg); white-space: nowrap; } .admin-tabel td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--streg); vertical-align: top; } .admin-tabel .tal { text-align: right; font-variant-numeric: tabular-nums; } .admin-tabel .handling { display: flex; gap: 12px; align-items: center; white-space: nowrap; } .admin-tabel .handling form { display: inline; } .status { font-size: 12.5px; font-weight: 600; white-space: nowrap; } .status.ude { color: var(--messing); } .status.kladde { color: var(--blæk-svag); } .admin-tabel .mini { display: inline-block; margin-left: 6px; } .format-eksempel { background: var(--sænket); border: 1px solid var(--streg); padding: 16px 18px; overflow-x: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; line-height: 1.55; color: var(--blæk-dæmpet); } .rapport { margin: 22px 0; } .rapport-liste { margin: 10px 0 0; padding-left: 20px; color: var(--blæk-dæmpet); font-size: 15px; } /* ---------- sidefod ---------- */ .bund { border-top: 1px solid var(--streg); padding: 24px 20px 40px; color: var(--blæk-svag); font-size: 14.5px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; max-width: 720px; margin: 0 auto; } .bund nav { display: flex; gap: 16px; flex-wrap: wrap; } .kildegenvej { margin: 0; padding: 12px 16px; background: var(--sænket); border-left: 3px solid var(--messing); font-size: 15px; color: var(--blæk-dæmpet); } .kildegenvej a { font-weight: 600; } /* ---------- aftenens liste ---------- */ .besked { background: var(--flade); border-left: 3px solid var(--messing); padding: 12px 16px; color: var(--blæk-dæmpet); } .liste-viser { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: v; } .liste-vise { counter-increment: v; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 4px; border-top: 1px solid var(--streg); background: var(--bund); } .liste-vise:first-child { border-top: none; } .liste-vise.traekkes { opacity: .4; } .liste-vise .greb { color: var(--blæk-svag); cursor: grab; font-size: 18px; line-height: 1; } .liste-titel { flex: 1 1 auto; min-width: 0; color: var(--blæk); text-decoration: none; font-weight: 600; font-size: 17px; } .liste-titel::before { content: counter(v) ". "; color: var(--rav); font-variant-numeric: tabular-nums; } .liste-knapper { display: flex; gap: 6px; flex: 0 0 auto; } .liste-knapper button { width: 44px; height: 44px; background: var(--flade); color: var(--blæk); border: 1px solid var(--streg); border-radius: 3px; font: inherit; font-size: 17px; cursor: pointer; } .liste-knapper button:disabled { opacity: .3; cursor: default; } .liste-knapper .fjern { color: var(--fare); } .knap.paa-listen { border-color: var(--messing); color: var(--messing); } /* ---------- print: en lille sangbog til bordet ---------- */ .print-bog { display: none; } @media print { .topbar, .bund, .vise-handlinger, .fest, .video, .admin-genvej, .liste-viser, .admin-top, .hjaelp, .besked, .filtre { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .linjer { font-size: 12pt; } a { color: #000; text-decoration: none; } body.printer-bog main > *:not(.print-bog) { display: none !important; } body.printer-bog .print-bog { display: block; } .print-forside { text-align: center; margin-bottom: 28mm; } .print-forside h1 { font-size: 30pt; margin: 0 0 6pt; } .print-forside p { font-style: italic; font-size: 13pt; margin: 0; } .print-vise { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14mm; } .print-vise h2 { font-size: 15pt; margin: 0 0 2pt; } .print-melodi { font-size: 9.5pt; font-style: italic; margin: 0 0 6pt; } .print-blok { margin: 0 0 7pt; } .print-maerkat { font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 2pt; color: #555; } .print-linjer { margin: 0; white-space: pre-wrap; font-size: 11pt; line-height: 1.4; } .print-omkvaed .print-linjer { font-style: italic; padding-left: 5mm; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }