refactor: split page & game css
This commit is contained in:
parent
554cb26ad2
commit
e2cac27a25
5 changed files with 35 additions and 112 deletions
|
|
@ -9,6 +9,7 @@
|
||||||
<title>Minesweeper</title>
|
<title>Minesweeper</title>
|
||||||
|
|
||||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||||
|
<link rel="stylesheet" href="./main.css" >
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="body-wrapper">
|
<div id="body-wrapper">
|
||||||
|
|
@ -17,13 +18,7 @@
|
||||||
<br />
|
<br />
|
||||||
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Want to update how people show their support
|
|
||||||
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Buy me a coffee', '#29abe0', 'ayoayco');kofiwidget2.draw();</script>
|
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="./src/main.js"></script>
|
<script type="module" src="./src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
25
main.css
Normal file
25
main.css
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* helpers */
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.clear-both {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: black;
|
||||||
|
color: #DDDDDD;
|
||||||
|
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#body-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import './index.css'
|
import './minesweeper.css'
|
||||||
import './modules/loading/loading.css'
|
import './modules/loading/loading.css'
|
||||||
import '../public/favicon.ico'
|
import '../public/favicon.ico'
|
||||||
import Minesweeper from './minesweeper.js'
|
import Minesweeper from './minesweeper.js'
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,3 @@
|
||||||
/*
|
|
||||||
initial code from: https://codepen.io/101Computing/pen/wEbEqx
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* helpers */
|
|
||||||
.float-left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.float-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.clear-both {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: black;
|
|
||||||
color: #DDDDDD;
|
|
||||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
background: -webkit-linear-gradient(90deg,#ff8a00,#e52e71);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
#grid {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
@ -78,10 +42,6 @@ h1 {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
#0000ff, #008100, #ff1300, #000083, #810500, #2a9494, #000000, #808080;
|
|
||||||
*/
|
|
||||||
|
|
||||||
#grid TR TD[data-value="1"] {
|
#grid TR TD[data-value="1"] {
|
||||||
color: #0000ff !important;
|
color: #0000ff !important;
|
||||||
}
|
}
|
||||||
|
|
@ -150,66 +110,15 @@ button {
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The Modal (background) */
|
h1 {
|
||||||
.modal {
|
text-align: center;
|
||||||
position: fixed; /* Stay in place */
|
font-size: 24px;
|
||||||
z-index: 1; /* Sit on top */
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%; /* Full width */
|
|
||||||
height: 100%; /* Full height */
|
|
||||||
overflow: auto; /* Enable scroll if needed */
|
|
||||||
background-color: rgb(0,0,0); /* Fallback color */
|
|
||||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal Content/Box */
|
|
||||||
.modal-content {
|
|
||||||
background: #efffef;
|
|
||||||
margin: 5% auto 0; /* 15% from the top and centered */
|
|
||||||
padding: 20px;
|
|
||||||
border: 5px solid #c0e0d0;
|
|
||||||
width: 60%; /* Could be more or less, depending on screen size */
|
|
||||||
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 7px;
|
|
||||||
line-height: 36px!important;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-btn {
|
|
||||||
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 7px;
|
|
||||||
line-height: 36px!important;
|
|
||||||
min-width: 150px;
|
|
||||||
display: inline-block!important;
|
|
||||||
background-color: #29abe0;
|
|
||||||
padding: 2px 12px !important;
|
|
||||||
text-align: center !important;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 0 none #fff !important;
|
|
||||||
font-family: 'Quicksand',Helvetica,Century Gothic,sans-serif !important;
|
|
||||||
text-decoration: none;
|
|
||||||
text-shadow: none;
|
|
||||||
font-weight: 700!important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.announcement-action {
|
|
||||||
font-size: normal;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
text-transform: uppercase;
|
||||||
|
background: -webkit-linear-gradient(90deg,#ff8a00,#e52e71);
|
||||||
#body-wrapper {
|
-webkit-background-clip: text;
|
||||||
display: inline-block;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;
|
||||||
|
|
||||||
.btn-container {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** mobile **/
|
/** mobile **/
|
||||||
|
|
@ -222,9 +131,5 @@ p.announcement-action {
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
.btn-container {
|
|
||||||
position: inherit;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
export * from './dialog/dialog.js'
|
|
||||||
export * from './leader-board/leader-board.js'
|
export * from './leader-board/leader-board.js'
|
||||||
export * from './loading/loading.js'
|
export * from './loading/loading.js'
|
||||||
export * from './logger/logger.js'
|
export * from './logger/logger.js'
|
||||||
export * from './storage/storage.js'
|
export * from './storage/storage.js'
|
||||||
export * from './timer/timer.js'
|
export * from './timer/timer.js'
|
||||||
export * from './user/user.js'
|
export * from './user/user.js'
|
||||||
export * from './grid/grid.js'
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue