Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00
Code Issues Releases Wiki Activity

Fixed footer styles and added color transitions

Browse Source
This commit is contained in:
squidfunk 2020-05-17 14:40:00 +02:00
parent 6f526d222a
commit 7a12b5ec10
21 changed files with 83 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
material/assets/manifest.json
View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.809e24aa.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.f6ebf1dc.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.f6ebf1dc.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.7ee248fe.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.7ee248fe.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.2d35e723.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.2d35e723.min.css.map"
"assets/stylesheets/main.css": "assets/stylesheets/main.55fa3425.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.55fa3425.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.bf23daf6.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.bf23daf6.min.css.map"
}

3
material/assets/stylesheets/main.55fa3425.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.55fa3425.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/main.7ee248fe.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.7ee248fe.min.css.map
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.2d35e723.min.css.map
View File

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/palette.2d35e723.min.css → material/assets/stylesheets/palette.bf23daf6.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.bf23daf6.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,9 +41,9 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.7ee248fe.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.55fa3425.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2d35e723.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.bf23daf6.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}

2
mkdocs.yml
View File

@ -54,7 +54,7 @@ theme:
- tabs
#- instant
palette:
scheme: dark
scheme: slate
primary: indigo
accent: indigo
font:

41
src/assets/stylesheets/base/_colors.scss
View File

@ -49,22 +49,27 @@
--md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
--md-accent-bg-color: hsla(0, 0%, 100%, 1);
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}
// ----------------------------------------------------------------------------
// Light theme (default)
body {
// Code color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
// Text color shades
--md-text-color: var(--md-default-fg-color);
--md-text-link-color: var(--md-primary-fg-color);
// Admonition shades
--md-admonition-bg-color: var(--md-default-bg-color);
--md-admonition-fg-color: var(--md-default-fg-color);
// Light theme (default)
> * {
// Code color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
// Text color shades
--md-text-color: var(--md-default-fg-color);
--md-text-link-color: var(--md-primary-fg-color);
// Admonition color shades
--md-admonition-bg-color: var(--md-default-bg-color);
--md-admonition-fg-color: var(--md-default-fg-color);
// Footer color shades
--md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
--md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
--md-footer-fg-color: hsla(0, 0%, 100%, 1);
--md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
--md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
}
}

13
src/assets/stylesheets/base/_typeset.scss
View File

@ -36,6 +36,9 @@ input {
color: var(--md-text-color);
font-feature-settings: "kern", "liga";
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
transition:
color 250ms,
background-color 250ms;
}
// Proportionally spaced fonts
@ -45,6 +48,9 @@ kbd {
color: var(--md-text-color);
font-feature-settings: "kern";
font-family: SFMono-Regular, Consolas, Menlo, monospace;
transition:
color 250ms,
background-color 250ms;
}
// ----------------------------------------------------------------------------
@ -138,7 +144,7 @@ kbd {
// Also enable color transition on pseudo elements
&,
&::before {
transition: color 125ms;
transition: color 250ms;
}
// Focused or hover links
@ -292,6 +298,9 @@ kbd {
padding-left: px2rem(12px);
color: var(--md-default-fg-color--light);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
transition:
color 250ms,
border-color 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
@ -437,7 +446,7 @@ kbd {
// Table rows
tr {
transition: background-color 125ms;
transition: background-color 250ms;
// Add background on hover
&:hover {

4
src/assets/stylesheets/extensions/_admonition.scss
View File

@ -76,6 +76,10 @@ $admonitions: (
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
transition:
color 250ms,
background-color 250ms,
border-color 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {

2
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -77,7 +77,7 @@
// Footnote
li {
transition: color 125ms;
transition: color 250ms;
// Darken color for targeted footnote
&:target {

2
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -88,7 +88,7 @@
font-size: ms(-1);
border-bottom: px2rem(2px) solid transparent;
cursor: pointer;
transition: color 125ms;
transition: color 250ms;
// Hovered tab label
html &:hover {

6
src/assets/stylesheets/layout/_button.scss
View File

@ -36,9 +36,9 @@
border: px2rem(2px) solid currentColor;
border-radius: px2rem(2px);
transition:
color 125ms,
background-color 125ms,
border-color 125ms;
color 250ms,
background-color 250ms,
border-color 250ms;
// Primary button
&--primary {

2
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -35,7 +35,7 @@
color: var(--md-default-fg-color--lightest);
border-radius: px2rem(2px);
cursor: pointer;
transition: color 125ms;
transition: color 250ms;
// Hide for print
@media print {

19
src/assets/stylesheets/layout/_footer.scss
View File

@ -26,8 +26,11 @@
// Application footer
.md-footer {
color: var(--md-default-bg-color);
background-color: var(--md-default-fg-color);
color: var(--md-footer-fg-color);
background-color: var(--md-footer-bg-color);
transition:
color 250ms,
background-color 250ms;
// Hide for print
@media print {
@ -129,14 +132,14 @@
left: 0;
margin-top: px2rem(-20px);
padding: 0 px2rem(20px);
color: var(--md-default-bg-color--light);
font-size: ms(-1);
opacity: 0.7;
}
}
// Non-navigational information
.md-footer-meta {
background-color: var(--md-default-fg-color--lighter);
background-color: var(--md-footer-bg-color--dark);
// Set spacing
&__inner {
@ -148,12 +151,12 @@
// Use a decent color for non-hovered links and ensure specificity
html &.md-typeset a {
color: var(--md-default-bg-color--light);
color: var(--md-footer-fg-color--light);
// Focused or hovered link
&:focus,
&:hover {
color: var(--md-default-bg-color);
color: var(--md-footer-fg-color);
}
}
}
@ -163,7 +166,7 @@
width: 100%;
margin: auto px2rem(12px);
padding: px2rem(8px) 0;
color: var(--md-default-bg-color--lighter);
color: var(--md-footer-fg-color--lighter);
font-size: ms(-1);
// [tablet portrait +]: Show next to social media links
@ -173,7 +176,7 @@
// Highlight copyright information
&__highlight {
color: var(--md-default-bg-color--light);
color: var(--md-footer-fg-color--light);
}
}

2
src/assets/stylesheets/layout/_nav.scss
View File

@ -106,7 +106,7 @@
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: color 125ms;
transition: color 250ms;
scroll-snap-align: start;
// Hide link to table of contents by default - this will only match the

12
src/assets/stylesheets/layout/_search.scss
View File

@ -226,7 +226,10 @@ $md-toggle__search--checked:
z-index: 2;
padding: 0 px2rem(44px) 0 px2rem(72px);
text-overflow: ellipsis;
background-color: var(--primary-bg-color);
background-color: var(--md-default-bg-color);
transition:
color 250ms,
background-color 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
@ -265,9 +268,6 @@ $md-toggle__search--checked:
font-size: ms(0);
background-color: hsla(0, 0%, 0%, 0.26);
border-radius: px2rem(2px);
transition:
color 250ms,
background-color 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
@ -445,6 +445,9 @@ $md-toggle__search--checked:
background-color: var(--md-default-bg-color);
// Hack: reduce jitter
backface-visibility: hidden;
transition:
color 250ms,
background-color 250ms;
scroll-snap-type: y mandatory;
touch-action: pan-y;
@ -495,6 +498,7 @@ $md-toggle__search--checked:
.md-search-result {
color: var(--md-default-fg-color);
word-break: break-word;
transition: color 250ms;
// Search metadata
&__meta {

6
src/assets/stylesheets/palette/_scheme.scss
View File

@ -45,7 +45,11 @@
--md-text-color: var(--md-default-fg-color--light);
--md-text-link-color: var(--md-primary-fg-color--light);
// Admonition shades
// Admonition color shades
--md-admonition-bg-color: hsla(0, 0%, 100%, 0.025);
--md-admonition-fg-color: var(--md-default-fg-color);
// Footer color shades
--md-footer-bg-color: hsla(232, 15%, 12%, 0.87);
--md-footer-bg-color--dark: hsla(232, 15%, 10%, 1);
}