You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
694 lines
14 KiB
694 lines
14 KiB
////////////////////////////////////////////////////////////////////////////////
|
|
// SCSS
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$border: 0.5vh;
|
|
$orange: orange;
|
|
$shadow: 0.2rem 0.2rem 0.4rem #000;
|
|
$text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8);
|
|
$bg: #214d1d;
|
|
$darker: rgba(0,0,0,0.3);
|
|
$bgcolor: #2f6f2a;
|
|
$line: 0.2rem;
|
|
|
|
@mixin border {
|
|
border-radius: 0.5rem;
|
|
border: 0.3rem black solid;
|
|
}
|
|
|
|
@mixin button {
|
|
@include border;
|
|
cursor: pointer;
|
|
background-color: $darker;
|
|
}
|
|
|
|
@mixin button-text{
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0.3em 0.5em;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
text-shadow: $shadow;
|
|
font-family: "Open Sans";
|
|
}
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Meyerweb Reset
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
b, u, i, center,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, canvas, details, embed,
|
|
figure, figcaption, footer, header, hgroup,
|
|
menu, nav, output, ruby, section, summary,
|
|
time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
body {
|
|
// line-height: 1;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// General
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@import "./font";
|
|
|
|
*{
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root{
|
|
font-size: Min(1.111111111vw, 1.481481481vh);
|
|
}
|
|
|
|
body{
|
|
margin: 0;
|
|
font-family: "Open Sans";
|
|
background-color: black;
|
|
// background-color: $bgcolor;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input{
|
|
font-family: "Open Sans";
|
|
}
|
|
|
|
main{
|
|
border-left: 0.2rem solid black;
|
|
border-right: 0.2rem solid black;
|
|
height: 67.5rem; /* 1080"px" */
|
|
width: 90rem; /* 1440"px" */
|
|
background-color: $bgcolor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6{
|
|
font-weight: bold;
|
|
}
|
|
.game .body{
|
|
height:48rem;
|
|
}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Simple class defs
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
.center{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hidden{
|
|
display: none !important;
|
|
}
|
|
|
|
.label{
|
|
font-size: 1.8em;
|
|
padding: 0.3em 0;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Content
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
.overlay{
|
|
@include border;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 1000;
|
|
transform: translate(-50%,-50%);
|
|
width: 45rem;
|
|
max-height: 60rem;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 0; /* Safari and Chrome */
|
|
}
|
|
background-color: $bgcolor;
|
|
padding: 2em 1.7em;
|
|
}
|
|
|
|
.dialog{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: auto;
|
|
h2{
|
|
font-size: 2.4em;
|
|
margin-bottom: 0.5em;
|
|
text-shadow: $shadow;
|
|
}
|
|
p{
|
|
font-size: 1.4em;
|
|
margin-bottom: 1em;
|
|
text-shadow: $shadow;
|
|
}
|
|
}
|
|
|
|
|
|
nav.list{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
|
|
&.horizontal{
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
& > *+*{
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
&.vertical{
|
|
flex-direction: column;
|
|
& > *+*{
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Elements
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
.element{
|
|
@include border;
|
|
border-width: 0.3rem;
|
|
background-color: $bg;
|
|
cursor: pointer;
|
|
box-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0, 0.3);
|
|
|
|
&:focus, &:hover{
|
|
outline: none;
|
|
border-color: $orange;
|
|
}
|
|
|
|
&.input{
|
|
font-size: 2em;
|
|
padding: 0.3em;
|
|
background-color: white;
|
|
color: black;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
&.player{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0.7em;
|
|
height: 4.5em;
|
|
|
|
h2{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
&>*{
|
|
margin-right: 1em;
|
|
}
|
|
|
|
img{
|
|
height: 3em;
|
|
aspect-ratio: 1/1;
|
|
object-position: top;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&.scorer{
|
|
@include button-text;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0.7em;
|
|
height: 4.5em;
|
|
|
|
.player{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
min-width: 0;
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
|
|
h2{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
&>*{
|
|
margin-right: 1em;
|
|
}
|
|
|
|
img{
|
|
height: 3em;
|
|
aspect-ratio: 1/1;
|
|
object-position: top;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.plain{
|
|
@include button-text;
|
|
padding: 1rem 2rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.6em;
|
|
|
|
&:hover,&:focus{
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-color: $orange;
|
|
outline: none;
|
|
}
|
|
&.back{
|
|
background-color: #5E716A;
|
|
}
|
|
&.new{
|
|
background-color: darken($bg, 5%);
|
|
}
|
|
}
|
|
|
|
&.square{
|
|
font-size: 1rem;
|
|
width: 20em;
|
|
height: 20em;
|
|
padding: 2.5em 1.25em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: $bg;
|
|
box-shadow: 0.25em 0.25em 1em rgba(0,0,0, 0.3);
|
|
cursor: pointer;
|
|
h2{
|
|
@include button-text;
|
|
font-size: 2em;
|
|
padding: 0.6em 0 0 0;
|
|
}
|
|
&:hover,&:focus{
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-color: $orange;
|
|
outline: none;
|
|
}
|
|
.icon{
|
|
width: 65%;
|
|
height: auto;
|
|
svg{
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
fill: white;
|
|
filter: drop-shadow($shadow);
|
|
}
|
|
img{
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
filter: drop-shadow($shadow);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Home
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
body.home{
|
|
header{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 42%;
|
|
&>img{
|
|
display: block;
|
|
width: 50%;
|
|
height: auto;
|
|
}
|
|
}
|
|
h1{
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 2.6rem;
|
|
text-shadow: $shadow;
|
|
}
|
|
.menu{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 7.5rem;
|
|
|
|
.mainmenu{
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
h1{
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Game
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
body.xoi{
|
|
main{
|
|
display: flex;
|
|
justify-content: center;
|
|
.gamesetup{
|
|
width: 65%;
|
|
margin: 0 auto;
|
|
h1{
|
|
font-size: 3em;
|
|
text-align: center;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.menu{
|
|
& > * {
|
|
margin-bottom: 1.3em;
|
|
}
|
|
}
|
|
}
|
|
.playerselect{
|
|
& > h2{
|
|
font-size: 1.8em;
|
|
margin-bottom: 0.7em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
main .xoi{
|
|
display: grid;
|
|
height: 100%;
|
|
grid-template-columns: 3fr 3fr 2fr 3fr 3fr;
|
|
grid-template-rows: 11.5rem 52rem 4rem;
|
|
grid-template-areas:
|
|
"scorer1 toGo1 score toGo2 scorer2"
|
|
"scorer1 game game game scorer2"
|
|
"navi navi navi navi navi"
|
|
;
|
|
background-color: black;
|
|
|
|
.bigToGo{
|
|
margin: $line;
|
|
background-color: white;
|
|
border: 0.7rem solid black;
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 7.5em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&.active{
|
|
border-color: $orange;
|
|
}
|
|
&.one{
|
|
grid-area: toGo1;
|
|
}
|
|
&.two{
|
|
grid-area: toGo2;
|
|
}
|
|
}
|
|
.score{
|
|
margin: $line 0;
|
|
grid-area: score;
|
|
color: white;
|
|
text-shadow: $text-shadow;
|
|
background-color: $bgcolor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
&>div{
|
|
/*sets and legs*/
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
h2,h3{
|
|
margin:0;
|
|
text-align: center;
|
|
font-size: 1.3rem;
|
|
}
|
|
h3{
|
|
font-size: 1.1rem;
|
|
}
|
|
&>h2{
|
|
font-size: 3.2rem;
|
|
}
|
|
h2:nth-child(2){
|
|
order:10;
|
|
}
|
|
}
|
|
}
|
|
.player{
|
|
background-color: $bgcolor;
|
|
margin-bottom: calc($line/2);
|
|
|
|
&.team{
|
|
$anim: 0.3s linear;
|
|
.images{
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding-bottom: 128.5714286%;
|
|
background-color: #737373;
|
|
img{
|
|
transform: translate(24%,0) scale(0.42);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: transform $anim, box-shadow $anim, z-index $anim;
|
|
z-index: 10;
|
|
box-shadow: 0.6rem 0.6rem 0.6rem rgba(0, 0, 0, 0.4);
|
|
}
|
|
img:nth-child(1){
|
|
transform: translate(-24%,0) scale(0.42);
|
|
}
|
|
img:nth-child(1).inactive{
|
|
transform: translate(-25%,25%) scale(0.35);
|
|
}
|
|
img.inactive{
|
|
transform: translate(25%,25%) scale(0.35);
|
|
}
|
|
img.active{
|
|
box-shadow: 0rem 0rem 0rem #000;
|
|
transform: scale(1);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.titles{
|
|
display: grid;
|
|
& > *{
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
.title{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
h2, h3{
|
|
opacity: 0;
|
|
}
|
|
&.active{
|
|
h2, h3{
|
|
transition: opacity $anim;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.scorer1{
|
|
grid-area: scorer1;
|
|
}
|
|
&.scorer2{
|
|
grid-area: scorer2;
|
|
}
|
|
img{
|
|
width: 100%;
|
|
aspect-ratio: 35/45;
|
|
object-fit: cover;
|
|
}
|
|
|
|
h2, h3{
|
|
text-align: center;
|
|
margin: 0.2em;
|
|
text-shadow: $text-shadow;
|
|
}
|
|
h2{
|
|
font-size: 1.8em;
|
|
}
|
|
h3{
|
|
font-size: 1.2em;
|
|
}
|
|
.stats{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr 1fr 1fr;
|
|
grid-auto-rows: auto;
|
|
margin: 1em 0.6em;
|
|
text-shadow: $text-shadow;
|
|
|
|
.row{
|
|
display: contents;
|
|
font-size: 1.4em;
|
|
&.header{
|
|
font-weight: bold;
|
|
}
|
|
:nth-child(2), :nth-child(3), :nth-child(4){
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.game{
|
|
grid-area: game;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 4.72727272rem 47.272727273rem;
|
|
&>div{
|
|
display: grid;
|
|
grid-template-columns: 4fr 4fr 2fr 4fr 4fr;
|
|
grid-auto-rows: 4.72727272rem;
|
|
overflow-y: scroll;
|
|
grid-auto-flow: dense;
|
|
height: 100%;
|
|
&::-webkit-scrollbar {
|
|
width: 0; /* Safari and Chrome */
|
|
}
|
|
&>div{
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
background: white;
|
|
color: black;
|
|
margin: 0 0 $line $line;
|
|
border: 0.15em transparent solid;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&.headding{
|
|
background-color: $bgcolor;
|
|
color: white;
|
|
text-shadow: $text-shadow;
|
|
}
|
|
&.rounds{
|
|
grid-column: 3;
|
|
background-color: $bgcolor;
|
|
color: white;
|
|
text-shadow: $text-shadow;
|
|
}
|
|
&.scorer1.points{
|
|
grid-column: 1;
|
|
}
|
|
&.scorer1.toGo{
|
|
grid-column: 2;
|
|
font-size: 1.6rem;
|
|
}
|
|
&.scorer2.points{
|
|
grid-column: 4;
|
|
}
|
|
&.scorer2.toGo{
|
|
grid-column: 5;
|
|
margin-right: $line;
|
|
// width: calc(100% - 2*$line);
|
|
// height: calc(100% - $line);
|
|
font-size: 1.6rem;
|
|
}
|
|
&.input{
|
|
padding: 0;
|
|
border: 0.15em orange solid;
|
|
input{
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
padding: 0.1em;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1em;
|
|
&:focus{
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&>div.headding{
|
|
&.rounds{
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nav{
|
|
grid-area: navi;
|
|
background-color: $bgcolor;
|
|
margin-top: calc($line/2);
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
span{
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|