Skip to content

Instantly share code, notes, and snippets.

@soc
Last active April 27, 2020 17:50
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soc/ae542ec0c664e2072361730bc197c9d9 to your computer and use it in GitHub Desktop.
Save soc/ae542ec0c664e2072361730bc197c9d9 to your computer and use it in GitHub Desktop.
Vivaldi Browser Stylesheet
/* vertical tabs use full height */
:root {
--tab-width: 200px;
--statusbar-height: 0px;
--toolbar-height: 30px;
--neg-toolbar-height: -30px;
}
.native.tabs-left#browser :-webkit-any(.topmenu, .toolbar.toolbar-addressbar) {
left: var(--tab-width);
padding-right: calc(var(--tab-width) + 30px);
padding-left: 0;
}
.native.tabs-right#browser :-webkit-any(.topmenu, .toolbar.toolbar-addressbar) {
padding-right: var(--tab-width);
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser #tabs-container {
height: calc(100vh - var(--statusbar-height)) !important;
z-index: 1 !important;
border-top: 1px #2F343F solid;
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .inner {
top: var(--neg-toolbar-height) !important;
overflow: visible !important;
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser #webview-container {
top: var(--toolbar-height) !important;
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .toolbar.toolbar-addressbar {
z-index: 1 !important;
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .toolbar,
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .button-toolbar {
height: 30px !important;
}
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .toolbar .addressfield,
:-webkit-any(.native.tabs-left, .native.tabs-right)#browser .toolbar .searchfield {
margin-top: 1px !important;
margin-left: 3px !important;
margin-right: 0 !important;
}
/* Remove header */
:-webkit-any(.native, .maximized)#browser #header {
min-height: 0 !important;
}
/* Keep Vivaldi button */
:-webkit-any(.native, .maximized)#browser .vivaldi {
z-index: 2;
top: 0 !important;
left: auto !important;
right: 0;
width: 34px;
}
/* Keep horizontal menu */
:-webkit-any(.native, .maximized)#browser .topmenu {
position: absolute;
}
/* grey Vivaldi button */
#browser #header .application-icon {
filter: grayscale(100%);
}
/* hide unnecessary buttons */
.button-toolbar.back,
.button-toolbar.forward,
.button-toolbar.reload,
.button-toolbar.home {
display: none !important;
}
#tabs-container.left button.newtab,
#tabs-container.right button.newtab,
#tabs-container.left .trash,
#tabs-container.right .trash,
#tabs-container.left button.toggle-trash,
#tabs-container.right button.toggle-trash {
left: 0 !important;
width: 100% !important;
padding: 0 !important;
}
#tabs-container.left button.newtab svg,
#tabs-container.right button.newtab svg,
#tabs-container.left button.toggle-trash svg,
#tabs-container.right button.toggle-trash svg {
margin-left: auto !important;
margin-right: auto !important;
}
.tab-position .tab .tab-header {
flex-basis: 29px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-size: 12.5px !important;
}
.tab-position .tab.active {
background-color: var(--colorHighlightBg) !important;
}
#browser.linux,
#browser.linux + div,
#browser.linux + div + div,
#browser.linux button,
#browser.linux input,
#browser.linux select,
#browser.linux textarea {
font-family: "SF Compact Display", sans-serif !important;
}
Copy link

ghost commented Aug 12, 2018

Sorry to be thick, but please can you say what this does, and show a screenshot. Where should this be installed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment