add all components to template #532
Conversation
Summary of ChangesHello @MakinoharaShoko, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly expands the default template by incorporating a wide array of new user interface components. It establishes the foundational structure, styling, and localization for these elements, aiming to provide a richer and more customizable experience within the application. The changes are extensive, covering various interactive and informational UI sections. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a significant number of new components to the template, including their structure, styling, and internationalization keys. My review focuses on ensuring these additions are correct, maintainable, and properly localized.
Key findings include:
- Missing Translations: The English and Japanese
.pofiles have many new keys with empty translations. - Code Quality: I've identified several typos in CSS class names within the component definitions, which will likely cause styling issues.
- Maintainability: The
ComponentTree.tsxfile has grown substantially, and I've suggested refactoring it for better organization. - Styling Issues: Some new SCSS files contain hardcoded Chinese font names, which is not ideal for a localizable template. There's also some commented-out code and non-English comments that should be addressed.
Overall, this is a large but important update. Addressing these points will improve the quality and maintainability of the new components.
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:160 | ||
| msgid "BGM 名称" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:156 | ||
| msgid "BGM 容器" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:159 | ||
| msgid "BGM 控制按钮" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:158 | ||
| msgid "BGM 播放器" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:161 | ||
| msgid "BGM 条目" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:162 | ||
| msgid "BGM 条目（激活）" | ||
| msgstr "" |
There was a problem hiding this comment.
The English translations for these new component names are missing. Please provide the msgstr values for all new msgid entries in this file. This will result in empty strings in the UI for English-speaking users.
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:160 | ||
| msgid "BGM 名称" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:156 | ||
| msgid "BGM 容器" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:159 | ||
| msgid "BGM 控制按钮" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:158 | ||
| msgid "BGM 播放器" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:161 | ||
| msgid "BGM 条目" | ||
| msgstr "" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:162 | ||
| msgid "BGM 条目（激活）" | ||
| msgstr "" |
There was a problem hiding this comment.
The Japanese translations for these new component names are missing. Please provide the msgstr values for all new msgid entries in this file. This will result in empty strings in the UI for Japanese-speaking users.
| { name: t`CG 容器`, class: 'cgContainer' }, | ||
| { name: t`CG 条目`, class: 'cgElement' }, | ||
| { name: t`CG 展示区`, class: 'cgShowDiv' }, | ||
| { name: t`CG 展示区外层`, class: 'cgShowDivWarpper' }, |
There was a problem hiding this comment.
There seems to be a typo in the class name. It should probably be cgShowDivWrapper instead of cgShowDivWarpper.
| { name: t`CG 展示区外层`, class: 'cgShowDivWarpper' }, | |
| { name: t`CG 展示区外层`, class: 'cgShowDivWrapper' }, |
| { name: t`对话框内层容器`, class: 'glabalDialog_container_inner' }, | ||
| { name: t`对话框容器`, class: 'glabalDialog_container' }, |
There was a problem hiding this comment.
There seems to be a typo in the class names. glabalDialog should probably be globalDialog to match the function name useComponentTreeGlobalDialog and the file path.
| { name: t`对话框内层容器`, class: 'glabalDialog_container_inner' }, | |
| { name: t`对话框容器`, class: 'glabalDialog_container' }, | |
| { name: t`对话框内层容器`, class: 'globalDialog_container_inner' }, | |
| { name: t`对话框容器`, class: 'globalDialog_container' }, |
| { name: t`存读条目`, class: 'Save_Load_content_element' }, | ||
| { name: t`存读条目顶部`, class: 'Save_Load_content_element_top' }, | ||
| { name: t`存读条目序号`, class: 'Save_Load_content_element_top_index' }, | ||
| { name: t`读档条目序号`, class: 'Load_content_elememt_top_index' }, |
There was a problem hiding this comment.
There seems to be a typo in the class name. It should probably be Load_content_element_top_index instead of Load_content_elememt_top_index to be consistent with other class names and the corresponding SCSS file.
| { name: t`读档条目序号`, class: 'Load_content_elememt_top_index' }, | |
| { name: t`读档条目序号`, class: 'Load_content_element_top_index' }, |
| @@ -0,0 +1,220 @@ | |||
| .Backlog_main { | |||
| font-family: "思源宋体", serif; | |||
There was a problem hiding this comment.
The font-family is hardcoded to "思源宋体", which is a Chinese font. For a default template that supports multiple languages, it's better to use a CSS variable or a more generic font stack (e.g., serif, sans-serif) to ensure proper font rendering across different locales. This hardcoded font name appears in several other newly added SCSS files as well and should be addressed globally.
| msgstr "BGM 列表容器" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:160 | ||
| msgid "BGM 名称" | ||
| msgstr "BGM 名称" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:156 | ||
| msgid "BGM 容器" | ||
| msgstr "BGM 容器" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:159 | ||
| msgid "BGM 控制按钮" | ||
| msgstr "BGM 控制按钮" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:158 | ||
| msgid "BGM 播放器" | ||
| msgstr "BGM 播放器" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:161 | ||
| msgid "BGM 条目" | ||
| msgstr "BGM 条目" | ||
|
|
||
| #: src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/ComponentTree.tsx:162 | ||
| msgid "BGM 条目（激活）" | ||
| msgstr "BGM 条目（激活）" |
There was a problem hiding this comment.
The translations for these new keys are just copies of the msgid. While this prevents empty strings, they are not proper translations. If these are final, it's fine, but if they are placeholders, they should be updated with the correct Simplified Chinese terms.
| export const useComponentTreeBacklog = () => { | ||
| return { | ||
| name: t`回想`, | ||
| path: `UI/Backlog/backlog.scss`, | ||
| nodes: [ | ||
| { name: t`回想主界面`, class: 'Backlog_main' }, | ||
| { name: t`回想主界面（退出）`, class: 'Backlog_main_out' }, | ||
| { name: t`回想主界面（隐藏层级）`, class: 'Backlog_main_out_IndexHide' }, | ||
| { name: t`回想主界面（禁用滚动）`, class: 'Backlog_main_DisableScroll' }, | ||
| { name: t`回想顶部区域`, class: 'backlog_top' }, | ||
| { name: t`回想顶部图标`, class: 'backlog_top_icon' }, | ||
| { name: t`回想标题`, class: 'backlog_title' }, | ||
| { name: t`回想内容区`, class: 'backlog_content' }, | ||
| { name: t`回想条目`, class: 'backlog_item' }, | ||
| { name: t`回想条目（退出）`, class: 'backlog_item_out' }, | ||
| { name: t`回想条目功能区`, class: 'backlog_func_area' }, | ||
| { name: t`回想条目角色名`, class: 'backlog_item_content_name' }, | ||
| { name: t`回想条目内容容器`, class: 'backlog_item_content' }, | ||
| { name: t`回想条目按钮列表`, class: 'backlog_item_button_list' }, | ||
| { name: t`回想条目按钮`, class: 'backlog_item_button_element' }, | ||
| { name: t`回想条目文本`, class: 'backlog_item_content_text' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeBottomControlPanel = () => { | ||
| return { | ||
| name: t`底部控制栏`, | ||
| path: `UI/BottomControlPanel/bottomControlPanel.scss`, | ||
| nodes: [ | ||
| { name: t`控制栏主体`, class: 'main' }, | ||
| { name: t`控制栏按钮`, class: 'button' }, | ||
| { name: t`按钮文字`, class: 'button_text' }, | ||
| { name: t`按钮（开启）`, class: 'button_on' }, | ||
| { name: t`单个按钮`, class: 'singleButton' }, | ||
| { name: t`单个按钮（激活）`, class: 'singleButton_active' }, | ||
| { name: t`快存读预览`, class: 'fastSlPreview' }, | ||
| { name: t`预览主体`, class: 'slPreviewMain' }, | ||
| { name: t`预览图片容器`, class: 'imgContainer' }, | ||
| { name: t`预览文本容器`, class: 'textContainer' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeBottomControlPanelFilm = () => { | ||
| return { | ||
| name: t`底部控制栏（电影模式）`, | ||
| path: `UI/BottomControlPanel/bottomControlPanelFilm.scss`, | ||
| nodes: [ | ||
| { name: t`标签`, class: 'tag' }, | ||
| { name: t`面板容器`, class: 'container' }, | ||
| { name: t`面板单个按钮`, class: 'singleButton' }, | ||
| { name: t`面板按钮文字`, class: 'button_text' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeDevPanel = () => { | ||
| return { | ||
| name: t`开发者面板`, | ||
| path: `UI/DevPanel/devPanel.scss`, | ||
| nodes: [ | ||
| { name: t`面板主体`, class: 'devPanelMain' }, | ||
| { name: t`面板开关`, class: 'devPanelOpener' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeExtra = () => { | ||
| return { | ||
| name: t`Extra`, | ||
| path: `UI/Extra/extra.scss`, | ||
| nodes: [ | ||
| { name: t`Extra 主界面`, class: 'extra' }, | ||
| { name: t`Extra 顶部区域`, class: 'extra_top' }, | ||
| { name: t`Extra 顶部图标`, class: 'extra_top_icon' }, | ||
| { name: t`Extra 标题`, class: 'extra_title' }, | ||
| { name: t`Extra 主容器`, class: 'mainContainer' }, | ||
| { name: t`BGM 容器`, class: 'bgmContainer' }, | ||
| { name: t`BGM 列表容器`, class: 'bgmListContainer' }, | ||
| { name: t`BGM 播放器`, class: 'bgmPlayerMain' }, | ||
| { name: t`BGM 控制按钮`, class: 'bgmControlButton' }, | ||
| { name: t`BGM 名称`, class: 'bgmName' }, | ||
| { name: t`BGM 条目`, class: 'bgmElement' }, | ||
| { name: t`BGM 条目（激活）`, class: 'bgmElement_active' }, | ||
| { name: t`CG 主区`, class: 'cgMain' }, | ||
| { name: t`CG 容器`, class: 'cgContainer' }, | ||
| { name: t`CG 条目`, class: 'cgElement' }, | ||
| { name: t`CG 展示区`, class: 'cgShowDiv' }, | ||
| { name: t`CG 展示区外层`, class: 'cgShowDivWarpper' }, | ||
| { name: t`CG 导航`, class: 'cgNav' }, | ||
| { name: t`CG 导航（激活）`, class: 'cgNav_active' }, | ||
| { name: t`全屏展示容器`, class: 'showFullContainer' }, | ||
| { name: t`全屏 CG 主体`, class: 'showFullCgMain' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeGlobalDialog = () => { | ||
| return { | ||
| name: t`全局对话框`, | ||
| path: `UI/GlobalDialog/globalDialog.scss`, | ||
| nodes: [ | ||
| { name: t`对话框主体`, class: 'GlobalDialog_main' }, | ||
| { name: t`对话框内层容器`, class: 'glabalDialog_container_inner' }, | ||
| { name: t`对话框容器`, class: 'glabalDialog_container' }, | ||
| { name: t`对话框标题`, class: 'title' }, | ||
| { name: t`对话框按钮列表`, class: 'button_list' }, | ||
| { name: t`对话框按钮`, class: 'button' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeLogo = () => { | ||
| return { | ||
| name: t`Logo`, | ||
| path: `UI/Logo/logo.scss`, | ||
| nodes: [ | ||
| { name: t`Logo 主体`, class: 'Logo_main' }, | ||
| { name: t`Logo 背景`, class: 'Logo_Back' }, | ||
| { name: t`Logo 动画激活`, class: 'animationActive' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeMenu = () => { | ||
| return { | ||
| name: t`菜单`, | ||
| path: `UI/Menu/menu.scss`, | ||
| nodes: [ | ||
| { name: t`菜单主界面`, class: 'Menu_main' }, | ||
| { name: t`菜单标签内容`, class: 'Menu_TagContent' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeMenuPanel = () => { | ||
| return { | ||
| name: t`菜单面板`, | ||
| path: `UI/Menu/menuPanel.scss`, | ||
| nodes: [ | ||
| { name: t`菜单面板主体`, class: 'MenuPanel_main' }, | ||
| { name: t`菜单面板按钮`, class: 'MenuPanel_button' }, | ||
| { name: t`菜单面板按钮图标`, class: 'MenuPanel_button_icon' }, | ||
| { name: t`菜单面板按钮高亮`, class: 'MenuPanel_button_hl' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeNormalButton = () => { | ||
| return { | ||
| name: t`普通按钮`, | ||
| path: `UI/Menu/normalButton.scss`, | ||
| nodes: [ | ||
| { name: t`普通按钮`, class: 'NormalButton' }, | ||
| { name: t`普通按钮（选中）`, class: 'NormalButtonChecked' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeNormalOption = () => { | ||
| return { | ||
| name: t`普通选项`, | ||
| path: `UI/Menu/normalOption.scss`, | ||
| nodes: [ | ||
| { name: t`普通选项容器`, class: 'NormalOption' }, | ||
| { name: t`普通选项标题`, class: 'NormalOption_title' }, | ||
| { name: t`普通选项标题描边`, class: 'NormalOption_title_bef' }, | ||
| { name: t`普通选项标题阴影`, class: 'NormalOption_title_sd' }, | ||
| { name: t`普通选项按钮列表`, class: 'NormalOption_buttonList' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeOptions = () => { | ||
| return { | ||
| name: t`选项设置`, | ||
| path: `UI/Menu/options.scss`, | ||
| nodes: [ | ||
| { name: t`选项主界面`, class: 'Options_main' }, | ||
| { name: t`选项顶部`, class: 'Options_top' }, | ||
| { name: t`选项标题`, class: 'Options_title' }, | ||
| { name: t`选项标题文字`, class: 'Option_title_text' }, | ||
| { name: t`选项标题描边`, class: 'Option_title_text_shadow' }, | ||
| { name: t`选项标题投影`, class: 'Option_title_text_ts' }, | ||
| { name: t`选项内容区`, class: 'Options_main_content' }, | ||
| { name: t`选项内容列`, class: 'Options_main_content_half' }, | ||
| { name: t`关于入口标题`, class: 'About_title_text' }, | ||
| { name: t`关于入口文字`, class: 'About_text' }, | ||
| { name: t`选项分页容器`, class: 'Options_page_container' }, | ||
| { name: t`选项分页按钮列表`, class: 'Options_button_list' }, | ||
| { name: t`选项分页按钮`, class: 'Options_page_button' }, | ||
| { name: t`选项分页按钮（激活）`, class: 'Options_page_button_active' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeSaveAndLoad = () => { | ||
| return { | ||
| name: t`存读档`, | ||
| path: `UI/Menu/saveAndLoad.scss`, | ||
| nodes: [ | ||
| { name: t`存读主界面`, class: 'Save_Load_main' }, | ||
| { name: t`存读顶部`, class: 'Save_Load_top' }, | ||
| { name: t`存读标题背景`, class: 'Save_Load_title' }, | ||
| { name: t`存档标题文字`, class: 'Save_title_text' }, | ||
| { name: t`读档标题文字`, class: 'Load_title_text' }, | ||
| { name: t`存读顶部按钮列表`, class: 'Save_Load_top_buttonList' }, | ||
| { name: t`存读顶部按钮`, class: 'Save_Load_top_button' }, | ||
| { name: t`存读顶部按钮文字`, class: 'Save_Load_top_button_text' }, | ||
| { name: t`存读顶部按钮（选中）`, class: 'Save_Load_top_button_on' }, | ||
| { name: t`读档顶部按钮（选中）`, class: 'Load_top_button_on' }, | ||
| { name: t`存读内容区`, class: 'Save_Load_content' }, | ||
| { name: t`存读条目`, class: 'Save_Load_content_element' }, | ||
| { name: t`存读条目顶部`, class: 'Save_Load_content_element_top' }, | ||
| { name: t`存读条目序号`, class: 'Save_Load_content_element_top_index' }, | ||
| { name: t`读档条目序号`, class: 'Load_content_elememt_top_index' }, | ||
| { name: t`存读条目日期`, class: 'Save_Load_content_element_top_date' }, | ||
| { name: t`读档条目日期`, class: 'Load_content_element_top_date' }, | ||
| { name: t`存读条目文本`, class: 'Save_Load_content_text' }, | ||
| { name: t`存读条目文本内边距`, class: 'Save_Load_content_text_padding' }, | ||
| { name: t`存读条目角色名`, class: 'Save_Load_content_speaker' }, | ||
| { name: t`读档条目角色名`, class: 'Load_content_speaker' }, | ||
| { name: t`读档条目文本`, class: 'Load_content_text' }, | ||
| { name: t`存读小立绘`, class: 'Save_Load_content_miniRen' }, | ||
| { name: t`存读小立绘背景`, class: 'Save_Load_content_miniRen_bg' }, | ||
| { name: t`存读小立绘角色`, class: 'Save_Load_content_miniRen_figure' }, | ||
| { name: t`存读小立绘（左）`, class: 'Save_Load_content_miniRen_figLeft' }, | ||
| { name: t`存读小立绘（右）`, class: 'Save_Load_content_miniRen_figRight' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeSlider = () => { | ||
| return { | ||
| name: t`滑块`, | ||
| path: `UI/Menu/slider.scss`, | ||
| nodes: [ | ||
| { name: t`选项滑块`, class: 'Option_WebGAL_slider' }, | ||
| { name: t`滑块气泡`, class: 'bubble' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeAbout = () => { | ||
| return { | ||
| name: t`关于`, | ||
| path: `UI/Menu/about.scss`, | ||
| nodes: [ | ||
| { name: t`返回按钮`, class: 'backButton' }, | ||
| { name: t`关于内容`, class: 'about' }, | ||
| { name: t`图标`, class: 'icon' }, | ||
| { name: t`标题`, class: 'title' }, | ||
| { name: t`文本`, class: 'text' }, | ||
| { name: t`贡献者`, class: 'contributor' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreeTextPreview = () => { | ||
| return { | ||
| name: t`文本预览`, | ||
| path: `UI/Menu/textPreview.scss`, | ||
| nodes: [ | ||
| { name: t`文本预览主体`, class: 'textPreviewMain' }, | ||
| { name: t`预览文本框`, class: 'textbox' }, | ||
| ], | ||
| }; | ||
| }; | ||
|
|
||
| export const useComponentTreePanicOverlay = () => { | ||
| return { | ||
| name: t`紧急遮罩`, | ||
| path: `UI/PanicOverlay/panicOverlay.scss`, | ||
| nodes: [ | ||
| { name: t`紧急遮罩主体`, class: 'panic_overlay_main' }, | ||
| ], | ||
| }; | ||
| }; |
There was a problem hiding this comment.
This file has grown significantly and now contains many component tree definitions. To improve maintainability and readability, consider extracting each useComponentTree... hook into its own file within a dedicated directory (e.g., src/pages/templateEditor/TemplateEditorSidebar/ComponentTree/hooks/). The main ComponentTree.tsx file would then become much cleaner, only importing and composing these hooks.
| //.ToCenter { | ||
| // display: flex; | ||
| // justify-content: center; | ||
| // position: absolute; | ||
| // bottom: 0; | ||
| // left: 0; | ||
| // width: 100%; | ||
| // z-index: 9; | ||
| //} |
There was a problem hiding this comment.
This new file contains a block of commented-out code. If this code is no longer needed, it should be removed to keep the codebase clean. This also applies to other new SCSS files in this pull request that contain commented-out styles.
| input[type=range] { | ||
| -webkit-appearance: none; /* 去掉底部的 track 默认样式，就是整个灰条 */ | ||
| width: 500px; /* Firefox 需要指定明确的宽度 */ | ||
| height: 50px; | ||
| background: transparent; /* 否则在 Chrome 中是白色背景 */ | ||
| font-size: 100%; | ||
| } | ||
|
|
||
| /* 去掉 webkit 内核 滑块 的样式 */ | ||
| input[type=range]::-webkit-slider-thumb { | ||
| -webkit-appearance: none; | ||
| } | ||
|
|
||
| input[type=range]:focus { | ||
| outline: none; /* 去除获取焦点时蓝色的外边框，你也可以自己定制其他你想要的效果 */ | ||
| } | ||
|
|
||
| /*以下是自定义样式*/ | ||
|
|
||
| /*滑块样式*/ |
There was a problem hiding this comment.
The comments in this SCSS file are in Chinese. For consistency with the rest of the codebase and to make it accessible to a broader range of contributors, please write comments in English.
No description provided.