update css

README.md

@@ -1,16 +1,23 @@
 ## [VivalArc](https://vivalarc.tovi.fun)
-这个项目主要包含一个 CSS 文件和一个 Vivaldi 主题。通过几步简单的设置，可以将 Vivaldi 魔改成 Arc。
+这个项目主要包含一套 CSS 文件和一个 Vivaldi 主题。通过几步简单的设置，可以将 Vivaldi 魔改成 Arc。
 
-![截屏预览](assets/vivalarc_screenshot.jpg)
+[📺设置方式-视频版](https://www.bilibili.com/video/BV1fe4y1a7WQ) | [📝设置方式-文字版](configure-vivaldi-cn.md) | [📝EN](configure-vivaldi.md) | [🧑‍💻更新日志](changelog-cn.md)
 
+![截屏预览](assets/vivalarc_screenshot.jpg)
 
-### 2022.10.01 更新
-style.css 文件里增加了另外两个样式表，默认是注释掉的。可以根据自己的需要进行选用。
-- 如果你习惯开启面板，则取消注释 panel_mode.sss 
-- 如果你想显示新建标签按钮，则取消注释 new_tab.css
+## 2023.03.27 更新
 
+距离第一次发布这个Vivaldi配置已经过了半年多，这次更新修复了几个大家提到比较多的问题，包括：
+- 全屏时隐藏四周的边框；
+- 显示了标题栏，左上角的三个按钮常驻了（这个最多人反馈说找不到；
+- 去除了Tab bar的拖拽（之前开启拖拽导致了很多意想不到的bug；
+- 简化了样式表
+    - 之前的CSS样式为了尽可能接进Arc的外观而自订了太多，这样导致Vivaldi更新时，会有些样式失效。所以这次定了一个原则，不一昧追求样式完美，而是尽可能使用用少的CSS ；
+- 这次将样式表有两个供大家选用：
+    - main_arc.css, 这个在 minimal 的基础上增加了一些样式，往 Arc 的外观上靠，是默认的；
+    - main_minimal.css，样式表比较少，但只打开这个已经有比较好的效果了，如果不想改动太多，可以选择使用这个；
 
-## 为什么做这个
+## 2022.08.28 起因：为什么做这个
 
 大概说一下背景，我主力使用 Vivaldi 浏览器应该有一年，前段时间体验了还在内测中的 Arc 浏览器，差不多两个星期。这两个星期的 Arc 使用体验确实挺好的，交互很符合直觉，UI也非常的好看。
 
@@ -19,5 +26,3 @@ style.css 文件里增加了另外两个样式表，默认是注释掉的。可
 后来了解到 Vivaldi 居然还可以使用 CSS 自定义 UI ，于是尝试了一下，最后就有了这个网页所介绍的配置。
 
 虽然最后的效果比不上 Arc 的 UI 和细节，但是这套配置体验下来，我觉得能够大致还原 Arc 的使用体验。所以想将这套配置分享给大家，如果你还在等待 Arc 的测试，或者因为 Arc 过于占内存，想试试别的选择，那么可以尝试使用一下我的这个配置。
-
-[📺设置方式-视频版](https://www.bilibili.com/video/BV1fe4y1a7WQ/?vd_source=103a1da26948412544dd2b203b193997) | [📝设置方式-文字版](doc_将Vivaldi配置成Arc.md) | [📝EN](doc_configure-vivaldi.md)

css/main_arc.css

@@ -0,0 +1,160 @@
+
+/* transparent header*/
+#browser:not(.address-top) > #header,
+.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header
+{
+    box-shadow:none;
+    background:transparent;
+}
+
+/*tabbar left & tabbar right*/
+
+.transparent-tabbar.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
+.transparent-tabbar.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{
+    background:transparent;
+}
+
+#browser.transparent-tabbar #tabs-tabbar-container.left, 
+#browser.transparent-tabbar #tabs-tabbar-container.right{
+    background: transparent;
+    border: none;
+    box-shadow:none;
+}
+
+#browser.transparent-tabbar #tabs-tabbar-container.left  ::-webkit-scrollbar, 
+#browser.transparent-tabbar #tabs-tabbar-container.right  ::-webkit-scrollbar
+{
+    display: none;
+}
+
+
+/*panel*/
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels #switch{
+    padding-top: 0;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels{
+    background: transparent;  
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right:not(.icons) .panel-group, 
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right.icons:not(:has(.SlideBar))
+{
+    border-left:0;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left:not(.icons) .panel-group, 
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left.icons:not(:has(.SlideBar))
+{
+    border-right:0;
+}
+
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right.icons:not(:has(.SlideBar)),
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left.icons:not(:has(.SlideBar))
+{
+    background: transparent;
+}
+
+.icons #switch .addwebpanel-wrapper > button, 
+.icons #switch > .button-toolbar, 
+.icons #switch > * > .button-toolbar, 
+.icons #switch > button{
+    border-radius:var(--radiusCap);
+}
+
+/*rounded webview*/
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack{
+    border-radius:var(--radiusCap);
+    box-shadow: 0px 0px 6px #00000015;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .webpageview > .row-wrapper{
+    border-radius:var(--radiusCap); 
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-dark .webpageview > .row-wrapper{
+    border: 1px solid #ffffff17;
+}
+
+
+/*tile*/
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-tile{
+    border:2px solid var(--colorBg);
+    border-radius:10px;
+    margin:2px;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webview-container:has(#webpage-stack .mosaic.visible){
+    box-shadow: none;
+    padding:0px;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line,
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line:before, .mosaic-split .mosaic-split-line:after{
+    background:transparent;
+} 
+
+
+/* narrow title bar, can be deleted
+***********************************
+***********************************
+*/
+#browser.mac:not(.address-top) > #header,
+#browser.mac.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header
+{
+    min-height:calc(20px / var(--uiZoomLevel)) !important;
+    z-index:0;
+
+}
+
+#browser.win.win10 #titlebar #pagetitle{
+    padding-left:30px;
+}
+
+#browser.win.win10:not(.tabs-top) .vivaldi{
+    width:30px;
+}
+
+#browser.mac:not(.tabs-top):not(.tabs-bottom) #titlebar.tabless .window-buttongroup{
+    margin-top: calc(6px / var(--uiZoomLevel));
+    margin-left: calc(8px / var(--uiZoomLevel));
+}
+
+#browser.mac:not(.tabs-top):not(.tabs-bottom) .window-buttongroup button{
+    width:10px;
+    height:10px;
+    flex:0 0 10px;
+}
+
+#browser.mac:not(.tabs-top):not(.tabs-bottom) #titlebar #pagetitle {
+    font-size: 12px;
+    font-weight: bold;
+    height: calc(20px / var(--uiZoomLevel));
+}
+
+/*webview-container*/
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-left #main.right #panels-container.minimized ~ #webview-container{
+    margin-right:0px;
+}
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-right #main.left #panels-container.minimized ~ #webview-container{
+    margin-left:0px;
+}
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.left #panels-container.minimized ~ #webview-container{
+    margin-left:0px;
+}
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.right #panels-container.minimized ~ #webview-container{
+    margin-right:0px;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #webview-container{
+    margin:0px 8px 8px 8px;
+}
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-left #webview-container{
+    margin:0px 8px 8px 0px;
+}
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-right #webview-container{
+    margin:0px 0 8px 8px;
+}

css/main_minimal.css

@@ -0,0 +1,97 @@
+
+/* transparent header*/
+#browser:not(.address-top) > #header,
+.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header
+{
+    box-shadow:none;
+    background:transparent;
+}
+
+/*tabbar left & tabbar right*/
+
+.transparent-tabbar.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
+.transparent-tabbar.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{
+    background:transparent;
+}
+
+#browser.transparent-tabbar #tabs-tabbar-container.left, 
+#browser.transparent-tabbar #tabs-tabbar-container.right{
+    background: transparent;
+    border: none;
+    box-shadow:none;
+}
+
+#browser.transparent-tabbar #tabs-tabbar-container.left  ::-webkit-scrollbar, 
+#browser.transparent-tabbar #tabs-tabbar-container.right  ::-webkit-scrollbar
+{
+    display: none;
+}
+
+
+/*panel*/
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels #switch{
+    padding-top: 0;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels{
+    background: transparent;  
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right:not(.icons) .panel-group, 
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right.icons:not(:has(.SlideBar))
+{
+    border-left:0;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left:not(.icons) .panel-group, 
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left.icons:not(:has(.SlideBar))
+{
+    border-right:0;
+}
+
+
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.right.icons:not(:has(.SlideBar)),
+#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.left.icons:not(:has(.SlideBar))
+{
+    background: transparent;
+}
+
+.icons #switch .addwebpanel-wrapper > button, 
+.icons #switch > .button-toolbar, 
+.icons #switch > * > .button-toolbar, 
+.icons #switch > button{
+    border-radius:var(--radiusCap);
+}
+
+/*rounded webview*/
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack{
+    border-radius:var(--radiusCap);
+    box-shadow: 0px 0px 6px #00000015;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .webpageview > .row-wrapper{
+    border-radius:var(--radiusCap); 
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-dark .webpageview > .row-wrapper{
+    border: 1px solid #ffffff17;
+}
+
+
+/*tile*/
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-tile{
+    border:2px solid var(--colorBg);
+    border-radius:10px;
+    margin:2px;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webview-container:has(#webpage-stack .mosaic.visible){
+    box-shadow: none;
+    padding:0px;
+}
+
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line,
+#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line:before, .mosaic-split .mosaic-split-line:after{
+    background:transparent;
+}