From 3b0e340587296e3c837090cef30af446b1a7a2d3 Mon Sep 17 00:00:00 2001 From: Sam Arbid Date: Tue, 18 Jun 2024 16:10:49 +0200 Subject: [PATCH] css colors: replace hard coded values with vars and cleanup duplicates --- docs/stylesheets/extra.css | 135 ++++++++++++++++++------------------- 1 file changed, 67 insertions(+), 68 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 5ca2cace..ab7c52b1 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,23 +1,28 @@ /* Color variables https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss */ +:root { + --color-invenio: #0377cd; + --color-black: #000000; + --color-white: #ffffff; +} -[data-md-color-scheme="default"] { +[data-md-color-scheme='default'] { --md-primary-fg-color: #707070; --md-primary-fg-color--light: #5fb8fc; - --md-primary-fg-color--dark: #003258; + --md-primary-fg-color--dark: #003258; /* .md-typeset a, */ .md-nav__link--active { - color: #000000; + color: var(--color-black); opacity: 0.54; } - .md-tabs__link{ - color: white; + .md-tabs__link { + color: var(--color-white); } .md-typeset a:hover, .md-nav__link:hover { - color: #000000; + color: var(--color-black); } .md-nav__title { @@ -30,36 +35,38 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st .md-header { background: linear-gradient( - 90deg, - rgba(3, 119, 205, 1), - rgba(3, 119, 205, 1) 52.52%, - rgba(251, 130, 115, 0.69)) + 90deg, + rgba(3, 119, 205, 1), + rgba(3, 119, 205, 1) 52.52%, + rgba(251, 130, 115, 0.69) + ) no-repeat; - color: #ffffff; + color: var(--color-white); } - .md-tabs { + .md-tabs { background: linear-gradient( - 90deg, - rgba(3, 119, 205, 1), - rgba(3, 119, 205, 1) 52.52%, - rgba(251, 130, 115, 0.69)) + 90deg, + rgba(3, 119, 205, 1), + rgba(3, 119, 205, 1) 52.52%, + rgba(251, 130, 115, 0.69) + ) no-repeat; - color: #ffffff; + color: var(--color-white); } .md-search form.md-search__form { - background-color: rgba(255,255,255, 0.1); - color: #fff; + background-color: rgba(255, 255, 255, 0.1); + color: var(--color-white); transition: 0.3 ease-in; } .md-search form.md-search__form:hover { - color: rgba(0,0,0,0.54); + color: rgba(0, 0, 0, 0.54); } - .md-header[data-md-state="shadow"] { + .md-header[data-md-state='shadow'] { box-shadow: none; - border-bottom: 0.05rem solid #ffffff; + border-bottom: 0.05rem solid var(--color-white); } .md-header__topic:first-child { @@ -76,23 +83,23 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st } .md-footer { - border-top: 0.05rem solid #ffffff; - background-color: #0377cd; + border-top: 0.05rem solid var(--color-white); + background-color: var(--color-invenio); } .md-footer__link { padding-top: 0.8rem; padding-bottom: 0; - color: #ffffff; + color: var(--color-white); opacity: 0.75; margin-bottom: 0; margin-top: 0; } .md-footer__direction { - color: #ffffff; + color: var(--color-white); opacity: 0.75; - font-size: .64rem; + font-size: 0.64rem; left: 0; position: absolute; right: 0; @@ -108,7 +115,7 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st .md-footer .made-with { color: var(--md-footer-fg-color--lighter); - font-size: .64rem; + font-size: 0.64rem; } .md-footer__link:hover, @@ -117,11 +124,11 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st } .md-footer-meta { - background-color: rgb(1, 98, 170); + background-color: #0162aa; } html .md-footer-meta .md-footer-meta__inner a { - color: #ffffff; + color: var(--color-white); } .md-footer-meta__inner { @@ -131,31 +138,29 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st .md-footer-copyright { padding: 0.7rem 0; color: var(--md-footer-fg-color--lighter); - font-size: .64rem; + font-size: 0.64rem; width: auto; - margin: auto .6rem; + margin: auto 0.6rem; } .md-footer-copyright__highlight { color: var(--md-footer-fg-color--light); } - .md-footer-social { padding: 0.4rem 0; - margin: 0 .4rem; + margin: 0 0.4rem; } .md-footer-social__link svg { fill: currentColor; - max-height: .8rem; + max-height: 0.8rem; vertical-align: -25%; } - .md-search-result__link[data-md-state="active"] { - background-color: #ffffff; + .md-search-result__link[data-md-state='active'] { + background-color: var(--color-white); } - .md-typeset h1[id] .headerlink:focus, .md-typeset h1[id]:hover .headerlink:hover, .md-typeset h1[id]:target .headerlink, @@ -174,11 +179,11 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st .md-typeset h6[id] .headerlink:focus, .md-typeset h6[id]:hover .headerlink:hover, .md-typeset h6[id]:target .headerlink { - color: #0377cd; + color: var(--color-invenio); } ::placeholder { - color: #ffffff; + color: var(--color-white); } .rdm-hero-bg { @@ -190,24 +195,18 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st ); } - .rdm-hero .rdm-hero-subtitle { - font-size: 30px; - font-weight: 300; - font-family: Oswald, "Open Sans", sans-serif; color: rgba(255, 255, 255, 0.6); - margin: 15px 0px 20px 0px; } .frontpage .md-main { - background-color: white; + background-color: var(--color-white); } } /* Dark mode */ /* --------- */ -[data-md-color-scheme="slate"] { - +[data-md-color-scheme='slate'] { .rdm-hero-bg { background: linear-gradient( 12deg, @@ -216,37 +215,36 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st rgba(179, 93, 81, 0.329) ); } +} - .rdm-hero .rdm-hero-subtitle { - font-size: 30px; - font-weight: 300; - font-family: Oswald, "Open Sans", sans-serif; - /* color: rgba(255, 255, 255, 0.6); */ - margin: 15px 0px 20px 0px; - } +/* Common styles */ +.rdm-hero .rdm-hero-subtitle { + font-size: 30px; + font-weight: 300; + font-family: Oswald, 'Open Sans', sans-serif; + margin: 15px 0px 20px 0px; } -/* Common styles */ .md-typeset .md-button.md-button--primary { - background-color: white; - border-color: white; - color: #0377cd; + background-color: var(--color-white); + border-color: var(--color-white); + color: var(--color-invenio); opacity: 100%; } .rdm-hero > a.md-button.md-button--primary:hover { background-color: transparent; - border-color: white; - color: white; + border-color: var(--color-white); + color: var(--color-white); } .md-typeset .md-button--primary { - color: white; + color: var(--color-white); opacity: 100%; } .md-typeset .md-button { - color: white; + color: var(--color-white); } .rdm-hero-bg { @@ -334,12 +332,13 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st } .rdm-hero > a.md-button:hover { - background-color: white; - border-color: white; - color: #0377cd; + background-color: var(--color-white); + border-color: var(--color-white); + color: var(--color-invenio); } -.frontpage .md-main > .md-main__inner, .frontpage .md-main .md-content__inner { +.frontpage .md-main > .md-main__inner, +.frontpage .md-main .md-content__inner { margin-top: 0; padding-top: 0; } @@ -352,4 +351,4 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st .frontpage .md-tabs { border-bottom: none; background: transparent; -} \ No newline at end of file +}