diff options
| author | Kyle Gunger <corechg@gmail.com> | 2020-02-27 16:15:26 -0500 |
|---|---|---|
| committer | Kyle Gunger <corechg@gmail.com> | 2020-02-27 16:15:26 -0500 |
| commit | 00c14a7cb122292d7ec87a817a9a3eb169ee37d9 (patch) | |
| tree | e58bbd30693e2147f202a921cfe540c0d20e9644 /mines/mines.css | |
| parent | 06f962066c57818232cc8d59ef49e879043418df (diff) | |
Update home page font
Diffstat (limited to 'mines/mines.css')
| -rw-r--r-- | mines/mines.css | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/mines/mines.css b/mines/mines.css new file mode 100644 index 0000000..810e74e --- /dev/null +++ b/mines/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: 50%;
+ margin: 50px;
+}
+
+input, select, label[for], button{
+ padding: 5px;
+ margin: 5px;
+ background-color: #ddd;
+ border: none;
+ border-radius: 5px;
+ transition-duration: 0.2s;
+ box-sizing: border-box;
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ font-size: medium;
+}
+
+input:hover, select:hover, label[for]:hover, button:hover{
+ background-color: #bbb;
+}
+
+input:focus, select:focus, label[for]:focus, button:focus{
+ background-color: #bdf;
+ border: none;
+}
+
+input:active, select:active, label[for]:active, button:active{
+ background-color: #bdf;
+ border: none;
+}
+
+input[type="file"]{
+ width: 0;
+ height: 0;
+
+ padding: 0;
+ margin: 0;
+
+ border-radius: 0;
+ opacity: 0;
+}
+
+h1{
+ width: calc(50% - 70px);
+
+ display: inline;
+
+ background-color: #ddd;
+
+ border-radius: 50px;
+}
+
+h1#mines{
+ float: left;
+}
+
+h1#time{
+ float: right;
+}
+
+/* Table */
+
+table{
+ display: inline-table;
+ background-color: #ddd;
+ border-radius: 10px;
+ padding: 5px;
+}
+
+td{
+ width: 45px;
+ height: 45px;
+
+ margin: 5px;
+ padding: 2px;
+
+ background-color: #aaa;
+
+ box-sizing: border-box;
+
+ border-radius: 25%;
+
+ transition-duration: 0.2s;
+
+ cursor: pointer;
+}
+
+td.wt:hover{
+ background-color: #ccc;
+}
+
+td.wt:active{
+ background-color: #999;
+}
+
+td.chkd{
+ background-color: #777;
+ cursor: default;
+}
+
+/* Main button */
+
+button#circle{
+ padding: 35px;
+ border: none;
+ border-radius: 50%;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+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 |