Skip to content

Commit 831cdb1

Browse files
recrwplayrecrwplay
authored
Update styles: admonitions, examples, tabs (#348)
Admonitions have improved contrast between text and background, and border color and radius. Example blocks get a docs colour border + border radius and a cleaner style for titles. Tabbed sections have been updated to remove the index card style and also have a docs color border.
1 parent 540f801 commit 831cdb1

File tree

7 files changed

+132
-95
lines changed

7 files changed

+132
-95
lines changed

‎preview-src/example.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ With the privileges from example 1, granted `EXECUTE PROCEDURE *` and denied `EX
3838
3939
With the privileges from example 2, granted `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE PROCEDURE myProc`, execution of the `myProc` procedure is not allowed.
4040
41+
[IMPORTANT]
4142
With the privileges from example 3, granted `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE BOOSTED PROCEDURE myProc`, execution of the `myProc` procedure is not allowed.
42-
4343
With the privileges from example 4, granted `EXECUTE PROCEDURE myProc` and `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE BOOSTED PROCEDURE myProc`, the `myProc` procedure returns the result `A` and `B`.
4444
4545
For comparison, when only granted `EXECUTE BOOSTED PROCEDURE myProc`, the `myProc` procedure returns the result `A`, `B` and `C`, without needing to be granted the `EXECUTE PROCEDURE myProc` privilege.

‎src/css/doc.css‎

Lines changed: 58 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -334,8 +334,9 @@ body {
334334

335335
.doc .admonitionblock {
336336
margin: 1.5rem 0 1.5rem;
337-
/* border-left: 4px solid var(--doc-font-color); */
338-
border-radius: 0.25rem;
337+
border-radius: 0.5rem;
338+
border-style: solid;
339+
border-width: 1px;
339340
}
340341

341342
.doc .admonitionblock p,
@@ -411,19 +412,19 @@ body {
411412
}
412413

413414
.doc .admonitionblock td.icon i.icon-tip {
414-
background-color: var(--tip-border-color);
415+
background-color: var(--tip-color);
415416
}
416417

417418
.doc .admonitionblock td.icon i.icon-important {
418-
background-color: var(--important-border-color);
419+
background-color: var(--important-color);
419420
}
420421

421422
.doc .admonitionblock td.icon i.icon-caution {
422-
background-color: var(--caution-border-color);
423+
background-color: var(--caution-color);
423424
}
424425

425426
.doc .admonitionblock td.icon i.icon-warning {
426-
background-color: var(--warning-border-color);
427+
background-color: var(--warning-color);
427428
}
428429

429430
/* admonition icon contents */
@@ -472,85 +473,81 @@ body {
472473

473474
.doc .admonitionblock.warning {
474475
background-color: var(--warning-background-color);
475-
color: var(--warning-color);
476-
/* border-left-color: var(--warning-border-color); */
476+
border-color: var(--warning-border-color);
477477
}
478478

479479
.doc .admonitionblock.warning a.btn {
480480
background-color: var(--color-red-600);
481481
}
482482

483483
.doc .admonitionblock.warning a {
484-
color: var(--color-red-500);
484+
color: var(--warning-color);
485485
}
486486

487487
.doc .admonitionblock.caution {
488488
background-color: var(--caution-background-color);
489-
color: var(--caution-color);
490-
/* border-left-color: var(--caution-border-color); */
489+
border-color: var(--caution-border-color);
491490
}
492491

493492
.doc .admonitionblock.caution a {
494-
color: var(--color-orange-500);
493+
color: var(--caution-color);
495494
}
496495

497-
.doc .admonitionblock.caution a:hover {
496+
/* .doc .admonitionblock.caution a:hover {
498497
color: var(--color-orange-400);
499-
}
498+
} */
500499

501500
.doc .admonitionblock.caution a.btn {
502501
background-color: var(--color-orange-600);
503502
}
504503

505504
.doc .admonitionblock.tip {
506505
background-color: var(--tip-background-color);
507-
color: var(--tip-color);
508-
/* border-left-color: var(--tip-color); */
506+
border-color: var(--tip-border-color);
509507
}
510508

511509
.doc .admonitionblock.tip a {
512510
color: rgba(var(--colors-baltic-50));
511+
color: var(--tip-color);
513512
}
514513

515-
.doc .admonitionblock.tip a:hover {
514+
/* .doc .admonitionblock.tip a:hover {
516515
color: var(--color-blue-500);
517-
}
516+
} */
518517

519518
.doc .admonitionblock.tip a.btn {
520519
background-color: rgba(var(--colors-baltic-50));
521520
}
522521

523522
.doc .admonitionblock.note {
524523
background-color: var(--note-background-color);
525-
color: var(--note-color);
526-
/* border-left-color: var(--note-border-color); */
524+
border-color: var(--note-border-color);
527525
}
528526

529527
.doc .admonitionblock.note a {
530-
color: rgba(var(--colors-neutral-60));
528+
color: var(--note-color);
531529
}
532530

533-
.doc .admonitionblock.note a:hover {
531+
/* .doc .admonitionblock.note a:hover {
534532
color: rgba(var(--colors-neutral-50));
535-
}
533+
} */
536534

537535
.doc .admonitionblock.note a.btn {
538536
background-color: rgba(var(--colors-neutral-60));
539537
}
540538

541539
.doc .admonitionblock.important {
542540
background-color: var(--important-background-color);
543-
color: var(--important-color);
544-
/* border-left-color: var(--important-border-color); */
541+
border-color: var(--important-border-color);
545542
}
546543

547544
.doc .admonitionblock.important a {
548545
color: var(--important-color);
549546
}
550547

551-
.doc .admonitionblock.important a:hover {
548+
/* .doc .admonitionblock.important a:hover {
552549
color: var(--color-purple-500);
553-
}
550+
} */
554551

555552
.doc .admonitionblock.important a.btn {
556553
background-color: var(--color-purple-600);
@@ -1265,54 +1262,46 @@ body {
12651262
}
12661263

12671264
.doc .tabbed {
1268-
padding: 13px 0 0;
1265+
background: var(--body-background);
1266+
padding: 0;
12691267
margin: 0 -1rem 1.5rem;
1270-
background: rgba(var(--colors-neutral-15));
1271-
border: 1px solid rgba(var(--colors-neutral-20));
1272-
border-top-left-radius: 6px;
1273-
border-top-right-radius: 6px;
1268+
border: 1px solid var(--color-docs);
1269+
border-radius: 8px;
12741270
}
12751271

12761272
.doc .tabbed-tabs {
12771273
display: flex;
1274+
flex-direction: row;
12781275
margin: 0 1rem;
12791276
padding: 0;
1280-
/* background: #edf2f7; */
1281-
/* border-bottom: 1px solid #e6f8ff; */
1277+
gap: 1rem;
1278+
border-bottom: 1px solid rgba(var(--theme-light-palette-neutral-border-weak));
12821279
}
12831280

12841281
.doc .tabbed-tabs .tabbed-tab {
12851282
display: flex;
12861283
flex-grow: 0;
1287-
list-style-type: none;
12881284
font-size: 0.7rem;
12891285
font-weight: 600;
1290-
padding: 0.4rem 0.6rem;
1291-
margin-right: 0.5rem;
1292-
background: rgba(var(--colors-neutral-20));
1293-
border: 1px solid rgba(var(--colors-neutral-20));
1294-
border-top: 3px solid rgba(var(--colors-neutral-30));
1295-
border-top-left-radius: 6px;
1296-
border-top-right-radius: 6px;
12971286
border-bottom: none;
1298-
cursor: default;
1287+
cursor: pointer;
1288+
width: fit-content;
1289+
position: relative;
1290+
padding: 1rem;
12991291
}
13001292

1301-
.doc .tabbed-tabs .tabbed-tab--active {
1302-
margin-bottom: -1px;
1303-
background: var(--color-white);
1304-
color: var(--color-docs);
1305-
border: 1px solid var(--color-docs);
1306-
border-top: 3px solid var(--color-docs);
1307-
border-bottom: none;
1293+
.doc .tabbed-tabs .tabbed-tab span.ndl-tab-underline {
1294+
height: 3px;
1295+
position: absolute;
1296+
left: 0;
1297+
bottom: 0;
1298+
width: 100%;
1299+
border-top-left-radius: 9999px;
1300+
border-top-right-radius: 9999px;
13081301
}
13091302

1310-
.doc .tabbed-container {
1311-
padding: 1rem;
1312-
background: #fff;
1313-
border: 1px solid var(--color-docs);
1314-
border-top-left-radius: 6px;
1315-
border-top-right-radius: 6px;
1303+
.doc .tabbed-tabs .tabbed-tab--active span.ndl-tab-underline {
1304+
background: var(--color-docs);
13161305
}
13171306

13181307
.doc .tabbed-target {
@@ -1396,23 +1385,28 @@ body {
13961385
}
13971386

13981387
.exampleblock {
1399-
margin-top: 0.75rem;
1400-
border: 1px solid var(--example-border-color);
1388+
background: var(--body-background);
1389+
padding: 1rem;
1390+
margin: 0 -1rem 1.5rem;
1391+
border: 1px solid var(--color-docs);
1392+
border-radius: 8px;
14011393
}
14021394

14031395
.doc .exampleblock > .title,
14041396
.doc .exampleblock > .content {
14051397
padding: 0.5rem 0.75rem;
14061398
}
14071399

1408-
.doc .exampleblock > .content {
1409-
border-top: 1px solid var(--example-border-color);
1410-
}
1411-
14121400
.doc .exampleblock > .title {
14131401
color: var(--example-header-font-color);
1414-
background: var(--example-header-background);
1415-
margin-bottom: 0;
1402+
/* border-left: 1px solid var(--color-docs); */
1403+
/* border-right: 1px solid var(--color-docs); */
1404+
padding: 0 0.75rem;
1405+
margin: -0.5rem 0 0;
1406+
transform: translate(0, -1rem);
1407+
width: fit-content;
1408+
background: var(--body-background);
1409+
line-height: 1rem;
14161410
}
14171411

14181412
.tabbed-container > .exampleblock {

‎src/css/highlight.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/*! Adapted from the GitHub style by Vasily Polovnyov <vast@whiteants.net> */
22
.hljs-comment,
33
.hljs-quote {
4-
color: rgba(var(--colors-neutral-50));
4+
color: rgba(var(--colors-neutral-60));
55
font-style: italic;
66
}
77

88
.hljs-keyword,
99
.hljs-selector-tag,
1010
.hljs-subst {
11-
color: rgba(var(--colors-neutral-50));
11+
color: rgba(var(--colors-neutral-60));
1212
font-weight: var(--monospace-font-weight-bold);
1313
}
1414

@@ -17,18 +17,18 @@
1717
.hljs-variable,
1818
.hljs-template-variable,
1919
.hljs-tag .hljs-attr {
20-
color: rgba(var(--colors-baltic-50));
20+
color: rgba(var(--colors-baltic-60));
2121
}
2222

2323
.hljs-string,
2424
.hljs-doctag {
25-
color: rgba(var(--colors-forest-40));
25+
color: rgba(var(--colors-forest-50));
2626
}
2727

2828
.hljs-title,
2929
.hljs-section,
3030
.hljs-selector-id {
31-
color: rgba(var(--colors-lavender-50));
31+
color: rgba(var(--colors-lavender-60));
3232
font-weight: var(--monospace-font-weight-bold);
3333
}
3434

@@ -38,24 +38,24 @@
3838

3939
.hljs-type,
4040
.hljs-class .hljs-title {
41-
color: rgba(var(--colors-baltic-50));
41+
color: rgba(var(--colors-baltic-60));
4242
font-weight: var(--monospace-font-weight-bold);
4343
}
4444

4545
.hljs-tag,
4646
.hljs-name,
4747
.hljs-attribute {
48-
color: rgba(var(--colors-lavender-40));
48+
color: rgba(var(--colors-lavender-60));
4949
font-weight: normal;
5050
}
5151

5252
.hljs-regexp,
5353
.hljs-link {
54-
color: rgba(var(--colors-forest-40));
54+
color: rgba(var(--colors-forest-50));
5555
}
5656

5757
.hljs-operator {
58-
color: rgba(var(--colors-neutral-50));
58+
color: rgba(var(--colors-neutral-60));
5959
}
6060

6161
.hljs-symbol,
@@ -65,11 +65,11 @@
6565

6666
.hljs-built_in,
6767
.hljs-builtin-name {
68-
color: rgba(var(--colors-baltic-50));
68+
color: rgba(var(--colors-baltic-60));
6969
}
7070

7171
.hljs-meta {
72-
color: rgba(var(--colors-neutral-50));
72+
color: rgba(var(--colors-neutral-60));
7373
/* font-weight: var(--monospace-font-weight-bold); */
7474
}
7575

‎src/css/labels.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ div.labels {
1818
padding: 0.5rem 0 1rem;
1919
}
2020

21+
.exampleblock div.labels {
22+
padding: 0.5rem;
23+
}
24+
2125
.header-label-container > div.labels {
2226
display: flex;
2327
align-self: center;

0 commit comments

Comments
 (0)