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
d12df1b543d66df89ff70f5a341aeb6f750d00bd

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

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