Fixed the divider line below the workspace and added a file recommend…

…ing Vivaldi themes

README-cn.md

@@ -7,11 +7,12 @@
   - [📺5分钟将 Vivaldi 配置成 Arc](https://www.bilibili.com/video/BV1fe4y1a7WQ)
 - 更多相关链接
   - [🎉更新日志](https://github.com/tovifun/VivalArc/blob/main/docs/changelog-cn.md)
+  - [🎨推荐主题](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes-cn.md)
   - [🧑‍💻常见问题](https://github.com/tovifun/VivalArc/blob/main/docs/faq-cn.md)
   - [🌐VivalArc 官网](https://arc.tovi.fun)
   - [📝VivalArc README English version](https://github.com/tovifun/VivalArc/blob/main/README.md) 
 
-![截屏预览](./assets/vivalarc_screenshot.jpeg)
+ ![Screenshot](./screenshots/vivalarc_1.0.0_mac.jpeg)
 
 ---
 

README.md

@@ -1,11 +1,12 @@
 This project mainly includes a set of CSS files and a Vivaldi theme. With a few simple steps of configuration, you can modify Vivaldi into Arc style. Compatible with macOS, Windows, and Linux.
 - [📝VivalArc, Configuration Steps](https://github.com/tovifun/VivalArc/blob/main/docs/configure-vivaldi.md)
 - [🎉Change Log](https://github.com/tovifun/VivalArc/blob/main/docs/changelog.md)
+- [🎨Curated Themes](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes.md)
 - [🧑‍💻FAQ](https://github.com/tovifun/VivalArc/blob/main/docs/faq.md)
 - [🌐VivalArc Website](https://arc.tovi.fun)
 - [📝VivalArc 中文介绍和配置方式](https://github.com/tovifun/VivalArc/blob/main/README-cn.md) 
 
- ![Screenshot](./assets/vivalarc_screenshot.jpeg)
+ ![Screenshot](./screenshots/vivalarc_1.0.0_mac.jpeg)
 
 ---
 

docs/changelog-cn.md

@@ -1,4 +1,11 @@
-## 🗓️ 2024.05.12
+## 🗓️ 2024.06.29 | v1.0.3
+1. 这个版本主要优化 Vivaldi 6.8 更新之后的一个小问题——“[Issue#20左侧标签栏后，工作区下的分割线与第一个标签页有重合](https://github.com/tovifun/VivalArc/issues/20)”。（感谢 @NextEcho 细心提供 CSS，虽然最后我采取的方法和他的不完全一致
+2. 在之前的版本里面，我为了模仿 Arc 的样式，做了几个渐变的 Vivaldi 主题放在了项目文件里供大家使用。然后我前几天去逛了一下 Vivald Community 的 Themes 专区，发现上面就有很多合适的主题。我就在想，我何必舍近求远自己自制主题，于是我在 Community 尝试了一些热门主题，并挑选了几个我觉得合适的主题提供大家直接使用。使用的方式很简单：
+   1. 打开[推荐的主题链接](./curated-themes-cn.md)
+   2. 点击主题名字跳转到主题页面
+   3. 点击主题下方的安装按钮
+
+## 🗓️ 2024.05.12 | v1.0.2
 - 这一版本的VivalArc主要针对 于Vivaldi6.7 进行以下两个方面的优化：
   - macOS 左上角的的窗口按钮不能够自定义样式了，于是造成了窗口按钮对 Tabbar 的元素的遮挡
   - 新建标签页的「添加按钮」移动到了窗口的最下方

docs/changelog.md

@@ -1,4 +1,11 @@
-## 🗓️ 2024.05.12
+## 🗓️ 2024.06.29 | v1.0.3
+1. This version mainly addresses a minor issue in Vivaldi 6.8 update—[Issue#20](https://github.com/tovifun/VivalArc/issues/20). (Special thanks to @NextEcho for providing CSS solutions, although I did not entirely adopt their method in the end).
+2. In previous versions, I created a few gradient Vivaldi themes to mimic the Arc style and included them in the project files for everyone to use. A few days ago, I explored the Themes section on the Vivaldi Community and discovered many suitable themes. I realized there was no need to go out of my way to create new themes, so I tried some of the popular themes in the Community and selected a few that I found fitting. Here’s how you can use them:
+	1.	Open the [recommended theme link](./curated-themes.md).
+	2.	Click on the theme name to go to its page.
+	3.	Click the install button below the theme.
+
+## 🗓️ 2024.05.12 | v1.0.2
 - The latest version of VivalArc primarily focuses on optimizing two aspects of Vivaldi 6.7：
   - The window buttons in the top-left corner of macOS can no longer be customized, causing them to overlapping the elements of the TabBar
   - The 'Add Button' for creating new tabs has been relocated to the bottom of the window

docs/configure-vivaldi-cn.md

@@ -23,7 +23,7 @@
 
 **必要的设置：**
 - **标签** > **标签栏位置** > 选择`左侧`
-- **地址栏** > 去掉`显示地址栏`
+- **地址栏** > 去掉`显示地址栏`(当然也可以打开，不过我觉得关掉比较简洁。可以为地址栏设置一个显示和打开的快捷键，如下：)
 - **键盘**(设置必要的快捷键)
     - **地址栏** > 设置为 `Command + B`（因为地址栏太抢眼了，可以默认隐藏，当需要使用地址栏时，使用快捷键打开。Windows下需先移除「书签」的快捷键）
 - **Windows用户额外的滚动条配置**：因为 Windows 和 Linux 默认的滚动条非常明显，有点丑陋，我们需要一个额外的修改来优化这个滚动条，设置方式如下：
@@ -49,10 +49,10 @@
 
 ### 第三步：自定义 UI MOD
 
-- [下载这个文件](https://github.com/tovifun/VivalArc/archive/refs/heads/main.zip)，解压保存在一个你不会删除的地方
-- 主题 > 打开主题 >  选择 ArcLight.zip 主题
-- 打开 `vivaldi://experiments` 并开启  `"Allow for using CSS modifications"`
-- 打开设置 > 外观 > `自定义UI MOD`
-- 选择文件夹 > 选择刚才解压的文件夹
-- 重启 Vivaldi，这时你应该可以看到你的浏览器效果跟我上方的图片效果一样了
-- 换一张你喜欢的壁纸，你刚解压的文件夹里我放了几张进去，可以换上看看
+1. [**下载这个文件**](https://github.com/tovifun/VivalArc/archive/refs/heads/main.zip)，解压保存在一个你不会删除的地方
+2. **设置主题**：可使用我放在本地的主题，如theme-ArcLight.zip（或者直接打开[我在 Vivaldi Community 上挑选的几个主题](./curated-themes-cn.md)
+3. 在 Vivaldi 地址栏：打开 `vivaldi://experiments` 并开启  `"Allow for using CSS modifications"`
+4. 打开 Vivaldi 设置 > 外观 > `自定义UI MOD`
+5. 选择文件夹 > 选择刚才解压的文件夹
+6. 重启 Vivaldi，这时你应该可以看到你的浏览器效果跟我上方的图片效果一样了
+7. 换一张你喜欢的壁纸，你刚解压的文件夹里我放了几张进去，可以换上看看

docs/configure-vivaldi.md

@@ -39,7 +39,8 @@
 
 ### 3. Custom UI Mod
 - [Download the mod](https://github.com/tovifun/VivalArc/archive/refs/heads/main.zip), extract it to anywhere safe on your PC
-- **Themes > Open Theme** >  ArcLight.zip
+- **Themes > Open Theme** >  theme-ArcLight.zip
+  - Or select a [theme I pick from Vivaldi Community](./curated-themes.md)
 - Open `vivaldi://experiments` and enable `"Allow for using CSS modifications"`
 - Open Settings > Appearance > Custom UI MOD
 - Select the folder where you've extracted it

docs/curated-themes-cn.md

@@ -0,0 +1,34 @@
+# 推荐的浏览器主题
+
+在之前的版本里面，我为了模仿 Arc 的样式，做了几个渐变的 Vivaldi 主题放在了项目文件里供大家使用。然后我前几天去逛了一下 Vivald Community 的 Themes 专区，发现上面就有很多合适的主题。我就在想，我何必舍近求远自己自制主题，于是我在 Community 尝试了一些热门主题，并挑选了几个我觉得合适的主题提供大家直接使用。使用的方式很简单：
+1. 点击主题名字跳转到主题页面
+2. 点击主题下方的安装按钮å
+
+## 来自社区-浅色
+
+| 名字及链接       | 缩略图                              | 
+| ---------- | ----------------------------------- | 
+| [Crystal space](https://themes.vivaldi.net/themes/og57a39DvQE)  | ![theme](../themes/theme_screenshots/crystal_space.jpg) | 
+| [A winter fairy tale](https://themes.vivaldi.net/themes/eZXvowXvOWN)  | ![theme](../themes/theme_screenshots/winter_fairy_tale.jpg) | 
+
+## 来自社区-深色
+
+| 名字及链接       | 缩略图                              | 
+| ---------- | ----------------------------------- | 
+| [Sweet dew](https://themes.vivaldi.net/themes/PBylqeb8lr5)  | ![theme](../themes/theme_screenshots/sweet_dew.jpg) | 
+| [Sunflower](https://themes.vivaldi.net/themes/je3lRL3dJVG)  | ![theme](../themes/theme_screenshots/sunflower.jpg) | 
+| [Purple Magic](https://themes.vivaldi.net/themes/n3MlkpoovEZ)  | ![theme](../themes/theme_screenshots/purple_magic.jpg) | 
+| [Montanhas](https://themes.vivaldi.net/themes/MD07Kq4gv14)  | ![theme](../themes/theme_screenshots/montanhas.jpg) | 
+| [Vivaldi Midnight](https://themes.vivaldi.net/themes/rwjvExj2lAL)  | ![theme](../themes/theme_screenshots/vivaldi_midnight.jpg) | 
+| [Sunset into the midnight](https://themes.vivaldi.net/themes/gZplByVe7QV)  | ![theme](../themes/theme_screenshots/sunset_into_the_midnight.jpg) | 
+
+
+## 几个原本放在项目里的主题我也传到了 Vivaldi 主题社区
+
+| 名字       | 缩略图                              | 
+| ---------- | ----------------------------------- | 
+| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
+| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
+| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
+| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
+| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 

docs/curated-themes.md

@@ -0,0 +1,33 @@
+# Recommended Themes
+In previous versions, I created a few gradient Vivaldi themes to mimic the Arc style and included them in the project files for everyone to use. A few days ago, I explored the Themes section on the Vivaldi Community and discovered many suitable themes. I realized there was no need to go out of my way to create new themes, so I tried some of the popular themes in the Community and selected a few that I found fitting. Here’s how you can use them:
+1.	Click on the theme name to go to its page.
+2.	Click the install button below the theme.
+
+## Light Themes from the Vivaldi Community
+
+| theme's name & link       | preview                              | 
+| ---------- | ----------------------------------- | 
+| [Crystal space](https://themes.vivaldi.net/themes/og57a39DvQE)  | ![theme](../themes/theme_screenshots/crystal_space.jpg) | 
+| [A winter fairy tale](https://themes.vivaldi.net/themes/eZXvowXvOWN)  | ![theme](../themes/theme_screenshots/winter_fairy_tale.jpg) | 
+
+## Dark Themes from the Vivaldi Community
+
+| theme's name & link       | preview                              | 
+| ---------- | ----------------------------------- | 
+| [Sweet dew](https://themes.vivaldi.net/themes/PBylqeb8lr5)  | ![theme](../themes/theme_screenshots/sweet_dew.jpg) | 
+| [Sunflower](https://themes.vivaldi.net/themes/je3lRL3dJVG)  | ![theme](../themes/theme_screenshots/sunflower.jpg) | 
+| [Purple Magic](https://themes.vivaldi.net/themes/n3MlkpoovEZ)  | ![theme](../themes/theme_screenshots/purple_magic.jpg) | 
+| [Montanhas](https://themes.vivaldi.net/themes/MD07Kq4gv14)  | ![theme](../themes/theme_screenshots/montanhas.jpg) | 
+| [Vivaldi Midnight](https://themes.vivaldi.net/themes/rwjvExj2lAL)  | ![theme](../themes/theme_screenshots/vivaldi_midnight.jpg) | 
+| [Sunset into the midnight](https://themes.vivaldi.net/themes/gZplByVe7QV)  | ![theme](../themes/theme_screenshots/sunset_into_the_midnight.jpg) | 
+
+
+## Themes in local folder: ../themes/
+
+| name       | preview                           | 
+| ---------- | ----------------------------------- | 
+| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
+| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
+| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
+| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
+| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 

vivalarc-larger-ui/vivalarc.css

@@ -1,14 +1,14 @@
 /* 
-version:1.0.2
-update: 2024.05.12
-vivaldi version: v6.7
+version:1.0.3
+update: 2024.06.29
+vivaldi version: v6.8
 */
 
 :root{
-    --window-border:10px; /* window border, recommend 4px~16px */
-    --mac-header:calc(var(--window-border) + 14px); /* title bar extra height */
-    --win-header:calc(var(--window-border) + 14px); /* title bar extra height */
-    --linux-header:calc(var(--window-border) + 14px); /* title bar extra height */
+    --window-border:6px; /* window border, recommend 4px~16px */
+    --mac-header:calc(var(--window-border) + 18px); /* title bar extra height */
+    --win-header:calc(var(--window-border) + 18px); /* title bar extra height */
+    --linux-header:calc(var(--window-border) + 18px); /* title bar extra height */
     --addressbar-height:36px;
     --window-button-scale:0.8;
     --window-button-opacity:0.3;
@@ -79,6 +79,7 @@ vivaldi version: v6.7
 #browser.linux:not(.is-settingspage):not(.tabs-top) #header,
 #browser.linux.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
     min-height:var(--linux-header) !important;
+    height:var(--linux-header) !important;
     background:var(--colorTabBar);
 }
 
@@ -92,6 +93,7 @@ vivaldi version: v6.7
 #browser.win:not(.is-settingspage):not(.tabs-top) #header,
 #browser.win.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
     min-height:var(--win-header) !important;
+    height:var(--win-header) !important;
     background:var(--colorTabBar);
 }
 
@@ -127,9 +129,9 @@ vivaldi version: v6.7
 #browser.linux:not(.tabs-top) #titlebar .vivaldi,
 #browser.win:not(.is-settingspage):not(.tabs-top) #titlebar .vivaldi{
     color:var(--colorFgAlpha);
-    scale: calc(0.7 / var(--uiZoomLevel));
-    margin-left: -6px;
-    margin-top: -4px;
+    scale: calc(0.8 / var(--uiZoomLevel));
+    margin-left: -2px;
+    margin-top: 0px;
 }
 
 #browser.linux:not(.tabs-top) #titlebar .vivaldi:hover,
@@ -227,6 +229,7 @@ vivaldi version: v6.7
 .color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar,
 .color-behind-tabs-on.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
     border:none;
+    background: transparent;
 }
 
 .color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
@@ -257,7 +260,7 @@ vivaldi version: v6.7
     --LowlightColor: var(--colorFgFadedMore);
 }
 
-#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden{
+#browser:not(.tabs-top):not(.tabs-bottom) .ExtensionIcon--Hidden{
     background-color:transparent;
 }
 
@@ -344,10 +347,10 @@ vivaldi version: v6.7
     margin-left:0px;
 }
 
-.tabbar-workspace-button + #tabs-tabbar-container.left, 
+/* .tabbar-workspace-button + #tabs-tabbar-container.left, 
 .tabbar-workspace-button + #tabs-tabbar-container.right{
     padding-top:4px;
-}
+} */
 
 #browser:not(.theme-dark) #tabs-tabbar-container.left,
 #browser:not(.theme-dark) #tabs-tabbar-container.right{

vivalarc.css

@@ -1,7 +1,7 @@
 /* 
-version:1.0.2
-update: 2024.05.12
-vivaldi version: v6.7
+version:1.0.3
+update: 2024.06.29
+vivaldi version: v6.8
 */
 
 :root{
@@ -79,6 +79,7 @@ vivaldi version: v6.7
 #browser.linux:not(.is-settingspage):not(.tabs-top) #header,
 #browser.linux.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
     min-height:var(--linux-header) !important;
+    height:var(--linux-header) !important;
     background:var(--colorTabBar);
 }
 
@@ -92,6 +93,7 @@ vivaldi version: v6.7
 #browser.win:not(.is-settingspage):not(.tabs-top) #header,
 #browser.win.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
     min-height:var(--win-header) !important;
+    height:var(--win-header) !important;
     background:var(--colorTabBar);
 }
 
@@ -227,6 +229,7 @@ vivaldi version: v6.7
 .color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar,
 .color-behind-tabs-on.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
     border:none;
+    background: transparent;
 }
 
 .color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
@@ -257,7 +260,7 @@ vivaldi version: v6.7
     --LowlightColor: var(--colorFgFadedMore);
 }
 
-#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden{
+#browser:not(.tabs-top):not(.tabs-bottom) .ExtensionIcon--Hidden{
     background-color:transparent;
 }
 
@@ -344,10 +347,10 @@ vivaldi version: v6.7
     margin-left:0px;
 }
 
-.tabbar-workspace-button + #tabs-tabbar-container.left, 
+/* .tabbar-workspace-button + #tabs-tabbar-container.left, 
 .tabbar-workspace-button + #tabs-tabbar-container.right{
     padding-top:4px;
-}
+} */
 
 #browser:not(.theme-dark) #tabs-tabbar-container.left,
 #browser:not(.theme-dark) #tabs-tabbar-container.right{