Skip to content

Commit

Permalink
css colors: replace hard coded values with vars and cleanup duplicates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Samk13
Samk13 committed Jun 18, 2024
1 parent 90270cd commit 3b0e340
Showing 1 changed file with 67 additions and 68 deletions.
135 changes: 67 additions & 68 deletions docs/stylesheets/extra.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -352,4 +351,4 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/st
.frontpage .md-tabs {
border-bottom: none;
background: transparent;
}
}

0 comments on commit 3b0e340

Please sign in to comment.