☰

Rainbow Waterfall.Social

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]]*/
}