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

replace synthwave by new wave style

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-06 02:12:32 +01:00
parent 1f78b2dc10
commit 52a7f37eb0
4 changed files with 45 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
css/new-wave.css
View File

@@ -1,76 +0,0 @@
body {
background-image: url("new-wave/bg.png");
background-size: cover;
}
body[data-bs-theme="dark"] {
--bs-body-bg: #2125296b;
}
.btn-dark {
--bs-btn-bg: #2125296b;
}
.card {
background: #25292d66;
}
#matrixCard {
background-image: radial-gradient(#2226, #25292d66);
}
.card,
#matrixCard {
background: repeating-linear-gradient(transparent, #111 1px);
backdrop-filter: blur(3px);
}
.minoes-table {
background: transparent;
}
.mino {
background: var(--color);
border: 3px solid var(--border);
box-shadow: 0 0 8px var(--border);
}
.I {
--color: #00eaf888;
--border: #00eaf5;
}
.J {
--color: #00a9f788;
--border: #00a9f7;
}
.L {
--color: #f9b60088;
--border: #f9b600;
}
.O {
--color: #e3e04988;
--border: #e3e049;
}
.S {
--color: #7bd59e88;
--border: #7bd59e;
}
.T {
--color: #d136e288;
--border: #d136e2;
}
.Z {
--color: #E67D8688;
--border: #E67D86;
}
.ghost {
--color: #fff4;
--border: #fff5;
}

123
css/synthwave.css
View File

@@ -1,5 +1,5 @@
body {
background-image: url("new-wave/bg.png");
background-image: url(synthwave/bg.png);
background-size: cover;
}
@@ -11,113 +11,66 @@ body[data-bs-theme="dark"] {
--bs-btn-bg: #2125296b;
}
.card {
background: #25292d66;
}
#matrixCard {
background-image: radial-gradient(#2226, #25292d66);
}
.card,
#matrixCard {
background: repeating-linear-gradient(transparent, #111 1px);
backdrop-filter: blur(3px);
}
.card-header {
background-color: rgba(37, 41, 45, 50%);
}
#matrixTable {
border-spacing: 1px;
}
tr.matrix td:not(.mino) {
border: 1px solid #111;
.minoes-table {
background: transparent;
}
.mino {
background: radial-gradient(#fff3 0%, var(--color) 170%);
border: 2px solid var(--color);
border-radius: 0;
outline: 1px solid #0006;
opacity: 100%;
box-shadow: 0 0 12px var(--color);
background: var(--color);
border: 3px solid var(--border);
box-shadow: 0 0 8px var(--border);
}
.I.mino {
--color: #00eaf5;
.I {
--color: #00eaf888;
--border: #00eaf5;
}
.J.mino {
--color: #00a9f7;
.J {
--color: #00a9f788;
--border: #00a9f7;
}
.L.mino {
--color: #f9b600;
.L {
--color: #f9b60088;
--border: #f9b600;
}
.O.mino {
--color: #f7f200;;
.O {
--color: #e3e04988;
--border: #e3e049;
}
.T.mino {
--color: #d136e2;;
.S {
--color: #7bd59e88;
--border: #7bd59e;
}
.S.mino {
--color: #35da3f;
.T {
--color: #d136e288;
--border: #d136e2;
}
.Z.mino {
--color: #ee3b3a;
.Z {
--color: #E67D8688;
--border: #E67D86;
}
.ghost.mino {
background: transparent;
opacity: 50%;
}
.moving.mino {
filter: brightness(120%);
}
.locking.mino {
--color: white;
box-shadow: 0 0 10px var(--color);
}
@keyframes locked-animation {
from {
background: white;
--color: white;
}
}
.locked.mino {
animation: locked-animation;
animation-duration: 0.2s;
}
.disabled.mino {
outline: 0px;
box-shadow: none;
filter: contrast(40%) brightness(50%);
}
tr.cleared-line-animation {
animation: none;
}
tr.cleared-line-animation::after {
content: "";
width: 100%;
height: var(--cell-side);
position: fixed;
left: 50%;
transform: translateX(-50%);
display: block;
background: repeating-linear-gradient(transparent, #fffb 1px);
opacity: 0;
animation: cleared-line-animation ease-out .3s;
}
@keyframes cleared-line-animation {
25% {
width: 200%;
opacity: 100%;
}
.ghost {
--color: #fff4;
--border: #fff5;
}

0
css/new-wave/bg.png → css/synthwave/bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 444 KiB

After

Width:  |  Height:  |  Size: 444 KiB

16
index.html
View File

@@ -10,14 +10,13 @@
<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="Thème sélectionné" id="selectedStyleSheet">
<link rel="alternate 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/new-wave.css" title="New wave">
<link rel="alternate stylesheet" href="css/synthwave.css" title="Synthwave">
<link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
<link rel="alternate stylesheet" href="css/opera.css" title="Opéra">
<link rel="alternate stylesheet" href="css/stereo.css" title="Stéréo">
<link rel="alternate 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/synthwave.css" title="Synthwave">
<link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
<link rel="alternate stylesheet" href="css/opera.css" title="Opéra">
<link rel="alternate stylesheet" href="css/stereo.css" title="Stéréo">
<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">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
@@ -72,7 +71,6 @@
<div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="selectedStyleSheet.href = this.value">
<option value="css/classic.css" selected>Classique</option>
<option value="css/minimal.css">Minimal</option>
<option value="css/new-wave.css">New wave</option>
<option value="css/synthwave.css">Synthwave</option>
<option value="css/electro.css">Électro</option>
<option value="css/retro.css">Rétro</option>