From f66e2ee0a5da2b80a1f8889d4623a22d41ce0a90 Mon Sep 17 00:00:00 2001 From: nahbee10 Date: Fri, 8 Nov 2024 09:47:42 -0500 Subject: [PATCH] connect side nav to request page --- assets/navigation-bundle.js | 435 +++++++++++++++++------- assets/tailwind-output.css | 471 +++++++++++++++----------- src/modules/navigation/Navigation.tsx | 58 ++-- templates/new_request_page.hbs | 19 +- templates/search_results.hbs | 1 - 5 files changed, 634 insertions(+), 350 deletions(-) diff --git a/assets/navigation-bundle.js b/assets/navigation-bundle.js index 399d780b3..f548d515b 100644 --- a/assets/navigation-bundle.js +++ b/assets/navigation-bundle.js @@ -1,150 +1,337 @@ -import { aa as api, r as reactExports, j as jsxRuntimeExports, ab as Ye, ac as cn, ad as yt, ae as je, a6 as reactDomExports, a7 as ThemeProviders, a8 as createTheme } from 'shared'; -import { T as ThemeIconMap, S as Sun, M as Moon, C as Close, P as PrimaryButton, a as Search, B as ButtonBase, L as LinkBase, b as MiniUnicon, c as Menu } from 'index'; +import { + aa as api, + r as reactExports, + j as jsxRuntimeExports, + ab as Ye, + ac as cn, + ad as yt, + ae as je, + a6 as reactDomExports, + a7 as ThemeProviders, + a8 as createTheme, +} from 'shared'; +import { + T as ThemeIconMap, + S as Sun, + M as Moon, + C as Close, + P as PrimaryButton, + a as Search, + B as ButtonBase, + L as LinkBase, + b as MiniUnicon, + c as Menu, +} from 'index'; class StorageManager { - key; - constructor(key) { - this.key = key; - } - set(value) { - const valueToSet = JSON.stringify(value); - api.set(this.key, valueToSet, { expires: 365, domain: "zendesk.com" }); - } - get() { - const value = api.get(this.key); - if (value) { - return JSON.parse(value); - } - return undefined; - } - remove() { - api.remove(this.key, { domain: "zendesk.com" }); + key; + constructor(key) { + this.key = key; + } + set(value) { + const valueToSet = JSON.stringify(value); + api.set(this.key, valueToSet, { expires: 365, domain: 'zendesk.com' }); + } + get() { + const value = api.get(this.key); + if (value) { + return JSON.parse(value); } + return undefined; + } + remove() { + api.remove(this.key, { domain: 'zendesk.com' }); + } } -const THEME_STORAGE_NAME = "uniswap-ui-theme"; +const THEME_STORAGE_NAME = 'uniswap-ui-theme'; const ThemeManager = new StorageManager(THEME_STORAGE_NAME); const UIContext = reactExports.createContext(undefined); const useUIProvider = () => { - const context = reactExports.useContext(UIContext); - if (context === undefined) { - throw new Error("useUIProvider must be used within a UIProvider"); - } - return context; + const context = reactExports.useContext(UIContext); + if (context === undefined) { + throw new Error('useUIProvider must be used within a UIProvider'); + } + return context; }; const UIProvider = ({ children }) => { - const [theme, setTheme] = reactExports.useState("light"); - reactExports.useEffect(() => { - if (typeof window !== "undefined") { - const currentTheme = ThemeManager.get(); - if (!currentTheme) { - ThemeManager.set("light"); - } - else { - setTheme(currentTheme); - } - } - }, []); - const toggleTheme = () => { - setTheme((prev) => { - const newTheme = prev === "dark" ? "light" : "dark"; - ThemeManager.set(newTheme); - document.documentElement.classList.toggle("dark", newTheme === "dark"); // Toggles the dark class - return newTheme; - }); - }; - return (jsxRuntimeExports.jsx(UIContext.Provider, { value: { - theme, - toggleTheme, - }, children: children })); + const [theme, setTheme] = reactExports.useState('light'); + reactExports.useEffect(() => { + if (typeof window !== 'undefined') { + const currentTheme = ThemeManager.get(); + if (!currentTheme) { + ThemeManager.set('light'); + } else { + setTheme(currentTheme); + } + } + }, []); + const toggleTheme = () => { + setTheme((prev) => { + const newTheme = prev === 'dark' ? 'light' : 'dark'; + ThemeManager.set(newTheme); + document.documentElement.classList.toggle('dark', newTheme === 'dark'); // Toggles the dark class + return newTheme; + }); + }; + return jsxRuntimeExports.jsx(UIContext.Provider, { + value: { + theme, + toggleTheme, + }, + children: children, + }); }; const ThemeSwitch = () => { - const { toggleTheme, theme } = useUIProvider(); - return (jsxRuntimeExports.jsxs(Ye, { checked: theme === "dark", onChange: toggleTheme, className: cn("group relative inline-flex h-8 w-[3.75rem] items-center rounded-full", { - "bg-light-surface-3": theme === "light", - "bg-dark-surface-3": theme === "dark", - }), "aria-label": "Toggle theme", children: [jsxRuntimeExports.jsx("span", { className: "flex h-6 w-6 translate-x-1 items-center justify-center rounded-full bg-white transition group-data-[checked]:translate-x-8", children: jsxRuntimeExports.jsx(ThemeIconMap, { className: "h-4 w-4", icon: theme === "dark" ? "moon" : "sun" }) }), jsxRuntimeExports.jsx(Sun, { className: "absolute left-2 h-4 w-4" }), jsxRuntimeExports.jsx(Moon, { className: "absolute right-2 h-4 w-4" })] })); + const { toggleTheme, theme } = useUIProvider(); + return jsxRuntimeExports.jsxs(Ye, { + checked: theme === 'dark', + onChange: toggleTheme, + className: cn('group relative inline-flex h-8 w-[3.75rem] items-center rounded-full', { + 'bg-light-surface-3': theme === 'light', + 'bg-dark-surface-3': theme === 'dark', + }), + 'aria-label': 'Toggle theme', + children: [ + jsxRuntimeExports.jsx('span', { + className: + 'flex h-6 w-6 translate-x-1 items-center justify-center rounded-full bg-white transition group-data-[checked]:translate-x-8', + children: jsxRuntimeExports.jsx(ThemeIconMap, { + className: 'h-4 w-4', + icon: theme === 'dark' ? 'moon' : 'sun', + }), + }), + jsxRuntimeExports.jsx(Sun, { className: 'absolute left-2 h-4 w-4' }), + jsxRuntimeExports.jsx(Moon, { className: 'absolute right-2 h-4 w-4' }), + ], + }); }; const MobileMenuModal = ({ isOpen, close }) => { - const { theme } = useUIProvider(); - const [modalTransition, setModalTransition] = reactExports.useState(false); - const handleClose = () => { - setModalTransition(false); - setTimeout(close, 100); - }; - reactExports.useEffect(() => { - if (isOpen) { - setTimeout(() => setModalTransition(true), 100); + const { theme } = useUIProvider(); + const [modalTransition, setModalTransition] = reactExports.useState(false); + const handleClose = () => { + setModalTransition(false); + setTimeout(close, 100); + }; + reactExports.useEffect(() => { + if (isOpen) { + setTimeout(() => setModalTransition(true), 100); + } + }, [isOpen]); + return jsxRuntimeExports.jsx(yt, { + open: isOpen, + onClose: handleClose, + className: 'MobileMenuModal relative z-modal md:hidden', + children: jsxRuntimeExports.jsx('div', { + className: cn( + 'fixed bottom-0 left-0 right-0 flex w-screen translate-y-0 items-center transition-all', + { + 'opacity-1 translate-y-0': modalTransition, + 'translate-y-4 opacity-0': !modalTransition, } - }, [isOpen]); - return (jsxRuntimeExports.jsx(yt, { open: isOpen, onClose: handleClose, className: "MobileMenuModal relative z-modal md:hidden", children: jsxRuntimeExports.jsx("div", { className: cn("fixed bottom-0 left-0 right-0 flex w-screen translate-y-0 items-center transition-all", { - "opacity-1 translate-y-0": modalTransition, - "translate-y-4 opacity-0": !modalTransition, - }), children: jsxRuntimeExports.jsxs(je, { className: cn("w-full rounded-t-large border-t px-margin-mobile", { - "border-dark-surface-3 bg-dark-surface-1": theme === "dark", - "border-light-surface-3 bg-light-surface-1": theme === "light", - }), children: [jsxRuntimeExports.jsxs("div", { className: "pt-padding-x-large", children: [jsxRuntimeExports.jsx("button", { onClick: handleClose, className: "group absolute right-0 top-0 px-margin-mobile py-padding-x-large", children: jsxRuntimeExports.jsx(Close, { className: "h-3.5 w-3.5" }) }), jsxRuntimeExports.jsx("nav", {}), jsxRuntimeExports.jsx("div", { className: cn("my-3 border-t", { - "border-dark-surface-3": theme === "dark", - "border-light-surface-3": theme === "light", - }) }), jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsxRuntimeExports.jsx("h3", { className: cn("body-1", { - "text-light-neutral-1": theme === "light", - "text-dark-neutral-1": theme === "dark", - }), children: "Theme" }), jsxRuntimeExports.jsx(ThemeSwitch, {})] })] }), jsxRuntimeExports.jsx("div", { className: "py-padding-large", children: jsxRuntimeExports.jsx(PrimaryButton, { onClick: handleClose, className: "ml-padding-small-dense", label: "Submit Request", href: "/hc/en-us/requests/new", size: "large", theme: theme, color: "accent-2", fullWidth: true }) })] }) }) })); + ), + children: jsxRuntimeExports.jsxs(je, { + className: cn('w-full rounded-t-large border-t px-margin-mobile', { + 'border-dark-surface-3 bg-dark-surface-1': theme === 'dark', + 'border-light-surface-3 bg-light-surface-1': theme === 'light', + }), + children: [ + jsxRuntimeExports.jsxs('div', { + className: 'pt-padding-x-large', + children: [ + jsxRuntimeExports.jsx('button', { + onClick: handleClose, + className: 'group absolute right-0 top-0 px-margin-mobile py-padding-x-large', + children: jsxRuntimeExports.jsx(Close, { className: 'h-3.5 w-3.5' }), + }), + jsxRuntimeExports.jsx('nav', {}), + jsxRuntimeExports.jsx('div', { + className: cn('my-3 border-t', { + 'border-dark-surface-3': theme === 'dark', + 'border-light-surface-3': theme === 'light', + }), + }), + jsxRuntimeExports.jsxs('div', { + className: 'flex flex-row items-center justify-between', + children: [ + jsxRuntimeExports.jsx('h3', { + className: cn('body-1', { + 'text-light-neutral-1': theme === 'light', + 'text-dark-neutral-1': theme === 'dark', + }), + children: 'Theme', + }), + jsxRuntimeExports.jsx(ThemeSwitch, {}), + ], + }), + ], + }), + jsxRuntimeExports.jsx('div', { + className: 'py-padding-large', + children: jsxRuntimeExports.jsx(PrimaryButton, { + onClick: handleClose, + className: 'ml-padding-small-dense', + label: 'Submit Request', + href: '/hc/en-us/requests/new', + size: 'large', + theme: theme, + color: 'accent-2', + fullWidth: true, + }), + }), + ], + }), + }), + }); }; const Navigation = () => { - const [scrollIsOnTop, setScrollIsOnTop] = reactExports.useState(false); - const [menuIsOpen, setMenuIsOpen] = reactExports.useState(false); - const [mobileSearchBarIsOpen, setMobileSearchBarIsOpen] = reactExports.useState(false); - const searchBarRef = reactExports.useRef(null); - reactExports.useEffect(() => { - const handleScroll = () => { - const position = window.scrollY; - if (position === 0) { - setScrollIsOnTop(true); - } - else { - setScrollIsOnTop(false); - } - }; - handleScroll(); - window.addEventListener("scroll", handleScroll, { passive: true }); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, [setScrollIsOnTop]); - reactExports.useEffect(() => { - const timeout = setTimeout(() => { - const searchBarPlaceholder = document.getElementById("search-bar-placeholder-nav-mobile"); - if (searchBarPlaceholder && searchBarRef.current) { - searchBarRef.current.appendChild(searchBarPlaceholder); - searchBarPlaceholder.style.opacity = "1"; - } - }, 100); - return () => clearTimeout(timeout); - }, []); - return (jsxRuntimeExports.jsxs(UIProvider, { children: [jsxRuntimeExports.jsxs("nav", { className: cn("Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1", { - "border-b": !scrollIsOnTop, - }), children: [jsxRuntimeExports.jsxs("div", { className: cn("absolute w-full h-full top-0 left-0 !bg-light-surface-1 dark:!bg-dark-surface-1 px-4 py-[1.15625rem] flex flex-row justify-between items-center", { - "hidden": !mobileSearchBarIsOpen - }), children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center grow", children: [jsxRuntimeExports.jsx(Search, { className: "h-padding-large w-padding-large" }), jsxRuntimeExports.jsx("div", { ref: searchBarRef, className: "grow" })] }), jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { - setMobileSearchBarIsOpen((prev) => !prev); - }, className: "body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0", children: "Cancel" })] }), jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] md:px-[0.9375rem] md:py-3 md:h-[4.5rem]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center", children: jsxRuntimeExports.jsxs(LinkBase, { href: "/", className: "flex flex-row items-center", children: [jsxRuntimeExports.jsx(MiniUnicon, { className: "mb-[0.1875rem] h-8 w-8" }), jsxRuntimeExports.jsx("p", { className: "body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1", children: "Uniswap Support" })] }) }), jsxRuntimeExports.jsxs("div", { className: "md:hidden", children: [jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { - setMobileSearchBarIsOpen((prev) => !prev); - }, className: "mr-3", children: jsxRuntimeExports.jsx(Search, { className: "h-padding-large w-padding-large" }) }), jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { - setMenuIsOpen((prev) => !prev); - }, children: jsxRuntimeExports.jsx(Menu, { className: "h-padding-large w-padding-large" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hidden md:flex", children: [jsxRuntimeExports.jsx(ThemeSwitch, {}), jsxRuntimeExports.jsx(PrimaryButton, { className: "ml-padding-small-dense !my-auto !py-0 !h-8", label: "Submit Request", href: "https://support.uniswap.org/hc/en-us/requests/new", color: "accent-2" })] })] })] }), jsxRuntimeExports.jsx("div", { className: cn("fixed inset-0 z-scrim bg-scrim transition duration-500", { - "pointer-events-none opacity-0": !menuIsOpen, - "opacity-1": menuIsOpen, - }) }), jsxRuntimeExports.jsx(MobileMenuModal, { isOpen: menuIsOpen, close: () => { - setMenuIsOpen(false); - } })] })); + const [scrollIsOnTop, setScrollIsOnTop] = reactExports.useState(false); + const [menuIsOpen, setMenuIsOpen] = reactExports.useState(false); + const [mobileSearchBarIsOpen, setMobileSearchBarIsOpen] = reactExports.useState(false); + const searchBarRef = reactExports.useRef(null); + reactExports.useEffect(() => { + const handleScroll = () => { + const position = window.scrollY; + if (position === 0) { + setScrollIsOnTop(true); + } else { + setScrollIsOnTop(false); + } + }; + handleScroll(); + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [setScrollIsOnTop]); + reactExports.useEffect(() => { + const timeout = setTimeout(() => { + const searchBarPlaceholder = document.getElementById('search-bar-placeholder-nav-mobile'); + if (searchBarPlaceholder && searchBarRef.current) { + searchBarRef.current.appendChild(searchBarPlaceholder); + searchBarPlaceholder.style.opacity = '1'; + } + }, 100); + return () => clearTimeout(timeout); + }, []); + return jsxRuntimeExports.jsxs(UIProvider, { + children: [ + jsxRuntimeExports.jsxs('nav', { + className: cn( + 'Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1', + { + 'border-b': !scrollIsOnTop, + } + ), + children: [ + jsxRuntimeExports.jsxs('div', { + className: cn( + 'absolute w-full h-full top-0 left-0 !bg-light-surface-1 dark:!bg-dark-surface-1 px-4 py-[1.15625rem] flex flex-row justify-between items-center', + { + hidden: !mobileSearchBarIsOpen, + } + ), + children: [ + jsxRuntimeExports.jsxs('div', { + className: 'flex flex-row items-center grow', + children: [ + jsxRuntimeExports.jsx(Search, { className: 'h-padding-large w-padding-large' }), + jsxRuntimeExports.jsx('div', { ref: searchBarRef, className: 'grow' }), + ], + }), + jsxRuntimeExports.jsx(ButtonBase, { + onClick: () => { + setMobileSearchBarIsOpen((prev) => !prev); + }, + className: 'body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0', + children: 'Cancel', + }), + ], + }), + jsxRuntimeExports.jsxs('div', { + className: + 'flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] md:px-[0.9375rem] md:py-3 md:h-[4.5rem]', + children: [ + jsxRuntimeExports.jsx('div', { + className: 'flex flex-row items-center', + children: jsxRuntimeExports.jsxs(LinkBase, { + href: '/hc/en-us', + className: 'flex flex-row items-center', + children: [ + jsxRuntimeExports.jsx(MiniUnicon, { className: 'mb-[0.1875rem] h-8 w-8' }), + jsxRuntimeExports.jsx('p', { + className: + 'body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1', + children: 'Uniswap Support', + }), + ], + }), + }), + jsxRuntimeExports.jsxs('div', { + className: 'md:hidden', + children: [ + jsxRuntimeExports.jsx(ButtonBase, { + onClick: () => { + setMobileSearchBarIsOpen((prev) => !prev); + }, + className: 'mr-3', + children: jsxRuntimeExports.jsx(Search, { + className: 'h-padding-large w-padding-large', + }), + }), + jsxRuntimeExports.jsx(ButtonBase, { + onClick: () => { + setMenuIsOpen((prev) => !prev); + }, + children: jsxRuntimeExports.jsx(Menu, { + className: 'h-padding-large w-padding-large', + }), + }), + ], + }), + jsxRuntimeExports.jsxs('div', { + className: 'hidden md:flex', + children: [ + jsxRuntimeExports.jsx(ThemeSwitch, {}), + jsxRuntimeExports.jsx(PrimaryButton, { + className: 'ml-padding-small-dense !my-auto !py-0 !h-8', + label: 'Submit Request', + href: '/hc/en-us/requests/new', + color: 'accent-2', + }), + ], + }), + ], + }), + ], + }), + jsxRuntimeExports.jsx('div', { + className: cn('fixed inset-0 z-scrim bg-scrim transition duration-500', { + 'pointer-events-none opacity-0': !menuIsOpen, + 'opacity-1': menuIsOpen, + }), + }), + jsxRuntimeExports.jsx(MobileMenuModal, { + isOpen: menuIsOpen, + close: () => { + setMenuIsOpen(false); + }, + }), + ], + }); }; async function renderNavigation(settings, container) { - reactDomExports.render(jsxRuntimeExports.jsx(ThemeProviders, { theme: createTheme(settings), children: jsxRuntimeExports.jsx(Navigation, {}) }), container); + reactDomExports.render( + jsxRuntimeExports.jsx(ThemeProviders, { + theme: createTheme(settings), + children: jsxRuntimeExports.jsx(Navigation, {}), + }), + container + ); } export { renderNavigation }; diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 08bf49cba..37d309cd3 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -1,4 +1,6 @@ -*, ::before, ::after { +*, +::before, +::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -8,19 +10,19 @@ --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -28,28 +30,28 @@ --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { @@ -62,19 +64,19 @@ --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -82,28 +84,28 @@ --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } /* @@ -152,9 +154,10 @@ html, -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; - tab-size: 4; + tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */ font-feature-settings: normal; /* 5 */ @@ -197,7 +200,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr:where([title]) { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -243,7 +246,8 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; /* 1 */ font-feature-settings: normal; /* 2 */ @@ -486,7 +490,8 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-moz-placeholder, textarea::-moz-placeholder { +input::-moz-placeholder, +textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; @@ -506,7 +511,7 @@ Set the default cursor for buttons. */ button, -[role="button"] { +[role='button'] { cursor: pointer; } @@ -550,7 +555,7 @@ video { /* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { +[hidden]:where(:not([hidden='until-found'])) { display: none; } @@ -1105,6 +1110,22 @@ video { max-width: 56.75rem; } +.\!max-w-none { + max-width: none !important; +} + +.max-w-\[1280px\] { + max-width: 1280px; +} + +.max-w-\[80rem\] { + max-width: 80rem; +} + +.max-w-\[65rem\] { + max-width: 65rem; +} + .flex-shrink { flex-shrink: 1; } @@ -1131,32 +1152,42 @@ video { .translate-x-1 { --tw-translate-x: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .translate-y-0 { --tw-translate-y: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .translate-y-4 { --tw-translate-y: 1rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\] { --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .select-all { -webkit-user-select: all; - -moz-user-select: all; - user-select: all; + -moz-user-select: all; + user-select: all; } .resize { @@ -1373,11 +1404,11 @@ video { } .border-\[top\2c left\2c right\2c bottom\] { - border-color: top,left,right,bottom; + border-color: top, left, right, bottom; } .border-dark-surface-3 { - border-color: rgba(255,255,255,0.12); + border-color: rgba(255, 255, 255, 0.12); } .border-light-neutral-2 { @@ -1386,7 +1417,7 @@ video { } .border-light-surface-3 { - border-color: rgba(34,34,34,0.05); + border-color: rgba(34, 34, 34, 0.05); } .border-transparent { @@ -1404,7 +1435,7 @@ video { } .\!bg-light-surface-3 { - background-color: rgba(34,34,34,0.05) !important; + background-color: rgba(34, 34, 34, 0.05) !important; } .bg-dark-accent-1 { @@ -1460,11 +1491,11 @@ video { } .bg-dark-surface-3 { - background-color: rgba(255,255,255,0.12); + background-color: rgba(255, 255, 255, 0.12); } .bg-dark-surface-3-hovered { - background-color: rgba(255,255,255,0.16); + background-color: rgba(255, 255, 255, 0.16); } .bg-light-accent-1 { @@ -1543,11 +1574,11 @@ video { } .bg-light-surface-3 { - background-color: rgba(34,34,34,0.05); + background-color: rgba(34, 34, 34, 0.05); } .bg-scrim { - background-color: rgba(0,0,0,0.60); + background-color: rgba(0, 0, 0, 0.6); } .bg-white { @@ -1556,51 +1587,51 @@ video { } .fill-dark-accent-1 { - fill: #FC74FE; + fill: #fc74fe; } .fill-dark-blue-vibrant { - fill: #0C8911; + fill: #0c8911; } .fill-dark-brown-vibrant { - fill: #85754A; + fill: #85754a; } .fill-dark-green-base { - fill: #0C8911; + fill: #0c8911; } .fill-dark-neutral-1 { - fill: #FFFFFF; + fill: #ffffff; } .fill-dark-neutral-2 { - fill: #9B9B9B; + fill: #9b9b9b; } .fill-dark-orange-vibrant { - fill: #FF4D00; + fill: #ff4d00; } .fill-dark-pink-vibrant { - fill: #FC74FE; + fill: #fc74fe; } .fill-light-accent-1 { - fill: #F50DB4; + fill: #f50db4; } .fill-light-blue-vibrant { - fill: #0047FF; + fill: #0047ff; } .fill-light-brown-vibrant { - fill: #85754A; + fill: #85754a; } .fill-light-green-base { - fill: #0C8911; + fill: #0c8911; } .fill-light-neutral-1 { @@ -1608,15 +1639,15 @@ video { } .fill-light-neutral-2 { - fill: #7D7D7D; + fill: #7d7d7d; } .fill-light-orange-vibrant { - fill: #FF4D00; + fill: #ff4d00; } .fill-light-pink-vibrant { - fill: #F50DB4; + fill: #f50db4; } .\!p-4 { @@ -1848,42 +1879,50 @@ video { .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .slashed-zero { --tw-slashed-zero: slashed-zero; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .lining-nums { --tw-numeric-figure: lining-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .proportional-nums { --tw-numeric-spacing: proportional-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .stacked-fractions { --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .\!text-light-accent-1 { @@ -2018,19 +2057,24 @@ video { .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); } .shadow-dark-medium { - --tw-shadow: 0px 10px 15px -3px rgba(18, 18, 23, 0.54), 0px 4px 6px -2px rgba(18, 18, 23, 0.40); - --tw-shadow-colored: 0px 10px 15px -3px var(--tw-shadow-color), 0px 4px 6px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0px 10px 15px -3px rgba(18, 18, 23, 0.54), 0px 4px 6px -2px rgba(18, 18, 23, 0.4); + --tw-shadow-colored: 0px 10px 15px -3px var(--tw-shadow-color), + 0px 4px 6px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); } .shadow-light-medium { --tw-shadow: 0px 6px 15px -3px rgba(18, 18, 23, 0.18), 0px 2px 6px -2px rgba(18, 18, 23, 0.17); - --tw-shadow-colored: 0px 6px 15px -3px var(--tw-shadow-color), 0px 2px 6px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow-colored: 0px 6px 15px -3px var(--tw-shadow-color), + 0px 2px 6px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); } .outline { @@ -2038,44 +2082,59 @@ video { } .ring { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) + var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur { --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, + opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2285,11 +2344,11 @@ video { margin-bottom: 0.375rem; width: 100%; border-top-width: 1px; - border-color: rgba(34,34,34,0.05); + border-color: rgba(34, 34, 34, 0.05); } .divider:where(.dark, .dark *) { - border-color: rgba(255,255,255,0.12); + border-color: rgba(255, 255, 255, 0.12); } .ArticlePage { @@ -2398,10 +2457,10 @@ video { transition-duration: 150ms !important; } a:hover { - text-decoration-color: #7D7D7D; + text-decoration-color: #7d7d7d; } a:hover:where(.dark, .dark *) { - text-decoration-color: #9B9B9B; + text-decoration-color: #9b9b9b; } a { font: inherit; @@ -2545,9 +2604,12 @@ video { .article-votes, .article-votes-controls { button { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2765,9 +2827,13 @@ video { opacity: 0; } &:before { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2799,9 +2865,13 @@ video { opacity: 0; } &:after { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, + -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2829,9 +2899,12 @@ video { color: rgb(125 125 125 / var(--tw-text-opacity)); } a { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2886,9 +2959,12 @@ video { opacity: 0; } &:before { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2920,9 +2996,12 @@ video { opacity: 0; } &:after { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, + stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2968,12 +3047,12 @@ html:has(.ArticlePage) { .ck.ck-editor__main > .ck-editor__editable, .ck.ck-toolbar { border-width: 0px !important; - background-color: rgba(34,34,34,0.05) !important; + background-color: rgba(34, 34, 34, 0.05) !important; } .ck.ck-editor__main > .ck-editor__editable:where(.dark, .dark *), .ck.ck-toolbar:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12) !important; + background-color: rgba(255, 255, 255, 0.12) !important; } .ck.ck-editor__main > .ck-editor__editable { @@ -3050,7 +3129,7 @@ html:has(.ArticlePage) { .custom-input { border-radius: 0.75rem !important; border-width: 0px !important; - background-color: rgba(34,34,34,0.05) !important; + background-color: rgba(34, 34, 34, 0.05) !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; padding-left: 1rem !important; @@ -3076,7 +3155,7 @@ html:has(.ArticlePage) { } .custom-input:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12) !important; + background-color: rgba(255, 255, 255, 0.12) !important; --tw-text-opacity: 1 !important; color: rgb(155 155 155 / var(--tw-text-opacity)) !important; } @@ -3096,7 +3175,7 @@ html:has(.ArticlePage) { max-height: none !important; border-radius: 0.75rem !important; border-width: 0px !important; - background-color: rgba(34,34,34,0.05) !important; + background-color: rgba(34, 34, 34, 0.05) !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; padding-left: 1rem !important; @@ -3112,7 +3191,7 @@ html:has(.ArticlePage) { } .custom-combobox > div:first-child:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12) !important; + background-color: rgba(255, 255, 255, 0.12) !important; --tw-text-opacity: 1 !important; color: rgb(155 155 155 / var(--tw-text-opacity)) !important; } @@ -3143,7 +3222,7 @@ html:has(.ArticlePage) { border-width: 0px !important; } ul { - background-color: rgba(34,34,34,0.05) !important; + background-color: rgba(34, 34, 34, 0.05) !important; } ul { padding: 0px !important; @@ -3151,7 +3230,8 @@ html:has(.ArticlePage) { ul { --tw-shadow: 0 0 #0000 !important; --tw-shadow-colored: 0 0 #0000 !important; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow) !important; } ul { font-family: var(--font-basel-grotesk) !important; @@ -3162,7 +3242,7 @@ html:has(.ArticlePage) { -moz-osx-font-smoothing: grayscale !important; } ul:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12) !important; + background-color: rgba(255, 255, 255, 0.12) !important; } ul { li { @@ -3183,15 +3263,16 @@ html:has(.ArticlePage) { border-width: 0px !important; } li:hover { - background-color: rgba(34,34,34,0.09) !important; + background-color: rgba(34, 34, 34, 0.09) !important; } li:hover { --tw-shadow: 0 0 #0000 !important; --tw-shadow-colored: 0 0 #0000 !important; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow) !important; } li:where(.dark, .dark *):hover { - background-color: rgba(255,255,255,0.16) !important; + background-color: rgba(255, 255, 255, 0.16) !important; } li { svg { @@ -3402,7 +3483,7 @@ html:has(.ArticlePage) { } .focus-within\:\!border-light-surface-3:focus-within { - border-color: rgba(34,34,34,0.05) !important; + border-color: rgba(34, 34, 34, 0.05) !important; } .focus-within\:\!bg-transparent:focus-within { @@ -3460,11 +3541,11 @@ html:has(.ArticlePage) { } .hover\:bg-light-surface-3:hover { - background-color: rgba(34,34,34,0.05); + background-color: rgba(34, 34, 34, 0.05); } .hover\:bg-light-surface-3-hovered:hover { - background-color: rgba(34,34,34,0.09); + background-color: rgba(34, 34, 34, 0.09); } .hover\:\!text-light-accent-1-hovered:hover { @@ -3497,7 +3578,7 @@ html:has(.ArticlePage) { } .group:hover .group-hover\:fill-light-accent-1 { - fill: #F50DB4; + fill: #f50db4; } .group:hover .group-hover\:fill-light-neutral-1 { @@ -3543,7 +3624,7 @@ html:has(.ArticlePage) { } .data-\[active\]\:bg-light-surface-3[data-active] { - background-color: rgba(34,34,34,0.05); + background-color: rgba(34, 34, 34, 0.05); } .data-\[active\]\:text-light-neutral-1[data-active] { @@ -3553,7 +3634,9 @@ html:has(.ArticlePage) { .group[data-checked] .group-data-\[checked\]\:translate-x-8 { --tw-translate-x: 2rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } @media (min-width: 768px) { @@ -3774,7 +3857,7 @@ html:has(.ArticlePage) { } .dark\:border-dark-surface-3:where(.dark, .dark *) { - border-color: rgba(255,255,255,0.12); + border-color: rgba(255, 255, 255, 0.12); } .dark\:\!bg-dark-accent-2:where(.dark, .dark *) { @@ -3788,7 +3871,7 @@ html:has(.ArticlePage) { } .dark\:\!bg-dark-surface-3:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12) !important; + background-color: rgba(255, 255, 255, 0.12) !important; } .dark\:bg-dark-accent-1:where(.dark, .dark *) { @@ -3806,7 +3889,7 @@ html:has(.ArticlePage) { } .dark\:bg-dark-brown-fade-80:where(.dark, .dark *) { - background-color: rgba(35,30,15,0.80); + background-color: rgba(35, 30, 15, 0.8); } .dark\:bg-dark-green-light:where(.dark, .dark *) { @@ -3814,7 +3897,7 @@ html:has(.ArticlePage) { } .dark\:bg-dark-orange-fade-80:where(.dark, .dark *) { - background-color: rgba(55,27,12,0.80); + background-color: rgba(55, 27, 12, 0.8); } .dark\:bg-dark-orange-light:where(.dark, .dark *) { @@ -3822,7 +3905,7 @@ html:has(.ArticlePage) { } .dark\:bg-dark-pink-fade-80:where(.dark, .dark *) { - background-color: rgba(54,26,55,0.80); + background-color: rgba(54, 26, 55, 0.8); } .dark\:bg-dark-pink-light:where(.dark, .dark *) { @@ -3846,39 +3929,39 @@ html:has(.ArticlePage) { } .dark\:bg-dark-surface-3:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12); + background-color: rgba(255, 255, 255, 0.12); } .dark\:fill-dark-accent-1:where(.dark, .dark *) { - fill: #FC74FE; + fill: #fc74fe; } .dark\:fill-dark-blue-vibrant:where(.dark, .dark *) { - fill: #0C8911; + fill: #0c8911; } .dark\:fill-dark-brown-vibrant:where(.dark, .dark *) { - fill: #85754A; + fill: #85754a; } .dark\:fill-dark-green-base:where(.dark, .dark *) { - fill: #0C8911; + fill: #0c8911; } .dark\:fill-dark-neutral-1:where(.dark, .dark *) { - fill: #FFFFFF; + fill: #ffffff; } .dark\:fill-dark-neutral-2:where(.dark, .dark *) { - fill: #9B9B9B; + fill: #9b9b9b; } .dark\:fill-dark-orange-vibrant:where(.dark, .dark *) { - fill: #FF4D00; + fill: #ff4d00; } .dark\:fill-dark-pink-vibrant:where(.dark, .dark *) { - fill: #FC74FE; + fill: #fc74fe; } .dark\:\!text-dark-accent-1:where(.dark, .dark *) { @@ -3957,7 +4040,7 @@ html:has(.ArticlePage) { } .focus-within\:dark\:\!border-dark-surface-3:where(.dark, .dark *):focus-within { - border-color: rgba(255,255,255,0.12) !important; + border-color: rgba(255, 255, 255, 0.12) !important; } .focus-within\:dark\:\!text-dark-neutral-1:where(.dark, .dark *):focus-within { @@ -3976,11 +4059,11 @@ html:has(.ArticlePage) { } .dark\:hover\:bg-dark-surface-3:hover:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12); + background-color: rgba(255, 255, 255, 0.12); } .dark\:hover\:bg-dark-surface-3-hovered:hover:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.16); + background-color: rgba(255, 255, 255, 0.16); } .hover\:dark\:\!bg-dark-accent-2-hovered:where(.dark, .dark *):hover { @@ -3994,7 +4077,7 @@ html:has(.ArticlePage) { } .hover\:dark\:bg-dark-surface-3-hovered:where(.dark, .dark *):hover { - background-color: rgba(255,255,255,0.16); + background-color: rgba(255, 255, 255, 0.16); } .hover\:dark\:bg-light-accent-2:where(.dark, .dark *):hover { @@ -4033,11 +4116,11 @@ html:has(.ArticlePage) { } .group:hover .group-hover\:dark\:fill-dark-accent-1:where(.dark, .dark *) { - fill: #FC74FE; + fill: #fc74fe; } .group:hover .group-hover\:dark\:fill-dark-neutral-1:where(.dark, .dark *) { - fill: #FFFFFF; + fill: #ffffff; } .group:hover .dark\:group-hover\:text-dark-accent-1:where(.dark, .dark *) { @@ -4076,10 +4159,10 @@ html:has(.ArticlePage) { } .dark\:data-\[active\]\:bg-dark-surface-3[data-active]:where(.dark, .dark *) { - background-color: rgba(255,255,255,0.12); + background-color: rgba(255, 255, 255, 0.12); } .dark\:data-\[active\]\:text-dark-neutral-1[data-active]:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); -} \ No newline at end of file +} diff --git a/src/modules/navigation/Navigation.tsx b/src/modules/navigation/Navigation.tsx index 883665526..d0b5ce4a4 100644 --- a/src/modules/navigation/Navigation.tsx +++ b/src/modules/navigation/Navigation.tsx @@ -1,14 +1,14 @@ -import { FC, useState, useEffect, useRef } from "react"; -import type { Navigation } from "./data-types"; +import { FC, useState, useEffect, useRef } from 'react'; +import type { Navigation } from './data-types'; -import cn from "classnames"; +import cn from 'classnames'; -import { MiniUnicon } from "../../svgs/Logos"; -import { Menu, Search } from "../../svgs/Icons"; -import { PrimaryButton, ButtonBase, LinkBase } from "../../base/Button"; -import ThemeSwitch from "./ThemeSwitch"; -import MobileMenuModal from "./MobileMenuModal"; -import { UIProvider } from "../../context/uiProvider"; +import { MiniUnicon } from '../../svgs/Logos'; +import { Menu, Search } from '../../svgs/Icons'; +import { PrimaryButton, ButtonBase, LinkBase } from '../../base/Button'; +import ThemeSwitch from './ThemeSwitch'; +import MobileMenuModal from './MobileMenuModal'; +import { UIProvider } from '../../context/uiProvider'; const Navigation: FC = () => { const [scrollIsOnTop, setScrollIsOnTop] = useState(false); @@ -26,38 +26,43 @@ const Navigation: FC = () => { } }; handleScroll(); - window.addEventListener("scroll", handleScroll, { passive: true }); + window.addEventListener('scroll', handleScroll, { passive: true }); return () => { - window.removeEventListener("scroll", handleScroll); + window.removeEventListener('scroll', handleScroll); }; }, [setScrollIsOnTop]); useEffect(() => { const timeout = setTimeout(() => { - const searchBarPlaceholder = document.getElementById("search-bar-placeholder-nav-mobile"); + const searchBarPlaceholder = document.getElementById('search-bar-placeholder-nav-mobile'); if (searchBarPlaceholder && searchBarRef.current) { searchBarRef.current.appendChild(searchBarPlaceholder); - searchBarPlaceholder.style.opacity = "1"; + searchBarPlaceholder.style.opacity = '1'; } }, 100); return () => clearTimeout(timeout); - }, []); + }, []); return (
- -
+
+ +
@@ -69,3 +69,16 @@ renderNewRequestForm(settings, props, container); + + \ No newline at end of file diff --git a/templates/search_results.hbs b/templates/search_results.hbs index ab620375b..6ef850357 100644 --- a/templates/search_results.hbs +++ b/templates/search_results.hbs @@ -9,7 +9,6 @@
- {{pagination}}