sync: Updates from docusaurus-template

writedocs · Dec 27, 2024 · 8c11a27 · 8c11a27
1 parent a9d52e5
commit 8c11a27
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 44 deletions.
diff --git a/src/components/writedocsComponentsFolder/Cards/cards.css b/src/components/writedocsComponentsFolder/Cards/cards.css
@@ -7,7 +7,7 @@
 .wd_icon_card {
   align-items: flex-start;
   background: var(--card-background-color);
-  border-radius: var(--border-radius-small);
+  border-radius: var(--border-radius-medium);
   border: var(--border-thin) var(--main-border-color) !important;
   display: flex;
   flex-direction: column;

diff --git a/src/css/changelog.css b/src/css/changelog.css
@@ -3,20 +3,23 @@
 }
 
 .container.margin-vert--lg .col.col--3 {
-  max-width: 311px;
+  max-width: 244px;
+  padding: 0;
+  margin-top: 8px;
 }
 
 .container.margin-vert--lg .col.col--7 {
-  padding-left: 0;
+  padding-left: 44px;
+  max-width: 837px !important;
+  --ifm-col-width: calc(8 / 12 * 100%);
 }
 
 [class^="sidebarItem"] {
   margin: 0 !important;
 }
 
-.wd_sidebar_title,
 [class^="sidebarItemTitle"] {
-  text-transform: uppercase;
+  text-transform: capitalize;
   margin: 24px 0 5px !important;
   color: var(--sidebar-title-color);
   font-feature-settings: "clig" off, "liga" off;
@@ -27,29 +30,38 @@
   line-height: 24px;
 }
 
+[class^="yearGroupHeading"] {
+  margin-top: 1rem !important;
+}
+
 [class^="sidebarItemTitle"] {
   margin: 0 0 5px !important;
 }
 
 [class^="sidebarItemLink"] {
   font-size: var(--font-size-medium);
-  padding: 6px 12px;
-  border-radius: 0.25rem;
+  padding: 4px 12px 8px;
+  border-radius: 0 0.25rem 0.25rem 0;
   margin-bottom: 8px !important;
+  border-left: 1px solid transparent;
+  height: 29px;
 }
 
 [class^="sidebarItemLink"]:hover {
   background: var(--sidebar-hover-link-background-color) !important;
+  border-left: 1px solid var(--sidebar-active-link-border-color);
 }
 
 [class^="sidebarItemLinkActive"],
-.sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module {
+.sidebarItemLinkActive_I1ZP {
   background: var(--sidebar-active-link-background-color) !important;
   color: var(--sidebar-title-color) !important;
   font-weight: var(--font-weight-heavy);
+  border-left: 1px solid var(--sidebar-active-link-border-color);
 }
 
 [class^="sidebarItemLinkActive"]:hover,
-.sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module:hover {
+.sidebarItemLinkActive_I1ZP:hover {
   background: var(--sidebar-active-link-background-color) !important;
+  border-left: 1px solid var(--sidebar-active-link-border-color);
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -32,8 +32,8 @@
   --sidebar-margin-top: 34px;
 
   --link-color: var(--primary-color);
-  --transparent-main-color: rgba(0, 41, 245, 0.25);
-  --transparent-second-color: rgba(0, 41, 245, 0.08);
+  --transparent-main-color: rgba(0, 41, 245, 0.15);
+  --transparent-second-color: rgba(0, 41, 245, 0.05);
 
   --screen-width-max: 1400px;
 
@@ -86,9 +86,11 @@
   --table-body-border-color: var(--main-border-color);
 
   /* SIDEBAR */
-  --sidebar-active-link-background-color: var(--transparent-main-color);
+  --sidebar-active-link-background-color: #ebeeff;
+  --sidebar-active-link-border-color: var(--primary-color);
   --sidebar-hover-link-background-color: var(--transparent-second-color);
-  --sidebar-title-color: var(--primary-color);
+  --sidebar-title-color: #000621;
+  --sidebar-active-title-color: var(--primary-color);
   --sidebar-item-color: var(--font-main-color);
 
   /* NAVBAR */
@@ -134,7 +136,8 @@
   --openapi-button-text-color: var(--bg-defined-text-color);
 
   /* FOOTER */
-  --footer-background-color: var(--primary-color);
+  --footer-background-color: var(--transparent-main-color);
+  --footer-text-color: var(--font-main-color);
 
   /* CALLOUTS */
   --black-100: #f6f6f6;

diff --git a/src/css/customDark.css b/src/css/customDark.css
@@ -39,7 +39,9 @@ For readability concerns, you should choose a lighter palette in dark mode.
 
   /* SIDEBAR */
   --sidebar-active-link-background-color: #ffffff1a;
+  --sidebar-active-link-border-color: #fff;
   --sidebar-hover-link-background-color: #ffffff0c;
+  --sidebar-title-color: #fff;
 
   /* TABLE */
   --table-header-background-color: var(--primary-color);

diff --git a/src/css/main.css b/src/css/main.css
@@ -16,15 +16,48 @@ html {
 }
 
 .footer {
-  background-color: var(--footer-background-color);
-  padding: 10px;
+  margin: 10px 50px 0 50px;
+  /* border-top: 1px solid var(--navbar-border-color); */
+  background-color: transparent;
+  color: var(--footer-text-color);
+  padding: 16px;
+}
+
+.footer {
+  background-color: transparent;
+  color: var(--footer-text-color);
+  padding: 16px;
+  position: relative;
+  margin-top: 10px;
+}
+
+.footer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent 5%,
+    var(--navbar-border-color) 15%,
+    var(--navbar-border-color) 85%,
+    transparent 95%
+  );
+  pointer-events: none;
 }
 
 .footer__copyright {
   font-size: var(--font-size-small) !important;
 }
 
-@media (min-width: 1440px) {
+@media (max-width: 1440px) and (min-width: 996px) {
+  .main-wrapper {
+    padding-left: 1.3rem;
+  }
+}
+@media (min-width: 1441px) {
   .main-wrapper {
     align-self: center;
     max-width: var(--screen-width-max);

diff --git a/src/css/navbar.css b/src/css/navbar.css
@@ -1,8 +1,17 @@
+:root {
+  --navbar-border-color: #eff2ff;
+}
+
+[data-theme="dark"] {
+  --navbar-border-color: #2a2c35;
+}
+
 .navbar {
   background: var(--navbar-background-color) !important;
   height: fit-content;
   padding-bottom: 5px;
-  border-bottom: 1px solid var(--ifm-toc-border-color);
+  border-bottom: 1px solid var(--navbar-border-color);
+  box-shadow: none;
 }
 
 .navbar__brand {
@@ -22,11 +31,10 @@
   display: flex;
   align-items: center;
   min-width: 140px;
-  margin-left: 10px;
 }
 
 .navbar.navbar--fixed-top {
-  padding-top: 14px;
+  padding-top: 18px;
   padding-bottom: 0;
 }
 
@@ -40,10 +48,6 @@
   height: fit-content;
 }
 
-.navbar__item {
-  padding: 0;
-}
-
 .dropdown > .navbar__link:after {
   top: 3px;
 }
@@ -70,7 +74,7 @@
   transition: all 0.5s ease;
   border: var(--border-thin) transparent;
   border-radius: var(--border-radius-small);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium-light);
   padding: var(--navbar-link-padding);
 }
 
@@ -143,8 +147,12 @@
   color: var(--navbar-font-color);
 }
 
-.navbar__item {
-  margin: var(--navbar-margin-items);
+.navbar__items {
+  gap: 16px;
+}
+
+.navbar__items .navbar__item:first-of-type {
+  margin-left: 0 !important;
 }
 
 .navbar-sidebar__brand img {

diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -1,11 +1,25 @@
+:root {
+  --toc-border-color: #eff2ff;
+  --sidebar-left-border-color: #eff2ff;
+}
+
+[data-theme="dark"] {
+  --toc-border-color: #2a2c35;
+  --sidebar-left-border-color: #2a2c35;
+}
+
 .theme-doc-sidebar-container {
   margin: 0 !important;
-  margin-top: calc(-1 * 100px) !important;
+  margin-top: -110px !important;
 }
 
 .tableOfContents_node_modules-\@docusaurus-theme-classic-lib-theme-TOC-styles-module,
 .thin-scrollbar.theme-doc-toc-desktop {
-  top: var(--sidebar-size) !important;
+  top: 125px !important;
+}
+
+.theme-doc-sidebar-container [class^="sidebar_"] {
+  padding-top: 90px !important;
 }
 
 [class^="theme-doc-sidebar-container"] {
@@ -17,10 +31,6 @@
   padding-left: 0 !important;
 }
 
-.menu__list {
-  margin-top: 0 !important;
-}
-
 .theme-doc-sidebar-item-link {
   margin: 0 0 4px !important;
 }
@@ -35,19 +45,15 @@
 
 .wd_sidebar_item .wd_sidebar_title > a,
 .wd_sidebar_first_item .wd_sidebar_title > a {
-  padding: 4px 12px 4px 10px !important;
-}
-
-.theme-doc-sidebar-container [class^="sidebar_"] {
-  padding-top: var(--sidebar-padding-top) !important;
+  padding: 4px 12px 4px 0 !important;
 }
 
 .wd_sidebar_title {
   margin: 24px 0 0 !important;
 }
 
 .wd_sidebar_title a {
-  text-transform: uppercase;
+  text-transform: capitalize;
   margin: 24px 0 0 !important;
   color: var(--sidebar-title-color) !important;
   font-feature-settings: "clig" off, "liga" off !important;
@@ -76,7 +82,19 @@
 }
 
 .menu__list-item .menu__list {
-  padding-left: 8px !important;
+  padding-left: 0 !important;
+}
+
+.menu__list {
+  margin-top: 0 !important;
+}
+
+.menu__list .menu__list {
+  border-left: 1px solid var(--sidebar-left-border-color);
+}
+
+.menu__list .menu__list .menu__list {
+  margin-left: 8px;
 }
 
 .menu__link {
@@ -87,6 +105,7 @@
   font-weight: var(--font-weight-light);
   line-height: 20px;
   padding: 5px 12px 4px 10px !important;
+  border-radius: 0 0.25rem 0.25rem 0;
 }
 
 /* SIDEBAR ITEMS HOVERING */
@@ -103,14 +122,28 @@
   background: var(--sidebar-active-link-background-color) !important;
 }
 
+.theme-doc-sidebar-item-link,
+.menu__link--sublist {
+  border-left: 1px solid transparent;
+}
+
+.theme-doc-sidebar-item-link:hover,
+.menu__link--sublist:hover {
+  border-left: 1px solid var(--sidebar-active-link-border-color);
+}
+
 /* ACTIVE LINK */
 .menu__list-item-collapsible.menu__list-item-collapsible--active,
 .menu__link--active {
   background: var(--sidebar-active-link-background-color) !important;
-  color: var(--sidebar-title-color) !important;
+  color: var(--sidebar-active-title-color) !important;
   font-weight: var(--font-weight-heavy);
 }
 
+.theme-doc-sidebar-item-link:has(> .menu__link--active) {
+  border-left: 1px solid var(--sidebar-active-link-border-color);
+}
+
 /* SIDEBAR CARRET */
 .menu__caret:before,
 .menu__link--sublist-caret:after {
@@ -142,3 +175,13 @@
 .breadcrumbs__link:hover {
   color: var(--font-main-color);
 }
+
+@media (min-width: 997px) {
+  .docSidebarContainer_YfHR {
+    border-right: none;
+  }
+}
+
+.table-of-contents__left-border {
+  border-left: 1px solid var(--toc-border-color);
+}
diff --git a/src/theme/Navbar/styles.css b/src/theme/Navbar/styles.css
@@ -4,7 +4,7 @@
 }
 
 .navbar_second_line {
-  margin-top: 5px;
+  margin-top: 15px;
   padding-top: 5px;
 }
 

diff --git a/writedocs/styles/utils/cssVariables.js b/writedocs/styles/utils/cssVariables.js
@@ -11,8 +11,8 @@ function definePrimaryColors(mainColor) {
     '--ifm-color-primary-light': adjustLightness(mainColor, 0.2),
     '--ifm-color-primary-lighter': adjustLightness(mainColor, 0.3),
     '--ifm-color-primary-lightest': adjustLightness(mainColor, 0.4),
-    '--transparent-main-color': addTransparency(mainColor, 0.25),
-    '--transparent-second-color': addTransparency(mainColor, 0.08),
+    '--transparent-main-color': addTransparency(mainColor, 0.15),
+    '--transparent-second-color': addTransparency(mainColor, 0.05),
   }
 }