From 34e16f97994cd61da3273cfe67d7b5cda51597ee Mon Sep 17 00:00:00 2001 From: JonathanMM Date: Wed, 10 May 2023 23:17:20 +0200 Subject: [PATCH] =?UTF-8?q?Utilisation=20des=20ic=C3=B4nes=20de=20material?= =?UTF-8?q?=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 97 +++++++--------------------------------------- public/jeu.css | 27 +++++++++++-- ts/reglesPanel.ts | 3 +- ts/themeManager.ts | 8 ++-- 4 files changed, 44 insertions(+), 91 deletions(-) diff --git a/public/index.html b/public/index.html index dc765dc..72c0c8f 100644 --- a/public/index.html +++ b/public/index.html @@ -68,99 +68,32 @@ - + - - - - - + - - - - - - - - + - - - - - - + + - + + + + diff --git a/public/jeu.css b/public/jeu.css index 4ae354d..3a52f07 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -9,11 +9,12 @@ --couleur-icone: rgb(200, 200, 200); --couleur-fond-rgb: 43, 43, 43; --couleur-fond: rgb(var(--couleur-fond-rgb)); - --couleur-bordure: #ffffff; + --couleur-bordure: rgb(200, 200, 200); --couleur-bordure-grille: #ffffff; --couleur-police: #ffffff; --couleur-police-grille: #ffffff; - --taille-icone: 32px; + --taille-icone: 24px; + --taille-icone-zone: 48px; } @font-face { @@ -61,12 +62,24 @@ h1 { justify-content: space-around; } +#configuration-regles-bouton, +#configuration-config-bouton, +#configuration-stats-bouton, +#configuration-audio-bouton { + height: var(--taille-icone-zone); + width: var(--taille-icone-zone); + display: flex; + justify-content: center; + align-items: center; +} + #configuration-regles-icone, #configuration-config-icone, #configuration-stats-icone, #configuration-audio-icone { height: var(--taille-icone); width: var(--taille-icone); + fill: var(--couleur-icone); } #grille { @@ -260,12 +273,18 @@ h1 { } #panel-fenetre-bouton-fermeture { + width: 48px; + height: 48px; text-decoration: none; + display: flex; + justify-content: center; + align-items: center; } #panel-fenetre-bouton-fermeture-icone { - width: 32px; - height: 32px; + width: 40px; + height: 40px; + fill: var(--couleur-icone); } .config-panel #panel-fenetre-contenu { diff --git a/ts/reglesPanel.ts b/ts/reglesPanel.ts index 03c841d..4a28428 100644 --- a/ts/reglesPanel.ts +++ b/ts/reglesPanel.ts @@ -46,7 +46,8 @@ export default class ReglesPanel { ' ou @JonathanMM@mastodon.social sur mastodon. − ' + 'Page du projet
' + 'Basé sur l\'excellent Wordle et le regretté Motus.
' + - "Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire." + + "Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire.
" + + 'Les icônes proviennent de Material Design' + "

"; this._panelManager.setContenu(titre, contenu); diff --git a/ts/themeManager.ts b/ts/themeManager.ts index 5b11bf2..db3b0fc 100644 --- a/ts/themeManager.ts +++ b/ts/themeManager.ts @@ -14,7 +14,7 @@ export default class ThemeManager { root.style.setProperty("--couleur-mal-place", "#ffbd00"); root.style.setProperty("--couleur-fond-rgb", "255, 254, 246"); root.style.setProperty("--couleur-police", "#000000"); - root.style.setProperty("--couleur-bordure", "#000000"); + root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)"); root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)"); break; case Theme.ClairAccessible: @@ -22,7 +22,7 @@ export default class ThemeManager { root.style.setProperty("--couleur-mal-place", "#db7c00"); root.style.setProperty("--couleur-fond-rgb", "255, 254, 246"); root.style.setProperty("--couleur-police", "#000000"); - root.style.setProperty("--couleur-bordure", "#000000"); + root.style.setProperty("--couleur-bordure", "rgb(55, 55, 55)"); root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)"); break; case Theme.SombreAccessible: @@ -30,7 +30,7 @@ export default class ThemeManager { root.style.setProperty("--couleur-mal-place", "#db7c00"); root.style.setProperty("--couleur-fond-rgb", "43, 43, 43"); root.style.setProperty("--couleur-police", "#ffffff"); - root.style.setProperty("--couleur-bordure", "#ffffff"); + root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)"); root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)"); break; default: @@ -38,7 +38,7 @@ export default class ThemeManager { root.style.setProperty("--couleur-mal-place", "#ffbd00"); root.style.setProperty("--couleur-fond-rgb", "43, 43, 43"); root.style.setProperty("--couleur-police", "#ffffff"); - root.style.setProperty("--couleur-bordure", "#ffffff"); + root.style.setProperty("--couleur-bordure", "rgb(200, 200, 200)"); root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)"); } }