From 36478e0a66de4cc4f614e7ec2e255b0007c3d036 Mon Sep 17 00:00:00 2001
From: matcool <26722564+matcool@users.noreply.github.com>
Date: Sun, 1 Dec 2024 12:48:09 -0300
Subject: [PATCH] copy over flash css because its easier than updating flash

---
 flash-template/content.css | 761 +++++++++++++++++++++++++++++++++++++
 flash-template/default.css | 145 +++++++
 flash-template/nav.css     | 310 +++++++++++++++
 flash-template/themes.css  | 119 ++++++
 4 files changed, 1335 insertions(+)
 create mode 100644 flash-template/content.css
 create mode 100644 flash-template/default.css
 create mode 100644 flash-template/nav.css
 create mode 100644 flash-template/themes.css

diff --git a/flash-template/content.css b/flash-template/content.css
new file mode 100644
index 0000000..543eca7
--- /dev/null
+++ b/flash-template/content.css
@@ -0,0 +1,761 @@
+main {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Open Sans', sans-serif;
+    padding: 1.5rem;
+    height: calc(100% - 3rem);
+    overflow-y: auto;
+}
+
+main .progress-bar {
+    display: block;
+    height: 1rem;
+    background-color: var(--flash-cyan);
+    width: 0%;
+}
+
+@media only screen and (min-device-width: 1100px) {
+    /* for legibility, limit maximum width */
+    main > * {
+        max-width: 56rem;
+    }
+}
+
+main p, main ol, main ul {
+    line-height: 1.75em;
+}
+
+main hr {
+    width: 100%;
+}
+
+main img {
+    max-width: 100%;
+}
+
+main strong {
+    color: var(--flash-skin);
+}
+
+main a strong {
+    color: inherit;
+}
+
+main blockquote {
+    margin: .5rem;
+    padding: .25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-left: .5rem solid var(--flash-dark);
+    background-color: var(--flash-darker);
+    border-radius: 0rem .5rem .5rem 0rem;
+}
+
+main blockquote.warning {
+    border-left: .5rem solid var(--flash-skin);
+    background-color: var(--flash-dark-skin);
+}
+
+main blockquote.warning strong {
+    color: var(--flash-orange);
+}
+
+main blockquote.info {
+    border-left: .5rem solid var(--flash-cyan);
+}
+
+main blockquote.book {
+    border-left: .5rem solid var(--flash-green);
+}
+
+main .emoji {
+    height: 1.5em;
+    margin: 0px !important;
+    display: inline !important;
+    vertical-align: middle;
+}
+
+main > div {
+    margin-bottom: 1rem;
+}
+
+main h1 > .get-header-link,
+main h2 > .get-header-link,
+main h3 > .get-header-link {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    border-radius: .25rem;
+    outline: none;
+    color: var(--flash-white);
+    display: none;
+    padding: .25rem;
+    margin-left: .25rem;
+    cursor: pointer;
+}
+
+main h1 > .get-header-link > .feather {
+    height: 2em;
+}
+
+main h2 > .get-header-link > .feather {
+    height: 1.5em;
+}
+
+main h3 > .get-header-link > .feather {
+    height: 1.25em;
+}
+
+main h1 > .get-header-link > .feather,
+main h2 > .get-header-link > .feather ,
+main h3 > .get-header-link > .feather {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+main h1 > .get-header-link:hover,
+main h2 > .get-header-link:hover,
+main h3 > .get-header-link:hover {
+    background-color: var(--flash-hover-light);
+}
+
+main h1:hover > .get-header-link,
+main h2:hover > .get-header-link,
+main h3:hover > .get-header-link {
+    display: initial;
+}
+
+main h1 > .get-header-link.success,
+main h2 > .get-header-link.success,
+main h3 > .get-header-link.success {
+    color: var(--flash-green);
+}
+
+main h1 > .get-header-link.failure,
+main h2 > .get-header-link.failure,
+main h3 > .get-header-link.failure {
+    color: var(--flash-red);
+}
+
+main h1 {
+    font-family: 'Varela Round', sans-serif;
+    font-weight: bold;
+    font-size: 3rem;
+    color: var(--flash-h1-color);
+    margin-bottom: .25rem;
+}
+
+main h1.entity-title {
+    font-size: 2.25rem;
+    color: var(--flash-light);
+}
+
+main h1 .version {
+    font-size: 1.25rem;
+}
+
+main h1 img {
+    height: 3.25rem;
+    margin-right: .5rem;
+}
+
+main h1 .feather {
+    width: 2.25rem;
+    height: 2.25rem;
+    margin-right: .5rem;
+}
+
+main h1 a, main h1 a:visited {
+    color: var(--flash-h1-color);
+    text-decoration: none;
+    font-style: normal;
+    font-size: 3rem;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+main h1 a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+main h1::after {
+    content: ' ';
+    display: block;
+    border: .1rem solid var(--flash-border); 
+    margin-top: .5rem;
+}
+
+main h2 {
+    font-family: 'Varela Round', sans-serif;
+    font-weight: bold;
+    font-size: 1.75rem;
+    margin-top: 1.5rem;
+    margin-bottom: .5rem;
+}
+
+main h3 {
+    font-family: 'Varela Round', sans-serif;
+    font-weight: bold;
+    font-size: 1.6rem;
+    margin-top: .5rem;
+    margin-bottom: .25rem;
+}
+
+main h4 {
+    font-family: 'Varela Round', sans-serif;
+    font-weight: bold;
+    font-size: 1.3rem;
+}
+
+main h2:not(.qna-question)::after {
+    content: ' ';
+    display: block;
+    margin-top: .5rem;
+    border: .1rem solid var(--flash-border); 
+    opacity: 50%;
+}
+
+main h2.qna-question {
+    margin-bottom: .3rem;
+    color: var(--flash-yellow);
+}
+
+main h2.qna-question + blockquote {
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 1rem;
+    border: .1rem solid var(--flash-dark);
+}
+
+main h2.qna-question.highlight {
+    color: var(--flash-skin);
+}
+
+main h2.qna-question.highlight + blockquote {
+    background-color: var(--flash-hover);
+}
+
+main a {
+    color: var(--flash-cyan-light);
+    text-decoration: underline;
+}
+
+main a:visited {
+    color: var(--flash-purple);
+}
+
+main a:hover {
+    color: var(--flash-white);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+main .button {
+    display: inline-grid;
+    border-radius: 9999px;
+    color: var(--flash-white);
+    background-color: var(--flash-dark);
+    padding: .5rem;
+    padding-left: 3rem;
+    padding-right: 3rem;
+    text-align: center;
+    text-decoration: none;
+    transition: color, border, background;
+}
+
+main .button:hover {
+    background-color: var(--flash-cyan-darker);
+    color: var(--flash-cyan-light);
+}
+
+main .button.outlined {
+    background-color: rgba(0, 0, 0, 0);
+    border: .15rem solid var(--flash-white); 
+}
+
+main .button.outlined:hover {
+    background-color: rgba(0, 0, 0, 0);
+    border-color: var(--flash-cyan);
+}
+
+.icon.feather-box {
+    color: var(--flash-red);
+}
+
+.icon.feather-box.variant {
+    color: var(--flash-green);
+}
+
+.icon.feather-file {
+    color: var(--flash-light);
+}
+
+.icon.feather-code {
+    color: var(--flash-purple);
+}
+
+.icon.feather-code.class {
+    color: var(--flash-red);
+}
+
+.header-link {
+    font-size: 1.1rem;
+    color: var(--flash-purple);
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+}
+
+.header-link .url {
+    color: var(--flash-green);
+}
+
+a.disabled:hover {
+    text-decoration: none;
+    cursor: default;
+}
+
+.section {
+    margin-top: .5rem;
+}
+
+.section > summary {
+    font-family: 'Varela Round', sans-serif;
+    font-weight: bold;
+    font-size: 1.75rem;
+    display: block;
+    margin-bottom: .5rem;
+    user-select: none;
+}
+
+.section > summary span {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.section > summary .feather {
+    margin-right: .5rem;
+    margin-left: .5rem;
+}
+
+.section[open] > summary .feather-chevron-right {
+    transform: rotate(90deg);
+}
+
+.section > summary:hover {
+    cursor: pointer;
+}
+
+.section > summary::after {
+    content: ' ';
+    display: block;
+    margin-top: .5rem;
+    border: .1rem solid var(--flash-border);
+}
+
+div.text {
+    display: flex;
+    flex-direction: column;
+}
+
+main div:not(.entity) {
+    display: flex;
+    flex-direction: column;
+}
+
+.section > div {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+.section > summary .badge {
+    margin-left: .5rem;
+}
+
+.badge {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1rem;
+    background-color: var(--flash-dark);
+    color: var(--flash-light);
+    padding: .15rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 9999px;
+}
+
+/* Code thingies */
+
+details.entity-desc {
+    display: flex;
+    width: fit-content;
+}
+
+details.entity-desc[open] {
+    background-color: var(--flash-darker);
+    border-radius: .5rem;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+}
+
+details.entity-desc > * {
+    padding: .5rem;
+    border-radius: .5rem;
+}
+
+details.entity-desc > div {
+    padding-left: .75rem;
+    padding-right: .75rem;
+    padding-bottom: .75rem;
+}
+
+details.entity-desc > summary {
+    user-select: none;
+    margin-bottom: 0;
+}
+
+details.entity-desc > summary:hover {
+    cursor: pointer;
+    background-color: var(--flash-hover);
+}
+
+details.entity-desc > summary .feather-chevron-right {
+    height: 1.15rem;
+    align-self: center;
+    opacity: 50%;
+}
+
+details.entity-desc[open] > summary .feather-chevron-right {
+    transform: rotate(90deg);
+    opacity: 100%;
+}
+
+.description {
+    display: inline-flex;
+    flex-direction: column;
+    gap: .5rem;
+    max-width: fit-content;
+}
+
+.description > .text > p {
+    margin: 0rem;
+}
+
+.description > .text a {
+    color: var(--flash-orange);
+    display: inline;
+}
+
+.description blockquote:not(.warning) {
+    background-color: var(--flash-dark);
+}
+
+.no-desc {
+    color: var(--flash-light);
+}
+
+.description > .tags {
+    display: flex;
+    flex-direction: row;
+}
+
+.description > .tags > p {
+    margin: 0;
+    margin-right: .5rem;
+    padding: .15rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
+    background-color: var(--flash-less-dark);
+    border-radius: .25rem;
+    font-size: .8rem;
+}
+
+.description > section {
+    display: flex;
+    margin: 0;
+    padding: 1rem;
+    padding-right: 5rem;
+    border-radius: .5rem;
+    background-color: var(--flash-shade);
+    flex-direction: column;
+    max-width: fit-content;
+}
+
+.description > section > .grid {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    align-items: center;
+    gap: .5rem;
+}
+
+.description > section > .title {
+    color: var(--flash-light);
+    font-weight: bold;
+    margin-bottom: .5rem;
+}
+
+.description > section > .grid > * {
+    padding: 0;
+    margin: 0;
+}
+
+.description > section > .grid > p {
+    font-weight: bold;
+    color: var(--flash-highlight);
+    margin-right: 1rem;
+}
+
+.entity a {
+    text-decoration: none;
+}
+
+.entity .params {
+    flex-wrap: wrap;
+}
+
+.entity {
+    font-family: 'Source Code Pro', monospace;
+    color: var(--flash-light);
+    display: flex;
+    flex-direction: row;
+    margin-bottom: .5rem;
+    flex-wrap: wrap;
+}
+
+.entity .entity {
+    margin-bottom: 0;
+}
+
+.entity .keyword {
+    color: var(--flash-purple);
+}
+
+.entity .scope {
+    color: var(--flash-light);
+    opacity: 50%;
+}
+
+.entity .alias {
+    color: var(--flash-skin);
+}
+
+.entity .template-param {
+    color: var(--flash-skin);
+}
+
+.entity .literal {
+    color: var(--flash-white);
+}
+
+.entity .enum {
+    color: var(--flash-red);
+}
+
+.entity.type {
+    color: var(--flash-light);
+}
+
+.entity.namespace > .name, .namespace {
+    color: var(--flash-orange);
+}
+
+.entity.class, .entity.struct {
+    flex-direction: column;
+}
+
+.entity > .class-decl {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.entity.class > .class-decl > .name, .class.name {
+    color: var(--flash-yellow);
+}
+
+.entity.struct > .class-decl > .name, .struct.name {
+    color: var(--flash-yellow);
+}
+
+.entity.type.pod {
+    color: var(--flash-purple);
+}
+
+
+.entity.var > .name {
+    color: var(--flash-white);
+}
+
+.entity.fun {
+    flex-direction: column;
+}
+
+.entity .template-declaration {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.entity.fun .function-signature {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.entity.fun .function-signature > .name {
+    color: var(--flash-blue);
+}
+
+.entity.fun .params {
+    display: flex;
+    flex-direction: row;
+}
+
+.entity .space-before {
+    margin-left: .5rem;
+}
+
+.entity .space-after {
+    margin-right: .5rem;
+}
+
+/* code blocks */
+
+code:not(pre > code) {
+    display: inline-block;
+    background-color: var(--flash-gray-darkest);
+    color: var(--flash-light);
+    border-radius: .25rem;
+    padding: .25rem;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+    font-size: 1em;
+}
+
+.line-numbers .line-numbers-rows {
+    border-right: .15rem solid var(--flash-dark);
+}
+
+.line-numbers-rows > span::before {
+    color: var(--flash-light);
+}
+
+/* 1em is a bit too small for some reason in paragraphs */
+p code:not(pre > code), a code:not(pre > code), ul code:not(pre > code), ol code:not(pre > code) {
+    font-size: 1rem;
+}
+
+a code:not(pre > code) {
+    color: inherit;
+}
+
+code.header-link {
+    padding: .75rem;
+}
+
+a:hover > code.header-link {
+    text-decoration: underline;
+}
+
+pre {
+    display: inline-block;
+    padding: 1rem;
+    padding-right: 4rem;
+    min-width: 0;
+    max-width: min-content;
+    overflow-x: auto;
+    background-color: var(--flash-gray-darkest);
+    color: var(--flash-white);
+    border-radius: .5rem;
+    font-size: 1rem;
+}
+
+code .url-link, code .url-link:visited {
+    color: inherit;
+}
+
+code .url-link:hover {
+    color: var(--flash-white);
+}
+
+code .keyword {
+    color: var(--flash-purple);
+}
+
+code .class-name {
+    color: var(--flash-yellow);
+}
+
+code .function {
+    color: var(--flash-blue);
+}
+
+code .operator, code .punctuation {
+    color: var(--flash-light);
+}
+
+code .boolean {
+    color: var(--flash-skin);
+}
+
+code .number {
+    color: var(--flash-red);
+}
+
+code .string {
+    color: var(--flash-green);
+}
+
+code .comment {
+    color: var(--flash-dark);
+}
+
+code .property {
+    color: var(--flash-orange);
+}
+
+code .macro {
+    color: var(--flash-cyan-light);
+}
+
+code .macro .keyword {
+    color: var(--flash-cyan-light);
+}
+
+.toolbar-wrapper {
+    max-width: fit-content;
+}
+
+.toolbar-wrapper > .toolbar {
+    position: relative;
+    height: 0;
+    align-self: flex-end;
+    z-index: 1;
+}
+
+.toolbar-wrapper > .toolbar > button {
+    margin-top: 1.5rem;
+    margin-right: .5rem;
+    padding: .35rem;
+    border-radius: .35rem;
+    border: none;
+    color: var(--flash-dark);
+    background-color: var(--flash-gray-darkest);
+}
+
+.toolbar-wrapper > .toolbar > button > .feather {
+    height: 1.25rem;
+}
+
+.toolbar-wrapper > .toolbar > button:hover {
+    background-color: var(--flash-hover);
+    color: var(--flash-white);
+    cursor: pointer;
+}
+
+.toolbar-wrapper > .toolbar > button.success {
+    color: var(--flash-green);
+}
+
+.toolbar-wrapper > .toolbar > button.failure {
+    color: var(--flash-red);
+}
diff --git a/flash-template/default.css b/flash-template/default.css
new file mode 100644
index 0000000..a82e925
--- /dev/null
+++ b/flash-template/default.css
@@ -0,0 +1,145 @@
+html {
+    height: 100%;
+    tab-size: 4;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: var(--flash-body-bg);
+    color: var(--flash-white);
+    display: grid;
+    grid-template-columns: minmax(1rem, 26.5rem) 1fr;
+    grid-template-rows: 100% 100%;
+}
+
+@media only screen and (max-device-width: 250px) {
+    body > .overlay.theme {
+        display: none;
+    }
+}
+
+@media only screen and (max-device-width: 800px) {
+    body {
+        grid-template-columns: 1fr;
+    }
+    
+    nav {
+        position: absolute;
+        width: 100%;
+        transition: opacity .25s;
+    }
+
+    nav.collapsed {
+        opacity: 0%;
+        pointer-events: none;
+    }
+
+    nav:not(.collapsed) {
+        opacity: 100%;
+    }
+
+    nav:not(.collapsed) ~ .overlay.theme {
+        display: none;
+    }
+
+    body > .overlay.menu {
+        display: block;
+    }
+}
+
+@media only screen and (min-device-width: 800px) and (max-device-width: 1100px) {
+    body {
+        grid-template-columns: 1fr;
+    }
+
+    nav {
+        position: absolute;
+        width: 30rem;
+        transition: left .25s;
+    }
+
+    nav:not(.collapsed) {
+        left: 0rem;
+        box-shadow: .25rem 0rem .5rem var(--flash-shadow);
+    }
+
+    nav.collapsed {
+        left: -30rem;
+    }
+
+    body > .overlay.menu {
+        display: block;
+    }
+}
+
+@media only screen and (min-device-width: 1100px) {
+    body > .overlay.menu {
+        display: none;
+    }
+}
+
+body > .overlay.menu {
+    left: 1rem;
+}
+
+body > .overlay.theme {
+    right: 1rem;
+}
+
+body > .overlay {
+    top: 1rem;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    border-radius: 9999px;
+    box-shadow: 0 .25rem .5rem var(--flash-shadow);
+    z-index: 4;
+}
+
+body > .overlay > button {
+    background-color: var(--flash-dark);
+    color: var(--flash-light);
+    border: none;
+    padding: .35rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+body > .overlay > button:first-child {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+}
+
+body > .overlay > button:last-child {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+}
+
+body > .overlay > button:hover:not(.selected) {
+    background-color: var(--flash-less-dark);
+    cursor: pointer;
+}
+
+body > .overlay > button.selected {
+    background-color: var(--flash-tab-selected-bg);
+    color: var(--flash-tab-selected-color);
+}
+
+body > .overlay > button > .feather {
+    height: 1.25rem;
+}
+
+.version {
+    font-weight: normal;
+    color: var(--flash-light);
+    margin-left: .25rem;
+}
+
+.stretch-apart {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+}
diff --git a/flash-template/nav.css b/flash-template/nav.css
new file mode 100644
index 0000000..00a52e2
--- /dev/null
+++ b/flash-template/nav.css
@@ -0,0 +1,310 @@
+nav > header {
+    display: grid;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+    color: var(--flash-white);
+    grid-template-columns: 1fr min-content;
+    align-items: center;
+}
+
+@media only screen and (max-device-width: 1100px) {
+    nav > header {
+        padding-left: 3.5rem;
+    }
+
+    nav > header > a {
+        justify-content: center;
+    }
+}
+
+nav > header > a {
+    color: var(--flash-white);
+    text-decoration: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+nav > header > a:hover {
+    background: none;
+}
+
+nav > header > a > img {
+    height: 2.25rem;
+    margin-right: .5rem;
+}
+
+nav > header > .button {
+    color: var(--flash-light);
+    border: .15rem solid var(--flash-dark);
+    border-radius: 9999px;
+    height: 2.25rem;
+    width: 2.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+nav > header > .button > * {
+    padding: 0;
+    margin: 0 !important;
+}
+
+nav {
+    background-color: var(--flash-gray-dark);
+    height: 100%;
+    display: grid;
+    grid-template-rows: min-content min-content 1fr min-content;
+    z-index: 3;
+}
+
+nav > * {
+    padding: 1rem;
+}
+
+nav > .mode {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    gap: .25rem;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+}
+
+nav > .mode > button {
+    display: grid;
+    grid-template-columns: 1rem 1fr 1rem;
+    align-items: center;
+    font-family: 'Open Sans', sans-serif;
+    color: var(--flash-white);
+    padding: .5rem;
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    transition: background;
+    flex: 1;
+}
+
+nav > .mode > button:hover {
+    cursor: pointer;
+}
+
+nav > .mode > button .feather {
+    width: 1rem;
+    height: 1rem;
+    opacity: 50%;
+}
+
+nav > .mode > button.selected {
+    border-bottom: .2rem solid var(--flash-tab-selected-bg);
+    border-top: .2rem solid rgba(0, 0, 0, 0);
+}
+
+nav > .mode > button:not(.selected) {
+    border-bottom: .2rem solid var(--flash-border);
+    border-top: .2rem solid rgba(0, 0, 0, 0);
+}
+
+nav > .mode > button:hover {
+    background-color: var(--flash-hover);
+}
+
+nav > .content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    padding: .25rem;
+}
+
+nav > .content details:not(.root) > div {
+    padding-left: 1.25rem;
+}
+
+nav > .content.monospace {
+    font-family: 'Source Code Pro', monospace;
+}
+
+nav > .content:not(.monospace) {
+    font-family: 'Open Sans', sans-serif;
+}
+
+nav > .content:not(.monospace) summary {
+    color: var(--flash-white);
+}
+
+nav > .content summary {
+    color: var(--flash-light);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: .25rem;
+    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 5rem;
+}
+
+nav > .content details.root > summary {
+    color: var(--flash-light);
+}
+
+nav > .content details.root:not(:last-child) {
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    border-bottom: .1rem solid var(--flash-hover);
+}
+
+nav > .content:not(.monospace) > details:not(:first-child) {
+    margin-top: 1.25rem;
+}
+
+nav > .content:not(.monospace) summary {
+    padding: .5rem;
+}
+
+nav > .content summary:hover {
+    background-color: var(--flash-hover);
+    color: var(--flash-white);
+    cursor: pointer;
+}
+
+nav .feather {
+    height: 1.2rem;
+}
+
+nav .feather-chevron-right {
+    opacity: 50%;
+    color: var(--flash-nav-arrow);
+}
+
+nav .feather:not(.feather-chevron-right) {
+    margin-right: .25rem;
+}
+
+nav > .content details[open] > summary > .feather-chevron-right {
+    transform: rotate(90deg);
+}
+
+nav > .content a {
+    color: var(--flash-light);
+    text-decoration: none;
+    display: flex;
+    flex-direction: row;
+    padding: .25rem;
+    user-select: none;
+    white-space: nowrap;
+    text-overflow: clip;
+    max-width: 100%;
+}
+
+@media only screen and (max-device-width: 800px) {
+    nav > .content summary {
+        padding: .75rem;
+    }
+
+    nav > .content a {
+        padding: .75rem;
+    }
+}
+
+@media only screen and (min-device-width: 800px) and (max-device-width: 1100px) {
+    nav > .content.monospace summary {
+        padding: .5rem;
+    }
+
+    nav > .content.monospace a {
+        padding: .5rem;
+    }
+    
+    nav > .content:not(.monospace) a {
+        padding: .5rem;
+    }
+}
+
+@media only screen and (min-device-width: 1100px) {
+    nav > .content:not(.monospace) a {
+        padding: .5rem;
+    }
+}
+
+nav a.selected {
+    background-color: var(--flash-hover);
+    color: var(--flash-white);
+}
+
+nav a .feather {
+    min-width: max-content;
+}
+
+nav a:hover {
+    background-color: var(--flash-hover);
+    color: var(--flash-white);
+    cursor: pointer;
+}
+
+nav a .matched {
+    color: var(--flash-search-match);
+    font-weight: bold;
+}
+
+nav a .namespace {
+    opacity: 50%;
+}
+
+nav a .scope {
+    opacity: 50%;
+    color: var(--flash-less-light);
+}
+
+nav .nothing-found {
+    font-family: 'Open Sans', sans-serif;
+    color: var(--flash-light);
+    margin-left: 1rem;
+}
+
+.search {
+    background-color: var(--flash-gray-darker);
+}
+
+.input {
+    background: var(--flash-gray-darkest);
+    border-radius: .25rem;
+    display: flex;
+    flex-direction: row;
+    padding-left: .5rem;
+    justify-content: stretch;
+    align-items: stretch;
+}
+
+.input > input {
+    padding: .5rem;
+    display: block;
+    background: none;
+    border: none;
+    width: 100%;
+    color: var(--flash-white);
+    outline: none;
+    flex-grow: 1;
+}
+
+.input > button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem;
+    align-self: center;
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: .25rem;
+    border: none;
+    color: var(--flash-light);
+}
+
+.input > button:hover {
+    background-color: var(--flash-hover);
+    cursor: pointer;
+}
+
+.input > button .feather {
+    margin: 0;
+}
diff --git a/flash-template/themes.css b/flash-template/themes.css
new file mode 100644
index 0000000..511297b
--- /dev/null
+++ b/flash-template/themes.css
@@ -0,0 +1,119 @@
+.flash-theme-dark {
+    --flash-gray:           #272727;
+    --flash-gray-dark:      #222;
+    --flash-gray-darker:    #1a1a1a;
+    --flash-gray-darkest:   #111;
+    --flash-white:          #eee;
+    --flash-light:          #aaa;
+    --flash-less-light:     #888;
+    --flash-less-dark:      #6a6a6a;
+    --flash-dark:           #4a4a4a;
+    --flash-darker:         #3a3a3a;
+    --flash-blue:           #6a80d8;
+    --flash-cyan-light:     #7adff8;
+    --flash-cyan:           #6ac2d8;
+    --flash-cyan-dark:      #427b8a;
+    --flash-cyan-darker:    #294e57;
+    --flash-green:          #9ff4b7;
+    --flash-purple:         #9e6ad4;
+    --flash-pink:           #f49fe9;
+    --flash-skin:           #EC897C;
+    --flash-dark-skin:      #58342f;
+    --flash-red:            #e23485;
+    --flash-yellow:         #f5dd9f;
+    --flash-orange:         #f5c99f;
+    --flash-dark-orange:    #5c4c3e;
+    --flash-border:         rgba(255, 255, 255, .2);
+    --flash-hover:          rgba(255, 255, 255, .1);
+    --flash-hover-light:    rgba(255, 255, 255, .3);
+    --flash-shade:          rgba(0, 0, 0, .25);
+    --flash-shadow:         rgba(0, 0, 0, .2);
+
+    --flash-body-bg:            var(--flash-gray);
+    --flash-h1-color:           var(--flash-white);
+    --flash-tab-selected-bg:    var(--flash-light);
+    --flash-tab-selected-color: var(--flash-dark);
+    --flash-search-match:       var(--flash-blue);
+    --flash-nav-arrow:          var(--flash-light);
+    --flash-highlight:          var(--flash-cyan);
+}
+
+.flash-theme-ocean {
+    --flash-gray:           #272737;
+    --flash-gray-dark:      #223;
+    --flash-gray-darker:    #1a1a2a;
+    --flash-gray-darkest:   #112;
+    --flash-white:          #eee;
+    --flash-light:          #aac;
+    --flash-less-light:     #88a;
+    --flash-less-dark:      #6a6a8a;
+    --flash-dark:           #4a4a6a;
+    --flash-darker:         #3a3a5a;
+    --flash-blue:           #6a80d8;
+    --flash-cyan-light:     #7adff8;
+    --flash-cyan:           #6ac2d8;
+    --flash-cyan-dark:      #427b8a;
+    --flash-cyan-darker:    #294e57;
+    --flash-green:          #9ff4b7;
+    --flash-purple:         #9e6ad4;
+    --flash-pink:           #f49fe9;
+    --flash-skin:           #EC897C;
+    --flash-dark-skin:      #58342f;
+    --flash-red:            #e23485;
+    --flash-yellow:         #f5dd9f;
+    --flash-orange:         #f5c99f;
+    --flash-dark-orange:    #5c4c3e;
+    --flash-border:         rgba(155, 155, 255, .2);
+    --flash-hover:          rgba(255, 255, 255, .1);
+    --flash-hover-light:    rgba(255, 255, 255, .3);
+    --flash-shade:          rgba(0, 0, 0, .25);
+    --flash-shadow:         rgba(0, 0, 0, .2);
+
+    --flash-body-bg:            var(--flash-gray);
+    --flash-h1-color:           var(--flash-white);
+    --flash-tab-selected-bg:    var(--flash-blue);
+    --flash-tab-selected-color: var(--flash-white);
+    --flash-search-match:       var(--flash-cyan);
+    --flash-nav-arrow:          var(--flash-light);
+    --flash-highlight:          var(--flash-cyan);
+}
+
+.flash-theme-peach {
+    --flash-gray:           #372733;
+    --flash-gray-dark:      #342030;
+    --flash-gray-darker:    #2a1a28;
+    --flash-gray-darkest:   #221020;
+    --flash-white:          #eee;
+    --flash-light:          #bab;
+    --flash-less-light:     #a89;
+    --flash-less-dark:      #9a6a8a;
+    --flash-dark:           #6a4a5a;
+    --flash-darker:         #5a3a4a;
+    --flash-blue:           #6a80d8;
+    --flash-cyan-light:     #7adff8;
+    --flash-cyan:           #6ac2d8;
+    --flash-cyan-dark:      #427b8a;
+    --flash-cyan-darker:    #294e57;
+    --flash-green:          #9ff4b7;
+    --flash-purple:         #9e6ad4;
+    --flash-pink:           #f49fe9;
+    --flash-skin:           #EC897C;
+    --flash-dark-skin:      #58342f;
+    --flash-red:            #e23485;
+    --flash-yellow:         #f5dd9f;
+    --flash-orange:         #f5c99f;
+    --flash-dark-orange:    #5c4c3e;
+    --flash-border:         rgba(255, 225, 155, .2);
+    --flash-hover:          rgba(255, 255, 255, .1);
+    --flash-hover-light:    rgba(255, 255, 255, .3);
+    --flash-shade:          rgba(0, 0, 0, .25);
+    --flash-shadow:         rgba(0, 0, 0, .2);
+
+    --flash-body-bg:            var(--flash-gray);
+    --flash-h1-color:           var(--flash-yellow);
+    --flash-tab-selected-bg:    var(--flash-yellow);
+    --flash-tab-selected-color: var(--flash-dark);
+    --flash-search-match:       var(--flash-yellow);
+    --flash-nav-arrow:          var(--flash-white);
+    --flash-highlight:          var(--flash-yellow);
+}