add vivaldi custom CSS

2024-11-08 18:54:16 +01:00
parent c8163e23b4
commit 5eedb55cbb
4 changed files with 105 additions and 0 deletions
--- a/.config/vivaldi/customCSS/frame.css.bak
+++ b/.config/vivaldi/customCSS/frame.css.bak
@@ -0,0 +1,85 @@
+/** 
+* Edge like border radius
+* Forum link: https://forum.vivaldi.net/topic/83618/edge-like-curved-frame-around-website
+*/
+
+#browser {
+    --edge-like-border-radius: var(--radius); /* 0.5rem */
+}
+
+#webpage-stack {
+    box-shadow: 0 0 0 var(--edge-like-border-radius) var(--colorAccentBg);
+
+    margin-bottom: calc(var(--edge-like-border-radius) / 2);
+    margin-right: calc(var(--edge-like-border-radius) / 2);
+}
+
+#browser.fullscreen #webpage-stack {
+     margin-left: calc(var(--edge-like-border-radius) / 2);
+}
+
+#webpage-stack::before {
+    content: '';
+    position: absolute;
+    width: 100%;    
+    height: 100%;   
+    border-radius: var(--edge-like-border-radius);
+    /* border-top-left-radius: var(--edge-like-border-radius);
+    border-bottom-left-radius: var(--edge-like-border-radius);
+    border-top-right-radius: var(--edge-like-border-radius);
+    border-bottom-right-radius: var(--edge-like-border-radius); */
+    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
+    z-index: 1;
+    pointer-events: none;
+}
+
+#browser:not(.fullscreen) #panels-container:not(.icons):not(.overlay) {
+    margin-right: calc(var(--edge-like-border-radius) / 4);
+    padding-right: calc(var(--edge-like-border-radius) / 4);
+}
+
+#panels-container:not(.icons):not(.overlay) .panel-group  {
+    border-top-right-radius: var(--edge-like-border-radius);
+    border-bottom-right-radius: var(--edge-like-border-radius);
+    border-right: none;
+}
+
+#panels-container > button.SlideBar {
+    background: var(--colorAccentBg);
+}
+
+.panel-group {
+    transition: border-right 2s ease, width var(--duration) ease-out !important;
+}
+
+.panel-group::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;   
+    border-top-left-radius: var(--edge-like-border-radius);
+    border-bottom-left-radius: var(--edge-like-border-radius);
+    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
+    z-index: 1;
+    pointer-events: none;
+}
+
+#panels-container:not(.icons):not(.overlay) .panel-group::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;   
+    border-radius: var(--edge-like-border-radius);
+    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.StatusInfo {
+    margin-bottom: calc(var(--edge-like-border-radius) / 2);
+    margin-left: calc(var(--edge-like-border-radius) / 2);
+}
+
+.panel-group {
+    margin-bottom: calc(var(--edge-like-border-radius) / 2);
+}