Created css for 'kerstmis'
This commit is contained in:
kindtanton
parent
eb61d3286b
commit
c5f82afc6a
|
|
@ -9,6 +9,7 @@ body {
|
|||
color: var(--dGray1);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background{
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
|
|
@ -50,6 +51,10 @@ body {
|
|||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.order_row {
|
||||
background: var(--dGray4);
|
||||
}
|
||||
|
||||
@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 */
|
||||
.sm-no-side-padding {
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
531
app/static/css/themes/highPerformance/kerstmis.css
Normal file
531
app/static/css/themes/highPerformance/kerstmis.css
Normal 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 */
|
||||
7
app/static/css/themes/highPerformance/kerstmis.css.map
Normal file
7
app/static/css/themes/highPerformance/kerstmis.css.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
|
|
@ -12,7 +24,28 @@
|
|||
}
|
||||
body{
|
||||
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{
|
||||
border-radius: 5rem;
|
||||
|
|
@ -20,6 +53,10 @@
|
|||
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;
|
||||
|
|
@ -28,55 +65,126 @@
|
|||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar .container{
|
||||
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;
|
||||
}
|
||||
.order_data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
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;
|
||||
background: linear-gradient(-40deg,#F53030, #F58B9E);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: #F45D68;
|
||||
}
|
||||
|
||||
.expand_button_wrapper{
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -94,21 +202,34 @@
|
|||
border-bottom: 1px solid rgb(255, 155, 174);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background: linear-gradient(-40deg,rgba(240, 192, 157, 0.5), #F58B9E);
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
|
||||
.row>div>h5 {
|
||||
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 {
|
||||
background-color: transparent; }
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover{
|
||||
background-color: transparent;
|
||||
|
|
@ -122,13 +243,55 @@
|
|||
filter: blur(0px) brightness(80%);
|
||||
position: fixed;
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
12
app/static/css/themes/lowPerformance/darkmode.css
Normal file
12
app/static/css/themes/lowPerformance/darkmode.css
Normal 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;
|
||||
}
|
||||
4
app/static/css/themes/lowPerformance/dataPrivacy.css
Normal file
4
app/static/css/themes/lowPerformance/dataPrivacy.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.background {
|
||||
background-image: url("https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
|
||||
background-size: contain;
|
||||
}
|
||||
16
app/static/css/themes/lowPerformance/halloween.css
Normal file
16
app/static/css/themes/lowPerformance/halloween.css
Normal 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");
|
||||
}
|
||||
439
app/static/css/themes/lowPerformance/kerstmis.css
Normal file
439
app/static/css/themes/lowPerformance/kerstmis.css
Normal 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 */
|
||||
7
app/static/css/themes/lowPerformance/kerstmis.css.map
Normal file
7
app/static/css/themes/lowPerformance/kerstmis.css.map
Normal file
File diff suppressed because one or more lines are too long
534
app/static/css/themes/lowPerformance/kerstmis.scss
Normal file
534
app/static/css/themes/lowPerformance/kerstmis.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
12
app/static/css/themes/lowPerformance/lightmode.css
Normal file
12
app/static/css/themes/lowPerformance/lightmode.css
Normal 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;
|
||||
}
|
||||
16
app/static/css/themes/lowPerformance/sinterklaas.css
Normal file
16
app/static/css/themes/lowPerformance/sinterklaas.css
Normal 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");
|
||||
}
|
||||
BIN
app/static/fonts/radikal_bold.ttf
Normal file
BIN
app/static/fonts/radikal_bold.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_light.ttf
Normal file
BIN
app/static/fonts/radikal_light.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_medium.ttf
Normal file
BIN
app/static/fonts/radikal_medium.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_regular.ttf
Normal file
BIN
app/static/fonts/radikal_regular.ttf
Normal file
Binary file not shown.
BIN
app/static/fonts/radikal_thin.ttf
Normal file
BIN
app/static/fonts/radikal_thin.ttf
Normal file
Binary file not shown.
|
|
@ -1,16 +1,26 @@
|
|||
|
||||
{
|
||||
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"){
|
||||
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"){
|
||||
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('.changePerformance').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangePerformance)});
|
||||
}
|
||||
|
||||
const handleClickChangePerformance = e => {
|
||||
document.cookie = "performance = "+e.currentTarget.id+";path=/";
|
||||
location.reload();
|
||||
}
|
||||
|
||||
const handleClickChangeTheme = e =>{
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
{% import "utils.html" as util -%}
|
||||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="row hi_im_haldis_wrapper">
|
||||
<div class="jumbotron hi_im_haldis">
|
||||
<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 class="row container">
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ Haldis - {{ active_page|capitalize }}
|
|||
|
||||
{% block navbar %}
|
||||
<div class="background"></div>
|
||||
<div class="foreground"></div>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% import "utils.html" as util %}
|
||||
|
||||
{% 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">
|
||||
<h3>{{ location.name }}</h3>
|
||||
<span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row location_products">
|
||||
<div class="col-md-push-1 col-md-10 darker">
|
||||
<h3 id="order-title">Products</h3>
|
||||
<table class="table table-hover table-condensed">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
{% block container %}
|
||||
<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>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
{% block container %}
|
||||
<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 }}
|
||||
<div class="pull-right">
|
||||
{% 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 %}
|
||||
</div>
|
||||
{% 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>
|
||||
<form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}">
|
||||
<span class="pull-right">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
{%- endif %}
|
||||
</div>
|
||||
<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>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a>
|
||||
{% for key, value in order.group_by_product().items() -%}
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<table class="table table-hover table-condensed">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% import "utils.html" as util -%}
|
||||
|
||||
{% block container %}
|
||||
<div class="row">
|
||||
<div class="row orders">
|
||||
<div class="col-md-5">
|
||||
{% if orders|count > 0 -%}
|
||||
<h3>Open orders:</h3>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@
|
|||
<h1>{{ current_user.username }}</h1>
|
||||
<h3>Themes</h3>
|
||||
<p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p>
|
||||
<p><a class="changePerformance" id="highPerformance">enable high performance</a></p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{% macro render_order(order) -%}
|
||||
<div class="row darker">
|
||||
<div class="row darke order_row">
|
||||
<div class="col-md-8 col-lg-9 order_data">
|
||||
<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">
|
||||
{% if order.stoptime %}
|
||||
<span><b>Closes </b>{{ order.stoptime.strftime("%H:%M") }}</span><span class="time">{{ order.stoptime|countdown }}</span>
|
||||
|
|
|
|||
|
|
@ -30,14 +30,21 @@ def home() -> str:
|
|||
@general_bp.route("/css")
|
||||
def 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['theme'] == 'customTheme':
|
||||
#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:
|
||||
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:
|
||||
f = open("app/static/css/lightmode.css")
|
||||
f = open(cssPath+"lightmode.css")
|
||||
response = make_response(f.read())
|
||||
response.headers['Content-Type'] = 'text/css'
|
||||
return response
|
||||
|
|
|
|||
Loading…
Reference in a new issue