142 lines
2.3 KiB
CSS
142 lines
2.3 KiB
CSS
#grid {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-spacing: 0px;
|
|
border: 4px solid #c0c0c0;
|
|
background: #c0c0c0;
|
|
font-family: courier new;
|
|
}
|
|
|
|
#grid tr td span {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
margin: -8.5px 0 0 -4.5px;
|
|
}
|
|
|
|
#grid tr td {
|
|
width: 15px;
|
|
height: 15px;
|
|
max-width: 15px;
|
|
max-height: 15px;
|
|
min-width: 15px;
|
|
min-height: 15px;
|
|
text-align: center;
|
|
font-size: xx-small;
|
|
cursor: default;
|
|
padding: 0px;
|
|
background: #c0d0c0;
|
|
border: 1px solid #c0c0c0;
|
|
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;
|
|
}
|
|
|
|
#grid TR TD[data-status=default],
|
|
#grid TR TD[data-status=flagged] {
|
|
border: 1px outset #ececec;
|
|
padding: 0px;
|
|
}
|
|
|
|
#grid TR TD.mine {
|
|
background: #dd5050;
|
|
border: 1px inset orange;
|
|
padding: 0px;
|
|
}
|
|
|
|
#grid TR TD[data-value="1"] {
|
|
color: #0000ff !important;
|
|
}
|
|
|
|
#grid TR TD[data-value="2"] {
|
|
color: #008100;
|
|
}
|
|
|
|
#grid TR TD[data-value="3"] {
|
|
color: #ff1300;
|
|
}
|
|
|
|
#grid TR TD[data-value="4"] {
|
|
color: #000083;
|
|
}
|
|
|
|
#grid TR TD[data-value="5"] {
|
|
color: #810500;
|
|
}
|
|
|
|
#grid TR TD[data-value="6"] {
|
|
color: #2a9494;
|
|
}
|
|
|
|
#grid TR TD[data-value="7"] {
|
|
color: #000000;
|
|
}
|
|
|
|
#grid TR TD[data-value="8"] {
|
|
color: #808080;
|
|
}
|
|
|
|
|
|
#grid TR TD.flag {
|
|
background: #80d080;
|
|
}
|
|
|
|
#grid TR TD.wrong span,
|
|
#grid TR TD.correct span {
|
|
font-size: xx-small !important;
|
|
}
|
|
|
|
#grid TR TD.wrong {
|
|
background: orange;
|
|
color: #FF0000;
|
|
}
|
|
|
|
#grid TR TD.correct {
|
|
background: #00FF00 !important;
|
|
color: #000000;
|
|
}
|
|
|
|
div.hint-wrapper {
|
|
max-width: 500px;
|
|
padding: 0 30px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
|
|
span.hint,
|
|
ol.instructions li {
|
|
font-size: small;
|
|
text-align: left !important;
|
|
}
|
|
|
|
button {
|
|
margin: 12px;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 32px;
|
|
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;
|
|
}
|
|
|
|
h1 span {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 sup {
|
|
font-size: small
|
|
}
|
|
|
|
/** mobile **/
|
|
@media only screen and (max-width: 823px) {
|
|
#grid tr td {
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 20px;
|
|
max-height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
}
|
|
|