/* All the colours go in here */ :root { --ui-background: #fafafa; --header-bg: #eee; --button-bg: #36c; --link-fg: #36c; --link-hover-fg: #25a; --button-fg: #fff; --button-alt-fg: #595959; --button-hover-fg: #fff; --button-hover-bg: #236; --lightbox: rgba(0, 55, 0, 0.5); --pane-border: #ddd; --pane-bg: #fff; --text-fg: #121; --selected-tab: #444; --tab-hover-bg: #eee; --tab-hover-fg: #25a; --example-bg: #f0f0f0; --example-border: #e0e0e0; --log-fg: #f00; color-scheme: light; } /* To enable dark mode we put a 'dark' class on the node, and these overidden colours are used. */ :root.dark { --ui-background: #232; --header-bg: #343; --lightbox: rgba(0, 0, 0, 0.75); --link-fg: #e76; --link-hover-fg: #ff0; --button-bg: #a43; --button-fg: #fff; --button-hover-bg: #632; --button-alt-fg: #cdc; --pane-border: #565; --pane-bg: #222; --text-fg: #cdc; --selected-tab: #c65; --tab-hover-bg: #000; --tab-hover-fg: #ff0; --example-bg: #000; --example-border: #111; --log-fg: #f00; color-scheme: dark; } /* Establish the font and remove the page margins. X-overflow is disabled to hide the slide-in tray. */ body { font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; margin: 0; background-color: var(--ui-background); overflow-x: hidden; color: var(--text-fg); font-size: 10pt; } /* The header and its elements are stickily positioned and have simple presentation. */ header { position: sticky; top: 0; left: 0; right: 0; padding: 1em; padding-left: 6em; background-color: var(--header-bg); border-bottom: 1px solid var(--header-bg); } header > h1 { margin-top: -0.25em; } header > img { width: 4em; position: absolute; left: 1em; top: 0.1em; } /* The header features a simple right-aligned toobar. This spaces out its buttons. */ header > div.toolbar { right: 1em; top: 1.1em; } header div.toolbar a { margin-left: 2em; } /* These rules make the dark mode button's label indicate the mode a click will switch to. */ html.dark header a span.dark { display:none; } html.dark header a span.light { display:inline; } html header a span.light { display:none; } /* The footer is also simple. */ footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5em; } /* Lightbox is a green non-interactive element that appears under the slide-in tray. It fades in and out. */ section#lightbox { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--lightbox); visibility: hidden; opacity: 0; transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms; } /* The show class is applied to the lightbox when it is needed which triggers its transition. */ section#lightbox.show { visibility: visible; opacity: 1; transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms; } /* Horizontal rules are grey and faint. */ hr { border: 1px solid var(--pane-border); } /* Hyperlinks are blue. */ a { color: var(--link-fg); text-decoration: none; } /* Affordance effects for buttons and links: underline off, pink highlight. */ a:hover { text-decoration: underline; color: var(--link-hover-fg); } /* Nice blue buttons. */ a.button { background-color: var(--button-bg); border: 1px solid var(--button-bg); color: var(--button-fg); padding: 0.1em 0.5em; border-radius: 3px; text-decoration: none; } /* Inverted buttons are white with a grey border. Some of them toggle into the blue buttons. */ a.button.invert { background-color: var(--pane-bg); border: 1px solid var(--pane-border); color: var(--button-alt-fg); } /* Affordance effects for buttons: dark background, white foreground. */ a.button:hover { border: 1px solid var(--button-hover-bg) !important; background-color: var(--button-hover-bg) !important; color: var(--button-hover-fg) !important; } /* Pre tags get grey colouring and nice spacing. */ pre { background-color: var(--example-bg); border: 1px solid var(--example-border); padding: 1em; margin: 0; } /* Any element can be hidden with this class. */ .hidden { display: none; } /* Any element can get slightly smaller text with this class. */ .small { font-size: 90%; } /* Convenience class for spacing elements a little. */ .gapAfter { margin-right: 1em; } /* This class can be used on all monospaced elements e.g. textboxes. */ .mono { font-size: inherit; font-family: "Sono", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } /* Removes the bullets from the