Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Created May 15, 2013 11:58
Show Gist options
  • Save kizu/5583472 to your computer and use it in GitHub Desktop.
Save kizu/5583472 to your computer and use it in GitHub Desktop.
Download ZIP
ololo
Raw
dabblet.css
/* ololo */
.board {
position: relative;
font-size: 27px;
width: 19em;
margin: 3em auto;
background: linear-gradient(transparent 0.46em,#aaa 0.5em,transparent 0.5em), linear-gradient(90deg, transparent 0.46em,#aaa 0.5em,transparent 0.5em);
background-size: 1em 1em;
background-repeat: repeat;
box-shadow: inset 0.5em 0 #FFF, inset -0.5em 0 #FFF, inset 0 0.5em #FFF, inset 0 -0.5em #FFF;
}
.board:after {
content: "";
display: table;
clear: both;
}
.stone {
-webkit-appearance: none;
float: left;
width: 1em;
height: 1em;
margin: 0;
font-size: 1em;
background: #000;
border-radius: 50%;
transform: scale(0.9);
opacity: 0;
cursor: pointer;
}
.stone:hover {
opacity: 0.35;
}
.stone:checked {
opacity: 1;
}
.win {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.8);
text-align: center;
line-height: 19em;
pointer-events: none;
display: none;
}
/*
Horizontal
Diagonal tr-bl
Vertical
Diagonal tl-br
*/
.stone:checked + .stone:checked + .stone:checked + .stone:checked + .stone:checked ~ .win,
.stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked ~ .win,
.stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked ~ .win,
.stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked +*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+ .stone:checked ~ .win {
display: block;
}
/* TODO:
1. More browser support: add labels between inputs
2. Move to GitHub
3. Styles for goban
4. Find out how to switch sides
*/
Raw
dabblet.html
<div class="board">
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<input class="stone" type="checkbox"/>
<div class="win">Win</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment