Fix themes
This commit is contained in:
parent
4f7ffc0e3d
commit
ff57afca9a
GPG Key ID:
511C112F1331BBB4
|
|
@ -12,5 +12,9 @@ indent_style = tab
|
|||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.el]
|
||||
indent_style = space
|
||||
|
|
|
|||
|
|
@ -73,4 +73,5 @@ tmp/
|
|||
.tern-port
|
||||
|
||||
# Do not add scss cache
|
||||
.sass-cache
|
||||
*.sass-cache
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
# Find a SASS preprocessor
|
||||
SASS := $(shell command -v sass 2>/dev/null)
|
||||
ifndef SASS
|
||||
SASS := $(shell command -v sassc 2>/dev/null)
|
||||
endif
|
||||
ifndef SASS
|
||||
$(error No SASS preprocessor found)
|
||||
endif
|
||||
|
||||
SASSFLAGS := --sourcemap=auto --
|
||||
|
||||
.PHONY: all clean
|
||||
|
||||
# Detect SCSS files, use their CSS counterparts as `all` target
|
||||
SCSS_FILES := $(wildcard *.scss)
|
||||
all: $(SCSS_FILES:%.scss=%.css)
|
||||
|
||||
# Teach Make how to convert SCSS to CSS
|
||||
%.css: %.scss
|
||||
$(SASS) $(SASSFLAGS) $< $@
|
||||
|
||||
clean:
|
||||
rm -rf $(SCSS_FILES:%.scss=%.css) $(SCSS_FILES:%.scss=%.css.map)
|
||||
|
|
@ -0,0 +1,548 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
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 ]§=---
|
||||
|
||||
*/
|
||||
:root {
|
||||
--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_overview {
|
||||
width: 100%; }
|
||||
|
||||
.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: 95.5vw 70.4vh 0 -0.48rem#fff,87.9vw 28.3vh 0 -0.3rem#fff,48.4vw 63.8vh 0 -0.16rem#fff,55.2vw 23.5vh 0 -0.28rem#fff,43.2vw 62.6vh 0 -0.32rem#fff,5vw 16.6vh 0 -0.42rem#fff,34.4vw 88.5vh 0 -0.08rem#fff,63.3vw 27.4vh 0 -0.26rem#fff,58.1vw 21.3vh 0 -0.21rem#fff,58.2vw 56.7vh 0 -0.29rem#fff,81.1vw 47.1vh 0 -0.27rem#fff,89.6vw 19.1vh 0 -0.23rem#fff,76vw 67.1vh 0 -0.16rem#fff,50.8vw 26.8vh 0 -0.43rem#fff,59.1vw 73.6vh 0 -0.11rem#fff,48.2vw 55.3vh 0 -0.09rem#fff,28.1vw 65.2vh 0 -0.13rem#fff,48.3vw 77.8vh 0 -0.31rem#fff,21vw 86.9vh 0 -0.03rem#fff,8.5vw 46.7vh 0 -0.37rem#fff,65.2vw 10.1vh 0 -0.04rem#fff,16.3vw 76.3vh 0 -0.33rem#fff,36.8vw 80.3vh 0 -0.05rem#fff,64.1vw 25.3vh 0 -0.15rem#fff,69vw 4.4vh 0 -0.37rem#fff,20.6vw 59.8vh 0 -0.05rem#fff,92.5vw 58.8vh 0 -0.3rem#fff,89.3vw 76.2vh 0 -0.24rem#fff,16.4vw 77.7vh 0 -0.32rem#fff,93.4vw 49.7vh 0 -0.25rem#fff,75.7vw 50.5vh 0 -0.36rem#fff,53.8vw 45.1vh 0 -0.2rem#fff,25.2vw 42.9vh 0 -0.41rem#fff,21.7vw 63.5vh 0 -0.36rem#fff,76.8vw 29vh 0 -0.11rem#fff,27.4vw 56.2vh 0 -0.25rem#fff,10.7vw 87.3vh 0 -0.37rem#fff,71.9vw 5.2vh 0 -0.09rem#fff,64.9vw 31.5vh 0 -0.13rem#fff,24vw 21.4vh 0 -0.33rem#fff,54.9vw 18vh 0 -0.48rem#fff,4.4vw 37.8vh 0 -0.23rem#fff,58.3vw 93.1vh 0 -0.41rem#fff,56.1vw 58.2vh 0 -0.42rem#fff,17.1vw 17.4vh 0 -0.3rem#fff,69.6vw 50.9vh 0 -0.04rem#fff,81.1vw 8.8vh 0 -0.12rem#fff,69.9vw 6.2vh 0 -0.31rem#fff,86vw 17.9vh 0 -0.16rem#fff,27.7vw 14.1vh 0 -0.37rem#fff,46.9vw 10.9vh 0 -0.07rem#fff,58.3vw 93.4vh 0 -0.14rem#fff,98.9vw 1.1vh 0 -0.17rem#fff,82.5vw 36.2vh 0 -0.41rem#fff,28vw 0.5vh 0 -0.06rem#fff,0.4vw 21.8vh 0 -0.5rem#fff,70.4vw 47.8vh 0 -0.31rem#fff,16vw 42.2vh 0 -0.11rem#fff,42.1vw 14.1vh 0 -0.23rem#fff,49.3vw 67.7vh 0 -0.43rem#fff,46.2vw 69vh 0 -0.13rem#fff,23.2vw 88vh 0 -0.45rem#fff,93.2vw 88.3vh 0 -0.5rem#fff,17.3vw 22vh 0 -0.14rem#fff,57.6vw 6.5vh 0 -0.44rem#fff,26.5vw 88.2vh 0 -0.14rem#fff,85.4vw 14.8vh 0 -0.32rem#fff,33.1vw 44.2vh 0 -0.15rem#fff,1.3vw 6.4vh 0 -0.12rem#fff,1.8vw 58.5vh 0 -0.21rem#fff,85.5vw 74.1vh 0 -0.43rem#fff,82.9vw 4.4vh 0 -0.35rem#fff,94.6vw 55.2vh 0 -0.1rem#fff,7.1vw 5.1vh 0 -0.29rem#fff,47.1vw 95.8vh 0 -0.13rem#fff,69.3vw 35.3vh 0 -0.1rem#fff,8.3vw 83vh 0 -0.02rem#fff,90.8vw 47vh 0 -0.21rem#fff,85.2vw 35.3vh 0 -0.06rem#fff,80.1vw 13.6vh 0 -0.07rem#fff,52vw 37vh 0 -0.11rem#fff,75.7vw 26.3vh 0 -0.16rem#fff,51.3vw 7.7vh 0 -0.46rem#fff,35.2vw 18.6vh 0 -0.09rem#fff,69.4vw 21.3vh 0 -0.05rem#fff,16.1vw 66.8vh 0 -0.14rem#fff,80.3vw 4vh 0 -0.25rem#fff,31.1vw 78.7vh 0 -0.08rem#fff,26.9vw 45.3vh 0 -0.01rem#fff,38.3vw 11.4vh 0 -0.47rem#fff,46.7vw 10.2vh 0 -0.44rem#fff,15.5vw 2.9vh 0 -0.35rem#fff,97.8vw 19.8vh 0 -0.24rem#fff,60.8vw 94.7vh 0 -0.12rem#fff,46.1vw 66vh 0 -0.45rem#fff,59.6vw 65vh 0 -0.33rem#fff,30.5vw 44.4vh 0 -0.18rem#fff,78.2vw 55.6vh 0 -0.07rem#fff,69.5vw 61.9vh 0 -0.11rem#fff,53.4vw 38.3vh 0 -0.11rem#fff;
|
||||
animation-duration: 18s; }
|
||||
|
||||
.layer1.a {
|
||||
animation-delay: -9s; }
|
||||
|
||||
.layer2 {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
filter: blur(3px);
|
||||
box-shadow: 89.1vw 69.4vh 0 -0.15rem#fff,19.2vw 77.1vh 0 -0.35rem#fff,52.3vw 3.8vh 0 -0.04rem#fff,69.5vw 14.1vh 0 -0.25rem#fff,75.5vw 74.6vh 0 -0.44rem#fff,13.6vw 48vh 0 -0.36rem#fff,62.5vw 17.4vh 0 -0.2rem#fff,53.5vw 44.1vh 0 -0.41rem#fff,58.2vw 63vh 0 -0.28rem#fff,64.3vw 54.3vh 0 -0.42rem#fff,38.3vw 92.4vh 0 -0.36rem#fff,89.4vw 6.5vh 0 -0.06rem#fff,92.9vw 11.4vh 0 -0.06rem#fff,8.4vw 33.7vh 0 -0.25rem#fff,84.1vw 44.5vh 0 -0.02rem#fff,58.2vw 87.2vh 0 -0.43rem#fff,64.8vw 34.8vh 0 -0.33rem#fff,46.1vw 31.1vh 0 -0.4rem#fff,11.3vw 61.1vh 0 -0.33rem#fff,50.9vw 4.5vh 0 -0.3rem#fff,43.6vw 97.2vh 0 -0.43rem#fff,24.7vw 62.9vh 0 -0.12rem#fff,5.2vw 40.3vh 0 -0.45rem#fff,48.2vw 21.6vh 0 -0.45rem#fff,28.4vw 48.3vh 0 -0.18rem#fff,35vw 16.7vh 0 -0.09rem#fff,29.5vw 65.1vh 0 -0.11rem#fff,65.7vw 59.2vh 0 -0.15rem#fff,28vw 80.1vh 0 -0.4rem#fff,20.4vw 33.1vh 0 -0.1rem#fff,11.1vw 70.2vh 0 -0.4rem#fff,37.4vw 92.5vh 0 -0.49rem#fff,38.5vw 90.5vh 0 -0.12rem#fff,97.3vw 34.4vh 0 -0.07rem#fff,14.7vw 10.4vh 0 -0.23rem#fff,98.2vw 54.5vh 0 -0.3rem#fff,23.4vw 44vh 0 -0.17rem#fff,4.8vw 21.2vh 0 -0.26rem#fff,27vw 63.3vh 0 -0.27rem#fff,93.4vw 67.2vh 0 -0.16rem#fff,86.2vw 82vh 0 -0.02rem#fff,61.4vw 50vh 0 -0.41rem#fff,43.9vw 68.4vh 0 -0.49rem#fff,46.6vw 6.3vh 0 -0.18rem#fff,69.8vw 94.2vh 0 -0.03rem#fff,17.1vw 31.7vh 0 -0.39rem#fff,88vw 76.3vh 0 -0.13rem#fff,90.8vw 27.8vh 0 -0.5rem#fff,16.5vw 86vh 0 -0.24rem#fff,48.4vw 50vh 0 -0.12rem#fff,0.2vw 9.7vh 0 -0.29rem#fff,70.6vw 13.2vh 0 -0.34rem#fff,75.4vw 46.7vh 0 -0.02rem#fff,41.9vw 63.2vh 0 -0.09rem#fff,81.2vw 32.4vh 0 -0.44rem#fff,62.1vw 38.9vh 0 -0.29rem#fff,83.8vw 8.6vh 0 -0.46rem#fff,60.4vw 96.9vh 0 -0.37rem#fff,80.7vw 83.8vh 0 -0.14rem#fff,91.1vw 35.7vh 0 -0.45rem#fff,19.8vw 9.6vh 0 -0.11rem#fff,56.3vw 28.3vh 0 -0.11rem#fff,49.7vw 27.6vh 0 -0.21rem#fff,92.2vw 61.1vh 0 -0.37rem#fff,10.7vw 18.8vh 0 -0.04rem#fff,44.4vw 77.2vh 0 -0.41rem#fff,42.3vw 53.9vh 0 -0.32rem#fff,16vw 19.5vh 0 -0.02rem#fff,40.8vw 60.8vh 0 -0.23rem#fff,6.5vw 77.1vh 0 -0.41rem#fff,78.2vw 98.6vh 0 -0.5rem#fff,70.3vw 88vh 0 -0.34rem#fff,21.4vw 45.7vh 0 -0.2rem#fff,79.3vw 27.8vh 0 -0.16rem#fff,20.5vw 91.9vh 0 -0.1rem#fff,44vw 20.7vh 0 -0.05rem#fff,20.2vw 58.5vh 0 -0.18rem#fff,0.4vw 57.7vh 0 -0.44rem#fff,29.8vw 96.4vh 0 -0.41rem#fff,66vw 94.4vh 0 -0.01rem#fff,25.4vw 74.6vh 0 -0.37rem#fff,89.7vw 38.4vh 0 -0.04rem#fff,32vw 64vh 0 -0.4rem#fff,79.9vw 73.7vh 0 -0.45rem#fff,92.8vw 72.3vh 0 -0.46rem#fff,50.5vw 54.5vh 0 -0.47rem#fff,77.8vw 38.2vh 0 -0.29rem#fff,73.9vw 61.4vh 0 -0.17rem#fff,88.1vw 91.1vh 0 -0.37rem#fff,20.4vw 32.5vh 0 -0.39rem#fff,68.5vw 97.8vh 0 -0.42rem#fff,62.7vw 53.2vh 0 -0.11rem#fff,65.4vw 70.8vh 0 -0.14rem#fff,31.3vw 5.3vh 0 -0.12rem#fff,39.2vw 78vh 0 -0.48rem#fff,50vw 44.2vh 0 -0.01rem#fff,16.9vw 20.6vh 0 -0.05rem#fff,61.3vw 5.1vh 0 -0.48rem#fff,18.6vw 65.8vh 0 -0.35rem#fff,88.4vw 67.2vh 0 -0.5rem#fff;
|
||||
animation-duration: 24s; }
|
||||
|
||||
.layer2.a {
|
||||
animation-delay: -12s; }
|
||||
|
||||
.layer3 {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
filter: blur(6px);
|
||||
box-shadow: 12.2vw 53.5vh 0 -0.46rem#fff,38.8vw 53vh 0 -0.18rem#fff,48vw 42vh 0 -0.4rem#fff,89.7vw 31vh 0 -0.36rem#fff,67vw 60.1vh 0 -0.3rem#fff,69vw 14.5vh 0 -0.49rem#fff,6.7vw 91.1vh 0 -0.18rem#fff,13.2vw 34.7vh 0 -0.48rem#fff,70.4vw 67.8vh 0 -0.36rem#fff,85.1vw 82.5vh 0 -0.05rem#fff,16.8vw 7.6vh 0 -0.19rem#fff,6.2vw 34.2vh 0 -0.16rem#fff,8.9vw 68.8vh 0 -0.32rem#fff,58.5vw 28.3vh 0 -0.3rem#fff,41.7vw 74.1vh 0 -0.34rem#fff,10.3vw 79.8vh 0 -0.26rem#fff,8.3vw 24.6vh 0 -0.05rem#fff,33.1vw 85.4vh 0 -0.41rem#fff,20.3vw 16.9vh 0 -0.02rem#fff,21.1vw 50.7vh 0 -0.36rem#fff,14.9vw 17vh 0 -0.05rem#fff,45.8vw 17vh 0 -0.21rem#fff,25.6vw 0.8vh 0 -0.31rem#fff,35.4vw 53.4vh 0 -0.22rem#fff,19.2vw 79.1vh 0 -0.35rem#fff,74.5vw 60.8vh 0 -0.25rem#fff,88.9vw 89.9vh 0 -0.48rem#fff,48.7vw 7.2vh 0 -0.13rem#fff,88.1vw 84.1vh 0 -0.12rem#fff,63.2vw 82.3vh 0 -0.06rem#fff,99.9vw 46.2vh 0 -0.47rem#fff,92vw 59.8vh 0 -0.12rem#fff,1.6vw 8.8vh 0 -0.23rem#fff,79.8vw 2vh 0 -0.5rem#fff,58.2vw 22.4vh 0 -0.34rem#fff,47.6vw 7.3vh 0 -0.06rem#fff,28.1vw 71vh 0 -0.18rem#fff,14.2vw 77.1vh 0 -0.43rem#fff,95.5vw 68.6vh 0 -0.43rem#fff,6.7vw 8.1vh 0 -0.1rem#fff,60.2vw 36.7vh 0 -0.31rem#fff,25.8vw 27vh 0 -0.42rem#fff,1vw 60vh 0 -0.42rem#fff,64.2vw 19.1vh 0 -0.23rem#fff,80.9vw 88.8vh 0 -0.03rem#fff,3.6vw 60.1vh 0 -0.08rem#fff,30.1vw 10.9vh 0 -0.44rem#fff,38.5vw 26.3vh 0 -0.45rem#fff,44.3vw 38.8vh 0 -0.1rem#fff,16.2vw 45.5vh 0 -0.14rem#fff,90.6vw 6.6vh 0 -0.23rem#fff,15.8vw 52.6vh 0 -0.45rem#fff,30.2vw 2.7vh 0 -0.4rem#fff,3.8vw 40.1vh 0 -0.48rem#fff,10.7vw 82.2vh 0 -0.4rem#fff,90.5vw 73.3vh 0 -0.16rem#fff,72.9vw 48.3vh 0 -0.14rem#fff,17.7vw 25.7vh 0 -0.07rem#fff,84.6vw 82.3vh 0 -0.3rem#fff,69.9vw 71.5vh 0 -0.05rem#fff,34.6vw 45.9vh 0 -0.1rem#fff,81.3vw 12.5vh 0 -0.1rem#fff,58.3vw 11.4vh 0 -0.48rem#fff,17.7vw 7vh 0 -0.18rem#fff,67.5vw 27.8vh 0 -0.4rem#fff,92.1vw 63.6vh 0 -0.42rem#fff,92vw 97.7vh 0 -0.3rem#fff,7.3vw 28.6vh 0 -0.22rem#fff,93.4vw 39.8vh 0 -0.04rem#fff,27.4vw 56.7vh 0 -0.08rem#fff,2.5vw 39.9vh 0 -0.47rem#fff,61.1vw 38.3vh 0 -0.29rem#fff,42.4vw 41.2vh 0 -0.14rem#fff,85.8vw 26vh 0 -0.44rem#fff,95.9vw 70vh 0 -0.19rem#fff,77.4vw 52.9vh 0 -0.15rem#fff,54.9vw 1.2vh 0 -0.4rem#fff,47.1vw 44.2vh 0 -0.2rem#fff,60vw 66.7vh 0 -0.41rem#fff,88.2vw 72vh 0 -0.05rem#fff,77.2vw 74.3vh 0 -0.31rem#fff,77.7vw 63.2vh 0 -0.1rem#fff,15.9vw 61.7vh 0 -0.19rem#fff,13.9vw 23.5vh 0 -0.4rem#fff,81.2vw 18.9vh 0 -0.17rem#fff,20.1vw 44.6vh 0 -0.47rem#fff,59vw 4vh 0 -0.44rem#fff,6vw 40vh 0 -0.34rem#fff,12.2vw 77vh 0 -0.26rem#fff,9.5vw 20.3vh 0 -0.01rem#fff,52.6vw 58.7vh 0 -0.17rem#fff,89.5vw 32.6vh 0 -0.03rem#fff,0.2vw 83.9vh 0 -0.3rem#fff,42.3vw 73.3vh 0 -0.03rem#fff,0.5vw 15.7vh 0 -0.17rem#fff,58.1vw 98.2vh 0 -0.01rem#fff,95.7vw 4.3vh 0 -0.01rem#fff,82.7vw 57.7vh 0 -0.18rem#fff,99.6vw 2.6vh 0 -0.12rem#fff,44.5vw 68.3vh 0 -0.02rem#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=christmas_heavy.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -9,10 +9,7 @@ Enige discretie is aangeraden.
|
|||
|
||||
*/
|
||||
|
||||
|
||||
/*high performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
|
|
@ -0,0 +1,451 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
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 ]§=---
|
||||
|
||||
*/
|
||||
:root {
|
||||
--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_overview {
|
||||
width: 100%; }
|
||||
|
||||
.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=christmas_lightweight.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -9,10 +9,7 @@ Enige discretie is aangeraden.
|
|||
|
||||
*/
|
||||
|
||||
|
||||
/*low performance kerstmis*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F28705;
|
||||
--dGray1:white;
|
||||
--dGray2:#590212;
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
/*halloween*/
|
||||
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#FFEB65;
|
||||
--dGray1:#F28705;
|
||||
--dGray2:#F25C05;
|
||||
|
|
@ -11,6 +8,7 @@
|
|||
--dGray6:#260101;
|
||||
--dBlue:#D91604;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover{
|
||||
background-image: url("static/images/themes/halloween/Halloween.jpeg");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,12 +0,0 @@
|
|||
/*Darkmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
|
|
@ -1,534 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
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 ]§=---
|
||||
|
||||
*/
|
||||
/*high performance kerstmis*/
|
||||
: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_overview {
|
||||
width: 100%; }
|
||||
|
||||
.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: 71vw 89.7vh 0 -0.13rem#fff,37.6vw 73.2vh 0 -0.46rem#fff,31.1vw 76.6vh 0 -0.42rem#fff,41.5vw 94vh 0 -0.3rem#fff,76.7vw 28.6vh 0 -0.18rem#fff,21.7vw 70.7vh 0 -0.34rem#fff,14.6vw 72.9vh 0 -0.04rem#fff,72vw 50vh 0 -0.12rem#fff,89.6vw 90.4vh 0 -0.45rem#fff,49.7vw 21.5vh 0 -0.02rem#fff,15.8vw 87.2vh 0 -0.04rem#fff,46.3vw 85.9vh 0 -0.24rem#fff,91.6vw 7.4vh 0 -0.11rem#fff,83.3vw 60.5vh 0 -0.06rem#fff,15.2vw 3.2vh 0 -0.31rem#fff,52.9vw 54.1vh 0 -0.48rem#fff,58.9vw 42.1vh 0 -0.07rem#fff,40.7vw 10.5vh 0 -0.25rem#fff,53.7vw 74.5vh 0 -0.33rem#fff,89vw 50.9vh 0 -0.2rem#fff,35vw 22.6vh 0 -0.2rem#fff,18.9vw 66.4vh 0 -0.33rem#fff,66.8vw 22.9vh 0 -0.05rem#fff,34.3vw 46.9vh 0 -0.26rem#fff,72.9vw 33.1vh 0 -0.25rem#fff,23.2vw 2.5vh 0 -0.16rem#fff,60.3vw 21.6vh 0 -0.35rem#fff,14.3vw 0.6vh 0 -0.09rem#fff,95.6vw 72.2vh 0 -0.03rem#fff,4vw 28.6vh 0 -0.17rem#fff,40.8vw 67.7vh 0 -0.16rem#fff,85vw 88.1vh 0 -0.41rem#fff,37.4vw 50.1vh 0 -0.07rem#fff,50.8vw 39.8vh 0 -0.01rem#fff,14.4vw 95.1vh 0 -0.23rem#fff,77.7vw 10.2vh 0 -0.14rem#fff,35.1vw 59vh 0 -0.03rem#fff,45.8vw 42.4vh 0 -0.37rem#fff,48.3vw 51.3vh 0 -0.45rem#fff,98.3vw 5.8vh 0 -0.26rem#fff,2.4vw 88vh 0 -0.17rem#fff,16vw 49.1vh 0 -0.39rem#fff,76.6vw 42.6vh 0 -0.25rem#fff,17.2vw 44.5vh 0 -0.1rem#fff,51.2vw 73.7vh 0 -0.33rem#fff,31.7vw 59.2vh 0 -0.47rem#fff,32.4vw 68.9vh 0 -0.07rem#fff,3.7vw 94.8vh 0 -0.33rem#fff,55.3vw 3.8vh 0 -0.24rem#fff,25.3vw 81.2vh 0 -0.21rem#fff,68.2vw 97.6vh 0 -0.27rem#fff,43.4vw 56.5vh 0 -0.06rem#fff,40.6vw 98.7vh 0 -0.49rem#fff,41.2vw 37.2vh 0 -0.22rem#fff,66.7vw 21.2vh 0 -0.32rem#fff,3.6vw 75.9vh 0 -0.04rem#fff,66.2vw 71.2vh 0 -0.33rem#fff,30.6vw 59.9vh 0 -0.02rem#fff,22.6vw 72.1vh 0 -0.02rem#fff,93.9vw 9.7vh 0 -0.19rem#fff,99.1vw 73.3vh 0 -0.07rem#fff,48.4vw 94.2vh 0 -0.33rem#fff,44.1vw 55.1vh 0 -0.35rem#fff,98.3vw 34vh 0 -0.07rem#fff,85.1vw 30.4vh 0 -0.42rem#fff,65.2vw 21.4vh 0 -0.05rem#fff,72.1vw 92.9vh 0 -0.48rem#fff,25.8vw 53.6vh 0 -0.02rem#fff,13.8vw 12.7vh 0 -0.26rem#fff,79.4vw 94.9vh 0 -0.06rem#fff,41.8vw 56.2vh 0 -0.31rem#fff,67.4vw 20.2vh 0 -0.34rem#fff,35.6vw 88.7vh 0 -0.1rem#fff,12.5vw 20.1vh 0 -0.06rem#fff,30.3vw 32.7vh 0 -0.34rem#fff,51.4vw 84.2vh 0 -0.15rem#fff,16.2vw 80.1vh 0 -0.31rem#fff,6.1vw 14.1vh 0 -0.41rem#fff,86.6vw 55.9vh 0 -0.41rem#fff,43.5vw 75.9vh 0 -0.45rem#fff,77.5vw 20.4vh 0 -0.12rem#fff,67.7vw 97.6vh 0 -0.08rem#fff,0.8vw 18.1vh 0 -0.33rem#fff,60.6vw 21.3vh 0 -0.19rem#fff,70.2vw 79.3vh 0 -0.26rem#fff,50.8vw 68.8vh 0 -0.35rem#fff,53.9vw 12.5vh 0 -0.39rem#fff,76.4vw 45.9vh 0 -0.12rem#fff,11.5vw 58.7vh 0 -0.31rem#fff,76.3vw 74.7vh 0 -0.4rem#fff,4.7vw 46.7vh 0 -0.39rem#fff,54.5vw 63.6vh 0 -0.28rem#fff,51.6vw 65.9vh 0 -0.3rem#fff,65.9vw 47.6vh 0 -0.08rem#fff,91.6vw 58.8vh 0 -0.12rem#fff,26.9vw 71.6vh 0 -0.36rem#fff,59.7vw 71.2vh 0 -0.37rem#fff,47.1vw 16.2vh 0 -0.14rem#fff,72.4vw 45.7vh 0 -0.06rem#fff,30.8vw 39.3vh 0 -0.38rem#fff;
|
||||
animation-duration: 18s; }
|
||||
|
||||
.layer1.a {
|
||||
animation-delay: -9s; }
|
||||
|
||||
.layer2 {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
filter: blur(3px);
|
||||
box-shadow: 71.8vw 15.9vh 0 -0.3rem#fff,4.2vw 8.1vh 0 -0.41rem#fff,67.5vw 49.2vh 0 -0.28rem#fff,72vw 97.8vh 0 -0.22rem#fff,78.1vw 28vh 0 -0.41rem#fff,34.2vw 51.7vh 0 -0.47rem#fff,37.9vw 76.5vh 0 -0.39rem#fff,92.6vw 36.3vh 0 -0.22rem#fff,59.9vw 8.6vh 0 -0.07rem#fff,32.5vw 74vh 0 -0.07rem#fff,75.7vw 81.6vh 0 -0.12rem#fff,1.7vw 18.5vh 0 -0.2rem#fff,12.3vw 64.7vh 0 -0.37rem#fff,83.9vw 47vh 0 -0.12rem#fff,33.8vw 21.3vh 0 -0.14rem#fff,6.5vw 92.5vh 0 -0.29rem#fff,72.2vw 60.8vh 0 -0.17rem#fff,38.4vw 16vh 0 -0.17rem#fff,23.9vw 58.4vh 0 -0.32rem#fff,40.2vw 52.4vh 0 -0.23rem#fff,48.9vw 74.6vh 0 -0.03rem#fff,61.5vw 36.1vh 0 -0.49rem#fff,60.9vw 94.5vh 0 -0.42rem#fff,2.8vw 59.7vh 0 -0.27rem#fff,62.6vw 32.4vh 0 -0.45rem#fff,91.3vw 18vh 0 -0.09rem#fff,35.9vw 35.5vh 0 -0.11rem#fff,60.2vw 95.5vh 0 -0.21rem#fff,19.8vw 46.5vh 0 -0.09rem#fff,57.7vw 20.7vh 0 -0.03rem#fff,69.8vw 33.8vh 0 -0.34rem#fff,69.1vw 71.5vh 0 -0.45rem#fff,70.5vw 87.9vh 0 -0.5rem#fff,77vw 34.9vh 0 -0.43rem#fff,35.6vw 28.7vh 0 -0.14rem#fff,28.6vw 22.7vh 0 -0.47rem#fff,46.3vw 7.1vh 0 -0.06rem#fff,66.6vw 92.6vh 0 -0.32rem#fff,96.5vw 19.1vh 0 -0.12rem#fff,24.6vw 45.5vh 0 -0.27rem#fff,71.6vw 85.8vh 0 -0.16rem#fff,1.1vw 44.9vh 0 -0.36rem#fff,94.4vw 84.2vh 0 -0.19rem#fff,92.2vw 20.2vh 0 -0.27rem#fff,42.5vw 66.1vh 0 -0.46rem#fff,70.8vw 98.4vh 0 -0.01rem#fff,71.7vw 99vh 0 -0.19rem#fff,0.2vw 34.1vh 0 -0.22rem#fff,87.3vw 30.7vh 0 -0.09rem#fff,80.3vw 93.8vh 0 -0.41rem#fff,72.2vw 8.3vh 0 -0.09rem#fff,27.1vw 46.1vh 0 -0.15rem#fff,10.2vw 93.6vh 0 -0.42rem#fff,76vw 51.5vh 0 -0.26rem#fff,28.7vw 76.3vh 0 -0.11rem#fff,85.1vw 21.2vh 0 -0.46rem#fff,25.9vw 82.2vh 0 -0.34rem#fff,32.3vw 69.8vh 0 -0.29rem#fff,97.3vw 56.8vh 0 -0.26rem#fff,48.2vw 29.6vh 0 -0.28rem#fff,76.2vw 61.9vh 0 -0.1rem#fff,62vw 96vh 0 -0.01rem#fff,76vw 79.9vh 0 -0.36rem#fff,59.9vw 86.8vh 0 -0.22rem#fff,72.8vw 92.3vh 0 -0.02rem#fff,62.7vw 55.9vh 0 -0.46rem#fff,81.1vw 53.3vh 0 -0.09rem#fff,42.4vw 20.2vh 0 -0.15rem#fff,72.7vw 95.8vh 0 -0.26rem#fff,67.6vw 11vh 0 -0.08rem#fff,62.5vw 99vh 0 -0.17rem#fff,52.7vw 46.1vh 0 -0.35rem#fff,49.7vw 73vh 0 -0.33rem#fff,1.9vw 25.1vh 0 -0.06rem#fff,25.6vw 11.6vh 0 -0.43rem#fff,9.7vw 28.4vh 0 -0.11rem#fff,52.1vw 87.4vh 0 -0.45rem#fff,94.6vw 3.6vh 0 -0.37rem#fff,67.5vw 67vh 0 -0.29rem#fff,45.4vw 34.9vh 0 -0.02rem#fff,41.6vw 99.6vh 0 -0.34rem#fff,26.3vw 53vh 0 -0.01rem#fff,41.2vw 73.7vh 0 -0.36rem#fff,6.9vw 29.5vh 0 -0.17rem#fff,25.1vw 39.2vh 0 -0.2rem#fff,93.2vw 58.2vh 0 -0.3rem#fff,93.2vw 58.2vh 0 -0.31rem#fff,91.7vw 29vh 0 -0.01rem#fff,90.1vw 25.4vh 0 -0.23rem#fff,12.2vw 98.7vh 0 -0.33rem#fff,88vw 73.3vh 0 -0.29rem#fff,91.5vw 61vh 0 -0.43rem#fff,96.1vw 70.8vh 0 -0.21rem#fff,98.2vw 55.4vh 0 -0.27rem#fff,15.2vw 59vh 0 -0.34rem#fff,66.3vw 83.5vh 0 -0.05rem#fff,49vw 8.5vh 0 -0.47rem#fff,93.3vw 91.7vh 0 -0.17rem#fff,15.4vw 35.4vh 0 -0.47rem#fff,14.3vw 48.5vh 0 -0.44rem#fff;
|
||||
animation-duration: 24s; }
|
||||
|
||||
.layer2.a {
|
||||
animation-delay: -12s; }
|
||||
|
||||
.layer3 {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
filter: blur(6px);
|
||||
box-shadow: 23.4vw 84.5vh 0 -0.38rem#fff,47.1vw 27.7vh 0 -0.23rem#fff,57.9vw 71.8vh 0 -0.09rem#fff,99vw 88.7vh 0 -0.37rem#fff,69vw 41.3vh 0 -0.14rem#fff,44.7vw 79.1vh 0 -0.4rem#fff,53.2vw 22.3vh 0 -0.5rem#fff,37.8vw 79.6vh 0 -0.08rem#fff,46.1vw 40.6vh 0 -0.2rem#fff,9.8vw 50.6vh 0 -0.05rem#fff,45.6vw 13.3vh 0 -0.02rem#fff,23.3vw 18.3vh 0 -0.32rem#fff,38.4vw 20.4vh 0 -0.22rem#fff,37.5vw 34.1vh 0 -0.21rem#fff,31vw 96.9vh 0 -0.1rem#fff,6.8vw 99vh 0 -0.49rem#fff,19.7vw 13.4vh 0 -0.28rem#fff,24vw 16.4vh 0 -0.09rem#fff,98.6vw 17.6vh 0 -0.08rem#fff,5.2vw 26.8vh 0 -0.35rem#fff,60.5vw 57.7vh 0 -0.34rem#fff,63.4vw 34.1vh 0 -0.46rem#fff,62.2vw 9.9vh 0 -0.13rem#fff,31.8vw 40vh 0 -0.19rem#fff,28vw 68.9vh 0 -0.33rem#fff,74.5vw 21.3vh 0 -0.32rem#fff,30.8vw 29.5vh 0 -0.25rem#fff,80.3vw 28vh 0 -0.12rem#fff,88.7vw 47.8vh 0 -0.33rem#fff,7.9vw 70.8vh 0 -0.46rem#fff,26.6vw 49.2vh 0 -0.04rem#fff,98.4vw 42.8vh 0 -0.09rem#fff,62.5vw 64.5vh 0 -0.48rem#fff,60.7vw 92.5vh 0 -0.13rem#fff,2.8vw 99.2vh 0 -0.49rem#fff,81.4vw 21.3vh 0 -0.4rem#fff,83.4vw 47.1vh 0 -0.46rem#fff,79.2vw 2.6vh 0 -0.17rem#fff,17.7vw 3.1vh 0 -0.12rem#fff,66.4vw 98.4vh 0 -0.34rem#fff,59.5vw 51.1vh 0 -0.2rem#fff,5.8vw 28.2vh 0 -0.41rem#fff,9.7vw 54vh 0 -0.48rem#fff,24.1vw 98.3vh 0 -0.29rem#fff,9.7vw 73.1vh 0 -0.44rem#fff,10vw 53.7vh 0 -0.5rem#fff,37.7vw 16.1vh 0 -0.31rem#fff,43.9vw 51.8vh 0 -0.29rem#fff,70.8vw 54vh 0 -0.19rem#fff,61.5vw 91vh 0 -0.41rem#fff,87.1vw 13.1vh 0 -0.22rem#fff,89.6vw 34.1vh 0 -0.25rem#fff,52.8vw 38.1vh 0 -0.33rem#fff,88.4vw 79.4vh 0 -0.22rem#fff,84.4vw 84.6vh 0 -0.1rem#fff,69.4vw 8.7vh 0 -0.46rem#fff,8.8vw 73.7vh 0 -0.19rem#fff,89.3vw 14.7vh 0 -0.1rem#fff,100vw 72.7vh 0 -0.2rem#fff,16.9vw 93.8vh 0 -0.22rem#fff,90.7vw 36.1vh 0 -0.43rem#fff,46.6vw 49.6vh 0 -0.21rem#fff,57.3vw 72.3vh 0 -0.03rem#fff,49.7vw 2vh 0 -0.15rem#fff,67vw 96.2vh 0 -0.47rem#fff,86vw 71.7vh 0 -0.11rem#fff,66vw 65.8vh 0 -0.32rem#fff,85.2vw 7.6vh 0 -0.12rem#fff,95.9vw 49.4vh 0 -0.15rem#fff,33.2vw 66.6vh 0 -0.14rem#fff,75.4vw 26.3vh 0 -0.02rem#fff,52.7vw 56vh 0 -0.11rem#fff,37.7vw 77vh 0 -0.18rem#fff,26.3vw 59.9vh 0 -0.18rem#fff,88.2vw 74.6vh 0 -0.39rem#fff,89.5vw 61.2vh 0 -0.48rem#fff,62vw 79.5vh 0 -0.4rem#fff,98.7vw 3.9vh 0 -0.01rem#fff,63.3vw 32vh 0 -0.43rem#fff,49.6vw 28.5vh 0 -0.09rem#fff,70vw 87vh 0 -0.05rem#fff,38.3vw 67.3vh 0 -0.49rem#fff,41.8vw 82.5vh 0 -0.36rem#fff,85.8vw 74vh 0 -0.07rem#fff,82.3vw 48.8vh 0 -0.11rem#fff,35.2vw 79.8vh 0 -0.4rem#fff,73.3vw 72.4vh 0 -0.36rem#fff,62.4vw 30.5vh 0 -0.14rem#fff,48.5vw 51.9vh 0 -0.03rem#fff,74.6vw 51.1vh 0 -0.35rem#fff,62.6vw 12.8vh 0 -0.33rem#fff,10vw 72.1vh 0 -0.2rem#fff,59vw 50.5vh 0 -0.04rem#fff,79.1vw 60.1vh 0 -0.34rem#fff,77.5vw 45.1vh 0 -0.23rem#fff,53vw 77.3vh 0 -0.4rem#fff,46.8vw 52.1vh 0 -0.44rem#fff,60.7vw 81vh 0 -0.17rem#fff,86.2vw 53.9vh 0 -0.01rem#fff,85.8vw 79.2vh 0 -0.39rem#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
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,4 +0,0 @@
|
|||
.background {
|
||||
background-image: url("https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/*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");
|
||||
}
|
||||
|
|
@ -1,442 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
¡¡¡ OPGELET !!!
|
||||
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 ]§=---
|
||||
|
||||
*/
|
||||
/*low performance kerstmis*/
|
||||
: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_overview {
|
||||
width: 100%; }
|
||||
|
||||
.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
|
|
@ -1,12 +0,0 @@
|
|||
/*lightmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#444444;
|
||||
--dGray1:#666666;
|
||||
--dGray2:#212121;
|
||||
--dGray3:#ffffff;
|
||||
--dGray4:#f9f9f9;
|
||||
--dGray5:#ffffff;
|
||||
--dGray6:#ffffff;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/*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");
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
/*Darkmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
/*lightmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#444444;
|
||||
--dGray1:#666666;
|
||||
--dGray2:#212121;
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
/*sinterklaas*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F2EB80;
|
||||
--dGray1:#F2EF05;
|
||||
--dGray2:#F2EF05;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
function changeTheme() {
|
||||
// Get the selected theme for the dropdown
|
||||
var themes_select = document.getElementById("themes_select");
|
||||
var selected_theme = themes_select.options[themes_select.selectedIndex].text;
|
||||
|
||||
// Update the theme cookie
|
||||
document.cookie = "theme=" + escape(selected_theme) + "; Path=/;"
|
||||
|
||||
// Finally reload the page to let the new theme take effect
|
||||
location.reload();
|
||||
}
|
||||
|
|
@ -1,34 +1,82 @@
|
|||
{
|
||||
const init = () =>{
|
||||
document.cookie.split('; ').forEach(itCookie = cookie =>{ // TODO (Arnhoudt) Fix shitty way of doing things
|
||||
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){
|
||||
document.querySelector(".toggleDarkmode").innerHTML = "<a>Enter lightmode</a>"
|
||||
document.querySelector(".toggleDarkmode").id = "lightmode";
|
||||
}
|
||||
const COOKIE_THEME = "theme";
|
||||
const COOKIE_ATMOSPHERE = "theme_atmosphere";
|
||||
const COOKIE_PERFORMANCE = "theme_performance";
|
||||
|
||||
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "customTheme"){
|
||||
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 YEAR = 60 * 60 * 24 * 365;
|
||||
|
||||
const handleClickChangePerformance = e => {
|
||||
document.cookie = "performance = "+e.currentTarget.id+";path=/";
|
||||
const storeCookieAndReload = (name, value) => {
|
||||
document.cookie = name + " = " + value + "; Path=/; Max-Age=" + (50 * YEAR);
|
||||
location.reload();
|
||||
}
|
||||
|
||||
const handleClickChangeTheme = e =>{
|
||||
document.cookie = "theme = "+e.currentTarget.id+";path=/";
|
||||
location.reload();
|
||||
const radio = (name, options, current) => {
|
||||
let container = document.createElement("div");
|
||||
|
||||
for (let option in options) {
|
||||
if (!options.hasOwnProperty(option)) continue;
|
||||
|
||||
let input = document.createElement("input");
|
||||
input.type = "radio";
|
||||
input.name = name;
|
||||
input.value = option;
|
||||
input.id = `${name}-${option}`;
|
||||
if (option === current) input.setAttribute("checked", "checked");
|
||||
input.addEventListener("change", e => storeCookieAndReload(name, e.currentTarget.value));
|
||||
|
||||
let label = document.createElement("label");
|
||||
label.setAttribute("for", `${name}-${option}`);
|
||||
label.innerText = options[option];
|
||||
|
||||
let span = document.createElement("span");
|
||||
span.append(input, " ", label, " ");
|
||||
container.appendChild(span);
|
||||
}
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
let cookies = {};
|
||||
document.cookie.split('; ')
|
||||
.map(cookieDefStr => cookieDefStr.split("=", 2))
|
||||
.forEach(cookiePair => { cookies[cookiePair[0]] = cookiePair[1]; });
|
||||
|
||||
if (window.currentTheme === "plain") {
|
||||
let a = document.createElement("a");
|
||||
a.href = "javascript:void(0)";
|
||||
|
||||
if (cookies[COOKIE_ATMOSPHERE] == "darkmode") {
|
||||
a.innerHTML = "Enter light mode"
|
||||
a.addEventListener("click", () => storeCookieAndReload(COOKIE_ATMOSPHERE, "lightmode"));
|
||||
} else {
|
||||
a.innerHTML = "Enter dark mode"
|
||||
a.addEventListener("click", () => storeCookieAndReload(COOKIE_ATMOSPHERE, "darkmode"));
|
||||
}
|
||||
|
||||
document.getElementById("themeChange").innerHTML = "";
|
||||
document.getElementById("themeChange").appendChild(a);
|
||||
}
|
||||
|
||||
|
||||
if (window.currentTheme === "christmas") {
|
||||
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 (document.querySelector(".changePerformance") && window.currentThemeOptions.includes("performance")) {
|
||||
document.querySelector(".changePerformance").appendChild(
|
||||
radio(COOKIE_PERFORMANCE, {heavy: "Heavy", lightweight: "Lightweight"}, cookies[COOKIE_PERFORMANCE])
|
||||
);
|
||||
}
|
||||
|
||||
if (document.getElementById("themes_select")) {
|
||||
let themes_select = document.getElementById("themes_select");
|
||||
themes_select.value = cookies["theme"] || "";
|
||||
|
||||
themes_select.addEventListener("change", () => storeCookieAndReload(COOKIE_THEME, themes_select.value));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
init();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ Haldis - {{ active_page|capitalize }}
|
|||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
|
||||
<link rel="stylesheet" href="/css" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('general_bp.theme_css') }}" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="{{ url_for('general_bp.current_theme_js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/customThemes.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block navbar %}
|
||||
|
|
@ -80,7 +80,7 @@ Haldis - {{ active_page|capitalize }}
|
|||
<div class="container">
|
||||
<div class="footerWrapper">
|
||||
<div class="pull-left">Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a></div>
|
||||
<div class="changeThemeButton toggleDarkmode" id="darkmode"><a>Enter darkmode</a></div>
|
||||
<div class="changeThemeButton" id="themeChange"><!-- Populated with JS --></div>
|
||||
<div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,14 @@
|
|||
{% block container %}
|
||||
<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>
|
||||
<p>
|
||||
<!-- Style attribute due to missing css -->
|
||||
<select name="themes" id="themes_select" onchange="changeTheme()" style="width: 300px;">
|
||||
<option disabled selected value> -- select a theme -- </option>
|
||||
<select name="theme" id="themes_select" style="width: 300px;">
|
||||
<option value="">[Season's default]</option>
|
||||
{% for theme in themes_list %}
|
||||
<option value="{{ theme.optid }}">{{ theme }}</option>
|
||||
<option value="{{ theme.file }}">{{ theme.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p><a class="changePerformance" id="heavy"></a></p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ from flask import jsonify
|
|||
general_bp = Blueprint("general_bp", __name__)
|
||||
|
||||
|
||||
with open(os.path.join(os.path.dirname(__file__), "themes.yml"), "r") as _stream:
|
||||
_theme_data = yaml.safe_load(_stream)
|
||||
THEME_OPTIONS = _theme_data["options"]
|
||||
THEMES = _theme_data["themes"]
|
||||
|
||||
|
||||
@general_bp.route("/")
|
||||
def home() -> str:
|
||||
"Generate the home view"
|
||||
|
|
@ -38,79 +44,94 @@ def home() -> str:
|
|||
)
|
||||
|
||||
|
||||
def get_css_dict(css_path):
|
||||
"Generate the dictionary with all the currently available themes and their names"
|
||||
themes_dict = dict()
|
||||
def is_theme_active(theme, now):
|
||||
theme_type = theme["type"]
|
||||
|
||||
# Open the YAML file with all the themes.
|
||||
path = os.path.join(app.root_path, "views/themes.yml")
|
||||
with open(path, "r") as stream:
|
||||
data = yaml.safe_load(stream)
|
||||
# Build a dictionary from the YAML file with all the themes and their attributes.
|
||||
themes = {}
|
||||
for item in data:
|
||||
key = list(item.keys())[0]
|
||||
themes[key] = item[key]
|
||||
if theme_type == "static":
|
||||
return True
|
||||
|
||||
# Get the current date.
|
||||
current_date = datetime.now()
|
||||
current_year = current_date.year
|
||||
if theme_type == "seasonal":
|
||||
start_day, start_month = map(int, theme["start"].split("/"))
|
||||
start_datetime = datetime(year=now.year, day=start_day, month=start_month)
|
||||
|
||||
# Check each theme in the dictionary and return the first one that is "correct"
|
||||
for key, theme in themes.items():
|
||||
if theme["type"] == "static-date":
|
||||
start_day, start_month = theme["start"].split("/")
|
||||
start_date = datetime(year=current_year, day=int(start_day), month=int(start_month))
|
||||
end_day, end_month = map(int, theme["end"].split("/"))
|
||||
end_year = now.year + (1 if start_month > end_month else 0)
|
||||
end_datetime = datetime(year=end_year, day=end_day, month=end_month)
|
||||
|
||||
end_day, end_month = theme["end"].split("/")
|
||||
if int(start_month) > int(end_month):
|
||||
current_year += 1
|
||||
end_date = datetime(year=current_year, day=int(end_day), month=int(end_month))
|
||||
return start_datetime <= now <= end_datetime
|
||||
|
||||
if start_date <= current_date <= end_date:
|
||||
path = os.path.join(app.root_path, css_path, theme["file"])
|
||||
themes_dict[key] = path
|
||||
themes_dict["darkmode"] = os.path.join(
|
||||
app.root_path, "static/css/themes/lowPerformance/darkmode.css"
|
||||
)
|
||||
themes_dict["lightmode"] = os.path.join(
|
||||
app.root_path, "static/css/themes/lowPerformance/lightmode.css"
|
||||
)
|
||||
|
||||
return themes_dict
|
||||
raise Exception("Unknown theme type {}".format(theme_type))
|
||||
|
||||
|
||||
def css_list():
|
||||
"Generate the list of names of all the currently available themes"
|
||||
if request.cookies.get("performance", "") == "highPerformance":
|
||||
css_path = "static/css/themes/highPerformance/"
|
||||
else:
|
||||
css_path = "static/css/themes/lowPerformance/"
|
||||
return list(get_css_dict(css_path).keys())
|
||||
def get_theme_css(theme, options):
|
||||
# Build filename
|
||||
# Each option's chosen value is appended, to get something like mytheme_darkmode_heavy.css
|
||||
|
||||
filename = theme["file"]
|
||||
|
||||
for option in theme.get("options", []):
|
||||
theme_name = theme["name"]
|
||||
assert option in THEME_OPTIONS, f"Theme `{theme_name}` uses undefined option `{option}`"
|
||||
|
||||
chosen_value = options[option]
|
||||
possible_values = list(THEME_OPTIONS[option].keys())
|
||||
|
||||
value = chosen_value if chosen_value in possible_values \
|
||||
else THEME_OPTIONS[option]["_default"]
|
||||
|
||||
filename += "_" + value
|
||||
|
||||
filename += ".css"
|
||||
|
||||
theme_css_dir = "static/css/themes/"
|
||||
return os.path.join(app.root_path, theme_css_dir, filename)
|
||||
|
||||
|
||||
@general_bp.route("/css")
|
||||
def css():
|
||||
"Generate the css"
|
||||
if request.cookies.get("performance", "") == "highPerformance":
|
||||
css_path = "static/css/themes/highPerformance/"
|
||||
else:
|
||||
css_path = "static/css/themes/lowPerformance/"
|
||||
def get_active_themes():
|
||||
now = datetime.now()
|
||||
return [theme for theme in THEMES if is_theme_active(theme, now)]
|
||||
|
||||
cookie_theme = request.cookies.get("theme", "")
|
||||
|
||||
themes_dict = get_css_dict(css_path)
|
||||
@general_bp.route("/theme.css")
|
||||
def theme_css():
|
||||
"Send appropriate CSS for current theme"
|
||||
themes = get_active_themes()
|
||||
|
||||
# TODO: Fix to work with default cookie value [customTheme]
|
||||
if cookie_theme == "customTheme":
|
||||
path = f"{css_path}ligtmode.css"
|
||||
else:
|
||||
path = themes_dict[cookie_theme]
|
||||
theme_name = request.cookies.get("theme", None)
|
||||
theme = first((t for t in themes if t["file"] == theme_name), default=themes[-1])
|
||||
|
||||
f = open(path)
|
||||
response = make_response(f.read())
|
||||
options = {
|
||||
name: request.cookies.get("theme_" + name, None)
|
||||
for name in ["atmosphere", "performance"]
|
||||
}
|
||||
|
||||
path = get_theme_css(theme, options)
|
||||
|
||||
with open(path) as f:
|
||||
response = make_response(f.read())
|
||||
response.headers["Content-Type"] = "text/css"
|
||||
f.close()
|
||||
|
||||
return response
|
||||
|
||||
|
||||
@general_bp.route("/current_theme.js")
|
||||
def current_theme_js():
|
||||
themes = get_active_themes()
|
||||
|
||||
selected_theme_name = request.cookies.get("theme", None)
|
||||
matching_theme = first((t for t in themes if t["file"] == selected_theme_name))
|
||||
cur_theme = matching_theme or themes[-1]
|
||||
|
||||
response = make_response(rf'''
|
||||
var currentTheme = {json.dumps(cur_theme['file'])};
|
||||
var currentThemeOptions = {json.dumps(cur_theme['options'])};
|
||||
''')
|
||||
response.headers["Content-Type"] = "text/javascript"
|
||||
|
||||
# Theme name that is not valid at this moment: delete cookie
|
||||
if matching_theme is None:
|
||||
response.delete_cookie("theme", path="/")
|
||||
|
||||
return response
|
||||
|
||||
|
||||
|
|
@ -176,7 +197,7 @@ def about() -> str:
|
|||
@login_required
|
||||
def profile() -> str:
|
||||
"Generate the profile view"
|
||||
return render_template("profile.html", themes_list=css_list())
|
||||
return render_template("profile.html", themes_list=get_active_themes())
|
||||
|
||||
|
||||
@general_bp.route("/favicon.ico")
|
||||
|
|
|
|||
|
|
@ -1,22 +1,36 @@
|
|||
# Seasonal themes for Haldis
|
||||
- lightmode:
|
||||
file: lightmode.css
|
||||
type: default
|
||||
- darkmode:
|
||||
file: darkmode.css
|
||||
type: default
|
||||
- halloween:
|
||||
file: halloween.css
|
||||
type: static-date
|
||||
start: 21/10
|
||||
end: 10/11
|
||||
- sinterklaas:
|
||||
file: sinterklaas.css
|
||||
type: static-date
|
||||
start: 28/11
|
||||
end: 5/12
|
||||
- kerstmis:
|
||||
file: kerstmis.css
|
||||
type: static-date
|
||||
start: 6/12
|
||||
end: 06/01
|
||||
options:
|
||||
atmosphere:
|
||||
lightmode: Light mode
|
||||
darkmode: Dark mode
|
||||
_default: lightmode
|
||||
|
||||
performance:
|
||||
heavy: Heavy
|
||||
lightweight: Lightweight
|
||||
_default: heavy
|
||||
|
||||
themes:
|
||||
- name: Plain
|
||||
file: plain
|
||||
type: static
|
||||
options: [atmosphere]
|
||||
|
||||
# Seasonal themes
|
||||
- name: Halloween
|
||||
file: halloween
|
||||
type: seasonal
|
||||
start: 24/10
|
||||
end: 1/11
|
||||
|
||||
- name: Sinterklaas
|
||||
file: sinterklaas
|
||||
type: seasonal
|
||||
start: 28/11
|
||||
end: 5/12
|
||||
|
||||
- name: Christmas
|
||||
file: christmas
|
||||
type: seasonal
|
||||
start: 6/12
|
||||
end: 6/01
|
||||
options: [performance]
|
||||
|
|
|
|||
Loading…
Reference in New Issue