Skip to content

Commit 3b1d92a

Browse files
facelessuserfacelessuser
committed
Docs: Include MathJax menu CSS by default in custom CSS
MathJax menu CSS gets wiped out by default in instant mode. This destroys menu functionality and rendering. Additionally, MathJax provides no on-demand way to regenerate the CSS and insert it into the head. To fix this with instant mode, we have no choice but to generate the CSS ahead of time and include it in our static CSS so that it is always available. Fixes #2618
1 parent 4d6b5e6 commit 3b1d92a

File tree

5 files changed

+62
-18
lines changed

5 files changed

+62
-18
lines changed

‎docs/src/scss/extensions/_arithmatex.scss

+58-14
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,6 @@ mjx-container:not([display]) {
66
font-size: 100% !important;
77
}
88

9-
[data-md-color-scheme="slate"],
10-
[data-md-color-scheme="dracula"] {
11-
/* stylelint-disable selector-class-pattern */
12-
.CtxtMenu_InfoSignature input,
13-
.CtxtMenu_InfoContent pre {
14-
color: rgb(0, 0, 0);
15-
}
16-
.CtxtMenu_Info,
17-
.CtxtMenu_Menu {
18-
box-shadow: 0px 10px 20px rgb(0 0 0 / 0.5);
19-
}
20-
/* stylelint-enable selector-class-pattern */
21-
}
22-
239
.md-typeset .arithmatex {
2410
overflow-x: auto !important;
2511
overflow-y: hidden !important;
@@ -46,3 +32,61 @@ mjx-container:not([display]) {
4632
}
4733
}
4834
}
35+
36+
37+
/* Instant mode in the Material theme wipes out menu CSS and MathJax has no easy way of reinserting it */
38+
39+
/* stylelint-disable */
40+
.CtxtMenu_InfoClose { top:.2em; right:.2em;}
41+
.CtxtMenu_InfoContent { overflow:auto; text-align:left; font-size:80%; padding:.4em .6em; border:1px inset; margin:1em 0px; max-height:20em; max-width:30em; background-color:#EEEEEE; white-space:normal;}
42+
.CtxtMenu_Info.CtxtMenu_MousePost {outline:none;}
43+
.CtxtMenu_Info { position:fixed; left:50%; width:auto; text-align:center; border:3px outset; padding:1em 2em; background-color:#DDDDDD; color:black; cursor:default; font-family:message-box; font-size:120%; font-style:normal; text-indent:0; text-transform:none; line-height:normal; letter-spacing:normal; word-spacing:normal; word-wrap:normal; white-space:nowrap; float:none; z-index:201; border-radius: 15px; /* Opera 10.5 and IE9 */ -webkit-border-radius:15px; /* Safari and Chrome */ -moz-border-radius:15px; /* Firefox */ -khtml-border-radius:15px; /* Konqueror */ box-shadow:0px 10px 20px #808080; /* Opera 10.5 and IE9 */ -webkit-box-shadow:0px 10px 20px #808080; /* Safari 3 & Chrome */ -moz-box-shadow:0px 10px 20px #808080; /* Forefox 3.5 */ -khtml-box-shadow:0px 10px 20px #808080; /* Konqueror */ filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color="gray", Positive="true"); /* IE */}
44+
45+
.CtxtMenu_MenuClose { position:absolute; cursor:pointer; display:inline-block; border:2px solid #AAA; border-radius:18px; -webkit-border-radius: 18px; /* Safari and Chrome */ -moz-border-radius: 18px; /* Firefox */ -khtml-border-radius: 18px; /* Konqueror */ font-family: "Courier New", Courier; font-size:24px; color:#F0F0F0}
46+
.CtxtMenu_MenuClose span { display:block; background-color:#AAA; border:1.5px solid; border-radius:18px; -webkit-border-radius: 18px; /* Safari and Chrome */ -moz-border-radius: 18px; /* Firefox */ -khtml-border-radius: 18px; /* Konqueror */ line-height:0; padding:8px 0 6px /* may need to be browser-specific */}
47+
.CtxtMenu_MenuClose:hover { color:white!important; border:2px solid #CCC!important}
48+
.CtxtMenu_MenuClose:hover span { background-color:#CCC!important}
49+
.CtxtMenu_MenuClose:hover:focus { outline:none}
50+
51+
.CtxtMenu_Menu { position:absolute; background-color:white; color:black; width:auto; padding:5px 0px; border:1px solid #CCCCCC; margin:0; cursor:default; font: menu; text-align:left; text-indent:0; text-transform:none; line-height:normal; letter-spacing:normal; word-spacing:normal; word-wrap:normal; white-space:nowrap; float:none; z-index:201; border-radius: 5px; /* Opera 10.5 and IE9 */ -webkit-border-radius: 5px; /* Safari and Chrome */ -moz-border-radius: 5px; /* Firefox */ -khtml-border-radius: 5px; /* Konqueror */ box-shadow:0px 10px 20px #808080; /* Opera 10.5 and IE9 */ -webkit-box-shadow:0px 10px 20px #808080; /* Safari 3 & Chrome */ -moz-box-shadow:0px 10px 20px #808080; /* Forefox 3.5 */ -khtml-box-shadow:0px 10px 20px #808080; /* Konqueror */}
52+
.CtxtMenu_MenuItem { padding: 1px 2em; background:transparent;}
53+
.CtxtMenu_MenuArrow { position:absolute; right:.5em; padding-top:.25em; color:#666666; font-family: null; font-size: .75em}
54+
.CtxtMenu_MenuActive .CtxtMenu_MenuArrow {color:white}
55+
.CtxtMenu_MenuArrow.CtxtMenu_RTL {left:.5em; right:auto}
56+
.CtxtMenu_MenuCheck { position:absolute; left:.7em; font-family: null}
57+
.CtxtMenu_MenuCheck.CtxtMenu_RTL { right:.7em; left:auto }
58+
.CtxtMenu_MenuRadioCheck { position:absolute; left: .7em;}
59+
.CtxtMenu_MenuRadioCheck.CtxtMenu_RTL { right: .7em; left:auto}
60+
.CtxtMenu_MenuInputBox { padding-left: 1em; right:.5em; color:#666666; font-family: null;}
61+
.CtxtMenu_MenuInputBox.CtxtMenu_RTL { left: .1em;}
62+
.CtxtMenu_MenuComboBox { left:.1em; padding-bottom:.5em;}
63+
.CtxtMenu_MenuSlider { left: .1em;}
64+
.CtxtMenu_SliderValue { position:absolute; right:.1em; padding-top:.25em; color:#333333; font-size: .75em}
65+
.CtxtMenu_SliderBar { outline: none; background: #d3d3d3}
66+
.CtxtMenu_MenuLabel { padding: 1px 2em 3px 1.33em; font-style:italic}
67+
.CtxtMenu_MenuRule { border-top: 1px solid #DDDDDD; margin: 4px 3px;}
68+
.CtxtMenu_MenuDisabled { color:GrayText}
69+
.CtxtMenu_MenuActive { background-color: #606872; color: white;}
70+
.CtxtMenu_MenuDisabled:focus { background-color: #E8E8E8}
71+
.CtxtMenu_MenuLabel:focus { background-color: #E8E8E8}
72+
.CtxtMenu_ContextMenu:focus { outline:none}
73+
.CtxtMenu_ContextMenu .CtxtMenu_MenuItem:focus { outline:none}
74+
.CtxtMenu_SelectionMenu { position:relative; float:left; border-bottom: none; -webkit-box-shadow:none; -webkit-border-radius:0px; }
75+
.CtxtMenu_SelectionItem { padding-right: 1em;}
76+
.CtxtMenu_Selection { right: 40%; width:50%; }
77+
.CtxtMenu_SelectionBox { padding: 0em; max-height:20em; max-width: none; background-color:#FFFFFF;}
78+
.CtxtMenu_SelectionDivider { clear: both; border-top: 2px solid #000000;}
79+
.CtxtMenu_Menu .CtxtMenu_MenuClose { top:-10px; left:-10px}
80+
81+
[data-md-color-scheme="slate"],
82+
[data-md-color-scheme="dracula"] {
83+
.CtxtMenu_InfoSignature input,
84+
.CtxtMenu_InfoContent pre {
85+
color: rgb(0, 0, 0);
86+
}
87+
.CtxtMenu_Info,
88+
.CtxtMenu_Menu {
89+
box-shadow: 0px 10px 20px rgb(0 0 0 / 0.5);
90+
}
91+
}
92+
/* stylelint-enable */

‎docs/theme/assets/pymdownx-extras/extra-9c462a2eae.css.map

-1
This file was deleted.

‎docs/theme/assets/pymdownx-extras/extra-9c462a2eae.css renamed to ‎docs/theme/assets/pymdownx-extras/extra-c6ab11540a.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/theme/assets/pymdownx-extras/extra-c6ab11540a.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mkdocs.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ extra:
239239
link: https://github.com/facelessuser
240240
extra_css:
241241
# - https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
242-
- assets/pymdownx-extras/extra-9c462a2eae.css
242+
- assets/pymdownx-extras/extra-c6ab11540a.css
243243
extra_javascript:
244244
- https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
245245
# - https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js

0 commit comments

Comments
 (0)