Skip to content

Commit

Permalink
Added additional configurable mkdocs variables
Browse files Browse the repository at this point in the history
  • Loading branch information
Corey White committed Feb 18, 2025
1 parent c28785a commit 36ca181
Showing 1 changed file with 120 additions and 19 deletions.
139 changes: 120 additions & 19 deletions man/mkdocs/grassdocs.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,125 @@
:root > * {
/* Colors */
--md-primary-fg-color: rgba(76, 176, 91, 1); /* Dark green */
--md-primary-fg-color--light: rgb(239, 244, 232);
--md-primary-fg-color--dark: rgba(8, 139, 54, 1);
--md-primary-bg-color: rgb(229, 255, 233);
--md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

--md-accent-fg-color: rgba(8, 139, 54, 1);

/* GRASS Variables */
/* ----------------------------------------------------------------------------- */
--primary-color: rgba(76, 176, 91, 1); /* Dark green */
--primary-color--light: rgba(158, 210, 156, 1); /* Light green */
--primary-color--dark: rgba(8, 139, 54, 1); /* Dark green */
--primary-bg-color: rgb(255, 255, 255); /* White */
--primary-bg-color--dark: rgba(135, 135, 135, 0.1);
--support-color: rgb(243, 57, 138); /* Pink */

/* MkDocs Variables */
/* ----------------------------------------------------------------------------- */

/* Default Colors */
/* ----------------------------------------------------------------------------- */
--md-default-fg-weight: 800;

/* Primary Colors */
/* ----------------------------------------------------------------------------- */
--md-primary-fg-color: var(--primary-color); /* Dark green */
--md-primary-fg-color--light: rgb(255, 255, 255);
--md-primary-fg-color--dark: var(--primary-color--dark);
--md-primary-bg-color: rgb(255, 255, 255); /* Includes color for the navbar text */
--md-primary-bg-color--light: rgba(255, 255, 255, 0.5);

/* Accent Colors */
/* ----------------------------------------------------------------------------- */
--md-accent-fg-color: rgba(135, 160, 106, 1); /* Link color on hover */
--md-accent-fg-color--transparent: rgba(158,210,156, 0.1);
--md-accent-bg-color: rgba(239, 244, 232, 1);
--md-accent-bg-color--light: rgba(158,210,156, 1);
--md-accent-bg-color: rgb(255, 255, 255);
--md-accent-bg-color--light: var(--primary-color--light);

/* Footer */
--md-footer-bg-color: rgba(255, 255, 255, 0.7);
--md-footer-bg-color--light: rgb(229, 255, 233);
--md-footer-bg-color--dark: rgba(8, 139, 54, 1);
/* ----------------------------------------------------------------------------- */
--md-footer-bg-color: rgba(255, 255, 255, 0.7);
--md-footer-bg-color--light: rgb(229, 255, 233);
--md-footer-bg-color--dark: var(--primary-color--dark);

/* Default fg color */
/* --md-default-fg-color--light: #088B36; */
--md-default-fg-weight: 800;
/* Typeset Colors */
/* ----------------------------------------------------------------------------- */
--md-typeset-a-color: var(--primary-color--dark); /* Link color */
--md-typeset-a-color--hover: rgba(135, 160, 106, 1); /* Not sure */

/* Mermaid colors */
/* ----------------------------------------------------------------------------- */
--md-mermaid-font-family: var(--md-text-font-family), sans-serif;
--md-mermaid-edge-color: var(--md-code-fg-color);
--md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);
--md-mermaid-node-fg-color: var(--md-accent-fg-color);
--md-mermaid-label-bg-color: var(--md-default-bg-color);
--md-mermaid-label-fg-color: var(--md-code-fg-color);
--md-mermaid-sequence-actor-bg-color: var(--md-mermaid-label-bg-color);
--md-mermaid-sequence-actor-fg-color: var(--md-mermaid-label-fg-color);
--md-mermaid-sequence-actor-border-color: var(--md-mermaid-node-fg-color);
--md-mermaid-sequence-actor-line-color: var(--md-default-fg-color--lighter);
--md-mermaid-sequence-actorman-bg-color: var(--md-mermaid-label-bg-color);
--md-mermaid-sequence-actorman-line-color: var(--md-mermaid-node-fg-color);
--md-mermaid-sequence-box-bg-color: var(--md-mermaid-node-bg-color);
--md-mermaid-sequence-box-fg-color: var(--md-mermaid-edge-color);
--md-mermaid-sequence-label-bg-color: var(--md-mermaid-node-bg-color);
--md-mermaid-sequence-label-fg-color: var(--md-mermaid-node-fg-color);
--md-mermaid-sequence-loop-bg-color: var(--md-mermaid-node-bg-color);
--md-mermaid-sequence-loop-fg-color: var(--md-mermaid-edge-color);
--md-mermaid-sequence-loop-border-color: var(--md-mermaid-node-fg-color);
--md-mermaid-sequence-message-fg-color: var(--md-mermaid-edge-color);
--md-mermaid-sequence-message-line-color: var(--md-mermaid-edge-color);
--md-mermaid-sequence-note-bg-color: var(--md-mermaid-label-bg-color);
--md-mermaid-sequence-note-fg-color: var(--md-mermaid-edge-color);
--md-mermaid-sequence-note-border-color: var(--md-mermaid-label-fg-color);
--md-mermaid-sequence-number-bg-color: var(--md-mermaid-node-fg-color);
--md-mermaid-sequence-number-fg-color: var(--md-accent-bg-color);

/* Typeset */
--md-typeset-a-color: rgba(8, 139, 54, 1);
--md-typeset-a-color--hover: rgba(135, 160, 106, 1);
/* Unset Colors */
/* ----------------------------------------------------------------------------- */
--md-hue: 225deg;
--md-default-fg-color: #000000de;
--md-default-fg-color--light: #0000008a;
--md-default-fg-color--lighter: #00000052;
--md-default-fg-color--lightest: #00000012;
--md-default-bg-color: #fff;
--md-default-bg-color--light: #ffffffb3;
--md-default-bg-color--lighter: #ffffff4d;
--md-default-bg-color--lightest: #ffffff1f;
--md-code-fg-color: #36464e;
--md-code-bg-color: #f5f5f5;
--md-code-hl-color: #4287ff;
--md-code-hl-color--light: #4287ff1a;
--md-code-hl-number-color: #d52a2a;
--md-code-hl-special-color: #db1457;
--md-code-hl-function-color: #a846b9;
--md-code-hl-constant-color: #6e59d9;
--md-code-hl-keyword-color: #3f6ec6;
--md-code-hl-string-color: #1c7d4d;
--md-code-hl-name-color: var(--md-code-fg-color);
--md-code-hl-operator-color: var(--md-default-fg-color--light);
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
--md-code-hl-comment-color: var(--md-default-fg-color--light);
--md-code-hl-generic-color: var(--md-default-fg-color--light);
--md-code-hl-variable-color: var(--md-default-fg-color--light);
--md-typeset-color: var(--md-default-fg-color);
--md-typeset-a-color: var(--md-primary-fg-color);
--md-typeset-del-color: #f5503d26;
--md-typeset-ins-color: #0bd57026;
--md-typeset-kbd-color: #fafafa;
--md-typeset-kbd-accent-color: #fff;
--md-typeset-kbd-border-color: #b8b8b8;
--md-typeset-mark-color: #ffff0080;
--md-typeset-table-color: #0000001f;
--md-typeset-table-color--light: rgba(0, 0, 0, .035);
--md-admonition-fg-color: var(--md-default-fg-color);
--md-admonition-bg-color: var(--md-default-bg-color);
--md-warning-fg-color: #000000de;
--md-warning-bg-color: #ff9;
--md-footer-fg-color: #fff;
--md-footer-fg-color--light: #ffffffb3;
--md-footer-fg-color--lighter: #ffffff73;
--md-footer-bg-color: #000000de;
--md-footer-bg-color--dark: #00000052;
--md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a;
--md-shadow-z2: 0 0.2rem 0.5rem #0000001a, 0 0 0.05rem #00000040;
--md-shadow-z3: 0 0.2rem 0.5rem #0003, 0 0 0.05rem #00000059;
}

.md-header {
Expand All @@ -46,3 +143,7 @@
.md-header__button.md-logo svg {
height: 3rem;
}

.md-typeset table:not([class]) tbody tr:hover {
background-color: transparent;
}

0 comments on commit 36ca181

Please sign in to comment.