coomer.party by Ephellon

/* ==UserStyle==
@name         coomer.party
@version      20230506.16.11
@namespace    userstyles.world/user/Ephellon
@description  Styles the site like OnlyFans
@author       Ephellon
@license      No License
==/UserStyle== */

@-moz-document domain("coomer.party") {
/* Everything */
:root {
    --of-black: #161618;
    --of-white: #f6f7f8;
    --of-f-white: #f6f7f844;
    --of-t-white: #f6f7f80f;
    --of-grey: #8a96a3;
    --of-blue: #00aff0;
    --of-d-blue: #0091ea;
    --of-t-blue: #0091ea0f;
    --of-red: #ff6961;
    --of-t-red: #ff69610f;
}

body,
main {
    background: var(--of-black);
    color: var(--of-white);
    font-family: NotoColorEmoji, Roboto, sans-serif !important;
}

* {
    color: var(--of-white);
}

a,
a:hover {
    background: #0000 !important;
    border: none;
    color: var(--of-blue) !important;
    text-decoration: none;
}

a:hover {
    color: var(--of-d-blue) !important;
}

input[type="text"i] {
    background: var(--of-black) !important;
    border: 1px solid var(--of-f-white) !important;
    box-shadow: none !important;
    font-size: 1em;
    text-align: left;

    margin: 0;
    padding: 0 1em;
}

input[type="text"i]:hover,
input[type="text"i]:is(:focus, :focus-within) {
    border-color: var(--of-blue) !important;
}

select,
button,
:is(.global-header, .global-footer, li) a:not([href*="?"]) {
    background: var(--of-t-white);
    border: 1px solid #0000;
    border-radius: 5em;
    box-shadow: none;
    color: var(--of-f-white) !important;

    margin: 0 .5em 0 0;
    padding: .5em;

    transition: all 0s !important;
}

select:hover,
button:hover,
:is(.global-header, .global-footer, li) a:not([href*="?"]):is(:hover, :focus) {
    background: var(--of-t-blue) !important;
    color: var(--of-blue) !important;
}

button:hover * {
    color: var(--of-blue) !important;
}

button.post__flag:hover {
    background: var(--of-t-red) !important;
    color: var(--of-red) !important;
}

button.post__flag * {
    color: var(--of-red) !important;
}

:is(.global-header, .global-footer, li) a {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--of-white) !important;
}

small {
    color: var(--of-grey) !important;
}
}

@-moz-document domain("coomer.party") {
/* Main Page */
header.user-card {
    background: var(--of-black);
    border: none;
    box-shadow: none !important;
}

.user-card:not(header),
.user-card:not(header):is(:hover, :focus, :focus-within) {
    background: var(--of-black);
    border: 1px solid var(--of-f-white);
    box-shadow: none !important;

    padding: .5em;
}

.user-card:not(header) :is(.user-card__icon, .user-card__icon:hover) {
    border: 1px solid var(--of-white);
    border-radius: 3em;

    height: 3em;
    width: 3em;
}

#search-form {
    background: var(--of-black);
}

#search-form > * {
    display: table;

    margin: 0 0 1em;
}

#search-form * {
    text-align: left;
}
}

@-moz-document domain("coomer.party") {
/* Post header */
.site-section--user {
    padding: 1vw 10vw;

    width: 100vw !important;
}

.user-header {
    margin: 0 0 1.5em !important;

    left: 50%;
    transform: translate(-50%);

    height: 15em;
    width: 100%;
}

.user-header__background::before {
    content: " ";

    background: linear-gradient(to bottom, #0008, #0000);
    display: inline-block;

    position: absolute;
    left: 0;
    top: 0;

    height: 100%;
    width: 100%;
}

.user-header__avatar {
    border: 3px solid var(--of-white) !important;
    border-radius: 100px;

    position: absolute;
    left: 1em;
    bottom: 1em;

    max-height: 100px;
    max-width: 100px;
}

.user-header__info {
    margin: 0;
    padding: 1em 3em;
}

.user-header__info * {
    color: var(--of-white);
}

.user-header__name {
    position: fixed;
    left: 2em;
    top: 0;

    margin: 0;
    padding: 0;

    width: 100%;
}

.user-header__actions {
    position: fixed;
    left: 2em;
    top: 2em;

    margin: 0;
    padding: 0;
}

.user-header__actions > * {
    display: inline-block;

    margin: 0;
    padding: .1em;
}

.user-header__actions > *:not(:last-child)::after {
    content: "·";

    color: var(--of-white);
}
}

@-moz-document domain("coomer.party") {
/* Post paginator(s) */
.paginator * {
    color: var(--of-grey) !important;
}

.paginator li {
    color: var(--of-white) !important;
}

.search-input {
    margin: 3em 1em !important;

    height: 3em;
    width: 25em;
}

.search-input:hover {
    border-color: var(--of-white) !important;
}

.search-input:focus {
    border-color: var(--of-blue) !important;
}
}

@-moz-document domain("coomer.party") {
/* Posts */
.post-card,
.post-card:is(:hover, :focus, :focus-within) {
    --card-size: 70%;

    background: var(--of-black);
    border: 1px solid var(--of-f-white);
    border-radius: 0;
    box-shadow: none;
    display: block;

    margin: -1em 0 0;

    min-height: 15em;
    height: 30em;
    width: 75%;
}

.post-card:not(:first-child) {
    border-top: none;
}

.post-card::before {
    content: url(/static/onlyfans.svg);

    color: var(--of-white);
    display: inline-block;
    text-transform: capitalize;

    position: relative;
    margin: 1em 1em 0;

    height: 2em;
    width: 2em;
}

.post-card::after {
    content: "@" attr(data-user);

    background: var(--of-black);
    color: var(--of-f-white);
    display: inline-block;

    position: relative;
    margin: 0 1em;
    z-index: 9;

    width: 100%;
}

.post-card__view {
    display: none;
}

.post-card__image-container {
    top: 7em;

    height: auto;
}

.post-card:hover .post-card__image-container,
.post-card:focus-within .post-card__image-container {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.post-card__button {
    display: none;
}

.post-card > *:is(header, section) {
    display: block;

    opacity: 1;
    visibility: visible;
}

.post-card > * {
    margin: 0;
    padding: 0;
}

.post-card * {
    color: var(--of-white) !important;
    font-size: 1em;
}

.post-card__header {
    margin: 0 .5em;

    max-height: 5em;
}

.post-card__header:not(.post-card__image-container ~ .post-card__header)::after {
    content: "No visual content available.";

    color: var(--of-f-white);
    display: inline-block;
    text-align: center;

    position: absolute;
    top: 50%;
    transform: translate(0, -50%);

    width: 100%;
}

.post-card__user {
    display: none;
}

.post-card__body {
    background: var(--of-black);

    width: 100%;

    position: absolute;
    bottom: 0;
    z-index: 9;
}

.post-card__body > * {
    text-align: center;

    margin: 0;
}

.post-card__body > * * {
    color: var(--of-f-white) !important;
    display: inline-block;

    margin: 0 .5em;
}

.post-card__body a {
    border: 1px solid #0000;
    border-radius: 1em;
    color: var(--of-f-white) !important;

    padding: .5em;

    transition: all 0s !important;
}

.post-card__body a:hover {
    background: var(--of-t-blue) !important;
    color: var(--of-blue) !important;
}
}

@-moz-document domain("coomer.party") {
/* Single post */
.post__user,
.post__info {
    background: var(--of-black);
    border: 1px solid #0000;
}

.post__user-profile {
    border: 3px solid var(--of-white);
    border-radius: 5em;
}

.post__body > * {
    text-align: left;

    margin: 0;
}

.post__body :is(h1, h2, h3, h4, h5, h6) {
    display: none;
}

.post__body > * *:not(a, .post__attachment) {
    color: var(--of-f-white) !important;
    display: inline-block;

    margin: 0 .5em;
}

.post__content {
    margin: 0 0 1em;
}

.post__content,
.post__content *:not(a, .post__attachment) {
    color: var(--of-white) !important;
    font-size: 150%;
}

.post__files {
    display: grid;
    grid: 1fr 1fr / 1fr 1fr;
    gap: 0;
    place-content: center;
    place-items: center;
}

.post__files * {
    display: flex !important;
}

.post__files img {
    place-self: center;
    
    max-height: 20rem;
    max-width: 20rem;
}

.post__attachment-link:is([href$=".mp4"i],[href$=".webm"i],[href$=".mkv"i],[href$=".ogg"i],[href$=".ogv"i],[href$=".avi"i],[href$=".m4v"i]) {
    background: var(--of-t-white);
    border: 1px solid var(--of-f-white);
    border-radius: 5em;
    box-shadow: none;
    color: var(--of-f-white) !important;

    margin: 0 .5em 0 0;
    padding: .5em;

    transition: all 0s !important;
}

.post__attachment-link:is([href$=".mp4"i],[href$=".webm"i],[href$=".mkv"i],[href$=".ogg"i],[href$=".ogv"i],[href$=".avi"i],[href$=".m4v"i]):is(:hover, :focus) {
    background: var(--of-t-blue) !important;
    border-color: var(--of-blue) !important;
    color: var(--of-blue) !important;
}

}