Holodex QOL by SoaringGecko

Details

AuthorSoaringGecko

LicenseNo License

Categoryholodex.net

Created1 year, 2 months ago

Updated3 weeks, 6 days ago

Size5.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds some QOL features to Holodex.

Notes

Make the show all/close favorites button on Holodex sticky, and allows you to set a custom background color for the Close and Show All buttons. (IF YOU USE FIREFOX AND WANT TO USE THIS FEATURE LOOK AT THE BOTTOM OF THIS PAGE)

Toggle the bottom Nav on channel homepages sticky and it's background color.

Toggle video links overlaping the nav when being hovered, and the background color of them both when and when not being hovered.

Toggle the video links having a popout effect on hover. (requires #3 to be active)

(Only works on Holodex)

Please note Firefox users:

You will need to set layout.css.has-selector.enabled to true in about:config do to the use of :has() until they add support for it, or the sticky Show all/Close button feture will not work.

Source code

/* ==UserStyle==
@name           Holodex QOL
@namespace      github.com/openstyles/stylus
@version        1.2.4
@description    Makes the close favorites button on Holodex sticky
@author         WhiteTapeti
@homepageURL    https://userstyles.world/style/12225/holodex-sticky-close-favorites-button

@advanced color cor1 "Show All/Close Background Color" #272727
@advanced color cor2 "Show All/Close Hover Background Color" #383838

@advanced dropdown SEPERT "Separate Show All And Close Colors On/Off" {
ED1 "Off" <<<EOT div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z']) {background-color: /*[[cor1]]*/;} div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z']):hover {background-color: /*[[cor2]]*/;} EOT;
ED2 "On" <<<EOT div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z']) {background-color: /*[[cor3]]*/;} div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z']):hover {background-color: /*[[cor4]]*/;} EOT;
}

@advanced color cor3 "Show All Background Color ⚠(Separate Color Needs To Be Enabled)" #272727
@advanced color cor4 "Show All Hover Background Color ⚠(Separate Color Needs To Be Enabled)" #383838
    
@advanced dropdown pageNumStick "Make Page Number Navigater Sticky On/Off" {
PNSO2 "On" <<<EOT .d-flex.justify-center.py-4{position:sticky;bottom:-25px;z-index:1;background-color:/*[[cor5]]*/} EOT;
PNSO1 "Off" <<<EOT .d-flex.justify-center.py-4{background-color:/*[[cor5]]*/} EOT;
}

@advanced color cor5 "Page Number Navigater Background Color (Normal Default Is Transparent)" #121212
    
@advanced dropdown orgGroupsStick "Make Org Groups Navigater Sticky On/Off" {
PNSO4 "On" <<<EOT .v-list-group__header.v-list-item.v-list-item--active.v-list-item--link{position:sticky;top:56px;display:flex;background-color:#1e1e1e;z-index:5} EOT;
PNSO3 "Off" <<<EOT EOT;
}
    
@advanced color cor6 "Video Link Background Color" #12121200
@advanced color cor7 "Video Link Background Color On Hover" #292929
@advanced dropdown vidHov "Make Videos Go Over Nav Menus On Hover On/Off" {
VHO1 "Off" <<<EOT .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{background-color:/*[[cor7]]*/;border-radius:4px;} EOT;
VHO2 "On" <<<EOT .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{z-index:5;background-color:/*[[cor7]]*/;border-radius:4px;transform:scale(/*[[vidPopScal]]*/);transition:transform .3s ease-in-out} .v-app-bar.v-app-bar--fixed{z-index:6} EOT;
VHO3 "On (layered)" <<<EOT .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{z-index:5;background-color:/*[[cor7]]*/;border-radius:4px;transform:scale(/*[[vidPopScal]]*/);transition:transform .3s ease-in-out;transform-origin:bottom;position:sticky;} .v-app-bar.v-app-bar--fixed{z-index:6} EOT;
}
@advanced text vidPopScal "Make Video Link Popout On Hover ⚠(Set To 1 Or Make Blank To Disable, 1.1 Recommended)" 1
==/UserStyle== */
@-moz-document domain("holodex.net") {
    div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z']) {
        position: -webkit-sticky;
        position: sticky;
        bottom: 29px;
        background-color: /*[[cor1]]*/;
    }
    
    div.v-list-item.v-list-item--link:has(> div.v-list-item__action > span.v-icon.notranslate > svg.v-icon__svg > path[d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z']):hover {
        background-color: /*[[cor2]]*/;
    }
    
    .row.video-row.row--dense{
        background-color:/*[[cor6]]*/;
    }

    /*SHOW ALL*/
    /*[[SEPERT]]*/
    /*[[vidHov]]*/
    .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{top:129px;}
}
    @-moz-document regexp(".*holodex\.net\/channel\/.*"), regexp(".*holodex\.net\/search\?q\=.*") { /*[[vidHov2]]*/ .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{bottom:71px;top:80px!important;} }
    @-moz-document regexp(".*holodex\.net\/favorites\#.*") { /*[[vidHov2]]*/ .video-col.video-4.flex-column.col:hover, .video-col.video-5.flex-column.col:hover, .video-col.video-6.flex-column.col:hover, .video-col.video-2.flex-column.col:hover{bottom:71px;top:129px;} }
    @-moz-document regexp(".*holodex\.net(?!\/\#clips)(?!\/\#archive)(?!\/channel\?org=).*") { /*[[pageNumStick]]*/ }
    @-moz-document regexp(".*holodex\.net\/channel\?org=.*") { /*[[orgGroupsStick]]*/ }

/*
.video-col.video-4.flex-column.col:hover {
    z-index: 2;
    background-color: #121212;
    border-radius: 4px;
    transform: scale(1.1);
    transition: 0.3s;
}
*/

Reviews

No reviews yet.