Nono/Projet_48h
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

White theme + responsive

Browse Source
This commit is contained in:
Sysy's
2026-03-30 16:38:03 +02:00
parent b10b6475d8
commit 681dc23dd6
1 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/assets/css/game.css
View File

@@ -4,40 +4,37 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root {
--page-padding: clamp(12px, 3vw, 32px);
--map-padding: clamp(12px, 2.5vw, 20px);
--map-radius: clamp(20px, 4vw, 50px);
--cell-size: clamp(20px, 5vw, 60px);
--laser-width: clamp(14px, 3vw, 35px);
--laser-height: clamp(3px, 0.7vw, 7px);
}
html, body { html, body {
width: 100vw; min-height: 100%;
height: 100vh;
overflow: hidden;
} }
body { body {
background: #1a1a1a; min-height: 100vh;
background: #f7f7f7;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
padding: var(--page-padding);
overflow-x: auto;
} }
main { #map {
display: flex; background-color: #DADEEF;
flex-direction: column; padding: var(--map-padding);
align-items: center; margin: 0;
justify-content: center; border-radius: var(--map-radius);
padding: 20px;
border-radius: 10px;
min-width: fit-content;
flex-shrink: 0;
}
.map {
display: flex;
flex-direction: column;
gap: 0px;
padding: 10px;
background: #222222;
border-radius: 5px;
width: fit-content; width: fit-content;
height: fit-content; max-width: 100%;
} }
.lign { .lign {
@@ -47,11 +44,10 @@ main {
} }
.cell { .cell {
border: 1px solid #333333; width: var(--cell-size);
min-width: 60px; min-width: var(--cell-size);
width: auto; height: var(--cell-size);
min-height: 60px; min-height: var(--cell-size);
height: auto;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -62,7 +58,7 @@ main {
} }
.empty { .empty {
background-color: #2a2a2a; background-color: #DADEEF;
border-color: #333333; border-color: #333333;
} }
@@ -113,9 +109,23 @@ main {
} }
.light-laser { .light-laser {
margin-top: 14px; margin-top: calc(var(--cell-size) * 0.23);
height: 7px; height: var(--laser-height);
width: 35px; width: var(--laser-width);
background-color: red; background-color: red;
display: flex; display: flex;
} }
.btn-mirror {
width: 100%;
height: 100%;
border: 0;
background: linear-gradient(135deg, transparent 46%, #f0f0f0 46%, #f0f0f0 54%, transparent 54%);
cursor: pointer;
}
@media (max-width: 768px) {
body {
align-items: flex-start;
}
}