diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index 4fee508f4d..4a358c8700 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -173,7 +173,6 @@ nav.menu { white-space: nowrap; } - .main-wrapper { align-items: center; } @@ -282,21 +281,99 @@ main > .container { } } -html[data-theme="white"] { - .menu__list { - .menu__link { - color: var(--casper-color-royal); +html[data-theme="light"] { + --black: var(--white); + --ifm-navbar-link-hover-color: var(--casperBlue); + --casperRed: var(--casperBlue); + --casperWhite: var(--liftedBlack); + --casperYellow: var(--casperBlue); + --halfTitleGray: var(--liftedBlack); + + [class*="navbar"] { + background: var(--liftedBlack-light-theme); + [class*="wrapper"] { + background-color: var(--liftedBlack-light-theme); } + } - .menu__link--active.active { - color: var(--casper-color-black); - background: #ecfdf5; + [class*="container_search"] { + --casperYellow: var(--casperBlue); + > input { + background: var(--white); + color: var(--liftedBlack); + border: 1px solid var(--liftedBlack); + } + [class*="results_container"] { + border: 1px solid rgba(0, 0, 0, 0.25); + color: var(--liftedBlack); + background-color: var(--white); + a, + div { + border: none; + } + } + } + + [class*="navbar_logo_container"], + [class*="social_icons"], + [class*="navbar_list"], + [class*="container_icon"], + [class*="logoCasper"] { + color: var(--liftedBlack); + --casperWhite: var(--liftedBlack); + svg { + fill: var(--liftedBlack); + path { + fill: var(--liftedBlack) !important; + } } + } - .menu__link--sublist { + [class*="navbar_list_container_button"] { + > button { color: var(--casper-color-black); } } + + [class*="switchWrapper"] { + --liftedBlack: var(--white); + --casperWhite: var(--casperWhite-light-theme); + } + + [class*="navbar--fixed-top"], + [class*="ExtendedNavbar"] { + [class*="dropdown_container"] { + background-color: var(--liftedBlack-light-theme); + border: 1px solid rgba(0, 0, 0, 0.25); + } + } + + [class*="container_icon"] { + background-color: transparent; + } + + [class*="sidebar"] { + background-color: var(--liftedBlack-light-theme); + [class*="dropdown_container"] { + border: none !important; + } + } + + [class*="CookieModal"] { + color: black; + } + + [class*="nav_category_title"] { + color: var(--casperWhite-light-theme); + } + + @media (max-width: 996px) { + [class*="ExtendedNavbar"] { + [class*="SearchBox"] { + width: 100%; + } + } + } } html[data-theme="dark"] { diff --git a/src/assets/scss/variables/_custom-properties.scss b/src/assets/scss/variables/_custom-properties.scss index 2e08db923b..b8138ffe98 100644 --- a/src/assets/scss/variables/_custom-properties.scss +++ b/src/assets/scss/variables/_custom-properties.scss @@ -3,6 +3,7 @@ //Primary --casperRed: #ff2d2e; --black: #000000; + --white: #ffffff; --casperWhite: #f4f4f4; --liftedBlack: #141414; //Secondary @@ -21,8 +22,24 @@ //Tiles --casperTilesBrownLight: #96697c; //Social Media Logos - --socialMediaLogos: #c4c4c4 - + --socialMediaLogos: #c4c4c4; + //Nav Items + --halfTitleGray: #aeaeae; // Border radius //--borderRadius: 3px; + + // Gradients + --pink-fade-small: #670e60; + --pinkLight-fade-small: #7b5464; + --pale-fade-small: #5e1585; + --tile-red-fade: #b92121; + --blue-fade: #12197d; + --lime-fade: #77a004; + //light-mode + --light-mode-dark-gray: #646464; + --light-mode-dark-gray-hover: #000000bf; + + --casperWhite-light-theme: #141414; + --liftedBlack-light-theme: #f4f4f4; } + diff --git a/src/icons/index.tsx b/src/icons/index.tsx index aa0bf39297..df68f4cd8d 100644 --- a/src/icons/index.tsx +++ b/src/icons/index.tsx @@ -124,6 +124,30 @@ const icons = { ), + moon: ( + + + + ), + sun: ( + + + + + + + + + + + + ), }; export default icons; diff --git a/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss b/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss index 928aad3de6..481b8b3cf7 100644 --- a/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss +++ b/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss @@ -76,8 +76,12 @@ } a:hover { @include transition(0.3s all); - color: var(--casperRed); + color: var(--casperRed) !important; + } + a:not(:hover) { + transition: none; } + .button_modal_cookie:hover { @include transition(0.3s all); color: var(--casperRed); diff --git a/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss b/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss index b61aa8a990..d0ae2ed2d8 100644 --- a/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss +++ b/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss @@ -36,7 +36,11 @@ a:hover { @include transition(0.3s all); - color: var(--casperRed); + color: var(--casperRed) !important; + } + + a:not(:hover) { + transition: none; } } } diff --git a/src/theme/Modals/CookieModal/CookieModal.module.scss b/src/theme/Modals/CookieModal/CookieModal.module.scss index 803a46533a..1a6e538ee9 100644 --- a/src/theme/Modals/CookieModal/CookieModal.module.scss +++ b/src/theme/Modals/CookieModal/CookieModal.module.scss @@ -31,10 +31,12 @@ @include mixins.custom_scrollbar(var(--black) var(--casperWhite)); h2 { + color: var(--casperWhite); margin-bottom: 12px; } p { + color: var(--casperWhite); font-weight: 300; } a { diff --git a/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss b/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss index 47ea995f51..5a70a146cf 100644 --- a/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss +++ b/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss @@ -26,24 +26,15 @@ color: var(--casperWhite); margin: 0; align-items: unset; + padding: 0 30px; .navbar { display: flex; flex-direction: row; justify-content: space-between; - gap: 4%; + gap: 3%; align-items: center; - .navBarSectionBeginning, - .navBarSectionEnd { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 4%; - width: 45%; - } - .navbar_logo_container { width: 163px; min-width: 83px; @@ -56,16 +47,25 @@ display: flex; justify-content: center; align-items: center; + cursor: pointer; + &_cancel, &_menu { position: absolute; transform: scale(all); - @include transition(0.3s ease-in); + @include transition(transform 0.3s ease-in); > svg { path { fill: var(--casperWhite); } } + &:hover { + > svg { + path { + fill: var(--casperRed); + } + } + } } &_cancel_none, &_menu_none { diff --git a/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss b/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss index 4988b940f2..3a48efb347 100644 --- a/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss +++ b/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss @@ -60,11 +60,11 @@ .navbar_list_item { @include transition(0.3s all); color: var(--casperRed); - } - svg { - path { - @include transition(0.3s all); - fill: var(--casperRed); + > svg { + path { + @include transition(0.3s all); + fill: var(--casperRed) !important; + } } } } @@ -88,7 +88,6 @@ .navbar_list_item { width: 100%; justify-content: space-between; - background-color: var(--liftedBlack); z-index: 5; } } diff --git a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss index b4d13e1883..958cdbfe3d 100644 --- a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss +++ b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss @@ -6,7 +6,7 @@ gap: 15px; padding-bottom: 20px; > span { - color: #aeaeae; + color: var(--halfTitleGray); } .linkList { diff --git a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss index d9fa0d5021..ce81db885c 100644 --- a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss +++ b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss @@ -7,7 +7,7 @@ width: fit-content; overflow: hidden; - .dropdown { + .dropdown_container{ /* In order to comply with the proposed design (0.25px border) and given the impossibility of using units smaller than 1px, we came to the following workaround that does the job using alpha color in the border. */ @@ -28,7 +28,7 @@ margin-left: 15px; z-index: 0; - .dropdown { + .dropdown_container { flex-direction: column; border: none; background-color: var(--liftedBlack); diff --git a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx index e154fdd2bb..9162c525b9 100644 --- a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx +++ b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx @@ -11,7 +11,7 @@ interface INavBarDropdownProps { export default function NavBarDropdown({ content, locale, closeNavBarHandler }: INavBarDropdownProps) { return (
e.stopPropagation()}> -
+
{content.columns && content.columns.map((column, i) => { return ; diff --git a/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx b/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx index 4dd66eb080..b2e3c4479a 100644 --- a/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx +++ b/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx @@ -70,7 +70,7 @@ export default function SearchBox({ placeholder, locale, siteUrl }: any) { setShowResults(false); } return ( -
setHasFocus(true)}> +
setHasFocus(true)}>
+
); diff --git a/src/theme/Navbar/ExtendedNavbar/index.tsx b/src/theme/Navbar/ExtendedNavbar/index.tsx index 74e33d608f..4783644ecd 100644 --- a/src/theme/Navbar/ExtendedNavbar/index.tsx +++ b/src/theme/Navbar/ExtendedNavbar/index.tsx @@ -19,6 +19,7 @@ import Nav from "./Nav"; import Sidebar from "./SideBar"; import useWindow from "../../../hooks/useWindow"; import styles from "./ExtendedNavbar.module.scss"; +import ThemeSwitch from "../ThemeSwitch"; export default function ExtendedNavbar() { const [dropdownOpen, setDropdownOpen] = useState(false); @@ -128,40 +129,37 @@ export default function ExtendedNavbar() {
-
- {navData?.logo && ( -
- closeNavBarHandler()}> -
- -
- )} - {navData && navData.navItems && ( -
-
- {navData && navData.searchPlaceholder && ( - - )} - {data && data.socialMedia && } -
+ {navData?.logo && ( +
+ closeNavBarHandler()}> +
+ +
+ )} + {navData && navData.navItems && ( +
{navData && navData.logo && ( diff --git a/src/theme/Navbar/ThemeSwitch/ThemeSwitch.module.scss b/src/theme/Navbar/ThemeSwitch/ThemeSwitch.module.scss new file mode 100644 index 0000000000..4d60e56544 --- /dev/null +++ b/src/theme/Navbar/ThemeSwitch/ThemeSwitch.module.scss @@ -0,0 +1,58 @@ +@import "../../../assets/scss/variable.scss"; + +.switchWrapper { + display: flex; + align-items: center; + label { + margin-bottom: 0; + background-color: var(--liftedBlack); + width: 72px; + height: 30px; + border-radius: 40px; + border: 1px solid var(--casperWhite); + position: relative; + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + svg { + pointer-events: none; + margin-right: 5px; + width: 20px; + height: 20px; + fill: var(--casperWhite); + path { + fill: var(--casperWhite); + } + } + &::after { + position: absolute; + content: ""; + top: 0; + bottom: 0; + margin: auto 5px; + left: 0; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: var(--casperWhite); + transition: transform 0.5s ease-in-out; + } + + &.light { + justify-content: flex-start; + &::after { + transform: translateX(210%); + } + svg { + margin-left: 5px; + } + } + &:hover { + --casperWhite: var(--casperRed); + } + } + input { + display: none; + } +} diff --git a/src/theme/Navbar/ThemeSwitch/index.tsx b/src/theme/Navbar/ThemeSwitch/index.tsx new file mode 100644 index 0000000000..b1ce61e57f --- /dev/null +++ b/src/theme/Navbar/ThemeSwitch/index.tsx @@ -0,0 +1,34 @@ +import React, { useEffect, useState } from "react"; +import icons from "../../../icons"; +import styles from "./ThemeSwitch.module.scss"; +import { useColorMode, useThemeConfig } from "@docusaurus/theme-common"; +function ThemeSwitch() { + const disabled = useThemeConfig().colorMode.disableSwitch; + const { colorMode, setColorMode } = useColorMode(); + const [isLightTheme, setIsLightTheme] = useState(undefined); + if (disabled) { + return null; + } + function handleThemeChange() { + setColorMode(colorMode === "light" ? "dark" : "light"); + } + + useEffect(() => { + setIsLightTheme(colorMode === "light"); + }, [colorMode]); + + return ( +
+ {isLightTheme !== undefined ? ( + <> + + + + ) : null} +
+ ); +} + +export default ThemeSwitch; diff --git a/src/theme/SocialMedia/SocialMedia.module.scss b/src/theme/SocialMedia/SocialMedia.module.scss index 2308512697..00a233a87a 100644 --- a/src/theme/SocialMedia/SocialMedia.module.scss +++ b/src/theme/SocialMedia/SocialMedia.module.scss @@ -26,10 +26,18 @@ fill: var(--primaryBtn-hover); } } + + &:not(:hover) { + svg { + path { + transition: none; + } + } + } &:hover { svg { path { - fill: var(--casperRed); + fill: var(--casperRed) !important; } } } @@ -38,15 +46,9 @@ } } -@media (max-width: 640px) { - .social_icons { - margin-bottom: 20px; - } -} @media (max-width: 400px) { .social_icons { min-width: 50%; - margin-bottom: 50px; .social_icons_container { justify-content: flex-start;