Raindrop.io theme & List View enhancements

raindrop.enhancements.css

.themeDark {
    --accentColor: #e57373 !important;
    --bgColor: #393939;
    background: var(--bgColor);
}


.svgIcon.color-accent {
    color: var(--accentColor, #1988e0)
}

.button.active,
.tabs .item.active {
    color: var(--accentColor, #1988e0)
}

.button.active.input,
.button.active b,
.tabs .item.active.input,
.tabs .item.active b {
    background: var(--accentColor, #1988e0)
}

.button.blue,
.tabs .item.blue {
    background: var(--accentColor, #1988e0);
}

.button:hover,
.tabs .item:hover {
    color: var(--accentColor, #1988e0)
}

.fab.active {
    color: var(--accentColor, #1988e0)
}

.selectButton:active,
.selectButton[data-focus=true] {
    box-shadow: 0 0 0 1px var(--accentColor)!important
}

.extra-checkbox.active {
    background: var(--accentColor, #1988e0)
}

.checked .selectCheckbox {
    background: var(--accentColor, #1988e0);
    box-shadow: 0 0 0 1px var(--accentColor, #1988e0), 0 0 0 2px #fff
}

.preloader .preloaderPath {
    stroke: var(--accentColor, #1988e0);
}

.search .searchKeywords .keyword {
    background: var(--accentColor, #1988e0);
}

html.retina.chrome .search.focus .searchKeywords {
    box-shadow: inset 0 0 0 .5px var(--accentColor, #1988e0)
}

.quickFilters .button.min.active,
.quickFilters .button.min:hover {
    color: var(--accentColor, #1988e0)!important
}

.bookmarkEdit .cover-list figure.active:before {
    box-shadow: inset 0 0 0 3px var(--accentColor, #1988e0)
}

.editTags .tag {
    background: var(--accentColor, #1988e0);
}

.element.element-grid.checked .selectElement {
    box-shadow: inset 0 0 0 2px var(--accentColor, #1988e0);
}

.element-grid .about .actions .button.active b {
    background: val(--accentColor, #1988e0);
}

.themeDark .element.element-grid.active {
    background: var(--accentColor)!important
}

.element a {
    color: var(--accentColor, #1988e0)
}

.element .selectElement:hover .selectCheckbox {
    color: var(--accentColor)
}

.element.active[data-is-focus=true] {
    background: var(--accentColor, #1988e0)!important
}

html.clipper .collection.active {
    background: var(--accentColor);
}

html:not(.blur) .collection.active[data-is-focus=true] {
    background: var(--accentColor);
}

html:not(.blur) .collection-new-form {
    background: var(--accentColor);
}

@keyframes addButtonAnimation {
    0% {
        transform: scale(.8)
    }
    50% {
        background: #1988e0;
        background: var(--accentColor);
        color: #fff;
        transform: scale(1.2)
    }
    70% {
        transform: scale(.7)
    }
    to {
        transform: scale(1)
    }
}

#sidebar .tabBar .item.active {
    color: var(--accentColor);
}

.popCollectionCover {
    color: var(--accentColor, #1988e0);
}

.contextMenuList .contextMenuItem.active,
.contextMenuList .contextMenuItem:hover:not(:active) {
    background: var(--accentColor, #1988e0);
}


.cover-selector .item a .svgIcon {
    background: var(--accentColor, #1988e0);
}

.cover-selector .item.active a {
    box-shadow: inset 0 0 0 2px var(--accentColor, #1988e0)
}

.popBodyPreviewFont a.active {
    background: var(--accentColor, #1988e0);
}

.popBodyViewSwitch a.active,
.popBodyViewSwitch a:hover.active {
    color: var(--accentColor, #1988e0)
}

html.clipper .current-clipper-bookmark.element-grid .about,
html.clipper .current-clipper-bookmark.element-list {
    background-color: var(--accentColorLighten, #e8f3fc)
}

html.clipper .current-clipper-bookmark.element-grid .permalink {
    box-shadow: 0 0 0 2px var(--accentColorLighten, #e8f3fc)!important
}

.clipper-save .clipper-save-button {
    background: var(--accentColor, #1988e0);
}

.clipper-save .clipper-save-button.status-saved {
    color: var(--accentColor, #1988e0);
}

::selection {
    background: var(--accentColor, #1988e0);
}

::-moz-selection {
    background: var(--accentColor, #1988e0);
}


.themeDark #main .button.active,
.themeDark #panel .button.active,
.themeDark #pop-body .button.active,
.themeDark #reader .button.active,
.themeDark #sidebar .button.active {
    color: var(--accentColor)
}

.themeDark #main .button.active b,
.themeDark #panel .button.active b,
.themeDark #pop-body .button.active b,
.themeDark #reader .button.active b,
.themeDark #sidebar .button.active b {
    background: var(--accentColor);
    color: #var(--bgColor)!important;
}

.themeDark .extra-checkbox.active {
    background: var(--accentColor)
}

.themeDark .searchKeywords .keyword {
    background: var(--accentColor);
    color: hsla(0,0%,100%,.8) !important;
}

.themeDark .editTags .tag {
    background: var(--accentColor);
}

.themeDark .element .tags a {
    font-weight: 700;
}

.themeDark .element .rating .svgIcon,
.themeDark .element .tags a,
.themeDark .element a.typeMiniIcon {
    color: var(--accentColor)!important
}

.themeDark .element .actions .button.default.active b {
    background: var(--accentColor)!important;
}

#reader[data-tab=preview].vfontcolor-night footer .button.active b,
#reader[data-tab=preview].vfontcolor-night footer .button:hover b,
#reader[data-tab=preview].vfontcolor-night footer .tabs .item.active b,
#reader[data-tab=preview].vfontcolor-night footer .tabs .item:hover b,
#reader[data-tab=preview].vfontcolor-night header .button.active b,
#reader[data-tab=preview].vfontcolor-night header .button:hover b,
#reader[data-tab=preview].vfontcolor-night header .tabs .item.active b,
#reader[data-tab=preview].vfontcolor-night header .tabs .item:hover b {
    background: var(--accentColor);
    color: var(--bgColor);
}

.themeDark #main .button.blue,
.themeDark #panel .button.blue,
.themeDark #pop-body .button.blue,
.themeDark #reader .button.blue,
.themeDark #sidebar .button.blue {
    color: var(--bgColor);
}

.themeDark #main .button.active.input,
.themeDark #panel .button.active.input,
.themeDark #pop-body .button.active.input,
.themeDark #reader .button.active.input,
.themeDark #sidebar .button.active.input {
    color: var(--bgColor)!important
}

.themeDark .checked .selectCheckbox {
    color: var(--bgColor)!important;
    background: var(--accentColor)
}

.themeDark .quickFiltersOverlay {
    background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0, var(--bgColor) 30%)
}

.element.element-grid .about.dark {
    box-shadow: none;
    background: var(--bgColor)
}

.themeDark .element.element-grid {
    border-color: var(--bgColor)
}

.themeDark .element-list,
.themeDark .view-list .section,
.themeDark .view-simple .section {
    background: var(--bgColor)
}

.themeDark #main,
.themeDark #panel,
.themeDark #reader:not([data-tab=preview]),
.themeDark>.themePreviewMain {
    box-shadow: none!important;
    background-color: var(--bgColor);
    color: hsla(0, 0%, 100%, .8)
}

.themeDark #reader:not([data-tab=preview]) .tabs .item.active b {
    color: var(--bgColor)!important
}

.themeDark .contextMenuList .contextMenuItem.active,
.themeDark .contextMenuList .contextMenuItem:hover:not(:active) {
    color: var(--bgColor)
}

.themeDark .contextMenuList.selectable .contextMenuItem:hover:not(:active):not(.active) {
    background: hsla(0, 0%, 100%, .2);
    color: var(--bgColor)
}

.themeDark .pop-content header {
    background: var(--bgColor)
}

.popBodyPreviewSwitch a.dark {
    background: var(--bgColor)
}

.view-list-cover-size-0 .element-list .about {
    display: flex;
    width: 100%;
}

.view-list-cover-size-0 .element-list .about .title {
    flex: 1 1;
    margin-right: 15px;
    max-width: none;
}

.view-list-cover-size-0 .element-list .about p {
    display: flex;
}

.view-list-cover-size-0 .element-list .about .typeMiniIcon {
    order: 2;
    margin-left: 5px;
}

.view-list-cover-size-0 .element-list .about p .description {
    display: none;
}

.view-list-cover-size-0 .element-list .cover-wrap {
    align-self: flex-start;
    margin-top: .16rem;
}

.view-list-cover-size-0 .element-list:after {
    left: 82px;
    left: 5.125rem
}

.view-list-cover-size-0 .element-list .addToFavorite,
.view-list-cover-size-0 .element-list .cover,
.view-list-cover-size-0 .element-list .cover-over {
    width: 1.13rem;
    height: 1.13rem
}

.view-list-cover-size-1 .element-list {
    padding-top: 8px;
    padding-bottom: 8px;
}

.view-list-cover-size-1 .element-list:after {
    left: 92px;
    left: 4.75rem
}

.view-list-cover-size-1 .element-list .addToFavorite,
.view-list-cover-size-1 .element-list .cover,
.view-list-cover-size-1 .element-list .cover-over {
    width: 2.13rem;
    height: 2.13rem
}

.view-list-cover-size-2 .element-list:after {
    left: 92px;
    left: 4.75rem
}

.view-list-cover-size-2 .element-list .addToFavorite,
.view-list-cover-size-2 .element-list .cover,
.view-list-cover-size-2 .element-list .cover-over {
    width: 2.13rem;
    height: 2.13rem
}

.view-list-cover-size-3 .element-list:after {
    left: 92px;
    left: 4.75rem
}

.view-list-cover-size-3 .element-list .addToFavorite,
.view-list-cover-size-3 .element-list .cover,
.view-list-cover-size-3 .element-list .cover-over {
    width: 2.75rem;
    height: 2.75rem
}

.view-list-cover-size-4 .element-list:after {
    left: 102px;
    left: 5.38rem
}

.view-list-cover-size-4 .element-list .addToFavorite,
.view-list-cover-size-4 .element-list .cover,
.view-list-cover-size-4 .element-list .cover-over {
    width: 3.38rem;
    height: 3.38rem
}

raindrop.enhancements.userscript.js

// ==UserScript==
// @name          Raindrop Enhancements
// @description   Raindrop.io theme & List View enhancements
// @author        Nicolas Brobst
// @version       1.0
// @include      https://app.raindrop.io/*
// ==/UserScript==
(function() {

var css = '.themeDark{--accentColor:#e57373!important;--bgColor:#393939;background:var(--bgColor)}.svgIcon.color-accent{color:var(--accentColor,#1988e0)}.button.active,.tabs .item.active{color:var(--accentColor,#1988e0)}.button.active.input,.button.active b,.tabs .item.active.input,.tabs .item.active b{background:var(--accentColor,#1988e0)}.button.blue,.tabs .item.blue{background:var(--accentColor,#1988e0)}.button:hover,.tabs .item:hover{color:var(--accentColor,#1988e0)}.fab.active{color:var(--accentColor,#1988e0)}.selectButton:active,.selectButton[data-focus=true]{box-shadow:0 0 0 1px var(--accentColor)!important}.extra-checkbox.active{background:var(--accentColor,#1988e0)}.checked .selectCheckbox{background:var(--accentColor,#1988e0);box-shadow:0 0 0 1px var(--accentColor,#1988e0),0 0 0 2px #fff}.preloader .preloaderPath{stroke:var(--accentColor,#1988e0)}.search .searchKeywords .keyword{background:var(--accentColor,#1988e0)}html.retina.chrome .search.focus .searchKeywords{box-shadow:inset 0 0 0 .5px var(--accentColor,#1988e0)}.quickFilters .button.min.active,.quickFilters .button.min:hover{color:var(--accentColor,#1988e0)!important}.bookmarkEdit .cover-list figure.active:before{box-shadow:inset 0 0 0 3px var(--accentColor,#1988e0)}.editTags .tag{background:var(--accentColor,#1988e0)}.element.element-grid.checked .selectElement{box-shadow:inset 0 0 0 2px var(--accentColor,#1988e0)}.element-grid .about .actions .button.active b{background:val(--accentColor,#1988e0)}.themeDark .element.element-grid.active{background:var(--accentColor)!important}.element a{color:var(--accentColor,#1988e0)}.element .selectElement:hover .selectCheckbox{color:var(--accentColor)}.element.active[data-is-focus=true]{background:var(--accentColor,#1988e0)!important}html.clipper .collection.active{background:var(--accentColor)}html:not(.blur) .collection.active[data-is-focus=true]{background:var(--accentColor)}html:not(.blur) .collection-new-form{background:var(--accentColor)}@keyframes addButtonAnimation{0%{transform:scale(.8)}50%{background:#1988e0;background:var(--accentColor);color:#fff;transform:scale(1.2)}70%{transform:scale(.7)}to{transform:scale(1)}}#sidebar .tabBar .item.active{color:var(--accentColor)}.popCollectionCover{color:var(--accentColor,#1988e0)}.contextMenuList .contextMenuItem.active,.contextMenuList .contextMenuItem:hover:not(:active){background:var(--accentColor,#1988e0)}.cover-selector .item a .svgIcon{background:var(--accentColor,#1988e0)}.cover-selector .item.active a{box-shadow:inset 0 0 0 2px var(--accentColor,#1988e0)}.popBodyPreviewFont a.active{background:var(--accentColor,#1988e0)}.popBodyViewSwitch a.active,.popBodyViewSwitch a:hover.active{color:var(--accentColor,#1988e0)}html.clipper .current-clipper-bookmark.element-grid .about,html.clipper .current-clipper-bookmark.element-list{background-color:var(--accentColorLighten,#e8f3fc)}html.clipper .current-clipper-bookmark.element-grid .permalink{box-shadow:0 0 0 2px var(--accentColorLighten,#e8f3fc)!important}.clipper-save .clipper-save-button{background:var(--accentColor,#1988e0)}.clipper-save .clipper-save-button.status-saved{color:var(--accentColor,#1988e0)}::selection{background:var(--accentColor,#1988e0)}::-moz-selection{background:var(--accentColor,#1988e0)}.themeDark #main .button.active,.themeDark #panel .button.active,.themeDark #pop-body .button.active,.themeDark #reader .button.active,.themeDark #sidebar .button.active{color:var(--accentColor)}.themeDark #main .button.active b,.themeDark #panel .button.active b,.themeDark #pop-body .button.active b,.themeDark #reader .button.active b,.themeDark #sidebar .button.active b{background:var(--accentColor);color:#var(--bgColor)!important}.themeDark .extra-checkbox.active{background:var(--accentColor)}.themeDark .searchKeywords .keyword{background:var(--accentColor);color:hsla(0,0%,100%,.8)!important}.themeDark .editTags .tag{background:var(--accentColor)}.themeDark .element .tags a{font-weight:700}.themeDark .element .rating .svgIcon,.themeDark .element .tags a,.themeDark .element a.typeMiniIcon{color:var(--accentColor)!important}.themeDark .element .actions .button.default.active b{background:var(--accentColor)!important}#reader[data-tab=preview].vfontcolor-night footer .button.active b,#reader[data-tab=preview].vfontcolor-night footer .button:hover b,#reader[data-tab=preview].vfontcolor-night footer .tabs .item.active b,#reader[data-tab=preview].vfontcolor-night footer .tabs .item:hover b,#reader[data-tab=preview].vfontcolor-night header .button.active b,#reader[data-tab=preview].vfontcolor-night header .button:hover b,#reader[data-tab=preview].vfontcolor-night header .tabs .item.active b,#reader[data-tab=preview].vfontcolor-night header .tabs .item:hover b{background:var(--accentColor);color:var(--bgColor)}.themeDark #main .button.blue,.themeDark #panel .button.blue,.themeDark #pop-body .button.blue,.themeDark #reader .button.blue,.themeDark #sidebar .button.blue{color:var(--bgColor)}.themeDark #main .button.active.input,.themeDark #panel .button.active.input,.themeDark #pop-body .button.active.input,.themeDark #reader .button.active.input,.themeDark #sidebar .button.active.input{color:var(--bgColor)!important}.themeDark .checked .selectCheckbox{color:var(--bgColor)!important;background:var(--accentColor)}.themeDark .quickFiltersOverlay{background:linear-gradient(90deg,rgba(48,48,48,0) 0,var(--bgColor) 30%)}.element.element-grid .about.dark{box-shadow:none;background:var(--bgColor)}.themeDark .element.element-grid{border-color:var(--bgColor)}.themeDark .element-list,.themeDark .view-list .section,.themeDark .view-simple .section{background:var(--bgColor)}.themeDark #main,.themeDark #panel,.themeDark #reader:not([data-tab=preview]),.themeDark>.themePreviewMain{box-shadow:none!important;background-color:var(--bgColor);color:hsla(0,0%,100%,.8)}.themeDark #reader:not([data-tab=preview]) .tabs .item.active b{color:var(--bgColor)!important}.themeDark .contextMenuList .contextMenuItem.active,.themeDark .contextMenuList .contextMenuItem:hover:not(:active){color:var(--bgColor)}.themeDark .contextMenuList.selectable .contextMenuItem:hover:not(:active):not(.active){background:hsla(0,0%,100%,.2);color:var(--bgColor)}.themeDark .pop-content header{background:var(--bgColor)}.popBodyPreviewSwitch a.dark{background:var(--bgColor)}.view-list-cover-size-0 .element-list .about{display:flex;width:100%}.view-list-cover-size-0 .element-list .about .title{flex:1 1;margin-right:15px;max-width:none}.view-list-cover-size-0 .element-list .about p{display:flex}.view-list-cover-size-0 .element-list .about .typeMiniIcon{order:2;margin-left:5px}.view-list-cover-size-0 .element-list .about p .description{display:none}.view-list-cover-size-0 .element-list .cover-wrap{align-self:flex-start;margin-top:.16rem}.view-list-cover-size-0 .element-list:after{left:82px;left:5.125rem}.view-list-cover-size-0 .element-list .addToFavorite,.view-list-cover-size-0 .element-list .cover,.view-list-cover-size-0 .element-list .cover-over{width:1.13rem;height:1.13rem}.view-list-cover-size-1 .element-list{padding-top:8px;padding-bottom:8px}.view-list-cover-size-1 .element-list:after{left:92px;left:4.75rem}.view-list-cover-size-1 .element-list .addToFavorite,.view-list-cover-size-1 .element-list .cover,.view-list-cover-size-1 .element-list .cover-over{width:2.13rem;height:2.13rem}.view-list-cover-size-2 .element-list:after{left:92px;left:4.75rem}.view-list-cover-size-2 .element-list .addToFavorite,.view-list-cover-size-2 .element-list .cover,.view-list-cover-size-2 .element-list .cover-over{width:2.13rem;height:2.13rem}.view-list-cover-size-3 .element-list:after{left:92px;left:4.75rem}.view-list-cover-size-3 .element-list .addToFavorite,.view-list-cover-size-3 .element-list .cover,.view-list-cover-size-3 .element-list .cover-over{width:2.75rem;height:2.75rem}.view-list-cover-size-4 .element-list:after{left:102px;left:5.38rem}.view-list-cover-size-4 .element-list .addToFavorite,.view-list-cover-size-4 .element-list .cover,.view-list-cover-size-4 .element-list .cover-over{width:3.38rem;height:3.38rem}'

if (typeof GM_addStyle != "undefined") {
    GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
    PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
    addStyle(css);
} else {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(css));
    var heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
        heads[0].appendChild(node);
    } else {
        // no head yet, stick it whereever
        document.documentElement.appendChild(node);
    }
}
})();