From 6f9e0a05b80afb0d1cf1b5b0db21bf8d1caa1cc8 Mon Sep 17 00:00:00 2001 From: CoreChg Date: Fri, 21 Sep 2018 18:09:27 -0400 Subject: Version 1.0 Initial release --- mines.css | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 mines.css (limited to 'mines.css') diff --git a/mines.css b/mines.css new file mode 100644 index 0000000..552a4e4 --- /dev/null +++ b/mines.css @@ -0,0 +1,176 @@ +*{ + font-family: 'Open Sans', sans-serif; +} + +body{ + text-align: center; +} + +div.selector, div.game{ + display: inline-block; +} + +div.selector{ + text-align: right; +} + +div.game{ + min-width: 25%; + margin-top: 50px; +} + +input{ + padding: 5px; + margin: 5px; + background-color: #eee; + border: none; + border-radius: 5px; + transition-duration: 0.2s; +} + +input:hover{ + background-color: #ccc; +} + +input:focus{ + background-color: #cef; + border: none; +} + +input:active{ + background-color: #cef; + border: none; +} + +button{ + padding: 5px; + margin: 5px; + background-color: #eee; + border: none; + border-radius: 5px; + transition-duration: 0.2s; +} + +button:hover{ + background-color: #ccc; +} + +button:active{ + background-color: #cef; + border: none; +} + +h1{ + width: calc(50% - 70px); + + display: inline; + + background-color: #eee; + + border-radius: 25%; +} + +h1#mines{ + float: left; +} + +h1#time{ + float: right; +} + +/* Table */ + +table{ + display: inline-table; + background-color: #ddd; + border-radius: 10px; + padding: 5px; +} + +td{ + width: 35px; + height: 35px; + + margin: 5px; + padding: 2px; + + background-color: #bbb; + + box-sizing: border-box; + + border-radius: 25%; + + transition-duration: 0.2s; + + cursor: default; +} + +td.wt:hover{ + background-color: #777; +} + +td.wt:active{ + background-color: #999; +} + +td.chkd{ + background-color: #888; +} + +/* Main button */ + +button#circle{ + padding: 35px; + border: none; + border-radius: 50%; + box-sizing: border-box; +} + +button#circle:active{ + border: none; +} + +button#circle.win{ + background-color: #0f4; +} + +button#circle.win:hover{ + background-color: #0d2; +} + +button#circle.lose{ + background-color: #f33; +} + +button#circle.lose:hover{ + background-color: #d11; +} + +button#circle.ingame{ + background-color: #fa0; + animation: 1s infinite alternate shrink; +} + +button#circle.ingame:hover{ + background-color: #d80; +} + +button#circle.loading{ + background-color: #0af; + animation: 1s infinite alternate shrink; +} + +button#circle.loading:hover{ + background-color: #08d; +} + +@keyframes shrink{ + from{ + padding: 35px; + margin-top: 0px; + } + to{ + padding: 15px; + margin-top: 20px + } +} \ No newline at end of file -- cgit v1.2.3