style: update print style

GZTimeWalker · Nov 8, 2022 · d1100c4 · d1100c4
1 parent 6789470
commit d1100c4
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 35 deletions.
diff --git a/GZCTF/ClientApp/src/App.tsx b/GZCTF/ClientApp/src/App.tsx
@@ -34,37 +34,7 @@ export const App: FC = () => {
         theme={{ ...ThemeOverride, colorScheme: colorScheme }}
       >
         <NotificationsProvider zIndex={5000}>
-          <Global
-            styles={(theme) => ({
-              body: {
-                ...theme.fn.fontStyles(),
-                backgroundColor:
-                  theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2],
-                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-                lineHeight: theme.lineHeight,
-                padding: 0,
-                margin: 0,
-              },
-
-              '::-webkit-scrollbar': {
-                height: 6,
-                width: 6,
-              },
-
-              '::-webkit-scrollbar-thumb': {
-                background: 'var(--mantine-color-dark-3)',
-                borderRadius: 3,
-              },
-
-              '::-webkit-scrollbar-track': {
-                backgroundColor: 'transparent',
-              },
-
-              '::-webkit-scrollbar-corner': {
-                backgroundColor: 'transparent',
-              },
-            })}
-          />
+          {StyledGlobal}
           <ModalsProvider labels={{ confirm: '确认', cancel: '取消' }}>
             <SWRConfig
               value={{
@@ -88,3 +58,41 @@ export const App: FC = () => {
     </ColorSchemeProvider>
   )
 }
+
+const StyledGlobal = (
+  <Global
+    styles={(theme) => ({
+      body: {
+        ...theme.fn.fontStyles(),
+        backgroundColor:
+          theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2],
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+        lineHeight: theme.lineHeight,
+        padding: 0,
+        margin: 0,
+
+        '@media print': {
+          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.white,
+        },
+      },
+
+      '::-webkit-scrollbar': {
+        height: 6,
+        width: 6,
+      },
+
+      '::-webkit-scrollbar-thumb': {
+        background: 'var(--mantine-color-dark-3)',
+        borderRadius: 3,
+      },
+
+      '::-webkit-scrollbar-track': {
+        backgroundColor: 'transparent',
+      },
+
+      '::-webkit-scrollbar-corner': {
+        backgroundColor: 'transparent',
+      },
+    })}
+  />
+)
diff --git a/GZCTF/ClientApp/src/pages/About.tsx b/GZCTF/ClientApp/src/pages/About.tsx
@@ -56,7 +56,8 @@ const About: FC = () => {
 
   usePageTitle('关于')
 
-  const valid = timestamp.length === 25 && builtdate.isValid() && sha.length === 40 && tag.length > 0
+  const valid =
+    timestamp.length === 25 && builtdate.isValid() && sha.length === 40 && tag.length > 0
 
   return (
     <WithNavBar>
@@ -121,7 +122,9 @@ const About: FC = () => {
                     color="dimmed"
                     sx={(theme) => ({ fontFamily: theme.fontFamilyMonospace })}
                   >
-                    {valid ? `Built at ${builtdate.format('YYYY-MM-DDTHH:mm:ssZ')}` : 'This release is not officially built'}
+                    {valid
+                      ? `Built at ${builtdate.format('YYYY-MM-DDTHH:mm:ssZ')}`
+                      : 'This release is not officially built'}
                   </Text>
                 </Group>
               </Stack>

diff --git a/GZCTF/ClientApp/src/pages/admin/games/Index.tsx b/GZCTF/ClientApp/src/pages/admin/games/Index.tsx
@@ -131,7 +131,7 @@ const Games: FC = () => {
                             <Avatar src={game.poster} radius={0}>
                               {game.title?.slice(0, 1)}
                             </Avatar>
-                            <Text weight={700} lineClamp={1}>
+                            <Text weight={700} lineClamp={1} style={{ maxWidth: 'calc(10vw)' }}>
                               {game.title}
                             </Text>
                           </Group>

diff --git a/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx b/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx
@@ -46,7 +46,7 @@ const Post: FC = () => {
     right: '2rem',
     bottom: '2rem',
   })
-  
+
   const { role } = useUserRole()
 
   usePageTitle(post?.title ?? 'Post')

diff --git a/GZCTF/ClientApp/src/utils/ThemeOverride.ts b/GZCTF/ClientApp/src/utils/ThemeOverride.ts
@@ -146,6 +146,10 @@ export const useFixedButtonStyles = createStyles((theme, { right, bottom }: Fixe
     boxShadow:
       '0 1px 3px rgb(0 0 0 / 5%), rgb(0 0 0 / 5%) 0px 28px 23px -7px, rgb(0 0 0 / 4%) 0px 12px 12px -7px',
     zIndex: 1000,
+
+    '@media print': {
+      display: 'none',
+    },
   },
 }))