Tumblr Transparent to Opaque by wac

Details

Authorwac

LicenseGNU GPLv3

Created11 months, 3 weeks ago

Updated7 months, 1 week ago

Categorytumblr

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Weekly updates

Description

Makes all transparent or translucent backgrounds the same colour as the posts

Notes

Image description: The sidebars for the Dashboard, Explore page, and Tagged page side by side with half of each being with the style and half being without. The bottom of the image shows the explore page top bar. End image description.

Compatibility with other styles/extensions

All testing done in Firefox
Tested and works with April Sylph's XKit Rewritten extensions such as Mass Deleter.
Tested with ghost's Custom Dashboard Palette, but looks very bad if you have their custom bg layout fix enabled as well. Both styles look good provided they aren't on at the same time.
Tested with April Sylph's Palettes for Tumblr extension, with no conflicts.
Does not apply to April Sylph's Outbox for Tumblr extension because userstyles cannot apply to moz-extension pages.

Currently affects

All transparent/translucent sidebars (Recommended blogs, Radar, tracked tags, etc.)
The top bar of the tagged, search, explore pages
The "no messages" part of the inbox
The activity graphs and filter
The queue control area
Post plus subscriptions (when you have none)
The "Previous" button if you have dashboard pagination enabled (see Tumblr settings)

Source code

/* ==UserStyle==
@name         Tumblr Transparent to Opaque
@version      20220825.02.05
@namespace    userstyles.world/user/wac
@description  Makes all transparent or translucent backgrounds the same colour as the posts
@author       wac
@license      GNU GPLv3
==/UserStyle== */

@-moz-document domain("www.tumblr.com") {
/* Global */

/* Permalink tweak */
.BjErQ .jk63e {
    box-shadow: none;
}

/*---------------------------------*/
/*    Semi-transparent to Opaque   */
/*---------------------------------*/
:root {
    --color-title: rgb(var(--black));
}
.e1knl > aside > div:not(#xkit-sidebar),
#xkit-sidebar > div,
#xkit-toasts > div.visible,
/* Tagged and search*/
.ZN143, .B15CE, .eCMVP .r4mzp, .pf0It,
/* Inbox */
.e1knl > div:not(#xkit-sidebar), .cQqe6,
/* Dashboard */
.x6THC, .tDrb8, .tDrb8:hover, .So6RQ .ge_yK .HphhS,
/* Activity */
.sw6Ng, .WWBSO.euKKC, .RRPPS, .FRX9k,
/* Queue */
.R0TWs,
/* Post plus */
.subscriptions {
    background-color: rgb(var(--white));
    --white-on-dark: var(--black);
    border-radius: 3px;
}

/* Titles */
.hF8Wr,
#xkit-sidebar div {
    padding-top: 10px;
}

/* Not colours */
.FZkjV, .xkit-sidebar-item {
    margin-bottom: 1em !important;
}

/* Pagination "Previous" button */
.TRX6J.PY8Tb.jIdvc {
    color: rgb(var(--navy)) !important;
    background-color: rgb(var(--white-on-dark)) !important;
}

/*---------------------------------*/
/* Semi-transparent to Transparent */
/*---------------------------------*/
/* Video post undock video */
.GDWdm {
    background-color: transparent;
}

/*---------------------------------*/
/*             Padding             */
/*---------------------------------*/
/* Titles in dashboard/timelines */
.HphhS {
    padding: 10px;
    padding-left: 20px;
}
}

@-moz-document domain("www.tumblr.com") {
/* Compatibility with my color tweaks */
/* Does not affect the Custom Dashboard userstyle by ghost, so this is still compatible with it as well */
/* This only affects the recommended tags on the explore page, and only if you have another style installed that makes them semi-transparent */
.LnVVz, .vT7_j {
    background-color: rgb(var(--navy));
}
.LnVVz {
    border-radius: 6px;
}
.vT7_j {
    border-radius: 3px;
}
}

@-moz-document url-prefix("https://www.tumblr.com/dashboard"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Dashboard */
.I_SFh {
    padding-bottom: 20px;
}

/* Radar */
.oNZY7 {
    width: 100%
}
.QfN0z {
    padding: 0;
}



}

@-moz-document url-prefix("https://www.tumblr.com/tagged") {
/* Tagged */
.e1knl > aside > div {
    /* Takes care of visual bug caused by different nesting */
    background-color: transparent !important;
}
}

@-moz-document url-prefix("https://www.tumblr.com/explore"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Explore */
.WojaA .hXMYF svg {
    fill: rgb(var(--white));
}
}

@-moz-document url-prefix("https://www.tumblr.com/search"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Search */
/* Transparent to solid */
.eCMVP, .TVEoH {
    background-color: rgb(var(--white));
    color: rgb(var(--black));
}
/* Not colours */
.eCMVP {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    margin-bottom: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.TVEoH {
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    padding: 10px;
    box-sizing: border-box;
}
.SbeG8.cXm8C {
    padding-right: 20px;
}
.x6THC .St6rj .ge_yK, .x6THC .St6rj .ge_yK .HphhS {
    margin: 0;
}

}

@-moz-document url-prefix("https://www.tumblr.com/tagged"), url-prefix("https://www.tumblr.com/explore"), url-prefix("https://www.tumblr.com/search"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Tagged, explore, and search */
.p4DiZ {
    background-color: rgb(var(--white));
    --white-on-dark: var(--black);
    color: rgb(var(--black));
    border-radius: var(--border-radius-small);
}
.WojaA .hXMYF svg use {
    --icon-color-primary: var(--accent);
}
.u2nmP {
    margin-right: 16px;
    --white-on-dark: var(--accent);
}
.SukAX [fill="RGB(var(--white-on-dark))"] {
    fill: rgb(var(--black)) !important;
}
.SukAX [fill="rgba(var(--white-on-dark), 0.40)"] {
    fill: rgba(var(--black), 0.40) !important;
}
.pf0It, .x6THC {
    padding: 16px;
}
.Rp8gp:hover:not(.xsZgg) {
    background-color: rgb(var(--accent));
}
}

@-moz-document url-prefix("https://www.tumblr.com/inbox"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Inbox */
.cQqe6 > svg {
    fill: rgba(var(--black), 0.65);
}
.cQqe6 {
    color: rgba(var(--black), 0.65);
}
.cQqe6 .TYWhv a {
    color: rgba(var(--black), 0.4);
}
}

@-moz-document url-prefix("https://www.tumblr.com/blog/view") {
/* Blog view */
.B15CE {
    background: var(--color-bluespace-card-background);
}
}

@-moz-document url-prefix("https://www.tumblr.com/blog/view/"), regexp("https:\\/\\/www\\.tumblr\\.com\\/.*\\/activity.*") {
/* Activity */
.sw6Ng, .FRX9k {
    margin: 0;
    padding: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.RRPPS, .hBWm5, .Exysv {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.RRPPS { 
    padding-bottom: 15px;
}

.WWBSO.euKKC {
    background-color: rgb(var(--white)) !important;
}
[style="background: rgba(255, 255, 255, 0) none repeat scroll 0% 0%; box-shadow: 0px 0px 0px 3px RGB(var(--accent)) inset;"] ._y4kh {
    background-color: rgba(var(--accent), 0.2);
}
}

@-moz-document url-prefix("https://www.tumblr.com/blog/view/"), regexp("https:\\/\\/www\\.tumblr\\.com\\/.*\\/queue") {
/* Queue */
.FXhvb, .suxlE, select {
    border: 2px solid rgb(var(--accent));
    background-color: rgba(var(--accent), 0.2);
    color: rgb(var(--accent));
    border-radius: 3px;
}

}

@-moz-document url-prefix("https://www.tumblr.com/settings/subscriptions"), url-prefix("https://www.tumblr.com/blog/view/") {
/* Post plus */
.qJDLB {
    padding-left: 16px;
    padding-top: 16px;
}
}

Reviews

No reviews yet.