From 0f9d1055a4bb4f8808f83e79225267c51a2c31ea Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 12 Aug 2025 15:04:13 +0200 Subject: [PATCH 1/2] fix lint and home page links hover effect --- website/src/css/_shared.scss | 26 ++++----- website/src/css/customTheme.scss | 94 +++++++++++++++----------------- 2 files changed, 54 insertions(+), 66 deletions(-) diff --git a/website/src/css/_shared.scss b/website/src/css/_shared.scss index 598c4cc39a8..17795012390 100644 --- a/website/src/css/_shared.scss +++ b/website/src/css/_shared.scss @@ -7,34 +7,28 @@ %link-style { display: initial; - color: var(--ifm-font-color-base); - background-color: rgba(187, 239, 253, 0.3); line-height: calc(var(--ifm-font-size-base) + 4px); - border-bottom: 1px solid var(--ifm-hr-border-color); + border-bottom: 1px solid transparent; + transition: border-color 0.15s; &:hover { - background-color: rgba(187, 239, 253, 0.6); + border-bottom-color: var(--ifm-color-primary-75); } } %link-style-dark { - background-color: rgba(97, 218, 251, 0.12); - border-bottom-color: rgba(97, 218, 251, 0.3); + color: var(--brand); &:hover { - background-color: rgba(97, 218, 251, 0.4); - border-bottom-color: var(--brand); + border-bottom-color: var(--ifm-color-primary-75); } } %hash-link-style { - background-color: transparent; - border-bottom: 0; - color: var(--subtle); - - &:hover { - background-color: transparent; - color: var(--brand); + &, + &::before { + color: var(--subtle); + border-bottom: 0 !important; } } @@ -42,7 +36,7 @@ display: inline-block; padding: 8px 16px; border: 1px solid var(--ifm-color-emphasis-300); - border-radius: var(--ifm-global-radius); + border-radius: 32px; color: var(--ifm-color-content-secondary); &:hover { diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index a7bb5dc06e9..db0f7685fe3 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -20,6 +20,7 @@ --ifm-font-family-base: "Optimistic Display", system-ui, -apple-system, sans-serif; --ifm-color-primary: #06bcee; + --ifm-color-primary-75: #087ea4cc; --ifm-font-size-base: 17px; --ifm-spacing-horizontal: 16px; --ifm-navbar-item-padding-horizontal: 18px; @@ -107,7 +108,7 @@ html[data-theme="dark"] { --ifm-toc-border-color: var(--dark); --ifm-color-emphasis-300: var(--dark); --ifm-table-head-background: var(--deepdark); - --subtle: #a7a7a7; + --subtle: #7c7c7c; --ifm-table-head-color: var(--subtle); *[class^="DocSearch"] { @@ -269,7 +270,6 @@ hr { code { border-color: transparent; vertical-align: initial; - font-size: var(--ifm-code-font-size) !important; } blockquote { @@ -297,9 +297,6 @@ hr { code { background-color: transparent; - font-size: 90%; - padding: 0 6px; - top: -1px; position: relative; } @@ -496,17 +493,15 @@ html[data-theme="dark"] { } } -div[class^="docRoot"] .hash-link, -article[itemprop="blogPost"] .hash-link, -.mdx-page .hash-link, -html[data-theme="dark"] div[class^="docRoot"] .hash-link, -html[data-theme="dark"] article[itemprop="blogPost"] .hash-link, -html[data-theme="dark"].mdx-page .hash-link { +.hash-link, +html[data-theme="dark"] .hash-link { @extend %hash-link-style; } article .badge { font-weight: 500; + border-radius: 16px; + margin-bottom: 4px; } html[data-theme="dark"] article .badge { @@ -525,6 +520,11 @@ html[data-theme="dark"] article .badge { div[class^="admonitionContent"] { a { border-bottom: 0; + color: var(--ifm-font-color-base); + + &:hover { + text-decoration: underline; + } } } @@ -558,6 +558,16 @@ html[data-theme="dark"] .alert--secondary { font-size: 90%; } } + + a:not([class*="Button"]) { + @extend %link-style; + } +} + +html[data-theme="dark"] .homepage { + a:not([class*="Button"]) { + @extend %link-style-dark; + } } /* Version warning */ @@ -637,12 +647,14 @@ div[class^="blogPostData"] { color: var(--subtle); } -.main-wrapper.blog-wrapper .container.margin-vert--lg .col.text--right a { - padding: 8px 16px !important; +.blog-wrapper .main-wrapper .container.margin-vert--lg .col.text--right a { + padding: 8px 20px; + border-radius: 32px; } a[class*="tagRegular"] { - padding: 6px 12px !important; + padding: 6px 12px; + border-radius: 32px; &:hover { background: var(--ifm-menu-color-background-active); @@ -1251,9 +1263,13 @@ button[class*="tocCollapsibleButton"] { font-size: 15px; } + .pagination-nav__link { + border: 0; + transition: background-color 0.15s; + } + .pagination-nav__link:hover { - background: var(--ifm-menu-color-background-hover); - border-color: var(--ifm-color-emphasis-300); + background-color: var(--ifm-menu-color-background-hover); } } @@ -1517,34 +1533,10 @@ td .color-box { font-weight: 500; color: #fff; padding: 2px 12px; - border-radius: 0 2px 2px 0; - - /* Label sharp end */ - &:before { - content: ""; - position: absolute; - top: 0; - left: -12px; - border-color: transparent; - border-style: solid; - border-width: 12px 12px 12px 0; - } - - /* Label skeuomorphic hole */ - &:after { - content: ""; - position: absolute; - top: 10px; - left: 0; - width: 4px; - height: 4px; - border-radius: 2px; - background: #fff; - } + border-radius: 32px; /* Basic label */ &.basic { - border-radius: 3px; border-style: solid; border-width: 2px; @@ -1581,9 +1573,10 @@ td .color-box { &.required { margin-left: 0; - margin-right: 16px; + margin-right: 8px; color: #fa5035; border-color: #fa5035; + border-radius: 32px; } } @@ -1611,20 +1604,20 @@ html[data-theme="dark"] .label { h2 .label { top: -6px; - margin-left: 12px; + margin-left: 6px; padding: 3px 12px; } h3 .label { top: -3px; - margin-left: 22px; + margin-left: 8px; line-height: 20px; } td .label { padding: 0 8px 0 10px; font-size: 0.7rem; - margin-left: 14px; + margin-left: 6px; &:before { left: -8px; @@ -1636,7 +1629,7 @@ td .label { } &.required { - margin-left: 8px; + margin-left: 6px; letter-spacing: 0.02rem; padding: 0 6px; border-width: 1px; @@ -1752,6 +1745,7 @@ article .component-grid { padding: 10px; font-size: 15px; margin: 2px; + color: var(--ifm-font-color-base); code { font-size: 15px; @@ -1816,7 +1810,7 @@ html[data-theme="dark"] .component { color: #057594; line-height: 32px; font-weight: 500; - border-radius: 0 var(--ifm-global-radius) var(--ifm-global-radius) 0; + border-radius: 0 32px 32px 0; svg { height: 1.5em; @@ -2006,12 +2000,12 @@ html[data-theme="light"].blog-wrapper { border-bottom: 0; .tabs__item { - margin-right: 10px; - border-radius: var(--ifm-global-radius); + margin-right: 8px; + border-radius: 32px; border: 2px solid var(--ifm-table-border-color); &:hover { - border-radius: var(--ifm-global-radius); + border-radius: 32px; } &.tabs__item--active { From 5dac688b15c4e608d29c159e956724287c1b0cb8 Mon Sep 17 00:00:00 2001 From: Simek Date: Fri, 15 Aug 2025 09:57:04 +0200 Subject: [PATCH 2/2] address unwanted spacing for `code` in links --- website/src/css/customTheme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index db0f7685fe3..4e7d2f9910b 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -298,6 +298,7 @@ hr { code { background-color: transparent; position: relative; + padding-inline: 0; } .hermes-logo {