Create a custom theme for Waterfall.social. Also features some minor changes such as sticky navigation.
/* ==UserStyle==
@name Rainbow Waterfall.Social
@namespace https://greasyfork.org/en/users/314535
@version 0.1.7
@description Create a custom theme for Waterfall.social. Also features some minor changes such as sticky navigation.
@author https://greasyfork.org/en/users/314535
@advanced dropdown font "Font Family" {
font1 "Default (Lato)" <<<EOT "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" EOT;
font2 "Custom" <<<EOT var(--custom-font) EOT;
font3 "Arial" <<<EOT arial, sans-serif EOT;
font4 "Verdana" <<<EOT Verdana, Geneva, Tahoma, sans-serif EOT;
font5 "Helvetica" <<<EOT 'Helvetica Neue', Arial, Helvetica, sans-serif EOT;
font6 "Monospace" <<<EOT monospace EOT;
}
@advanced text customfont "Custom Font (Select 'Custom' Above)" "OpenDyslexic"
@advanced text fontsize "Font Size (px)" "16"
@advanced text bgimage "Background Image (URL)" ""
@advanced dropdown bgpos "Background Position" {
bgpos1 "Center" <<<EOT center EOT;
bgpos2 "Top Left" <<<EOT top left EOT;
bgpos3 "Top Right" <<<EOT top right EOT;
bgpos4 "Bottom Left" <<<EOT bottom left EOT;
bgpos5 "Bottom Right" <<<EOT bottom right EOT;
}
@advanced dropdown bgattachment "Background Attachment" {
bgattachment1 "Fixed" <<<EOT fixed EOT;
bgattachment2 "Scroll" <<<EOT scroll EOT;
}
@advanced dropdown bgrepeat "Background Repeat" {
bgrepeat1 "Repeat" <<<EOT repeat EOT;
bgrepeat2 "Repeat Vertically" <<<EOT repeat-y EOT;
bgrepeat3 "Repeat Horizontally" <<<EOT repeat-x EOT;
bgrepeat4 "Don't Repeat" <<<EOT no-repeat EOT;
}
@advanced dropdown bgsize "Background Size" {
bgsize1 "Cover" <<<EOT cover EOT;
bgsize2 "Auto" <<<EOT auto EOT;
}
@advanced color bg "Background Color" #1b1d1e
@advanced color nav "Navigation Background" #2e3437
@advanced color navicons "Navigation Icons" #7cd8cb
@advanced color card "Posts Color" #2f2f32
@advanced color text "Text Color" #d0d0d0
@advanced color cardheader "Posts Header Color" #282728
@advanced color muted "Muted Text Color" #918d91
@advanced color link "Links Color" #36d0db
@advanced color linkhover "Link Hover Color" #ffffff
@advanced color hazardyellow "Blacklist Yellow Stripes" #351f1f
@advanced color hazardgrey "Blacklist Grey Stripes" #3e2020
@advanced color red "Red" #f95363
@advanced color orange "Orange" #ff821a
@advanced color yellow "Yellow" #ffc720
@advanced color green "Green" #36d25a
@advanced color blue "Blue" #4aa1ff
@advanced color purple "Purple" #a275f4
@advanced color pink "Pink" #fb6eae
@advanced dropdown featured "Featured Post" {
featured1 "Show" <<<EOT EOT;
featured2 "Hide" <<<EOT
/*hide featured post*\/
.featuredPost {
display: none;
} EOT;
}
==/UserStyle== */
@-moz-document regexp("(https|http?):\\/\\/(.)*waterfall\\.social(.)*") {
:root {
--font-family-sans-serif: /*[[font]]*/;
--font-size: /*[[fontsize]]*/px;
--custom-font: /*[[customfont]]*/;
--background: /*[[bg]]*/;
--card: /*[[card]]*/;
--card-header: /*[[cardheader]]*/;
--link: /*[[link]]*/;
--link-hover: /*[[linkhover]]*/;
--muted-text: /*[[muted]]*/;
--hazard-one: /*[[hazardyellow]]*/;
--hazard-two: /*[[hazardgrey]]*/;
--nav-bg: /*[[nav]]*/;
--nav-icons: /*[[navicons]]*/;
--nav-icons-rgb: /*[[navicons-rgb]]*/;
--background-image: url(/*[[bgimage]]*/);
--bg-attachment: /*[[bgattachment]]*/;
--bg-position: /*[[bgpos]]*/;
--bg-repeat: /*[[bgrepeat]]*/;
--bg-size: /*[[bgsize]]*/;
--text: /*[[text]]*/;
--red: /*[[red]]*/;
--orange: /*[[orange]]*/;
--yellow: /*[[yellow]]*/;
--green: /*[[green]]*/;
--blue: /*[[blue]]*/;
--purple: /*[[purple]]*/;
--pink: /*[[pink]]*/;
}
body {
font-family: var(--font-family-sans-serif);
color: var(--text);
background: var(--background) var(--background-image);
background-attachment: var(--bg-attachment);
background-position: var(--bg-position);
background-size: var(--bg-size);
background-repeat: var(--bg-repeat);
font-size: var(--font-size);
}
a,
a:visited {
color: var(--link);
}
a:hover,
a:focus {
color: var(--link-hover);
}
a.switch-blog {
color: var(--link) !important;
}
a.switch-blog:hover,
a.switch-blog:focus {
color: var(--link-hover) !important;
}
.card {
background-color: var(--card);
}
.text-muted,
.dropdown-header {
color: var(--muted-text) !important
}
.already-reblogged {
color: var(--green)
}
.card-header {
background-color: var(--card-header);
}
.post-footer > p {
word-break: break-word;
clear: both;
}
.post-footer > p .source-post-link {
float: right;
margin-bottom: 1em;
font-style: italic;
}
.post-footer > p + .float-left,
.post-footer > p + .float-right {
clear: both;
}
.post-footer > p > a:not(.source-post-link) {
display: inline-block;
margin-right: 1em;
padding: 2px 5px;
margin-bottom: 0.25em;
border-radius: 1em;
opacity: 0.75;
transition: opacity 0.3s, padding 0.2s, background-color 0.2s;
}
/*rainbow hover*/
.post-footer > p > a:not(.source-post-link):hover,
.post-footer > p > a:not(.source-post-link):focus {
color: var(--red);
opacity: 1;
text-decoration: underline;
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+2):hover,
.footer-button.fa-pencil-alt:hover,
.footer-button.fa-pencil-alt:focus {
color: var(--orange)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+3):hover {
color: var(--yellow)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+4):hover {
color: var(--green)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+5):hover {
color: var(--blue)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+6):hover {
color: var(--purple)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+7):hover {
color: var(--pink)
}
.post-footer > p > a:not(.source-post-link):focus {
color: var(--card) !important;
background-color: var(--red);
opacity: 1;
outline: none;
padding: 2px 12px;
text-decoration: none;
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+2):focus {
background-color: var(--orange)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+3):focus {
background-color: var(--yellow)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+4):focus {
background-color: var(--green)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+5):focus {
background-color: var(--blue)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+6):focus {
background-color: var(--purple)
}
.post-footer > p > a:not(.source-post-link):nth-child(7n+7):focus {
background-color: var(--pink)
}
.post-footer > p > a:not(.source-post-link) {
margin-right: 1em;
}
.post-footer > p > a:last-child {
margin-right: 0;
}
.make-post-container .row {
overflow: hidden;
border-radius: calc(0.25rem - 1px);
}
.make-post-button {
border-right: 1px;
border-radius: 0.0625rem;
padding: 0;
position: relative;
z-index: 2;
}
.badge-info {
color: var(--card);
background: var(--muted-text);
}
.badge-light {
color: var(--card);
background-color: var(--text);
}
.badge-info.pronoun {
color: #000;
background-image: linear-gradient(to left, #ffc1cc, #d4aae2, #84bafc, #b9efb9, #efecbf, #fcd285, #fe8686);
opacity: 0.5;
transition: opacity 0.2s;
}
.badge-info:hover {
opacity: 1;
}
.make-post-button .card-title {
margin: 0;
}
.make-post-button .card-title a {
position: relative;
display: flex;
padding: 0.5em 0.5em 1.2em 0.5em;
justify-content: center;
}
.make-post-button > h6 {
position: absolute;
width: 100%;
bottom: 1em;
margin-top: -1em;
margin-bottom: -0.5em;
display: block;
z-index: -1;
}
.make-post-button i {
transition: transform 0.4s;
}
.make-post-button .card-title a {
position: relative;
}
.make-post-button .card-title a i::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.make-post-button a:hover i,
.make-post-button a:focus i {
transform: scale(1.2);
}
.make-post-button.make-text a {
color: var(--red);
}
.make-post-button.make-image a {
color: var(--orange);
}
.make-post-button.make-art a,
.card-header .fa-paint-brush.float-right {
color: var(--yellow);
}
.make-post-button.make-video a {
color: var(--green);
}
.make-post-button.make-audio a {
color: var(--blue);
}
.make-post-button.make-quote a,
.footer-button.fa-comment:hover,
.footer-button.fa-comment:focus {
color: var(--purple);
}
.make-post-button.make-link a,
.footer-button.fa-link:hover,
.footer-button.fa-link:focus,
.footer-button.fa-heart:hover,
.footer-button.fa-heart:focus {
color: var(--pink);
}
.footer-button.fa-heart.liked-post:hover,
.footer-button.fa-heart.liked-post:focus,
.footer-button.fa-reblog-alt:hover,
.footer-button.fa-reblog-alt:focus {
color: var(--text);
opacity: 0.5;
}
#searchInput {
background: var(--card);
color: var(--text);
border-color: var(--background);
}
nav.navbar {
background: var(--nav-bg) !important;
color: var(--nav-icons) !important;
border-color: var(--nav-bg) !important;
}
.btn-primary {
color: var(--card) !important;
background-color: var(--link);
font-weight: bold;
}
.btn-primary:hover,
.btn-primary:focus {
color: var(--card);
background-color: var(--link-hover);
}
.btn-light {
background: var(--card-header) !important;
color: var(--muted-text) !important;
border-color: var(--nav-bg) !important;
transition: background 0.2s, color 0.2s;
}
.btn-light:hover,
.btn-light:focus {
background: var(--nav-bg) !important;
color: var(--nav-icons) !important;
}
.wf-note {
border: none !important;
}
.navbar-icon {
color: var(--nav-icons);
opacity: 0.5;
transition: opacity 0.2s;
}
.btn-outline-secondary {
color: var(--muted-text);
border-color: var(--muted-text);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
color: var(--card-header);
border-color: var(--card-header);
background-color: var(--text);
}
#SearchForm .btn-outline-secondary {
color: var(--card);
background: var(--green);
border-color: var(--card);
filter: grayscale(100%);
opacity: 0.5;
transition: 0.2s filter, 0.2s opacity;
}
#SearchForm .btn-outline-secondary:hover,
#SearchForm .btn-outline-secondary:focus {
opacity: 1;
filter: grayscale(0%);
}
#WFNav .navbar-nav .nav-link {
color: rgba(var(--nav-icons-rgb), 0.5);
transition: 0.2s color;
}
#WFNav .navbar-nav .nav-link:hover,
#WFNav .navbar-nav .nav-link:focus {
color: rgba(var(--nav-icons-rgb), 1);
}
.navbar-icon:hover,
.navbar-icon:focus {
opacity: 1;
}
#quick-form {
box-shadow: 5px 5px 0px var(--background);
border-radius: 5px;
}
#quick-reblog-button {
background: var(--blue);
color: var(--card);
font-weight: bold;
transition: 0.2s background-color;
border-color: var(--card-header)
}
#quick-reblog-button:hover,
#quick-reblog-button:focus {
background: var(--green);
}
/*pure css waterfall icon*/
.navbar-brand {
--fa-primary-color: #7cd8cb;
--fa-secondary-color: #fff;
position: relative;
color: var(--nav-icons) !important;
padding-left: 50px;
transition: background-color 0.3s;
}
.navbar-brand:hover {
background-image: linear-gradient(to left, var(--pink), var(--purple), var(--blue), var(--green), var(--yellow), var(--orange), var(--red), var(--red));
background-size: 800% 800%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow 5s ease infinite;
}
@keyframes rainbow {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 25%
}
100% {
background-position: 0% 50%
}
}
.navbar-brand::before,
.navbar-brand::after {
font-family: 'Font Awesome 6 Duotone';
font-weight: 900;
position: absolute;
}
.navbar-brand::before {
content: "";
color: var(--fa-primary-color, inherit);
-webkit-text-fill-color: var(--fa-primary-color, inherit);
opacity: 1;
padding: 3px 7px 7px 7px;
margin-right: 0.5em;
background: linear-gradient(to bottom, #b3b9d5 0%, #087daa 100%);
border-radius: 8px;
height: 36px;
width: 36px;
box-sizing: border-box;
left: 0px;
top: 0px
}
.navbar-brand::after {
content: '';
top: 3px;
left: 7px;
color: var(--fa-secondary-color, inherit);
-webkit-text-fill-color: var(--fa-secondary-color, inherit);
opacity: 1;
}
/*dropdown menus*/
.dropdown-menu {
background-color: var(--card);
border-color: var(--nav-bg);
}
.dropdown-menu a {
color: var(--link)
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--card-header);
color: var(--link);
}
.tag-warning {
background: repeating-linear-gradient( 45deg, var(--hazard-two), var(--hazard-two) 10px, var(--hazard-one) 10px, var(--hazard-one) 20px)
}
/*spacing fix*/
.timestamp + br + * {
margin-top: 0.5em
}
.img-fluid {
background: none;
}
img.img-fluid {
background: var(--background)
}
.card-body .img-fluid {
background: var(--card)
}
#PostForm .ql-editor {
color: #000;
}
#PostForm a {
color: #06c !important;
}
#PostForm a:hover {
color: #444 !important;
}
/*quick reblog popup*/
#quick-text,
#quick-text .ql-editor,
#quick-tags {
background-color: var(--card-header);
color: var(--text);
border-color: var(--background);
}
#quick-text .ql-editor {
font-family: var(--font-family-sans-serif);
}
#quick-text .ql-editor
#quick-tags {
background-color: var(--card);
}
/*patreon link styling*/
.patreon-link {
color: var(--card);
background: var(--yellow);
padding: 3px 5px;
font-weight: bold;
border-radius: 3px;
transition: 0.3s background;
}
.patreon-link:hover,
.patreon-link:focus {
color: var(--card) !important;
background: var(--orange);
}
/*fixed navbar*/
.navbar {
position: fixed !important;
top: 0px;
left: 0px;
width: 100%;
z-index: 200;
}
/*adjusts content padding to account for fixed header*/
body > .container-fluid {
margin-top: 4em;
}
body > .container {
margin-top: 4.5em
}
/* condensed, wider blog dropdown so things don't get stuck off screen.
- list of blogs to switch to will scroll when you have 9 blogs or more to choose from.
- hides 'stats for [url]' label
*/
div.dropdown-menu.show[aria-labelledby="blogsDropdown"] {
width: 25rem !important;
padding: 0.5rem;
}
div.dropdown-menu.show[aria-labelledby="blogsDropdown"] > .dropdown-item {
width: calc(50% - 0.2rem);
float: left;
margin: 0 0.2rem 0 0;
padding: 0.25rem 1rem;
}
div.dropdown-menu.show[aria-labelledby="blogsDropdown"] .dropdown-item:first-child h5.text-center {
display: none;
}
div.dropdown-menu.w-auto.show > .dropdown-item > .img-fluid.avatar {
display: block;
margin-right: auto;
margin-left: auto;
}
div.dropdown-menu.w-auto.show .dropdown-item h5 {
overflow: hidden;
width: 100%;
white-space: normal !important;
word-wrap: break-word !important;
}
/*hides divider line*/
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .dropdown-divider {
display: none;
}
/*fixes height of 'switch blog to...' label */
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .dropdown-header {
height: 2rem;
}
/* styling for blog list */
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .list-group.bloglist {
list-style: none;
width: 50%;
max-height: 18rem;
overflow: auto;
}
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .list-group.bloglist li a {
width: 100%;
overflow: hidden;
height: 2.5rem;
padding: 0.25rem 0.5rem;
}
/*blogs dropdown scrollbar settings*/
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .list-group {
scrollbar-width: thin;
}
div.dropdown-menu.w-auto.show[aria-labelledby="blogsDropdown"] .list-group::-webkit-scrollbar {
width: 10px;
}
/*sticky sidebar for blogs */
.container-fluid > .row > .d-none.d-lg-block[style="width:300px;"] {
position: sticky;
top: 4.2rem;
max-height: calc(100vh - 5.2rem);
overflow-y: auto;
padding-right: 0.5rem;
width: calc(300px + 0.5rem) !important;
}
.container-fluid > .row > .d-none.d-lg-block[style="width:300px;"] {
scrollbar-width: thin;
}
.container-fluid > .row > .d-none.d-lg-block[style="width:300px;"]::-webkit-scrollbar {
width: 10px;
}
.blog-desc {
color: var(--text);
}
/*displays blog info instead of hiding when the window size gets too small*/
@media (max-width: 995px) {
.container-fluid > .row > .d-none.d-lg-block[style="width:300px;"] {
display: block !important;
flex: 0 0 100%;
max-width: 100%;
padding: 0 15px 3rem;
position: static;
max-height: none;
}
}
@media (max-width: 768px) {
a#blogsDropdown,
div.dropdown-menu.show[aria-labelledby="blogsDropdown"] {
flex: 0 0 100%;
}
#WFNav .nav-item:last-child {
flex-wrap: wrap;
}
body > nav.navbar {
max-height: 100%;
overflow: auto;
}
body > nav.navbar {
scrollbar-width: thin;
}
body > nav.navbar::-webkit-scrollbar {
width: 10px;
}
}
/*[[featured]]*/
}