style: unify resume preview styles with .resume-preview class and import tiptap.scss globally

Author: JOYCEQL

src/app/app/dashboard/resumes/ResumeCardItem.tsx

@@ -99,7 +99,7 @@ export const ResumeCardItem = ({
                     <div className="absolute inset-0 pb-6 flex items-center justify-center pointer-events-none transition-transform duration-300 group-hover:scale-[1.02] overflow-hidden" ref={containerRef}>
                         <div className="w-full h-full relative origin-top bg-white">
                             <div
-                                className="absolute top-0 left-0 bg-white"
+                                className="resume-preview absolute top-0 left-0 bg-white"
                                 style={{
                                     width: "210mm",
                                     height: "297mm",

src/app/app/dashboard/templates/page.tsx

@@ -132,7 +132,7 @@ const TemplateCardItem = ({
           >
             <div className="w-full h-full relative origin-top bg-white">
               <div
-                className="absolute top-0 left-0 bg-white"
+                className="resume-preview absolute top-0 left-0 bg-white"
                 style={{
                   width: "210mm",
                   height: "297mm",
@@ -346,7 +346,7 @@ const TemplatesPage = () => {
                       style={{ width: "420px", height: "594px" }}
                     >
                       <div
-                        className="absolute top-0 left-0 bg-white"
+                        className="resume-preview absolute top-0 left-0 bg-white"
                         style={{
                           width: "210mm",
                           height: "297mm",

src/app/globals.css

@@ -151,7 +151,13 @@
   #resume-preview h3, 
   #resume-preview h4, 
   #resume-preview h5, 
-  #resume-preview h6 {
+  #resume-preview h6,
+  .resume-preview h1,
+  .resume-preview h2,
+  .resume-preview h3,
+  .resume-preview h4,
+  .resume-preview h5,
+  .resume-preview h6 {
     font-family: inherit;
   }
 

src/routes/__root.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tanstack/react-router";
 import appCss from "../app/globals.css?url";
 import appFontCss from "../app/font.css?url";
+import tiptapCss from "../styles/tiptap.scss?url";
 import { NextIntlClientProvider } from "@/i18n/compat/client";
 import { useEffect } from "react";
 import zhMessages from "@/i18n/locales/zh.json";
@@ -33,6 +34,10 @@ export const Route = createRootRoute({
       {
         rel: "stylesheet",
         href: appFontCss
+      },
+      {
+        rel: "stylesheet",
+        href: tiptapCss
       }
     ]
   }),

src/styles/tiptap.scss

@@ -132,78 +132,97 @@
 }
 
 #resume-preview ul,
-#resume-preview ol {
+#resume-preview ol,
+.resume-preview ul,
+.resume-preview ol {
   padding-left: 1.5rem;
   margin: 0.5rem 0;
 }
 
-#resume-preview ul {
+#resume-preview ul,
+.resume-preview ul {
   list-style-type: disc;
   list-style-position: outside;
 }
 
-#resume-preview ul ul {
+#resume-preview ul ul,
+.resume-preview ul ul {
   list-style-type: circle;
 }
 
-#resume-preview ul ul ul {
+#resume-preview ul ul ul,
+.resume-preview ul ul ul {
   list-style-type: square;
 }
 
-#resume-preview ol {
+#resume-preview ol,
+.resume-preview ol {
   list-style: none;
   counter-reset: resume-preview-ol;
   padding-left: 1.5rem;
 }
 
-#resume-preview ol > li {
+#resume-preview ol > li,
+.resume-preview ol > li {
   counter-increment: resume-preview-ol;
   position: relative;
 }
 
-#resume-preview ol > li::before {
+#resume-preview ol > li::before,
+.resume-preview ol > li::before {
   content: counter(resume-preview-ol, decimal) ".";
   position: absolute;
   left: -1.4rem;
   width: 1.1rem;
   text-align: left;
 }
 
-#resume-preview ol ol {
+#resume-preview ol ol,
+.resume-preview ol ol {
   counter-reset: resume-preview-ol;
 }
 
-#resume-preview ol ol > li::before {
+#resume-preview ol ol > li::before,
+.resume-preview ol ol > li::before {
   content: counter(resume-preview-ol, lower-alpha) ".";
 }
 
-#resume-preview ol ol ol > li::before {
+#resume-preview ol ol ol > li::before,
+.resume-preview ol ol ol > li::before {
   content: counter(resume-preview-ol, lower-roman) ".";
 }
 
-#resume-preview ol ol ol ol > li::before {
+#resume-preview ol ol ol ol > li::before,
+.resume-preview ol ol ol ol > li::before {
   content: counter(resume-preview-ol, upper-alpha) ".";
 }
 
-#resume-preview li {
+#resume-preview li,
+.resume-preview li {
   margin: 0.25rem 0;
 }
 
-#resume-preview li > p {
+#resume-preview li > p,
+.resume-preview li > p {
   display: inline;
   margin: 0;
 }
 
 #resume-preview ul ul,
 #resume-preview ul ol,
 #resume-preview ol ul,
-#resume-preview ol ol {
+#resume-preview ol ol,
+.resume-preview ul ul,
+.resume-preview ul ol,
+.resume-preview ol ul,
+.resume-preview ol ol {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
 
 .tiptap a,
-#resume-preview a.rich-text-link {
+#resume-preview a.rich-text-link,
+.resume-preview a.rich-text-link {
   color: #2563eb;
   text-decoration: underline;
   text-decoration-thickness: 1px;
@@ -213,7 +232,8 @@
 }
 
 .tiptap a:hover,
-#resume-preview a.rich-text-link:hover {
+#resume-preview a.rich-text-link:hover,
+.resume-preview a.rich-text-link:hover {
   color: #1d4ed8;
 }