From 346e94168c2e59380389bc6a397c476c0b992014 Mon Sep 17 00:00:00 2001 From: Jerry_wu <409187100@qq.com> Date: Tue, 8 Oct 2024 16:36:45 +0800 Subject: [PATCH] fix:global css isnt the same in component-test and website --- apps/component-tests/src/global.css | 35 +++++++++++++++++----- apps/component-tests/src/root.tsx | 45 +++++++++++++++++++++++------ 2 files changed, 64 insertions(+), 16 deletions(-) diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css index 62a2111e0..77ef5bc24 100644 --- a/apps/component-tests/src/global.css +++ b/apps/component-tests/src/global.css @@ -1240,11 +1240,19 @@ *::-webkit-scrollbar-thumb { /* Thumb color */ - background-color: var(--qwikui-slate-500); + background-color: hsla(var(--foreground) / 0.25); border-radius: 0.5rem; background-clip: padding-box; - border-left: 0.3rem solid transparent; - border-right: 0.3rem solid transparent; + border-left: 0.15rem solid transparent; + border-right: 0.15rem solid transparent; + } + + .navigation-docs::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.1); + } + + .dark .navigation-docs::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.2); } *::-webkit-scrollbar-corner { @@ -1256,8 +1264,17 @@ border-left: 1px solid var(--qwikui-slate-300); } - .dark *::-webkit-scrollbar-thumb { - background-color: var(--qwikui-slate-500); + .toc-scrollbar::-webkit-scrollbar-track, + .dark .toc-scrollbar::-webkit-scrollbar-track { + border-color: transparent; + } + + .toc-scrollbar::-webkit-scrollbar-thumb { + background-color: transparent; + } + + .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb { + background-color: hsla(var(--foreground) / 0.15); } .dark *::-webkit-scrollbar-track { @@ -1272,7 +1289,7 @@ } .code-example *::-webkit-scrollbar-thumb { - background: var(--qwikui-slate-500); + background-color: var(--qwikui-slate-600); border-radius: 0.5rem; background-clip: padding-box; } @@ -1290,6 +1307,10 @@ .dark .note-link a { border-bottom: 1px solid white !important; } + + .gif-container { + border-radius: var(--border-radius); + } } :root { @@ -1342,7 +1363,7 @@ body { min-height: 100%; } -/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. +/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. It would make more sense to supply the user with the animation declaration in the docs. */ @layer utilities { diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx index 98c96a8f1..ab07231ce 100644 --- a/apps/component-tests/src/root.tsx +++ b/apps/component-tests/src/root.tsx @@ -1,13 +1,25 @@ -import { component$, useStyles$ } from '@builder.io/qwik'; import { - QwikCityProvider, - RouterOutlet, - ServiceWorkerRegister, -} from '@builder.io/qwik-city'; -import { RouterHead } from './components/router-head/router-head'; + component$, useStyles$, + PrefetchGraph, + PrefetchServiceWorker +} from '@builder.io/qwik'; +import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'; +import { RouterHead } from './components/router-head/router-head'; import globalStyles from './global.css?inline'; +import { ThemeProvider } from '@qwik-ui/themes'; + +import '@fontsource-variable/inter'; +import { + ThemeBaseColors, + ThemeBorderRadiuses, + ThemeFonts, + ThemeModes, + ThemePrimaryColors, + ThemeStyles, +} from '@qwik-ui/utils'; + export default component$(() => { /** * The root of a QwikCity site always start with the component, @@ -17,16 +29,31 @@ export default component$(() => { */ useStyles$(globalStyles); + return ( - + - - + + + + + );