diff --git a/src/config/i18n.js b/src/config/i18n.js index 63bcdd0..ab665ee 100644 --- a/src/config/i18n.js +++ b/src/config/i18n.js @@ -569,6 +569,16 @@ export const I18N = { zh: `虚线框`, en: `Dashed Box`, }, + dash_line_bold: { + zh: `下划虚线加粗`, + en: `Dashed Underline Bold`, + zh_TW: `下劃虛線`, + }, + dash_box_bold: { + zh: `虚线框加粗`, + en: `Dashed Box Bold`, + zh_TW: `虛線框加粗`, + }, marker: { zh: `马克笔`, en: `Marker`, @@ -584,6 +594,11 @@ export const I18N = { en: `Wavy Underline`, zh_TW: `下劃波浪線`, }, + wavy_line_bold: { + zh: `下划波浪线加粗`, + en: `Wavy Underline Bold`, + zh_TW: `下劃波浪線加粗`, + }, fuzzy: { zh: `模糊`, en: `Fuzzy`, diff --git a/src/config/styles.js b/src/config/styles.js index 330ce17..0504045 100644 --- a/src/config/styles.js +++ b/src/config/styles.js @@ -2,8 +2,11 @@ export const OPT_STYLE_NONE = "style_none"; // 无 export const OPT_STYLE_LINE = "under_line"; // 下划线 export const OPT_STYLE_DOTLINE = "dot_line"; // 点状线 export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线 +export const OPT_STYLE_DASHLINE_BOLD = "dash_line_bold"; // 虚线加粗 export const OPT_STYLE_DASHBOX = "dash_box"; // 虚线框 +export const OPT_STYLE_DASHBOX_BOLD = "dash_box_bold"; // 虚线框加粗 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线 +export const OPT_STYLE_WAVYLINE_BOLD = "wavy_line_bold"; // 波浪线加粗 export const OPT_STYLE_MARKER = "marker"; // 马克笔 export const OPT_STYLE_GRADIENT_MARKER = "gradient_marker"; // 渐变马克笔 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊 @@ -18,8 +21,11 @@ export const OPT_STYLE_ALL = [ OPT_STYLE_LINE, OPT_STYLE_DOTLINE, OPT_STYLE_DASHLINE, + OPT_STYLE_DASHLINE_BOLD, OPT_STYLE_WAVYLINE, + OPT_STYLE_WAVYLINE_BOLD, OPT_STYLE_DASHBOX, + OPT_STYLE_DASHBOX_BOLD, OPT_STYLE_MARKER, OPT_STYLE_GRADIENT_MARKER, OPT_STYLE_FUZZY, diff --git a/src/libs/style.js b/src/libs/style.js index 7f29c29..3c38a9e 100644 --- a/src/libs/style.js +++ b/src/libs/style.js @@ -16,6 +16,9 @@ import { DEFAULT_COLOR, OPT_STYLE_MARKER, OPT_STYLE_GRADIENT_MARKER, + OPT_STYLE_DASHBOX_BOLD, + OPT_STYLE_DASHLINE_BOLD, + OPT_STYLE_WAVYLINE_BOLD, } from "../config"; const gradientFlow = keyframes` @@ -48,11 +51,11 @@ const glow = keyframes` } `; -const genLineStyle = (style, color) => ` +const genLineStyle = (style, color, thickness = 1) => ` text-decoration-line: underline; text-decoration-style: ${style}; text-decoration-color: ${color}; - text-decoration-thickness: 1px; + text-decoration-thickness: ${thickness}px; text-underline-offset: 0.3em; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: ${style}; @@ -77,8 +80,12 @@ const genBuiltinStyles = (color = DEFAULT_COLOR) => ({ [OPT_STYLE_DOTLINE]: genLineStyle("dotted", color), // 虚线 [OPT_STYLE_DASHLINE]: genLineStyle("dashed", color), + // 虚线加粗 + [OPT_STYLE_DASHLINE_BOLD]: genLineStyle("dashed", color, 2), // 波浪线 [OPT_STYLE_WAVYLINE]: genLineStyle("wavy", color), + // 波浪线加粗 + [OPT_STYLE_WAVYLINE_BOLD]: genLineStyle("wavy", color, 2), // 虚线框 [OPT_STYLE_DASHBOX]: ` border: 1px dashed ${color}; @@ -86,6 +93,13 @@ const genBuiltinStyles = (color = DEFAULT_COLOR) => ({ padding: 0.2em 0.3em; box-sizing: border-box; `, + // 虚线框加粗 + [OPT_STYLE_DASHBOX_BOLD]: ` + border: 2px dashed ${color}; + display: block; + padding: 0.2em 0.3em; + box-sizing: border-box; + `, // 马克笔 [OPT_STYLE_MARKER]: ` background: linear-gradient(to top, ${color} 50%, transparent 50%);