vivaldi custom CSS

vivaldi.css

/* focus debugging
#browser *:focus {
  background-color:rgba(200,0,0,.2) !important;
  outline: 2px solid rgba(200,0,0,.5) !important;
  visibility: visible !important;
  display: initial !important;
  transform: scale(1), translate3D(0,0,0) !important;
}
*/

/* CUSTOM CSS */

/*@import url('https://fonts.googleapis.com/css?family=Roboto');*/

#panels .webpanel-stack .webpanel .webpanel-header .toolbar { margin-right: 0 !important }

#panels .webpanel-stack .webpanel .webpanel-header .toolbar .button-toolbar {
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,.5);
    margin: 0 .5em 0 0;
}

#panels .webpanel-stack .webpanel .webpanel-header .toolbar .button-toolbar:hover {
    background: rgba(255, 255, 255, .2);
}

#panels .webpanel-stack .webpanel .webpanel-header .toolbar {
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    background: #080808;
    padding: .5em;
    border-radius: 4px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
}

/* DOWNLOAD PROGRESSBAR */
/* **************************************************** */
.panel#downloads li .file progress[value]::-webkit-progress-value {
    background-image:
    -webkit-linear-gradient(-45deg,
         transparent 33%, rgba(0, 0, 0, .1) 33%,
         rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top,
         rgba(255, 255, 255, .25),
         rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #09c, #f44);
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.panel#downloads li .file progress[value] {
    -webkit-appearance: none;
    appearance: none;
}

.panel#downloads li .file progress[value]::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;*/
}
/* *************************************************** */

.private .input-dropdown:hover:not(:disabled) svg,
.private .button-addressfield.bookmark:hover svg .bookmark-outline,
.button-addressfield.reader-mode:hover svg {
    fill: rgba(0, 0, 0, .7) !important;
}

button.button-addressfield:hover { border-color: transparent !important }

button.button-addressfield:not(.private):hover { background-color: unset !important }

button.button-addressfield:not(.private):hover .bookmark.bookmarked svg .bookmark-outline,
.button-addressfield.bookmark:hover svg .bookmark-outline {
    fill: var(--colorFg) !important;
}

#app { counter-reset: i }

.extensions-wrapper button:not(.toggle-extensions-group)::after {
    content: counter(i, hiragana);
    counter-increment: i;
    font-size: 16pt;
    font-weight: 600;
    width: 10px;
    position: absolute;
    height: 30px;
    color: grey;
    z-index: -1;
    display: block;
    transition: all .1s;
}

.extensions-wrapper button:not(.toggle-extensions-group):hover::after { color: #fff }

.toolbar-addressbar .button-toolbar.browserAction-button, .toolbar-mailbar .button-toolbar.browserAction-button { background-color: unset !important }

.toolbar-addressbar .button-toolbar.browserAction-button img, .toolbar-mailbar .button-toolbar.browserAction-button img { display: none !important }

.favicon { background-color: unset !important }

.win #tabs-container.top { padding-left: 0 !important }

.tab-position .tab.active { box-shadow: inset 0 2px #fff }

.win10 .vivaldi,#tabs-container .trash { display:none !important }

.toolbar:not(.icons) button.button-toolbar.home, .toolbar:not(.icons) .button-toolbar:not(.icons).reload { display:none !important }

.button-addressfield.bookmark.bookmarked svg .bookmark-outline { fill:rgba(255,255,255,.6) }

#header #titlebar .window-buttongroup button.window-close:hover { background-color:hsla(0,0%,100%,.1) !important }

#header #titlebar .window-buttongroup button:last-child:hover svg {
  border: 2px solid red !important;
  background: red !important;
}

#browser.win, #browser.win + div, #browser.win + div + div, #browser.win button, #browser.win input, #browser.win select, #browser.win textarea {
  font-weight: 500 !important;
}

#browser.win input {
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: .4px;
}

#header #titlebar .window-buttongroup button svg {
  border-radius: 50%;
  background: none;
  fill: none;
  width: 10px;
  height: 10px;
  border: 2px solid #bbb;
}

#header #titlebar .window-buttongroup button:hover svg {
  border: 2px solid #fff;
  background: #fff;
}

.addressfield form input.url::placeholder { color: transparent !important }

::selection { background: crimson !important }