euv_ui/style/css/
const.rs

1/// Raw stylesheet for rendered markdown bodies ([`crate::euv_markdown`]).
2///
3/// `class!` cannot express descendant selectors, so markdown typography is
4/// injected once at startup through `Css::inject_css`. All colors reference
5/// the theme CSS variables, so light/dark switching works unchanged.
6pub const EUV_MD_CSS: &str = r#"
7.md-body {
8    line-height: 1.7;
9    font-size: var(--font-base);
10    word-wrap: break-word;
11}
12.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
13    position: relative;
14    font-weight: 700;
15    letter-spacing: -0.01em;
16    margin-top: 1.8em;
17    margin-bottom: 0.6em;
18    scroll-margin-top: 72px;
19    line-height: 1.3;
20}
21.md-body h1 {
22    font-size: var(--font-3xl);
23    margin-top: 0;
24    padding-bottom: 0.4em;
25    border-bottom: 1px solid var(--border);
26}
27.md-body h2 {
28    font-size: var(--font-2xl);
29    padding-bottom: 0.3em;
30    border-bottom: 1px dashed var(--border);
31}
32.md-body h3 { font-size: var(--font-xl); }
33.md-body h4 { font-size: var(--font-lg); }
34.md-body h5, .md-body h6 { font-size: var(--font-base); }
35.md-body .header-anchor {
36    float: left;
37    margin-left: -0.9em;
38    padding-right: 0.2em;
39    opacity: 0;
40    color: var(--muted-foreground);
41    font-weight: 400;
42    transition: opacity 0.15s ease-out;
43    user-select: none;
44}
45.md-body h1:hover .header-anchor,
46.md-body h2:hover .header-anchor,
47.md-body h3:hover .header-anchor,
48.md-body h4:hover .header-anchor,
49.md-body h5:hover .header-anchor,
50.md-body h6:hover .header-anchor {
51    opacity: 1;
52}
53.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body pre, .md-body table {
54    margin: 1em 0;
55}
56.md-body ul, .md-body ol {
57    padding-left: 1.4em;
58}
59.md-body ul { list-style: disc; }
60.md-body ol { list-style: decimal; }
61.md-body ul ul, .md-body ul ol, .md-body ol ul, .md-body ol ol {
62    margin: 0.25em 0;
63}
64.md-body li { margin: 0.25em 0; }
65.md-body li input[type="checkbox"] {
66    margin-right: 0.4em;
67    accent-color: var(--accent);
68}
69.md-body a {
70    color: var(--accent);
71    font-weight: 500;
72    text-decoration: underline;
73    text-underline-offset: 3px;
74    text-decoration-style: dashed;
75    text-decoration-color: var(--border);
76}
77.md-body a:hover {
78    text-decoration-style: solid;
79    text-decoration-color: var(--accent);
80}
81.md-body strong { font-weight: 700; }
82.md-body em { font-style: italic; }
83.md-body del { opacity: 0.6; }
84.md-body hr {
85    border: none;
86    border-top: 1px dashed var(--border);
87    margin: 2em 0;
88}
89.md-body blockquote {
90    margin: 1em 0;
91    padding: 0.4em 1em;
92    border-left: 4px solid var(--border);
93    color: var(--muted-foreground);
94}
95.md-body blockquote p { margin: 0.4em 0; }
96.md-body code {
97    font-family: ui-monospace, monospace;
98    font-size: 0.875em;
99    padding: 0.15em 0.4em;
100    background: var(--accent-muted);
101    border: 1px solid var(--border);
102    /* Inline <code> that wraps to multiple lines must keep its border
103       on every fragment, otherwise the first line loses its right border
104       and subsequent lines lose their left border.
105
106       box-decoration-break: clone alone is not enough in practice: the
107       per-fragment borders stack against the next fragment's background
108       and the visual gap between fragments collapses, making the right
109       border of one line look like the left border of the next (and
110       neither looks fully closed). Making the element inline-block
111       guarantees each fragment draws its own box with its own four
112       borders, exactly the same trick used by euv_tag. */
113    -webkit-box-decoration-break: clone;
114    box-decoration-break: clone;
115    display: inline-block;
116    vertical-align: text-top;
117    line-height: 1.4;
118}
119.md-body pre {
120    padding: 1em 1.2em;
121    overflow-x: auto;
122    border: 1px solid var(--border);
123    background: var(--accent-muted);
124}
125.md-body pre code {
126    padding: 0;
127    border: none;
128    background: transparent;
129    font-size: 0.875rem;
130    line-height: 1.6;
131}
132.md-body table {
133    width: 100%;
134    border-collapse: collapse;
135    font-size: var(--font-sm);
136    display: block;
137    overflow-x: auto;
138}
139.md-body table thead { border-bottom: 2px solid var(--border); }
140.md-body table th, .md-body table td {
141    padding: 0.5em 0.9em;
142    border: 1px solid var(--border);
143    text-align: left;
144}
145.md-body table th { font-weight: 700; }
146.md-body table tbody tr:nth-child(2n) { background: var(--accent-muted); }
147.md-body img { max-width: 100%; }
148.md-body .docs-container {
149    margin: 1.2em 0;
150    padding: 0.1em 1.2em;
151    border-left: 4px solid var(--foreground);
152    background: var(--accent-muted);
153}
154.md-body .docs-container .docs-container-title {
155    font-weight: 700;
156    font-size: var(--font-sm);
157    letter-spacing: 0.04em;
158    text-transform: uppercase;
159    margin: 0.8em 0 0.4em;
160}
161.md-body .docs-container.tip { border-left-style: solid; }
162.md-body .docs-container.warning { border-left-style: dashed; }
163.md-body .docs-container.danger {
164    border-left: 4px double var(--foreground);
165}
166.md-body .docs-container.details {
167    border-left: 1px solid var(--border);
168    background: transparent;
169}
170.md-body .footnote-definition { font-size: var(--font-sm); color: var(--muted-foreground); }
171"#;
euv_ui/style/css/const.rs

euv_ui/style/css/
const.rs
