adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-11-29 02:05:55 +01:00
parent 71a36fdc4d
commit 895635b601
5 changed files with 86 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/common.css
View File

@ -56,7 +56,10 @@ tr.buffer-zone td:not(.mino) {
}
tr.matrix td:not(.mino) {
border: 1px solid #333;
border-left : 1px solid #333;
border-right : 1px solid #333;
border-top : 1px solid #303030;
border-bottom: 1px solid #303030;
}
td {

24
css/electro.css
View File

@ -30,8 +30,8 @@ body {
--glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
background: radial-gradient(
at var(--glint-x) var(--glint-y),
rgba(204, 238, 247, 0.7) 0%,
rgba(0, 159, 218, 0.7) 150%);
rgba(204, 238, 247, 0.9) 0%,
rgba(10, 159, 218, 0.9) 150%);
mask:
linear-gradient(#666 0 0) content-box,
linear-gradient(#fff 0 0);
@ -44,11 +44,10 @@ body {
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
box-shadow:
-1px -1px 8px rgba(242, 255, 255, 16%),
-1px 1px 8px rgba(242, 255, 255, 16%),
1px -1px 8px rgba(242, 255, 255, 16%),
1px 1px 8px rgba(242, 255, 255, 16%);
filter: blur(1px);
-1px -1px 8px rgba(242, 255, 255, 32%),
-1px 1px 8px rgba(242, 255, 255, 32%),
1px -1px 8px rgba(242, 255, 255, 32%),
1px 1px 8px rgba(242, 255, 255, 32%);
}
.moving.mino {
@ -58,14 +57,15 @@ body {
}
.locking.mino {
border-width: 1px;
border-width: 3px;
background: rgba(186, 211, 255, 70%);
border-color: rgba(242, 255, 255, 0.7);
border-radius: 4px;
box-shadow:
-1px -1px 4px rgba(186, 211, 255, 27%),
-1px 1px 4px rgba(186, 211, 255, 27%),
1px -1px 4px rgba(186, 211, 255, 27%),
1px 1px 4px rgba(186, 211, 255, 27%);
-1px -1px 8px rgba(186, 211, 255, 27%),
-1px 1px 8px rgba(186, 211, 255, 27%),
1px -1px 8px rgba(186, 211, 255, 27%),
1px 1px 8px rgba(186, 211, 255, 27%);
}
@keyframes locked-animation {

7
css/pop.css
View File

@ -14,6 +14,13 @@ body {
}
}
tr.matrix td:not(.mino) {
border-left : 1px solid #222;
border-right : 1px solid #222;
border-top : 1px solid #111;
border-bottom: 1px solid #111;
}
.mino {
background: rgba(255, 255, 255, 33%);
border: 6px solid var(--color);

60
css/retro.css
View File

@ -121,11 +121,61 @@ td {
}
@keyframes cleared-line-animation {
from {
background-color: rgb(206, 255, 255, 40%);
filter: saturate(50%) brightness(300%);
5% {
opacity: 0;
}
to {
background-color: transparent;
10% {
opacity: 100%;
}
15% {
opacity: 0;
}
20% {
opacity: 100%;
}
25% {
opacity: 0;
}
30% {
opacity: 100%;
}
35% {
opacity: 0;
}
40% {
opacity: 100%;
}
45% {
opacity: 0;
}
50% {
opacity: 100%;
}
55% {
opacity: 0;
}
60% {
opacity: 100%;
}
65% {
opacity: 0;
}
70% {
opacity: 100%;
}
75% {
opacity: 0;
}
80% {
opacity: 100%;
}
85% {
opacity: 0;
}
90% {
opacity: 100%;
}
95% {
opacity: 0;
}
}

34
index.html
View File

@ -10,9 +10,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/classic.css" title="Classique">
<link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
<link rel="alternate stylesheet" href="css/electro.css" title="Électro">
<link rel="alternate stylesheet" href="css/pop.css" title="Pop">
<link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
<link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/T-2.png">
@ -62,9 +62,9 @@
<div class="col-sm-4">
<select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
<option selected>Classique</option>
<option>Minimal</option>
<option>Pop</option>
<option>Électro</option>
<option>Minimal</option>
<option>Rétro</option>
</select>
</div>
@ -200,31 +200,13 @@
</div>
<span style="display: none;">
<img src="I-0.png"/>
<img src="I-1.png"/>
<img src="I-2.png"/>
<img src="I-3.png"/>
<img src="J-0.png"/>
<img src="J-1.png"/>
<img src="J-2.png"/>
<img src="J-3.png"/>
<img src="L-0.png"/>
<img src="L-1.png"/>
<img src="L-2.png"/>
<img src="L-3.png"/>
<img src="I-0.png"/><img src="I-1.png"/><img src="I-2.png"/><img src="I-3.png"/>
<img src="J-0.png"/><img src="J-1.png"/><img src="J-2.png"/><img src="J-3.png"/>
<img src="L-0.png"/><img src="L-1.png"/><img src="L-2.png"/><img src="L-3.png"/>
<img src="O-0.png"/>
<img src="S-0.png"/>
<img src="S-1.png"/>
<img src="S-2.png"/>
<img src="S-3.png"/>
<img src="T-0.png"/>
<img src="T-1.png"/>
<img src="T-2.png"/>
<img src="T-3.png"/>
<img src="Z-0.png"/>
<img src="Z-1.png"/>
<img src="Z-2.png"/>
<img src="Z-3.png"/>
<img src="S-0.png"/><img src="S-1.png"/><img src="S-2.png"/><img src="S-3.png"/>
<img src="T-0.png"/><img src="T-1.png"/><img src="T-2.png"/><img src="T-3.png"/>
<img src="Z-0.png"/><img src="Z-1.png"/><img src="Z-2.png"/><img src="Z-3.png"/>
</span>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>