mirror of
https://github.com/hexahigh/games.git
synced 2025-12-11 20:15:38 +01:00
1303 lines
40 KiB
CSS
1303 lines
40 KiB
CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,adsetess,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,swireframeg,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}
|
|
|
|
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
|
|
|
|
* { box-sizing: border-box; tap-highlight-color:rgba(0,0,0,0); }
|
|
|
|
body {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 100%;
|
|
overflow: hidden;
|
|
font-family: avenir, 'Lato', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
button {
|
|
font-family: 'Lato', avenir, sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
body:not(.animated) *:not(#panes) { transition: all 0s linear; }
|
|
|
|
#app {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
#app a { color: #EAEAEA; }
|
|
|
|
#container,
|
|
#board,
|
|
#frame {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#app[data-frame="off"] #board,
|
|
#app[data-frame="off"] #board #container,
|
|
#app[data-frame="off"] #frame {
|
|
width: 8em;
|
|
height: 8em;
|
|
margin: -4em 0 0 -4em;
|
|
}
|
|
|
|
#app[data-frame="on"] #container,
|
|
#app[data-frame="on"] #board,
|
|
#app[data-frame="on"] #frame {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 9.5em;
|
|
height: 9.5em;
|
|
margin: -4.75em 0 0 -4.75em;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#container {
|
|
z-index: 1;
|
|
perspective: 800px;
|
|
transform: translateZ( -9999px );
|
|
}
|
|
|
|
#app[data-state="game"] #container { transform: inherit; }
|
|
|
|
#scene {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 16em;
|
|
height: 16em;
|
|
margin: -8em 0 0 -8em;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX( 90deg ) rotateZ( 90deg );
|
|
}
|
|
|
|
.sphere { transform: rotateZ( -90deg ) rotateX( -90deg ); }
|
|
|
|
#scene, .sphere { transition: transform 2s ease-in-out; }
|
|
|
|
#app[data-state="game"] #scene,
|
|
#app[data-state="game"] .sphere { transition-delay: .2s; }
|
|
|
|
#pieces {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
#board {
|
|
z-index: 0;
|
|
transform: translateZ(.3em);
|
|
}
|
|
|
|
#board:after, #frame:after, #frame:before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: .3em;
|
|
transform-style: preserve-3d;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#frame {
|
|
z-index: -1;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(.02em) rotateZ(90deg);
|
|
box-shadow: 0 0 .25em .1em rgba(0,0,0,.5);
|
|
}
|
|
|
|
#app[data-frame="on"] #board:after { transform: rotateX(90deg) translateZ(8.75em) translateY(-0.3em);
|
|
transform-origin: 0 0; }
|
|
#app[data-frame="on"] #frame:after { transform: rotateX(90deg) rotateY(90deg) translateX(9.5em) translateY(-0.02em);
|
|
transform-origin: 100% 0; }
|
|
#app[data-frame="on"] #frame:before { transform: rotateX(90deg) rotateY(0deg) translateX(0em) translateY(-0.02em);
|
|
transform-origin: 100% 0; }
|
|
|
|
#app[data-frame="off"] th { display: none; }
|
|
|
|
#app[data-frame="off"] #board:after { transform: rotateX(90deg) translateZ(8em) translateY(-0.3em);
|
|
transform-origin: 0 0; }
|
|
#app[data-frame="off"] #frame:after { transform: rotateX(90deg) rotateY(90deg) translateX(8em) translateY(-0.02em);
|
|
transform-origin: 100% 0; }
|
|
#app[data-frame="off"] #frame:before { transform: rotateX(90deg) rotateY(0deg) translateX(0em) translateY(-0.02em);
|
|
transform-origin: 100% 0; }
|
|
|
|
th, td {
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
th {
|
|
vertical-align: top;
|
|
font-size: 75%;
|
|
line-height: .5em;
|
|
}
|
|
|
|
tbody th {
|
|
vertical-align: top;
|
|
line-height: .9em;
|
|
}
|
|
|
|
table span {
|
|
display: block;
|
|
height: 100%;
|
|
font-size: .26em;
|
|
color: rgba(255,255,255,.75);
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
thead span, tbody th:last-child span{
|
|
transform: rotateZ(180deg) translateZ(1px);
|
|
transform-origin: center;
|
|
}
|
|
|
|
thead span, tfoot span { line-height: 3.9em; }
|
|
tbody span { line-height: 4.5em; padding-right: 0.3em; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- jail */
|
|
|
|
.jail {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 8em;
|
|
height: 2.25em;
|
|
}
|
|
|
|
#app[data-frame="off"] #w-jail { bottom: 1.5em; margin-left: -4em; }
|
|
#app[data-frame="off"] #b-jail { top: 1.5em; margin-left: -4em; }
|
|
|
|
#app[data-frame="on"] #w-jail { bottom: 1em; margin-left: -4em; }
|
|
#app[data-frame="on"] #b-jail { top: 1em; margin-left: -4em; }
|
|
|
|
#w-jail {
|
|
bottom: 1em;
|
|
transform-style: preserve-3d;
|
|
transform: rotateZ(0deg) translateZ(2px);
|
|
}
|
|
|
|
#b-jail {
|
|
top: 1em;
|
|
transform-style: preserve-3d;
|
|
transform: rotateZ(180deg) translateZ(2px);
|
|
}
|
|
|
|
.jail .piece{
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
.jail .piece .face, .jail .piece .sphere, {
|
|
box-shadow: inset 10em 10em 1em rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
#b-jail .piece { transform-origin: center; transform: rotateZ(180deg); }
|
|
#w-jail .piece { transform-origin: center; transform: rotateZ(0deg);}
|
|
|
|
@media screen and (min-width: 56em) {
|
|
|
|
#app[data-frame="off"] #w-jail { bottom: 6.9em; margin-left: 1.5em; }
|
|
#app[data-frame="off"] #b-jail { top: 6.9em; margin-left: -9.5em; }
|
|
|
|
#app[data-frame="on"] #w-jail { bottom: 6.9em; margin-left: 2em; }
|
|
#app[data-frame="on"] #b-jail { top: 6.9em; margin-left: -10em; }
|
|
|
|
#b-jail { transform: rotateZ(90deg) translateZ(2px); }
|
|
#w-jail { transform: rotateZ(-90deg) translateZ(2px); }
|
|
|
|
#b-jail .piece { transform: rotateZ(-90deg); }
|
|
#w-jail .piece { transform: rotateZ(90deg); }
|
|
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- piece */
|
|
|
|
.piece {
|
|
position: absolute;
|
|
width: 1em;
|
|
height: 1em;
|
|
transform-style: preserve-3d;
|
|
transform-origin: 4em;
|
|
transform: translateZ( 2px );
|
|
}
|
|
|
|
.piece,
|
|
.poly,
|
|
.poly .face,
|
|
.poly-group:first-child,
|
|
.bishop .poly-group:nth-child(2) {
|
|
transition: transform .2s linear;
|
|
}
|
|
|
|
.piece:active {
|
|
cursor: grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.piece.grabbed {
|
|
transition: all 0s linear;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.poly-group {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
font-size: 10%;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.poly-group:first-child {
|
|
background: rgba(0,0,0,.4);
|
|
box-shadow: 0 0 1em .2em rgba(0,0,0,.6);
|
|
}
|
|
|
|
.bishop .poly-group:nth-child(2) {
|
|
background: rgba(0,0,0,.4);
|
|
box-shadow: 0 0 1em .2em rgba(0,0,0,.6);
|
|
}
|
|
|
|
.piece:active .poly, .piece.grabbed .poly{
|
|
transform: translateZ( 10em );
|
|
}
|
|
|
|
.piece.grabbed .poly-group:first-child {
|
|
background: rgba(0,0,0,.6);
|
|
box-shadow: 0 0 1em .8em rgba(0,0,0,.6);
|
|
}
|
|
|
|
.piece.grabbed.bishop .poly-group:nth-child(2) {
|
|
background: rgba(0,0,0,.6);
|
|
box-shadow: 0 0 1em .8em rgba(0,0,0,.6);
|
|
}
|
|
|
|
.poly {
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.poly .face {
|
|
position: absolute;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.valid:before,
|
|
.valid:after,
|
|
.current:before,
|
|
.current:after,
|
|
.castle:before,
|
|
.castle:after,
|
|
.valid.highlight:before,
|
|
.valid.highlight:after,
|
|
.current.highlight:before,
|
|
.current.highlight:after {
|
|
content: '';
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 50%;
|
|
transform-style: preserve-3d;
|
|
-moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box;
|
|
transform: translateZ( 1px );
|
|
}
|
|
|
|
.valid:before, .current:before {
|
|
width: .3em;
|
|
height: .3em;
|
|
margin-left: -.15em;
|
|
margin-top: -.15em;
|
|
background: rgba(255,255,255,.5);
|
|
}
|
|
|
|
.highlight:before {
|
|
z-index: 2;
|
|
box-shadow: 0 0 1em 1em rgba(255,255,255,.4);
|
|
}
|
|
|
|
.valid.highlight:before,
|
|
.current.highlight:before,
|
|
.current:before { background: rgba(255,255,255,1); }
|
|
|
|
.valid.highlight:after,
|
|
.current.highlight:after {
|
|
width: .6em;
|
|
height: .6em;
|
|
margin-left: -.3em;
|
|
margin-top: -.3em;
|
|
border: .1em solid rgba(255,255,255,.8);
|
|
}
|
|
|
|
.valid.captured:after {
|
|
width: .8em;
|
|
height: .8em;
|
|
margin-left: -.4em;
|
|
margin-top: -.4em;
|
|
border: .1em solid rgba(255,255,255,.6);
|
|
}
|
|
|
|
.valid:before { background: rgba(255,255,255,.35); }
|
|
.valid:after { border: none; }
|
|
|
|
.valid.highlight:before { background: rgba(255,255,255,1); }
|
|
.valid.highlight:after { border: .1em solid rgba(255,255,255,.35); }
|
|
|
|
.valid.captured:before { background: rgba(255,67,47,.5); }
|
|
.valid.captured:after { border: .1em solid rgba(255,67,47,.5); }
|
|
|
|
.valid.captured.highlight:before { background: rgba(255,67,47,1); }
|
|
.valid.captured.highlight:after { border: .1em solid rgba(255,67,47,1); }
|
|
|
|
.valid[class*="O-O"]:before { background: #CC0; }
|
|
.valid[class*="O-O"]:after { border: .1em solid #CC0; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- pawn / king head */
|
|
|
|
.pawn .poly-group {
|
|
width: 4em;
|
|
height: 4em;
|
|
margin: -2em 0 0 -2em;
|
|
}
|
|
|
|
.poly.small-cube {
|
|
width: 4em;
|
|
height: 4em;
|
|
}
|
|
|
|
.small-cube .tp {
|
|
width: 4em;
|
|
height: 4em;
|
|
transform: translateZ( 4em );
|
|
}
|
|
|
|
.small-cube .ft {
|
|
width: 4em;
|
|
height: 4em;
|
|
transform: rotateX(90deg) translateZ(-4em);
|
|
}
|
|
|
|
.small-cube .bk {
|
|
width: 4em;
|
|
height: 4em;
|
|
transform: rotateX(90deg);
|
|
}
|
|
|
|
.small-cube .rt {
|
|
width: 4em;
|
|
height: 4em;
|
|
transform: rotateY(90deg) translateX(-4em);
|
|
}
|
|
|
|
.small-cube .lt {
|
|
width: 4em;
|
|
height: 4em;
|
|
transform: rotateY(90deg) translateX(-4em) translateZ(4em);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- rook / queen and king bodies */
|
|
|
|
.rook .poly-group {
|
|
width: 6em;
|
|
height: 6em;
|
|
margin: -3em 0 0 -3em;
|
|
}
|
|
|
|
.poly.big-cube {
|
|
width: 6em;
|
|
height: 6em;
|
|
}
|
|
|
|
.big-cube .tp {
|
|
width: 6em;
|
|
height: 6em;
|
|
transform: translateZ( 6em );
|
|
}
|
|
|
|
.big-cube .ft {
|
|
width: 6em;
|
|
height: 6em;
|
|
transform: rotateX(90deg) translateZ(-6em);
|
|
}
|
|
|
|
.big-cube .bk {
|
|
width: 6em;
|
|
height: 6em;
|
|
transform: rotateX(90deg);
|
|
}
|
|
|
|
.big-cube .rt {
|
|
width: 6em;
|
|
height: 6em;
|
|
transform: rotateY(90deg) translateX(-6em);
|
|
}
|
|
|
|
.big-cube .lt {
|
|
width: 6em;
|
|
height: 6em;
|
|
transform: rotateY(90deg) translateX(-6em) translateZ(6em);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- knight */
|
|
|
|
.knight .poly-group {
|
|
width: 6em;
|
|
height: 6em;
|
|
margin: -3em 0 0 -3em;
|
|
}
|
|
|
|
.knight .poly-group.top { transform: translateZ( 3em ) rotateZ( 180deg ); }
|
|
|
|
.knight .poly.a { margin: 0; }
|
|
.knight .poly.b { margin: 3em 0 0 0; }
|
|
.knight .poly.c { margin: 3em 0 0 3em; }
|
|
|
|
.knight .tp {
|
|
width: 3em;
|
|
height: 3em;
|
|
transform: translateZ( 3em );
|
|
}
|
|
.knight .bm {
|
|
width: 8em;
|
|
height: 8em;
|
|
transform: translateZ( 0em );
|
|
}
|
|
.knight .ft {
|
|
width: 3em;
|
|
height: 3em;
|
|
transform: rotateX(90deg) translateZ(-3em);
|
|
}
|
|
.knight .bk {
|
|
width: 3em;
|
|
height: 3em;
|
|
transform: rotateX(90deg);
|
|
}
|
|
.knight .rt {
|
|
width: 3em;
|
|
height: 3em;
|
|
transform: rotateY(90deg) translateX(-3em);
|
|
}
|
|
.knight .lt {
|
|
width: 3em;
|
|
height: 3em;
|
|
transform: rotateY(90deg) translateX(-3em) translateZ(3em);
|
|
}
|
|
|
|
.knight .poly.a .rt { height: 6em; }
|
|
.knight .poly.b .ft { width: 6em; }
|
|
.knight .poly.b .tp { width: 6em; }
|
|
|
|
.knight .bottom .poly.b .tp { box-shadow: inset -3.6em .7em 2em rgba(0, 0, 0, .7); }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- bishop */
|
|
|
|
.bishop .rectangle {
|
|
width: 2em;
|
|
height: 6.6em;
|
|
margin: -3.3em 0 0 -1em;
|
|
}
|
|
|
|
.bishop .rectangle.a { transform: rotateZ( 45deg ); }
|
|
.bishop .rectangle.b { transform: rotateZ( -45deg ); }
|
|
|
|
.bishop .rectangle.a .tp {
|
|
position: relative;
|
|
width: 2em;
|
|
height: 6.6em;
|
|
transform: translateZ(6em);
|
|
}
|
|
|
|
.bishop .rectangle.a .rt {
|
|
width: 6em;
|
|
height: 6.6em;
|
|
transform: rotateY(90deg) translateX(-6em) translateZ(0em);
|
|
}
|
|
|
|
.bishop .rectangle.a .lt {
|
|
width: 6em;
|
|
height: 6.6em;
|
|
transform: rotateY(90deg) translateX(-6em) translateZ(2em);
|
|
}
|
|
|
|
.bishop .rectangle.a .tp:before, .bishop .rectangle.b .tp:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -1em;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 1.1em solid transparent;
|
|
border-right: 1.1em solid transparent;
|
|
border-bottom: 1.1em solid #fff;
|
|
}
|
|
|
|
.bishop .rectangle.b.prim .tp:before { border: none; }
|
|
|
|
.bishop .rectangle.a .tp:after, .bishop .rectangle.b.prim .tp:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -1em;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 1.1em solid transparent;
|
|
border-right: 1.1em solid transparent;
|
|
border-top: 1.1em solid #fff;
|
|
}
|
|
|
|
.bishop .rectangle.b .tp {
|
|
position: relative;
|
|
width: 2em;
|
|
height: 2.3em;
|
|
transform: translateZ(6em);
|
|
}
|
|
|
|
.bishop .rectangle.b .rt {
|
|
width: 6em;
|
|
height: 2.3em;
|
|
transform: rotateY(90deg) translateX(-6em);
|
|
}
|
|
|
|
.bishop .rectangle.b .lt {
|
|
width: 6em;
|
|
height: 2.3em;
|
|
transform: rotateY(90deg) translateX(-6em) translateZ(2em);
|
|
}
|
|
|
|
.bishop .rectangle.b.prim .tp { transform: translateZ(6em) translateY(4.3em); }
|
|
.bishop .rectangle.b.prim .rt { transform: rotateY(90deg) translateX(-6em) translateY(4.3em); }
|
|
.bishop .rectangle.b.prim .lt { transform: rotateY(90deg) translateX(-6em) translateZ(2em) translateY(4.3em); }
|
|
|
|
.bishop .corners.a { transform: rotateZ( 0deg ); }
|
|
.bishop .corners.b { transform: rotateZ( 180deg ); }
|
|
|
|
.bishop .big-cube { margin: -3em 0 0 -3em; }
|
|
.bishop .big-cube .ft { width: 1.5em; }
|
|
.bishop .big-cube .lt { height: 1.5em; }
|
|
.bishop .big-cube .bk { width: 1.5em; }
|
|
.bishop .big-cube .rt { height: 1.5em; }
|
|
|
|
.bishop .tp { box-shadow: 0 0 0 #fff; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- queen */
|
|
|
|
.queen .poly-group:first-child {
|
|
width: 6em;
|
|
height: 6em;
|
|
margin: -3em 0 0 -3em;
|
|
}
|
|
|
|
.queen .top { transform: translateZ(8.5em); }
|
|
|
|
.queen .bottom .tp:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: -.5em 0 0 -.5em;
|
|
background: rgba(0,0,0,.6);
|
|
border-radius: 50%;
|
|
transform: rotateX( -35.3deg ) rotateY(0deg);
|
|
box-shadow: 0 0 1em 2em rgba(0,0,0,.6);
|
|
}
|
|
|
|
.poly div.sphere {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 5em;
|
|
height: 5em;
|
|
margin: -2.5em 0 0 -2.5em;
|
|
border-radius: 50%;
|
|
transform-origin: 2.5em 2.5em;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- king */
|
|
|
|
.king .poly-group:first-child {
|
|
width: 6em;
|
|
height: 6em;
|
|
margin: -3em 0 0 -3em;
|
|
}
|
|
|
|
.king .top { transform: rotateZ(-45deg) translateZ(6em); }
|
|
|
|
.king .top .small-cube { margin: -2em 0 0 -2em; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- pieces initial positions */
|
|
|
|
#p { transform: translateX( -1em ) translateY( 7em ); }
|
|
#r { transform: translateX( -1em ) translateY( 6em ); }
|
|
#n { transform: translateX( -1em ) translateY( 5em ); }
|
|
#b { transform: translateX( -1em ) translateY( 4em ); }
|
|
#q { transform: translateX( -1em ) translateY( 3em ); }
|
|
#k { transform: translateX( -1em ) translateY( 2em ); }
|
|
|
|
/* ------------------------------------------------------- UI elements */
|
|
|
|
h1 {
|
|
margin-bottom: .5em;
|
|
font-size: 1.75em;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: .75em;
|
|
margin-bottom: .5em;
|
|
font-size: 1em;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#menu, #top-bar {
|
|
z-index: 100;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
#menu {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 24em;
|
|
height: 9em;
|
|
margin: 0 0 0 -12em;
|
|
transition-delay: 0;
|
|
transition: all 1.5s ease-in-out;
|
|
transform: translateY(-24em) translateZ(99999px);
|
|
}
|
|
|
|
#app[data-state="menu"] #menu {
|
|
opacity: 1;
|
|
transition-delay: 1.5s;
|
|
transform: translateY(0em) translateZ(99999px);
|
|
}
|
|
|
|
#logoimg {
|
|
margin: 3em 0 1em 0;
|
|
}
|
|
|
|
#logo {
|
|
z-index: 100;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 20em;
|
|
height: 4em;
|
|
margin-left: -10em;
|
|
margin-top: -4em;
|
|
font-size: 16px;
|
|
transform: translateZ(9999px);
|
|
perspective: 800;
|
|
transition: top 1.5s ease-in-out;
|
|
}
|
|
|
|
#app[data-state="game"] #logo {
|
|
transform: translateZ(-9999px) translateY(-40em);
|
|
}
|
|
|
|
.symbol {
|
|
position: relative;
|
|
float: left;
|
|
width: 4em;
|
|
height: 4em;
|
|
transition : transform 2s linear;
|
|
transform-style : preserve-3d;
|
|
transform-origin : 2em 2em;
|
|
transition: all 1.5s ease-in-out;
|
|
animation : fall 2s 1 ease-in-out;
|
|
}
|
|
|
|
.loading .symbol {
|
|
top: 0;
|
|
animation : rotateX 2s 1 ease-in-out;
|
|
}
|
|
|
|
.symbol:nth-child(1) { z-index: 1; animation-delay: 400ms; }
|
|
.symbol:nth-child(2) { z-index: 2; animation-delay: 500ms; }
|
|
.symbol:nth-child(3) { z-index: 3; animation-delay: 600ms; }
|
|
.symbol:nth-child(4) { z-index: 2; animation-delay: 700ms; }
|
|
.symbol:nth-child(5) { z-index: 1; animation-delay: 800ms; }
|
|
|
|
@keyframes rotateX {
|
|
0% { transform: rotateX(0deg); }
|
|
100% { transform: rotateX(360deg); }
|
|
}
|
|
|
|
@keyframes fall {
|
|
0% { transform: rotateX(0deg) translateY(0em); opacity: 1; }
|
|
100% { transform: rotateX(120deg) translateY(60em); opacity: 0; }
|
|
}
|
|
|
|
.symbol > div {
|
|
position: absolute;
|
|
width: 4em;
|
|
height: 4em;
|
|
transform-style: preserve-3d;
|
|
background-color : white;
|
|
}
|
|
|
|
.symbol div:nth-child(1) { transform : translateZ(2em); }
|
|
.symbol div:nth-child(2) { transform : rotateY(90deg) translateZ(2em); background-color : #A0A0A0; }
|
|
.symbol div:nth-child(3) { transform : rotateY(180deg) translateZ(2em); background-color : #D0D0D0; }
|
|
.symbol div:nth-child(4) { transform : rotateY(-90deg) translateZ(2em); background-color : #A0A0A0; }
|
|
.symbol div:nth-child(5) { transform : rotateX(-90deg) translateZ(2em) rotate(180deg); background-color: #E0E0E0; }
|
|
.symbol div:nth-child(6) { transform : rotateX(90deg) translateZ(2em); background-color : #C0C0C0; }
|
|
|
|
.symbol > div:first-child {
|
|
background-color: #101010;
|
|
border: .25em solid white;
|
|
}
|
|
|
|
.symbol > div:first-child:before,
|
|
.symbol > div:first-child:after {
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
|
|
.symbol:nth-child(1) > div:first-child:before {
|
|
top: .55em;
|
|
left: .55em;
|
|
width: 2.45em;
|
|
height: 2.45em;
|
|
transform: rotateZ(45deg);
|
|
background-color: white;
|
|
}
|
|
|
|
.symbol:nth-child(2) > div:first-child:before {
|
|
top: .05em;
|
|
left: .05em;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
background-color: #101010;
|
|
border-radius: 50%;
|
|
border: .45em solid white;
|
|
}
|
|
|
|
.symbol:nth-child(3) > div:first-child {
|
|
background-color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.symbol:nth-child(3) > div:first-child:before,
|
|
.symbol:nth-child(3) > div:first-child:after {
|
|
left: 1em;
|
|
width: 1em;
|
|
height: 6em;
|
|
background-color: #101010;
|
|
}
|
|
|
|
.symbol:nth-child(3) > div:first-child:before {
|
|
top: -1em;
|
|
transform: rotateZ(45deg);
|
|
}
|
|
|
|
.symbol:nth-child(3) > div:first-child:after {
|
|
top: -1.5em;
|
|
-webkit-transform: rotateZ(-45deg);
|
|
}
|
|
|
|
.symbol:nth-child(4) > div:first-child:before {
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
background-color: white;
|
|
}
|
|
|
|
#panes {
|
|
width: 72em;
|
|
transition: transform .75s ease-in-out;
|
|
}
|
|
|
|
.pane {
|
|
opacity: 0;
|
|
width: 24em;
|
|
height: 8em;
|
|
position: absolute;
|
|
background-color: transparent;
|
|
transition: opacity .45s ease-in-out!important;
|
|
}
|
|
|
|
.pane:nth-child(1) { transform: translateX(-80em); }
|
|
.pane:nth-child(2) { transform: translateX(0em); }
|
|
.pane:nth-child(3) { transform: translateX(80em); }
|
|
|
|
#app[data-menu="themes"] #panes { transform: translateX(80em); }
|
|
#app[data-menu="main"] #panes { transform: translateX(0em); }
|
|
#app[data-menu="about"] #panes { transform: translateX(-80em); }
|
|
|
|
#app[data-menu="main"] #main,
|
|
#app[data-menu="themes"] #themes,
|
|
#app[data-menu="about"] #about {
|
|
opacity: 1;
|
|
}
|
|
|
|
#top-bar {
|
|
opacity: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 46em;
|
|
height: 2em;
|
|
margin: 0 auto;
|
|
transform: translateY(-3em);
|
|
transition: all 1.5s ease-in-out;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
#app[data-state="game"] #top-bar {
|
|
opacity: 1;
|
|
transform: translateY(1em);
|
|
transition-delay: 1s;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
height: 2em;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1em;
|
|
line-height: 1.75em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
background-color: #303030;
|
|
transform: translateZ(1em);
|
|
transition: background-color .1s ease-out!important;
|
|
}
|
|
|
|
.btn.white {
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:active { background-color: #5A5A5A; cursor: pointer; }
|
|
|
|
.btn.white:hover,
|
|
.btn.white:active { background-color: #CACACA; }
|
|
|
|
#menu .btn {
|
|
width: 6em;
|
|
margin: 1em 0em;
|
|
}
|
|
|
|
#top-bar .btn {
|
|
width: 4em;
|
|
height: 3em;
|
|
padding: 0;
|
|
background-color: rgba(255,255,255,.01);
|
|
}
|
|
|
|
#undo { float: left; }
|
|
#open-menu { float: right; }
|
|
#undo:before { background-position: 0 0; }
|
|
#open-menu:before { background-position: -20px 0; }
|
|
|
|
#undo[data-state="inactive"] { display: none; }
|
|
|
|
#log {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 24em;
|
|
height: 3em;
|
|
margin-left: -12em;
|
|
color: #808080;
|
|
text-align: center;
|
|
line-height: 3em;
|
|
}
|
|
|
|
.btn.icon { background-color: rgba(255, 255, 255, 0); }
|
|
|
|
.btn.icon:before {
|
|
content: "";
|
|
width: 20px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
background-image: url("../img/icons.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 40px 16px;
|
|
}
|
|
|
|
#themes .btn { width: 8em; }
|
|
|
|
#menu .switch {
|
|
line-height: 2em;
|
|
margin-right: 1em;
|
|
transition: none!important;
|
|
}
|
|
|
|
#menu .switch:hover {
|
|
background-color: #CACACA;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
display:none;
|
|
}
|
|
|
|
input[type=checkbox] + label:after {
|
|
content: "off";
|
|
float: right;
|
|
display: block;
|
|
width: 3em;
|
|
height: 2em;
|
|
background-color: #999;
|
|
line-height: 2em;
|
|
text-align: center;
|
|
color: #FFF;
|
|
transition: none!important;
|
|
}
|
|
|
|
input[type=checkbox]:checked + label:after {
|
|
content: "on";
|
|
background-color: #333;
|
|
color: #FFF;
|
|
}
|
|
|
|
input[type=checkbox]:hover + label:after {
|
|
color: #FFF;
|
|
background-color: #666;
|
|
}
|
|
|
|
#themes-box {
|
|
width: 19em;
|
|
height: 3.5em;
|
|
margin: 0 2.6em;
|
|
}
|
|
|
|
.set-theme {
|
|
float: left;
|
|
width: 3.375em;
|
|
height: 3.375em;
|
|
position: relative;
|
|
margin: 0 .65em;
|
|
}
|
|
|
|
.set-theme:hover { cursor: pointer; background: rgba(255,255,255,.3); }
|
|
.set-theme:hover .cube,
|
|
.set-theme:active .cube { transform: rotateX(146deg) rotateY(45deg) translateY(0.1em) translateX(3em); }
|
|
#app[data-theme="classic"] .set-theme[data-theme="classic"],
|
|
#app[data-theme="marble"] .set-theme[data-theme="marble"],
|
|
#app[data-theme="flat"] .set-theme[data-theme="flat"],
|
|
#app[data-theme="wireframe"] .set-theme[data-theme="wireframe"] {
|
|
background: rgba(255,255,255,1);
|
|
}
|
|
|
|
.cube,
|
|
.cube:before,
|
|
.cube:after {
|
|
content: "";
|
|
width: 2em;
|
|
height: 2em;
|
|
background-color: #A0A0A0;
|
|
background-size: 235%;
|
|
transition: transform .1s ease-in-out!important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cube {
|
|
position: relative;
|
|
margin-left: -2.15em;
|
|
box-shadow: inset 0 0 0 3em rgba(0,0,0,.2);
|
|
transform: rotateX(156deg) rotateY(45deg) translateY(-.15em) translateX(3em);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.cube:before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 2em;
|
|
transform: rotateX(90deg);
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.cube:after {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
box-shadow: inset 0 0 0 3em rgba(0,0,0,.5);
|
|
transform: rotateY(90deg);
|
|
transform-origin: 100% 0;
|
|
}
|
|
|
|
#overlay {
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
opacity: 0;
|
|
transition: opacity 1.5s ease-in-out!important;
|
|
transform: translateZ(9999px);
|
|
}
|
|
|
|
.loading #overlay {
|
|
opacity: 1;
|
|
background-image: url(../img/ajax-loader.gif);
|
|
background-position: 50% 60%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#app[data-menu="about"] #overlay {
|
|
z-index: 99;
|
|
opacity: .75;
|
|
}
|
|
|
|
#app[data-state="game"] #overlay {
|
|
width: 0%;
|
|
height: 0%;
|
|
}
|
|
|
|
#about p { line-height: 1.5em; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- borders textures */
|
|
|
|
thead th:first-child { background-position: left top; background-size: 332% auto; }
|
|
thead th { background-position: center top; background-size: 250% auto; }
|
|
thead th:last-child { background-position: right top; background-size: 332% auto; }
|
|
tbody th:first-child { background-position: left center; background-size: auto 250%; }
|
|
tbody th:last-child { background-position: right center; background-size: auto 250%; }
|
|
tfoot th:first-child { background-position: left bottom; background-size: 332% auto; }
|
|
tfoot th { background-position: center bottom; background-size: 250% auto; }
|
|
tfoot th:last-child { background-position: right bottom; background-size: 332% auto; }
|
|
|
|
.square, .sphere, #board:after, #frame:after, #frame:before { background-size: 100% 100%; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- classic */
|
|
|
|
#app[data-theme="classic"] { background-color: #E5E3DF; color: #303132; }
|
|
#app[data-theme="classic"] a { color: #404040; }
|
|
#app[data-theme="classic"] #overlay { background-color: #E5E3DF; }
|
|
#app[data-theme="classic"] #scene { background: radial-gradient(center, ellipse cover, #FFF 25%, #E5E3DF 72%); }
|
|
#app[data-theme="classic"][data-frame="off"] #frame,
|
|
#app[data-theme="classic"][data-frame="off"] #board:after,
|
|
#app[data-theme="classic"][data-frame="off"] #frame:after,
|
|
#app[data-theme="classic"][data-frame="off"] #frame:before { background-color: #A28157; }
|
|
#app[data-theme="classic"][data-frame="on"] #frame,
|
|
#app[data-theme="classic"][data-frame="on"] #board:after,
|
|
#app[data-theme="classic"][data-frame="on"] #frame:after,
|
|
#app[data-theme="classic"][data-frame="on"] #frame:before { background-color: #303132; }
|
|
#app[data-theme="classic"] .square { background-color: #212121; }
|
|
#app[data-theme="classic"] tbody tr:nth-child(odd)
|
|
.square:nth-child(even),
|
|
#app[data-theme="classic"] tbody tr:nth-child(even)
|
|
.square:nth-child(odd) { background-color: #CF9269; }
|
|
#app[data-theme="classic"] .black .poly > div,
|
|
#app[data-theme="classic"] .black .poly .sphere { background-color: #303030; }
|
|
#app[data-theme="classic"] .white .poly > div,
|
|
#app[data-theme="classic"] .white .poly .sphere { background-color: #C19666; }
|
|
#app[data-theme="classic"] .white.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="classic"] .white.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #F2BD7D; }
|
|
#app[data-theme="classic"] .white.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="classic"] .white.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #F2BD7D; }
|
|
#app[data-theme="classic"] .black.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="classic"] .black.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #434343; }
|
|
#app[data-theme="classic"] .black.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="classic"] .black.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #434343; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- classic textures */
|
|
|
|
#app[data-theme="classic"] th { background-image: url(../img/classic-frame.png); }
|
|
#app[data-theme="classic"][data-frame="off"] #board:after,
|
|
#app[data-theme="classic"][data-frame="off"] #frame:after,
|
|
#app[data-theme="classic"][data-frame="off"] #frame:before
|
|
{ background-image: url(../img/classic-frame-border-off.png); }
|
|
#app[data-theme="classic"][data-frame="on"] #board:after,
|
|
#app[data-theme="classic"][data-frame="on"] #frame:after,
|
|
#app[data-theme="classic"][data-frame="on"] #frame:before
|
|
{ background-image: url(../img/classic-frame-border.png); }
|
|
#app[data-theme="classic"] .square { background-image: url(../img/classic-square-black.png) }
|
|
#app[data-theme="classic"] .white .poly > div,
|
|
.set-theme[data-theme="classic"] .cube,
|
|
.set-theme[data-theme="classic"] .cube:before,
|
|
.set-theme[data-theme="classic"] .cube:after { background-image: url(../img/classic-piece-white.png); }
|
|
#app[data-theme="classic"] .black .poly > div { background-image: url(../img/classic-piece-black.png); }
|
|
#app[data-theme="classic"] .white .poly .sphere { background-image: url(../img/classic-sphere-white.png); }
|
|
#app[data-theme="classic"] .black .poly .sphere { background-image: url(../img/classic-sphere-black.png); }
|
|
|
|
#app[data-theme="classic"] tbody tr:nth-child(odd)
|
|
.square:nth-child(even),
|
|
#app[data-theme="classic"] tbody tr:nth-child(even)
|
|
.square:nth-child(odd) { background-image: url(../img/classic-square-white.png); }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- marble */
|
|
|
|
#app[data-theme="marble"] th { background-color: #303030; }
|
|
#app[data-theme="marble"][data-frame="off"] #frame,
|
|
#app[data-theme="marble"][data-frame="off"] #board:after,
|
|
#app[data-theme="marble"][data-frame="off"] #frame:after,
|
|
#app[data-theme="marble"][data-frame="off"] #frame:before { background-color: #B0B0B0; }
|
|
#app[data-theme="marble"][data-frame="on"] #frame,
|
|
#app[data-theme="marble"][data-frame="on"] #board:after,
|
|
#app[data-theme="marble"][data-frame="on"] #frame:after,
|
|
#app[data-theme="marble"][data-frame="on"] #frame:before { background-color: #202020; }
|
|
#app[data-theme="marble"] .square { background-color: #404040; }
|
|
#app[data-theme="marble"] tbody tr:nth-child(odd)
|
|
.square:nth-child(even),
|
|
#app[data-theme="marble"] tbody tr:nth-child(even)
|
|
.square:nth-child(odd) { background-color: #FFF; }
|
|
#app[data-theme="marble"] .black .poly > div,
|
|
#app[data-theme="marble"] .black .poly .sphere { background-color: #404040; }
|
|
#app[data-theme="marble"] .white .poly > div,
|
|
#app[data-theme="marble"] .white .poly .sphere { background-color: #FFF; }
|
|
#app[data-theme="marble"] .white.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="marble"] .white.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #EAE5E0; }
|
|
#app[data-theme="marble"] .white.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="marble"] .white.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #EAE5E0; }
|
|
#app[data-theme="marble"] .black.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="marble"] .black.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #565453; }
|
|
#app[data-theme="marble"] .black.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="marble"] .black.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #565453; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- marble textures */
|
|
|
|
#app[data-theme="marble"] #scene { background: url(../img/back.jpg) no-repeat center center black; background-size: cover;}
|
|
#app[data-theme="marble"] th { background-image: url(../img/marble-frame.png); }
|
|
#app[data-theme="marble"][data-frame="off"] #board:after,
|
|
#app[data-theme="marble"][data-frame="off"] #frame:after,
|
|
#app[data-theme="marble"][data-frame="off"] #frame:before
|
|
{ background-image: url(../img/marble-frame-border-off.png); }
|
|
#app[data-theme="marble"][data-frame="on"] #board:after,
|
|
#app[data-theme="marble"][data-frame="on"] #frame:after,
|
|
#app[data-theme="marble"][data-frame="on"] #frame:before
|
|
{ background-image: url(../img/marble-frame-border.png); }
|
|
#app[data-theme="marble"] .square { background-image: url(../img/marble-square-black.png) }
|
|
#app[data-theme="marble"] .white .poly > div,
|
|
.set-theme[data-theme="marble"] .cube,
|
|
.set-theme[data-theme="marble"] .cube:before,
|
|
.set-theme[data-theme="marble"] .cube:after { background-image: url(../img/marble-piece-white.png); }
|
|
#app[data-theme="marble"] .black .poly > div { background-image: url(../img/marble-piece-black.png); }
|
|
#app[data-theme="marble"] .white .poly .sphere { background-image: url(../img/marble-sphere-white.png); }
|
|
#app[data-theme="marble"] .black .poly .sphere { background-image: url(../img/marble-sphere-black.png); }
|
|
#app[data-theme="marble"] tbody tr:nth-child(odd)
|
|
.square:nth-child(even),
|
|
#app[data-theme="marble"] tbody tr:nth-child(even)
|
|
.square:nth-child(odd) { background-image: url(../img/marble-square-white.png); }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- flat */
|
|
|
|
#app[data-theme="flat"] { background-color: #E5E3DF; color: #303132; }
|
|
#app[data-theme="flat"] a { color: #404040; }
|
|
#app[data-theme="flat"] #overlay { background-color: #E5E3DF; }
|
|
#app[data-theme="flat"] #scene { background: radial-gradient(center, ellipse cover, #FFF 25%, #E5E3DF 72%); }
|
|
#app[data-theme="flat"] #frame,
|
|
#app[data-theme="flat"] #board:after,
|
|
#app[data-theme="flat"] #frame:after,
|
|
#app[data-theme="flat"] #frame:before { background-color: #B7B7B4; }
|
|
#app[data-theme="flat"] .square { background-color: #C6C5C3; }
|
|
#app[data-theme="flat"] tbody tr:nth-child(odd) .square:nth-child(even),
|
|
#app[data-theme="flat"] tbody tr:nth-child(even) .square:nth-child(odd) { background-color: #E0DFDD; }
|
|
#app[data-theme="flat"] table span { color: #525150; }
|
|
#app[data-theme="flat"] th { background-color: #E0DFDD; }
|
|
#app[data-theme="flat"] .white .poly > div,
|
|
.set-theme[data-theme="flat"] .cube,
|
|
.set-theme[data-theme="flat"] .cube:before,
|
|
.set-theme[data-theme="flat"] .cube:after { background-color: #00A2FF; }
|
|
#app[data-theme="flat"] .black .poly > div { background-color: #FF432F; }
|
|
#app[data-theme="flat"] .white .poly .sphere { background: -webkit-radial-gradient(center, ellipse cover, rgba(0,162,255,1) 30%,rgba(0,89,141,1) 100%) 0em -1em; }
|
|
#app[data-theme="flat"] .black .poly .sphere { background: -webkit-radial-gradient(center, ellipse cover, rgba(255,67,47,1) 30%,rgba(141,36,25,1) 100%) 0em -1em; }
|
|
#app[data-theme="flat"] .white.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="flat"] .white.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #00A2FF; }
|
|
#app[data-theme="flat"] .white.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="flat"] .white.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #00A2FF; }
|
|
#app[data-theme="flat"] .black.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="flat"] .black.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid #FF432F; }
|
|
#app[data-theme="flat"] .black.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="flat"] .black.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid #FF432F; }
|
|
|
|
/* ---------------------------------------------------------------------------------------------------- wireframe */
|
|
|
|
#app[data-theme="wireframe"] #scene { background: radial-gradient(center, ellipse cover, #1D414D 0%,#000000 70%); }
|
|
#app[data-theme="wireframe"] th { background-color: rgba(17,41,48,.6) }
|
|
#app[data-theme="wireframe"] #frame { background-color: #001B20; }
|
|
#app[data-theme="wireframe"] #board:after,
|
|
#app[data-theme="wireframe"] #frame:after,
|
|
#app[data-theme="wireframe"] #frame:before { background-color: #011E24; border: 1px solid #007385; opacity: .4 }
|
|
#app[data-theme="wireframe"] .square { background-color: rgba(17,41,48,.0); }
|
|
#app[data-theme="wireframe"] tbody tr:nth-child(odd) .square:nth-child(even),
|
|
#app[data-theme="wireframe"] tbody tr:nth-child(even) .square:nth-child(odd) { background-color: rgba(17,41,48,.6); }
|
|
#app[data-theme="wireframe"] .white .poly > div { background-color: #022A36; border: 1px solid #35C2D3;
|
|
box-shadow: inset 0 0 4em -1em #35C2D3; opacity: .5; }
|
|
.set-theme[data-theme="wireframe"] .cube,
|
|
.set-theme[data-theme="wireframe"] .cube:before,
|
|
.set-theme[data-theme="wireframe"] .cube:after { background-color: #022A36; border: 0px solid #35C2D3;
|
|
box-shadow: inset 0 0 .5em .2em #35C2D3; opacity: .8; }
|
|
#app[data-theme="wireframe"] .black .poly > div { background-color: #022A36; border: 1px solid #FFDD1D;
|
|
box-shadow: inset 0 0 4em -1em #FFDD1D; opacity: .5; }
|
|
#app[data-theme="wireframe"] .white .poly .lt,
|
|
#app[data-theme="wireframe"] .white .poly .rt { border-right: 3px solid #35C2D3; }
|
|
#app[data-theme="wireframe"] .white .poly .bk,
|
|
#app[data-theme="wireframe"] .white .poly .ft { border-top: 3px solid #35C2D3; }
|
|
#app[data-theme="wireframe"] .black .poly .lt,
|
|
#app[data-theme="wireframe"] .black .poly .rt { border-right: 3px solid #FFDD1D; }
|
|
#app[data-theme="wireframe"] .black .poly .bk,
|
|
#app[data-theme="wireframe"] .black .poly .ft { border-top: 3px solid #FFDD1D; }
|
|
#app[data-theme="wireframe"] .black .poly .sphere { background-color: #1D414B; }
|
|
#app[data-theme="wireframe"] .white .poly .sphere { background-color: #1D414B; }
|
|
|
|
#app[data-theme="wireframe"] .white.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="wireframe"] .white.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid rgba(53,194,211,.4); top: -1em; left: -.18em;}
|
|
#app[data-theme="wireframe"] .white.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="wireframe"] .white.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid rgba(53,194,211,.4); bottom: -1em; right: -.18em;}
|
|
#app[data-theme="wireframe"] .black.bishop .rectangle.a .tp:before,
|
|
#app[data-theme="wireframe"] .black.bishop .rectangle.b .tp:before { border-bottom: 1.1em solid rgba(255,221,29,.4); top: -1em; left: -.18em;}
|
|
#app[data-theme="wireframe"] .black.bishop .rectangle.a .tp:after,
|
|
#app[data-theme="wireframe"] .black.bishop .rectangle.b.prim .tp:after { border-top: 1.1em solid rgba(255,221,29,.4); bottom: -1em; right: -.18em;}
|
|
|
|
/* ------------------------------------------------------- Responsive board */
|
|
|
|
@media screen and (min-width: 48em), screen and (min-height: 48em) {
|
|
#app[data-frame="off"] { font-size: 80px; }
|
|
#app[data-frame="on"] { font-size: 70px; }
|
|
}
|
|
@media screen and (max-width: 48em), screen and (max-height: 48em) {
|
|
#app[data-frame="off"] { font-size: 70px; }
|
|
#app[data-frame="on"] { font-size: 60px; }
|
|
#top-bar { margin-top: -.75em; }
|
|
}
|
|
@media screen and (max-width: 42em), screen and (max-height: 42em) {
|
|
#app[data-frame="off"] { font-size: 60px; }
|
|
#app[data-frame="on"] { font-size: 50px; }
|
|
#container { top: 55%; }
|
|
}
|
|
@media screen and (max-width: 34em), screen and (max-height: 34em) {
|
|
#app[data-frame="off"] { font-size: 50px; }
|
|
#app[data-frame="on"] { font-size: 40px; }
|
|
}
|
|
@media screen and (max-width: 26em), screen and (max-height: 26em) {
|
|
#app[data-frame="off"] { font-size: 40px; }
|
|
#app[data-frame="on"] { font-size: 30px; }
|
|
}
|
|
@media screen and (max-width: 20em), screen and (max-height: 20em) {
|
|
#app[data-frame="off"] { font-size: 35px; }
|
|
}
|
|
@media screen and (max-height: 36em) {
|
|
#logoimg { margin: 1em 0 1em 0; }
|
|
}
|
|
@media screen and (max-height: 32em) {
|
|
#app[data-state="menu"] #overlay {
|
|
z-index: 99;
|
|
opacity: .85;
|
|
}
|
|
#about h1 { font-size: 1em; }
|
|
#about h2 { font-size: .85em; }
|
|
#about p { font-size: .75em; }
|
|
}
|
|
@media screen and (max-width: 24em), screen and (max-height : 24em) {
|
|
h1 { font-size: 1.5em; }
|
|
h2 { font-size: 1em; }
|
|
#logoimg { margin: 2em 0 1em 0; }
|
|
#logo { font-size: 12px }
|
|
.loading #overlay { background-position: 50% 80%; }
|
|
} |