Skip to content

Commit cb1a697

Browse files
SimekSimek
authored
Update links, buttons and various tags style (facebook#4724)
1 parent 677aa78 commit cb1a697

File tree

2 files changed

+55
-66
lines changed

2 files changed

+55
-66
lines changed

‎website/src/css/_shared.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,36 @@
77

88
%link-style {
99
display: initial;
10-
color: var(--ifm-font-color-base);
11-
background-color: rgba(187, 239, 253, 0.3);
1210
line-height: calc(var(--ifm-font-size-base) + 4px);
13-
border-bottom: 1px solid var(--ifm-hr-border-color);
11+
border-bottom: 1px solid transparent;
12+
transition: border-color 0.15s;
1413

1514
&:hover {
16-
background-color: rgba(187, 239, 253, 0.6);
15+
border-bottom-color: var(--ifm-color-primary-75);
1716
}
1817
}
1918

2019
%link-style-dark {
21-
background-color: rgba(97, 218, 251, 0.12);
22-
border-bottom-color: rgba(97, 218, 251, 0.3);
20+
color: var(--brand);
2321

2422
&:hover {
25-
background-color: rgba(97, 218, 251, 0.4);
26-
border-bottom-color: var(--brand);
23+
border-bottom-color: var(--ifm-color-primary-75);
2724
}
2825
}
2926

3027
%hash-link-style {
31-
background-color: transparent;
32-
border-bottom: 0;
33-
color: var(--subtle);
34-
35-
&:hover {
36-
background-color: transparent;
37-
color: var(--brand);
28+
&,
29+
&::before {
30+
color: var(--subtle);
31+
border-bottom: 0 !important;
3832
}
3933
}
4034

4135
%button-link-style {
4236
display: inline-block;
4337
padding: 8px 16px;
4438
border: 1px solid var(--ifm-color-emphasis-300);
45-
border-radius: var(--ifm-global-radius);
39+
border-radius: 32px;
4640
color: var(--ifm-color-content-secondary);
4741

4842
&:hover {

‎website/src/css/customTheme.scss‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
--ifm-font-family-base:
2828
"Optimistic Display", system-ui, -apple-system, sans-serif;
2929
--ifm-color-primary: #06bcee;
30+
--ifm-color-primary-75: #087ea4cc;
3031
--ifm-code-background: rgba(0, 0, 0, 0.06);
3132
--ifm-font-size-base: 17px;
3233
--ifm-spacing-horizontal: 16px;
@@ -109,7 +110,7 @@ html[data-theme="light"] {
109110
}
110111

111112
html[data-theme="dark"] {
112-
--subtle: #a7a7a7;
113+
--subtle: #7c7c7c;
113114

114115
--navbar-background: #20232aee;
115116

@@ -279,7 +280,6 @@ hr {
279280
code {
280281
border-color: transparent;
281282
vertical-align: initial;
282-
font-size: var(--ifm-code-font-size) !important;
283283
}
284284

285285
blockquote {
@@ -307,10 +307,8 @@ hr {
307307

308308
code {
309309
background-color: transparent;
310-
font-size: 90%;
311-
padding: 0 6px;
312-
top: -1px;
313310
position: relative;
311+
padding-inline: 0;
314312
}
315313

316314
.hermes-logo {
@@ -506,17 +504,15 @@ html[data-theme="dark"] {
506504
}
507505
}
508506

509-
div[class^="docRoot"] .hash-link,
510-
article[itemprop="blogPost"] .hash-link,
511-
.mdx-page .hash-link,
512-
html[data-theme="dark"] div[class^="docRoot"] .hash-link,
513-
html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
514-
html[data-theme="dark"].mdx-page .hash-link {
507+
.hash-link,
508+
html[data-theme="dark"] .hash-link {
515509
@extend %hash-link-style;
516510
}
517511

518512
article .badge {
519513
font-weight: 500;
514+
border-radius: 16px;
515+
margin-bottom: 4px;
520516
}
521517

522518
html[data-theme="dark"] article .badge {
@@ -535,6 +531,11 @@ html[data-theme="dark"] article .badge {
535531
div[class^="admonitionContent"] {
536532
a {
537533
border-bottom: 0;
534+
color: var(--ifm-font-color-base);
535+
536+
&:hover {
537+
text-decoration: underline;
538+
}
538539
}
539540
}
540541

@@ -568,6 +569,16 @@ html[data-theme="dark"] .alert--secondary {
568569
font-size: 90%;
569570
}
570571
}
572+
573+
a:not([class*="Button"]) {
574+
@extend %link-style;
575+
}
576+
}
577+
578+
html[data-theme="dark"] .homepage {
579+
a:not([class*="Button"]) {
580+
@extend %link-style-dark;
581+
}
571582
}
572583

573584
/* Version warning */
@@ -647,12 +658,14 @@ div[class^="blogPostData"] {
647658
color: var(--subtle);
648659
}
649660

650-
.main-wrapper.blog-wrapper .container.margin-vert--lg .col.text--right a {
651-
padding: 8px 16px !important;
661+
.blog-wrapper .main-wrapper .container.margin-vert--lg .col.text--right a {
662+
padding: 8px 20px;
663+
border-radius: 32px;
652664
}
653665

654666
a[class*="tagRegular"] {
655-
padding: 6px 12px !important;
667+
padding: 6px 12px;
668+
border-radius: 32px;
656669

657670
&:hover {
658671
background: var(--ifm-menu-color-background-active);
@@ -1341,9 +1354,13 @@ button[class*="tocCollapsibleButton"] {
13411354
font-size: 15px;
13421355
}
13431356

1357+
.pagination-nav__link {
1358+
border: 0;
1359+
transition: background-color 0.15s;
1360+
}
1361+
13441362
.pagination-nav__link:hover {
1345-
background: var(--ifm-menu-color-background-hover);
1346-
border-color: var(--ifm-color-emphasis-300);
1363+
background-color: var(--ifm-menu-color-background-hover);
13471364
}
13481365
}
13491366

@@ -1607,34 +1624,10 @@ td .color-box {
16071624
font-weight: 500;
16081625
color: #fff;
16091626
padding: 2px 12px;
1610-
border-radius: 0 2px 2px 0;
1611-
1612-
/* Label sharp end */
1613-
&:before {
1614-
content: "";
1615-
position: absolute;
1616-
top: 0;
1617-
left: -12px;
1618-
border-color: transparent;
1619-
border-style: solid;
1620-
border-width: 12px 12px 12px 0;
1621-
}
1622-
1623-
/* Label skeuomorphic hole */
1624-
&:after {
1625-
content: "";
1626-
position: absolute;
1627-
top: 10px;
1628-
left: 0;
1629-
width: 4px;
1630-
height: 4px;
1631-
border-radius: 2px;
1632-
background: #fff;
1633-
}
1627+
border-radius: 32px;
16341628

16351629
/* Basic label */
16361630
&.basic {
1637-
border-radius: 3px;
16381631
border-style: solid;
16391632
border-width: 2px;
16401633

@@ -1671,9 +1664,10 @@ td .color-box {
16711664

16721665
&.required {
16731666
margin-left: 0;
1674-
margin-right: 16px;
1667+
margin-right: 8px;
16751668
color: #fa5035;
16761669
border-color: #fa5035;
1670+
border-radius: 32px;
16771671
}
16781672
}
16791673

@@ -1701,20 +1695,20 @@ html[data-theme="dark"] .label {
17011695

17021696
h2 .label {
17031697
top: -6px;
1704-
margin-left: 12px;
1698+
margin-left: 6px;
17051699
padding: 3px 12px;
17061700
}
17071701

17081702
h3 .label {
17091703
top: -3px;
1710-
margin-left: 22px;
1704+
margin-left: 8px;
17111705
line-height: 20px;
17121706
}
17131707

17141708
td .label {
17151709
padding: 0 8px 0 10px;
17161710
font-size: 0.7rem;
1717-
margin-left: 14px;
1711+
margin-left: 6px;
17181712

17191713
&:before {
17201714
left: -8px;
@@ -1726,7 +1720,7 @@ td .label {
17261720
}
17271721

17281722
&.required {
1729-
margin-left: 8px;
1723+
margin-left: 6px;
17301724
letter-spacing: 0.02rem;
17311725
padding: 0 6px;
17321726
border-width: 1px;
@@ -1842,6 +1836,7 @@ article .component-grid {
18421836
padding: 10px;
18431837
font-size: 15px;
18441838
margin: 2px;
1839+
color: var(--ifm-font-color-base);
18451840

18461841
code {
18471842
font-size: 15px;
@@ -1906,7 +1901,7 @@ html[data-theme="dark"] .component {
19061901
color: #057594;
19071902
line-height: 32px;
19081903
font-weight: 500;
1909-
border-radius: 0 var(--ifm-global-radius) var(--ifm-global-radius) 0;
1904+
border-radius: 0 32px 32px 0;
19101905

19111906
svg {
19121907
height: 1.5em;
@@ -2096,12 +2091,12 @@ html[data-theme="light"].blog-wrapper {
20962091
border-bottom: 0;
20972092

20982093
.tabs__item {
2099-
margin-right: 10px;
2100-
border-radius: var(--ifm-global-radius);
2094+
margin-right: 8px;
2095+
border-radius: 32px;
21012096
border: 2px solid var(--ifm-table-border-color);
21022097

21032098
&:hover {
2104-
border-radius: var(--ifm-global-radius);
2099+
border-radius: 32px;
21052100
}
21062101

21072102
&.tabs__item--active {

0 commit comments

Comments
 (0)