html
{
font-size: 62.5%;
}
:root
{
--rowHeight: 4vmin;
--trainingCol: ;
--matchCol: ;
--matchGuestCol: ;
--eventCol : ;
--bgCol: #323232;
--textCol: #ffffff;
--errCol: rgb(255,0,0);
--corrCol: rgb(0,255,0);
--shadowCol: rgba(0,0,0,0.2);
--nameFontSize: 1.5rem;
}
@media screen and (orientation: portrait) {
:root
{
--rowHeight: 4vmax;
--nameFontSize: 2rem;
}
html
{
font-size: 70%;
}
}
@font-face
{
font-family: bahnschrift;
font-display: swap;
src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
}
@font-face
{
font-family: bahnschriftLight;
font-display: swap;
src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
font-weight: 100;
}
@font-face
{
font-family: bahnschriftBold;
font-display: swap;
src: url(./fonts/bahnschrift.ttf), url(./fonts/bahnschrift.ttf);
font-weight: 600;
}
*
{
font-family: bahnschriftLight;
padding: 0;
}
body
{
background-color: var(--bgCol);
text-align: center;
}
.table
{
background-color: transparent;
width: 100%;
text-align: center;
table-layout: fixed;
}
.table tr
{
height: auto;
padding: 0;
}
.table td
{
border-radius: 0;/*calc(var(--rowHeight)*0.1);*/
height: var(--rowHeight);
overflow: hidden;
overflow-wrap: break-word;
background-color: rgb(150,150,150);
transition: 0.5s;
padding: 0;
}
.table th
{
color: black;
border-radius: calc(var(--rowHeight)*0.1);
height: calc(var(--rowHeight)*1.5);
overflow: hidden;
overflow-wrap: break-word;
/*font-size: 1.7vw;*/
font-size: 3rem;
font-family: bahnschriftBold;
background-color: rgb(100,100,100);
}
.deletedBookingType
{
-webkit-appearance:none;
border-radius: 0px;
border: none;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: rgb(100,100,100);
}
.match {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #ff0000;
}
.matchWithGuest {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #ffff00;
}
.event {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #ff00ff;
}
.double {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #00ffff;
}
.blocked {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #000000;
}
.training {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #00ff00;
}
.p5HxOaRshc {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #ff6600;
}
.Q1e3paiu6w {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #4497ca;
}
.KBP6vDTAHk {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #9e69d3;
}
.gCUJVlnOrF {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #97cc6b;
}
.U3GXjM2cZb {
-webkit-appearance:none;
border-radius: 0px;
font-size: var(--nameFontSize);
border: 0px;
font-family: bahnschriftBold;
line-height: var(--rowHeight);
height: var(--rowHeight);
width: 100%;
background-color: #ffffff;
}
.prevBtn
{
-webkit-appearance:none;
color: var(--textCol);
border-top-left-radius: calc(var(--rowHeight));
border-bottom-left-radius: calc(var(--rowHeight));
font-size: 4rem;
writing-mode: vertical-rl;
text-orientation: upright;
border: none;
height: auto;
padding-top: 3vh;
padding-bottom: 3vh;
width: 5vw;
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0, 98, 255, 0.5));
}
.prevBtn:hover
{
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0, 0, 255, 0.5));
}
.prevBtn:focus
{
outline: none;
}
.nextBtn
{
-webkit-appearance:none;
color: var(--textCol);
border-top-right-radius: calc(var(--rowHeight));
border-bottom-right-radius: calc(var(--rowHeight));
font-size: 4rem;
writing-mode: vertical-rl;
text-orientation: upright;
border: none;
height: auto;
padding-top: 3vh;
padding-bottom: 3vh;
width: 5vw;
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0, 98, 255, 0.5));
}
.nextBtn:hover
{
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0, 0, 255, 0.5));
}
.nextBtn:focus
{
outline: none;
}
.mainTable
{
margin-left: auto;
margin-right: auto;
}
.bookingButton
{
-webkit-appearance:none;
font-size: 2rem;
border: none;
height: var(--rowHeight);
width: 100%;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.bookingButton:hover
{
background-color: rgba(0,255,0,0.5);
}
.bookingForm
{
box-sizing: border-box;
display: inline-block;
border: 0px;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
}
.bookingForm.isOwnRes
{
outline-offset: -2px;
outline: 2px solid rgb(255,150,0);
}
.bookingForm.isPartnerRes
{
outline-offset: -2px;
outline: 2px solid rgb(162,0,255);
}
.past
{
color: black;
background-color: rgba(0,0,0,0.3);
height: var(--rowHeight);
line-height:var(--rowHeight);
}
.bookingContent
{
text-align: center;
margin-left: auto;
margin-right: auto;
width: 40vmax;
color: var(--textCol);
font-size: 3rem;
}
.err
{
margin-top: 5vh;
color: var(--errCol);
font-size: 5rem;
}
.errBtn
{
font-family: bahnschriftBold;
color: var(--textCol);
border-radius: 2vh;
padding: 2vmin;
border: none;
margin-top: 5vh;
background-color: var(--errCol);
font-size: 5rem;
}
.bookingInfo
{
margin-left: auto;
margin-right: auto;
width: 50vmax;
margin-top: 2vh;
margin-bottom: 2vh;
text-align: center;
font-size: 3rem;
color: var(--textCol);
table-layout: fixed;
}
.bookingInfo th
{
font-family: bahnschrift;
font-weight: 100;
}
.bookingInfo td
{
padding-bottom: 1vmin;
padding-left: 1vw;
padding-right: 1vw;
font-family: bahnschriftBold;
}
.userInfo
{
font-family: bahnschriftBold;
text-align: center;
margin-top: 3vmin;
margin-left: auto;
margin-right: auto;
font-size: 4rem; /*vmin*/
background-color: red;
max-width: 70vw;
color: var(--textCol);
}
.userInfo a
{
font-family: bahnschriftBold;
font-size: 4rem; /*vmin*/
color: var(--textCol);
padding-left: 2vw;
padding-right: 2vw;
}
.calender
{
width: 100%;
table-layout: fixed;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.calenderCell
{
background-color: rgb(200,200,255);
height: 8vh;
cursor: pointer;
}
.calenderCell:hover
{
background-color: rgb(200,255,200);
}
.calenderCell.today
{
filter: brightness(0.7) saturate(2);
}
.calenderCell.gray
{
filter: brightness(0.5);
background-color: rgb(255,255,255);
}
.calenderCell a
{
font-family: bahnschriftBold;
text-decoration: none;
color: black;
width: 100%;
height: 100%;
display: block;
line-height: calc(8vh);
/*font-size: calc(var(--rowHeight)/2);*/
font-size: 2.5rem;
}
.publicCalender
{
width: 100%;
table-layout: fixed;
border-spacing: 2vmin;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.publicCalenderCell
{
border-radius: 1vmin;
width:80%;
background-color: var(--bgCol);
color: var(--textCol);
box-shadow: 0px 0px 5px var(--shadowCol);
cursor: pointer;
transition: 0.2s;
}
.publicCalenderCell:hover
{
filter: brightness(110%);
box-shadow: 0px 0px 2vmin var(--shadowCol);
}
.publicCalenderCell[data-past="true"]
{
filter: brightness(75%);
}
.publicCalenderCell[data-today="true"]
{
filter: brightness(110%);
}
.publicCalenderCell[data-hidden="true"]
{
opacity: 0.5;
filter: brightness(75%);
}
#today
{
background-color: rgb(150,150,255);
}
#gray
{
background-color: rgb(150,150,150);
}
#orange
{
background-color: rgb(255,150,0);
}
#darkOrange
{
background-color: rgb(170,100,0);
}
#green
{
background-color: rgb(72, 176, 79);
}
#darkGreen
{
background-color: rgb(46, 110, 50);
}
#greenOrange
{
background-image: linear-gradient(to right, rgb(72, 176, 79)45%,rgb(255,150,0)55%);
}
#darkGreenDarkOrange
{
background-image: linear-gradient(to right, rgb(46, 110, 50)45%, rgb(170,100,0)55%);
}
#dayName
{
background-color: transparent;
}
.whiteText
{
font-size: 2rem; /*vmin*/
color: var(--textCol);
}
.bookingDescription
{
border-top: 1px solid var(--textCol);
padding: 1vmin;
text-align: justify;
margin-left: auto;
margin-right: auto;
font-size: 3rem; /*vmin*/
width: 40vw;
color: var(--textCol);
}
.bookingTitle
{
margin-left: auto;
margin-right: auto;
width: 40%;
font-family: bahnschriftBold;
font-size: 4rem; /*vmin*/
color: var(--textCol);
}
.logoutContainer
{
margin-left: auto;
margin-right: auto;
width: 90%;
}
.headlineContainer
{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-around;
}
.headlineContainer div
{
justify-content: center;
display: flex;
flex: 1;
}
.colorLegendWraper
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.colorLegendContainer
{
margin: 10px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
width: 80%;
max-width: 80%;
}
.colorLegendContainer>div
{
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 2rem;
width: 100%;
color: var(--textCol);
}
.colorLegendColor
{
width: 3vmin;
height: 3vmin;
margin: 5px;
}