feat(settings): enhance font customization with new options and improved font handling

- Add new font preference options: default, recommended, and custom
- Update locales with new font customization labels
- Modify font settings to support more flexible font selection
- Improve font rendering and fallback mechanisms
- Update font-related styles and CSS variables

assets/fonts/Onest-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/ShangguSans-LICENSE.txt

@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/_locales/cmn-CN.yml

@@ -112,6 +112,10 @@ settings:
     mandarin_tw: 官話 - 繁体中文
     jyut: 廣東話
   customize_font: 自定义字体
+  customize_font_opt:
+    default: Bilibili 默认
+    recommend: 推荐
+    custom: 自定义
   customize_font_desc: |-
     对于喜欢旧字形的用户，我们推荐 <a class="link" href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 和 <a class="link" href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
     这些字形还具有将简体中文转换为繁体/正体中文的能力。

src/_locales/cmn-TW.yml

@@ -112,6 +112,10 @@ settings:
     mandarin_tw: 官話 - 繁体中文
     jyut: 廣東話
   customize_font: 自訂字型
+  customize_font_opt:
+    default: Bilibili 預設
+    recommend: 推介
+    custom: 自訂
   customize_font_desc: |-
     對於喜歡舊字形的用戶，我們推薦 <a class="link" href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 和 <a class="link" href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
     這些字型還具有將簡體中文轉換爲繁體/繁体中文的能力。

src/_locales/en.yml

@@ -114,6 +114,10 @@ settings:
     mandarin_tw: Mandarin - Traditional Chinese
     jyut: Cantonese
   customize_font: Customize font
+  customize_font_opt:
+    default: Bilibili Default
+    recommend: Recommend
+    custom: Custom
   customize_font_desc: |-
     For users who favor the old form of Chinese characters, we recommend <a class="link" href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> and <a class="link" href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>.
     These fonts also possess the capability to convert simplified Chinese into traditional characters.

src/_locales/jyut.yml

@@ -112,6 +112,10 @@ settings:
     mandarin_tw: 官話 - 繁体中文
     jyut: 廣東話
   customize_font: 自訂字型
+  customize_font_opt:
+    default: Bilibili 預設
+    recommend: 推介
+    custom: 自訂
   customize_font_desc: |-
     對於舊字形嘅用戶，我哋推介 <a class="link" href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 同 <a class="link" href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
     呢啲字型仲可以將簡體中文轉做繁體/繁体中文。

src/components/Settings/General/General.vue

@@ -63,6 +63,23 @@ const videoCardOpenModeOptions = computed(() => {
   ]
 })
 
+const fontPreferenceOptions = computed(() => {
+  return [
+    {
+      label: t('settings.customize_font_opt.default'),
+      value: 'default',
+    },
+    {
+      label: t('settings.customize_font_opt.recommend'),
+      value: 'recommend',
+    },
+    {
+      label: t('settings.customize_font_opt.custom'),
+      value: 'custom',
+    },
+  ]
+})
+
 watch(() => settings.value.language, (newValue) => {
   locale.value = newValue
 })
@@ -93,8 +110,12 @@ watch(() => settings.value.language, (newValue) => {
         />
       </SettingsItem>
       <SettingsItem :title="$t('settings.customize_font')">
-        <Radio v-model="settings.customizeFont" />
-        <template v-if="settings.customizeFont" #bottom>
+        <Select
+          v-model="settings.customizeFont"
+          :options="fontPreferenceOptions"
+          w="full"
+        />
+        <template v-if="settings.customizeFont === 'custom'" #bottom>
           <Input v-model="settings.fontFamily" @keydown.stop.passive="() => {}" />
           <div text="sm $bew-text-2" mt-1 v-html="t('settings.customize_font_desc')" />
         </template>

src/contentScripts/views/necessarySettingsWatchers.ts

@@ -52,16 +52,29 @@ export function setupNecessarySettingsWatchers() {
   watch(
     [() => settings.value.customizeFont, () => settings.value.fontFamily],
     () => {
+      if (typeof settings.value.customizeFont === 'boolean')
+        settings.value.customizeFont = 'recommend'
+
       // Set the default font family
-      if (!settings.value.customizeFont && !settings.value.fontFamily) {
-        settings.value.fontFamily = `-apple-system, BlinkMacSystemFont, Inter, "Segoe UI Variable", "Segoe UI", "Roboto Flex", Roboto, "Noto Sans", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif`
+      if (!settings.value.fontFamily && settings.value.customizeFont !== 'custom') {
+        settings.value.fontFamily = `bilifont, Onest, ShangguSans, -apple-system, BlinkMacSystemFont, InterVariable, Inter, "Segoe UI",
+          Cantarell, "Noto Sans", "Roboto Flex", Roboto, sans-serif, ui-sans-serif, system-ui, "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji",
+          "Segoe UI Emoji", "Segoe UI Symbol", emoji`
       }
 
-      if (settings.value.customizeFont) {
-        document.documentElement.style.setProperty('--bew-font-family', settings.value.fontFamily)
+      // Remove the custom fonts first
+      document.documentElement.style.removeProperty('--bew-custom-fonts')
+
+      // Under default settings, revert to Bilibili's original font-family
+      if (settings.value.customizeFont === 'default') {
+        document.documentElement.classList.remove('modify-fonts')
+      }
+      else if (settings.value.customizeFont === 'recommend') {
+        document.documentElement.classList.add('modify-fonts')
       }
       else {
-        document.documentElement.style.removeProperty('--bew-font-family')
+        document.documentElement.classList.add('modify-fonts')
+        document.documentElement.style.setProperty('--bew-custom-fonts', settings.value.fontFamily)
       }
     },
     { immediate: true },
@@ -71,24 +84,10 @@ export function setupNecessarySettingsWatchers() {
   watch(
     () => settings.value.overrideDanmakuFont,
     () => {
-      let fallbackFontFamily = ''
-      if (locale.value === LanguageType.Mandarin_CN) {
-        fallbackFontFamily = 'var(--bew-fonts-mandarin-cn)'
-      }
-      else if (locale.value === LanguageType.Mandarin_TW) {
-        fallbackFontFamily = 'var(--bew-fonts-mandarin-tw)'
-      }
-      else if (locale.value === LanguageType.Cantonese) {
-        fallbackFontFamily = 'var(--bew-fonts-cantonese)'
-      }
-      else {
-        fallbackFontFamily = 'var(--bew-fonts-english)'
-      }
-
       if (settings.value.overrideDanmakuFont) {
         danmakuFontStyleEl = injectCSS(`
           .bewly-design .bili-danmaku-x-dm {
-            font-family: var(--bew-font-family, ${fallbackFontFamily}) !important;
+            font-family: var(--bew-fonts) !important;
           }
         `)
       }

src/logic/storage.ts

@@ -12,7 +12,7 @@ export interface Settings {
   enableHorizontalScrolling: boolean
 
   language: string
-  customizeFont: boolean
+  customizeFont: 'default' | 'recommend' | 'custom'
   fontFamily: string
   overrideDanmakuFont: boolean
   removeTheIndentFromChinesePunctuation: boolean
@@ -113,7 +113,7 @@ export const originalSettings: Settings = {
   enableHorizontalScrolling: false,
 
   language: '',
-  customizeFont: false,
+  customizeFont: 'recommend',
   fontFamily: '',
   overrideDanmakuFont: true,
   removeTheIndentFromChinesePunctuation: false,

src/styles/fonts.scss

@@ -2,20 +2,12 @@
 
 :root,
 :host {
-  --bew-fonts-basic: bilifont, -apple-system, BlinkMacSystemFont, Inter, "Segoe UI Variable", "Segoe UI", "Roboto Flex",
-    Roboto, "Noto Sans", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";
-  --bew-fonts-fallback: system-ui, Arial, sans-serif;
+  --bew-fonts-basic: bilifont, Onest, ShangguSans, -apple-system, BlinkMacSystemFont, InterVariable, Inter, "Segoe UI",
+    Cantarell, "Noto Sans", "Roboto Flex", Roboto;
+  --bew-fonts-fallback: sans-serif, ui-sans-serif, system-ui, "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", emoji;
 
-  --bew-fonts-english: var(--bew-fonts-basic), var(--bew-fonts-fallback);
-  --bew-fonts-mandarin-cn: var(--bew-fonts-basic), "PingFang SC", "Source Han Sans SC VF", "Noto Sans CJK SC",
-    "Source Han Sans SC", "Microsoft YaHei", var(--bew-fonts-fallback);
-  // TODO: 使用 CDN 載入思源黑體 to prevent 弱撚智 Microsoft JhengHei 視覺干擾
-  /* Microsoft JhengHei 是我見過最腦殘弱智的字型，預設下文字太細，但是 windows 繁体中文又預設用這個黑體渲染，能用 cdn 換字型就換 */
-  --bew-fonts-mandarin-tw: var(--bew-fonts-basic), "PingFang TC", "Source Han Sans TC VF", "Noto Sans CJK TC",
-    "Source Han Sans TC", "Microsoft JhengHei", var(--bew-fonts-fallback);
-  /* Microsoft JhengHei 是我見過最腦殘弱智的字型，預設下文字太細，但是 windows 繁体中文又預設用這個黑體渲染，能用 cdn 換字型就換 */
-  --bew-fonts-cantonese: var(--bew-fonts-basic), "PingFang HK", "Source Han Sans HC VF", "Noto Sans CJK HK",
-    "Source Han Sans HC", "Microsoft JhengHei", var(--bew-fonts-fallback);
+  --bew-fonts: var(--bew-custom-fonts, var(--bew-fonts-basic), var(--bew-fonts-fallback));
 }
 
 .bewly-wrapper,
@@ -29,69 +21,17 @@
   }
 }
 
-:lang(en) .bewly-wrapper,
-:lang(en).bewly-design,
+.modify-fonts .bewly-wrapper,
+.bewly-design.modify-fonts,
 // Do not change the danmaku font because the Bilibili video player can change the font of danmaku
-:lang(en).bewly-design *:not(.bili-danmaku-x-dm),
+.bewly-design.modify-fonts *:not(.bili-danmaku-x-dm),
 // 热搜点评
-:lang(en).bewly-design .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title,
+.bewly-design.modify-fonts .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title,
 // 接下来播放
-:lang(en).bewly-design .recommend-list-v1 .rec-title,
+.bewly-design.modify-fonts .recommend-list-v1 .rec-title,
 // Font for the recommended video list on the right side of the video https://github.com/BewlyBewly/BewlyBewly/issues/1061
-:lang(en).bewly-design .card-box .info .title,
+.bewly-design.modify-fonts .card-box .info .title,
 // Search page video card title https://search.bilibili.com/all?keyword=test
-:lang(en).bewly-design .bili-video-card .bili-video-card__info--tit {
-  font-family: var(--bew-font-family, var(--bew-fonts-english));
+.bewly-design.modify-fonts .bili-video-card .bili-video-card__info--tit {
+  font-family: var(--bew-fonts);
 }
-
-:lang(zh-CN) .bewly-wrapper,
-:lang(zh-CN).bewly-design,
-// Do not change the danmaku font because the Bilibili video player can change the font of danmaku
-:lang(zh-CN).bewly-design *:not(.bili-danmaku-x-dm),
-// 热搜点评
-:lang(zh-CN).bewly-design .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title,
-// 接下来播放
-:lang(zh-CN).bewly-design .recommend-list-v1 .rec-title,
-// Font for the recommended video list on the right side of the video https://github.com/BewlyBewly/BewlyBewly/issues/1061
-:lang(zh-CN).bewly-design .card-box .info .title,
-// Search page video card title https://search.bilibili.com/all?keyword=test
-:lang(zh-CN).bewly-design .bili-video-card .bili-video-card__info--tit {
-  font-family: var(--bew-font-family, var(--bew-fonts-mandarin-cn));
-}
-
-:lang(zh-TW) .bewly-wrapper,
-:lang(zh-TW).bewly-design,
-// Do not change the danmaku font because the Bilibili video player can change the font of danmaku
-:lang(zh-TW).bewly-design *:not(.bili-danmaku-x-dm),
-// 热搜点评
-:lang(zh-TW).bewly-design .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title,
-// 接下来播放
-:lang(zh-TW).bewly-design .recommend-list-v1 .rec-title,
-// Font for the recommended video list on the right side of the video https://github.com/BewlyBewly/BewlyBewly/issues/1061
-:lang(zh-TW).bewly-design .card-box .info .title,
-// Search page video card title https://search.bilibili.com/all?keyword=test
-:lang(zh-TW).bewly-design .bili-video-card .bili-video-card__info--tit {
-  font-family: var(--bew-font-family, var(--bew-fonts-mandarin-tw));
-}
-
-:lang(zh-HK) .bewly-wrapper,
-:lang(zh-HK).bewly-design,
-// Do not change the danmaku font because the Bilibili video player can change the font of danmaku
-:lang(zh-HK).bewly-design *:not(.bili-danmaku-x-dm),
-// 热搜点评
-:lang(zh-HK).bewly-design .base-video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title,
-// 接下来播放
-:lang(zh-HK).bewly-design .recommend-list-v1 .rec-title,
-// Font for the recommended video list on the right side of the video https://github.com/BewlyBewly/BewlyBewly/issues/1061
-:lang(zh-HK).bewly-design .card-box .info .title,
-// Search page video card title https://search.bilibili.com/all?keyword=test
-:lang(zh-HK).bewly-design .bili-video-card .bili-video-card__info--tit {
-  font-family: var(--bew-font-family, var(--bew-fonts-cantonese));
-}
-
-// // 不知道爲何 firefox 用下面這一段樣式優先級別會高過的樣式，先註釋先了
-// .bewly-wrapper,
-// .bewly-design,
-// .bewly-design *:not(.bili-danmaku-x-dm) {
-//   font-family: var(--bew-font-family, var(--bew-fonts-english));
-// }

src/styles/index.ts

@@ -5,3 +5,4 @@ import './transitionAndTransitionGroup.scss'
 import './blockAds.scss'
 import './removeTopBar.scss'
 import './fonts.scss'
+import './injectBuildInFonts.ts'

src/styles/injectBuildInFonts.ts

@@ -0,0 +1,15 @@
+import browser from 'webextension-polyfill'
+
+import { injectCSS } from '~/utils/main'
+
+injectCSS(`
+  @font-face {
+    font-family: "Onest";
+    src: url(${browser.runtime.getURL('/assets/fonts/Onest-VF.ttf')}) format("truetype-variations");
+  }
+
+  @font-face {
+    font-family: "ShangguSans";
+    src: url(${browser.runtime.getURL('/assets/fonts/ShangguSansHWSC-VF.ttf')}) format("truetype-variations");
+  }
+`)

src/styles/main.scss

@@ -1,6 +1,6 @@
 * {
   outline-color: var(--bew-theme-color-80);
-  font-feature-settings: "tnum";
+  // font-feature-settings: "tnum";
   // outline-width: 2px;
   // outline-offset: 2px;
 }