Skip to content

Commit 0f9d105

Browse files
SimekSimek
committed
fix lint and home page links hover effect
1 parent 682333d commit 0f9d105

2 files changed

Lines changed: 54 additions & 66 deletions

File tree

‎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: 44 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--ifm-font-family-base:
2121
"Optimistic Display", system-ui, -apple-system, sans-serif;
2222
--ifm-color-primary: #06bcee;
23+
--ifm-color-primary-75: #087ea4cc;
2324
--ifm-font-size-base: 17px;
2425
--ifm-spacing-horizontal: 16px;
2526
--ifm-navbar-item-padding-horizontal: 18px;
@@ -107,7 +108,7 @@ html[data-theme="dark"] {
107108
--ifm-toc-border-color: var(--dark);
108109
--ifm-color-emphasis-300: var(--dark);
109110
--ifm-table-head-background: var(--deepdark);
110-
--subtle: #a7a7a7;
111+
--subtle: #7c7c7c;
111112
--ifm-table-head-color: var(--subtle);
112113

113114
*[class^="DocSearch"] {
@@ -269,7 +270,6 @@ hr {
269270
code {
270271
border-color: transparent;
271272
vertical-align: initial;
272-
font-size: var(--ifm-code-font-size) !important;
273273
}
274274

275275
blockquote {
@@ -297,9 +297,6 @@ hr {
297297

298298
code {
299299
background-color: transparent;
300-
font-size: 90%;
301-
padding: 0 6px;
302-
top: -1px;
303300
position: relative;
304301
}
305302

@@ -496,17 +493,15 @@ html[data-theme="dark"] {
496493
}
497494
}
498495

499-
div[class^="docRoot"] .hash-link,
500-
article[itemprop="blogPost"] .hash-link,
501-
.mdx-page .hash-link,
502-
html[data-theme="dark"] div[class^="docRoot"] .hash-link,
503-
html[data-theme="dark"] article[itemprop="blogPost"] .hash-link,
504-
html[data-theme="dark"].mdx-page .hash-link {
496+
.hash-link,
497+
html[data-theme="dark"] .hash-link {
505498
@extend %hash-link-style;
506499
}
507500

508501
article .badge {
509502
font-weight: 500;
503+
border-radius: 16px;
504+
margin-bottom: 4px;
510505
}
511506

512507
html[data-theme="dark"] article .badge {
@@ -525,6 +520,11 @@ html[data-theme="dark"] article .badge {
525520
div[class^="admonitionContent"] {
526521
a {
527522
border-bottom: 0;
523+
color: var(--ifm-font-color-base);
524+
525+
&:hover {
526+
text-decoration: underline;
527+
}
528528
}
529529
}
530530

@@ -558,6 +558,16 @@ html[data-theme="dark"] .alert--secondary {
558558
font-size: 90%;
559559
}
560560
}
561+
562+
a:not([class*="Button"]) {
563+
@extend %link-style;
564+
}
565+
}
566+
567+
html[data-theme="dark"] .homepage {
568+
a:not([class*="Button"]) {
569+
@extend %link-style-dark;
570+
}
561571
}
562572

563573
/* Version warning */
@@ -637,12 +647,14 @@ div[class^="blogPostData"] {
637647
color: var(--subtle);
638648
}
639649

640-
.main-wrapper.blog-wrapper .container.margin-vert--lg .col.text--right a {
641-
padding: 8px 16px !important;
650+
.blog-wrapper .main-wrapper .container.margin-vert--lg .col.text--right a {
651+
padding: 8px 20px;
652+
border-radius: 32px;
642653
}
643654

644655
a[class*="tagRegular"] {
645-
padding: 6px 12px !important;
656+
padding: 6px 12px;
657+
border-radius: 32px;
646658

647659
&:hover {
648660
background: var(--ifm-menu-color-background-active);
@@ -1251,9 +1263,13 @@ button[class*="tocCollapsibleButton"] {
12511263
font-size: 15px;
12521264
}
12531265

1266+
.pagination-nav__link {
1267+
border: 0;
1268+
transition: background-color 0.15s;
1269+
}
1270+
12541271
.pagination-nav__link:hover {
1255-
background: var(--ifm-menu-color-background-hover);
1256-
border-color: var(--ifm-color-emphasis-300);
1272+
background-color: var(--ifm-menu-color-background-hover);
12571273
}
12581274
}
12591275

@@ -1517,34 +1533,10 @@ td .color-box {
15171533
font-weight: 500;
15181534
color: #fff;
15191535
padding: 2px 12px;
1520-
border-radius: 0 2px 2px 0;
1521-
1522-
/* Label sharp end */
1523-
&:before {
1524-
content: "";
1525-
position: absolute;
1526-
top: 0;
1527-
left: -12px;
1528-
border-color: transparent;
1529-
border-style: solid;
1530-
border-width: 12px 12px 12px 0;
1531-
}
1532-
1533-
/* Label skeuomorphic hole */
1534-
&:after {
1535-
content: "";
1536-
position: absolute;
1537-
top: 10px;
1538-
left: 0;
1539-
width: 4px;
1540-
height: 4px;
1541-
border-radius: 2px;
1542-
background: #fff;
1543-
}
1536+
border-radius: 32px;
15441537

15451538
/* Basic label */
15461539
&.basic {
1547-
border-radius: 3px;
15481540
border-style: solid;
15491541
border-width: 2px;
15501542

@@ -1581,9 +1573,10 @@ td .color-box {
15811573

15821574
&.required {
15831575
margin-left: 0;
1584-
margin-right: 16px;
1576+
margin-right: 8px;
15851577
color: #fa5035;
15861578
border-color: #fa5035;
1579+
border-radius: 32px;
15871580
}
15881581
}
15891582

@@ -1611,20 +1604,20 @@ html[data-theme="dark"] .label {
16111604

16121605
h2 .label {
16131606
top: -6px;
1614-
margin-left: 12px;
1607+
margin-left: 6px;
16151608
padding: 3px 12px;
16161609
}
16171610

16181611
h3 .label {
16191612
top: -3px;
1620-
margin-left: 22px;
1613+
margin-left: 8px;
16211614
line-height: 20px;
16221615
}
16231616

16241617
td .label {
16251618
padding: 0 8px 0 10px;
16261619
font-size: 0.7rem;
1627-
margin-left: 14px;
1620+
margin-left: 6px;
16281621

16291622
&:before {
16301623
left: -8px;
@@ -1636,7 +1629,7 @@ td .label {
16361629
}
16371630

16381631
&.required {
1639-
margin-left: 8px;
1632+
margin-left: 6px;
16401633
letter-spacing: 0.02rem;
16411634
padding: 0 6px;
16421635
border-width: 1px;
@@ -1752,6 +1745,7 @@ article .component-grid {
17521745
padding: 10px;
17531746
font-size: 15px;
17541747
margin: 2px;
1748+
color: var(--ifm-font-color-base);
17551749

17561750
code {
17571751
font-size: 15px;
@@ -1816,7 +1810,7 @@ html[data-theme="dark"] .component {
18161810
color: #057594;
18171811
line-height: 32px;
18181812
font-weight: 500;
1819-
border-radius: 0 var(--ifm-global-radius) var(--ifm-global-radius) 0;
1813+
border-radius: 0 32px 32px 0;
18201814

18211815
svg {
18221816
height: 1.5em;
@@ -2006,12 +2000,12 @@ html[data-theme="light"].blog-wrapper {
20062000
border-bottom: 0;
20072001

20082002
.tabs__item {
2009-
margin-right: 10px;
2010-
border-radius: var(--ifm-global-radius);
2003+
margin-right: 8px;
2004+
border-radius: 32px;
20112005
border: 2px solid var(--ifm-table-border-color);
20122006

20132007
&:hover {
2014-
border-radius: var(--ifm-global-radius);
2008+
border-radius: 32px;
20152009
}
20162010

20172011
&.tabs__item--active {

0 commit comments

Comments
 (0)