Tumblr Transparent to Opaque by wac

Tumblr Transparent to Opaque screenshot
Install Get Stylus Write a review

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

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.