Created css for 'kerstmis'

This commit is contained in:
kindtanton 2019-12-05 19:39:35 +01:00
parent eb61d3286b
commit c5f82afc6a
39 changed files with 1799 additions and 41 deletions

View file

@ -9,6 +9,7 @@ body {
color: var(--dGray1); color: var(--dGray1);
height: 100%; height: 100%;
} }
.background{ .background{
position: absolute; position: absolute;
z-index: -1000; z-index: -1000;
@ -50,6 +51,10 @@ body {
padding-left: 20px; padding-left: 20px;
} }
.order_row {
background: var(--dGray4);
}
@media(min-width: 768px) and (max-width: 991px){ @media(min-width: 768px) and (max-width: 991px){
/* Make sure the small map in the location page has the same with as the block above */ /* Make sure the small map in the location page has the same with as the block above */
.sm-no-side-padding { .sm-no-side-padding {

View file

@ -0,0 +1,531 @@
@charset "UTF-8";
/*
¡¡¡ OPGELED !!!
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 ]§=---
*/
/*lightmode*/
:root {
/*Darkmode colors*/
--dGray0:#F28705;
--dGray1:white;
--dGray2:#590212;
--dGray3:#590212;
--dGray4:#274001;
--dGray5:#274001;
--dGray6:#F2778D;
--dBlue:#F2778D; }
body {
height: 100%;
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
background-color: #2F0000; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_regular.ttf");
font-weight: normal; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_light.ttf");
font-weight: 200; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_medium.ttf");
font-weight: medium; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_bold.ttf");
font-weight: bold; }
.btn {
border-radius: 5rem;
color: white;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
background-image: linear-gradient(-40deg, #F53030, #F58B9E); }
.btn:hover {
background-image: linear-gradient(-40deg, #A81111, #FF4B33); }
.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; }
.nav > li > a {
padding-left: 1vw;
padding-right: 1vw; }
.main {
height: 90vh;
overflow: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
display: flex;
align-items: center;
flex-direction: column; }
.navbar .container {
width: 100%;
padding: 0 4vw; }
@media (min-width: 768px) {
.container {
width: 100%; } }
@media (min-width: 992px) {
.main .container, .main .orders {
width: 970px; } }
@media (min-width: 1200px) {
.main .container, .main .orders {
width: 1170px; } }
.main {
padding-top: 2.5rem; }
.order_data {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 3rem;
align-items: baseline; }
.order_row {
background: transparent; }
.order_data h5 {
max-width: 60%;
padding-bottom: 3rem; }
.expand_button {
padding: 1rem 0rem;
margin-top: -1rem;
width: 70%;
margin-bottom: 1.5rem; }
.hi_im_haldis h2 {
display: none; }
.hi_im_haldis h3 {
width: 100%;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center; }
.hi_im_haldis {
background: linear-gradient(70deg, rgba(203, 52, 68, 0.8), rgba(135, 32, 44, 0.8));
border-radius: 0;
width: 100%; }
.hi_im_haldis_wrapper {
width: 100%; }
.darker:nth-child(even) {
background-color: #B62937;
border-radius: 2rem; }
.darker:nth-child(odd) {
background-color: #821C25;
border-radius: 2rem; }
.darker {
padding: 1rem; }
.order_row:nth-child(even) .order_data {
background-color: #B62937;
border-radius: 2rem; }
.order_row:nth-child(odd) .order_data {
background-color: #821C25;
border-radius: 2rem; }
.order_row h5 {
font-weight: bold; }
.order_row {
margin-bottom: 3rem; }
h3 {
padding-bottom: 1rem; }
.home_sir {
font-weight: bold;
color: #F45D68; }
.expand_button_wrapper {
margin-top: -1rem;
width: 100%;
display: flex;
justify-content: center; }
.time_data {
text-align: right;
display: flex;
flex-direction: column;
justify-self: right; }
.navbar .navbar-nav .active a {
color: #ff9bae;
border-bottom: 1px solid #ff9bae;
padding-bottom: 1rem; }
.navbar-nav {
padding-left: 2rem; }
.jumbotron, .darker {
display: flex;
flex-direction: column;
border-radius: 4rem; }
.row > div > h5 {
font-weight: bold;
padding-top: 1.5rem;
font-size: 2.5rem; }
.row > div > .amount_of_orders {
font-weight: lighter;
font-size: 1.6rem; }
.row > div .time {
font-weight: lighter; }
.jumbotron {
background-color: transparent; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
background-color: transparent; }
.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; }
footer a {
color: #69E8FF; }
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #CB3444;
height: 5rem;
display: flex;
align-items: center; }
footer > hr {
display: none; }
#mapid {
width: 100%; }
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
padding: 1rem 5rem 3rem 5rem; }
.order_depts {
width: 100%;
margin-bottom: 10rem; }
.location_data, .location_products {
width: 100%; }
.location_products {
margin-bottom: 10rem; }
.locations_locations {
padding: 1rem 5rem 3rem 5rem; }
.background_wrapper {
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 100%;
overflow: hidden; }
.christmas_background {
z-index: -101;
width: 300%;
height: 300%;
background: linear-gradient(-45deg, #2F0000, #C20A12);
animation: gradientBG 19s ease infinite; }
.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"); }
.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; }
.train_button:checked ~ .sled_wrapper:hover {
animation-play-state: paused; }
.train_button:checked ~ .sled_wrapper:hover .sled {
transform: translateY(100vh) rotate(90deg); }
.snowman_wrapper {
height: 17rem;
width: 10rem;
position: absolute;
bottom: 15rem;
left: -12rem;
animation: snowman 37s ease infinite;
transform-origin: right bottom; }
.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; }
.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"); }
.train_button:checked ~ .merry_christmas {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-position: center;
background-image: url("static/images/themes/kerstmis/merry_christmas.svg");
background-size: 25vw;
background-repeat: no-repeat;
animation: merry_christmas 5s ease infinite; }
.train_button {
position: absolute;
transform: scaleX(20) scaleY(8) translateX(-100rem);
bottom: 5.5rem;
left: 7rem;
animation: follow_train 47s linear infinite;
opacity: 0; }
.train_wrapper {
position: absolute;
bottom: 0.5rem;
transform: translateX(-80vw);
animation: train 47s linear infinite; }
.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"); }
.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; }
.wheel_big {
width: 3.2rem;
height: 3.2rem; }
.wheel_small {
width: 2.5rem;
height: 2.5rem; }
.train .wheel1 {
animation: turn 2s linear infinite;
left: 3.5rem; }
.train .wheel2 {
animation: turn 2s linear infinite, -0.1s;
left: 7rem; }
.train .wheel3 {
animation: turn 2s linear infinite -0.3s;
left: 10.5rem; }
.train .wheel4 {
animation: turn 1.5s linear infinite -0.5s;
left: 13.9rem; }
.train .wheel5 {
animation: turn 1.5s linear infinite -0.7s;
left: 16.6rem; }
.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; }
.mc_wagon {
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
left: 0rem; }
.zeus_wagon {
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
left: 15rem; }
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
animation: turn 2s linear infinite;
bottom: -1.1rem;
left: 2.2rem; }
.zeus_wagon .wheel2, .mc_wagon .wheel2 {
animation: turn 2s linear infinite, -0.1s;
bottom: -1.1rem;
left: 5.75rem; }
.zeus_wagon .wheel3, .mc_wagon .wheel3 {
animation: turn 2s linear infinite -0.3s;
bottom: -1.1rem;
left: 9.3rem; }
.snow {
border-radius: 50%;
opacity: 0.8;
position: absolute;
top: -100vh;
animation-name: fall;
animation-timing-function: linear;
animation-iteration-count: infinite; }
.layer1 {
width: 1rem;
height: 1rem;
filter: blur(1.5px);
box-shadow: 7vw 73.2vh 0 -0.13rem#fff,84.2vw 37vh 0 -0.31rem#fff,96.8vw 43.9vh 0 -0.49rem#fff,68.6vw 22.2vh 0 -0.44rem#fff,9.3vw 28.3vh 0 -0.09rem#fff,76.6vw 33.4vh 0 -0.27rem#fff,7.7vw 24.1vh 0 -0.4rem#fff,56.5vw 46.4vh 0 -0.49rem#fff,64.3vw 84.4vh 0 -0.17rem#fff,58vw 10.3vh 0 -0.37rem#fff,77.7vw 5.2vh 0 -0.17rem#fff,13.8vw 72.2vh 0 -0.12rem#fff,19.3vw 6.1vh 0 -0.37rem#fff,4vw 12.5vh 0 -0.4rem#fff,60.3vw 66.8vh 0 -0.42rem#fff,37.7vw 73.8vh 0 -0.04rem#fff,53.4vw 24.5vh 0 -0.49rem#fff,92.2vw 61.9vh 0 -0.31rem#fff,16vw 29.5vh 0 -0.32rem#fff,33.3vw 57.2vh 0 -0.49rem#fff,14.1vw 6.3vh 0 -0.04rem#fff,2.6vw 33vh 0 -0.49rem#fff,28vw 33vh 0 -0.5rem#fff,24.5vw 31.7vh 0 -0.14rem#fff,14.4vw 94.8vh 0 -0.09rem#fff,60.9vw 74.9vh 0 -0.15rem#fff,13.8vw 81.3vh 0 -0.38rem#fff,20vw 90.4vh 0 -0.23rem#fff,15.9vw 88.7vh 0 -0.36rem#fff,97.1vw 52.8vh 0 -0.46rem#fff,28.5vw 51.4vh 0 -0.17rem#fff,10.6vw 0.7vh 0 -0.1rem#fff,79.7vw 5vh 0 -0.5rem#fff,3.3vw 50.2vh 0 -0.14rem#fff,69.6vw 66vh 0 -0.44rem#fff,62.8vw 97.3vh 0 -0.02rem#fff,88.5vw 70.1vh 0 -0.02rem#fff,62.5vw 35.2vh 0 -0.33rem#fff,67vw 73.4vh 0 -0.1rem#fff,42.2vw 11.5vh 0 -0.24rem#fff,60.1vw 28.1vh 0 -0.45rem#fff,72.8vw 12vh 0 -0.12rem#fff,60.6vw 33.3vh 0 -0.05rem#fff,79.9vw 60vh 0 -0.34rem#fff,48.2vw 35.7vh 0 -0.35rem#fff,67.2vw 66.6vh 0 -0.34rem#fff,97.4vw 20.4vh 0 -0.3rem#fff,99.4vw 14.6vh 0 -0.12rem#fff,70.5vw 49.2vh 0 -0.34rem#fff,36.3vw 21.3vh 0 -0.48rem#fff,86.9vw 13.3vh 0 -0.47rem#fff,43vw 17.7vh 0 -0.41rem#fff,19.3vw 20.3vh 0 -0.12rem#fff,72.6vw 22vh 0 -0.1rem#fff,16.4vw 69vh 0 -0.03rem#fff,21.7vw 85.7vh 0 -0.24rem#fff,92.6vw 59vh 0 -0.5rem#fff,52.1vw 68.8vh 0 -0.11rem#fff,18.3vw 36.6vh 0 -0.1rem#fff,60vw 16.5vh 0 -0.29rem#fff,68.7vw 96.4vh 0 -0.32rem#fff,8.5vw 91.5vh 0 -0.22rem#fff,39vw 62.7vh 0 -0.23rem#fff,63vw 72.4vh 0 -0.41rem#fff,22.1vw 0.6vh 0 -0.28rem#fff,63.5vw 56.9vh 0 -0.15rem#fff,82.1vw 11.9vh 0 -0.13rem#fff,79.6vw 71.2vh 0 -0.05rem#fff,61.5vw 87.6vh 0 -0.07rem#fff,9.5vw 27vh 0 -0.19rem#fff,83.7vw 46.7vh 0 -0.33rem#fff,90.3vw 74.9vh 0 -0.3rem#fff,76.6vw 1.6vh 0 -0.4rem#fff,91.6vw 0.1vh 0 -0.37rem#fff,24.4vw 38.1vh 0 -0.16rem#fff,80.8vw 35.9vh 0 -0.12rem#fff,6.2vw 72.8vh 0 -0.14rem#fff,75.9vw 27.4vh 0 -0.22rem#fff,75.5vw 13.9vh 0 -0.02rem#fff,64.7vw 82vh 0 -0.08rem#fff,59.8vw 57.5vh 0 -0.04rem#fff,38.7vw 41vh 0 -0.11rem#fff,29.7vw 22.8vh 0 -0.07rem#fff,4.4vw 6.1vh 0 -0.36rem#fff,63.3vw 51.4vh 0 -0.02rem#fff,77.9vw 18.5vh 0 -0.49rem#fff,56.6vw 45.6vh 0 -0.08rem#fff,2.8vw 67.1vh 0 -0.4rem#fff,33vw 8.6vh 0 -0.31rem#fff,98.9vw 38.4vh 0 -0.5rem#fff,16.6vw 76.8vh 0 -0.43rem#fff,9.3vw 28.4vh 0 -0.13rem#fff,91.6vw 6.9vh 0 -0.16rem#fff,34.3vw 4.9vh 0 -0.05rem#fff,44.1vw 79vh 0 -0.1rem#fff,30.7vw 76.2vh 0 -0.09rem#fff,70.4vw 29.8vh 0 -0.31rem#fff,10.8vw 57.7vh 0 -0.04rem#fff,91.1vw 57vh 0 -0.09rem#fff,70.2vw 25.7vh 0 -0.11rem#fff;
animation-duration: 18s; }
.layer1.a {
animation-delay: -9s; }
.layer2 {
width: 0.8rem;
height: 0.8rem;
filter: blur(3px);
box-shadow: 20.6vw 25vh 0 -0.05rem#fff,47.9vw 46.9vh 0 -0.37rem#fff,81.4vw 49vh 0 -0.46rem#fff,75.7vw 17.7vh 0 -0.49rem#fff,14.3vw 37.3vh 0 -0.27rem#fff,39.4vw 44.9vh 0 -0.13rem#fff,6.3vw 62.4vh 0 -0.27rem#fff,24.5vw 7.4vh 0 -0.36rem#fff,78.2vw 27.9vh 0 -0.32rem#fff,4.3vw 72.2vh 0 -0.05rem#fff,87.4vw 48.2vh 0 -0.48rem#fff,67.7vw 22vh 0 -0.28rem#fff,38vw 79.7vh 0 -0.33rem#fff,59.1vw 22.2vh 0 -0.02rem#fff,23.6vw 75.9vh 0 -0.34rem#fff,18.7vw 89.4vh 0 -0.38rem#fff,93.2vw 9.8vh 0 -0.5rem#fff,17.8vw 74.6vh 0 -0.5rem#fff,83.4vw 51.8vh 0 -0.1rem#fff,49.9vw 96.5vh 0 -0.03rem#fff,79.1vw 39.1vh 0 -0.06rem#fff,76.8vw 63.5vh 0 -0.03rem#fff,7.3vw 10.9vh 0 -0.47rem#fff,56.2vw 55.8vh 0 -0.27rem#fff,23.8vw 30.7vh 0 -0.2rem#fff,96.7vw 69.9vh 0 -0.37rem#fff,38vw 26.3vh 0 -0.38rem#fff,27.9vw 70.9vh 0 -0.15rem#fff,3.8vw 44.1vh 0 -0.22rem#fff,3.9vw 52.4vh 0 -0.06rem#fff,5.2vw 15.6vh 0 -0.06rem#fff,4.1vw 69.7vh 0 -0.14rem#fff,91.1vw 43.4vh 0 -0.29rem#fff,34.2vw 9vh 0 -0.41rem#fff,75.2vw 54.5vh 0 -0.01rem#fff,87.4vw 30.1vh 0 -0.18rem#fff,9.3vw 68.6vh 0 -0.3rem#fff,80.6vw 49.8vh 0 -0.46rem#fff,58.5vw 66.6vh 0 -0.09rem#fff,56.1vw 39.5vh 0 -0.04rem#fff,93.5vw 94.9vh 0 -0.34rem#fff,52.4vw 62.7vh 0 -0.5rem#fff,91.2vw 24.3vh 0 -0.24rem#fff,72.1vw 51.6vh 0 -0.45rem#fff,86.5vw 13.8vh 0 -0.47rem#fff,21.9vw 61.2vh 0 -0.3rem#fff,5.6vw 44.1vh 0 -0.19rem#fff,87.2vw 14.7vh 0 -0.32rem#fff,0.4vw 18.6vh 0 -0.23rem#fff,13.9vw 71.1vh 0 -0.42rem#fff,15.3vw 56.6vh 0 -0.06rem#fff,56.1vw 54vh 0 -0.23rem#fff,69.3vw 79.2vh 0 -0.15rem#fff,92.4vw 73.8vh 0 -0.41rem#fff,84.9vw 83.5vh 0 -0.13rem#fff,61.5vw 76.4vh 0 -0.09rem#fff,51.4vw 90.8vh 0 -0.11rem#fff,41.4vw 51.6vh 0 -0.31rem#fff,87.8vw 51.1vh 0 -0.25rem#fff,18.4vw 62vh 0 -0.47rem#fff,92.4vw 86.7vh 0 -0.39rem#fff,89.5vw 65.6vh 0 -0.39rem#fff,82.7vw 12.5vh 0 -0.07rem#fff,50.5vw 34.8vh 0 -0.04rem#fff,53.9vw 79.4vh 0 -0.09rem#fff,62.4vw 73.2vh 0 -0.04rem#fff,25.3vw 37.1vh 0 -0.43rem#fff,73.7vw 50.6vh 0 -0.03rem#fff,66.8vw 85.3vh 0 -0.12rem#fff,3vw 42vh 0 -0.15rem#fff,9.4vw 0.2vh 0 -0.07rem#fff,41.7vw 95vh 0 -0.09rem#fff,4.5vw 43.7vh 0 -0.4rem#fff,86.8vw 55.2vh 0 -0.36rem#fff,4.5vw 71.2vh 0 -0.28rem#fff,44vw 35.5vh 0 -0.13rem#fff,15.2vw 53.9vh 0 -0.34rem#fff,10.8vw 54.1vh 0 -0.07rem#fff,69.2vw 25.2vh 0 -0.31rem#fff,60.3vw 13.6vh 0 -0.29rem#fff,35.9vw 4vh 0 -0.47rem#fff,30.2vw 60.5vh 0 -0.13rem#fff,80.3vw 35.5vh 0 -0.38rem#fff,63vw 32.7vh 0 -0.43rem#fff,70.9vw 23vh 0 -0.12rem#fff,71.8vw 55.3vh 0 -0.12rem#fff,95.5vw 24.6vh 0 -0.14rem#fff,46.3vw 93.4vh 0 -0.13rem#fff,83.7vw 98.5vh 0 -0.09rem#fff,80vw 76vh 0 -0.17rem#fff,58vw 45.5vh 0 -0.29rem#fff,16.6vw 58.8vh 0 -0.1rem#fff,20.3vw 79.4vh 0 -0.49rem#fff,96.4vw 13.3vh 0 -0.11rem#fff,87.1vw 58.7vh 0 -0.1rem#fff,84.5vw 2.8vh 0 -0.27rem#fff,92.9vw 22.8vh 0 -0.39rem#fff,79.7vw 19.6vh 0 -0.03rem#fff,68.2vw 96.6vh 0 -0.45rem#fff,55vw 16.5vh 0 -0.36rem#fff;
animation-duration: 24s; }
.layer2.a {
animation-delay: -12s; }
.layer3 {
width: 0.6rem;
height: 0.6rem;
filter: blur(6px);
box-shadow: 57.5vw 20vh 0 -0.39rem#fff,89.3vw 7vh 0 -0.3rem#fff,46.8vw 98.1vh 0 -0.46rem#fff,31.2vw 59.6vh 0 -0.22rem#fff,62.9vw 48vh 0 -0.16rem#fff,23.6vw 11.3vh 0 -0.44rem#fff,49.1vw 23.5vh 0 -0.2rem#fff,51vw 79.5vh 0 -0.08rem#fff,45.1vw 2.4vh 0 -0.15rem#fff,67.1vw 21.2vh 0 -0.07rem#fff,46.5vw 61.7vh 0 -0.38rem#fff,94.8vw 10.9vh 0 -0.22rem#fff,51.1vw 28.2vh 0 -0.46rem#fff,93vw 19.9vh 0 -0.43rem#fff,67.2vw 76.2vh 0 -0.39rem#fff,36.6vw 95.6vh 0 -0.05rem#fff,42.8vw 14.7vh 0 -0.05rem#fff,74.4vw 97.9vh 0 -0.14rem#fff,0.7vw 86.4vh 0 -0.5rem#fff,93.5vw 29.4vh 0 -0.02rem#fff,81.3vw 90.2vh 0 -0.29rem#fff,36.9vw 34.1vh 0 -0.1rem#fff,41.2vw 18.6vh 0 -0.46rem#fff,18vw 37.3vh 0 -0.45rem#fff,44.4vw 8.4vh 0 -0.38rem#fff,61.7vw 93.4vh 0 -0.22rem#fff,66.7vw 83.8vh 0 -0.33rem#fff,77.2vw 32.8vh 0 -0.14rem#fff,97vw 19.8vh 0 -0.5rem#fff,38.5vw 49.3vh 0 -0.38rem#fff,8.4vw 76.1vh 0 -0.43rem#fff,89.6vw 19.7vh 0 -0.18rem#fff,55vw 61.4vh 0 -0.45rem#fff,54vw 12.5vh 0 -0.35rem#fff,18.1vw 73.3vh 0 -0.42rem#fff,47.8vw 60.2vh 0 -0.48rem#fff,97.7vw 82.8vh 0 -0.07rem#fff,71.7vw 35.3vh 0 -0.38rem#fff,9.6vw 61.5vh 0 -0.23rem#fff,86.4vw 1.1vh 0 -0.02rem#fff,58.8vw 32.3vh 0 -0.14rem#fff,57.4vw 44.9vh 0 -0.15rem#fff,64.9vw 60.2vh 0 -0.3rem#fff,20.1vw 31.7vh 0 -0.45rem#fff,97.3vw 41.2vh 0 -0.35rem#fff,97.7vw 18.8vh 0 -0.12rem#fff,35.6vw 55.4vh 0 -0.33rem#fff,37.6vw 31.5vh 0 -0.38rem#fff,24.3vw 20.7vh 0 -0.28rem#fff,85.1vw 40vh 0 -0.5rem#fff,43.1vw 77.6vh 0 -0.34rem#fff,54.4vw 18.6vh 0 -0.26rem#fff,39.8vw 20.3vh 0 -0.48rem#fff,64.1vw 8.3vh 0 -0.35rem#fff,43.6vw 42.2vh 0 -0.2rem#fff,93vw 88.8vh 0 -0.3rem#fff,40.2vw 68.5vh 0 -0.22rem#fff,4.4vw 62.1vh 0 -0.22rem#fff,80.9vw 85vh 0 -0.3rem#fff,40.9vw 14.5vh 0 -0.2rem#fff,13.7vw 42.4vh 0 -0.34rem#fff,33vw 53.6vh 0 -0.19rem#fff,60.9vw 34.3vh 0 -0.03rem#fff,69.5vw 48.9vh 0 -0.4rem#fff,10.9vw 55.1vh 0 -0.35rem#fff,5.1vw 58.6vh 0 -0.12rem#fff,95.4vw 55vh 0 -0.5rem#fff,70.2vw 94.5vh 0 -0.33rem#fff,24.3vw 21.3vh 0 -0.35rem#fff,85.3vw 12vh 0 -0.04rem#fff,79.5vw 57.1vh 0 -0.34rem#fff,45.5vw 0.8vh 0 -0.38rem#fff,71.9vw 28.6vh 0 -0.21rem#fff,96.7vw 6.2vh 0 -0.09rem#fff,24.3vw 31.4vh 0 -0.03rem#fff,18vw 7.1vh 0 -0.44rem#fff,17.2vw 72vh 0 -0.26rem#fff,80.6vw 8.7vh 0 -0.01rem#fff,0.2vw 82.9vh 0 -0.2rem#fff,69.7vw 71.3vh 0 -0.26rem#fff,50.1vw 55.3vh 0 -0.21rem#fff,26.5vw 83.1vh 0 -0.26rem#fff,17.7vw 51.4vh 0 -0.37rem#fff,62.3vw 86.3vh 0 -0.14rem#fff,86.7vw 0.5vh 0 -0.38rem#fff,6.7vw 3.7vh 0 -0.03rem#fff,11.5vw 98.5vh 0 -0.31rem#fff,1.8vw 5.6vh 0 -0.13rem#fff,29.1vw 91.4vh 0 -0.13rem#fff,50.9vw 91.3vh 0 -0.05rem#fff,11.8vw 25.4vh 0 -0.27rem#fff,63.8vw 68.5vh 0 -0.34rem#fff,5.3vw 10.9vh 0 -0.03rem#fff,82.6vw 9.5vh 0 -0.29rem#fff,26.7vw 9.8vh 0 -0.39rem#fff,29vw 70.8vh 0 -0.16rem#fff,89.1vw 25.2vh 0 -0.38rem#fff,80.3vw 16.1vh 0 -0.14rem#fff,53.3vw 54.8vh 0 -0.42rem#fff,86.4vw 54vh 0 -0.29rem#fff;
animation-duration: 30s; }
.layer3.a {
animation-delay: -15s; }
@keyframes fall {
100% {
transform: translateY(200vh); } }
@keyframes gradientBG {
0% {
transform: translate(-10%, -10%); }
50% {
transform: translate(-60%, -60%); }
100% {
transform: translate(-10%, -10%); } }
@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); } }
@keyframes train {
0% {
transform: translateX(-80rem); }
55% {
transform: translateX(-80rem); }
85% {
transform: translateX(100vw); }
100% {
transform: translateX(100vw); } }
@keyframes follow_train {
0% {
transform: translateX(-80rem) scaleX(20) scaleY(8); }
55% {
transform: translateX(-80rem) scaleX(20) scaleY(8); }
85% {
transform: translateX(100vw) scaleX(20) scaleY(8); }
100% {
transform: translateX(100vw) scaleX(20) scaleY(8); } }
@keyframes turn {
100% {
transform: rotate(360deg); } }
@keyframes whobble {
100% {
transform: translateY(0.5vh); } }
@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); } }
@keyframes snowman_head {
0% {
transform: rotate(-3deg); }
50% {
transform: rotate(3deg); }
100% {
transform: rotate(-3deg); } }
@keyframes merry_christmas {
0% {
opacity: 0.8; }
50% {
opacity: 0.6; }
100% {
opacity: 0.8; } }
/*# sourceMappingURL=kerstmis.css.map */

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,15 @@
/*
¡¡¡ OPGELED !!!
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 ]§=---
*/
/*lightmode*/ /*lightmode*/
:root { :root {
/*Darkmode colors*/ /*Darkmode colors*/
@ -12,7 +24,28 @@
} }
body{ body{
height: 100%; height: 100%;
font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif; font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
background-color: #2F0000;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_regular.ttf');
font-weight: normal;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_light.ttf');
font-weight: 200;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_medium.ttf');
font-weight: medium;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_bold.ttf');
font-weight: bold;
} }
.btn{ .btn{
border-radius: 5rem; border-radius: 5rem;
@ -20,6 +53,10 @@
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
background-image: linear-gradient(-40deg,#F53030, #F58B9E); background-image: linear-gradient(-40deg,#F53030, #F58B9E);
} }
.btn:hover{
background-image: linear-gradient(-40deg, #A81111, #FF4B33);
}
.navbar { .navbar {
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
padding: 1.5rem; padding: 1.5rem;
@ -28,55 +65,126 @@
box-shadow: none; box-shadow: none;
text-transform: capitalize; text-transform: capitalize;
} }
.nav>li>a {
padding-left: 1vw;
padding-right: 1vw;
}
.main{ .main{
height: 90vh;
overflow: scroll;
padding-left: 0;
padding-right: 0;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; align-items: center;
flex-direction: column;
} }
.navbar .container{ .navbar .container{
width: 100%; width: 100%;
padding: 0 8rem; padding: 0 4vw;
} }
body .container{
@media (min-width: 768px){
.container {
width: 100%;
}
}
@media (min-width: 992px){
.main .container, .main .orders {
width: 970px;
}
}
@media (min-width: 1200px){
.main .container, .main .orders {
width: 1170px;
}
}
.main{
padding-top: 2.5rem; padding-top: 2.5rem;
} }
.order_data { .order_data {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
justify-content: space-around; justify-content: space-between;
padding: 0 3rem;
align-items: baseline; align-items: baseline;
} }
.order_row {
background: transparent;
}
.order_data h5{
max-width: 60%;
padding-bottom: 3rem;
}
.expand_button{ .expand_button{
padding: 1rem 0rem; padding: 1rem 0rem;
margin-top: -1rem; margin-top: -1rem;
width: 70%; width: 70%;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.hi_im_haldis h2{ .hi_im_haldis h2{
display: none; display: none;
} }
.hi_im_haldis h3 { .hi_im_haldis h3 {
width: 100%; width: 100%;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center; text-align: center;
} }
.hi_im_haldis { .hi_im_haldis {
background: linear-gradient(70deg,rgba(203, 52, 68,0.8), rgba(135, 32, 44,0.8));
border-radius: 0;
width: 100%; width: 100%;
} }
.hi_im_haldis_wrapper {
width: 100%;
}
.darker:nth-child(even){
background-color: #B62937;
border-radius: 2rem;
}
.darker:nth-child(odd){
background-color: #821C25;
border-radius: 2rem;
}
.darker{
padding: 1rem;
}
.order_row:nth-child(even) .order_data {
background-color: #B62937;
border-radius: 2rem;
}
.order_row:nth-child(odd) .order_data {
background-color: #821C25;
border-radius: 2rem;
}
.order_row h5{
font-weight: bold;
}
.order_row{
margin-bottom: 3rem;
}
h3{
padding-bottom: 1rem;
}
.home_sir { .home_sir {
font-weight: bold; font-weight: bold;
background: linear-gradient(-40deg,#F53030, #F58B9E); color: #F45D68;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.expand_button_wrapper{ .expand_button_wrapper{
margin-top: -1rem;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -94,21 +202,34 @@
border-bottom: 1px solid rgb(255, 155, 174); border-bottom: 1px solid rgb(255, 155, 174);
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.navbar-nav{ .navbar-nav{
padding-left: 2rem; padding-left: 2rem;
} }
.jumbotron, .darker { .jumbotron, .darker {
background: linear-gradient(-40deg,rgba(240, 192, 157, 0.5), #F58B9E); display: flex;
display: flex;
flex-direction: column; flex-direction: column;
border-radius: 4rem; border-radius: 4rem;
} }
.row>div>h5 { .row>div>h5 {
font-weight: bold; font-weight: bold;
padding-top: 1rem; padding-top: 1.5rem;
font-size: 2.5rem;
} }
.row>div>.amount_of_orders{
font-weight: lighter;
font-size: 1.6rem;
}
.row>div .time{
font-weight: lighter;
}
.jumbotron { .jumbotron {
background-color: transparent; } background-color: transparent;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{ .navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{
background-color: transparent; background-color: transparent;
@ -122,13 +243,55 @@
filter: blur(0px) brightness(80%); filter: blur(0px) brightness(80%);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; } left: 0;
}
footer a{
color: #69E8FF;
}
footer{
position: fixed;
bottom: 0;
width: 100%;
background:#CB3444;
height: 5rem;
display: flex;
align-items: center;
}
footer>hr{
display: none;
}
#mapid {
width: 100%;
}
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
padding: 1rem 5rem 3rem 5rem;
}
.order_depts {
width: 100%;
margin-bottom: 10rem;
}
.location_data, .location_products {
width: 100%;
}
.location_products {
margin-bottom: 10rem;
}
.locations_locations {
padding: 1rem 5rem 3rem 5rem;
}
.background_wrapper { .background_wrapper {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; bottom: 5rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,12 @@
/*Darkmode*/
:root {
/*Darkmode colors*/
--dGray0:#D0D0D8;
--dGray1:#8E8E93;
--dGray2:#636366;
--dGray3:#48484A;
--dGray4:#3A3A3C;
--dGray5:#2C2C2E;
--dGray6:#1C1C1E;
--dBlue:#0A84FF;
}

View file

@ -0,0 +1,4 @@
.background {
background-image: url("https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
background-size: contain;
}

View file

@ -0,0 +1,16 @@
/*halloween*/
:root {
/*Darkmode colors*/
--dGray0:#FFEB65;
--dGray1:#F28705;
--dGray2:#F25C05;
--dGray3:#F27405;
--dGray4:#8C3D0F;
--dGray5:#260101;
--dGray6:#260101;
--dBlue:#D91604;
}
.table-hover tbody tr:hover{
background-image: url("static/images/themes/halloween/Halloween.jpeg");
}

View file

@ -0,0 +1,439 @@
@charset "UTF-8";
/*
¡¡¡ OPGELED !!!
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 ]§=---
*/
/*lightmode*/
:root {
/*Darkmode colors*/
--dGray0:#F28705;
--dGray1:white;
--dGray2:#590212;
--dGray3:#590212;
--dGray4:#274001;
--dGray5:#274001;
--dGray6:#F2778D;
--dBlue:#F2778D; }
body {
height: 100%;
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
background-color: #2F0000; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_regular.ttf");
font-weight: normal; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_light.ttf");
font-weight: 200; }
@font-face {
font-family: Radikal;
src: url("static/fonts/radikal_bold.ttf");
font-weight: bold; }
.btn {
border-radius: 5rem;
color: white;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
background-image: linear-gradient(-40deg, #F53030, #F58B9E); }
.btn:hover {
background-image: linear-gradient(-40deg, #A81111, #FF4B33); }
.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; }
.nav > li > a {
padding-left: 1vw;
padding-right: 1vw; }
.main {
height: 90vh;
overflow: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
display: flex;
align-items: center;
flex-direction: column; }
.navbar .container {
width: 100%;
padding: 0 4vw; }
@media (min-width: 768px) {
.container {
width: 100%; } }
@media (min-width: 992px) {
.main .container, .main .orders {
width: 970px; } }
@media (min-width: 1200px) {
.main .container, .main .orders {
width: 1170px; } }
.main {
padding-top: 2.5rem; }
.order_data {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 3rem;
align-items: baseline; }
.order_data h5 {
max-width: 60%;
padding-bottom: 3rem; }
.expand_button {
padding: 1rem 0rem;
margin-top: -1rem;
width: 70%;
margin-bottom: 1.5rem; }
.hi_im_haldis h2 {
display: none; }
.hi_im_haldis h3 {
width: 100%;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center; }
.hi_im_haldis {
background: linear-gradient(70deg, rgba(203, 52, 68, 0.8), rgba(135, 32, 44, 0.8));
border-radius: 0;
width: 100%; }
.hi_im_haldis_wrapper {
width: 100%; }
.darker:nth-child(even) {
background-color: #B62937;
border-radius: 2rem; }
.darker:nth-child(odd) {
background-color: #821C25;
border-radius: 2rem; }
.darker {
padding: 1rem; }
.order_row:nth-child(even) .order_data {
background-color: #B62937;
border-radius: 2rem; }
.order_row {
background: transparent; }
.order_row:nth-child(odd) .order_data {
background-color: #821C25;
border-radius: 2rem; }
.order_row h5 {
font-weight: bold; }
.order_row {
margin-bottom: 3rem; }
h3 {
padding-bottom: 1rem; }
.home_sir {
font-weight: bold;
color: #F45D68; }
.expand_button_wrapper {
margin-top: -1rem;
width: 100%;
display: flex;
justify-content: center; }
.time_data {
text-align: right;
display: flex;
flex-direction: column;
justify-self: right; }
.navbar .navbar-nav .active a {
color: #ff9bae;
border-bottom: 1px solid #ff9bae;
padding-bottom: 1rem; }
.navbar-nav {
padding-left: 2rem; }
.jumbotron, .darker {
display: flex;
flex-direction: column;
border-radius: 4rem; }
.row > div > h5 {
font-weight: bold;
padding-top: 1.5rem;
font-size: 2.5rem; }
.row > div > .amount_of_orders {
font-weight: lighter;
font-size: 1.6rem; }
.row > div .time {
font-weight: lighter; }
.jumbotron {
background-color: transparent; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
background-color: transparent; }
.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; }
footer a {
color: #69E8FF; }
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #CB3444;
height: 5rem;
display: flex;
align-items: center; }
footer > hr {
display: none; }
#mapid {
width: 100%; }
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
padding: 1rem 5rem 3rem 5rem; }
.order_depts {
width: 100%;
margin-bottom: 10rem; }
.location_data, .location_products {
width: 100%; }
.location_products {
margin-bottom: 10rem; }
.locations_locations {
padding: 1rem 5rem 3rem 5rem; }
.background_wrapper {
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 100%;
overflow: hidden; }
.christmas_background {
z-index: -101;
width: 300%;
height: 300%;
background: linear-gradient(-45deg, #2F0000, #C20A12); }
.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"); }
.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; }
.snowman_wrapper {
height: 17rem;
width: 10rem;
position: absolute;
bottom: 15rem;
left: -12rem;
animation: snowman 37s ease infinite;
transform-origin: right bottom; }
.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; }
.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"); }
.train_button {
visibility: hidden; }
.train_wrapper {
position: absolute;
bottom: 0.5rem;
transform: translateX(-80vw);
animation: train 47s linear infinite; }
.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"); }
.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; }
.wheel_big {
width: 3.2rem;
height: 3.2rem; }
.wheel_small {
width: 2.5rem;
height: 2.5rem; }
.train .wheel1 {
animation: turn 2s linear infinite;
left: 3.5rem; }
.train .wheel2 {
animation: turn 2s linear infinite, -0.1s;
left: 7rem; }
.train .wheel3 {
animation: turn 2s linear infinite -0.3s;
left: 10.5rem; }
.train .wheel4 {
animation: turn 1.5s linear infinite -0.5s;
left: 13.9rem; }
.train .wheel5 {
animation: turn 1.5s linear infinite -0.7s;
left: 16.6rem; }
.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; }
.mc_wagon {
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
left: 0rem; }
.zeus_wagon {
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
left: 15rem; }
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
animation: turn 2s linear infinite;
bottom: -1.1rem;
left: 2.2rem; }
.zeus_wagon .wheel2, .mc_wagon .wheel2 {
animation: turn 2s linear infinite, -0.1s;
bottom: -1.1rem;
left: 5.75rem; }
.zeus_wagon .wheel3, .mc_wagon .wheel3 {
animation: turn 2s linear infinite -0.3s;
bottom: -1.1rem;
left: 9.3rem; }
@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); } }
@keyframes train {
0% {
transform: translateX(-80rem); }
55% {
transform: translateX(-80rem); }
85% {
transform: translateX(100vw); }
100% {
transform: translateX(100vw); } }
@keyframes turn {
100% {
transform: rotate(360deg); } }
@keyframes whobble {
100% {
transform: translateY(0.5vh); } }
@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); } }
@keyframes snowman_head {
0% {
transform: rotate(-3deg); }
50% {
transform: rotate(3deg); }
100% {
transform: rotate(-3deg); } }
/*# sourceMappingURL=kerstmis.css.map */

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,534 @@
/*
¡¡¡ OPGELED !!!
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 ]§=---
*/
/*lightmode*/
:root {
/*Darkmode colors*/
--dGray0:#F28705;
--dGray1:white;
--dGray2:#590212;
--dGray3:#590212;
--dGray4:#274001;
--dGray5:#274001;
--dGray6:#F2778D;
--dBlue:#F2778D;
}
body{
height: 100%;
font-family: Radikal,Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
background-color: #2F0000;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_regular.ttf');
font-weight: normal;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_light.ttf');
font-weight: 200;
}
@font-face {
font-family: Radikal;
src: url('static/fonts/radikal_bold.ttf');
font-weight: bold;
}
.btn{
border-radius: 5rem;
color: white;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
background-image: linear-gradient(-40deg,#F53030, #F58B9E);
}
.btn:hover{
background-image: linear-gradient(-40deg, #A81111, #FF4B33);
}
.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;
}
.nav>li>a {
padding-left: 1vw;
padding-right: 1vw;
}
.main{
height: 90vh;
overflow: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.navbar .container{
width: 100%;
padding: 0 4vw;
}
@media (min-width: 768px){
.container {
width: 100%;
}
}
@media (min-width: 992px){
.main .container, .main .orders {
width: 970px;
}
}
@media (min-width: 1200px){
.main .container, .main .orders {
width: 1170px;
}
}
.main{
padding-top: 2.5rem;
}
.order_data {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 3rem;
align-items: baseline;
}
.order_data h5{
max-width: 60%;
padding-bottom: 3rem;
}
.expand_button{
padding: 1rem 0rem;
margin-top: -1rem;
width: 70%;
margin-bottom: 1.5rem;
}
.hi_im_haldis h2{
display: none;
}
.hi_im_haldis h3 {
width: 100%;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center;
}
.hi_im_haldis {
background: linear-gradient(70deg,rgba(203, 52, 68,0.8), rgba(135, 32, 44,0.8));
border-radius: 0;
width: 100%;
}
.hi_im_haldis_wrapper {
width: 100%;
}
.darker:nth-child(even){
background-color: #B62937;
border-radius: 2rem;
}
.darker:nth-child(odd){
background-color: #821C25;
border-radius: 2rem;
}
.darker{
padding: 1rem;
}
.order_row:nth-child(even) .order_data {
background-color: #B62937;
border-radius: 2rem;
}
.order_row {
background: transparent;
}
.order_row:nth-child(odd) .order_data {
background-color: #821C25;
border-radius: 2rem;
}
.order_row h5{
font-weight: bold;
}
.order_row{
margin-bottom: 3rem;
}
h3{
padding-bottom: 1rem;
}
.home_sir {
font-weight: bold;
color: #F45D68;
}
.expand_button_wrapper{
margin-top: -1rem;
width: 100%;
display: flex;
justify-content: center;
}
.time_data {
text-align: right;
display: flex;
flex-direction: column;
justify-self: right;
}
.navbar .navbar-nav .active a{
color: rgb(255, 155, 174);
border-bottom: 1px solid rgb(255, 155, 174);
padding-bottom: 1rem;
}
.navbar-nav{
padding-left: 2rem;
}
.jumbotron, .darker {
display: flex;
flex-direction: column;
border-radius: 4rem;
}
.row>div>h5 {
font-weight: bold;
padding-top: 1.5rem;
font-size: 2.5rem;
}
.row>div>.amount_of_orders{
font-weight: lighter;
font-size: 1.6rem;
}
.row>div .time{
font-weight: lighter;
}
.jumbotron {
background-color: transparent;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{
background-color: transparent;
}
.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;
}
footer a{
color: #69E8FF;
}
footer{
position: fixed;
bottom: 0;
width: 100%;
background:#CB3444;
height: 5rem;
display: flex;
align-items: center;
}
footer>hr{
display: none;
}
#mapid {
width: 100%;
}
.order_overview, .order_order, .order_items, .order_ordered, .order_depts {
padding: 1rem 5rem 3rem 5rem;
}
.order_depts {
width: 100%;
margin-bottom: 10rem;
}
.location_data, .location_products {
width: 100%;
}
.location_products {
margin-bottom: 10rem;
}
.locations_locations {
padding: 1rem 5rem 3rem 5rem;
}
.background_wrapper {
position: absolute;
left: 0;
bottom: 5rem;
width: 100%;
height: 100%;
overflow: hidden;
}
.christmas_background{
z-index: -101;
width: 300%;
height: 300%;
background: linear-gradient(-45deg, #2F0000, #C20A12);
}
.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");
}
.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;
}
.snowman_wrapper{
height: 17rem;
width: 10rem;
position: absolute;
bottom: 15rem;
left: -12rem;
animation: snowman 37s ease infinite;
transform-origin: right bottom;
}
.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;
}
.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")
}
.train_button {
visibility: hidden;
}
.train_wrapper{
position: absolute;
bottom: 0.5rem;
transform: translateX(-80vw);
animation: train 47s linear infinite;
}
.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");
//transform: translate(0vw, 60vh);
}
.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;
}
.wheel_big {
width: 3.2rem;
height: 3.2rem;
}
.wheel_small {
width: 2.5rem;
height: 2.5rem;
}
.train .wheel1 {
animation: turn 2s linear infinite;
left: 3.5rem;
}
.train .wheel2{
animation: turn 2s linear infinite, -0.1s;
left: 7rem;
}
.train .wheel3{
animation: turn 2s linear infinite -0.3s;
left: 10.5rem;
}
.train .wheel4{
animation: turn 1.5s linear infinite -0.5s;
left: 13.9rem;
}
.train .wheel5{
animation: turn 1.5s linear infinite -0.7s;
left: 16.6rem;
}
.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;
}
.mc_wagon {
background-image: url("static/images/themes/kerstmis/mc_wagon.svg");
left: 0rem;
}
.zeus_wagon {
background-image: url("static/images/themes/kerstmis/zeus_wagon.svg");
left: 15rem;
}
.zeus_wagon .wheel1, .mc_wagon .wheel1 {
animation: turn 2s linear infinite;
bottom: -1.1rem;
left: 2.2rem;
}
.zeus_wagon .wheel2, .mc_wagon .wheel2{
animation: turn 2s linear infinite, -0.1s;
bottom: -1.1rem;
left: 5.75rem;
}
.zeus_wagon .wheel3, .mc_wagon .wheel3{
animation: turn 2s linear infinite -0.3s;
bottom: -1.1rem;
left: 9.3rem;
}
@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);
}
}
@keyframes train {
0%{
transform: translateX(-80rem);
}
55%{
transform: translateX(-80rem);
}
85% {
transform: translateX(100vw);
}
100%{
transform: translateX(100vw);
}
}
@keyframes turn {
100% {
transform: rotate(360deg);
}
}
@keyframes whobble {
100% {
transform: translateY(0.5vh);
}
}
@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);
}
}
@keyframes snowman_head {
0%{
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(-3deg);
}
}

View file

@ -0,0 +1,12 @@
/*lightmode*/
:root {
/*Darkmode colors*/
--dGray0:#444444;
--dGray1:#666666;
--dGray2:#212121;
--dGray3:#ffffff;
--dGray4:#f9f9f9;
--dGray5:#ffffff;
--dGray6:#ffffff;
--dBlue:#0A84FF;
}

View file

@ -0,0 +1,16 @@
/*sinterklaas*/
:root {
/*Darkmode colors*/
--dGray0:#F2EB80;
--dGray1:#F2EF05;
--dGray2:#F2EF05;
--dGray3:#177EBF;
--dGray4:#0C6AA6;
--dGray5:#F20505;
--dGray6:#F50B00;
--dBlue:#35F546;
}
.background{
background-image: url("static/images/themes/sinterklaas/Sinterklaas.jpg");
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,16 +1,26 @@
{ {
const init = () =>{ const init = () =>{
document.cookie.split('; ').forEach(itCookie = cookie =>{ document.cookie.split('; ').forEach(itCookie = cookie =>{ //I know that this is a shitty way of fixing things... But I'll try to fix it in the future.
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){ if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){
document.querySelector(".toggleDarkmode").innerHTML = "<a>Enter lightmode</a>" document.querySelector(".toggleDarkmode").innerHTML = "<a>Enter lightmode</a>"
document.querySelector(".toggleDarkmode").id = "lightmode" document.querySelector(".toggleDarkmode").id = "lightmode";
} }
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "kerstmis"){ if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "kerstmis"){
document.querySelector(".background").innerHTML = '<div class="background_wrapper"><div class="christmas_background"></div><div class="snow layer1 a"></div><div class="snow layer1"></div> <div class="snow layer2 a"></div><div class="snow layer2"></div><div class="snow layer3 a"></div><div class="snow layer3"></div><div class="snowman_wrapper"><div class="snowman_head"></div><div class="snowman_body"></div></div><div class="train_wrapper"><div class="whole_train"><div class="mc_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="zeus_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="train"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div><div class="wheel_small wheel4"></div><div class="wheel_small wheel5"></div></div></div></div><input type="checkbox" class="train_button"><div class="merry_christmas"></div><div class="sled_wrapper"><div class="sled"></div></div></div>'; document.querySelector(".background").innerHTML = '<div class="background_wrapper"><div class="christmas_background"></div><div class="snow layer1 a"></div><div class="snow layer1"></div> <div class="snow layer2 a"></div><div class="snow layer2"></div><div class="snow layer3 a"></div><div class="snow layer3"></div><div class="snowman_wrapper"><div class="snowman_head"></div><div class="snowman_body"></div></div><div class="train_wrapper"><div class="whole_train"><div class="mc_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="zeus_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="train"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div><div class="wheel_small wheel4"></div><div class="wheel_small wheel5"></div></div></div></div><input type="checkbox" class="train_button"><div class="merry_christmas"></div><div class="sled_wrapper"><div class="sled"></div></div></div>';
} }
if(cookie.split("=")[0] == "performance" && cookie.split("=")[1] == "highPerformance" && document.querySelector(".changePerformance")){
document.querySelector(".changePerformance").innerHTML = "enable low performance";
document.querySelector(".changePerformance").id = "lowPerformance";
}
}); });
document.querySelectorAll('.changeThemeButton').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangeTheme)}); document.querySelectorAll('.changeThemeButton').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangeTheme)});
document.querySelectorAll('.changePerformance').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangePerformance)});
}
const handleClickChangePerformance = e => {
document.cookie = "performance = "+e.currentTarget.id+";path=/";
location.reload();
} }
const handleClickChangeTheme = e =>{ const handleClickChangeTheme = e =>{

View file

@ -4,10 +4,10 @@
{% import "utils.html" as util -%} {% import "utils.html" as util -%}
{% block container %} {% block container %}
<div class="row"> <div class="row hi_im_haldis_wrapper">
<div class="jumbotron hi_im_haldis"> <div class="jumbotron hi_im_haldis">
<h2>Hi, I'm Haldis</h2> <h2>Hi, I'm Haldis</h2>
<h3>What would you like to eat, <span class="home_sir">sir</span>?</h3> <h3>What would you like to <span class="home_sir">eat</span>?</h3>
</div> </div>
</div> </div>
<div class="row container"> <div class="row container">

View file

@ -36,6 +36,7 @@ Haldis - {{ active_page|capitalize }}
{% block navbar %} {% block navbar %}
<div class="background"></div> <div class="background"></div>
<div class="foreground"></div>
<nav class="navbar navbar-default navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">

View file

@ -4,7 +4,7 @@
{% import "utils.html" as util %} {% import "utils.html" as util %}
{% block container %} {% block container %}
<div class="row" xmlns="http://www.w3.org/1999/html"> <div class="row location_data" xmlns="http://www.w3.org/1999/html">
<div class="col-md-push-1 col-md-5 darker"> <div class="col-md-push-1 col-md-5 darker">
<h3>{{ location.name }}</h3> <h3>{{ location.name }}</h3>
<span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/> <span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/>
@ -20,7 +20,7 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="row"> <div class="row location_products">
<div class="col-md-push-1 col-md-10 darker"> <div class="col-md-push-1 col-md-10 darker">
<h3 id="order-title">Products</h3> <h3 id="order-title">Products</h3>
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">

View file

@ -5,7 +5,7 @@
{% block container %} {% block container %}
<div class="row"> <div class="row">
<div class="col-md-push-1 col-md-10 darker"> <div class="col-md-push-1 col-md-10 darker locations_locations">
<h3>Locations</h3> <h3>Locations</h3>
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">
<thead> <thead>

View file

@ -7,7 +7,7 @@
{% block container %} {% block container %}
<div class="row"> <div class="row">
<div class="col-md-push-1 col-md-10 darker" id="info"><!-- Shitty html--> <div class="col-md-push-1 col-md-10 darker order_overview" id="info"><!-- Shitty html -->
<h3 id="order-title">Order {{ order.id }} <h3 id="order-title">Order {{ order.id }}
<div class="pull-right"> <div class="pull-right">
{% if order.can_close(current_user.id) -%} {% if order.can_close(current_user.id) -%}
@ -36,7 +36,7 @@
total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %} total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
</div> </div>
{% if form -%} {% if form -%}
<div class="col-md-push-1 col-md-10 darker" id="form"> <div class="col-md-push-1 col-md-10 darker order_order" id="form">
<h4>Order:</h4> <h4>Order:</h4>
<form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}"> <form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}">
<span class="pull-right"> <span class="pull-right">
@ -68,7 +68,7 @@
{%- endif %} {%- endif %}
</div> </div>
<div class="row" id="items"> <div class="row" id="items">
<div class="col-md-push-1 col-md-5 darker" id="items-list"> <div class="col-md-push-1 col-md-5 darker order_items" id="items-list">
<h3>Items</h3> <h3>Items</h3>
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">
<thead> <thead>
@ -97,7 +97,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-md-push-2 col-md-4 darker box" id="items-ordered"> <div class="col-md-push-2 col-md-4 darker box order_ordered" id="items-ordered">
<h3>Ordered products: {{ order.items.count() }}</h3> <h3>Ordered products: {{ order.items.count() }}</h3>
<a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a> <a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a>
{% for key, value in order.group_by_product().items() -%} {% for key, value in order.group_by_product().items() -%}
@ -115,7 +115,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-push-1 col-md-5 darker" id="debts"> <div class="col-md-push-1 col-md-5 darker order_depts" id="debts">
<h3>Debts</h3> <h3>Debts</h3>
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">
<thead> <thead>

View file

@ -5,7 +5,7 @@
{% import "utils.html" as util -%} {% import "utils.html" as util -%}
{% block container %} {% block container %}
<div class="row"> <div class="row orders">
<div class="col-md-5"> <div class="col-md-5">
{% if orders|count > 0 -%} {% if orders|count > 0 -%}
<h3>Open orders:</h3> <h3>Open orders:</h3>

View file

@ -5,4 +5,5 @@
<h1>{{ current_user.username }}</h1> <h1>{{ current_user.username }}</h1>
<h3>Themes</h3> <h3>Themes</h3>
<p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p> <p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p>
<p><a class="changePerformance" id="highPerformance">enable high performance</a></p>
{% endblock %} {% endblock %}

View file

@ -1,8 +1,8 @@
{% macro render_order(order) -%} {% macro render_order(order) -%}
<div class="row darker"> <div class="row darke order_row">
<div class="col-md-8 col-lg-9 order_data"> <div class="col-md-8 col-lg-9 order_data">
<h5>{{ order.location.name }}</h5> <h5>{{ order.location.name }}</h5>
<b>{{ order.items.count() }} orders</b></p> <b class="amount_of_orders">{{ order.items.count() }} orders</b></p>
<p class="time_data"> <p class="time_data">
{% if order.stoptime %} {% if order.stoptime %}
<span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span><span class="time">{{ order.stoptime|countdown }}</span> <span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span><span class="time">{{ order.stoptime|countdown }}</span>

View file

@ -30,14 +30,21 @@ def home() -> str:
@general_bp.route("/css") @general_bp.route("/css")
def css(): def css():
"Generate the css" "Generate the css"
if (request.cookies.get('performance') and request.cookies.get('performance') == 'highPerformance'):
cssPath = 'app/static/css/themes/highPerformance/'
else:
cssPath = 'app/static/css/themes/lowPerformance/'
if request.cookies.get('theme'): if request.cookies.get('theme'):
if request.cookies['theme'] == 'customTheme': if request.cookies['theme'] == 'customTheme':
#TODO: The custom theme is hardcoded :(. Make the server auto select a custom team. #TODO: The custom theme is hardcoded :(. Make the server auto select a custom team.
f = open("app/static/css/themes/sinterklaas.css") f = open(cssPath+"sinterklaas.css")
else: else:
f = open("app/static/css/themes/"+request.cookies['theme']+".css") try:
f = open(cssPath+request.cookies['theme']+".css")
except IOError:
f = open(cssPath+"lightmode.css")
else: else:
f = open("app/static/css/lightmode.css") f = open(cssPath+"lightmode.css")
response = make_response(f.read()) response = make_response(f.read())
response.headers['Content-Type'] = 'text/css' response.headers['Content-Type'] = 'text/css'
return response return response