A dark theme built specifically for the new react frontend for the Floatplane web app.
Floatplane Deep Dark by ulincsys
Details
Authorulincsys
LicenseCC by SA
Categoryfloatplane
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Please file issues in the GitHub repository.
Updates: Fixes for site changes as of May 22, 2023.
Adapted from the style Floatplane Night Mode by Alan Hardman, as that style has not been updated for the new react frontend.
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 floatplane.com
@version 1.5
@description A dark theme built specifically for the new react frontend for the Floatplane web app.
@author Ulincsys, Alan Hardman
==/UserStyle== */
@-moz-document domain("floatplane.com") {
:root {
--color-bg: black;
--color-bg-light: #2a2c2e;
/* #152335 */
--color-border: #4f555b;
--color-fg: #cdd5df;
--color-fg-dark: #adb4bc;
--color-link: #008eff;
--color-hover: #E95420;
--color-warning: #f6054b;
--bg: var(--color-bg);
--fg: var(--color-fg);
}
/* 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;
}
.ProfileIntroBarWrapper .shadow-box {
box-shadow: none;
}
a,
.DescriptionBodyComponent .text-container.open * a {
color: var(--color-link) !important;
}
a:hover,
.DescriptionBodyComponent .text-container.open * a:hover {
color: var(--color-hover) !important;
}
/* Logged-in home page */
.tabs-wrapper .nav {
background-color: var(--color-bg-light);
box-shadow: none;
}
/* Browse Creators page */
.ReactBrowseCreatorsPage.route-wrapper {
background-color: var(--color-bg) !important;
}
.BrowseCreatorBox {
background-color: var(--color-bg-light);
}
.BrowseCreatorBox .part-info {
color: var(--color-fg);
}
.BrowseCreatorBox:hover {
background-color: var(--color-hover);
}
browse-creators .route-wrapper {
display: flex;
justify-content: center;
}
.generic-wrapper, wrapper-container {
width: 100%;
display: flex;
justify-content: center;
}
.ReactBrowseCreatorsPage .main-container-image {
float: left !important;
width: 100%;
}
.creator-search i[class~="icon-search"] {
color: var(--color-bg) !important;
}
/* 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);
}
.ReactCreatorPlanBoxDescription, .ReactPlanBoxHeaderContainer .title, .markdown-body h1, .markdown-body .h1, .markdown-body {
color: var(--color-fg);
}
.ProfileIntroBarGeneric {
background-color: var(--color-bg);
}
.ProfileNavItem.active {
color: var(--color-hover);
}
.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;
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);
}
.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);
}
.PostTileTitle {
color: var(--color-fg);
}
.DescriptionBodyComponent .text-container.open * {
/* Fix video description text */
color: var(--color-fg) !important;
}
.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-lis...