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
12 KiB
1 lines
12 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.111111111vw,1.481481481vh)}body{margin:0;font-family:"Open Sans";background-color:#000;display:flex;justify-content:center;align-items:center;height:100vh;color:#fff;display:flex;flex-direction:column;overflow:hidden}input{font-family:"Open Sans"}main{border-left:.2rem solid #000;border-right:.2rem solid #000;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:.3em 0;font-weight:bold;display:block}.overlay{border-radius:.5rem;border:.3rem #000 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:.5em;text-shadow:.2rem .2rem .4rem #000}.dialog p{font-size:1.4em;margin-bottom:1em;text-shadow:.2rem .2rem .4rem #000}nav.list{display:flex;justify-content:center;flex-grow:1;width:100%}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:.5rem;border:.3rem #000 solid;border-width:.3rem;background-color:#214d1d;cursor:pointer;box-shadow:.25rem .25rem 1rem rgba(0,0,0,.3)}.element:focus,.element:hover{outline:none;border-color:orange}.element.input{font-size:2em;padding:.3em;background-color:#fff;color:#000;display:block;width:100%}.element.player{display:flex;justify-content:flex-start;align-items:center;padding:.7em;height:4.5em}.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.scorer{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";display:flex;justify-content:flex-start;align-items:center;padding:.7em;height:4.5em}.element.scorer .player{display:flex;justify-content:flex-start;align-items:center;min-width:0;flex-basis:0;flex-grow:1;text-align:left}.element.scorer .player h2{font-size:1.3em}.element.scorer .player>*{margin-right:1em}.element.scorer .player img{height:3em;aspect-ratio:1/1;object-position:top;object-fit:cover}.element.plain{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";padding:1rem 2rem;justify-content:center;align-items:center;font-size:1.6em}.element.plain:hover,.element.plain:focus{background-color:rgba(0,0,0,.2);border-color:orange;outline:none}.element.plain.back{background-color:#5e716a}.element.plain.new{background-color:#193a16}.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:.25em .25em 1em rgba(0,0,0,.3);cursor:pointer}.element.square h2{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";font-size:2em;padding:.6em 0 0 0}.element.square:hover,.element.square:focus{background-color:rgba(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:#fff;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.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:#fff;font-size:2.6rem;text-shadow:.2rem .2rem .4rem #000}body.home .menu{flex-grow:1;display:flex;align-items:center;padding-bottom:7.5rem}body.home .menu .mainmenu{width:60%;margin:0 auto;display:flex;align-items:center;flex-direction:column;justify-content:center}body.home .menu .mainmenu h1{margin-bottom:1em}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:.5em}body.xoi main .gamesetup .menu>*{margin-bottom:1.3em}body.xoi main .gamesetup .sidebyside{display:flex}body.xoi main .gamesetup .sidebyside>*{flex-grow:1;flex-basis:1}body.xoi main .playerselect>h2{font-size:1.8em;margin-bottom:.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:"scorer1 toGo1 score toGo2 scorer2" "scorer1 game game game scorer2" "navi navi navi navi navi";background-color:#000}body.xoi main .xoi.Throw{box-shadow:0px 0px 2rem 2rem green}body.xoi main .xoi.Takeout{box-shadow:0px 0px 2rem 2rem orange}body.xoi main .xoi .bigToGo{margin:.2rem;background-color:#fff;border:.7rem solid #000;color:#000;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:#fff;text-shadow:.1rem .1rem .2rem rgba(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.team .images{position:relative;left:0;top:0;width:100%;padding-bottom:128.5714286%;background-color:#737373}body.xoi main .xoi .player.team .images img{transform:translate(24%, 0) scale(0.42);position:absolute;left:0;top:0;transition:transform .3s linear,box-shadow .3s linear,z-index .3s linear;z-index:10;box-shadow:.6rem .6rem .6rem rgba(0,0,0,.4)}body.xoi main .xoi .player.team .images img:nth-child(1){transform:translate(-24%, 0) scale(0.42)}body.xoi main .xoi .player.team .images img:nth-child(1).inactive{transform:translate(-25%, 25%) scale(0.35)}body.xoi main .xoi .player.team .images img.inactive{transform:translate(25%, 25%) scale(0.35)}body.xoi main .xoi .player.team .images img.active{box-shadow:0rem 0rem 0rem #000;transform:scale(1);z-index:1}body.xoi main .xoi .player.team .titles{display:grid}body.xoi main .xoi .player.team .titles>*{grid-column:1;grid-row:1}body.xoi main .xoi .player.team .titles .title{display:flex;flex-direction:column;justify-content:center}body.xoi main .xoi .player.team .titles .title h2,body.xoi main .xoi .player.team .titles .title h3{opacity:0}body.xoi main .xoi .player.team .titles .title.active h2,body.xoi main .xoi .player.team .titles .title.active h3{transition:opacity .3s linear;opacity:1}body.xoi main .xoi .player.scorer1{grid-area:scorer1}body.xoi main .xoi .player.scorer2{grid-area:scorer2}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:.2em;text-shadow:.1rem .1rem .2rem rgba(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 .6em;text-shadow:.1rem .1rem .2rem rgba(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:#fff;color:#000;margin:0 0 .2rem .2rem;border:.15em rgba(0,0,0,0) solid;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .game>div>div.headding{background-color:#2f6f2a;color:#fff;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .game>div>div.rounds{grid-column:3;background-color:#2f6f2a;color:#fff;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .game>div>div.scorer1.points{grid-column:1}body.xoi main .xoi .game>div>div.scorer1.toGo{grid-column:2;font-size:1.6rem}body.xoi main .xoi .game>div>div.scorer2.points{grid-column:4}body.xoi main .xoi .game>div>div.scorer2.toGo{grid-column:5;margin-right:.2rem;font-size:1.6rem}body.xoi main .xoi .game>div>div.input{padding:0;border:.15em orange solid}body.xoi main .xoi .game>div>div.input input{text-align:center;box-sizing:border-box;font-family:inherit;padding:.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} |