Tumblr Transparent to Opaque by wac

Details
Authorwac
LicenseGNU GPLv3
Created
Updated
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;
}
}