diff options
Diffstat (limited to 'docs/docs.css')
| -rw-r--r-- | docs/docs.css | 76 |
1 files changed, 60 insertions, 16 deletions
diff --git a/docs/docs.css b/docs/docs.css index ee1a78bf..c8527d1d 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -135,6 +135,12 @@ --md-code-font: "Roboto Mono"; } +/* Add the matching padding they forgot at the bottom of the page */ +.md-main__inner { margin-bottom: 1.5rem; } + +/* Workaround for them using :first-child in the header topic for no good reason */ +.md-header__topic { font-weight: 700; } + /* Make headings stand out more */ .md-typeset h1 { font-weight: 700; color: var(--md-typeset-color); } .md-typeset h2 { font-weight: 700; border-bottom: 2px solid var(--md-typeset-color); padding-bottom: 4px; } @@ -142,8 +148,18 @@ .md-typeset h4 { font-weight: 700; } .md-typeset h5 { font-weight: 700; } -.md-main__inner { - margin-bottom: 1.5rem; +/* Make links in main text underlined so you actually know they're clickable */ +.md-typeset a { text-decoration: underline; } +.md-typeset a:hover { text-decoration: none; } + +/* Also make the "more on this page" text underlined so you know it's clickable */ +.md-search-result__more summary div { text-decoration: underline; } + +/* Implement a highlight behind search results instead of changing text color */ +.md-search-result mark { + color: var(--md-default-fg-color--light); + text-decoration: none; + background-color: var(--md-search-highlight-color); } .juxtapose { @@ -174,7 +190,6 @@ img[alt$="><"] { float: none!important; } - .lslide { margin: 0px !important; text-align: center; @@ -244,27 +259,56 @@ h3#all-settings+p+div table tbody tr>td:nth-child(6) { max-width: 95%; } + +/* +Internally, the theme uses an --md-hue variable to determine the "accent color" and then calculates all other colors +based off of that value depending on the element's usage. This doesn't actually work that well and it's a huge pain to +work with because most people can't answer "What does 54% of this slightly-bluish green color look like?" when they're +designing. So, below, I've replaced a whole bunch of these values with RGBs to force the theme to stop being bad in +multiple different contexts. + +Since we also don't use variables for any of the colors, I'm putting a list of them below. We have based the entire +theme off of variants of the Binary Ninja Red color (which is our main accent): + +Sea Salt #FAFAFA hsla(var(--md-hue),5%,98%,1) +White Smoke #F3F1F1 hsla(var(--md-hue),8%,95%,1) +Platinum #EBE1E0 hsla(var(--md-hue),20%,90%,1) +Binary Ninja #D63826 hsla(var(--md-hue),70%,49%,1) +Rosewood #57160F hsla(var(--md-hue),70%,20%,1) +Jet #2B2727 hsla(var(--md-hue),5%,16%,1) +Night #1B1818 hsla(var(--md-hue),5%,10%,1) + */ + [data-md-color-scheme="slate"] { --md-hue: 6; - --md-default-bg-color: hsla(var(--md-hue),5%,16%,1); + --md-default-bg-color: #2B2727; + --md-default-fg-color: #F3F1F1; + --md-default-fg-color--light: #F3F1F1C0; /* Change the alpha to be not so transparent */ --md-primary-fg-color: #D63826; - --md-primary-fg-color--light: #ECB7B7; - --md-primary-fg-color--dark: #990000; - --md-code-fg-color: #ecb7b7; - --md-typeset-a-color: rgb(215, 55, 38); - --md-nav-primary: rgb(215, 55, 38); + --md-primary-fg-color--light: #EBE1E0; + --md-primary-fg-color--dark: #57160F; + --md-code-bg-color: #1B1818; + --md-code-fg-color: #EBE1E0; + --md-typeset-color: #F3F1F1; + --md-typeset-a-color: #D63826; + --md-nav-primary: #D63826; + --md-search-highlight-color: #57160F; } [data-md-color-scheme="binja"] { --md-hue: 6; - --md-default-bg-color: hsla(var(--md-hue),5%,98%,1); + --md-default-bg-color: #FAFAFA; + --md-default-fg-color: #1B1818; + --md-default-fg-color--light: #1B1818C0; /* Change the alpha to be not so transparent */ --md-primary-fg-color: #D63826; - --md-primary-fg-color--light: #ECB7B7; - --md-primary-fg-color--dark: #990000; - --md-code-fg-color: rgb(215, 55, 38); - --md-code-bg-color: hsla(0, 0%, 96%, 1); - --md-typeset-a-color: rgb(215, 55, 38); - --md-nav-primary: rgb(215, 55, 38); + --md-primary-fg-color--light: #EBE1E0; + --md-primary-fg-color--dark: #57160F; + --md-code-bg-color: #F3F1F1; + --md-code-fg-color: #2B2727; + --md-typeset-color: #1B1818; + --md-typeset-a-color: #D63826; + --md-nav-primary: #D63826; + --md-search-highlight-color: #EBE1E0; } |