new version

This commit is contained in:
2020-10-15 03:47:32 +02:00
parent 1d1b2b24d2
commit 078120e4d1
21 changed files with 387 additions and 569 deletions

View File

@ -1,76 +0,0 @@
.empty-cell {
background: transparent;
}
.invisible-grid > .empty-cell {
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
border: 1px solid rgba(255, 255, 255, .4);
}
.mino {
border: 1px solid;
border-radius: 1px;
}
.I-mino {
/* cyan */
background: #99d9ea;
border-color: #d1edf5;
}
.J-mino {
/* blue */
background: #7f92ff;
border-color: #c2cbff;
}
.L-mino {
/* orange */
background: #ffb27f;
border-color: #ffe1cd;
}
.O-mino {
/* yellow */
background: #ffe97f;
border-color: #fff5ca;
}
.S-mino {
/* green */
background: #7fff8e;
border-color: #ccffd2;
}
.T-mino {
/* magenta */
background: #d67fff;
border-color: #edc9ff;
}
.Z-mino {
/* red */
background: #ff7f7f;
border-color: #ffdada;
}
.locked-mino, .cleared-line {
background: white;
border: 1px solid white;
border-radius: 1px;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid white;
border-radius: 1px;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1px;
}

181
themes/default/style.css Normal file
View File

@ -0,0 +1,181 @@
body {
font-family: sans-serif;
color: white;
background: #222;
}
section {
margin: 1em;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-column-gap: 2em;
grid-row-gap: 1em;
justify-items: right;
align-items: center;
}
fieldset button, input {
width: 100%;
}
label {
text-align: center;
}
a {
text-decoration: none;
color: lightblue;
}
#gameSection {
width: 72vmin;
grid-template-columns: 18vmin 30vmin 18vmin;
grid-gap: 3vmin;
margin: auto;
}
#gameSection div {
display: grid;
}
#holdTable {
grid-column: 1;
grid-row: 1;
justify-self: end;
}
#statsTable {
grid-column: 1;
grid-row: 3;
height: 0;
justify-self: end;
margin: 0 auto;
}
#scoreTable {
font-weight: bold;
}
#matrixTable {
grid-column: 2;
grid-row: 1 / 4;
}
#messageSpan {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.8);
font-size: 4vmin;
text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
text-align: center;
font-weight: bold;
}
#nextTable {
grid-column: 3;
grid-row: 1 / 4;
}
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
}
.minoes-table tr {
height: 3vmin;
}
.minoes-table th, td {
font-weight: normal;
padding: 0;
height: 3vmin;
width: 3vmin;
border: 1px solid transparent;
}
.minoes-table th {
border: 1px solid transparent;
}
.minoes-table td {
border: 1px solid #888;
}
.minoes-table .mino {
border: 1px solid;
border-radius: 1px;
}
.minoes-table .I {
/* cyan */
background: #99d9ea;
border-color: #d1edf5;
}
.minoes-table .J {
/* blue */
background: #7f92ff;
border-color: #c2cbff;
}
.minoes-table .L {
/* orange */
background: #ffb27f;
border-color: #ffe1cd;
}
.minoes-table .O {
/* yellow */
background: #ffe97f;
border-color: #fff5ca;
}
.minoes-table .S {
/* green */
background: #7fff8e;
border-color: #ccffd2;
}
.minoes-table .T {
/* magenta */
background: #d67fff;
border-color: #edc9ff;
}
.minoes-table .Z {
/* red */
background: #ff7f7f;
border-color: #ffdada;
}
.locked, .cleared-line {
background: white;
border: 1px solid white;
border-radius: 1px;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid white;
border-radius: 1px;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1px;
}

Binary file not shown.

Binary file not shown.

BIN
themes/effect/images/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

250
themes/effect/style.css Normal file
View File

@ -0,0 +1,250 @@
.invisible-grid > .empty-cell {
background: transparent;
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
background: transparent;
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino {
background: rgba(127, 229, 255, 0.3);
border: 1px solid rgba(127, 229, 255, 0.7);
border-radius: 0.3vmin;
}
.locked-mino {
background: rgba(242, 255, 255, 0.5);
border-color: rgba(242, 255, 255, 0.7);
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.3vmin;
}
.ghost {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0.3vmin;
}
@font-face {
font-family: 'Share Tech';
font-style: normal;
font-weight: 400;
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(fonts/ShareTech.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Share Tech Mono';
font-style: normal;
font-weight: 400;
src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
font-family: 'Share Tech';
font-size: 1em;
text-align: center;
}
body {
background-color: #0D111D;
background-image: url("images/bg.jpg");
background-size: cover;
background-attachment: fixed;
}
h1 {
font-size: 5vmin;
margin: 1vmin auto;
text-shadow: 3px 2px rgba(153, 145, 175, 0.5);
text-align: center;
color: white;
}
section, footer, div {
display: flex;
justify-content: center;
align-items: center;
}
fieldset {
border: 1px white solid;
border-radius: 4px;
align-items: center;
margin: 1vmin auto;
width: 60%;
}
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-gap: 1vmin;
}
fieldset legend, label {
color: white;
}
fieldset input, select, button {
width: 100%;
}
input[type="checkbox"] {
width: auto;
}
button {
width: auto;
}
#showGhostDiv {
grid-column-start: 1;
grid-column-end: 5;
width: 100%;
}
#settingsButton {
display: none;
width: auto;
margin: 2vmin;
}
#hideSettingsButton {
display: none;
width: auto;
margin: auto;
}
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
}
tr {
height: 3vmin;
}
th, td {
font-weight: normal;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
height: 3vmin;
width: 3vmin;
}
#game {
display: none;
width: 72vmin;
grid-template-columns: 18vmin 30vmin 18vmin;
grid-gap: 3vmin;
margin: auto;
}
#hold {
grid-column: 1;
grid-row: 1;
justify-self: end;
}
#stats {
grid-column: 1;
grid-row: 3;
height: 0;
justify-self: end;
margin: 0 auto;
}
#score {
font-weight: bold;
}
#matrix {
grid-column: 2;
grid-row: 1 / 4;
}
#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.8);
font-size: 4vmin;
text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
text-align: center;
font-weight: bold;
}
#next {
grid-column: 3;
grid-row: 1 / 4;
}
a {
text-decoration: none;
font-size: 1em;
color: white;
}
a:hover {
color: lightcyan;
}
#leaderboardLink {
display: flex;
justify-content: center;
}
#leaderboard{
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
}
caption {
color: white;
}
.name {
font-family: 'Share Tech';
text-align: left;
font-size: 2.5vmin;
color: white;
}
.player {
font-family: 'Share Tech';
text-align: center;
font-size: 2.5vmin;
color: white;
}
.value {
font-family: 'Share Tech Mono';
text-align: right;
font-size: 2.5vmin;
color: white;
}

View File

Before

Width:  |  Height:  |  Size: 385 B

After

Width:  |  Height:  |  Size: 385 B

View File

Before

Width:  |  Height:  |  Size: 404 B

After

Width:  |  Height:  |  Size: 404 B

View File

Before

Width:  |  Height:  |  Size: 377 B

After

Width:  |  Height:  |  Size: 377 B

View File

Before

Width:  |  Height:  |  Size: 335 B

After

Width:  |  Height:  |  Size: 335 B

View File

Before

Width:  |  Height:  |  Size: 374 B

After

Width:  |  Height:  |  Size: 374 B

View File

Before

Width:  |  Height:  |  Size: 387 B

After

Width:  |  Height:  |  Size: 387 B

View File

Before

Width:  |  Height:  |  Size: 371 B

After

Width:  |  Height:  |  Size: 371 B

View File

@ -1,64 +0,0 @@
.empty-cell {
background: transparent;
}
.invisible-grid > .empty-cell {
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino {
border: 1px outset white;
border-radius: 0vmin;
}
.I-mino {
background: rgb(153, 255, 230);
}
.J-mino {
background: rgb(153, 204, 255);
}
.L-mino {
background: rgb(255, 204, 153);
}
.O-mino {
background: rgb(255, 255, 153);
}
.S-mino {
background: rgb(153, 255, 153);
}
.T-mino {
background: rgb(255, 102, 255);
}
.Z-mino {
background: rgb(255, 153, 153);
}
.locked-mino {
background: white;
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0vmin;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0vmin;
}

View File

@ -1,64 +0,0 @@
.empty-cell {
background: transparent;
}
.invisible-grid > .empty-cell {
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino {
border: 1px solid white;
border-radius: 0vmin;
}
.I-mino {
background: rgb(153, 255, 230);
}
.J-mino {
background: rgb(153, 204, 255);
}
.L-mino {
background: rgb(255, 204, 153);
}
.O-mino {
background: rgb(255, 255, 153);
}
.S-mino {
background: rgb(153, 255, 153);
}
.T-mino {
background: rgb(255, 102, 255);
}
.Z-mino {
background: rgb(255, 153, 153);
}
.locked-mino {
background: white;
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0;
}

View File

@ -1,36 +0,0 @@
.invisible-grid > .empty-cell {
background: transparent;
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
background: transparent;
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino {
background: rgba(127, 229, 255, 0.3);
border: 1px solid rgba(127, 229, 255, 0.7);
border-radius: 0.3vmin;
}
.locked-mino {
background: rgba(242, 255, 255, 0.5);
border-color: rgba(242, 255, 255, 0.7);
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.3vmin;
}
.ghost {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0.3vmin;
}

View File

@ -1,70 +0,0 @@
.invisible-grid > .empty-cell {
background: transparent;
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
background: transparent;
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino {
border: 1px outset;
border-radius: 0vmin;
}
.I-mino {
background: cyan;
border-color: lightcyan;
}
.J-mino {
background: blue;
border-color: lightblue;
}
.L-mino {
background: orange;
border-color: lightgoldenrodyellow;
}
.O-mino {
background: yellow;
border-color: lightyellow;
}
.S-mino {
background: green;
border-color: lightgreen;
}
.T-mino {
background: magenta;
border-color: pink;
}
.Z-mino {
background: red;
border-color: lightpink;
}
.locked-mino {
background: white;
border-color: white;
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0vmin;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0vmin;
}

View File

@ -1,70 +0,0 @@
.invisible-grid > .empty-cell {
background: transparent;
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
background: transparent;
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino {
border: 1px solid;
border-radius: 0;
}
.I-mino {
background: cyan;
border-color: lightcyan;
}
.J-mino {
background: blue;
border-color: lightblue;
}
.L-mino {
background: orange;
border-color: lightgoldenrodyellow;
}
.O-mino {
background: yellow;
border-color: lightyellow;
}
.S-mino {
background: green;
border-color: lightgreen;
}
.T-mino {
background: magenta;
border-color: pink;
}
.Z-mino {
background: red;
border-color: lightpink;
}
.locked-mino {
background: white;
border-color: white;
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0vmin;
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0vmin;
}