Created
May 15, 2013 11:58
-
-
Save kizu/5583472 to your computer and use it in GitHub Desktop.
ololo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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 | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"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