From 0148669a909cfd262b8e80351bfe7ef1ac121e84 Mon Sep 17 00:00:00 2001 From: Simek Date: Mon, 15 Sep 2025 15:11:03 +0200 Subject: [PATCH 1/3] refresh appearance of Sidebar and ToC, unify border radius --- website/core/DocsRating.tsx | 4 +- website/src/css/customTheme.scss | 221 ++++++++++++++++--------------- 2 files changed, 119 insertions(+), 106 deletions(-) diff --git a/website/core/DocsRating.tsx b/website/core/DocsRating.tsx index 521cbec53ef..9908804726d 100644 --- a/website/core/DocsRating.tsx +++ b/website/core/DocsRating.tsx @@ -34,7 +34,7 @@ const DocsRating = ({label}) => { {haveVoted ? ( 'Thanks for letting us know!' ) : ( -
+ <> Is this page useful? { viewBox="0 0 81.13 89.76"> -
+ )} ); diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 6bac47b8208..2cd2c0547fe 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -19,6 +19,8 @@ --navbar-background: #111317ee; --navbar-active-item-background: #61dafb11; + --sidebar-active-item-background: #e6f7ff; + --docs-rating-background: #64d7ff33; --doc-sidebar-width: 266px !important; --docsearch-container-background: rgba(32, 35, 42, 0.6); @@ -26,6 +28,9 @@ --ifm-font-family-base: "Optimistic Display", system-ui, -apple-system, sans-serif; + --ifm-font-family-monospace: + Source Code Pro, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; --ifm-color-primary: #06bcee; --ifm-color-primary-75: #087ea4cc; --ifm-code-background: rgba(0, 0, 0, 0.06); @@ -52,6 +57,7 @@ --ifm-table-border-color: var(--ifm-toc-border-color); --ifm-table-cell-padding: 10px; --ifm-table-stripe-background: rgba(0, 0, 0, 0.02); + --ifm-alert-border-radius: 20px; @media (min-width: 340px) { --ifm-navbar-sidebar-width: 340px; @@ -80,7 +86,7 @@ --home-section-top: white; --home-section-bottom: #efeff2; --home-secondary-text: #404756; - --home-feature-background-1: #f1dbfc; + --home-feature-background-1: #f4e3fc; --home-feature-background-2: #e1eefc; --home-feature-background-3: #d4f3e7; --home-border: #e5e7eb; @@ -113,6 +119,7 @@ html[data-theme="dark"] { --subtle: #7c7c7c; --navbar-background: #20232aee; + --sidebar-active-item-background: #61dafb15; --ifm-code-background: rgba(255, 255, 255, 0.06); --ifm-toc-border-color: var(--dark); @@ -597,13 +604,14 @@ html[data-theme="dark"] .homepage { /* Version warning */ .theme-doc-version-banner { - background-color: rgba(100, 215, 255, 0.3); - border-style: none; + background-color: var(--docs-rating-background); + border: 1px solid rgba(125, 222, 255, 0.21); color: var(--ifm-font-color-base); box-shadow: none; font-size: 15px; line-height: var(--ifm-pre-line-height); text-align: center; + border-radius: 20px; a { color: var(--ifm-font-color-base) !important; @@ -913,11 +921,6 @@ So we need to "revert" some CSS vars to not enforce dark mode } } - .menu__list-item a { - color: var(--ifm-color-emphasis-700); - padding: 4px 12px; - } - .menu__list-item-collapsible a[class*="menuLinkText"] { font-weight: 600; font-size: 14px; @@ -982,6 +985,7 @@ So we need to "revert" some CSS vars to not enforce dark mode aside[class^="theme-doc-sidebar-container"] { margin-right: 16px; + border-right: 0; .menu__list .menu__list { margin-top: 0; @@ -1078,10 +1082,11 @@ aside[class^="theme-doc-sidebar-container"] { a { line-height: 20px; } + } - .menu__link--active { - font-weight: 600; - } + .menu__link { + border-radius: 8px; + padding: 6px 12px; } .menu__list-item { @@ -1092,8 +1097,7 @@ aside[class^="theme-doc-sidebar-container"] { .menu__link--sublist { font-size: 15px; - padding: 4px 12px !important; - color: var(--light); + padding: 4px 12px; &:after { background-size: 1.66rem 1.66rem; @@ -1124,15 +1128,11 @@ aside[class^="theme-doc-sidebar-container"] { } .menu__link.menu__link--active { - border-left-color: var(--ifm-menu-color-active) !important; - border-left-width: 0; - } - - a[href].menu__link.menu__link--active:not(.menu__link--sublist) { - background: var(--ifm-code-background); - padding-left: 8px !important; - border-left-width: 4px; - border-left-style: solid; + border-left-width: 0 !important; + background-color: var(--sidebar-active-item-background); + color: var(--home-button-primary); + font-weight: 500; + transition: none; } a[href="#"].menu__link.menu__link--active { @@ -1194,22 +1194,58 @@ div[class^="tableOfContents"] { width: 100%; } +.table-of-contents__left-border { + border-left: 0; +} + .table-of-contents { + padding-top: 0; + li { - margin: 7px var(--ifm-toc-padding-vertical); + margin: 0 var(--ifm-toc-padding-vertical); } ul { - padding-left: 0.35rem; + padding-left: 0; li { - margin: 4px var(--ifm-toc-padding-vertical); + margin: 0 var(--ifm-toc-padding-vertical); + } + } + + /* Label as dot in the right sidebar */ + + .label { + position: absolute; + padding: 0; + width: 6px; + height: 6px; + border-radius: 100%; + left: -2px; + top: 11px; + white-space: nowrap; + overflow: hidden; + color: transparent; + float: initial; + + &.required { + position: absolute; + left: -2px; + top: 11px; + background: #fa5035; + } + + &:nth-child(3) { + display: none; } } .table-of-contents__link { font-size: 12px; display: block; + padding: 2px 12px; + margin-left: -12px; + position: relative; code { background: none; @@ -1218,50 +1254,32 @@ div[class^="tableOfContents"] { } &:hover { - color: var(--ifm-link-color); + color: var(--home-button-primary) !important; code { - color: var(--ifm-link-color); + color: var(--home-button-primary) !important; } } } .table-of-contents__link--active { font-weight: 500; - margin-left: -16px; - padding-left: 12px; - color: var(--ifm-font-color-base); - border-left: 4px solid var(--ifm-link-color); + color: var(--home-button-primary) !important; + border-radius: 8px; code { - color: var(--ifm-font-color-base); font-weight: 700; - white-space: nowrap; - } - - &:hover { - color: var(--ifm-font-color-base); - - code { - color: var(--ifm-font-color-base); - } + color: var(--home-button-primary) !important; } } } -html[data-theme="dark"] { - .table-of-contents { - .table-of-contents__link--active { - color: var(--ifm-link-color); - - &:hover { - color: var(--ifm-link-color); - - code { - color: var(--ifm-link-color); - } - } - } +div[class*="tocCollapsibleContent"] { + ul { + padding: 8px 0; + } + .table-of-contents__link { + margin-left: -4px; } } @@ -1296,7 +1314,7 @@ button[class*="tocCollapsibleButton"] { /* Doc Item footer metadata */ .theme-doc-footer { - margin-top: 40px !important; + margin-top: 32px; margin-bottom: 16px !important; font-size: 15px; color: var(--subtle); @@ -1363,6 +1381,7 @@ button[class*="tocCollapsibleButton"] { .pagination-nav__link { border: 0; transition: background-color 0.15s; + border-radius: var(--ifm-alert-border-radius); } .pagination-nav__link:hover { @@ -1513,13 +1532,13 @@ div[class*="announcementBarContent"] { .content-banner { background: #99d5e7; - padding: 1em 1.2em; + padding: 20px 24px; margin-bottom: 2em; position: relative; overflow: hidden; width: calc(100%); color: var(--dark); - border-radius: var(--ifm-global-radius); + border-radius: var(--ifm-alert-border-radius); } .content-banner p { @@ -1553,26 +1572,27 @@ div[class*="announcementBarContent"] { background: #eeebfe; padding: 24px 48px 24px 24px; margin-bottom: 24px; - border-left: 8px solid #6170af; + border: 1px solid #dad1ff; border-radius: var(--ifm-alert-border-radius); h2, h3 { color: #6170af; margin-top: 0; + line-height: 32px; &:before { content: " "; float: left; - width: 32px; - height: 32px; - border-radius: 4px; + width: 36px; + height: 36px; + border-radius: 8px; background-color: #6170af; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 18.036c.042.507.221 1.016.692 1.699.558.81 1.518 1.254 2.218.54.473-.481 5.582-9.335 8.045-12.69a.737.737 0 011.202 0c2.463 3.355 7.572 12.209 8.045 12.69.7.714 1.66.27 2.218-.54.55-.798.702-1.358.702-1.955 0-.407-7.958-15.086-8.76-16.308C13.593.297 13.357.042 12.053 0h-.994c-1.304.041-1.54.297-2.31 1.472C7.964 2.67.317 16.77 0 17.737v.299z' fill='%23fff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: 20px; - margin-right: 12px; + margin-right: 14px; margin-top: -2px; } } @@ -1587,12 +1607,12 @@ div[class*="announcementBarContent"] { } html[data-theme="dark"] .banner-native-code-required { - background: rgba(123, 132, 172, 0.35); - border-left-color: #5d659a; + background: #6979bf4a; + border-color: #555b82; h2, h3 { - color: var(--ifm-font-color-base); + color: #999ec2; } h2:before, @@ -1745,35 +1765,6 @@ td .label { } } -/* Label as dot in the right sidebar */ - -.table-of-contents .label { - position: absolute; - padding: 0; - width: 6px; - height: 6px; - border-radius: 100%; - margin-left: 4px; - margin-top: 7px; - white-space: nowrap; - overflow: hidden; - color: transparent; - float: initial; - - &.required { - position: initial; - margin-left: 0; - margin-right: 6px; - border-width: 3px; - background: #fa5035; - } - - /* Second dot shift */ - &:nth-child(3) { - margin-left: 13px; - } -} - /* Mark pages as "new" using href attribute: - to show badge in all versions use "PAGEID" @@ -1891,17 +1882,16 @@ html[data-theme="dark"] .component { /* Docs Rating Box */ .docsRating { - display: inline-block; - padding: 16px 30px 16px 40px; - min-height: 66px; + display: inline-flex; + align-items: center; + padding: 12px 30px; margin-top: 42px; - margin-left: -32px; - background-color: rgba(100, 215, 255, 0.3); + background-color: var(--docs-rating-background); text-align: center; - color: #057594; + color: var(--ifm-link-color); line-height: 32px; font-weight: 500; - border-radius: 0 32px 32px 0; + border-radius: 20px; svg { height: 1.5em; @@ -1917,18 +1907,17 @@ html[data-theme="dark"] .component { .i_thumbsup { fill: #56a211; - transform: translateY(0.25em); margin-left: 12px; } .i_thumbsdown { fill: #e9430f; - transform: scale(-1, -1) translateY(-0.25em); + transform: scale(-1, -1); } } html[data-theme="dark"] .docsRating { - color: #cee9f3; + color: #b8e0ef; } @media only screen and (max-width: 996px) { @@ -1988,6 +1977,30 @@ html[data-theme="dark"] .docsRating { color: var(--ifm-font-color-secondary); } + div[class*="tableOfContents"] { + top: calc(var(--ifm-navbar-height)); + } + + .table-of-contents { + margin-top: 28px; + } + + a[class*="sidebarItemLink"] { + border-left: 0 !important; + padding: 4px 12px !important; + border-radius: 8px; + transition: + color 0.15s, + background-color 0.15s; + } + + a[class*="sidebarItemLinkActive"] { + background-color: var(--sidebar-active-item-background); + color: var(--home-button-primary); + font-weight: 500; + transition: none; + } + @layer docusaurus.infima.importantOverrides { .container.margin-vert--lg { margin-top: 0 !important; From 2c72ac4911b38d60466e52d1c992000f082ef06f Mon Sep 17 00:00:00 2001 From: Simek Date: Mon, 15 Sep 2025 22:19:53 +0200 Subject: [PATCH 2/3] styles tweaks and fixes --- website/src/css/customTheme.scss | 41 +++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 2cd2c0547fe..223128ec0c5 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -23,9 +23,13 @@ --docs-rating-background: #64d7ff33; --doc-sidebar-width: 266px !important; - --docsearch-container-background: rgba(32, 35, 42, 0.6); --rn-note-background: rgba(255, 229, 100, 0.25); + --docsearch-container-background: rgba(32, 35, 42, 0.6); + --docsearch-key-shadow: + inset 0 -2px 0 0 var(--ifm-hr-border-color), inset 0 0 1px 1px #fff, + 0 1px 2px 1px rgba(30, 35, 90, 0.3); + --ifm-font-family-base: "Optimistic Display", system-ui, -apple-system, sans-serif; --ifm-font-family-monospace: @@ -132,8 +136,8 @@ html[data-theme="dark"] { --docsearch-footer-background: var(--dark); --docsearch-key-gradient: var(--deepdark); --docsearch-key-shadow: - inset 0 -2px 0 0 var(--light), inset 0 0 1px 1px var(--light), - 0 1px 2px 1px var(--ifm-table-border-color); + inset 0 -2px 0 0 var(--dark), inset 0 0 1px 1px var(--light), + 0 2px 2px 0 rgba(3, 4, 9, 0.3); --docsearch-container-background: rgba(0, 0, 0, 0.6); --logo: #58c4dc; @@ -289,6 +293,19 @@ hr { vertical-align: initial; } + kbd { + border: 0; + top: -1px; + margin: 0 2px; + position: relative; + padding: 0.2rem 0.3rem; + background: none; + box-shadow: var(--docsearch-key-shadow); + display: inline-block; + text-align: center; + min-width: 24px; + } + blockquote { > :last-child { margin-bottom: 0; @@ -511,7 +528,7 @@ html[data-theme="dark"] .hash-link { article .badge { font-weight: 500; border-radius: 16px; - margin-bottom: 4px; + margin-bottom: 6px; } html[data-theme="dark"] article .badge { @@ -527,7 +544,7 @@ html[data-theme="dark"] article .badge { font-size: var(--ifm-blockquote-font-size); margin-bottom: var(--ifm-paragraph-margin-bottom); padding: 28px; - border-radius: 20px; + border-radius: var(--ifm-alert-border-radius); border: 1px solid var(--ifm-alert-background-color-highlight); box-shadow: none; @@ -611,7 +628,7 @@ html[data-theme="dark"] .homepage { font-size: 15px; line-height: var(--ifm-pre-line-height); text-align: center; - border-radius: 20px; + border-radius: var(--ifm-alert-border-radius); a { color: var(--ifm-font-color-base) !important; @@ -845,6 +862,7 @@ a[class*="tagRegular"] { .DocSearch-Button-Key { font-size: 12px; font-weight: 600; + background: none; } .DocSearch-Button-Keys { @@ -1192,6 +1210,7 @@ html[data-theme="dark"] .menu { div[class^="tableOfContents"] { min-width: 100%; width: 100%; + top: calc(var(--ifm-navbar-height) + 34px); } .table-of-contents__left-border { @@ -1222,7 +1241,7 @@ div[class^="tableOfContents"] { height: 6px; border-radius: 100%; left: -2px; - top: 11px; + top: 10px; white-space: nowrap; overflow: hidden; color: transparent; @@ -1231,7 +1250,7 @@ div[class^="tableOfContents"] { &.required { position: absolute; left: -2px; - top: 11px; + top: 10px; background: #fa5035; } @@ -1536,7 +1555,7 @@ div[class*="announcementBarContent"] { margin-bottom: 2em; position: relative; overflow: hidden; - width: calc(100%); + width: 100%; color: var(--dark); border-radius: var(--ifm-alert-border-radius); } @@ -1694,6 +1713,7 @@ td .color-box { color: #fa5035; border-color: #fa5035; border-radius: 32px; + font-weight: 600; } } @@ -1747,7 +1767,6 @@ td .label { &.required { margin-left: 6px; - letter-spacing: 0.02rem; padding: 0 6px; border-width: 1px; margin-right: 0; @@ -1891,7 +1910,7 @@ html[data-theme="dark"] .component { color: var(--ifm-link-color); line-height: 32px; font-weight: 500; - border-radius: 20px; + border-radius: var(--ifm-alert-border-radius); svg { height: 1.5em; From dab7f928a7e171897cf6418acf21df8d35ab3ca3 Mon Sep 17 00:00:00 2001 From: Simek Date: Mon, 15 Sep 2025 23:05:10 +0200 Subject: [PATCH 3/3] increase ToC bottom spacing --- 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 223128ec0c5..f77f86036e9 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -1219,6 +1219,7 @@ div[class^="tableOfContents"] { .table-of-contents { padding-top: 0; + padding-bottom: 20px; li { margin: 0 var(--ifm-toc-padding-vertical);