mirror/koodo-reader
1
0
Fork 0
mirror of https://github.com/koodo-reader/koodo-reader.git synced 2026-06-18 21:00:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: update theme and skin settings with new colors and icons

Browse Source 
- Updated Chinese translations for color names in translation.json.
- Refactored SettingDialog component to enhance theme and appearance settings UI.
- Improved CSS styles for theme and skin setting items for better user experience.
- Added SVG icons for skin options in settingList.tsx.
- Cleaned up themeList.tsx by removing unnecessary lines.
This commit is contained in:
troyeguo
2026-03-16 16:08:57 +08:00
parent 89dfeabffb
commit bffc4a167a
6 changed files with 133 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/dialogs/settingDialog/settingDialog.css
View File

@@ -172,18 +172,74 @@
line-height: 1;
}
.theme-setting-item {
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px 4px 8px;
border-radius: 20px;
border: 2px solid transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
box-sizing: border-box;
transition: border-color 0.15s;
}
.theme-setting-item.active-theme-item {
border-color: currentColor;
}
.theme-setting-dot {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
.theme-setting-container {
width: 150px;
height: 25px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
align-items: center;
width: auto;
height: auto;
margin-left: 25px;
margin-right: 25px;
margin-top: 6px;
}
.skin-setting-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-left: 25px;
margin-right: 25px;
margin-top: 6px;
margin-bottom: 5px;
}
.skin-setting-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px 4px 8px;
border-radius: 20px;
border: 2px solid transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
box-sizing: border-box;
opacity: 0.6;
transition:
border-color 0.15s,
opacity 0.15s;
}
.skin-setting-item.active-skin-item {
border-color: currentColor;
opacity: 1;
}
.skin-setting-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.setting-option-subtitle {
font-size: 12px;