add vivaldi custom CSS

This commit is contained in:
fbachus
2024-11-08 18:54:16 +01:00
parent c8163e23b4
commit 5eedb55cbb
4 changed files with 105 additions and 0 deletions

View File

@@ -0,0 +1,11 @@
/* Url text on center */
.UrlField {justify-content: center;}
input#urlFieldInput {text-align:center;}
.UrlBar-UrlObfuscationWarning {-webkit-app-region: no-drag !important;}
#browser:has(.switcher):not(.toolbar-edit-mode) .toolbar-mainbar .toolbar-spacer:has(+.button-toolbar button[name="Back"]) {
max-width: 0;
}
#browser.win:not(:has(.switcher)):not(.toolbar-edit-mode) .toolbar-mainbar .toolbar-spacer:has(+.button-toolbar button[name="Back"]) {
min-width: calc(var(--leftbarwidth) - 34px - 34px - 34px - var(--browserborder))
}

View File

@@ -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);
}

View File

@@ -0,0 +1,5 @@
#browser:not(.tabs-top) #header {
color: var(--colorFg);
background-color: var(--colorBg);
display: none;
}

View File

@@ -0,0 +1,4 @@
#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar),
#browser.linux.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
min-height: calc(35px / var(--uiZoomLevel));
}