GitVita
New repositoryImport repositoryNew issue
Your repositories Your dashboard Sign in

microsoft/hve-core

Public

mirrored from https://github.com/microsoft/hve-coreAvailable

Watch0Fork0Star0
CodeCommitsIssuesPull requestsActionsInsightsSecurity
89dad9dfc714f7ed5bdfb747e777d88771fcd71e

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

350lines · 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/* Announcement bar dark mode */
69[data-theme='dark'] div[class*="announcementBar"] {
70 background-color: #332b00;
71 color: #ffd54f;
72}
73
74/* Link hover: MS Learn style (darker color + underline) */
75a:hover {
76 color: var(--ifm-color-primary-dark);
77 text-decoration: underline;
78}
79
80/* No underline on card links */
81a[class*="cardContainer"]:hover,
82a[class*="card"]:hover {
83 text-decoration: none;
84}
85
86a:visited {
87 color: inherit;
88}
89
90/* Navbar link hover: no underline in nav */
91.navbar__link:hover {
92 text-decoration: none;
93}
94
95.navbar__link:visited {
96 color: inherit;
97}
98
99/* Navbar: MS Learn-style sizing */
100.navbar {
101 height: 54px;
102 padding: 0 24px;
103}
104
105.navbar__brand {
106 gap: 0;
107}
108
109.navbar__logo {
110 margin-right: 8px;
111 padding-right: 8px;
112 border-right: 2px solid #161616;
113 height: 24px;
114}
115
116.navbar__title {
117 font-size: 20px;
118 font-weight: 600;
119}
120
121.navbar__brand:hover {
122 text-decoration: none;
123}
124
125.navbar__brand:visited,
126.navbar__brand {
127 color: inherit;
128}
129
130.navbar__title:hover {
131 text-decoration: underline;
132 text-underline-offset: 4px;
133}
134
135.navbar__link {
136 font-size: 14px;
137 font-weight: 400;
138}
139
140.dropdown > .navbar__link {
141 font-size: 14px;
142 font-weight: 400;
143 line-height: 18.2px;
144 padding: 4px 12px;
145 display: block;
146}
147
148.dropdown.navbar__item {
149 padding: 0;
150}
151
152/* Replace filled triangle dropdown arrow with chevron - only on dropdown items */
153.navbar__link[aria-expanded]::after {
154 border: none;
155 content: '';
156 display: inline-block;
157 width: 5px;
158 height: 5px;
159 border-right: 1.5px solid currentColor;
160 border-bottom: 1.5px solid currentColor;
161 transform: rotate(45deg) translateY(-4px);
162 margin-left: 4px;
163 vertical-align: middle;
164}
165
166/* Navbar dark mode */
167[data-theme='dark'] .navbar {
168 background-color: #1f1f1f;
169 border-bottom: 1px solid var(--ms-learn-card-border);
170}
171
172[data-theme='dark'] .navbar__logo {
173 border-right-color: #fff;
174}
175
176[data-theme='dark'] .navbar__title {
177 color: #fff;
178}
179
180[data-theme='dark'] .navbar__link {
181 color: #fff;
182}
183
184[data-theme='dark'] .navbar__link:hover {
185 color: #75b6e7;
186}
187
188/* Sidebar: MS Learn-style */
189.menu__link {
190 font-size: 14px;
191 font-weight: 400;
192 line-height: 25.6px;
193 padding: 2px 0 2px 16px;
194 color: var(--ifm-font-color-base);
195}
196
197.menu__link:hover {
198 color: inherit;
199}
200
201.menu__link:visited {
202 color: inherit;
203}
204
205.menu__link--active {
206 font-weight: 600;
207 color: var(--ifm-font-color-base);
208 background-color: var(--ms-learn-section-bg);
209}
210
211[data-theme='dark'] .menu__link {
212 color: #e6e6e6;
213}
214
215.menu__list-item-collapsible > .menu__link {
216 font-weight: 400;
217}
218
219/* Move caret/chevron to left side of label */
220.menu__list-item-collapsible {
221 flex-direction: row;
222}
223
224.menu__caret {
225 order: -1;
226 padding: 0;
227 margin-right: -4px;
228 transform: scale(0.5);
229}
230
231.menu__link--sublist {
232 padding-left: 4px;
233}
234
235/* Child items indented */
236.menu__list .menu__list {
237 margin-left: 16px;
238 padding-left: 0;
239}
240
241/* Sidebar container */
242.menu {
243 padding: 0 24px 24px;
244}
245
246.theme-doc-sidebar-menu {
247 position: sticky;
248 top: 24px;
249}
250
251/* Footer: MS Learn-style warm gray background */
252.footer--dark {
253 background-color: var(--ms-learn-footer-bg);
254 color: var(--ifm-font-color-base);
255}
256
257.footer--dark .footer__title {
258 color: var(--ifm-font-color-base);
259}
260
261.footer--dark .footer__link-item {
262 color: var(--ifm-link-color);
263}
264
265.footer--dark .footer__copyright {
266 color: var(--ms-learn-text-subtle);
267}
268
269/* Breadcrumbs: MS Learn-style spacing */
270.breadcrumbs__item:not(:last-child)::after {
271 margin: 0 0.5rem;
272}
273
274.breadcrumbs__link {
275 font-size: 14px;
276 color: var(--ifm-link-color);
277}
278
279/* Content area padding */
280.theme-doc-markdown {
281 padding: 24px 0;
282}
283
284/* TOC: "In this article" heading on right-side TOC */
285.table-of-contents {
286 border-left: 2px solid var(--ms-learn-card-border);
287 padding-left: 1rem;
288}
289
290.table-of-contents::before {
291 content: 'In this article';
292 display: block;
293 font-size: 14px;
294 font-weight: 600;
295 color: var(--ifm-font-color-base);
296 margin-bottom: 0.5rem;
297 text-transform: uppercase;
298 letter-spacing: 0.05em;
299}
300
301/* Article metadata styling */
302.theme-doc-markdown header + div {
303 color: var(--ms-learn-text-subtle);
304 font-size: 0.875rem;
305 margin-bottom: 1.5rem;
306}
307
308/* Generated-index cards: MS Learn-style treatment */
309.docCard {
310 border: 1px solid var(--ms-learn-card-border);
311 border-radius: 4px;
312 transition: box-shadow 0.2s;
313}
314
315.docCard:hover {
316 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
317}
318
319.docCard a:hover {
320 text-decoration: none;
321}
322
323/* Dark mode: derived from MS Learn dark theme (extracted via Chrome DevTools) */
324[data-theme='dark'] {
325 --ifm-color-primary: #75b6e7;
326 --ifm-color-primary-dark: #479ef5;
327 --ifm-color-primary-darker: #2886c7;
328 --ifm-color-primary-darkest: #0f6cbd;
329 --ifm-color-primary-light: #96c6fa;
330 --ifm-color-primary-lighter: #b8d7f5;
331 --ifm-color-primary-lightest: #cfe4fa;
332 --ifm-background-color: #1f1f1f;
333 --ifm-font-color-base: #ffffff;
334 --ifm-link-color: #75b6e7;
335 --ifm-footer-background-color: #091f2c;
336 --ifm-card-background-color: #091f2c;
337 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
338
339 --ms-learn-hero-bg: #1a6fb5;
340 --ms-learn-hero-gradient: linear-gradient(174.2deg, #1a6fb5 0%, #115ea3 66.72%, #0c3b5e);
341 --ms-learn-hero-text: #ffffff;
342 --ms-learn-card-accent: #75b6e7;
343 --ms-learn-card-border: #404040;
344 --ms-learn-text-subtle: #d2d2d2;
345 --ms-learn-section-bg: #292929;
346 --ms-learn-footer-bg: #091f2c;
347 --ms-learn-visited-link: #ac7ee1;
348 --ms-learn-success: #2ea043;
349 --ms-learn-danger: #f85149;
350}
351