vivaldi-elementary-theme.css

/* --- VIVALDI ELEMENTARY THEME --- */
/* version 2 by NeoMahler on 2019.XX.XX, based on the original theme by u/enberash */
/* IMPORTANT: - Tabs must be set to Bottom in Vivaldi settings.
              - Color highlighting is not supported. Supporting a dark theme is planned.
              - Make sure that the accent color is set to #d1d1d1 in your preferences.
              - Transparent tabs look better.
*/

#header {
    min-height: 0px !important; /* Hide the titlebar. */
}

/* "Headerbar" gradient */
.linux .window-buttongroup { /* Buttons */
    background-image: linear-gradient(var(--colorAccentBgFadedMore), var(--colorAccentBg)) !important;
    height: 49px !important;
    width: 75px;
    left: 0px;
    top: 0px !important;
    border-top-width: 0px !important;
    border-bottom: 1px solid  var(--colorAccentBorderDark) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;
    z-index: 1;
}

.toolbar-addressbar.toolbar { /* Central part (url field + extensions + back/forward buttons) */
    order: 1;
    -webkit-app-region: drag; /* Can drag the window by dragging the toolbar. */
    padding-top: 7px;
    padding-bottom: 7px;
    margin-right: 35px !important;
    margin-left: 75px !important;
    background: linear-gradient(var(--colorAccentBgFadedMore), var(--colorAccentBg)) !important;
    border-top-width: 0px !important;
    border-bottom: 1px solid  var(--colorAccentBorderDark) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;
    z-index: 2 !important
}
.toolbar-addressbar.toolbar::after {
    display: none; /* Hide line under toolbar. */
}

.addressfield {
    max-width: 750px; /* To leave some room to drag the toolbar. */
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 1; /* So the URL bar will shrink in small windows. */
    background: linear-gradient(to bottom, var(--colorBg), var(--colorBgLighter)) !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0,0,0, 0.25) !important;
    border-radius: 2.5px !important;
    box-shadow:
              inset 0 0 0 1px rgba(0,0,0, 0.06),
              0 1px 0 0 rgba(255,255,255, 0.3) !important;
    z-index: 2 !important;
}

/* Address bar buttons */
button.vivaldi { /* Vivaldi button */
    margin-left: 35px;
    margin-top: 12px;
    z-index: 2; /* Draw on top. */
    border-top-width: 0px !important;
/*    background: linear-gradient(#e6e6e6, #d0d0d0) !important;
    border-top-width: 0px !important;
    border-top-left-radius: 4px !important;
    border-bottom: 1px solid #979797 !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important; */
}

.window-close {
    position: fixed !important;
    left: 10px;
    top: 15px;
    z-index: 2;
}
button.window-maximize {
    position: fixed;
    right: 0px !important;
    top: 0px !important;
    height: 49px !important;
    width: 35px !important  ;
    z-index: 1;
    background: linear-gradient(var(--colorAccentBgFadedMore), var(--colorAccentBg)) !important;
    border-top-width: 0px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--colorAccentBorderDark) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255, 0.2),
        inset 0 -1px 0 0 rgba(255,255,255, 0.2) !important;
}
button.window-minimize {
    display: none;
}

#browser.tabs-off button.window-close {
    display: none !important; /* Hide Close button in F11 Fullscreen mode. */
}
#browser.tabs-off button.window-maximize {
    display: none !important; /* Hide Maximize button in F11 Fullscreen mode. */
}
#browser.tabs-off button.vivaldi {
    display: none !important; /* Hide Vivaldi button in F11 Fullscreen mode. */
}
span.burger-icon {
    height: 22px !important; /* Magic number formatting. */
    padding-top: 0px !important; /* Removing unneeded padding. */
}

/* THIS WILL CHANGE THE ICONS TO FIT THE ELEMENTARY STYLE */
button.newtab svg path {
    d: path('M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z');
}

.close svg path{
    d: path('M720.97 163.556L723.5 161l1.5 1.5-2.598 2.487L725 167.5l-1.5 1.5-2.512-2.599L718.5 169l-1.5-1.5 2.586-2.5-2.586-2.5 1.5-1.5z');
}

.window-maximize svg path {
    d: path('M761 159l2.25 2.223-1.714 1.714-.027.027c-.38.42-.378 1.068.027 1.474a1.07 1.07 0 0 0 1.473.053l.215-.214 1.553-1.527L767 165v-6zm-6 6v6h6l-2.25-2.25 1.715-1.714.026-.027c.381-.42.38-1.068-.026-1.473-.406-.406-1.08-.434-1.5-.054l-.188.214-1.553 1.554z');
}

.back svg path {
    d: path('M405.188-251.016c-.246-.01-.476.1-.657.28l-7.125 6.97a1.03 1.03 0 0 0-.28.5.965.965 0 0 0-.032.28.976.976 0 0 0 0 .094c.01.055.012.104.031.157.04.189.13.38.281.531l7.125 6.969c.362.361.952.329 1.344-.063l1.406-1.406c.392-.392.425-1.013.063-1.375l-2.906-2.906H411c.554 0 1-.446 1-1v-2c0-.554-.446-1-1-1h-6.594l2.938-2.938c.362-.361.33-.952-.063-1.343l-1.406-1.438a1.035 1.035 0 0 0-.687-.312z');
}

.forward svg path{
    d: path('M444.813-251.016c.245-.01.475.1.656.28l7.125 6.97c.147.146.239.316.281.5a.965.965 0 0 1 .031.28.976.976 0 0 1 0 .094c-.01.055-.011.104-.03.157-.041.189-.13.38-.282.531l-7.125 6.969c-.362.361-.952.329-1.344-.063l-1.406-1.406c-.392-.392-.424-1.013-.063-1.375l2.907-2.906H439c-.554 0-1-.446-1-1v-2c0-.554.446-1 1-1h6.594l-2.938-2.938c-.361-.361-.329-.952.063-1.343l1.406-1.438c.196-.196.442-.303.688-.312z');
}

.reload svg path {
    d: path('M445.531-172c-.3 0-.53.253-.53.563V-170a7 7 0 1 0 7 7h-3a4 4 0 1 1-4-4v1.438c0 .309.23.562.53.562a.56.56 0 0 0 .22-.031l4.905-2.938a.592.592 0 0 0 .344-.531.592.592 0 0 0-.344-.531l-4.906-2.938a.558.558 0 0 0-.219-.03z');
}

.stop svg path {
    d: path('m 7.1875,5.0026092 c -0.243988,0.0069 -0.474752,0.112716 -0.65625,0.3125 l -1.25,1.375 c -0.362996,0.399568 -0.353579,1.027726 0.03125,1.40625 l 3.96875,3.9062498 -3.96875,3.90625 c -0.384829,0.378524 -0.394246,1.006682 -0.03125,1.40625 l 1.25,1.375 c 0.362996,0.399568 0.958921,0.409774 1.34375,0.03125 l 4.125,-4.0625 4.125,4.0625 c 0.384829,0.378524 0.980754,0.368318 1.34375,-0.03125 l 1.25,-1.375 c 0.362996,-0.399568 0.353579,-1.027726 -0.03125,-1.40625 l -3.96875,-3.90625 3.96875,-3.9062498 c 0.384829,-0.378524 0.394246,-1.006682 0.03125,-1.40625 l -1.25,-1.375 C 17.105754,4.9155411 16.509829,4.9053351 16.125,5.2838592 L 12,9.3463592 7.875,5.2838592 C 7.682586,5.0945972 7.431488,4.9957431 7.1875,5.0026092 Z');
}

.home svg path{
    d: path('M365-251l-8.844 8.844 1.688 1.719 1.156-1.157V-235h5v-4c0-.554.446-1 1-1s1 .446 1 1v4h5v-6.594l1.156 1.156 1.688-1.718zm4 1v1.531l2 2.094V-250z');
}

.window-close svg path {
    d: path('M720.97 163.556L723.5 161l1.5 1.5-2.598 2.487L725 167.5l-1.5 1.5-2.512-2.599L718.5 169l-1.5-1.5 2.586-2.5-2.586-2.5 1.5-1.5z');
}

/* THIS STYLES THE TABS AND TAB BAR */

.bookmark-bar {
    order: 2;
}

#tabs-container {
    order: 3;
    border-top-width: 0px !important; /* Hide tab top border. */
    padding-bottom: 0 !important;
}

#tabs-container .resize {
    margin-right: -30px !important; /* Get rid of the space between tabs and the Trash button. */
}

button.button-tabbar.toggle-trash {
    z-index: 1 !important; /* Fix clicking issues. */
}

.inner {
    order: 4;
}

/* Tabs and tab bar */
.tab {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    margin: 0 !important;
    border-image: linear-gradient(to bottom, transparent, rgba(0,0,0, 0.1)) 1 !important;
    background-color: transparent !important;
}
.tab:not(.active):hover {
    background: transparent !important;
}

.tab-strip span .tab-position{
    margin-left: 34px; /* Make room for New Tab button. */
    max-height: 30px !important;
    min-height: 30px !important;
}

.tab-strip {
    width: 100vw !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: linear-gradient(var(--colorBgDark), var(--colorBg)) !important;
    border-bottom: 1px solid var(--colorAccentBorderDark) !important;
    box-shadow: inset 0 1px 2px 1px rgba(0,0,0, 0.1) !important;
    direction: ltr;
    color: var(--colorFg) !important;
}

.tab-position .tab.active {
    border-top: 1px solid var(--colorAccentBorderDark) !important;
    border-left: 1px solid var(--colorAccentBorderDark) !important;
    border-right: 1px solid var(--colorAccentBorderDark) !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    background: linear-gradient(var(--colorBgFaded), var(--colorBg)) !important;
    color: var(--colorFg) !important;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 var(--colorBgAlphaHeavier),
        inset 1px 0 0 0 var(--colorBgAlphaHeavier),
        inset -1px 0 0 0 var(--colorBgAlphaHeavier) !important;
}

/* SEARCH BAR ("ctrl+F") */
.find-in-page {
    background: linear-gradient(var(--colorBgFaded), var(--colorBg)) !important;
    color: var(--colorFg) !important;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 var(--colorBgAlphaHeavier),
        inset 1px 0 0 0 var(--colorBgAlphaHeavier),
        inset -1px 0 0 0 var(--colorBgAlphaHeavier) !important;
}
#fip-input-text { /* Text box */
    background: linear-gradient(to bottom, var(--colorBg), var(--colorBgLighter)) !important;
}
.fip-input {
    background: linear-gradient(var(--colorBgFaded), var(--colorBg)) !important;
}

.fip-controls button {
    background: linear-gradient(var(--colorBgFaded), var(--colorBg)) !important;
}

/* SPECIFIC STYLE FOR MAXIMIZED WINDOW */
/* Basically, headerbar is narrower */
.linux.maximized .window-buttongroup {
    height: 39px !important;
}

.maximized .toolbar-addressbar.toolbar {
    padding-top: 2px;
    padding-bottom: 2px;
}
.maximized button.window-maximize {
    height: 39px !important;
}
.maximized button.vivaldi {
    margin-top: 7px;
}
.maximized .window-close {
    top: 10px;
}

/* --- END OF VIVALDI ELEMENTARY THEME ---*/