OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added keys styling from Python Markdown Extensions

Browse Source
This commit is contained in:
squidfunk 2020-07-22 11:50:43 +02:00
parent 5d831bbdd1
commit 4a50cab8c8
17 changed files with 162 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
material/assets/manifest.json
View File

@ -5,10 +5,10 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.877163d5.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.a68abb33.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.f03f5644.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.f03f5644.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.364d010a.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.364d010a.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.0ad0ad40.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.0ad0ad40.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.87445083.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.87445083.min.css.map"
"assets/stylesheets/palette.css": "assets/stylesheets/palette.a53427c9.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a53427c9.min.css.map"
}

3
material/assets/stylesheets/main.364d010a.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.364d010a.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/palette.87445083.min.css → material/assets/stylesheets/palette.a53427c9.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.a53427c9.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.f03f5644.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.364d010a.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.87445083.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a53427c9.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}

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

@ -54,22 +54,27 @@
> * {
// Code color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
// Keyboard color shades
--md-kbd-color: hsla(0, 0%, 98%, 1);
--md-kbd-accent-color: hsla(0, 100%, 100%, 1);
--md-kbd-border-color: hsla(0, 0%, 72%, 1);
// Text color shades
--md-text-color: var(--md-default-fg-color);
--md-text-link-color: var(--md-primary-fg-color);
--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);
--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);
--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);
}
}

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

@ -246,19 +246,21 @@ kbd {
}
}
// Keystrokes
// Keyboard key
kbd {
display: inline-block;
padding: 0 px2em(8px, 12px);
color: var(--md-default-fg-color);
font-size: px2em(12px);
line-height: 1.5;
vertical-align: text-top;
word-break: break-word;
background-color: var(--md-kbd-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter),
0 px2rem(2px) 0 var(--md-default-fg-color--lighter),
inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color);
0 px2rem(2px) 0 px2rem(1px) var(--md-kbd-border-color),
0 px2rem(2px) 0 var(--md-kbd-border-color),
0 px2rem(-2px) px2rem(4px) var(--md-kbd-accent-color) inset;
}
// Text highlighting marker
@ -454,7 +456,7 @@ kbd {
// Add background on hover
&:hover {
background-color: rgba(0, 0, 0, 0.035);
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
}
// Remove top border on first row

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

@ -242,7 +242,7 @@ $codehilite-whitespace: transparent;
// Add spacing to line number container
.linenodiv {
padding-right: px2em(8px, 13.6px);
box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
// Reset spacings
pre {

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

@ -40,7 +40,7 @@
padding-left: px2em(16px, 13.6px);
color: var(--md-default-fg-color--lighter);
background-color: var(--md-code-bg-color);
box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
content: attr(data-linenos);
user-select: none;
}

116
src/assets/stylesheets/extensions/pymdown/_keys.scss Normal file
View File

@ -0,0 +1,116 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content
.md-typeset .keys {
// Keyboard key icon
kbd::before,
kbd::after {
position: relative;
margin: 0;
color: inherit;
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
}
// Surrounding text
span {
padding: 0 px2em(3.2px);
color: var(--md-default-fg-color--light);
}
// Build special keys with left icon
@each $name, $code in (
// Modifiers
"alt": "\2387",
"left-alt": "\2387",
"right-alt": "\2387",
"command": "\2318",
"left-command": "\2318",
"right-command": "\2318",
"control": "\2303",
"left-control": "\2303",
"right-control": "\2303",
"meta": "\25C6",
"left-meta": "\25C6",
"right-meta": "\25C6",
"option": "\2325",
"left-option": "\2325",
"right-option": "\2325",
"shift": "\21E7",
"left-shift": "\21E7",
"right-shift": "\21E7",
"super": "\2756",
"left-super": "\2756",
"right-super": "\2756",
"windows": "\229E",
"left-windows": "\229E",
"right-windows": "\229E",
// Other keys
"arrow-down": "\25bd",
"arrow-left": "\25c1",
"arrow-right": "\25b7",
"arrow-up": "\25b3",
"backspace": "\232B",
"backtab": "\21E4",
"caps-lock": "\21EA",
"clear": "\2327",
"context-menu": "\2630",
"delete": "\2326",
"eject": "\23CF",
"end": "\2913",
"escape": "\238b",
"home": "\2912",
"insert": "\2380",
"page-down": "\21df",
"page-up": "\21de",
"print-screen": "\2399"
) {
.key-#{$name} {
&::before {
padding-right: px2em(6.4px);
content: $code;
}
}
}
// Build special keys with right icon
@each $name, $code in (
"tab": "\21B9",
"num-enter": "\2324",
"enter": "\23CE"
) {
.key-#{$name} {
&::after {
padding-left: px2em(6.4px);
content: $code;
}
}
}
}

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

@ -208,7 +208,7 @@
overflow-y: auto;
background-color: var(--md-default-bg-color);
box-shadow:
inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
scroll-snap-type: y mandatory;
touch-action: pan-y;

1
src/assets/stylesheets/main.scss
View File

@ -67,6 +67,7 @@
@import "extensions/pymdown/details";
@import "extensions/pymdown/emoji";
@import "extensions/pymdown/highlight";
@import "extensions/pymdown/keys";
@import "extensions/pymdown/tabbed";
@import "extensions/pymdown/tasklist";

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

@ -39,7 +39,12 @@
// Code color shades
--md-code-bg-color: hsla(232, 15%, 18%, 1);
--md-code-fg-color: hsla(60, 30%, 96%, 1);
--md-code-fg-color: hsla(232, 18%, 86%, 1);
// Keyboard color shades
--md-kbd-color: hsla(232, 15%, 94%, 0.12);
--md-kbd-accent-color: hsla(232, 15%, 94%, 0.2);
--md-kbd-border-color: hsla(232, 15%, 14%, 1);
// Text color shades
--md-text-color: var(--md-default-fg-color--light);