haldis/app/static/css/themes/lowPerformance/kerstmis.css

443 lines
8.9 KiB
CSS
Raw Normal View History

2019-12-05 19:39:35 +01:00
@charset "UTF-8";
/*
2019-12-05 20:38:07 +01:00
¡¡¡ OPGELET !!!
2019-12-05 19:39:35 +01:00
Deze css bevat lelijke code.
Dit komt doordat bootstrap lelijk en oud is.
Ik zal later proberen de css te verbeteren en bootstrap weg te gooien.
Enige discretie is aangeraden.
---=§[ Arnhoudt ]§=---
*/
2019-12-05 20:38:07 +01:00
/*low performance kerstmis*/
2019-12-05 19:39:35 +01:00
:root {
/*Darkmode colors*/
--dGray0:#F28705;
--dGray1:white;
--dGray2:#590212;
--dGray3:#590212;
--dGray4:#274001;
--dGray5:#274001;
--dGray6:#F2778D;
--dBlue:#F2778D; }
2019-12-05 19:39:35 +01:00
body {
height: 100%;
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
background-color: #2F0000; }
2019-12-05 19:39:35 +01:00
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_regular.ttf");
font-weight: normal; }
2019-12-05 19:39:35 +01:00
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_light.ttf");
font-weight: 200; }
2019-12-05 19:39:35 +01:00
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_bold.ttf");
font-weight: bold; }
2019-12-05 19:39:35 +01:00
.btn {
border-radius: 5rem;
color: white;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
background-image: linear-gradient(-40deg, #F53030, #F58B9E); }
2019-12-05 19:39:35 +01:00
.btn:hover {
background-image: linear-gradient(-40deg, #A81111, #FF4B33); }
2019-12-05 19:39:35 +01:00
.navbar {
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
padding: 1.5rem;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
text-transform: capitalize; }
2019-12-05 19:39:35 +01:00
.nav > li > a {
padding-left: 1vw;
padding-right: 1vw; }
2019-12-05 19:39:35 +01:00
.main {
height: 90vh;
overflow: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
display: flex;
align-items: center;
flex-direction: column; }
2019-12-05 19:39:35 +01:00
.navbar .container {
width: 100%;
padding: 0 4vw; }
2019-12-05 19:39:35 +01:00
@media (min-width: 768px) {
.container {
width: 100%; } }
2019-12-05 19:39:35 +01:00
@media (min-width: 992px) {
.main .container, .main .orders {
width: 970px; } }
2019-12-05 19:39:35 +01:00
@media (min-width: 1200px) {
.main .container, .main .orders {
width: 1170px; } }
2019-12-05 19:39:35 +01:00
.main {
padding-top: 2.5rem; }
2019-12-05 19:39:35 +01:00
.order_data {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 3rem;
align-items: baseline; }
2019-12-05 19:39:35 +01:00
.order_data h5 {
max-width: 60%;
padding-bottom: 3rem; }
2019-12-05 19:39:35 +01:00
.expand_button {
padding: 1rem 0rem;
margin-top: -1rem;
width: 70%;
margin-bottom: 1.5rem; }
2019-12-05 19:39:35 +01:00
.hi_im_haldis h2 {
display: none; }
2019-12-05 19:39:35 +01:00
.hi_im_haldis h3 {
width: 100%;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center; }
2019-12-05 19:39:35 +01:00
.hi_im_haldis {
background: linear-gradient(70deg, rgba(203, 52, 68, 0.8), rgba(135, 32, 44, 0.8));
border-radius: 0;
width: 100%; }
2019-12-05 19:39:35 +01:00
.hi_im_haldis_wrapper {
width: 100%; }
2019-12-05 19:39:35 +01:00
.darker:nth-child(even) {
background-color: #B62937;
border-radius: 2rem; }
2019-12-05 19:39:35 +01:00
.darker:nth-child(odd) {
background-color: #821C25;
border-radius: 2rem; }
2019-12-05 19:39:35 +01:00
.darker {
padding: 1rem; }
2019-12-05 19:39:35 +01:00
.order_row:nth-child(even) .order_data {
background-color: #B62937;
border-radius: 2rem; }
2019-12-05 19:39:35 +01:00
.order_row {
background: transparent; }
2019-12-05 19:39:35 +01:00
.order_row:nth-child(odd) .order_data {
background-color: #821C25;
border-radius: 2rem; }
2019-12-05 19:39:35 +01:00
.order_row h5 {
font-weight: bold; }
2019-12-05 19:39:35 +01:00
.order_row {
margin-bottom: 3rem; }
2019-12-05 19:39:35 +01:00
h3 {
padding-bottom: 1rem; }
2019-12-05 19:39:35 +01:00
.home_sir {
font-weight: bold;
color: #F45D68; }
2019-12-05 19:39:35 +01:00
.expand_button_wrapper {
margin-top: -1rem;
width: 100%;
display: flex;
justify-content: center; }
2019-12-05 19:39:35 +01:00
.time_data {
text-align: right;
display: flex;
flex-direction: column;
justify-self: right; }
2019-12-05 19:39:35 +01:00
.navbar .navbar-nav .active a {
color: #ff9bae;
border-bottom: 1px solid #ff9bae;
padding-bottom: 1rem; }
2019-12-05 19:39:35 +01:00
.navbar-nav {
padding-left: 2rem; }
2019-12-05 19:39:35 +01:00
.jumbotron, .darker {
display: flex;
flex-direction: column;
border-radius: 4rem; }
2019-12-05 19:39:35 +01:00
.row > div > h5 {
font-weight: bold;
padding-top: 1.5rem;
font-size: 2.5rem; }
2019-12-05 19:39:35 +01:00
.row > div > .amount_of_orders {
font-weight: lighter;
font-size: 1.6rem; }
2019-12-05 19:39:35 +01:00
.row > div .time {
font-weight: lighter; }
2019-12-05 19:39:35 +01:00
.jumbotron {
background-color: transparent; }
2019-12-05 19:39:35 +01:00
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
background-color: transparent; }
2019-12-05 19:39:35 +01:00
.background {
-webkit-filter: blur(0px) brightness(80%);
-moz-filter: blur(0px) brightness(80%);
-o-filter: blur(0px) brightness(80%);
-ms-filter: blur(0px) brightness(80%);
filter: blur(0px) brightness(80%);
position: fixed;
top: 0;
left: 0; }
2019-12-05 19:39:35 +01:00
footer a {
color: #69E8FF; }
2019-12-05 19:39:35 +01:00
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #CB3444;
height: 5rem;
display: flex;
align-items: center; }
2019-12-05 19:39:35 +01:00
footer > hr {
display: none; }
2019-12-05 19:39:35 +01:00
#mapid {
width: 100%; }
2019-12-05 19:39:35 +01:00
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
padding: 1rem 5rem 3rem 5rem; }
2019-12-05 19:39:35 +01:00
.order_overview {
width: 100%; }
2019-12-05 19:39:35 +01:00
.order_depts {
width: 100%;
margin-bottom: 10rem; }
2019-12-05 19:39:35 +01:00
.location_data, .location_products {
width: 100%; }
2019-12-05 19:39:35 +01:00
.location_products {
margin-bottom: 10rem; }
2019-12-05 19:39:35 +01:00
.locations_locations {
padding: 1rem 5rem 3rem 5rem; }
2019-12-05 19:39:35 +01:00
.background_wrapper {
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 100%;
overflow: hidden; }
2019-12-05 19:39:35 +01:00
.christmas_background {
z-index: -101;
width: 300%;
height: 300%;
background: linear-gradient(-45deg, #2F0000, #C20A12); }
2019-12-05 19:39:35 +01:00
.sled {
width: 15rem;
height: 15rem;
transition: transform 2s ease-in 5s, rotate 1s ease-in-out 2s;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("static/images/themes/kerstmis/sled.svg"); }
2019-12-05 19:39:35 +01:00
.sled_wrapper {
top: 0.5rem;
left: -7.5rem;
position: absolute;
transform: translate(-50vw, 40vh) rotate(0deg);
width: 15rem;
height: 15rem;
animation: sled 29s ease-in-out infinite; }
2019-12-05 19:39:35 +01:00
.snowman_wrapper {
height: 17rem;
width: 10rem;
position: absolute;
bottom: 15rem;
left: -12rem;
animation: snowman 37s ease infinite;
transform-origin: right bottom; }
2019-12-05 19:39:35 +01:00
.snowman_head {
position: absolute;
top: 0;
width: 10rem;
height: 10rem;
background-repeat: no-repeat;
background-size: contain;
background-image: url("static/images/themes/kerstmis/snowman_head.svg");
animation: snowman_head 2s ease infinite; }
2019-12-05 19:39:35 +01:00
.snowman_body {
position: absolute;
top: 9.5rem;
left: 0.5rem;
width: 10rem;
height: 10rem;
background-repeat: no-repeat;
background-size: contain;
background-image: url("static/images/themes/kerstmis/snowman_body.svg"); }
2019-12-05 19:39:35 +01:00
.train_button {
visibility: hidden; }
2019-12-05 19:39:35 +01:00
.train_wrapper {
position: absolute;
bottom: 0.5rem;
transform: translateX(-80vw);
animation: train 47s linear infinite; }
2019-12-05 19:39:35 +01:00
.wheel_big, .wheel_small {
position: absolute;
bottom: -0.4rem;
background-repeat: no-repeat;
background-size: contain;
background-image: url("static/images/themes/kerstmis/wheel.svg"); }
2019-12-05 19:39:35 +01:00
.train {
position: absolute;
bottom: 0.5rem;
left: 30rem;
width: 30rem;
height: 10rem;
background-repeat: no-repeat;
background-size: contain;
background-image: url("static/images/themes/kerstmis/train.svg");
animation: whobble 1s linear alternate-reverse infinite; }
2019-12-05 19:39:35 +01:00
.wheel_big {
width: 3.2rem;
height: 3.2rem; }
2019-12-05 19:39:35 +01:00
.wheel_small {
width: 2.5rem;
height: 2.5rem; }
2019-12-05 19:39:35 +01:00
.train .wheel1 {
animation: turn 2s linear infinite;
left: 3.5rem; }
2019-12-05 19:39:35 +01:00
.train .wheel2 {
animation: turn 2s linear infinite, -0.1s;
left: 7rem; }
2019-12-05 19:39:35 +01:00
.train .wheel3 {
animation: turn 2s linear infinite -0.3s;
left: 10.5rem; }
2019-12-05 19:39:35 +01:00
.train .wheel4 {
animation: turn 1.5s linear infinite -0.5s;
left: 13.9rem; }
2019-12-05 19:39:35 +01:00
.train .wheel5 {
animation: turn 1.5s linear infinite -0.7s;
left: 16.6rem; }
2019-12-05 19:39:35 +01:00
.zeus_wagon, .mc_wagon {
position: absolute;
bottom: 1.25rem;
width: 30rem;
height: 7.5rem;
background-repeat: no-repeat;
background-size: contain;
animation: whobble 1s linear alternate-reverse infinite; }
2019-12-05 19:39:35 +01:00
.mc_wagon {
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
left: 0rem; }
2019-12-05 19:39:35 +01:00
.zeus_wagon {
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
left: 15rem; }
2019-12-05 19:39:35 +01:00
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
animation: turn 2s linear infinite;
bottom: -1.1rem;
left: 2.2rem; }
2019-12-05 19:39:35 +01:00
.zeus_wagon .wheel2, .mc_wagon .wheel2 {
animation: turn 2s linear infinite, -0.1s;
bottom: -1.1rem;
left: 5.75rem; }
2019-12-05 19:39:35 +01:00
.zeus_wagon .wheel3, .mc_wagon .wheel3 {
animation: turn 2s linear infinite -0.3s;
bottom: -1.1rem;
left: 9.3rem; }
2019-12-05 19:39:35 +01:00
@keyframes sled {
0% {
transform: translate(-50rem, 40vh) rotate(0deg); }
4% {
transform: translate(-50rem, 40vh) rotate(0deg); }
20% {
transform: translate(50vw, 10vh) rotate(20deg); }
36% {
transform: translate(150vw, 40vh) rotate(40deg); }
100% {
transform: translate(150vw, 40vh) rotate(40deg); } }
2019-12-05 19:39:35 +01:00
@keyframes train {
0% {
transform: translateX(-80rem); }
55% {
transform: translateX(-80rem); }
85% {
transform: translateX(100vw); }
100% {
transform: translateX(100vw); } }
2019-12-05 19:39:35 +01:00
@keyframes turn {
100% {
transform: rotate(360deg); } }
2019-12-05 19:39:35 +01:00
@keyframes whobble {
100% {
transform: translateY(0.5vh); } }
2019-12-05 19:39:35 +01:00
@keyframes snowman {
0% {
transform: rotate(0); }
20% {
transform: rotate(0); }
30% {
transform: rotate(80deg); }
54% {
transform: rotate(80deg); }
68% {
transform: rotate(0); }
100% {
transform: rotate(0); } }
2019-12-05 19:39:35 +01:00
@keyframes snowman_head {
0% {
transform: rotate(-3deg); }
50% {
transform: rotate(3deg); }
100% {
transform: rotate(-3deg); } }
2019-12-05 19:39:35 +01:00
/*# sourceMappingURL=kerstmis.css.map */