A complete dark theme for Floatplane. This includes all public-facing pages, and probably even styles some of the stuff only LTT and friends can access.
Floatplane Night Mode (Updated July 19th 2021) by zushiba
Details
Authorzushiba
LicenseNO-REDISTRIBUTION
Categoryfloatplane
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
I have updated this style as it appears Floatplane has made several updates that render large parts of the original style non-operational and it was hurting my eyes.
I can/will take this down should the original author update his style.
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 Night Mode
@namespace USO Archive
@author Alan Hardman, updated by zushiba 7/19/2021
@description `A complete dark theme for Floatplane. This includes all public-facing pages, and probably even styles some of the stuff only LTT and friends can access.`
@version 20180726.3.42
@license NO-REDISTRIBUTION
@preprocessor uso
==/UserStyle== */
@-moz-document domain("floatplane.com") {
:root {
--color-bg: #212326;
--color-bg-light: #2a2c2e;
/* #152335 */
--color-border: #4f555b;
--color-fg: #cdd5df;
--color-link: #008eff;
}
/* Global */
body,
.page-wrapper .route-wrapper,
.video-feed-wrapper {
background-color: var(--color-bg);
color: var(--color-fg);
}
.route-wrapper{
background: #192638 !important;
}
.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;
/* I tried not to! */
}
#part-info[id] {
color: var(--color-fg);
}
/* Channel page */
.channel-intro-wrapper .channel-intro-content .channel-intro-width-wrapper .channel-nav {
background-color: var(--color-bg-light);
box-shadow: none;
}
.channel-intro-wrapper .channel-intro-content .channel-intro-width-wrapper .channel-nav .channel-nav-item.active,
.tabs-wrapper .nav .nav-item.active {
color: var(--color-link);
}
.channel-intro-wrapper .channel-intro-content .channel-intro-width-wrapper .channel-nav .channel-nav-item:hover,
.tabs-wrapper .nav .nav-item:hover {
color: var(--color-fg);
}
.markdown-body {
color: var(--color-fg);
}
.markdown-body h1,
.markdown-body h2 {
border-color: var(--color-border);
}
/* Video page */
.video-player-wrapper {
background-image: none;
}
.generic-wrapper .generic-block,
.generic-wrapper .generic-block-padded,
.generic-wrapper .generic-block-padded-threeway {
background-color: var(--color-bg-light);
border-color: var(--color-border);
}
.video-content-wrapper .video-description-wrapper .video-description-header .video-title,
.video-content-wrapper .video-description-wrapper .video-description {
color: var(--color-fg);
}
.video-content-wrapper .video-description-wrapper .video-description-header .channel-info .channel-title {
color: var(--color-fg);
}
.video-content-wrapper .video-description-wrapper .video-description a {
color: var(--color-link);
}
.video-content-wrapper .video-description-wrapper .video-description-header {
border-color: var(--color-border);
}
.video-content-wrapper .video-description-wrapper .video-description::after,
.video-content-wrapper .video-description-wrapper .video-description.expanded::after {
background-image: linear-gradient(to top, var(--color-bg-light) 0%, rgba(255, 255, 255, 0) 70%);
}
.video-content-wrapper .textarea-wrapper textarea {
background-color: var(--color-bg-light);
border-color: var(--color-border);
color: var(--color-fg);
}
.video-content-wrapper .comments-wrapper .comment .comment-header .header-text .author,
.video-content-wrapper .comments-wrapper .comment .reply-header .header-text .author,
.video-content-wrapper .comments-wrapper .reply .comment-header .header-text .author,
.video-content-wrapper .comments-wrapper .reply .reply-header .header-text .author,
.video-content-wrapper .replies-wrapper .comment .comment-header .header-text .author,
.video-content-wrapper .replies-wrapper .comment .reply-header .header-text .author,
.video-content-wrapper .replies-wrapper .reply .comment-header .header-text .author,
.video-content-wrapper .replies-wrapper .reply .reply-header .header-text .author {
color: var(--color-link);
}
.video-content-wrapper .comments-wrapper .comment .comment-body a .video-content-wrapper .comments-wrapper .comment .reply-body a,
.video-content-wrapper .comments-wrapper .reply .comment-body a,
.video-content-wrapper .comments-wrapper .reply .reply-body a,
.video-content-wrapper .replies-wrapper .comment .comment-body a,
.video-content-wrapper .replies-wrapper .comment .reply-body a,
.video-content-wrapper .replies-wrapper .reply .comment-body a,
.video-content-wrapper .replies-wrapper .reply .reply-body a {
color: var(--color-link);
}
.video-content-wrapper .comments-wrapper .comment .comment-body,
.video-content-wrapper .comments-wrapper .comment .reply-body,
.video-content-wrapper .comments-wrapper .reply .comment-body,
.video-content-wrapper .comments-wrapper .reply .reply-body,
.video-content-wrapper .replies-wrapper .comment .comment-body,
.video-content-wrapper .replies-wrapper .comment .reply-body,
.video-content-wrapper .replies-wrapper .reply .comment-body,
.video-content-wrapper .replies-wrapper .reply .reply-body {
color: var(--color-fg);
}
.video-content-wrapper .comments-wrapper.replies-wrapper,
.video-content-wrapper .replies-wrapper.replies-wrapper {
border-color: var(--color-border);
}
.video-content-wrapper .video-list .video-list-item {
color: var(--color-fg);
}
.video-content-wrapper .video-list .video-list-item + .video-list-item {
border-color: var(--color-border);
}
/* User profile page */
/* I tried not to use !important here, but there was no way around it on this section */
.activity-feed .activity-feed-period .feed-list,
.activity-feed .activity-feed-period .feed-list .feed-item .item-content .content-comment {
color: var(--color-fg) !important;
}
.activity-feed .activity-feed-period .feed-list .feed-item .item-caption a {
color: var(--color-link) !important;
}
.activity-feed .activity-feed-period .feed-title {
color: var(--color-border) !important;
}
.activity-feed .activity-feed-period {
border-color: var(--color-border) !important;
}
.activity-feed .activity-feed-period::before,
.activity-feed .activity-feed-period:last-child::after {
background-color: var(--color-border) !important;
}
/* 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(--color-border);
}
.stats-group > .stat-item:not(:first-of-type) {
border-color: var(--color-border) !important;
}
.cms-layout .cms-pane .input-group textarea,
.cms-layout .cms-pane .input-group > input,
.cms-layout .settings-pane .input-group textarea,
.cms-layout .settings-pane .input-group > input,
.settings-layout-right .settings-pane .input-group textarea,
.settings-layout-right .settings-pane .input-group > input,
.cms-layout .cms-pane .dropdown-container > select,
.cms-layout .cms-pane .input-group > select,
.cms-layout .settings-pane .dropdown-container > select,
.cms-layout .settings-pane .input-group > select,
.settings-layout-right .settings-pane .dropdown-container > select,
.settings-layout-right .settings-pane .input-group > select {
background-color: var(--color-bg-light);
border-color: var(--color-border);
color: var(--color-fg);
}
.cms-layout .cms-pane .input-group .custom-text + label,
.cms-layout .cms-pane .input-group select + label,
.cms-layout .cms-pane .input-group textarea + label,
.cms-layout .cms-pane .input-group > input + label,
.cms-layout .settings-pane .input-group .custom-text + label,
.cms-layout .settings-pane .input-group select + label,
.cms-layout .settings-pane .input-group textarea + label,
.cms-layout .settings-pane .input-group > input + label,
.settings-layout-right .settings-pane .input-group .custom-text + label,
.settings-layout-right .settings-pane .input-group select + label,
.settings-layout-right .settings-pane .input-group textarea + label,
.settings-layout-right .settings-pane .input-group > input + label,
.cms-layout .cms-pane .col-section > .row-section > .row-title.subtitle,
.cms-layout .settings-pane .col-section > .row-section > .row-title.subtitle,
.settings-layout-right .settings-pane .col-section > .row-section > .row-title.subtitle {
color: var(--color-fg);
}
.settings-general .username,
.stats-group > .stat-item > .value {
color: var(--color-fg) !important;
}
.cms-layout .cms-pane .col-section.darker,
.cms-layout .settings-pane .col-section.darker,
.settings-layout-right .settings-pane .col-section.darker,
.white-background[class] {
background-color: var(--color-bg-light);
}
.cms-layout .cms-pane .col-section > .row-section p.light,
.cms-layout .settings-pane .col-section > .row-section p.light,
.settings-layout-right .settings-pane .col-section > .row-section p.light,
.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 {
color: var(--color-fg);
}
.cms-layout .cms-pane .vertical-list .list-item > .list-button.refresh,
.cms-layout .cms-pane .vertical-list .list-item > .list-button.remove,
.cms-layout .settings-pane .vertical-list .list-item > .list-button.refresh,
.cms-layout .settings-pane .vertical-list .l...