/* Site colour palette, generated at https://coolors.co/1e2129-68957f-d9d7dd-d6aec3-a64253 #d6aec3 - headers #d9d7dd - body text and hyperlinks (hyperlinks turn #68957f on hover) #68957f - buttons and admonition box outline/header panel #1e2129 - background #a64253 - unused (part of the generated palette, no role assigned yet) */ /* This stops the logo disappearing at small screen sizes*/ @media screen and (max-width: 76.234375em) { .md-header__button.md-logo { display: inline-block; object-fit: cover; } } @media screen and (max-width: 450px) { .md-header__button.md-logo img, .md-header__button.md-logo svg { fill: currentcolor; display: block; height: 1rem; width: auto; } } @media screen and (max-width: 390px) { .md-header__button.md-logo img, .md-header__button.md-logo svg { fill: currentcolor; display: block; height: 0.9rem; width: auto; } } @media screen and (max-width: 375px) { .md-header__button.md-logo img, .md-header__button.md-logo svg { fill: currentcolor; display: block; height: 0.75rem; width: auto; } } /* Zensical's "modern" theme variant's slate scheme defaults to a darker background (5% lightness) and different code-block/shadow colors than the live mkdocs-material site (14% lightness). Match those values here so the colour scheme is identical to https://www.neuroradiology.com/ */ [data-md-color-scheme="slate"] { --md-default-bg-color: #1e2129; --md-default-bg-color--light: rgba(30, 33, 41, 0.54); --md-default-bg-color--lighter: rgba(30, 33, 41, 0.26); --md-default-bg-color--lightest: rgba(30, 33, 41, 0.07); --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82); --md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1); --md-code-bg-color--light: hsla(var(--md-hue), 15%, 18%, 0.9); --md-code-bg-color--lighter: hsla(var(--md-hue), 15%, 18%, 0.54); --md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a; --md-shadow-z2: 0 0.2rem 0.5rem #00000040, 0 0 0.05rem #00000040; --md-shadow-z3: 0 0.2rem 0.5rem #0006, 0 0 0.05rem #00000059; --md-typeset-color: #d9d7dd; /* body text */ --md-accent-fg-color: #68957f; /* buttons */ } /* Zensical sets data-md-color-primary="indigo" on by default (unlike mkdocs-material, which omits the attribute for the default colour), and its palette CSS has a same-scheme+primary compound selector that's more specific than the rule above, so it wins over a plain scheme selector and the links stayed indigo/blue. Match that specificity here. */ [data-md-color-scheme="slate"], [data-md-color-scheme="slate"][data-md-color-primary="indigo"] { --md-typeset-a-color: #d9d7dd; /* hyperlinks, same as body text */ } /* The active (current page) item in the left nav defaults to a translucent accent-colour background (indigo-tinted, since --md-accent-fg-color-- transparent isn't overridden). Use the same grey-ish background as the plain :hover state instead. */ .md-nav--primary .md-nav__item .md-nav__link--active { background-color: var(--md-default-fg-color--lightest); } /* CUSTOM ADMONITION BOXES */ /* set custom admonition icons */ /* Sir Dogfrey Houndsfield */ :root { --md-admonition-icon--sdh: url('data:image/svg+xml;charset=utf-8, '); --md-admonition-icon--case-of-the-month: url("/assets/icons/case-of-the-month.svg"); } .md-typeset .admonition.sdh, .md-typeset details.sdh { border-color: #68957f; } .md-typeset .sdh > .admonition-title, .md-typeset .sdh > summary { background-color: rgba(104, 149, 127, 0.1); } .md-typeset .sdh > .admonition-title::before, .md-typeset .sdh > summary::before { background-color: #68957f; -webkit-mask-image: var(--md-admonition-icon--sdh); mask-image: var(--md-admonition-icon--sdh); } /* End: Sir Dogfrey Houndsfield */ /* Case of the month question box: custom icon + black background (matching the `info` "Case history" box on the article pages). The reveal/answer box on the homepage uses the built-in `success` admonition, so it matches the `success` reveal box on the article pages (green border + plain green tick) with no extra styling here. */ .md-typeset .admonition.case-of-the-month, .md-typeset details.case-of-the-month { background-color: #000; } .md-typeset .case-of-the-month > .admonition-title::before, .md-typeset .case-of-the-month > summary::before { -webkit-mask-image: var(--md-admonition-icon--case-of-the-month); mask-image: var(--md-admonition-icon--case-of-the-month); background-color: #d9d7dd; } /* End: Case of the month question box */ /* Case of the month PAGES: the "Case history" info box. Styled like the homepage case boxes - black background with a grey (body-text) icon. `info` is currently only used on the case-of-the-month pages. */ .md-typeset .admonition.info, .md-typeset details.info { background-color: #000; } .md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before { background-color: #d9d7dd; } /* End: Case of the month info box */ /* Article summary ("abstract") boxes: fill with the search-box grey so the whole box (body + title bar) reads as a single flat colour. */ .md-typeset .admonition.abstract, .md-typeset details.abstract { background-color: #353840; } .md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary { background-color: transparent; } /* End: Article abstract box */ /* Figure image caption admonition*/ .md-typeset .admonition.image-box, .md-typeset details.image-box { color: #f4f4f4; border-color: rgba(30, 33, 41, 0); margin: 0px; padding-left: 10px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; background-color: black; border-top-right-radius: 0.0rem; border-top-left-radius: 0.0rem; border-bottom-right-radius: 0.2rem; border-bottom-left-radius: 0.2rem; box-shadow: 0 0 10px rgba(255, 255, 255, 0.33); /* White shadow with 50% intensity */ } .md-typeset .image-box > .admonition-title, .md-typeset .image-box > summary { color: yellow; background-color: rgba(30, 33, 41, 0.1); margin: 0px; padding: 0px; border: 0px; } .md-typeset .image-box > .admonition-title::before, .md-typeset .image-box > summary::before { color: yellow; background-color: rgb(30, 33, 41); -webkit-mask-image: var(--md-admonition-icon--image-box); mask-image: var(--md-admonition-icon--image-box); margin: 0px; padding: 0px; } /* End: Figure image caption admonition*/ /* Panel styling - full width, height capped to at most 66% of the (now dynamic) width, rather than a fixed pixel height that made the image render at a fixed, small thumbnail size regardless of the available column width. `aspect-ratio` alone would force that exact box shape and letterbox (blank bars above/below) any image whose natural ratio isn't 100:66 - these panel images are usually wider than that already, so the cap is applied as a genuine upper bound via container query units instead: it only engages for unusually tall images, and otherwise the image just renders at its natural height with no added space. */ .md-typeset .admonition.image-box { container-type: inline-size; } img[alt^="panels-"] { width: 100%; height: auto; max-height: 66cqw; object-fit: contain; } /* When an image-box holds more than one panel image (authored on consecutive lines so they share one paragraph), lay them side by side and split the width equally, so the combined width is 100%. A single image still fills 100%, so no count detection is needed. Scoped to image-containing paragraphs so captions are untouched. */ .md-typeset .image-box > p:has(img[alt^="panels-"]) { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; } .md-typeset .image-box > p:has(img[alt^="panels-"]) > * { flex: 1 1 0; min-width: 0; } /* Case of the month pages: their panel images sit inside the "Case history" info box (not an image-box) and use a different alt, so give that box the same container context and apply the identical height cap. */ .md-typeset .admonition.info { container-type: inline-size; } .md-typeset .admonition.info img { width: 100%; height: auto; max-height: 66cqw; object-fit: contain; } /* Heading colour (see palette comment at top of file) + font sizes matching the live site. This was originally scoped to a "custom_light" colour scheme that isn't used any more (this site now only configures "slate"), so it's applied as a plain rule instead - the slate background is unaffected. */ .md-typeset h1 { color: #d6aec3; font-weight: bold; font-size: 24px; } .md-typeset h2 { color: #d6aec3; font-weight: bold; font-size: 20px; } .md-typeset { font-size: 14px; line-height: 1.4; } /* ------------------------------------------------------------------------- */ /* Contact / contribute forms. */ /* Shared by contact.md and contribute.md so both forms are identical. */ /* Everything is scoped under .fs_form_div, so site-wide .md-button etc. are */ /* untouched. Colours use the theme's own palette (accent #68957f, body text */ /* #d9d7dd) with the #353840 panel grey used elsewhere on the site. */ /* ------------------------------------------------------------------------- */ .fs_form_div { width: 100%; margin: 2rem 0; } .fs_form_div form.fs_g-3 { display: flex; flex-direction: column; gap: 1.25rem; } .fs_form_div .fs_col-md-12 { display: flex; flex-direction: column; } .fs_form_div .fs_form-label { color: var(--md-typeset-color); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; margin-bottom: 0.4rem; } .fs_form_div .fs_form-control, .fs_form_div .fs_textarea { padding: 0.65rem 0.75rem; border: 1px solid #5c5f67; border-radius: 4px; background: #353840; color: var(--md-typeset-color); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .fs_form_div .fs_textarea { resize: vertical; min-height: 8rem; } .fs_form_div .fs_form-control::placeholder, .fs_form_div .fs_textarea::placeholder { color: rgba(217, 215, 221, 0.4); } .fs_form_div .fs_form-control:focus, .fs_form_div .fs_textarea:focus { outline: none; border-color: var(--md-accent-fg-color); box-shadow: 0 0 0 2px rgba(104, 149, 127, 0.25); } /* Submit button */ .fs_form_div .md-button { align-self: center; background: var(--md-accent-fg-color); border: none; border-radius: 4px; color: var(--md-default-bg-color); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 3rem; cursor: pointer; transition: background-color 0.2s ease; box-shadow: none; } .fs_form_div .md-button:hover { background: #7dae94; color: var(--md-default-bg-color); box-shadow: none; transform: none; } .fs_form_div .fs_contact_button { margin-top: 0.25rem; } /* File upload (contribute page only) */ .fs_form_div .file-upload-area { border: 1.5px dashed #5c5f67; border-radius: 6px; padding: 2rem; text-align: center; background: #353840; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .fs_form_div .file-upload-area:hover, .fs_form_div .file-upload-area.dragover { border-color: var(--md-accent-fg-color); background: #3b3f48; } .fs_form_div .upload-icon { width: 40px; height: 40px; margin: 0 auto 0.75rem; position: relative; } .fs_form_div .upload-icon::before { content: ''; position: absolute; width: 28px; height: 34px; border: 2px solid #8a8d95; border-radius: 2px; left: 50%; top: 55%; transform: translate(-50%, -50%); } .fs_form_div .upload-icon::after { content: ''; position: absolute; width: 8px; height: 8px; border-right: 2px solid #8a8d95; border-bottom: 2px solid #8a8d95; left: 50%; top: 30%; transform: translate(-50%, -50%); } .fs_form_div .upload-subtext { color: rgba(217, 215, 221, 0.7); font-size: 0.8rem; line-height: 1.5; } .fs_form_div .fs_form-label-upload { display: none; } .fs_form_div .checkbox-container { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.25rem 0; } .fs_form_div .fs_form-label-contributor { color: var(--md-typeset-color); cursor: pointer; font-size: 0.8rem; font-weight: normal; line-height: 1.4; margin: 0; } .fs_form_div input[type="checkbox"] { accent-color: var(--md-accent-fg-color); margin: 0; margin-top: 0.15rem; flex-shrink: 0; } .fs_form_div .file-name { color: var(--md-accent-fg-color); font-weight: 500; margin-top: 0.75rem; font-size: 0.8rem; } @media (max-width: 768px) { .fs_form_div { margin: 1rem 0; } .fs_form_div .file-upload-area { padding: 1.5rem; } } /* End: contact / contribute forms */ /* Keep page content at its normal width when the TOC is hidden via `hide: [toc]`. By default hiding the TOC removes its column entirely and the flex-grow content expands to fill the gap. Instead, at the desktop breakpoint where the TOC is normally a column, keep the 12.1rem column reserved but invisible, so the content width is unchanged. Below this breakpoint the TOC is a floating button rather than a column, so nothing needs reserving there. */ @media screen and (min-width: 76.25em) { .md-sidebar--secondary[hidden] { display: block; visibility: hidden; } [dir="ltr"] .md-sidebar--secondary[hidden] ~ .md-content > .md-content__inner { margin-right: 1.2rem; } [dir="rtl"] .md-sidebar--secondary[hidden] ~ .md-content > .md-content__inner { margin-left: 1.2rem; } } /* End: preserve content width when TOC hidden */