/* Font Faces */
@font-face {
font-family: "Roboto";
src: url("https://static.theboylusts.com/fonts/roboto/roboto.eot");
src: url("https://static.theboylusts.com/fonts/roboto/roboto.eot?#iefix") format("embedded-opentype"),
     url("https://static.theboylusts.com/fonts/roboto/roboto.woff") format("woff"),
     url("https://static.theboylusts.com/fonts/roboto/roboto.ttf") format("truetype"),
     url("https://static.theboylusts.com/fonts/roboto/roboto.svg#Roboto") format("svg");
font-weight: normal;
font-style: normal;
-webkit-font-feature-settings: "kern", "liga", "case";
-moz-font-feature-settings: "kern=1", "liga=1", "case=1";
-moz-font-feature-settings: "kern", "liga" , "case";
-moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
font-feature-settings: "kern", "liga", "case";
font-display: swap;
}
/* Themes */
:root {
--bg-color: #131111;
--bg-gradient: #131111db;
--hover-color: #2b2b2d;
--gray-color: #737373;
--black-color: #000000;
--lightgrey-color: #dadada;
--blue-color: #5e60d2;
--green-color: #26c326;
--red-color: #980b1e;
--blue-gradient: #5e60d280;
--green-gradient: #26c32680;
--red-gradient: #980b1e80;
--orange-gradient: #ef6b06db;
}
/* Site Wide */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 60%;
}
/* Semantics */
body {
display: flex;
flex-direction: row;
background-color: var(--bg-color);
color: var(--lightgrey-color);
font-family: Roboto, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 100%;
margin: 0;
}
main-header,
header-nav,
nav-link,
body-sidebar,
sidebar-inner,
inner-dropdown,
sidebar-notification,
body-main,
main-section,
section-heading,
section-paragraph,
list-item,
main-item,
item-lists,
main-empty,
main-banner,
banner-image,
banner-member,
banner-socials,
banner-upload,
main-splash,
main-member,
member-panel,
panel-item,
main-settings,
settings-header,
settings-section,
main-chat,
chat-menu,
menu-notification,
chat-feed,
feed-message,
message-header,
message-body,
message-media,
main-feed,
feed-member,
feed-menu,
feed-heading,
feed-columns,
feed-comment,
comment-header,
comment-main,
comment-reply,
reply-header,
reply-main,
feed-post,
main-post,
post-header,
header-dropdown,
post-tier,
post-title,
post-description,
post-locked,
post-submit,
post-comments,
comments-main,
post-main,
main-link,
main-video,
video-bar,
video-bar-progress,
video-bar-buffer,
video-volume,
video-volume-bar,
video-volume-setting,
video-time,
video-speeds,
speeds-title,
video-speed,
post-footer,
body-overlay,
overlay-content,
content-background,
content-section,
section-item {
position: relative;
display: block;
}
section-heading,
section-paragraph {
margin: 2rem 0;
}
section-heading {
font-weight: bold;
margin-top: 0;
}
/* Site Wide Elements */
img,
time,
textarea,
select,
input {
border: 0;
margin: 0;
text-decoration: none;
}
textarea,
select,
input,
button {
background-color: transparent;
outline-color: transparent;
font: inherit;
font-family: inherit;
font-size: inherit;
color: inherit;
white-space: pre-line;
vertical-align: top;
text-align: left;
}
textarea:focus,
select:focus,
input:focus,
button:focus {
outline-offset: 0;
outline: none;
}
time[title="Now"] {
color: var(--green-color);
}
select option {
background: var(--bg-color);
}
form input[type="datetime-local"],
form select[name="post_cents"],
form select[name="post_email"] {
padding: 0.5rem;
border: 0.1rem solid var(--gray-color);
text-align: center;
margin-right: 1rem;
height: 3rem;
color-scheme: dark;
}
form input[type="datetime-local"]:hover,
form select[name="post_cents"]:hover,
form select[name="post_email"]:hover,
form button[type="submit"]:hover {
border: 0.1rem solid var(--lightgrey-color);
}
button {
border: 0;
padding: 0;
cursor: pointer;
}
button:disabled {
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
input[type="search"]::-ms-clear {display: none; width: 0; height: 0;}
input[type="search"]::-ms-reveal {display: none; width: 0; height: 0;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none;}
input[type="search"]:-webkit-autofill,
input[type="search"]:-webkit-autofill:hover, 
input[type="search"]:-webkit-autofill:focus, 
input[type="search"]:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1rem var(--bg-color) inset;
-webkit-text-fill-color: var(--lightgrey-color);
}
textarea {
resize: vertical;
min-height: 5rem;
width: 100%;
padding: 0;
margin: 0;
border: 0;
outline: 0.1rem dotted var(--lightgrey-color);
}
button,
label,
video,
video-controls {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
button,
label,
video,
video-controls,
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
button[type="submit"] {
padding: 0.5rem;
border: 0.1rem solid var(--gray-color);
min-width: 10rem;
text-align: center;
height: 3rem;
}
label {
cursor: pointer;
}
ul,
ol {
margin: 0;
padding-left: 3rem;
}
p {
min-height: 2rem;
margin-top: 1rem;
margin-bottom: 0;
}
p:first-child {
margin-top: 0;
}
::placeholder {
color: var(--lightgrey-color);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
:-ms-input-placeholder {
color: var(--lightgrey-color);
}
::-ms-input-placeholder {
color: var(--lightgrey-color);
}
/* overflow */
html,
textarea,
post-description,
body-overlay {
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: #888 transparent;
scrollbar-width: thin;
}
html,
body-overlay {
overflow-y: scroll;
}
main-member member-panel:nth-of-type(2) panel-item span,
feed-post {
overflow: hidden;
}
html::-webkit-scrollbar,
textarea::-webkit-scrollbar,
post-description::-webkit-scrollbar,
body-overlay::-webkit-scrollbar {
width: 1.6rem;
}
html::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
post-description::-webkit-scrollbar-track,
body-overlay::-webkit-scrollbar-track {
border-radius: 0.8rem;
}
html::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
post-description::-webkit-scrollbar-thumb,
body-overlay::-webkit-scrollbar-thumb {
height: 5.6rem;
border-radius: 0.8rem;
border: 0.4rem solid transparent;
background-clip: content-box;
background-color: #ababab;
}
html::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
post-description::-webkit-scrollbar-thumb:hover,
body-overlay::-webkit-scrollbar-thumb:hover {
background-color: #555555;
}
html[lock-scroll="1"]{
overflow: hidden;
overscroll-behavior: contain;
position: relative;
margin-right: 1.2rem;
}
/* z-index */
banner-upload,
post-main > font-awesome {
z-index: 20;
}
post-footer,
post-footer button,
feed-post post-locked {
z-index: 30;
}
main-video button[data-action="click"],
main-video video-controls,
main-video video-bar {
z-index: 40;
}
form button[title="Remove Media"],
form button[title="Remove Link"],
post-title,
post-submit {
z-index: 45;
}
post-header,
post-header a,
post-header button,
comment-header,
comment-header a,
comment-header button,
reply-header,
reply-header a,
reply-header button {
z-index: 50;
}
main-video video-bar video-bar-buffer {
z-index: 60;
}
main-video video-bar video-bar-progress,
post-header header-dropdown,
comment-header header-dropdown,
reply-header header-dropdown,
message-header header-dropdown {
z-index: 70;
}
main-header,
body-sidebar,
body-sidebar sidebar-inner inner-dropdown[data-type="userlinks"] {
z-index: 80;
}
body-overlay,
body-overlay overlay-content img,
body-overlay overlay-content content-section {
z-index: 90;
}
body-overlay button[data-action="close"] {
z-index: 95;	
}
main-splash {
z-index: 200;
}
/* overflow-wrap */
feed-columns section-paragraph,
main-chat message-body,
post-description,
comment-main,
reply-main {
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: pre-line;
}
/* text-shadow */
main-banner banner-member,
feed-post button,
main-post button,
main-video,
feed-post post-locked,
post-header,
post-tier,
post-title,
post-footer {
text-shadow: 0 0 0.1rem var(--bg-color), 0 0 0.1rem var(--bg-color), 0 0 0.1rem var(--bg-color), 0 0 0.1rem var(--bg-color);
}
/* border-radius */
button[type="submit"],
form input[type="datetime-local"],
form select[name="post_cents"],
form select[name="post_email"],
body-sidebar sidebar-inner inner-dropdown[data-type="userlinks"],
body-sidebar sidebar-inner sidebar-notification,
body-sidebar sidebar-inner a[title="Post"],
body-sidebar sidebar-inner a:not([data-action="userlinks"]),
header-nav nav-link,
main-empty,
main-settings,
main-settings select[name="set_emails"],
main-settings select[name="set_anonymous"],
feed-member,
main-chat,
main-chat chat-menu menu-notification,
message-header header-dropdown,
main-feed[data-format="notifications"],
main-banner banner-image,
post-header header-dropdown,
comment-header header-dropdown,
comment-main,
reply-main,
reply-header header-dropdown,
main-post post-main img,
main-post main-video video,
main-post post-main iframe,
main-post form post-submit label[for="post_media"],
main-link,
main-video video-controls video-bar,
main-video video-controls video-bar video-bar-progress,
main-video video-controls video-bar video-bar-buffer,
main-video video-controls video-volume-bar,
main-video video-controls video-speeds,
main-video video-volume-bar video-volume-setting,
post-locked,
post-footer button,
feed-post,
body-overlay overlay-content img,
body-overlay overlay-content main-post,
body-overlay overlay-content content-section section-item:nth-of-type(2) button,
body-overlay overlay-content content-section {
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
border-radius: 1rem;
}
main-settings form[name="set_emails"] span,
main-settings form[name="set_emails"] span:before,
main-settings form[name="set_anonymous"] span,
main-settings form[name="set_anonymous"] span:before {
-webkit-border-radius: 2rem; 
-moz-border-radius: 2rem; 
border-radius: 2rem;
}
body-sidebar sidebar-inner a[data-action="userlinks"] {
-webkit-border-radius: 10rem;
-moz-border-radius: 10rem;
border-radius: 10rem;
}
body-sidebar sidebar-inner a[data-action="userlinks"] img,
banner-upload,
main-member member-panel:nth-of-type(1) img,
main-settings settings-section img,
form button[title="Remove Media"],
form button[title="Remove Link"],
post-header button font-awesome,
comment-header button font-awesome,
reply-header button font-awesome,
message-header button font-awesome,
main-video video-volume-bar video-volume-setting:after,
post-footer button font-awesome,
body-overlay button[data-action="close"] {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/* data-display */
[data-display="none"] {
display: none;
}
[data-visibility="none"] {
visibility: hidden;
}
/* font-size */
[font-size="10"] {
font-size: 1rem;
}
[font-size="12"] {
font-size: 1.2rem;
}
[font-size="14"] {
font-size: 1.4rem;
}
[font-size="16"] {
font-size: 1.6rem;
}
[font-size="18"] {
font-size: 1.8rem;
}
[font-size="24"] {
font-size: 2.4rem;
}
[font-size="40"] {
font-size: 4rem;
}
[font-size="60"] {
font-size: 6rem;
}
/* Site Wide Links */
a {
color: var(--lightgrey-color);
text-decoration: none;
cursor: pointer;
font-weight: 600;
}
a:link {
color: var(--lightgrey-color);
text-decoration: none;
cursor: pointer;
font-weight: 600;
}
a:visited {
color: var(--lightgrey-color);
text-decoration: none;
cursor: pointer;
font-weight: 600;
}
a:hover {
color: var(--lightgrey-color);
text-decoration: none;
cursor: pointer;
font-weight: 600;
}
a:active {
color: var(--lightgrey-color);
text-decoration: none;
cursor: pointer;
font-weight: 600;
}
/* body-sidebar */
body-sidebar {
width: 21rem;
min-height: 100%;
margin-left: auto;
}
body-sidebar font-awesome[data-action="hamburger"] {
display: none;
}
body-sidebar sidebar-inner {
position: fixed;
height: 100%;
width: 20rem;
border-right: 0.1rem solid var(--gray-color);
}
body-sidebar sidebar-inner a {
position: relative;
display: block;
padding: 1rem;
width: 90%;
}
body-sidebar sidebar-inner a,
body-sidebar sidebar-inner a:link,
body-sidebar sidebar-inner a:visited,
body-sidebar sidebar-inner a:hover,
body-sidebar sidebar-inner a:active {
color: var(--gray-color);
font-weight: normal;
}
body-sidebar sidebar-inner > a:first-child[data-active="yes"],
body-sidebar sidebar-inner a:hover {
background: var(--gray-color);
color: var(--lightgrey-color);
}
body-sidebar sidebar-inner a[data-active="yes"] {
color: var(--lightgrey-color);
font-weight: bold;
}
body-sidebar sidebar-inner a[data-active="yes"] font-awesome {
font-weight: 800;
}
body-sidebar sidebar-inner > a:first-child {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
height: 4.5rem;
margin: 1rem 0;
font-weight: bold;
}
body-sidebar sidebar-inner > a:first-child img {
width: 4.5rem;
height: 4.5rem;
transition: all 250ms;
}
body-sidebar sidebar-inner > a:first-child[data-active="yes"] img,
body-sidebar sidebar-inner > a:first-child:hover img {
width: 3rem;
height: 3rem;
}
body-sidebar sidebar-inner > a:first-child[data-active="yes"] span,
body-sidebar sidebar-inner > a:first-child:hover span {
display: inline-block;
max-width: 10rem;
margin-left: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
}
body-sidebar sidebar-inner > a:first-child[data-active="yes"] font-awesome,
body-sidebar sidebar-inner > a:first-child:hover font-awesome {
display: inline-block;
margin-left: auto;
margin-right: 0;
}
body-sidebar sidebar-inner inner-dropdown {
position: absolute;
background: var(--bg-color);
border: 0.1rem solid var(--gray-color);
}
body-sidebar sidebar-inner inner-dropdown:hover {
border: 0.1rem solid var(--lightgrey-color);
}
body-sidebar sidebar-inner inner-dropdown {
top: 6rem;
width: 18rem;
}
body-sidebar sidebar-inner inner-dropdown a {
display: flex;
align-items: center;
width: 100%;
}
body-sidebar sidebar-inner sidebar-notification {
position: absolute;
top: 0.5rem;
left: 1.75rem;
background: var(--blue-color);
color: var(--lightgrey-color);
padding: 0.2rem .6rem;
}
body-sidebar sidebar-inner a[title="Patreon"],
body-sidebar sidebar-inner a[title="Subscribestar"],
body-sidebar sidebar-inner a[title="Post"] {
border: 0.1rem solid var(--gray-color);
width: 90%;
}
body-sidebar sidebar-inner a[title="Post"],
body-sidebar sidebar-inner a[title="Patreon"],
body-sidebar sidebar-inner a[title="Subscribestar"] {
margin-top: 2rem;
}
body-sidebar sidebar-inner a font-awesome,
body-sidebar sidebar-inner a[title="Subscribestar"] img {
width: 2rem;
height: 2rem;
margin-right: 0.5rem;
}
body-sidebar sidebar-inner a[data-action="userlinks"] font-awesome {
height: 1.5rem;
}
/* body-main */
body-main {
width: 115rem;
max-width: 75vw;
min-height: 100%;
margin-right: auto;
padding-top: 6rem;
padding-bottom: 2rem;
}
/* main-header */
main-header {
position: fixed;
top: 0;
}
main-header header-nav {
display: flex;
align-items: flex-start;
background: var(--bg-color);
margin: auto;
width: 115rem;
max-width: 75vw;
padding: 0.5rem 0;
}
main-header header-nav nav-link button[data-action="back"] {
padding: 1rem;
}
main-header header-nav nav-link {
display: flex;
height: 4.5rem;
border: 0.1rem solid var(--gray-color);
white-space: nowrap;
}
main-header header-nav nav-link:not(:first-child) {
margin-left: 0.5rem;
}
main-header header-nav nav-link:hover {
border: 0.1rem solid var(--lightgrey-color);	
}
main-header header-nav nav-link a,
main-header header-nav nav-link form {
padding: 1rem;
}
main-header header-nav nav-link[data-type="navigation"] {
width: 60rem;
}
main-header header-nav nav-link[data-type="navigation"] > a img {
width: 2.5rem;
height: 2.5rem;
margin-right: 1rem;
}
main-header header-nav nav-link[data-type="navigation"] > a {
display: inline-flex;
align-items: center;
}
main-header header-nav nav-link[data-type="navigation"] > a {
width: 100%;
}
main-header header-nav nav-link[data-type="navigation"] > a span {
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1rem;
}
main-header header-nav nav-link form[name="search_bar"] input[type="search"] {
padding: 0 1rem;
width: 100%;
}
main-header header-nav nav-link form[name="search_bar"] input[type="checkbox"]:checked + span {
font-weight: bold;
}
/* border-items */
main-empty,
main-settings {
border: 0.1rem solid var(--gray-color);
padding: 2rem;
margin-bottom: 0.5rem;
}
main-empty {
display: flex;
justify-content: space-evenly;
}
main-empty a {
display: contents;
}
/* main-splash */
main-splash {
background-color: var(--bg-color);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
main-splash img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
main-splash section-paragraph {
position: absolute;
text-align: center;
left: 40%;
width: 34rem;
}
main-splash section-paragraph:nth-of-type(1){
top: 65%;
}
main-splash section-paragraph:nth-of-type(2){
top: 75%;
}
/* main-banner */
main-banner {
display: block;
height: 25rem;
margin-bottom: 0.5rem;
}
main-banner banner-image {
overflow: hidden;
border: 0.1rem solid var(--gray-color);
}
banner-image,
banner-image form {
width: inherit;
height: inherit;
}
banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
banner-member {
background: linear-gradient(360deg,var(--bg-gradient),transparent);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-bottom: 1rem;
padding-left: 1rem;
}
main-banner banner-member main-member member-panel:nth-of-type(1) img {
min-width: 10rem;
max-width: 10rem;
min-height: 10rem;
max-height: 10rem;
}
main-banner banner-socials {
position: absolute;
bottom: 1rem;
right: 1rem;
}
main-banner banner-socials a {
padding: 1rem;
}
main-banner banner-socials img {
width: 3rem;
height: 3rem;
}
banner-upload {
background: var(--hover-color);
border: .1rem solid var(--gray-color);
position: absolute;
bottom: 1rem;
right: 2rem;
height: 4rem;
width: 4rem;
text-align: center;
}
/* main-member */
main-member member-panel:nth-child(-n+2) {
display: inline-flex;
flex-direction: column;
vertical-align: middle;
}
main-member member-panel:nth-of-type(1) img {
min-width: 4rem;
max-width: 4rem;
min-height: 4rem;
max-height: 4rem;
margin-right: 1rem;
object-fit: cover;
object-position: top;
}
main-member member-panel:nth-of-type(2) panel-item span {
text-overflow: ellipsis;
}
main-member member-panel:nth-of-type(2) panel-item:hover {
text-decoration: underline;
}
main-member member-panel:nth-of-type(2) panel-item font-awesome {
color: var(--blue-color);
vertical-align: top;
padding-top: 0.5rem;
margin-left: 0.5rem;
}
main-member member-panel:nth-of-type(3) {
margin-top: 1rem;
}
/* main-feed */
body-main > main-feed {
width: calc(100% + .5rem);
}
main-feed[data-format="notifications"] {
border: 0.1rem solid var(--gray-color);
width: 100%;
}
/* feed-member */
feed-member {
display: inline-block;
vertical-align: top;
overflow: hidden;
border: 0.1rem solid var(--gray-color);
width: calc(100% / 3 - 0.5rem);
aspect-ratio: 2 / 1;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 2rem;
}
feed-member member-banner banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
feed-member member-banner banner-member {
position: relative;
background: var(--bg-gradient);
padding: 1rem;
border-radius: 1rem;
}
/* main-settings */
main-settings {
padding: 0;
}
main-settings settings-header {
padding: 2rem;
}
main-settings a:any-link {
font-weight: normal;
}
main-settings settings-section {
border-top: 0.1rem solid var(--gray-color);
padding: 3rem;
}
main-settings settings-section section-heading,
main-settings settings-section span {
display: inline-block;
vertical-align: middle;
margin: auto;
margin-right: 2rem;
}
main-settings settings-section font-awesome {
float: right;
}
main-settings settings-section img {
height: 5rem;
vertical-align: middle;
}
main-settings select[name="set_emails"],
main-settings select[name="set_anonymous"] {
padding: 0.5rem;
border: 0.1rem solid var(--gray-color);
}
main-settings button[data-action="deleteaccount"] {
color: var(--red-color);
padding: 2rem;
border: 0.1rem solid var(--gray-color);
}
/* main-chat */
main-chat {
display: flex;
flex-direction: column;
border: 0.1rem solid var(--gray-color);
width: 100%;
height: calc(100vh - 8rem);
}
main-chat chat-menu menu-notification {
display: inline-block;
vertical-align: middle;
background: var(--blue-color);
color: var(--lightgrey-color);
padding: 0.2rem .6rem;
}
main-chat chat-feed {
overflow: hidden;
overflow-y: scroll;
height: 100%;
padding: 1rem;
border-bottom: 0.1rem solid var(--gray-color);
}
main-chat message-header button[data-action="options"] {
margin-right: 0.5rem;
}
main-chat message-body,
main-chat message-media {
margin-left: 5rem;
}
main-chat message-media {
height: fit-content;
width: fit-content;
margin-top: 1rem;
}
main-chat message-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
max-width: 25rem;
max-height: 25rem;
cursor: zoom-in;
}
main-chat form {
width: 100%;
height: fit-content;
}
main-chat form textarea {
outline-offset: 0;
outline: none;
padding: 1rem;
resize: none;
width: 100%;
padding-left: 6rem;
height: auto;
min-height: 4.5rem;
max-height: 20rem;
}
main-chat form label {
position: absolute;
bottom: 1rem;
left: 1rem;
}
main-chat form message-media {
margin-top: 1.5rem;
margin-left: 6rem;
}
main-chat form message-media button[title="Remove Media"] {
background: var(--bg-gradient);
border: .1rem solid var(--gray-color);
position: absolute;
top: -1rem;
right: -1rem;
height: 3rem;
width: 3rem;
text-align: center;
}
/* post-header */
post-header,
comment-header,
reply-header,
message-header {
position: static;
display: flex;
align-items: center;
}
post-header a time,
comment-header a time,
reply-header a time,
message-header a time {
margin-right: 1rem;
}
post-header a:nth-of-type(1),
comment-header a:nth-of-type(2),
reply-header a:nth-of-type(2),
message-header a:nth-of-type(2) {
margin-left: auto;
}
post-header a:nth-of-type(1):hover,
comment-header a:nth-of-type(2):hover,
reply-header a:nth-of-type(2):hover,
message-header a:nth-of-type(2):hover {
text-decoration: underline;
}
post-header button font-awesome,
comment-header button font-awesome,
reply-header button font-awesome,
message-header button font-awesome {
padding: 1rem;
}
post-header button:hover font-awesome,
comment-header button:hover font-awesome,
reply-header button:hover font-awesome,
message-header button:hover font-awesome {
background: var(--blue-gradient);
}
post-header header-dropdown,
comment-header header-dropdown,
reply-header header-dropdown,
message-header header-dropdown {
position: absolute;
background: var(--bg-color);
border: 0.1rem solid var(--gray-color);
top: 4rem;
right: 0;
text-align: center;
}
post-header header-dropdown:hover,
comment-header header-dropdown:hover,
reply-header header-dropdown:hover,
message-header header-dropdown:hover {
border: 0.1rem solid var(--lightgrey-color);
}
post-header header-dropdown button,
post-header header-dropdown a,
post-header header-dropdown a:link,
post-header header-dropdown a:visited,
post-header header-dropdown a:hover,
post-header header-dropdown a:active,
comment-header header-dropdown button,
comment-header header-dropdown a,
comment-header header-dropdown a:link,
comment-header header-dropdown a:visited,
comment-header header-dropdown a:hover,
comment-header header-dropdown a:active,
reply-header header-dropdown button,
reply-header header-dropdown a,
reply-header header-dropdown a:link,
reply-header header-dropdown a:visited,
reply-header header-dropdown a:hover,
reply-header header-dropdown a:active,
message-header header-dropdown button,
message-header header-dropdown a,
message-header header-dropdown a:link,
message-header header-dropdown a:visited,
message-header header-dropdown a:hover,
message-header header-dropdown a:active {
display: block;
padding: 1rem;
color: var(--gray-color);
font-weight: normal;
text-align: center;
width: 100%;
}
post-header header-dropdown button:hover,
post-header header-dropdown a:hover,
comment-header header-dropdown button:hover,
comment-header header-dropdown a:hover,
reply-header header-dropdown button:hover,
reply-header header-dropdown a:hover,
message-header header-dropdown button:hover,
message-header header-dropdown a:hover {
color: var(--lightgrey-color);
font-weight: bold;
}
post-header header-dropdown font-awesome,
comment-header header-dropdown font-awesome,
reply-header header-dropdown font-awesome,
message-header header-dropdown font-awesome {
margin-right: 1rem;
}
/* post-tier */
post-tier {
position: absolute;
top: 0;
}
/* post-title */
post-title {
width: 100%;
margin-right: 1rem;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* post-main */
post-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
post-main:hover a:first-of-type span {
display: inline-block; 
}
post-main > font-awesome {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: fit-content;
height: 100%;
align-content: center;
}
/* post-description */
post-description a:any-link,
post-description span {
color: var(--blue-color);
}
post-description a:hover,
post-description span:hover {
text-decoration: underline;
}
/* post-locked */
post-locked {
margin-top: 2rem;
text-align: center;
padding: 2rem;
border: 0.1rem solid var(--gray-color);
margin-bottom: 1rem;
}
/* post-comments */
post-comments {
margin-bottom: 15rem;
}
/* comment-main */
comment-main,
reply-main {
border: 0.1rem solid var(--gray-color);
margin-left: 4.35rem;
margin-bottom: 2rem;
margin-top: -4rem;
padding-top: 4rem;
padding-left: 1rem;
padding-bottom: 1rem;
padding-right: 1rem;
}
comment-main button {
display: block;
margin-top: 1rem;
}
comment-main button span:not(:empty) {
margin-left: 0.5rem;
}
feed-comment[data-comment="new"] {
margin-bottom: 2rem;
}
feed-comment[data-comment="new"] button {
margin-left: auto;
margin-right: 1rem;
}
feed-comment button[data-action="options"] {
margin-right: 0.5rem;
}
comment-reply {
margin-top: 2rem;
margin-left: 4rem;
}
/* main-link */
main-link {
background: var(--bg-gradient);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 1rem;
height: fit-content;
width: fit-content;
max-width: 95%;
}
/* main-video */
main-video {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
main-video button[data-action="click"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 6rem;
cursor: pointer;
}
main-video button[data-action="click"] font-awesome {
position: absolute;
width: fit-content;
height: fit-content;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
main-video video-controls {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
left: 2rem;
right: 2rem;
bottom: 2rem;
height: 4rem;
}
main-video video-controls button {
padding: 0.5rem;
}
main-video video-controls video-bar {
background: var(--lightgrey-color);
border: 0.1rem solid var(--bg-gradient);
position: absolute;
left: 0;
right: 0;
bottom: -1rem;
height: 1rem;
cursor: pointer;
}
main-video video-controls video-bar video-bar-progress,
main-video video-controls video-bar video-bar-buffer {
position: absolute;
left: 0;
width: 0;
height: 100%;
}
main-video video-controls video-bar video-bar-progress {
background: var(--bg-gradient);
}
main-video video-controls video-bar video-bar-buffer {
background: var(--bg-gradient);
}
main-video video-controls button[data-action="play"] {
margin-right: 1rem;
}
main-video video-controls video-volume {
padding-right: 7rem;
margin-right: -7rem;
}
main-video video-controls video-volume-bar {
background: var(--gray-color);
position: absolute;
bottom: 1.3rem;
left: 4rem;
height: 0.5rem;
width: 5rem;
cursor: pointer;
visibility: hidden;
}
main-video video-controls video-volume:hover video-volume-bar {
visibility: visible;
}
main-video video-volume-bar video-volume-setting {
background: var(--lightgrey-color);
position: absolute;
left: 0;
width: 0;
height: 100%;
}
main-video video-volume-bar video-volume-setting:after {
content: '';
position: absolute;
right: -0.6rem;
bottom: -0.3rem;
display: block;
width: 1.2rem;
height: 1.2rem;
background: var(--lightgrey-color);
}
main-video video-controls video-time {
margin-left: auto;
margin-right: 1.5rem;
}
main-video video-controls video-speeds {
background: var(--bg-color);
border: 0.1rem solid var(--gray-color);
color: var(--lightgrey-color);
position: absolute;
right: 0;
bottom: 4rem;
height: 24rem;
padding-bottom: 1rem;
overflow-y: auto;
}
main-video video-controls video-speeds speeds-title {
padding: 1rem;
margin-bottom: 1rem;
border-bottom: 0.1rem solid var(--gray-color);
}
main-video video-controls button[data-action="speeds"] {
margin-right: 1rem;
}
main-video video-controls button[data-action="speed"] {
padding-left: 4rem;
width: 100%;
display: block;
}
main-video video-controls button[data-action="speed"]:hover {
cursor: pointer;
background: var(--gray-color);
}
main-video video-controls video-speeds button font-awesome {
position: absolute;
left: 1.5rem;
margin-top: 0.5rem;
}
main-video:fullscreen video {
height: 100%;
max-height: fit-content;
width: 100%;
max-width: fit-content;
margin: auto;
}
main-video:fullscreen video-controls {
bottom: 3rem;
}
/* post-footer */
post-footer {
display: flex;
justify-content: space-evenly;
}
post-footer button {
background: var(--bg-gradient);
min-width: 3rem;
text-align: center;
padding: 0 0.5rem;
}
post-footer button font-awesome {
padding: 0.8rem;
}
post-footer button span:not(:empty) {
margin-right: 0.5rem;
}
/* buttons */
post-footer button[data-action="locked"]:hover {
background: var(--green-gradient);
}
post-footer button[data-action="comment"]:hover {
background: var(--blue-gradient);
}
post-footer button[data-action="like"]:hover {
background: var(--red-gradient);
}
button[data-action="like"] font-awesome.fas {
color: var(--red-color);
}
post-footer button[data-action="views"]:hover {
background: var(--orange-gradient);
}
/* main-menus */
feed-menu,
main-chat chat-menu {
display: inline-flex;
justify-content: space-around;
width: 100%;
border-bottom: 0.1rem solid var(--gray-color);
padding: 1rem;
margin-bottom: 1rem;
}
feed-menu a,
feed-menu a:link,
feed-menu a:visited,
feed-menu a:hover,
feed-menu a:active,
main-chat chat-menu a,
main-chat chat-menu a:link,
main-chat chat-menu a:visited,
main-chat chat-menu a:hover,
main-chat chat-menu a:active {
color: var(--gray-color);
display: block;
}
feed-menu a:hover,
feed-menu a[data-active="yes"],
main-chat chat-menu a:hover,
main-chat chat-menu a[data-active="yes"] {
color: var(--lightgrey-color);
}
/* feed-heading */
feed-heading {
font-weight: bold;
margin: 1rem;
}
/* feed-columns */
feed-columns {
display: flex;
justify-content: space-between;
padding: 2rem;
border-top: 0.1rem solid var(--gray-color);
}
feed-columns columns-item:nth-of-type(2) img {
width: 6rem;
height: 6rem;
object-fit: cover;
object-position: center;
}
feed-columns section-paragraph {
margin-left: 5rem;
}
feed-columns section-paragraph:nth-of-type(2) {
margin-left: 8rem;
}
feed-columns section-paragraph:nth-of-type(2):before {
content: '';
display: block;
background: var(--gray-color);
position: absolute;
left: -3rem;
top: -1rem;
width: 0.1rem;
height: 2rem;
}
feed-columns section-paragraph:nth-of-type(2):after {
content: '';
display: block;
background: var(--gray-color);
position: absolute;
left: -3rem;
top: 1rem;
width: 2rem;
height: 0.1rem;
}
feed-columns time {
color: var(--gray-color);
margin-left: 1rem;
}
/* feed-post */
feed-post {
display: inline-block;
vertical-align: top;
border: 0.1rem solid var(--gray-color);
width: calc(100% / 3 - 0.5rem);
aspect-ratio: 1 / 1;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
padding: 0;
cursor: pointer;
}
feed-post:hover {
border: 0.1rem solid var(--lightgrey-color);
}
feed-post post-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 1.5rem 0.5rem;
}
post-header button[data-action="options"] {
height: 1rem;
margin-top: -2.5rem;
}
feed-post post-description {
width: 100%;
margin-top: 4rem;
height: fit-content;
max-height: 35vh;
padding: 0.5rem;
}
feed-post post-locked {
position: absolute;
top: 0;
margin: 2rem;
margin-top: 14rem;
}
feed-post post-main img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
feed-post post-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.5rem;
}
/* main-post */
main-post {
min-width: 80rem;
width: fit-content;
max-width: 100rem;
margin: auto;
overflow: hidden;
}
main-post post-header {
height: 3rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
main-post post-tier {
top: -1.5rem;
}
main-post post-main {
display: block;
height: fit-content;
width: fit-content;
margin: auto;
}
main-post post-description {
margin-bottom: 1rem;
max-height: 50rem;
}
main-post post-main img {
cursor: zoom-in;
}
main-post post-main img[image-resize="min-width"] {
min-width: 34rem;
}
main-post post-main img[image-resize="min-height"] {
min-height: 54rem;
}
main-post post-main img,
main-post main-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
max-width: 100%;
max-height: 50rem;
}
main-post post-main iframe {
display: block;
border: 0;
min-width: 34rem;
max-width: 100%;
max-height: 50rem;
}
main-post[data-post="newpost"] main-video {
position: static;
}
main-post post-footer {
padding-top: 1rem;
}
/* post-submit */
main-post form post-title input,
main-post form post-submit textarea,
body-overlay overlay-content content-section form textarea {
outline: transparent;
resize: none;
padding: 0;
width: 100%;
}
main-post form post-submit textarea,
body-overlay overlay-content content-section form textarea {
min-height: 2rem;
max-height: 50rem;
margin-bottom: 1rem;
display: block;
}
main-post form post-submit label {
display: block;
}
main-post form post-submit label[for="post_media"] {
padding: 1rem;
height: 15rem;
border: 0.1rem solid var(--gray-color);
}
main-post form post-submit label[for="post_media"] font-awesome {
margin-top: 1rem;
}
main-post form button[title="Remove Media"],
main-post form button[title="Remove Link"] {
background: var(--bg-gradient);
position: absolute;
top: 1rem;
right: 1rem;
padding: 1rem;
width: 3.5rem;
text-align: center;
}
/* body-overlay */
body-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body-overlay button[data-action="close"] {
background: var(--bg-gradient);
border: 0.1rem solid var(--gray-color);
position: fixed;
top: 3rem;
right: 6rem;
padding: 1rem;
text-align: center;
width: 4.5rem;
}
body-overlay overlay-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
min-height: 100%;
margin: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
body-overlay overlay-content content-background {
background: var(--bg-gradient);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body-overlay overlay-content > img {
max-width: 95vw;
max-height: 90vh;
}
body-overlay overlay-content > img[image-option="zoom-in"] {
cursor: zoom-in;
}
body-overlay overlay-content > img[image-option="zoom-out"] {
cursor: zoom-out;
max-height: 100%;
}
body-overlay overlay-content content-main {
max-width: 55vw;
}
body-overlay overlay-content content-main main-post {
background: var(--bg-color);
border: 0.1rem solid var(--lightgrey-color);
padding: 0 1rem;
}
body-overlay overlay-content content-section {
background: var(--bg-color);
border: 0.1rem solid var(--gray-color);
padding: 2rem;
min-width: 40rem;
max-width: 80rem;
}
body-overlay overlay-content content-section section-item:nth-of-type(1) {
min-width: 40rem;
}
body-overlay overlay-content content-section section-item:nth-of-type(2) button {
border: 0.1rem solid var(--gray-color);
width: 100%;
margin-top: 2rem;
padding: 1rem;
}
body-overlay overlay-content content-section section-item:nth-of-type(2) button:nth-of-type(1){
background: var(--red-color);
}
body-overlay overlay-content content-section form textarea {
width: 50rem;
margin-bottom: 3rem;
}
/* Media Screen */
@media screen and (max-width: 880px){html {font-size: 50%}}
@media screen and (max-width: 770px){html {font-size: 40%}}
@media screen and (max-width: 660px){html {font-size: 30%}}
@media screen and (max-width: 550px){html {font-size: 25%}}
@media screen and (max-width: 440px){html {font-size: 20%}}
@media screen and (max-width: 330px){html {font-size: 15%}}
@media screen and (max-width: 1000px) and (max-aspect-ratio: 121/80){
html {
font-size: 50%;
}
body {
margin-right: 0 !important;
}
a {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
body-sidebar {
background: var(--bg-color);
position: fixed;
height: 5rem;
width: 5rem;
min-height: auto;
}
body-sidebar font-awesome[data-action="hamburger"] {
display: block;
height: 4rem;
width: 4rem;
padding: 0rem;
margin-left: 1rem;
margin-top: 0.8rem;
}
body-sidebar sidebar-inner {
display: none;
background: var(--bg-color);
width: 100%;
top: 5rem;
padding: 3rem;
padding-top: 10rem;
border: none;
}
body-sidebar sidebar-inner inner-dropdown[data-type="userlinks"] {
top: 16.5rem;
left: 3rem;
right: 3rem;
width: calc(100% - 6rem);
}
body-main {
width: 100%;
max-width: 100%;
}
main-banner banner-image {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
main-banner banner-socials {
width: 15rem;
}
main-header {
width: calc(100% - 5rem);
margin-left: 5rem;
}
main-header header-nav {
width: 100%;
max-width: 100%;
padding: 0.5rem;
}
main-header header-nav nav-link[data-type="navigation"]{
width: 100%;
}
main-header header-nav nav-link[data-type="search"] {
display: none;
position: absolute;
top: 8rem;
left: -3rem;
width: 100%;
}
main-header header-nav nav-link select {
width: 7rem;
}
main-feed {
padding: 1rem;
}
body-sidebar sidebar-inner[mobile-display="show"],
main-header header-nav nav-link[data-type="search"][mobile-display="show"] {
display: block;
}
body-sidebar sidebar-inner a,
body-sidebar sidebar-inner a[title="Patreon"],
body-sidebar sidebar-inner a[title="Subscribestar"],
body-sidebar sidebar-inner a[title="Post"] {
width: 100%;
}
main-post {
min-width: 90%;
max-width: 90%;
}
/* feed-post */
feed-post {
width: calc(100% / 2 - 0.5rem);
}
feed-post post-description {
min-height: 14rem;
max-height: 14rem;
}
feed-member {
width: calc(100% / 2 - 0.5rem);
}
/* body-overlay */
body-overlay {
top: 5rem;
z-index: 100;
}
body-overlay overlay-content {
width: 100%;
}
body-overlay button[data-action="close"] {
top: 6rem;
right: 2rem;
}
body-overlay overlay-content content-main {
max-width: 90vw;
}
/* overflow */
body-sidebar sidebar-inner inner-dropdown[data-type="userlinks"] {
overflow: hidden;
}
/* z-index */
body-sidebar sidebar-inner inner-dropdown[data-type="userlinks"] {
z-index: 150;
}
main-header,
body-sidebar {
z-index: 100;
}
}