@tnotesjs/core 0.1.20 → 0.1.22

package/dist/{chunk-4MO7F7Q4.js → chunk-BSTQOJVE.js}

@@ -1,7 +1,7 @@
 import {
   ConfigManager,
   getConfigManager
-} from "./chunk-SQVHJR2Z.js";
+} from "./chunk-O4DCXHOV.js";
 
 // utils/errorHandler.ts
 var TNotesError = class _TNotesError extends Error {

package/dist/{chunk-SQVHJR2Z.js → chunk-O4DCXHOV.js}

@@ -57,21 +57,18 @@ function getDefaultConfig(repoName) {
     // 社交链接
     socialLinks: [
       {
-        ariaLabel: "Tdahuyou \u8BED\u96C0\u4E3B\u9875\u94FE\u63A5",
         link: "https://www.yuque.com/tdahuyou",
         icon: {
           svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.28 2.955c2.97.203 3.756 2.342 3.84 2.597l1.297.096c.13 0 .169.18.054.236c-1.323.716-1.727 2.17-1.49 3.118c.09.358.254.69.412 1.02c.307.642.651 1.418.707 2.981c.117 3.24-2.51 6.175-5.789 6.593c1.17-1.187 1.815-2.444 2.12-3.375c.606-1.846.508-3.316.055-4.44a4.46 4.46 0 0 0-1.782-2.141c-1.683-1.02-3.22-1.09-4.444-.762c.465-.594.876-1.201 1.2-1.864c.584-1.65-.102-2.848-.704-3.519c-.192-.246-.061-.655.305-.655c1.41 0 2.813.02 4.22.115M3.32 19.107c1.924-2.202 4.712-5.394 7.162-8.15c.559-.63 2.769-2.338 5.748-.533c.878.532 2.43 2.165 1.332 5.51c-.803 2.446-4.408 7.796-15.76 5.844c-.227-.039-.511-.354-.218-.687z"/></svg>'
         }
       },
       {
-        ariaLabel: "Tdahuyou B \u7AD9\u4E3B\u9875\u94FE\u63A5",
         link: "https://space.bilibili.com/407241004",
         icon: {
           svg: '<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><g fill="currentColor"><path d="M310.134 596.45c-7.999-4.463-16.498-8.43-24.997-11.9a274 274 0 0 0-26.996-7.438c-2.5-.992-2.5.991-2.5 1.487c0 7.934.5 18.843 1.5 27.768c1 7.438 2 15.372 4 22.81c0 .496 0 .991.5 1.487c.999.992 1.999 1.488 2.999.496c7.999-4.463 15.998-8.43 22.997-13.388c7.499-5.454 15.498-11.9 21.997-18.347c1.5-1.487 0-2.479.5-2.975m323.96-11.9a274 274 0 0 0-26.997-7.438c-2.5-.992-2.5.991-2.5 1.487c0 7.934.5 18.843 1.5 27.768c1 7.438 2 15.372 4 22.81c0 .496 0 .991.5 1.487c1 .992 2 1.488 3 .496c7.999-4.463 15.998-8.43 22.997-13.388c7.499-5.454 15.498-11.9 21.997-18.347c2-1.487.5-2.479.5-2.975c-7.5-4.463-16.498-8.43-24.997-11.9"/><path d="M741.496 112H283c-94.501 0-171 76.5-171 171.5v458c.5 94 77 170.5 170.999 170.5h457.997c94.5 0 171.002-76.5 171.002-170.5v-458c.497-95-76.002-171.5-170.502-171.5m95 343.5h15.5v48h-15.5zm-95.5-1.5l2 43l-13.5 1.5l-5-44.5zm-23.5 0l4 45.5l-14.5 1.5l-6.5-47.5h17zm-230.498 1.5h15v48h-15zm-96-1.5l2 43l-13.5 1.5l-5-44.5zm-23.5 0l4 45.5l-14.5 2l-6-47.5zm-3.5 149C343.498 668.5 216 662.5 204.5 660.5C195.5 499 181.5 464 170 385l54.5-22.5c1 71.5 9 185 9 185s108.5-15.5 132 47c.5 3 0 6-1.5 8.5m20.5 35.5l-23.5-124h35.5l13 123zm44.5-8l-27-235l33.5-1.5l21 236H429zm34-175h17.5v48H467zm41 190h-26.5l-9.5-126h36zm209.998-43C693.496 668 565.997 662 554.497 660c-9-161-23-196-34.5-275l54.5-22.5c1 71.5 9 185 9 185s108.5-15.5 132 46.5c.5 3 0 6-1.5 8.5m19.5 36l-23-124h35.5l13 123zm45.5-8l-27.5-235l33.5-1.5l21 236h-27zm33.5-175h17.5v48h-13zm41 190h-26.5l-9.5-126h36z"/></g></svg>'
         }
       },
       {
-        ariaLabel: `${name} github \u4ED3\u5E93\u94FE\u63A5`,
         link: `https://github.com/tnotesjs/${name}`,
         icon: "github"
       }

package/dist/cli/index.js

@@ -22,10 +22,10 @@ import {
   parseArgs,
   parseReadmeCompletedNotes,
   runCommand
-} from "../chunk-4MO7F7Q4.js";
+} from "../chunk-BSTQOJVE.js";
 import {
   ConfigManager
-} from "../chunk-SQVHJR2Z.js";
+} from "../chunk-O4DCXHOV.js";
 
 // commands/update/UpdateCommand.ts
 import { existsSync, readFileSync, writeFileSync } from "fs";

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   ConfigManager,
   getConfigManager
-} from "./chunk-SQVHJR2Z.js";
+} from "./chunk-O4DCXHOV.js";
 export {
   ConfigManager,
   getConfigManager

package/dist/vitepress/config/index.js

@@ -7,8 +7,8 @@ import {
   UpdateNoteConfigCommand,
   generateAnchor,
   logger
-} from "../../chunk-4MO7F7Q4.js";
-import "../../chunk-SQVHJR2Z.js";
+} from "../../chunk-BSTQOJVE.js";
+import "../../chunk-O4DCXHOV.js";
 
 // vitepress/config/index.ts
 import fs2 from "fs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",
@@ -62,14 +62,13 @@
     "@eslint/js": "^9.39.4",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.6.2",
-    "@typescript-eslint/parser": "^8.59.0",
     "eslint": "^9.39.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-vue": "^10.9.0",
-    "globals": "^17.5.0",
+    "globals": "^17.6.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.59.0",
+    "typescript-eslint": "^8.59.1",
     "vue-eslint-parser": "^10.4.0",
     "vue-tsc": "^3.2.7"
   },

package/types/config.ts

@@ -33,7 +33,6 @@ export interface IconConfig {
  * 社交链接类型
  */
 export interface SocialLink {
-  ariaLabel?: string
   icon: string | IconConfig
   link: string
 }

package/vitepress/components/CodeBlockFullscreen/CodeBlockFullscreen.vue

@@ -17,7 +17,7 @@
             <div class="code-fullscreen-actions">
               <!-- 旋转按钮（仅移动端） -->
               <button
-                class="action-btn rotate-btn mobile-only"
+                class="action-btn mobile-only"
                 @click="toggleOrientation"
                 :title="isLandscape ? '切换为竖屏' : '切换为横屏'"
               >
@@ -25,7 +25,7 @@
               </button>
               <!-- 复制按钮 -->
               <button
-                class="action-btn copy-btn"
+                class="action-btn"
                 @click="copyCode"
                 :title="copied ? '已复制' : '复制代码'"
               >

package/vitepress/components/CodeBlockFullscreen/index.ts

@@ -7,7 +7,7 @@ type CopyState = 'idle' | 'copied' | 'failed'
 
 const CODE_BLOCK_SELECTOR = 'div[class*="language-"]'
 const CODE_ACTIONS_CLASS = 'tn-code-actions'
-const COPY_RESET_DELAY = 2000
+const COPY_RESET_DELAY = 1000
 
 export function useCodeBlockFullscreen() {
   let fullscreenApp: any = null
@@ -28,7 +28,6 @@ export function useCodeBlockFullscreen() {
 
       const actions = document.createElement('div')
       actions.className = CODE_ACTIONS_CLASS
-      actions.setAttribute('aria-label', '代码块操作')
 
       const fullscreenButton = createActionButton({
         className: 'tn-code-action-fullscreen',
@@ -65,7 +64,6 @@ export function useCodeBlockFullscreen() {
     button.className = `tn-code-action ${options.className}`
     button.type = 'button'
     button.title = options.title
-    button.setAttribute('aria-label', options.title)
     button.innerHTML = `<img src="${options.icon}" alt="${options.alt}" />`
 
     return button
@@ -98,7 +96,6 @@ export function useCodeBlockFullscreen() {
       button.parentElement.dataset.copyState = state
     }
     button.title = getCopyTitle(state)
-    button.setAttribute('aria-label', getCopyTitle(state))
 
     const icon = button.querySelector('img')
     if (icon) {
@@ -112,7 +109,6 @@ export function useCodeBlockFullscreen() {
         button.parentElement.dataset.copyState = 'idle'
       }
       button.title = getCopyTitle('idle')
-      button.setAttribute('aria-label', getCopyTitle('idle'))
       icon?.setAttribute('src', icon__clipboard)
       icon?.setAttribute('alt', '复制')
       copyResetTimers.delete(button)

package/vitepress/components/CodeBlockFullscreen/styles.css

@@ -76,8 +76,8 @@ div[class*='language-']:hover .tn-code-actions,
 
 .tn-code-action-copy::after {
   position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
+  top: 50%;
+  right: calc(100% + 6px);
   padding: 4px 7px;
   color: var(--vp-c-text-1);
   background: var(--vp-c-bg-elv);
@@ -89,7 +89,7 @@ div[class*='language-']:hover .tn-code-actions,
   line-height: 18px;
   opacity: 0;
   pointer-events: none;
-  transform: translateY(-2px);
+  transform: translateY(-50%) translateX(2px);
   transition:
     opacity 0.16s ease,
     transform 0.16s ease;
@@ -99,7 +99,7 @@ div[class*='language-']:hover .tn-code-actions,
 .tn-code-action-copy[data-copy-state='copied']::after,
 .tn-code-action-copy[data-copy-state='failed']::after {
   opacity: 1;
-  transform: translateY(0);
+  transform: translateY(-50%) translateX(0);
 }
 
 /* .dark .tn-code-action-copy img {

package/vitepress/components/Discussions/Discussions.vue

@@ -193,15 +193,15 @@ watch(isDark, (newVal) => {
 </script>
 
 <template>
-  <h2 :class="$style.h2">
+  <h2 class="h2">
     <Tooltip text="在 GitHub 上发表评论（支持上传图片）">
       <a
         :href="githubDiscussionsUrl"
         target="_blank"
         rel="noopener noreferrer"
-        :class="$style.discussionsLink"
+        class="discussionsLink"
       >
-        <img :src="icon__github" alt="" :class="$style.githubIcon" />
+        <img :src="icon__github" alt="" class="githubIcon" />
         Discussions
       </a>
     </Tooltip>
@@ -209,4 +209,37 @@ watch(isDark, (newVal) => {
   <div id="giscus-comments"></div>
 </template>
 
-<style module src="./Discussions.module.scss"></style>
+<style scoped lang="scss">
+/* #region:same as vitepress theme */
+.h2 {
+  margin: 48px 0 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+/* #endregion:same as vitepress theme */
+
+.discussionsLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  color: var(--vp-c-brand-1);
+  text-decoration: none;
+  opacity: 0.9;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+.githubIcon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+</style>

package/vitepress/components/EnWordList/EnWordList.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { marked } from 'marked'
-import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
 
 import {
   EN_WORDS_REPO_BASE_URL,
@@ -448,17 +448,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :class="$style.enWordList">
+  <div class="enWordList">
     <ol>
       <li
         v-for="(word, index) in sortedWords"
         :key="word"
         :class="{
-          [$style.pronounced]:
-            isPronouncingAll && currentPronounceAllIndex === index + 1,
+          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1,
         }"
       >
-        <span :class="$style.index">{{ index + 1 }}.</span>
+        <span class="index">{{ index + 1 }}.</span>
         <input
           type="checkbox"
           :id="word"
@@ -471,8 +470,8 @@ onUnmounted(() => {
               word.toLowerCase().replaceAll(/\s/g, '_')
             )}.md`"
             :class="{
-              [$style.lineThrough]: checkedStates[word],
-              [$style.textRed]: failedWords[word],
+              lineThrough: checkedStates[word],
+              textRed: failedWords[word],
             }"
             @mouseenter="(e) => isAutoShowCard && showWordCard(e, word)"
             @mouseleave="handleMouseLeave"
@@ -486,18 +485,18 @@ onUnmounted(() => {
     </ol>
 
     <div
-      :class="$style.wordCard"
+      class="wordCard"
       :style="{ left: cardX + 'px', top: cardY + 'px' }"
       v-if="showCard"
     >
-      <div :class="$style.wordCardContent" v-html="cardContent"></div>
+      <div class="wordCardContent" v-html="cardContent"></div>
     </div>
 
     <!-- pinned cards -->
     <div
       v-for="card in pinnedCards"
       :key="card.id"
-      :class="$style.wordCard"
+      class="wordCard"
       :style="{
         left: card.x + 'px',
         top: card.y + 'px',
@@ -508,14 +507,14 @@ onUnmounted(() => {
       @mousedown="(e) => startDrag(card, e)"
       @click="bringToFront(card)"
     >
-      <div :class="$style.wordCardContentWrapper">
-        <div :class="$style.wordCardContent" v-html="card.content"></div>
+      <div class="wordCardContentWrapper">
+        <div class="wordCardContent" v-html="card.content"></div>
       </div>
-      <button :class="$style.closeBtn" @click.stop="removeCard(card.id)">
+      <button class="closeBtn" @click.stop="removeCard(card.id)">
         ✖
       </button>
       <div
-        :class="$style.resizeHandle"
+        class="resizeHandle"
         @mousedown.stop="startResize(card, $event)"
       ></div>
     </div>
@@ -541,4 +540,125 @@ onUnmounted(() => {
   />
 </template>
 
-<style module src="./EnWordList.module.scss"></style>
+<style scoped lang="scss">
+/* EnWordList 组件样式 */
+
+.enWordList {
+  // Checkbox 样式
+  input[type='checkbox'] {
+    margin: 8px;
+    transform: scale(1.3);
+    cursor: pointer;
+  }
+
+  // 链接样式
+  a {
+    text-decoration: none;
+    color: #4fc3f7;
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+
+    &.lineThrough {
+      color: #999;
+      text-decoration: line-through;
+    }
+
+    &.textRed {
+      color: #f40 !important;
+    }
+  }
+
+  // 单词列表样式
+  ol {
+    list-style-type: decimal;
+    padding-left: 20px;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      transition: all 0.3s ease;
+
+      &.pronounced {
+        background-color: rgba(255, 255, 0, 0.1);
+      }
+    }
+  }
+
+  // 序号样式
+  .index {
+    margin-right: 10px;
+    color: #aaa;
+  }
+}
+
+// 单词卡片样式（🌑 暗色悬浮卡片）
+.wordCard {
+  position: fixed;
+  z-index: 9999;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  padding: 12px 16px;
+  max-width: 600px;
+  min-width: 200px;
+  min-height: 100px;
+  font-size: 14px;
+  line-height: 1.4;
+  border-radius: 8px;
+  color: #eee;
+  pointer-events: auto;
+  font-family: sans-serif;
+  cursor: move;
+
+  // 关闭按钮
+  .closeBtn {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: #ccc;
+
+    &:hover {
+      color: white;
+    }
+  }
+}
+
+// 卡片内容包裹器
+.wordCardContentWrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+// 卡片内容样式
+.wordCardContent {
+  :deep(ul) {
+    margin: 0.5rem 0;
+    padding-left: 1rem;
+  }
+}
+
+// 调整大小手柄
+.resizeHandle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  background-color: #666;
+  cursor: nwse-resize;
+  z-index: 2;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: #aaa;
+  }
+}
+</style>

package/vitepress/components/EnWordList/RightClickMenu.vue

@@ -1,33 +1,33 @@
 <template>
   <div
     v-if="show"
-    :class="$style.rightClickMenu"
+    class="rightClickMenu"
     :style="{ left: x + 'px', top: y + 'px' }"
   >
-    <div :class="$style.menuItem" @click="handlePin">📌 Pin</div>
-    <div :class="$style.menuItem" @click="(e) => handlePronounce(e, 'en-GB')">
+    <div class="menuItem" @click="handlePin">📌 Pin</div>
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">
       📢 Pronounce（英）
     </div>
-    <div :class="$style.menuItem" @click="(e) => handlePronounce(e, 'en-US')">
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">
       📢 Pronounce（美）
     </div>
     <div
-      :class="$style.menuItem"
+      class="menuItem"
       @click="(e) => handlePronounceAll(e, 'en-GB')"
     >
       📢 Pronounce All（英）
     </div>
     <div
-      :class="$style.menuItem"
+      class="menuItem"
       @click="(e) => handlePronounceAll(e, 'en-US')"
     >
       📢 Pronounce All（美）
     </div>
-    <div :class="$style.menuItem" @click="handleAutoShowCard">
+    <div class="menuItem" @click="handleAutoShowCard">
       🔍 Auto Show Card（{{ isAutoShowCard ? '关' : '开' }}）
     </div>
-    <div :class="$style.menuItem" @click="handleCheckAll">✅ Check All</div>
-    <div :class="$style.menuItem" @click="handleReset">❌ Reset</div>
+    <div class="menuItem" @click="handleCheckAll">✅ Check All</div>
+    <div class="menuItem" @click="handleReset">❌ Reset</div>
   </div>
 </template>
 
@@ -63,4 +63,27 @@ const handleReset = () => {
 }
 </script>
 
-<style module src="./RightClickMenu.module.scss"></style>
+<style scoped lang="scss">
+// RightClickMenu 组件样式
+
+.rightClickMenu {
+  position: fixed;
+  z-index: 99999;
+  background: #2c2c2c;
+  border: 1px solid #444;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  font-size: 13px;
+  color: #eee;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menuItem {
+  padding: 8px 16px;
+
+  &:hover {
+    background-color: #444;
+  }
+}
+</style>

package/vitepress/components/Footprints/Footprints.vue

@@ -331,23 +331,24 @@ const formattedTime = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.textContainer">
+  <div class="textContainer">
     <div
-      :class="[$style.textContent, { [$style.collapsed]: isCollapsed }]"
+      class="textContent"
+      :class="{ collapsed: isCollapsed }"
       ref="textContainer"
     >
       <slot name="text-area"></slot>
     </div>
     <button
       v-if="isExpandable"
-      :class="$style.toggleButton"
+      class="toggleButton"
       @click="toggleCollapse"
     >
       {{ isCollapsed ? '全文' : '收起' }}
     </button>
   </div>
 
-  <div :class="$style.imageContainer" ref="imageContainer">
+  <div class="imageContainer" ref="imageContainer">
     <slot
       name="image-list"
       :openModal="openModal"
@@ -356,22 +357,116 @@ const formattedTime = computed(() => {
       :isModalVisible="isModalVisible"
     ></slot>
   </div>
-  <div :class="$style.modal" v-show="isModalVisible" @click.self="closeModal">
-    <span :class="$style.close" @click="closeModal">&times;</span>
+  <div class="modal" v-show="isModalVisible" @click.self="closeModal">
+    <span class="close" @click="closeModal">&times;</span>
     <img
-      :class="[$style.modalContent, `__dynamic__modal-content-${instanceId}`]"
+      :class="['modalContent', `__dynamic__modal-content-${instanceId}`]"
       :src="currentImage"
       alt="Preview"
       @mousedown="handleMouseDown"
     />
   </div>
 
-  <div :class="$style.timeContainer">
+  <div class="timeContainer">
     <p>{{ formattedTime }}</p>
   </div>
-  <div :class="$style.otherInfoContainer">
+  <div class="otherInfoContainer">
     <slot name="other-info"></slot>
   </div>
 </template>
 
-<style module src="./Footprints.module.scss"></style>
+<style scoped lang="scss">
+// Footprints 组件样式
+
+// 其他信息容器和时间容器
+.otherInfoContainer,
+.timeContainer {
+  font-size: 0.8rem;
+  color: gray;
+}
+
+// 文本容器
+.textContainer {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+// 文本内容
+.textContent {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+
+  // 折叠状态：隐藏从第三个开始的所有一级子元素
+  &.collapsed > :nth-child(n + 3) {
+    display: none;
+  }
+}
+
+// 切换按钮
+.toggleButton {
+  display: block;
+  margin-top: 0.5rem;
+  background-color: transparent;
+  color: #007bff;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: 1rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// 图片容器
+.imageContainer {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+
+  img {
+    width: calc(33.33% - 10px);
+    aspect-ratio: 1; // 设置宽高比为 1:1
+    object-fit: cover;
+    cursor: pointer;
+    margin: 0.3rem;
+  }
+}
+
+// 模态框
+.modal {
+  display: flex;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 1);
+  align-items: center;
+  justify-content: center;
+}
+
+// 模态框内容（图片）
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 90%;
+  max-height: 90%;
+  cursor: grab;
+}
+
+// 关闭按钮
+.close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  color: white;
+  font-size: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}
+</style>