diff options
| author | CoreChg <corechg@gmail.com> | 2018-09-21 18:09:27 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-09-21 18:09:27 -0400 |
| commit | 6f9e0a05b80afb0d1cf1b5b0db21bf8d1caa1cc8 (patch) | |
| tree | 69edbdaa232b40818dee72e585165c6b1ebaff06 /mines.css | |
| parent | 985dd6e9c26b37201939ccb0de54ee8a7ebf5f3b (diff) | |
Version 1.0
Initial release
Diffstat (limited to 'mines.css')
| -rw-r--r-- | mines.css | 176 |
1 files changed, 176 insertions, 0 deletions
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 |