adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

css animation

Browse Source
This commit is contained in:
Adrien MALINGREY
2020-11-18 02:58:29 +01:00
parent 958ba01f6b
commit c3a3e45c18
7 changed files with 448 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
themes/Effect/style.css
View File

@ -57,7 +57,7 @@ legend, label {
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2em;
grid-row-gap: 1em;
justify-items: right;
@ -73,18 +73,9 @@ label {
}
#themePreviewTable {
grid-column: 3 / 5;
grid-column: 1 / 5;
width: auto;
}
fieldset input[type="checkbox"] {
width: auto;
}
#showGhostDiv {
grid-row: 2;
grid-column: 1/5;
width: 100%;
margin: auto;
}
#gameSection div {
@ -125,7 +116,7 @@ fieldset input[type="checkbox"] {
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
margin: -6vmin 0 auto 0;
}
th, td {
@ -189,12 +180,9 @@ td {
border: 0;
}
footer {
position: absolute;
left: 50%;
bottom: 1em;
transform: translateX(-50%);
display: none;
footer > * {
margin: 1em auto;
width: 100%;
}
a {
@ -208,6 +196,7 @@ a:hover {
}
#credits {
width: 100%;
font-size: 0.8em;
gap: 0.8em;
}
@ -220,25 +209,23 @@ a:hover {
text-align: center;
border-top: 1px solid white;
caption-side: top;
border-spacing: 1em 0.2em;
}
#leaderboard caption {
color: white;
}
#leaderboard tr,
#leaderboard td {
font-family: 'Share Tech';
text-align: center;
font-size: 2.5vmin;
color: white;
border: 0;
border: 0 !important;
margin: auto 10em;
}
#leaderboard td:first-child{
#leaderboard td:first-child {
text-align: left;
}
#leaderboard td:last-child {
text-align: right;
}

16
themes/Kubow/style.css
View File

@ -64,7 +64,7 @@ legend, #leaderboard caption {
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
justify-items: right;
@ -143,20 +143,10 @@ select:hover {
}
#themePreviewTable {
grid-column: 3 / 5;
grid-column: 1 / 5;
width: auto;
}
fieldset input[type="checkbox"] {
width: auto;
}
#showGhostDiv {
grid-row: 2;
grid-column: 1/5;
width: 100%;
}
#gameSection div {
display: grid;
grid-gap: 3vmin;
@ -289,6 +279,8 @@ a {
gap: 0.8em;
}
#leaderboard {
margin: auto;
}

75
themes/default/style.css
View File

@ -1,16 +1,17 @@
body {
margin: 0;
margin: auto;
font-family: sans-serif;
color: white;
background: #222;
width: max-content;
}
h1 {
text-align: center;
text-align: center;
}
section {
margin: 1em;
margin: 1em auto;
}
div {
@ -19,12 +20,9 @@ div {
align-items: center;
}
#settingsSection {
width: auto;
}
fieldset {
border: 1px solid #444;
margin: 0.5em;
}
legend {
@ -34,7 +32,7 @@ legend {
fieldset > div {
display: grid;
grid-template-columns: 3fr 2fr 3fr 2fr;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2em;
grid-row-gap: 1em;
justify-items: right;
@ -50,18 +48,9 @@ label {
}
#themePreviewTable {
grid-column: 3 / 5;
grid-column: 1 / 5;
width: auto;
}
fieldset input[type="checkbox"] {
width: auto;
}
#showGhostDiv {
grid-row: 2;
grid-column: 1/5;
width: 100%;
margin: auto;
}
#gameSection div {
@ -92,6 +81,13 @@ fieldset input[type="checkbox"] {
text-align: center;
font-weight: bold;
}
@keyframes message-fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
.messageSpan-fade-out {
animation: message-fade-out 500ms 500ms;
}
#nextTable {
grid-column: 3;
@ -102,7 +98,7 @@ fieldset input[type="checkbox"] {
.minoes-table {
table-layout: fixed;
border-spacing: 0;
margin: auto;
margin: -6vmin 0 auto 0;
}
th, td {
@ -160,16 +156,27 @@ td {
border-color: #ffdada;
}
.locked-mino, .cleared-line {
.locked-mino {
background: #AAA;
border: 1px solid #CCC;
border-radius: 1px;
}
@keyframes mino-fade-out {
from {
background: rgba(170, 170, 170, 1);
border: 1px solid #CCC;
}
to {
background: rgba(170, 170, 170, 0);
border: 1px solid #444;
}
}
.cleared-line,
.trail {
background: #333;
animation: mino-fade-out 200ms;
background: transparent;
border: 1px solid #444;
border-radius: 1px;
}
.ghost {
@ -193,39 +200,41 @@ td {
border: 0;
}
footer {
position: absolute;
left: 50%;
bottom: 1em;
transform: translateX(-50%);
display: none;
}
a {
text-decoration: none;
color: lightblue;
}
footer > * {
margin: 1em auto;
width: 100%;
}
#credits {
width: max-content;
width: 100%;
font-size: 0.8em;
gap: 0.8em;
}
#leaderboard {
min-width: 25%;
margin: auto;
text-align: center;
border-top: 1px solid white;
caption-side: top;
border-spacing: 1em 0.2em;
}
#leaderboard caption {
color: white;
}
#leaderboard tr,
#leaderboard td {
border: 0 !important;
margin: auto 10em;
}
#leaderboard td:first-child {
@ -235,5 +244,3 @@ a {
#leaderboard td:last-child {
text-align: right;
}