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.
1 lines
10 KiB
1 lines
10 KiB
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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}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}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800italic.woff2") format("woff2")}*{box-sizing:border-box;margin:0;padding:0}:root{font-size:Min(1.11111vw, 1.48148vh)}body{margin:0;font-family:"Open Sans";background-color:black;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;width:90rem;background-color:#2f6f2a;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:bold}.game .body{height:48rem}.center{display:flex;justify-content:center}.hidden{display:none !important}.label{font-size:1.8em;padding:0.3em 0;font-weight:bold;display:block}.overlay{border-radius:0.25em;border:0.3em black solid;position:absolute;top:50%;left:50%;z-index:1000;transform:translate(-50%, -50%);width:45rem;max-height:60rem;overflow-y:auto;background-color:#2f6f2a;padding:2em 1.7em}.overlay::-webkit-scrollbar{width:0}.dialog{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto}.dialog h2{font-size:2.4em;margin-bottom:0.5em;text-shadow:0.2rem 0.2rem 0.4rem #000}.dialog p{font-size:1.4em;margin-bottom:1em;text-shadow:0.2rem 0.2rem 0.4rem #000}body.home header{display:flex;justify-content:center;align-items:center;height:42%}body.home header>img{display:block;width:50%;height:auto}body.home h1{text-align:center;color:white;font-size:2.6rem;text-shadow:0.2rem 0.2rem 0.4rem #000}body.home .menu{flex-grow:1;display:flex;align-items:center;padding-bottom:7.5rem}body.home .menu .mainmenu{width:100%;display:flex;align-items:center;flex-direction:column;justify-content:center}body.home .menu .mainmenu h1{margin-bottom:1em}nav.list{display:flex;justify-content:center;flex-grow:1}nav.list.horizontal{flex-direction:row;justify-content:space-evenly}nav.list.horizontal>*+*{margin-left:1em}nav.list.vertical{flex-direction:column}nav.list.vertical>*+*{margin-top:1em}.element{border-radius:0.25em;border:0.3em black solid;border-width:0.3rem;background-color:#214d1d;cursor:pointer}.element:focus,.element:hover{outline:none;border-color:orange}.element.input{font-size:2em;padding:0.3em;background-color:white;color:black;display:block;width:100%}.element.player{display:flex;justify-content:flex-start;align-items:center;padding:0.7em}.element.player h2{font-size:1.3em}.element.player>*{margin-right:1em}.element.player img{height:3em;aspect-ratio:1/1;object-position:top;object-fit:cover}.element.plain{color:white;font-weight:bold;padding:0.3em 0.5em;text-align:center;display:flex;align-items:flex-end;text-shadow:0.2rem 0.2rem 0.4rem #000;font-family:"Open Sans";padding:1rem 2rem;justify-content:center;align-items:center;box-shadow:0.25rem 0.25rem 1rem rgba(0,0,0,0.3);font-size:1.6em}.element.plain:hover,.element.plain:focus{background-color:rgba(0,0,0,0.2);border-color:orange;outline:none}.element.plain.back{background-color:#5E716A}.element.plain.new{background-color:#193a16}.element.player{height:4.5em}.element.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:#214d1d;box-shadow:0.25em 0.25em 1em rgba(0,0,0,0.3);cursor:pointer}.element.square h2{color:white;font-weight:bold;padding:0.3em 0.5em;text-align:center;display:flex;align-items:flex-end;text-shadow:0.2rem 0.2rem 0.4rem #000;font-family:"Open Sans";font-size:2em;padding:0.6em 0 0 0}.element.square:hover,.element.square:focus{background-color:rgba(0,0,0,0.2);border-color:orange;outline:none}.element.square .icon{width:65%;height:auto}.element.square .icon svg{width:100%;aspect-ratio:1/1;object-fit:cover;fill:white;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}.element.square .icon img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}body.xoi main{display:flex;justify-content:center}body.xoi main .gamesetup{width:65%;margin:0 auto}body.xoi main .gamesetup h1{font-size:3em;text-align:center;margin-bottom:0.5em}body.xoi main .gamesetup .menu>*{margin-bottom:1.3em}body.xoi main .playerselect>h2{font-size:1.8em;margin-bottom:0.7em;text-align:center}body.xoi main .xoi{display:grid;height:100%;grid-template-columns:3fr 3fr 2fr 3fr 3fr;grid-template-rows:11.5rem 52rem 4rem;grid-template-areas:"player1 toGo1 score toGo2 player2" "player1 game game game player2" "navi navi navi navi navi";background-color:black}body.xoi main .xoi .bigToGo{margin:.2rem;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}body.xoi main .xoi .bigToGo.active{border-color:orange}body.xoi main .xoi .bigToGo.one{grid-area:toGo1}body.xoi main .xoi .bigToGo.two{grid-area:toGo2}body.xoi main .xoi .score{margin:.2rem 0;grid-area:score;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8);background-color:#2f6f2a;display:flex;flex-direction:column;justify-content:space-evenly}body.xoi main .xoi .score>div{display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .score>div h2,body.xoi main .xoi .score>div h3{margin:0;text-align:center;font-size:1.3rem}body.xoi main .xoi .score>div h3{font-size:1.1rem}body.xoi main .xoi .score>div>h2{font-size:3.2rem}body.xoi main .xoi .score>div h2:nth-child(2){order:10}body.xoi main .xoi .player{background-color:#2f6f2a;margin-bottom:.1rem}body.xoi main .xoi .player.player1{grid-area:player1}body.xoi main .xoi .player.player2{grid-area:player2}body.xoi main .xoi .player img{width:100%;aspect-ratio:35/45;object-fit:cover}body.xoi main .xoi .player h2,body.xoi main .xoi .player h3{text-align:center;margin:0.2em;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .player h2{font-size:1.8em}body.xoi main .xoi .player h3{font-size:1.2em}body.xoi main .xoi .player .stats{display:grid;grid-template-columns:auto 1fr 1fr 1fr;grid-auto-rows:auto;margin:1em 0.6em;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .player .stats .row{display:contents;font-size:1.4em}body.xoi main .xoi .player .stats .row.header{font-weight:bold}body.xoi main .xoi .player .stats .row :nth-child(2),body.xoi main .xoi .player .stats .row :nth-child(3),body.xoi main .xoi .player .stats .row :nth-child(4){text-align:center}body.xoi main .xoi .game{grid-area:game;display:grid;grid-template-columns:1fr;grid-template-rows:4.72727272rem 47.272727273rem}body.xoi main .xoi .game>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%}body.xoi main .xoi .game>div::-webkit-scrollbar{width:0}body.xoi main .xoi .game>div>div{font-size:2rem;text-align:center;background:white;color:black;margin:0 0 .2rem .2rem;width:calc(100% - $line);height:calc(100% - $line);border:0.15em transparent solid;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .game>div>div.headding{background-color:#2f6f2a;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .game>div>div.rounds{grid-column:3;background-color:#2f6f2a;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .game>div>div.player1.points{grid-column:1}body.xoi main .xoi .game>div>div.player1.toGo{grid-column:2;font-size:1.6rem}body.xoi main .xoi .game>div>div.player2.points{grid-column:4}body.xoi main .xoi .game>div>div.player2.toGo{grid-column:5;margin-right:.2rem;font-size:1.6rem}body.xoi main .xoi .game>div>div.input{padding:0;border:0.15em orange solid}body.xoi main .xoi .game>div>div.input input{text-align:center;box-sizing:border-box;font-family:inherit;padding:0.1em;border:none;width:100%;height:100%;font-size:1em}body.xoi main .xoi .game>div>div.input input:focus{outline:none}body.xoi main .xoi .game>div>div.headding.rounds{font-size:1.4rem}body.xoi main .xoi .nav{grid-area:navi;background-color:#2f6f2a;margin-top:.1rem;display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .nav span{font-size:2em}
|
|
|