My vivaldi custom theme

manu-vivaldi.css

/**
 * Import webfont icons from font awesome
 */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);


/**
 * #header
 */

/* Change website snapshot */
#vivaldi-tooltip .tooltip .tooltip-item:last-of-type {
    width: 330px;
}
#vivaldi-tooltip .tooltip .tooltip-item {
    height: 275px;
}
#vivaldi-tooltip .tooltip .tooltip-item .thumbnail-image {
    height: 250px;
}
#vivaldi-tooltip .tooltip {
    height: inherit !important;
    width: inherit !important;
}

/* Tab indicator */
.stacks-on.tabs-top .tab-strip .tab-group-indicator {
    top: -10px;
}
.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator {
    height: 12px;
}
.ui-light.ui-tabcolor-off.color-behind-tabs-off .tab-position .tab {
    background-color: hsla(0,0%,100%,.25);
}
.isblurred.color-behind-tabs-off.ui-light.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator {
    background-color: hsla(0,0%,7%,.1);
}
.color-behind-tabs-off.ui-light.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator {
    background-color: hsla(0,0%,7%,.15);
}
#tabs-container .toggle-trash svg {
    margin-top: -7px;
}



/**
 * toolbar
 */

/* hide searchfield */
.searchfield {
    display: none;
}

/* Fill bookmarked button to vivaldi red color. */
.button-addressfield.bookmark svg .bookmark-animated-fill {
    fill: #e53636;
}



/**
 * bookmark-bar
 */

/* Change bookmarks folder design in bookmark bar */
.bookmark-bar button svg.folder-icon {
    display: none;
}
.bookmark-bar button svg.folder-icon+span {
    font-weight: 600;
}
.bookmark-bar button svg.folder-icon+span:after {
    content: "▾";
    padding-left: 4px;
    opacity: .5;
}

/* Change bookmarks design of bookmark with empty title. Only favicon. */
.bookmark-bar button img + span:empty {
    display: none;
}

/* Separator.
 * To create a separator, just bookmark this page : http://separator/
 * Notes: favicon separator from this list : http://www.favicon.cc/?action=icon_list&tag_id=28273
 */
.bookmark-bar button img[src="chrome://favicon/http://separator/"] {
    margin: 0 -6px;
    content: url(chrome://favicon/http://www.favicon.cc/?action=icon&file_id=326834);
    background: var(--colorBgDark);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    padding: 4px 0 3px;
}
.bookmark-bar button img[src="chrome://favicon/http://separator/"] + span {
    display: none;
}
.acc-dark .bookmark-bar button img[src="chrome://favicon/http://separator/"] {
    background: var(--colorAccentBgDark);
}



/**
 * #panels
 */

/* Add icon in sidebar with Fontawsome */
#switch button.webviewbtn img {
    display:none;
}
#switch button:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
#switch button:active:not(:disabled):not(.active) img:after {
    transform: scale(.85);
    transition-duration: 0s;
}
#switch button.webviewbtn img {
    background-color: hsla(0,0%,100%,.1);
}

/* Add icons to specific internal page */
#switch button[title="vivaldi://apps/"]:after {
    content: "\f1b3";
}
#switch button[title="vivaldi://extensions/"]:after {
    content: "\f12e";
}
#switch button[title="vivaldi://history/"]:after {
    content: "\f1da";
}

/* My panels */
#switch button[title*="verflow"]:after {
    content: "\f16c";
}
#switch button[title*="/Users/manu"]:after {
    content: "\f07b";
}
#switch button[title^="http://localhost/"]:after {
    content: "\f041";
}

How do I apply this? I only know how to apply custom css to firefox.