From 00c14a7cb122292d7ec87a817a9a3eb169ee37d9 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 27 Feb 2020 16:15:26 -0500 Subject: Update home page font --- mines/mines.css | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 mines/mines.css (limited to 'mines/mines.css') 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 -- cgit v1.2.3