A cozy brown-ish color-scheme Pinterest featuring a squared UI
Toasty Square Pinterest by killerqueer
Details
Authorkillerqueer
LicenseMIT
Categorypinterest
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- Allows the user to specify a custom font
- You can use any font you have installed on your computer for this
- Option to shrink the top-bar's height
- turned on by default
You can find this, and other styles on my gitea repo I try to update it frequently.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Toasty Square Pinterest
@namespace gitea.com/selenecosmia
@homepageURL https://gitea.com/selenecosmia/stylus-usercss
@author SeleneCosmia
@description `A new, customizable style for Pinterest featuring boxed edges and a toasty dark brown theme`
@version 0.2.5-1
@license MIT
@preprocessor stylus
@var text fontFamily "Font Family" "Roboto"
@var checkbox miniHeader "Condense Header Height" 1
@var select transImage "Background Style for Transparent Images" [
"trans_bg:Transparent*",
"check_bg:Checkerboard",
"black_bg:Black",
"white_bg:White"]
@var select notifCount "Style for Notifications in Header-Bar" [
"rounded:Squircle*",
"fullcirc:Circle",
"disabled:Hidden"
]
@var checkbox searchHide "Hide Search Suggestions Popup-Menu?" 0
@var select carousel "Styling for home-feed carousel bar" [
"disabled:Hidden",
"unchange:Leave As Is*",
]
==/UserStyle== */
// Toasted Color-Scheme -----||
$back = #2d2424
$red = #cf2241
$orange = #f07942
$yellow = #e39c45
$green = #949f6b
$blue = #716c97
$pink = #ae3f8a
$red2 = #e3556f
$orange2 = #f49d75
$yellow2 = #edbf86
$lime = #b0b893
$skyblue = #9894b3
$magenta = #ca6bac
$fore = #ffe9c7
$purple = rgba(invert($pink - $green + 25), 1)
// --------------------------||
squared()
border-radius: 0px 0 0 0px !important
popup = @block {
filter: invert(0);
border-radius: 0px !important;
}
@-moz-document domain("pinterest.com") {
@keyframes revealHover {
0% { backdrop-filter: blur(5px) }
33% { backdrop-filter: blur(4px) }
50% { backdrop-filter: blur(3px) }
100% { backdrop-filter: none }
}
*, h2 {
font-family: fontFamily !important;
}
div.Lfz > div {
background: rgba(invert($blue), 0.2);
> * {
padding: 0;
}
}
img.hCL.kVc.L4E.MIw.N7A.XiG {
filter: invert(1);
}
if carousel == disabled {
div.moreIdeasBoardRepCarousel {
display: none
height: 0px
}
[data-test-id="navigation-fab-container"] {
display: none;
}
}
// -----------------------------------------------------------------------------------------------------||
// heading config --------------------------------------------------------------------------------------||
// pinterest header-bar logo
a.Lfz > div:nth-child(1) {
> svg {
color: invert($red);
}
}
// header-bar
[data-test-id="header-background"] {
background-color: invert($back - 9) !important;
border-bottom: 3px solid invert($fore - 75);
}
//header search-box
#searchBoxContainer > div {
squared();
background-color: invert($back) !important;
}
[data-test-id="search-cancel"] > * svg {
color: invert($fore) !important;
&:hover {
color: invert($red) !important;
}
}
.KS5.hs0.mQ8.un8.C9i.TB_ > [aria-label="Notifications"] {
background-color: invert($red)
}
// Notification Bubbles on header-bar bell and message icons
.XiG.zI7.iyn.Hsu > .Jea.KS5.Lfz.MIw.mQ8.yBD.zI7.iyn.Hsu {
if notifCount == rounded {
border-radius: 5px !important;
} else if notifCount == fullcirc {
border-radius: 10px !important;
} else if notifCount == disabled {
display: none !important
}
background-color: rgba(invert(lighten($red, 24%)), .85)
backdrop-filter: blur(2px)
}
input {
&::placeholder {
color: invert($fore) !important;
}
&::selection {
color: white
background-color: invert($lime) !important;
}
}
.Eqh.fZz.fev.uom.zI7.iyn.Hsu {
squared !important
}
#SuggestionsMenu {
if searchHide {
display: none !important
} else {
squared()
left: 0
:nth-child(1):not(.tBJ) {
background: invert($back) !important
* {
squared()
}
.Jea.KS5.MIw.QLY.Zr3 {
backdrop-filter: blur(5px);
&:hover {
animation: 500ms revealHover forwards linear running 1;
}
}
}
}
}
// end header config -----------------------------------------------------------------------------------||
// -----------------------------------------------------------------------------------------------------||
[data-test-id="closeup-body-image-container"],
[data-test-id="closeup-body-image-container"] > div {
squared()
}
[aria-label="Pin Saved"],
[aria-label="Pin Saved"] * {
background-color: invert($green) !important
}
[data-test-id="PinBetterSaveButton"] > button,
[data-test-id="PinBetterSaveButton"] > button > div {
background-color: rgba(invert($red2), 0.95)
border-radius: 0px !important;
&:hover {
background: invert($fore)
box-shadow: inset 0 0 2px invert($red)
}
}
/*
.vbI[role="list"] {
box-sizing: border-box
position: unset
margin: auto !important
width: 100vw !important
}
*/
[data-test-id="unavailable-pin"] {
display: none
}
[aria-label="save button"] > div {
&:hover {
background: invert($red)
}
}
[data-test-id="closeup-image"] > div > div {
background: none !important;
}
[data-test-id="closeup-body-image-container"],
[data-test-id="non-story-pin-image"] > div {
if transImage == trans_bg {
background-color: transparent !important;
} else if transImage == check_bg {
background-color: none !important;
background-image: embedurl("https://gitea.com/selenecosmia/stylus-usercss/raw/branch/main/assets/pattern.svg") !important;
background-repeat: repeat;
background-clip: padding-box;
} else if transImage == black_bg {
background-color: black !important;
} else if transImage == white_bg {
background-color: white !important;
}
}
.Dl7 > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
height: 666px;
> div:nth-child(1) > div:nth-child(1) {
height: 5em !important;
}
}
div[aria-label="Popover"] {
div[data-test-id="board-picker-flyout"] {
height: 666px !important;
div.hs0.un8.C9i.TB_ {
height: 666px !important;
}
}
squared();
display: flex;
height: 666px !important;
border: 2px solid invert($fore);
> * .Cii.zI7 {
min-height: 466px !important;
} > * {
background-color: invert($back);
squared();
* {
color: invert($fore);
background: rgba(invert($back), 0);
squared();
}
}
}
a.INd > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
border: none !important;
}
div.ALa {
box-shadow: none;
&:nth-child(4) {
position: relative;
height: 80px !important;
color: invert($pink);
}
}
.ALa.sLG.zI7.iyn.Hsu * * {
backdrop-filter: box-shadow(0 0 5px $pink) !important;
}
[data-test-id="create-board"] * {
background: lighten(invert($back), 10) !important;
}
#HeaderAccountOptionsFlyout {
squared();
background: rgba(invert($green - 50), 0.9);
backdrop-filter: blur(8px);
border: 2px solid invert($fore);
border-top: none;
box-shadow: none !important;
top: 22px
}
[data-test-id="HeaderAccountsOptionsFlyout"] > div .YDx {
box-shadow: none !important
}
.OVX {
squared();
> div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
squared();
}
}
.OVX > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
border-radius: 0px !important;
> div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
border-radius: 0px !important;
}
}
.OVX > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
.OVX > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
squared();
}
div.XiG.zI7.iyn.Hsu,
div.Jea.XiG.mQ8.zI7.iyn.Hsu,
div.Jea.mQ8.zI7.iyn.Hsu,
div.xuA:nth-child(5) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > button:nth-child(1) > div:nth-child(1),
div.xuA:nth-child(5) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > button:nth-child(1) > div:nth-child(1) {
squared();
}
div.CP0:nth-child(1) > * > * > * > div:nth-child(2) {
display: none;
}
[href$="_shopping_list/"] {
display: none
}
div.INd.Jea.KS5.imm.jzS.mQ8.zI7.iyn.Hsu {
border-radius: 100px !important;
position: relative;
top: -0.6em;
left: -0.6em;
filter: opacity(0.2);
}
// text-input boxes
input[type="text"],
textarea {
{popup}
background: rgba(invert($fore), 0.4);
}
// user profile heading
[data-test-id="profile-header"] {
display: flex;
* > * > * > * > * > * > * {
border-radius: 15px / 85% !important
}
}
// user name title on profile
h1 > [data-test-id="profile-name"] {
color: invert($fore) - 15
}
// pinterest logo in profile sub-heading
.xuA > svg[aria-label="pinterest"] {
color: rgba(invert($red),0.9)
}
// pinterest board pictures on profile page
.MRE > * > * > * > .MIw {
border: none !important;
}
// top bar when scrolling on user profile homepage
.qiB {
top: 0px !important;
backdrop-filter: blur(6px);
div > .fZz {
background-color: rgba(invert($fore - 50), 0.85) !important;
max-height: 60px
}
}
// created & saved links on profile page
#_created-profile-tab > * *
#_saved-profile-tab > * * {
background-color: transparent !important;
top: 2.3px;
color: invert($back);
}
.mainContainer > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
z-index 1000;
position: relative;
bottom: 54px;
}
.RCK {
border-radius: 16px / 30%;
}
.ZHw {
background: invert(darken(saturate(mix(lighten($back, 20), $fore, 75%), 10), 25));
squared();
}
div.b8T:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) >...