Compare commits
	
		
			7 Commits
		
	
	
		
			bfb27ab4a2
			...
			v1.24.6
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 987144a594 | ||
|   | 2caf68e290 | ||
|   | e2ccc8c9f7 | ||
|   | 7287aad198 | ||
|   | b3ce1a8439 | ||
|   | 5d96a6896d | ||
|   | ced954c1d0 | 
							
								
								
									
										61
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -12,7 +12,7 @@ determined. | |||||||
|  |  | ||||||
| ### ✨ Feature | ### ✨ Feature | ||||||
|  |  | ||||||
| - 支持猛男粉颜色主题 | - 新增粉色颜色主题 | ||||||
| - 修改外观设置中显示的主题名称 | - 修改外观设置中显示的主题名称 | ||||||
|  |  | ||||||
| #### CSS 变量 | #### CSS 变量 | ||||||
| @@ -22,33 +22,17 @@ determined. | |||||||
|  |  | ||||||
| ### 🌈 Style | ### 🌈 Style | ||||||
|  |  | ||||||
| - 优化小型按钮的高度 | - 优化用户首页仪表板的样式 | ||||||
| - 一些列表栏的元素位置居中 |  | ||||||
| - 优化仪表板热力图和动态样式 |  | ||||||
|  |  | ||||||
| ##### 更符合 GitHub 风格 | ##### 更符合 GitHub 风格 | ||||||
|  |  | ||||||
| - 同步查看代码文件内容时的样式 | - 同步查看代码文件内容时的样式 (去掉了一些底部元素, 优化滚动体验) | ||||||
| - 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验) | - 整体调整了页面元素的间隔, 样式和字体大小 | ||||||
| - 略微减小导航栏创建仓库菜单按钮内的图标间隔 | - 同步顶部工单/合并请求/里程碑下的仪表板样式 | ||||||
| - 微调一些标签的字体大小 | - 同步里程碑/置顶 Issue 的样式 | ||||||
| - 优化发布页面布局和下载列表样式 | - 同步通知/订阅/关注/软件包/提示框/用户头像菜单的页面样式 | ||||||
| - 同步里程碑页面样式 |  | ||||||
| - 同步顶部工单等仪表板样式 |  | ||||||
| - 同步置顶 Issue 样式 |  | ||||||
| - 同步订阅/关注页面样式 |  | ||||||
| - 同步用户菜单样式 |  | ||||||
| - 优化下拉菜单样式 |  | ||||||
| - 同步差异对比页面文件名标题栏样式 |  | ||||||
| - 同步分支菜单宽度 | - 同步分支菜单宽度 | ||||||
| - 同步通知页面样式 |  | ||||||
| - 优化仪表板的仓库组织切换按钮样式 |  | ||||||
| - 同步仓库已标星的星星颜色 | - 同步仓库已标星的星星颜色 | ||||||
| - 优化仪表板动态信息间隔 |  | ||||||
| - 微调仓库相关界面元素间隔 |  | ||||||
| - 同步软件包页面样式 |  | ||||||
| - 同步提示框样式 |  | ||||||
| - 同步主色调按钮和红色按钮的阴影样式 |  | ||||||
|  |  | ||||||
| ### 🐞 Fix | ### 🐞 Fix | ||||||
|  |  | ||||||
| @@ -57,22 +41,47 @@ determined. | |||||||
| - 修复登录二次验证页面内容位置 | - 修复登录二次验证页面内容位置 | ||||||
| - 修复后台管理的运维管理面板的样式 | - 修复后台管理的运维管理面板的样式 | ||||||
| - 取消修改编辑器字体大小, 避免光标错位 | - 取消修改编辑器字体大小, 避免光标错位 | ||||||
| - 修复文件预览时文件树右边框过粗 |  | ||||||
| - 修复提交列表尾行圆角 | - 修复提交列表尾行圆角 | ||||||
| - 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题 | - 修复 Wiki 页面和二级导航栏组织下团队菜单的圆角问题 | ||||||
| - 修复创建工单页面样式 | - 修复创建工单页面样式 | ||||||
| - 修复归档仓库 Issue 时间线过长插入归档信息框 | - 修复归档仓库 Issue 时间线过长插入归档信息框 | ||||||
| - 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色 | - 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色 | ||||||
|  |  | ||||||
| ## 📃 English (From AI) | ## 📃 English (From AI) | ||||||
|  |  | ||||||
|  | ### ✨ Feature | ||||||
|  |  | ||||||
|  | - Added pink color theme | ||||||
|  | - Modified theme names displayed in appearance settings | ||||||
|  |  | ||||||
|  | #### CSS Variables | ||||||
|  |  | ||||||
|  | - Added `--custom-branch-menu-width` variable for setting branch menu width | ||||||
|  | - Added `--custom-user-menu-width` variable for setting user menu width | ||||||
|  |  | ||||||
| ### 🌈 Style | ### 🌈 Style | ||||||
|  |  | ||||||
|  | - Optimized dashboard style on user homepage | ||||||
|  |  | ||||||
| ##### More GitHub-like style | ##### More GitHub-like style | ||||||
|  |  | ||||||
| - Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap) | - Synced styles when viewing code file content (removed some bottom elements, optimized scrolling experience) | ||||||
|  | - Adjusted spacing, styles, and font sizes of page elements overall | ||||||
|  | - Synced dashboard styles under top issues/pull requests/milestones | ||||||
|  | - Synced styles of milestones/pinned Issues | ||||||
|  | - Synced page styles of notifications/subscriptions/follows/packages/tooltips/user avatar menus | ||||||
|  | - Synced branch menu width | ||||||
|  | - Synced star color for starred repositories | ||||||
|  |  | ||||||
| ### 🐞 Fix | ### 🐞 Fix | ||||||
|  |  | ||||||
| - Fixed code highlight colors for red-green color blindness theme | - Fixed code highlight colors for red-green color blindness theme | ||||||
| - Fixed button underline length for Chinese README in repositories | - Fixed button underline length for Chinese README in repositories | ||||||
|  | - Fixed content position on login two-factor authentication page | ||||||
|  | - Fixed style of operation and maintenance management panel in admin backend | ||||||
|  | - Reverted editor font size changes to avoid cursor misalignment | ||||||
|  | - Fixed rounded corners of last row in commit list | ||||||
|  | - Fixed rounded corners issue in Wiki pages and team menus under secondary navigation bar organization | ||||||
|  | - Fixed style of issue creation page | ||||||
|  | - Fixed issue where archive information box is inserted when issue timeline is too long in archived repositories | ||||||
|  | - Fixed avatar and button icon colors in PR merge operation comments under light theme | ||||||
|   | |||||||
							
								
								
									
										25
									
								
								README.md
									
									
									
									
									
								
							
							
						
						| @@ -30,6 +30,11 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版 | |||||||
| > | > | ||||||
| > 自动颜色主题需要亮色和暗色的主题文件 | > 自动颜色主题需要亮色和暗色的主题文件 | ||||||
|  |  | ||||||
|  | > [!TIP] | ||||||
|  | > | ||||||
|  | > 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳 | ||||||
|  | > [github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons) | ||||||
|  |  | ||||||
| 例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾 | 例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾 | ||||||
|  |  | ||||||
| `gitea/conf/app.ini` 例: | `gitea/conf/app.ini` 例: | ||||||
| @@ -44,13 +49,15 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | |||||||
|  |  | ||||||
| ## 截图 | ## 截图 | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| ### 基本主题 | ### 基本主题 | ||||||
|  |  | ||||||
| ```ini | ```ini | ||||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| <details open> | <details> | ||||||
| <summary>Base</summary> | <summary>Base</summary> | ||||||
| <h4>theme-github-light.css</h4> | <h4>theme-github-light.css</h4> | ||||||
| <img src="screenshots/light.png"/> | <img src="screenshots/light.png"/> | ||||||
| @@ -75,6 +82,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | |||||||
| <img src="screenshots/colorblind-dark.png"/> | <img src="screenshots/colorblind-dark.png"/> | ||||||
| </details> | </details> | ||||||
|  |  | ||||||
|  | ### 粉色主题 | ||||||
|  |  | ||||||
|  | ```ini | ||||||
|  | THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark | ||||||
|  | ``` | ||||||
|  |  | ||||||
|  | <details> | ||||||
|  | <summary>Pink</summary> | ||||||
|  | <h4>theme-github-pink-light.css</h4> | ||||||
|  | <img src="screenshots/pink/pink-light.png"/> | ||||||
|  | <h4>theme-github-pink-dark.css</h4> | ||||||
|  | <img src="screenshots/pink/pink-dark.png"/> | ||||||
|  | <h4>theme-github-pink-soft-dark.css</h4> | ||||||
|  | <img src="screenshots/pink/pink-soft-dark.png"/> | ||||||
|  | </details> | ||||||
|  |  | ||||||
| ## 自定义 CSS 变量 | ## 自定义 CSS 变量 | ||||||
|  |  | ||||||
| 可以根据自己的偏好自定义主题的一部分样式 | 可以根据自己的偏好自定义主题的一部分样式 | ||||||
|   | |||||||
							
								
								
									
										27
									
								
								README_EN.md
									
									
									
									
									
								
							
							
						
						| @@ -31,7 +31,12 @@ accepted. | |||||||
|  |  | ||||||
| > [!IMPORTANT] | > [!IMPORTANT] | ||||||
| > | > | ||||||
| > Automatic color theme requires both light and dark theme files | > Automatic color theme requires both light and dark theme files. | ||||||
|  |  | ||||||
|  | > [!TIP] | ||||||
|  | > | ||||||
|  | > Recommend using Catppuccin file icon browser plugin together for better performance. | ||||||
|  | > [github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons) | ||||||
|  |  | ||||||
| Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` | Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` | ||||||
|  |  | ||||||
| @@ -47,13 +52,15 @@ For details, please refer to the Gitea documentation | |||||||
|  |  | ||||||
| ## Screenshots | ## Screenshots | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| ### Basic Themes | ### Basic Themes | ||||||
|  |  | ||||||
| ```ini | ```ini | ||||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| <details open> | <details> | ||||||
| <summary>Base</summary> | <summary>Base</summary> | ||||||
| <h4>theme-github-light.css</h4> | <h4>theme-github-light.css</h4> | ||||||
| <img src="screenshots/en/light.png"/> | <img src="screenshots/en/light.png"/> | ||||||
| @@ -78,6 +85,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | |||||||
| <img src="screenshots/en/colorblind-dark.png"/> | <img src="screenshots/en/colorblind-dark.png"/> | ||||||
| </details> | </details> | ||||||
|  |  | ||||||
|  | ### Pink Themes | ||||||
|  |  | ||||||
|  | ```ini | ||||||
|  | THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark | ||||||
|  | ``` | ||||||
|  |  | ||||||
|  | <details> | ||||||
|  | <summary>Pink</summary> | ||||||
|  | <h4>theme-github-pink-light.css</h4> | ||||||
|  | <img src="screenshots/pink/en/pink-light-en.png"/> | ||||||
|  | <h4>theme-github-pink-dark.css</h4> | ||||||
|  | <img src="screenshots/pink/en/pink-dark-en.png"/> | ||||||
|  | <h4>theme-github-pink-soft-dark.css</h4> | ||||||
|  | <img src="screenshots/pink/en/pink-soft-dark-en.png"/> | ||||||
|  | </details> | ||||||
|  |  | ||||||
| ## Custom CSS Variables | ## Custom CSS Variables | ||||||
|  |  | ||||||
| You can customize parts of the theme style according to your preferences | You can customize parts of the theme style according to your preferences | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								screenshots/dashboard.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 269 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/dashboard-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 295 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-dark-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 191 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-light-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 193 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-soft-dark-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 190 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 210 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-light.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 191 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-soft-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 210 KiB | 
| @@ -1,3 +1,5 @@ | |||||||
|  | import { saturate } from "polished"; | ||||||
|  | import { scaleColorLight } from "src/functions"; | ||||||
| import { type GithubColor } from "./github"; | import { type GithubColor } from "./github"; | ||||||
|  |  | ||||||
| export type DisplayColor = { | export type DisplayColor = { | ||||||
| @@ -20,6 +22,10 @@ export function display2GithubColor( | |||||||
| ): GithubColor { | ): GithubColor { | ||||||
|   return { |   return { | ||||||
|     ...baseGithubColor, |     ...baseGithubColor, | ||||||
|  |     diffBlob: { | ||||||
|  |       ...baseGithubColor.diffBlob, | ||||||
|  |       hunkNum: { bgColor: { rest: soft ? displayColor.num2 : displayColor.num1 } }, | ||||||
|  |     }, | ||||||
|     fgColor: { |     fgColor: { | ||||||
|       ...baseGithubColor.fgColor, |       ...baseGithubColor.fgColor, | ||||||
|       accent: soft ? displayColor.num7 : displayColor.num6, |       accent: soft ? displayColor.num7 : displayColor.num6, | ||||||
| @@ -27,7 +33,7 @@ export function display2GithubColor( | |||||||
|     bgColor: { |     bgColor: { | ||||||
|       ...baseGithubColor.bgColor, |       ...baseGithubColor.bgColor, | ||||||
|       accent: { |       accent: { | ||||||
|         emphasis: displayColor.num5, |         emphasis: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5, | ||||||
|         muted: soft ? displayColor.num1 : displayColor.num0, |         muted: soft ? displayColor.num1 : displayColor.num0, | ||||||
|       }, |       }, | ||||||
|     }, |     }, | ||||||
| @@ -43,21 +49,23 @@ export function display2GithubColor( | |||||||
|         ...baseGithubColor.button.primary, |         ...baseGithubColor.button.primary, | ||||||
|         fgColor: { |         fgColor: { | ||||||
|           ...baseGithubColor.button.primary.fgColor, |           ...baseGithubColor.button.primary.fgColor, | ||||||
|           accent: soft ? displayColor.num6 : displayColor.num5, |           accent: soft ? displayColor.num7 : displayColor.num6, | ||||||
|         }, |         }, | ||||||
|         bgColor: { |         bgColor: { | ||||||
|           ...baseGithubColor.button.primary.bgColor, |           ...baseGithubColor.button.primary.bgColor, | ||||||
|           rest: displayColor.num5, |           rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5, | ||||||
|           hover: displayColor.num4, |           hover: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -7)) : scaleColorLight(displayColor.num5, 5), | ||||||
|         }, |         }, | ||||||
|       }, |       }, | ||||||
|       star: { |       star: { | ||||||
|         iconColor: soft ? displayColor.num6 : displayColor.num5, |         iconColor: soft | ||||||
|  |           ? scaleColorLight(displayColor.num6, -2) | ||||||
|  |           : saturate(0.1, scaleColorLight(displayColor.num6, -2)), | ||||||
|       }, |       }, | ||||||
|     }, |     }, | ||||||
|     underlineNav: { |     underlineNav: { | ||||||
|       borderColor: { |       borderColor: { | ||||||
|         active: soft ? displayColor.num6 : displayColor.num5, |         active: soft ? scaleColorLight(saturate(0.1, displayColor.num6), -5) : saturate(0.2, displayColor.num6), | ||||||
|       }, |       }, | ||||||
|     }, |     }, | ||||||
|     contribution: { |     contribution: { | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, themeVars, type Chroma } from "src"; | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, themeVars, type Chroma } from "src"; | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, themeVars } from "src"; | import { defineTheme, themeVars } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, themeVars } from "src"; | import { defineTheme, themeVars } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme } from "src"; | import { defineTheme } from "src"; | ||||||
| import { display2GithubColor, type DisplayColor } from "src/core/display"; | import { display2GithubColor, type DisplayColor } from "src/core/display"; | ||||||
| import { github2ThemeColor } from "src/core/github"; | import { github2ThemeColor } from "src/core/github"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme } from "src"; | import { defineTheme } from "src"; | ||||||
| import { display2GithubColor, type DisplayColor } from "src/core/display"; | import { display2GithubColor, type DisplayColor } from "src/core/display"; | ||||||
| import { github2ThemeColor } from "src/core/github"; | import { github2ThemeColor } from "src/core/github"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme } from "src"; | import { defineTheme } from "src"; | ||||||
| import { display2GithubColor } from "src/core/display"; | import { display2GithubColor } from "src/core/display"; | ||||||
| import { github2ThemeColor } from "src/core/github"; | import { github2ThemeColor } from "src/core/github"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, themeVars, type Chroma } from "src"; | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, type Chroma } from "src"; | import { defineTheme, type Chroma } from "src"; | ||||||
| import { darkPrettylights } from "src/core/chroma"; | import { darkPrettylights } from "src/core/chroma"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|   | |||||||
| @@ -1,3 +1,7 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
| import { defineTheme, type Chroma } from "src"; | import { defineTheme, type Chroma } from "src"; | ||||||
| import { lightPrettylights } from "src/core/chroma"; | import { lightPrettylights } from "src/core/chroma"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|   | |||||||