From 3d1a0546443a10d61f88adb5c966fe0fa393b414 Mon Sep 17 00:00:00 2001 From: Zatalyz Date: Sun, 17 Nov 2024 09:59:48 +0100 Subject: [PATCH] Envoi du code initial --- color.css | 142 ++++++++++++++++++++++++ color.html | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 460 insertions(+) create mode 100644 color.css create mode 100644 color.html diff --git a/color.css b/color.css new file mode 100644 index 0000000..9c9404f --- /dev/null +++ b/color.css @@ -0,0 +1,142 @@ +:root { + /* Couleur de l'interface */ + --colorbg: #e0e0e0; + --colortext: black; + --colorbutton: #2e2e2e; + --colortextbtn: white; + --colorbtnhover: #184e4a; + /* Couleur de la palette par défaut */ + --colorb1: #1d1d1d; + --colorb2: #2e2e2e; + --colorb3: #4e4e4e; + --colorb4: #6e6e6e; + --colorw1: #dfdfdf; + --colorw2: #efefef; + --colorw3: #f7f7f7; + --colorw4: #ffffff; + --color1a: #184E4A; + --color1b: #21b2a6; + --color1c: #63d6c5; + --color1d: #a6e0db; + --color3a: #520c08; + --color3b: #aa0813; + --color3c: #d45850; + --color3d: #f4a7a3; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: var(--colorbg); + display: flex; + flex-direction: column; + align-items: center; +} +.wrapper { + display: flex; + flex-direction: row; + justify-content: center; +} + +.controls { + max-width: 15em; + margin: 2em; + margin-top: 0; + display: flex; + flex-direction: column; +} +.controls ul { + list-style-type: none; + padding: 0; +} +.controls ul li:before { + content: "➔ "; +} +.grid { + display: grid; + grid-template-columns: repeat(4, 150px); + grid-auto-rows: 200px; + gap: 0; +} +.color-box { + color:var(--colortextbtn); + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +.color-value { + width: 100%; + height: 80%; +} +input.color-value { + border: none; + outline: none; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: transparent; + padding: 0; +} + +input.color-value::-webkit-color-swatch { + border: none; /* Supprime les bordures internes dans les navigateurs basés sur WebKit */ +} +.color-name { + padding: 10px 0; + text-align: center; + font-size: 14px; + width: 100%; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0; + border: none; + cursor: pointer; + background-color: var(--colorbutton); + color: var(--colortextbtn); + font-size: 14px; + border-left: var(--colortextbtn) 1px dotted; +} +.color-name:hover { + background-color: var(--colorbtnhover); +} +.delete-btn { + border: none; + cursor: pointer; + font-weight: bold; + padding: 5px; + display: block; + position: absolute; + right: 0; +} + +.color-hex { +position: absolute; +top: 5px; +left: 5px; +font-size: 12px; +color: rgba(255, 255, 255, 0.8); /* Couleur du texte (blanc transparent) */ +background-color: rgba(0, 0, 0, 0.5); /* Fond légèrement opaque */ +padding: 2px 5px; +border-radius: 3px; +cursor: text; +user-select: text; +} + +button { + padding: 10px 15px; + margin: 5px; + border: none; + border-radius: 5px; + cursor: pointer; + background-color: var(--colorbutton); + color: var(--colortextbtn); + font-size: 14px; +} + +button:hover { + background-color: var(--colorbtnhover); +} diff --git a/color.html b/color.html new file mode 100644 index 0000000..a88a491 --- /dev/null +++ b/color.html @@ -0,0 +1,318 @@ + + + + + + Palette Interactive + + + +

Palette Interactive

+
+
+ + + + + + + +
  • Cliquez sur le fond des carrés pour changer les couleurs.
    • +
  • Modifiez le nom des variables avant d'exporter.
    • +
  • Lorsque vous importez une palette, le fichier doit être en .css et contenir uniquement les variables de couleur, par exemple + --colortext: black;
    --colorbutton: #2e2e2e;     + +
+
+
+ + +
+ #1d1d1d + + + + +
+ + +
+ #2e2e2e + + + +
+ +
+ #4e4e4e + + + +
+ +
+ #6e6e6e + + + +
+ +
+ #dfdfdf + + + +
+ +
+ #efefef + + + +
+ +
+ #f7f7f7 + + + +
+ +
+ #ffffff + + + +
+ +
+ #184E4A + + + +
+ +
+ #21b2a6 + + + +
+ +
+ #63d6c5 + + + +
+ +
+ #a6e0db + + + +
+ +
+ #520c08 + + + +
+ +
+ #aa0813 + + + +
+ +
+ #d45850 + + + +
+ +
+ #f4a7a3 + + + +
+
+
+ + + + + +