Floatplane Tweaks by Gusted

/* ==UserStyle==
@name         Floatplane Tweaks
@namespace    floatplane.com
@description  Various tweaks for floatplane to improve UX.
@author       Gusted
@homepageURL  https://git.gusted.xyz/Gusted/floatplane-tweaks
@preprocessor stylus
@version      1.0.0
@license      MIT

@var checkbox large_icon    'Enlargen icons' 1
@var checkbox color_thumbs  'Color thumbs accordingly' 1
@var checkbox small_sidebar 'Full-Width hack' 0
@var checkbox info_box      'Improved info box' 1
==/UserStyle== */
@-moz-document domain("floatplane.com") {
    /* Enlargen the icons in the top bar of the video. */
    if large_icon {
        .PostPlayerInfoComponent.charm-bar {
            .charm .material-icons {
                font-size: 24px;
            }
            > div:not(:last-child) {
                margin-right: 16px;
            }
        }
    }

    /* Color the like button green and dislike button red, when active */
    if color_thumbs {
        .ReactContentButton.variant-interaction.active {
            /* Disable the color change of count text */
            color: revert;

            &.like > svg * {
                fill: #538d22;
            }
            &.dislike > svg * {
                fill: #fd151b;
            }
        }
    }

    /* Feels like a full-width hack. */
    if small_sidebar {
        /* Make the sidebar smaller. */
        .sidebar {
            width: 75px;
        }

        /* Show floatplane logo instead of text */
        .LeftBarHeader {
            .logo-full {
                display: none;
            }
            .logo-icon {
                display: block;
                margin-left: calc(75px / 2 - 20px);
            }
        }

        /* Center the channel image, remove channel name */
        .nav-subscription-item {
            .channel-image {
                left: calc(75px / 2 - 15px);
            }
            .channel-name {
                display: none;
            }
        }

        /* Remove horizontal scrollbar */
        .sidebar-inner-main-nav .simplebar-track.simplebar-horizontal {
            display: none;
        }

        /* Fix offset for page-wrapper */
        .page-wrapper {
            padding-left: 75px;
        }
        
        /* Fix offset for homepage's top bar */
        .ReactMainPageTabsContainer,
        .ReactProfileIntro.fixed {
            left: 75px;
        }

        /* Full-width for viewing a channel */
        .ReactProfileCover .channel-intro-bg,
        .ReactProfileNavContainer,
        .ReactProfileVital {
            max-width: initial;
        }

        .generic-wrapper,
        .PlayerPageBodyContainer .internal {
            max-width: calc(100% - 75px);
        }

        /* Show settings icon in sidebar */
        .left-nav-user-area .spinny-host {
            bottom: 60px;
            position: absolute;
            width: 75px;
        }

        /* Move up the dropdown menu, that is displayed from the settings. */
        .left-nav-user-area {
            .dropup {
                bottom: calc(80px + 60px);

                .dropup-item {
                    color: transparent;

                    i {
                        left: calc(75px / 2 - 12px);
                        color: silver;
                    }
                }
            }
        }

        /* Fix horizontal scrollbar offset, can be dynamic, when `:has` is supported
           So it can be checked when the settings menu is open or not. */
        .sidebar-inner-main-nav {
            bottom: calc(60px * 4);
        }
    }
    
    if info_box {
        .ReactPostTile.info-box {
            .video-creator-image {
                height: 30px;
                width: 30px;
            }

            .title {
                font-size: 14px;
                width: 100%;
            }

            .creator-name {
                display: none;
            }
            
            > div {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                
                > div:last-child {
                    margin: auto 0;
                }
            }
            
            .age {
                margin-top: 0px;
            }
            
            .duration {
                margin-right: 1em;
            }
        }
    }
}