GitVita
New repositoryImport repositoryNew issue
Your repositories Your dashboard Sign in

microsoft/hve-core

Public

mirrored fromhttps://github.com/microsoft/hve-coreAvailable

Watch0Fork0Star0
CodeCommitsIssuesPull requestsActionsInsightsSecurity
feat/a11y-pr6-docs

Branches

Tags

  • No tags available.
0Branches0Tags
Go to file
Add file
Code

Clone

HTTPS

Download ZIP

hve-core/docs/docusaurus/src/css

docs/docusaurus/src/css/custom.css

351lines · modecode

RawDownload
Latest commit unavailable.
1/**
2 * MS Learn Architecture Center Color System
3 * Three-blue palette: #005ba1 (hero), #0078d4 (cards), #0f6cbd (primary)
4 * Dual-layer: Infima overrides + custom --ms-learn-* properties
5 */
6
7@import 'remark-github-blockquote-alert/alert.css';
8
9/* Segoe UI Variable web font (matches MS Learn) */
10@font-face {
11 font-family: 'Segoe UI Variable Text';
12 src: url('https://learn.microsoft.com/static/third-party/SegoeUIVariable/SegoeUI-VF.ttf') format('truetype-variations');
13 font-weight: 100 700;
14 font-style: normal;
15 font-display: swap;
16}
17
18@font-face {
19 font-family: 'SegoeUI';
20 src: url('https://learn.microsoft.com/static/third-party/SegoeUIWeb/1.01.206/SegoeUI-Roman-VF_web.woff2') format('woff2');
21 font-weight: 100 700;
22 font-style: normal;
23 font-display: swap;
24}
25
26/* Layer 1: Infima variable overrides */
27:root {
28 --ifm-color-primary: #0f6cbd;
29 --ifm-color-primary-dark: #115ea3;
30 --ifm-color-primary-darker: #0c3b5e;
31 --ifm-color-primary-darkest: #0a2e4a;
32 --ifm-color-primary-light: #2886c7;
33 --ifm-color-primary-lighter: #479ef5;
34 --ifm-color-primary-lightest: #96c6fa;
35 --ifm-background-color: #ffffff;
36 --ifm-font-color-base: #161616;
37 --ifm-link-color: #0065b3;
38 --ifm-footer-background-color: #e8e6df;
39 --ifm-card-background-color: #ffffff;
40 --ifm-code-font-size: 95%;
41 --ifm-font-family-base: 'Segoe UI', 'Segoe UI Variable Text', -apple-system, 'system-ui', 'Helvetica Neue', Helvetica, Arial, sans-serif;
42 --ifm-heading-font-family: 'Segoe UI', 'Segoe UI Variable Text', -apple-system, 'system-ui', 'Helvetica Neue', Helvetica, Arial, sans-serif;
43 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
44
45 /* Heading sizes to match MS Learn */
46 --ifm-h1-font-size: 2.5rem;
47 --ifm-h2-font-size: 1.125rem;
48 --ifm-h3-font-size: 1rem;
49 --ifm-h4-font-size: 0.875rem;
50 --ifm-heading-font-weight: 600;
51 --ifm-line-height-base: 1.3;
52
53 /* Layer 2: Custom MS Learn properties */
54 --ms-learn-hero-bg: #005ba1;
55 --ms-learn-hero-gradient: linear-gradient(174.2deg, #005ba1 0%, #004d88 66.72%, #003e6e);
56 --ms-learn-hero-text: #ffffff;
57 --ms-learn-hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none'%3E%3Cpath d='M8 6l10 10m0-10L8 16M38 36l10 10m0-10L38 46' stroke='%23000' stroke-opacity='0.08' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
58 --ms-learn-card-accent: #0078d4;
59 --ms-learn-card-border: #e6e6e6;
60 --ms-learn-text-subtle: #505050;
61 --ms-learn-section-bg: #f2f2f2;
62 --ms-learn-footer-bg: #e8e6df;
63 --ms-learn-visited-link: #624991;
64 --ms-learn-success: #107c10;
65 --ms-learn-danger: #bc2f32;
66}
67
68/* Link hover: MS Learn style (darker color + underline) */
69a:hover {
70 color: var(--ifm-color-primary-dark);
71 text-decoration: underline;
72}
73
74/* No underline on card links */
75a[class*="cardContainer"]:hover,
76a[class*="card"]:hover {
77 text-decoration: none;
78}
79
80a:visited {
81 color: inherit;
82}
83
84/* Navbar link hover: no underline in nav */
85.navbar__link:hover {
86 text-decoration: none;
87}
88
89.navbar__link:visited {
90 color: inherit;
91}
92
93.navbar__search kbd {
94 background-color: #ebedf0;
95 border-color: #6b7680;
96 box-shadow: inset 0 -1px 0 #6b7680;
97 color: #4a5560;
98}
99
100/* Navbar: MS Learn-style sizing */
101.navbar {
102 height: 54px;
103 padding: 0 24px;
104}
105
106.navbar__brand {
107 gap: 0;
108}
109
110.navbar__logo {
111 margin-right: 8px;
112 padding-right: 8px;
113 border-right: 2px solid #161616;
114 height: 24px;
115}
116
117.navbar__title {
118 font-size: 20px;
119 font-weight: 600;
120}
121
122.navbar__brand:hover {
123 text-decoration: none;
124}
125
126.navbar__brand:visited,
127.navbar__brand {
128 color: inherit;
129}
130
131.navbar__title:hover {
132 text-decoration: underline;
133 text-underline-offset: 4px;
134}
135
136.navbar__link {
137 font-size: 14px;
138 font-weight: 400;
139}
140
141.dropdown > .navbar__link {
142 font-size: 14px;
143 font-weight: 400;
144 line-height: 18.2px;
145 padding: 4px 12px;
146 display: block;
147}
148
149.dropdown.navbar__item {
150 padding: 0;
151}
152
153/* Replace filled triangle dropdown arrow with chevron - only on dropdown items */
154.navbar__link[aria-expanded]::after {
155 border: none;
156 content: '';
157 display: inline-block;
158 width: 5px;
159 height: 5px;
160 border-right: 1.5px solid currentColor;
161 border-bottom: 1.5px solid currentColor;
162 transform: rotate(45deg) translateY(-4px);
163 margin-left: 4px;
164 vertical-align: middle;
165}
166
167/* Navbar dark mode */
168[data-theme='dark'] .navbar {
169 background-color: #1f1f1f;
170 border-bottom: 1px solid var(--ms-learn-card-border);
171}
172
173[data-theme='dark'] .navbar__logo {
174 border-right-color: #fff;
175}
176
177[data-theme='dark'] .navbar__title {
178 color: #fff;
179}
180
181[data-theme='dark'] .navbar__link {
182 color: #fff;
183}
184
185[data-theme='dark'] .navbar__link:hover {
186 color: #75b6e7;
187}
188
189/* Sidebar: MS Learn-style */
190.menu__link {
191 font-size: 14px;
192 font-weight: 400;
193 line-height: 25.6px;
194 padding: 2px 0 2px 16px;
195 color: var(--ifm-font-color-base);
196}
197
198.menu__link:hover {
199 color: inherit;
200}
201
202.menu__link:visited {
203 color: inherit;
204}
205
206.menu__link--active {
207 font-weight: 600;
208 color: var(--ifm-font-color-base);
209 background-color: var(--ms-learn-section-bg);
210}
211
212[data-theme='dark'] .menu__link {
213 color: #e6e6e6;
214}
215
216.menu__list-item-collapsible > .menu__link {
217 font-weight: 400;
218}
219
220/* Move caret/chevron to left side of label */
221.menu__list-item-collapsible {
222 flex-direction: row;
223}
224
225.menu__caret {
226 order: -1;
227 padding: 0;
228 margin-right: -4px;
229 transform: scale(0.5);
230}
231
232.menu__link--sublist {
233 padding-left: 4px;
234}
235
236/* Child items indented */
237.menu__list .menu__list {
238 margin-left: 16px;
239 padding-left: 0;
240}
241
242/* Sidebar container */
243.menu {
244 padding: 0 24px 24px;
245}
246
247.theme-doc-sidebar-menu {
248 position: sticky;
249 top: 24px;
250}
251
252/* Footer: MS Learn-style warm gray background */
253.footer--dark {
254 background-color: var(--ms-learn-footer-bg);
255 color: var(--ifm-font-color-base);
256}
257
258.footer--dark .footer__title {
259 color: var(--ifm-font-color-base);
260}
261
262.footer--dark .footer__link-item {
263 color: var(--ifm-link-color);
264}
265
266.footer--dark .footer__copyright {
267 color: var(--ms-learn-text-subtle);
268}
269
270/* Breadcrumbs: MS Learn-style spacing */
271.breadcrumbs__item:not(:last-child)::after {
272 margin: 0 0.5rem;
273}
274
275.breadcrumbs__link {
276 font-size: 14px;
277 color: var(--ifm-link-color);
278}
279
280/* Content area padding */
281.theme-doc-markdown {
282 padding: 24px 0;
283}
284
285/* TOC: "In this article" heading on right-side TOC */
286.table-of-contents {
287 border-left: 2px solid var(--ms-learn-card-border);
288 padding-left: 1rem;
289}
290
291.table-of-contents::before {
292 content: 'In this article';
293 display: block;
294 font-size: 14px;
295 font-weight: 600;
296 color: var(--ifm-font-color-base);
297 margin-bottom: 0.5rem;
298 text-transform: uppercase;
299 letter-spacing: 0.05em;
300}
301
302/* Article metadata styling */
303.theme-doc-markdown header + div {
304 color: var(--ms-learn-text-subtle);
305 font-size: 0.875rem;
306 margin-bottom: 1.5rem;
307}
308
309/* Generated-index cards: MS Learn-style treatment */
310.docCard {
311 border: 1px solid var(--ms-learn-card-border);
312 border-radius: 4px;
313 transition: box-shadow 0.2s;
314}
315
316.docCard:hover {
317 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
318}
319
320.docCard a:hover {
321 text-decoration: none;
322}
323
324/* Dark mode: derived from MS Learn dark theme (extracted via Chrome DevTools) */
325[data-theme='dark'] {
326 --ifm-color-primary: #75b6e7;
327 --ifm-color-primary-dark: #479ef5;
328 --ifm-color-primary-darker: #2886c7;
329 --ifm-color-primary-darkest: #0f6cbd;
330 --ifm-color-primary-light: #96c6fa;
331 --ifm-color-primary-lighter: #b8d7f5;
332 --ifm-color-primary-lightest: #cfe4fa;
333 --ifm-background-color: #1f1f1f;
334 --ifm-font-color-base: #ffffff;
335 --ifm-link-color: #75b6e7;
336 --ifm-footer-background-color: #091f2c;
337 --ifm-card-background-color: #091f2c;
338 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
339
340 --ms-learn-hero-bg: #1a6fb5;
341 --ms-learn-hero-gradient: linear-gradient(174.2deg, #1a6fb5 0%, #115ea3 66.72%, #0c3b5e);
342 --ms-learn-hero-text: #ffffff;
343 --ms-learn-card-accent: #75b6e7;
344 --ms-learn-card-border: #404040;
345 --ms-learn-text-subtle: #d2d2d2;
346 --ms-learn-section-bg: #292929;
347 --ms-learn-footer-bg: #091f2c;
348 --ms-learn-visited-link: #ac7ee1;
349 --ms-learn-success: #2ea043;
350 --ms-learn-danger: #f85149;
351}
352