357 lines
6.1 KiB
CSS
357 lines
6.1 KiB
CSS
@charset "UTF-8";
|
|
|
|
/* Fonts */
|
|
@font-face {
|
|
font-family: "Germania One";
|
|
src: url("/assets/fonts/event/GermaniaOne-Regular.ttf") format("ttf");
|
|
}
|
|
|
|
:root {
|
|
--dark: #c7c7c7;
|
|
--secondary: #c7c7c7;
|
|
--gray: #c7c7c7;
|
|
--gray-300: #c7c7c7;
|
|
--gray-400: #cfcfcf;
|
|
--gray-500: #bfd7c2;
|
|
--gray-600: #bfd7c2;
|
|
--gray-700: #bfd7c2;
|
|
--gray-800: #bfd7c2;
|
|
--gray-900: #bfd7c2;
|
|
|
|
--muted: #131512;
|
|
--gray-100: #131512;
|
|
--gray-200: #131512;
|
|
--white: #131512;
|
|
--black: #131512;
|
|
|
|
--primary: #9b161a;
|
|
--background: #dae5d5;
|
|
}
|
|
|
|
#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
|
|
border-color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background) !important;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
* {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.border {
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.form-control {
|
|
background: transparent;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
.btn {
|
|
background: var(--primary) !important;
|
|
border-color: var(--primary) !important;
|
|
border-width: 2px;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#frontpage .post-title a:visited {
|
|
color: #7a7a7a !important;
|
|
}
|
|
|
|
.post-title a, h1.post-title {
|
|
font-family: 'Germania One', 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';
|
|
}
|
|
|
|
/* Blood Effect */
|
|
.blood::before {
|
|
content: '';
|
|
position: absolute;
|
|
background-image: url('/assets/images/event/blood-anim.webp');
|
|
width: 100%;
|
|
height: 55px;
|
|
background-repeat: repeat-x;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.blood {
|
|
position: relative;
|
|
}
|
|
|
|
.blood .comment-text {
|
|
color: #dc3545 !important;
|
|
font-family: 'DoubleFeature';
|
|
}
|
|
|
|
.sketch {
|
|
z-index: 10000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Eyes */
|
|
.eye {
|
|
position: relative;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
/* Trick or Treat */
|
|
#trick-or-treat {
|
|
font-family: Jo_wrote_a_lovesong;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.5rem;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
#trick-or-treat::before {
|
|
content:"";
|
|
background-image:url('/e/marseyface.webp'); ;
|
|
background-size: cover;
|
|
height:28px;
|
|
width:32px;
|
|
display:inline-block;
|
|
}
|
|
|
|
#trick-or-treat::after {
|
|
content:"";
|
|
background-image:url('/e/marseytrickortreat.webp'); ;
|
|
background-size: cover;
|
|
height:28px;
|
|
width:32px;
|
|
display:inline-block;
|
|
}
|
|
|
|
/* progressbar */
|
|
.progress {
|
|
background-color: #1d9bf0;
|
|
background-image: linear-gradient(0deg, #1d9bf0 0%, #59b1ec 100%);
|
|
width: 270px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0px 12px 2px #ffffff10;
|
|
backdrop-filter: blur(2px) brightness(101%);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.progress::before {
|
|
content: "\f48e";
|
|
font-family: "Font Awesome 6 Pro";
|
|
position: absolute;
|
|
left: 6px;
|
|
top: 2px;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
}
|
|
.progress::after {
|
|
content: "\f780";
|
|
font-family: "Font Awesome 6 Pro";
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 2px;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
}
|
|
|
|
.progress > .legend {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 6px;
|
|
padding: 0 6px;
|
|
color: #dc3545;
|
|
font-family: -apple-system,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.progress > .legend span:nth-child(1) {
|
|
color: #d3bc00;
|
|
}
|
|
|
|
.bar-left {
|
|
display: inline-block;
|
|
width: var(--width);
|
|
height: 24px;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
background-color: #d3bc00;
|
|
background-image: linear-gradient(180deg, #d3bc00 50%, #877800 100%);
|
|
box-shadow: inset 0px 12px 2px #ffffff20;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.bar-right {
|
|
display: inline-block;
|
|
width: var(--width);
|
|
height: 24px;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
background-color: #dc3545;
|
|
background-image: linear-gradient(180deg, #dc3545 50%, #9e1b32 100%);
|
|
box-shadow: inset 2px 12px 0px #ffffff20;
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
body {
|
|
cursor: url(/assets/images/event/cursor.png?v=1), auto !important;
|
|
}
|
|
|
|
textarea, input[type=textbox], input[type=search] {
|
|
cursor: url(/assets/images/event/text.png?v=1), auto !important;
|
|
}
|
|
|
|
.btn, input[type=button], button, a, img {
|
|
cursor: url(/assets/images/event/pointer.png?v=1), auto !important;
|
|
}
|
|
|
|
/* lights */
|
|
|
|
.navbar::after, .lights::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 57px;
|
|
width: 100%;
|
|
background: url('/i/event/lights.png?v=1');
|
|
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("/i/event/snowcap.png?v=1") repeat-x;
|
|
background-size: contain;
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 23px;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
/* snow effect */
|
|
|
|
body {
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
.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 {
|
|
height: 100%;
|
|
color: #FFF;
|
|
display: block;
|
|
}
|
|
|
|
/* award replacements */
|
|
/* train awards */
|
|
|