rDrama/files/assets/events/fistmas/css/main_fistmas.css

440 lines
7.8 KiB
CSS

@charset "UTF-8";
/* Fonts */
@font-face {
font-family: "Burbank Small Medium";
src: url("/assets/events/fistmas/fonts/Burbank-Small-Medium.woff2") format("woff2"),
url("/assets/events/fistmas/fonts/Burbank-Small-Medium.woff") format("woff"),
url("/assets/events/fistmas/fonts/Burbank-Small-Medium.ttf") format("truetype");
}
:root {
--secondary: #c7c7c7;
--dark: #c7c7c7;
--muted: #131512;
--gray: #c7c7c7;
--white: #131512;
--black: #131512;
--background: 193, 243, 255;
--gray-100: #131512;
--gray-200: #131512;
--gray-400: #e6faff;
--gray-500: #e6faff;
--gray-600: #e6faff;
--gray-700: #e6faff;
--gray-800: #e6faff;
--gray-900: #e6faff;
}
#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
border-color: #a7e5fb;
}
body {
font-family: 'Burbank Small Medium', sans-serif;
background-color: #101819 !important;
background-image: url('/assets/events/fistmas/images/pattern.webp') !important;
overflow-x: hidden;
}
* {
border-color: var(--primary);
}
.border {
border-color: var(--primary) !important;
}
.form-control {
background: transparent;
border-color: var(--primary) !important;
}
.btn:not(.award-tab, .shop-tab) {
background: var(--primary) !important;
border-color: var(--primary) !important;
border-width: 2px;
color: #fff !important;
}
.btn:not(.award-tab, .shop-tab, #mobile-bottom-navigation-bar > .btn) .fas {
color: #fff !important;
}
.form-control:disabled, .form-control[readonly] {
background: transparent;
border-color: var(--primary) !important;
}
.btn-success {
border-color: #38A169 !important;
}
.btn-danger {
border-color: #E53E3E !important;
}
#frontpage .pseudo-submit-form.card .card-body .form-control {
border-color: transparent !important;
}
.btn-lg {
border-color: transparent !important;
}
pre {
color: #CFCFCF;
}
.transparent {
background: none !important;
}
.visited, h5.post-title a:not(.effortpost-flair):visited, a[href^="https://"]:not([href^="https://rdrama.net" i], [href^="https://watchpeopledie.tv" i], .dropdown-item, .nav-link, .novisited):visited {
color: #7a7a7a !important;
}
.post-title a, h1.post-title {
font-family: 'Burbank Small Medium', cursive;
font-size: 1.25rem;
}
.arrow-up::before, .arrow-down::before {
content: '\f7dc';
width: 20px;
}
.arrow-down::before {
display: inline-block;
transform: rotate(180deg);
}
.arrow-up.active::before, .arrow-down.active::before {
content: '\f7db';
}
.comment {
background-color: var(--gray-600);
}
.comment-actions .btn {
background-color: transparent !important;
color: var(--gray-200) !important;
}
.comment-actions .btn::after{
background: none !important;
}
body {
cursor: url(/assets/events/fistmas/images/cursor.webp?x=7), auto !important;
}
textarea, input[type=textbox], input[type=search] {
cursor: url(/assets/events/fistmas/images/text.webp?x=7) 9 14, auto !important;
}
.btn, input[type=button], button, a {
cursor: url(/assets/events/fistmas/images/pointer.webp?x=7), auto !important;
}
.fa-moon-over-sun:before{content:"\f74a"}
.award-name {
color: var(--gray-200)
}
.sidebar {
background-color: var(--gray-600);
}
.form-control {
background: var(--gray-600);
}
/* lights */
.navbar::after, .lights::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 57px;
width: 100%;
background: url('/assets/events/fistmas/images/lights.webp?x=7');
animation: lights 1s infinite steps(2);
pointer-events: none;
}
@keyframes lights {
0% {
/*Two zeros, not one !!*/
/*[0] is equivalent to [0 50%] and will create a different animation */
background-position: 0 0;
}
100% {
background-position: 0 -138px;
}
}
/* snowcaps */
.btn, .snow-cap {
position: relative;
}
.btn::after, .snow-cap::after {
content: '';
pointer-events: none;
background: url("/assets/events/fistmas/images/snowcap.webp?x=7") repeat-x;
background-size: contain;
position: absolute;
bottom: -18px;
left: 0;
right: 0;
height: 23px;
border: none;
border-radius: 9999px;
}
/* snow effect */
body {
background-color: #1f1f1f;
background-blend-mode: soft-light;
}
.color {
width: 20%;
height: 100%;
float: left
}
.color p {
position: relative;
z-index: 1231231;
text-align: center;
line-height: 90vh;
}
.color:nth-child(1){
background-color: #F5624D;
}
.color:nth-child(2){
background-color: #CC231E;
}
.color:nth-child(3){
background-color: #34A65F;
}
.color:nth-child(4){
background-color: #0F8A5F;
}
.color:nth-child(5){
background-color: #235E6F;
}
#snow:not([data-nonce]) {
height: 100%;
color: #FFF;
display: block;
}
/* awards */
/* gingerbread */
@keyframes fall-gingerbreads-fall {
0% {
top: -20%
}
100% {
top: 100%
}
}
@keyframes fall-gingerbreads-shake {
0% {
transform: translateX(0px)
}
50% {
transform: translateX(80px)
}
100% {
transform: translateX(0px) rotate(360deg);
}
}
.fall-gingerbread {
color: #fff;
font-size: 1em;
font-family: Serif;
text-shadow: 0 0 1px #000;
pointer-events: none;
position: absolute;
top: -20%;
z-index: 9999;
-webkit-user-select: none;
user-select: none;
cursor: default;
animation-name: fall-gingerbreads-fall, fall-gingerbreads-shake;
animation-duration: 10s, 4s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running
}
.fall-gingerbread img {
width: min(60px, 13vw) !important;
}
.fall-gingerbread:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s
}
.fall-gingerbread:nth-of-type(2) {
left: 20%;
animation-delay: 6s, .5s
}
.fall-gingerbread:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s
}
.fall-gingerbread:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s
}
.fall-gingerbread:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s
}
.fall-gingerbread:nth-of-type(6) {
left: 5%;
animation-delay: 1s, 4s
}
.fall-gingerbread:nth-of-type(7) {
left: 15%;
animation-delay: 1s, 1.5s
}
.fall-gingerbread:nth-of-type(8) {
left: 25%;
animation-delay: 6s, 2.5s
}
.fall-gingerbread:nth-of-type(9) {
left: 35%;
animation-delay: 4s, 1s
}
.fall-gingerbread:nth-of-type(10) {
left: 45%;
animation-delay: 2s, 4s
}
.animate-spin {
animation: spin 5600ms linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* vvv kill yourself vscodelet vvv */
/* */
/* Change mobile navbar icon colors to basketball */
#mobile-bottom-navigation-bar {
box-shadow: 0px 2px 5px #000000cc;
/* wtf??? */
z-index: 999 !important;
}
#mobile-bottom-navigation-bar > .btn {
background: none !important;
}
/* Revert the snowcaps on it, is bad */
#mobile-bottom-navigation-bar button:after {
background: unset;
/* Real work, lol */
display: none;
}
blockquote {
background-color: var(--gray-300);
}
#profilestuff {
color: white;
}
#profile--bio {
color: white !important;
}
/* Eyes */
.eye {
position: relative;
width: 26px;
height: 26px;
}
.patron, .pronouns, .post-flair, .hole-flair, .mod {
padding: 5px 5px 3px 5px !important;
}
.notif-count {
padding: 5px 5px 2px 5px;
}
.toast-body {
padding: 1rem 0.75rem 0.75rem 0.75rem;
}
.alert {
padding: 0.75rem 3rem 0.5rem 1rem;
}
.pagination-sm .page-link {
padding: 0.5rem min(20px,3vw) 0.25rem min(20px,3vw);
}
.badge {
padding: 0.4em 0.4em 0.25em 0.4em;
}
#cursormarsey {
background-image: url('/assets/events/fistmas/images/cursormarsey.webp?x=7') !important;
}
@media (min-width: 768px) {
span.chat-patron {
padding-top: 5px !important;
}
}
.candycane, h1.candycane.post-title a {
--color1: #f34d53;
--color2: #168b70;
font-family: "Open Sans", sans-serif !important;
background: repeating-linear-gradient(
45deg,
var(--color1),
var(--color2) 20px
);
background-clip: text;
color: transparent !important;
-webkit-background-clip: text;
animation: 80s linear 0s infinite move-colors;
}
.candycane:hover, h1.candycane.post-title a:hover {
animation-duration: 30s;
}