86 lines
2.4 KiB
CSS
86 lines
2.4 KiB
CSS
/**
|
|
* 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);
|
|
}
|