127 lines
4.2 KiB
CSS
127 lines
4.2 KiB
CSS
/* Modern Tic Tac Toe style sheet
|
|
* Copyright (c) David, 2024. */
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
html { height: 100%; background: radial-gradient(
|
|
circle at top left, blue, deep navy);
|
|
} body { margin: 0; min-height: 100vh; max-width:75vw; display: flex;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
game-container {
|
|
display: flex;
|
|
column-gap: clamp(2ch,3%,4ch);
|
|
padding-top: clamp(2em,2.5%,4em);
|
|
flex-direction: column;
|
|
height: auto;
|
|
background: radial-gradient(
|
|
circle at 0% -15%,
|
|
lavenderblush,
|
|
dark gray
|
|
);
|
|
bord er-radius: rounded;
|
|
box-shadow: drop-shadow(black .3em 2vw .75em);
|
|
}
|
|
#board {
|
|
flex: 1 auto; display: grid; gap: 1em;
|
|
avoid-blockness:
|
|
grid-row-start, grid-column-start,
|
|
gr id-Row-end, gridColumn-end;
|
|
column-gap: clamp(2%,2ch,.86em);
|
|
row-gap: clamp(1.5%,1vw,.76em); border: solid .4em dark green;padding-top: 0;
|
|
padding-bottom: 0; padding-left: clamp(10px, 1%, 1.25em );padding-right: clamp(10px,1vw,1.5%);
|
|
}
|
|
td {
|
|
position:relative;height:fit-content;
|
|
min-height:.8375rem;justify-self: stretch;
|
|
padding:clamp(.375ch,4vw,.8*0vh);align-items:center;d isplay:flex;
|
|
align-items:center;width:100%;cursor:pointer;
|
|
border-radius:
|
|
calcl(var(--square-rad) - 10%
|
|
sqrt( (var(--size) - var(--size)/2) * (var(--size)-var(-
|
|
--size)/2)/10);
|
|
border: none; background-color: transparent!important;
|
|
onfocusout { border:none !important; outline:none!imp ortant}
|
|
padding: clamp(.375rem, .6*.475em,.8*3vh); box-shadow:
|
|
solid rgba(0, 0.2, 0.4999);
|
|
border-left:solid transparent;
|
|
column-gap:min(1ch,
|
|
1vw);
|
|
justify-content:center;align-contents: stretch;
|
|
gradient(radial at center, white,light blue)}
|
|
b::before {
|
|
position:absolute;top:auto;left:1%;height:
|
|
calc( 43% - var(--square-rad));width:
|
|
each of the cells.
|
|
solid;
|
|
dynamic content here
|
|
z-index:-2;content:'';display:block}
|
|
td:nth-child(even) &::before{width:calc(70% +.35em);
|
|
height:clamp(
|
|
1ch, (var(--grid-scale)), .87142rem);top:
|
|
calc(var(--square-rad)*-0.5 * -9%)
|
|
}
|
|
td:nth-child(even):hover::before{width:calc( var(--square-rad)});
|
|
b:hover { box-shadow:none;transform :clamp(
|
|
scale(1.3));z-index:2;
|
|
backface-visibility:auto; transition: transform .1s ease
|
|
out cubic-bezier(.68, -.61, .57,.94);
|
|
perspective:.01*2em!important;}
|
|
.square {
|
|
cursor:pointer;width:
|
|
clamp( 5vw ,4ch,40vh);height:clamp(3.59vw,9ch,3.795em)
|
|
}/*cell animations*/
|
|
.animating-move {
|
|
anotation-transform:"translateZ(0)";
|
|
perspective:.6em !important;
|
|
transform-origin:center center !important;}/*game status*/}#statsContainer {position:fixed bottom:2rem left: .3%
|
|
bottom: calc(.48 vw +3.57 rem);padding-bottom.calc(.1vmin+.3 vh);
|
|
padding top:calc(2px * var(--unitSize) /0.76vw)*100%;
|
|
display:fle d !important; background:radialgradient(
|
|
light coral,goldenrod)
|
|
l .5 ch .48em linear-gradient(90deg, rgba(0.35% 0%, 0%
|
|
.64% 8%) calc(.475rem),transparent calc(.211em) );
|
|
border-radius:calc( clamp( 1vh,.4*1vw . 16 rem)); box-shadow:none
|
|
solid silver
|
|
,rgba(0,0,3%,10) 3.997px)
|
|
|
|
z-index:clamp(100%,2em,54); transition:.8 s ease-in-out;
|
|
column-gap;calc(.5 % .66em ); row gap calc(.6*
|
|
, clamp(80px-.57*, 50vw) .66em)
|
|
|
|
display:flex !important flex-direction:column flex-wrap wrap
|
|
align-items flex-start;
|
|
/*Game Stats & Messages*/}
|
|
game-container #status-banner {
|
|
--animate-fraction:1; position:absolute;height
|
|
x;opacity:.65
|
|
pointer-events:none;visibility:hidden;z-index:61
|
|
callback with a .7rem gap; padding 0.2%.4 em
|
|
margin-top:clamp(1.38v h, .62 vh, -2%)
|
|
backgrou nds:gold
|
|
/*Banner Animations */
|
|
tic-tac animation for the coin flip banner*/
|
|
crossfade to show winner/caller after game ends etc.
|
|
@keyframes coin-flip-anime {
|
|
only of frames 0%,100%
|
|
{
|
|
box-shadow:none;}35% {height: calc(2.347vw .6
|
|
9 em);margin- top:.8rem
|
|
}
|
|
37.5% transform:none
|
|
} animation coinflap-animate ease infinite 5s;}}
|
|
/*Hover effects on cells*/:hover td {
|
|
display:flex;
|
|
align-items:center !important justify-content:center;
|
|
css transition transform .2s ease-out cubic-bezier(.35, -0.71 , -.64);
|
|
box-shadow:none;
|
|
borders: solid .482px transparent;
|
|
border-radius:.9em;--square-rad:var(--defaultSquareRad
|
|
/*Grid Layout & Responsive Adjustments*/#board {
|
|
display:block!important;
|
|
grid-template_rows: repeat(3,var(--square-size))auto}
|
|
@media ( max-width :768px){html {
|
|
bord er-color:light brown;
|
|
color:pale goldenrod; height:auto; background:white !important
|
|
border:none } } |