/* ========================================================================== Söndaghelaveckan – publik stil Återskapar originalsajtens utseende: mörk fast header, innehåll 70 % + sidopanel 25 %, Arial, blå knappar (#0087db → #0068a0) och blå sidfot. Mörkt läge via färgvariabler: följer systemets inställning, kan överstyras med knappen i headern (data-theme på ). ========================================================================== */ :root { color-scheme: light; --bg: #f9f9f9; --text: #333; --heading: #000; --muted: #888; --link: #0068a0; --border: #ccc; --card: #fff; --card-shadow: 0 4px 4px rgba(0, 0, 0, .2); --header-bg: rgba(51, 51, 51, .85); --box-bg: #dddcdc; --box-shadow: inset 0 0 4px 4px #d5d5d5; --box-rule: #f9f9f9; --input-bg: #fff; --input-border: #dedede; --input-text: #666; --btn-from: #0087db; --btn-to: #0068a0; --footer-bg: #0068a0; --error-bg: #fde8e8; --error-text: #922; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #15171a; --text: #d3d7dc; --heading: #f3f5f7; --muted: #8e959d; --link: #62b6ee; --border: #30353b; --card: #1e2125; --card-shadow: 0 4px 10px rgba(0, 0, 0, .45); --header-bg: rgba(10, 11, 13, .9); --box-bg: #23272c; --box-shadow: inset 0 0 0 1px #30353b; --box-rule: #3a4047; --input-bg: #1e2125; --input-border: #3a4047; --input-text: #e3e6e9; --btn-from: #0a8ee0; --btn-to: #005f93; --footer-bg: #0b3b58; --error-bg: #3a1d1d; --error-text: #f2b8b5; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #15171a; --text: #d3d7dc; --heading: #f3f5f7; --muted: #8e959d; --link: #62b6ee; --border: #30353b; --card: #1e2125; --card-shadow: 0 4px 10px rgba(0, 0, 0, .45); --header-bg: rgba(10, 11, 13, .9); --box-bg: #23272c; --box-shadow: inset 0 0 0 1px #30353b; --box-rule: #3a4047; --input-bg: #1e2125; --input-border: #3a4047; --input-text: #e3e6e9; --btn-from: #0a8ee0; --btn-to: #005f93; --footer-bg: #0b3b58; --error-bg: #3a1d1d; --error-text: #f2b8b5; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, form, fieldset, ul, ol { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: Arial, Verdana, sans-serif; font-size: 100%; line-height: 1; text-align: center; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img, video { max-width: 100%; } h1, h2, h3 { color: var(--heading); font-weight: bold; } h1 { font-size: 2em; margin: 0 0 16px; } h2 { font-size: 1.6875em; line-height: 1.125em; margin: 16px 0; } h2 a { color: var(--heading); } p { font-size: .75em; line-height: 1.25em; color: var(--text); margin-bottom: 20px; } .clearfix::after { content: ""; display: table; clear: both; } .border-r { border-right: 1px solid var(--border); } /* Header ========================================================================== */ #top { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; padding: 20px 16px; background: #333; background-color: var(--header-bg); text-align: center; } #top > a { color: #fff; text-decoration: none; } #top .site-title { color: #fff; margin: 0 0 5px; font-size: 2em; font-weight: bold; } #top p.summary a { color: #fff; text-decoration: none; } #top p.summary a:hover { text-decoration: underline; } #top p { color: #fff; font-size: .875em; font-weight: bold; margin: 0; } #top p.summary { margin-top: 5px; } #top .search { display: flex; gap: 3%; width: 50%; margin: 10px auto 0; } #top .search label { position: absolute; left: -9999px; } #top .search input[type="search"] { flex: 1 1 auto; margin: 0; } #top .search input[type="submit"] { flex: 0 0 20%; margin: 0; } /* Knapp för ljust/mörkt läge */ .theme-toggle { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: .75; } .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; border-color: rgba(255, 255, 255, .6); } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; } } /* Formulär ========================================================================== */ input, select, textarea { font: inherit; font-size: .875em; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 5px; color: var(--input-text); padding: 0 10px; margin: 5px 0 0; } input { height: 27px; line-height: 25px; } textarea { line-height: 1.4; padding: 6px 10px; width: 100%; } input[type="search"] { -webkit-appearance: none; appearance: none; } input::placeholder { color: var(--muted); opacity: 1; } #top input[type="search"] { background: #fff; color: #444; border-color: #dedede; } :root[data-theme="dark"] #top input[type="search"] { background: #2a2e33; color: #eef0f2; border-color: #454b52; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #top input[type="search"] { background: #2a2e33; color: #eef0f2; border-color: #454b52; } } input[type="submit"], .button { display: inline-block; height: 27px; padding: 0 12px; border: none; border-radius: 5px; color: #fff; font-size: .75em; font-weight: bold; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: var(--btn-from) linear-gradient(to bottom, var(--btn-from) 0%, var(--btn-to) 100%); cursor: pointer; } input[type="submit"]:hover, .button:hover { background: var(--btn-to); text-decoration: none; } input[type="text"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="email"]:focus, textarea:focus { outline: none; box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 0 2px var(--btn-from); } /* Layout ========================================================================== */ #wrapper { width: 90%; max-width: 1100px; margin: 0 auto; text-align: left; } #content { float: left; width: 70%; margin-top: 170px; } #sidebar { float: right; width: 25%; margin-top: 170px; } /* Sidopanel */ #sidebar h2 { font-size: .875em; color: var(--text); margin: 0 0 10px; } #sidebar .item-placeholder { background: var(--box-bg); border: none; border-radius: 5px; box-shadow: var(--box-shadow); margin-bottom: 30px; padding: 10%; } #sidebar .item-placeholder a { color: #fff; display: block; text-decoration: none; } #sidebar .item-placeholder h2 { border-bottom: 1px dotted var(--box-rule); color: var(--text); font-size: .75em; line-height: 1.25em; margin: 0; padding-bottom: 10px; } #sidebar .item-placeholder p { font-size: .6875em; font-weight: bold; margin: 20px 0 0; } #sidebar .btn { border-radius: 5px; padding: 10px; text-align: center; color: #fff; background: var(--btn-from) linear-gradient(to bottom, var(--btn-from) 0%, var(--btn-to) 100%); } #sidebar .item-placeholder a:hover .btn { background: var(--btn-to); } #sidebar p.social { margin: 15px 0 0; } .icon-ps { position: relative; padding-left: 22px; } .icon-ps::before { content: "+"; position: absolute; left: 0; top: -1px; width: 16px; height: 16px; border-radius: 50%; background: var(--btn-to); color: #fff; font-size: 14px; line-height: 16px; text-align: center; } /* Utgivare / sökresultat ========================================================================== */ #desc-publisher { background: var(--card); padding: 20px; margin-bottom: 30px; box-shadow: var(--card-shadow); } #desc-publisher::after { content: ""; display: table; clear: both; } #desc-publisher h1 { font-size: 1em; line-height: 1.3; } #desc-publisher p:last-child { margin-bottom: 0; } #desc-publisher .channellogo { float: right; width: 110px; height: auto; margin: 0 0 10px 20px; border-radius: 3px; } #desc-publisher.page h1 { font-size: 1.4em; } .page-body { font-size: .875em; line-height: 1.5; } .page-body p { font-size: 1em; line-height: 1.5; } /* Avsnitt ========================================================================== */ .item-placeholder { border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 20px; } .item-placeholder p { font-size: .875em; margin: 8px 0 5px; } .item-placeholder header p { margin: 0; font-size: .6875em; text-transform: uppercase; } .item-placeholder header p a { color: var(--text); } .item-placeholder header h2 { margin-top: 5px; } .item-placeholder .author { display: inline-block; font-size: 11px; margin-top: 3px; } .item-placeholder header .author + .author { padding-left: 4px; } .item-placeholder .duration::before { content: "· "; } .item-placeholder .desc { color: var(--text); } .item-placeholder .audio { margin: 8px 0 5px; } .item-placeholder audio { width: 100%; max-width: 300px; height: 40px; } .item-placeholder video { width: 100%; max-height: 360px; background: #000; } .item-placeholder .link { margin-top: 5px; } .item-placeholder footer { margin-top: 14px; } .item-placeholder footer p { color: var(--muted); font-size: .6875em; line-height: 1.25em; margin: 0; } .item-placeholder footer span { display: block; margin: 0 0 5px; } /* Avsnittssida: titeln är sidans h1 men ser ut som listans h2 */ .item-placeholder header h1 { font-size: 1.6875em; line-height: 1.125em; margin: 5px 0 16px; } /* Brödsmulor */ #breadcrumbs { margin: 0 0 16px; } #breadcrumbs ol { list-style: none; margin: 0; padding: 0; font-size: .6875em; color: var(--muted); line-height: 1.5; } #breadcrumbs li { display: inline; } #breadcrumbs li + li::before { content: "›"; margin: 0 6px; } #breadcrumbs a { color: var(--muted); } /* Fler avsnitt / översiktslistor */ .related { margin: 10px 0 30px; } .related h2 { font-size: 1em; margin: 0 0 8px; } .related ul { list-style: none; margin: 0; padding: 0; } .related li { font-size: .8125em; line-height: 1.4; padding: 6px 0; border-bottom: 1px solid var(--border); } .related li small { color: var(--muted); margin-left: 6px; } .directory { margin-bottom: 30px; } .directory .letters { font-size: .8125em; line-height: 2; margin-bottom: 14px; } .directory .letters a { display: inline-block; min-width: 1.6em; text-align: center; } .directory h2 { font-size: 1.1em; margin: 20px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .directory ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; } .directory li { font-size: .8125em; line-height: 1.5; padding: 2px 0; break-inside: avoid; } .directory li small { color: var(--muted); } @media (max-width: 520px) { .directory ul { columns: 1; } } /* Sidnumrering */ .navigation { margin: 0 0 18px; text-align: center; color: var(--muted); font-size: .875em; } .navigation a, .navigation span { display: inline-block; padding: 5px; } .navigation span.current { border: 1px solid var(--border); } /* Ansökningsformulär */ #contentForm label { display: block; font-size: 13px; margin-top: 15px; } #contentForm input[type="text"], #contentForm input[type="url"], #contentForm input[type="email"] { display: block; width: 100%; max-width: 500px; } #contentForm textarea { max-width: 500px; } #contentForm input[type="submit"] { margin-top: 20px; } #contentForm .hp { position: absolute; left: -9999px; } #contentForm label.check { display: flex; gap: 8px; align-items: flex-start; max-width: 500px; line-height: 1.4; } #contentForm label.check input { width: auto; height: auto; margin: 2px 0 0; flex: none; } .page-body h1, .page-body h2, .page-body h3 { margin: 0 0 12px; line-height: 1.3; } .page-body h1 { font-size: 1.4em; } .page-body h2, .page-body h3 { font-size: 1.15em; } .form-errors { background: var(--error-bg); border-left: 4px solid #c0392b; padding: 10px 15px; margin-bottom: 20px; } .form-errors p { margin: 4px 0; color: var(--error-text); } /* Sidfot ========================================================================== */ #footer { clear: both; margin-top: 50px; padding: 30px 16px; background: var(--footer-bg); } #footer p, #footer a { color: #fff; } #footer p { font-size: .6875em; font-weight: bold; margin: 0; } /* Responsivt ========================================================================== */ @media (min-width: 1100px) { #top .search { width: 30%; } } @media (max-width: 720px) { #top .search { width: 90%; } } @media (max-width: 520px) { #top { position: relative; } #top .site-title { font-size: 1.4em; padding: 0 34px; } #top .search { width: 100%; } .theme-toggle { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 13px; } #wrapper { width: auto; padding: 0 16px; } #content, #sidebar { float: none; width: 100%; margin-top: 30px; } #sidebar { margin-top: 50px; } h2 { font-size: 1.375em; } #desc-publisher .channellogo { width: 72px; } } #contentForm .captcha { margin-top: 20px; }