Skip to content

Floatplane Deep Dark by dmnk

Details

Authordmnk

LicenseNo License

Categoryfloatplane

Created

Updated

Code size17 kB

Code checksum77ef5d44

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Modified version of "Floatplane Deep Dark" - including Live Broadcasts and chat

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Floatplane Deep Dark
@namespace      USO Archive
@author         Ulincsys
@description    `A dark theme built specifically for the new react frontend for the Floatplane web app.`
@version        20210719.10.21
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("floatplane.com") {
    :root {
      --color-bg: #2a2c2e;
      --color-bg-light: #2a2c2e; /* #152335 */
      --color-border: #4f555b;
      --color-fg: #ebedee;
      --color-fg-dark: #adb4bc;
      --color-link: #f75100;
      --color-hover: #E95420;
    }

    /* Global */
    body,
    .page-wrapper .route-wrapper,
    .video-feed-wrapper {
      background-color: var(--color-bg);
      color: var(--color-fg);
    }
    .sidebar,
    .sidebar .sb-hovergroup > .subscription-item > .dropup {
      background-color: var(--color-bg-light);
    }
    .loader-wrapper,
    .pre-loader-wrapper {
      background-color: var(--color-bg);
      background-image: none;
    }

    /* Logged-in home page */
    .tabs-wrapper .nav {
      background-color: var(--color-bg-light);
      box-shadow: none;
    }

    /* Browse Creators page */
    .creator-cards[class] figure[class],
    
    wrapper-part-info[id] {
      background-color: var(--color-bg-light);
    }
    .creator-cards[class] figure[class] dl,
    .creator-cards[class] figure.white[class] dl {
      background-color: var(--color-bg-light) !important;
    }
    #part-info[id] {
      color: var(--color-fg);
    }

    /* Channel page */
    .ReactProfileNavContainer .ReactProfileNavInternal {
        position: relative;
        padding-left: 110px;
        font-size: 0;
        transition: .7s padding cubic-bezier(.25,1,.25,1);
        background: var(--color-bg-light);
        box-shadow: inset 0 -1px 0 var(--color-border);
    }

    .ReactChannelStatsContainer {
        display: flex;
        flex-direction: row;
        margin-bottom: 8px;
        padding: 10px;
        border-radius: 2px;
        background-color: var(--color-bg-light);
    }

    .ReactChannelStatsContainer, .ReactCreatorPlanBoxContainer.sharp {
        box-shadow: inset 0 -1px 0 var(--color-border),-1px 0 0 var(--color-border),1px 0 0 var(--color-border);
    }

    .ReactChannelStatsContainer > div .subs-count {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-fg);
    }

    .ReactCreatorPlanBoxContainer {
        margin-top: 10px;
        padding: 15px 20px;
        border-radius: 2px;
        font-family: 'Proxima Nova',sans-serif;
        background-color: var(--color-bg-light);
    }

    .ReactPlanBoxHeaderContainer .price, .ReactPlanBoxHeaderContainer .sub-count {
        font-weight: 500;
        font-size: 12px;
        color: var(--color-fg);
    }

    .ReactCreatorPlanBoxButtonsContainer .sub-button {
        font-family: 'Proxima Nova',sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-bg);
        cursor: pointer;
    }

    .ReactProfileNavContainer {
        color: var(--color-fg);
    }

    .ReactProfileNavItem.active {
        color: var(--color-link);
    }

    .ReactChannelIntroSearch.active .SearchInput {
        box-sizing: border-box;
        padding-right: 45px;
        background: var(--color-bg);
        border-left: 1px solid var(--color-border);
        box-shadow: inset 0 -1px 0 var(--color-border);
        color: inherit;
        transition: .35s linear;
    }

    .ReactProfileCover {
        pointer-events: none;
        overflow: hidden;
        opacity: 1;
        position: relative;
        background: var(--color-bg);
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .ReactPostTile.info-box .title {
        max-height: 30px;
        margin-bottom: 2px;
        font-size: 13px;
        font-weight: 600;
        line-height: 15px;
        overflow: hidden;
        color: var(--color-fg);
    }

    .ReactPostTile.info-box .media-box .duration {
        font-size: 10px;
        font-weight: 400;
        color: var(--color-fg);
    }

    .ReactPostTile.info-box .age {
        display: inline-block;
        margin-top: 2px;
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
        color: var(--color-fg);
    }

    .ReactProfileCover::after {
        pointer-events: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, .6) 0%,rgba(42, 44, 46, 0) 75%);
        background: linear-gradient(to top,rgba(0, 0, 0, .6) 0%,rgba(42, 44, 46, 0) 75%);
        content: "";
    }

    .ReactProfileNavItem:hover {
        color: var(--color-hover);
    }

    /* Video page */
    .ReactDescriptionHeaderComponent .section-channel .info .channel-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-link);
    }

    .ReactRelatedPostList .post-list-item .info .title {
        margin-top: 14px;
        line-height: 120%;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-link);
        transition: 300ms opacity;
    }

    .ReactRelatedPostList .post-list-item .info .row-minor {
        margin-top: 6px;
        font-size: 10px;
        color: var(--color-fg);
    }

    .ReactRelatedPostList .post-list-item .info .row-minor a {
        margin-top: 6px;
        font-size: 10px;
        color: var(--color-fg);
    }

    .DescriptionBodyComponent .text-container::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        display: block;
        pointer-events: none;
        background: linear-gradient(to top,var(--color-bg-light) 0%,#fff0 70%);
        opacity: 1;
        transition: 2s opacity cubic-bezier(.25,1,.25,1);
    }

    .ReactContentButton.variant-icon-text, .ReactContentButton.variant-text {
        display: inline-block;
        font-family: 'Montserrat',sans-serif;
        font-weight: 700;
        color: var(--color-fg);
        transition: 400ms opacity;
    }

    .ReactDescriptionHeaderComponent .video-title .title-text {
        flex: 1;
        overflow-wrap: anywhere;
        user-select: text;
        line-height: 27px;
        font-size: 22px;
        font-weight: 700;
        color: var(--color-fg);
    }

    .ReactContentButton {
        color: var(--color-fg);
    }

    .ReactContentButton.variant-interaction > svg * {
        fill: var(--color-fg);
        transition: 600ms fill;
    }

    .ReactContentButton.variant-interaction.active > svg * {
        fill: var(--color-hover);
        transition: 600ms fill;
    }

    .ReactContentButton.variant-interaction.active {
        color: var(--color-hover);
    }

    .ReactRelatedPostList > .title {
        margin-bottom: 20px;
        line-height: 20px;
        font-size: 20px;
        font-weight: 600;
        color: var(--color-fg);
    }

    .CommentReplyInput textarea {
        width: 100%;
        height: 36px;
        z-index: 1;
        padding: 7px 0;
        outline: 0;
        border: 0;
            border-bottom-color: currentcolor;
            border-bottom-style: none;
            border-bottom-width: 0px;
        border-bottom: 1px solid var(--color-border);
        background-color: var(--color-bg-light);
        line-height: 160%;
        font-size: 14px;
        font-weight: 400;
        color: var(--color-fg);
        vertical-align: middle;
        resize: none;
    }

    .CommentReplyInput textarea::placeholder {
        color: var(--color-fg) !important;
        opacity: 1;
    }

    .player-wrapper.player-background {
        background: linear-gradient(to top,var(--color-bg) 0%,var(--color-bg-light) 100%);
    }

    .route-wrapper {
        background-color: var(--color-bg) !important;
    }

    .ReactCommentComponent .comment-body {
        line-height: 22px;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-fg);
    }

    .ReactCommentComponent .comment-header .author {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-link);
    }


    /* User profile page */

    .generic-wrapper .generic-block, .generic-wrapper .generic-block-padded, .generic-wrapper .generic-block-padded-threeway {
        background: var(--color-bg-light);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        position: relative;
        font-size: 14px;
        overflow: hidden;
    }

    .ReactUserProfileActivityFeed .activity-feed-period .feed-list .feed-item .item-content .content-comment {
        color: var(--color-fg);
    }

    .ReactUserProfileActivityFeed .activity-feed-period .feed-list {
        color: var(--color-fg);
        font-size: 15px;
    }

    .ReactUserProfileActivityFeed .activity-feed-period .feed-list .feed-item .item-caption a {
        cursor: pointer;
        font-weight: 500;
        color: var(--color-link);
    }

    .ReactUserProfileActivityFeed .activity-feed-period .feed-title {
        font-family: "Roboto";
        font-weight: 500;
        font-size: 15px;
        color: var(--color-fg-dark);
    }


    /* Settings page */
    .settings-layout-left .navlist,
    .settings-layout-left .navlist > .navlist-item:not(:first-of-type) {
      background-color: var(--color-bg-light);
      border-color: var(--color-border);
    }
    .cms-layout .cms-pane, .cms-layout .settings-pane,
    .settings-layout-right .settings-pane {
      background-color: var(--color-bg-light);
      border-color: var(--color-border);
    }
    .cms-layout .cms-pane .col-section > .row-section,
    .cms-layout .settings-pane .col-section > .row-section,
    .settings-layout-right .settings-pane .col-section > .row-section,
    .cms-layout .cms-pane .col-section,
    .cms-layout .settings-pane .col-section,
    .settings-layout-right .settings-pane .col-section {
      border-color: var(-...

Reviews

No reviews yet.