From d28dc8876eddd13bb096efa566f85e3f311ee0b7 Mon Sep 17 00:00:00 2001 From: Azargeth <doriandej@hotmail.fr> Date: Thu, 17 Nov 2022 14:59:24 +0100 Subject: [PATCH] Modification style --- www/index.php | 8 ++++--- www/ressources/css/styles.css | 44 +++++++++++++++++++++++++---------- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/www/index.php b/www/index.php index cf4a8f7..e311236 100644 --- a/www/index.php +++ b/www/index.php @@ -41,7 +41,7 @@ if (isset($_POST["texteTache"])) { - $dateHeureTache = gmdate('Y-m-d\TH:i:s.v\Z'); + $dateHeureTache = gmdate('Y-m-d H:i:s'); @@ -169,8 +169,10 @@ if (isset($_GET["action"]) && $_GET["action"]=="supprimer" && isset($_GET["id"]) <li class="<?= ($infoTache["accomplie"] === true)?"accomplie":""; ?>"> <span class="coche done"><a href="?action=basculer&id=<?= $idTache; ?>" title="Cliquez pour faire basculer l'état de cette tâche."><img src="ressources/images/coche.svg" alt=""></a></span> - <span class="texte"><?= $infoTache["texte"]; ?></span> - <span class="ajout"><?= $infoTache["dateAjout"]; ?></span> + <div class="memo"> + <span class="texte"><?= $infoTache["texte"]; ?></span> + <span class="ajout"><?= $infoTache["dateAjout"]; ?></span> + </div> <span class="coche"><a href="?action=supprimer&id=<?= $idTache; ?>" title="Cliquez pour supprimer cette tâche."><img src="ressources/images/delete.svg" alt=""></a></span> </li> diff --git a/www/ressources/css/styles.css b/www/ressources/css/styles.css index d2db488..c1f1208 100644 --- a/www/ressources/css/styles.css +++ b/www/ressources/css/styles.css @@ -10,8 +10,11 @@ body { font-family: Verdana; font-size: 36px; color: #444; - background-color: #d5d5d5; + background-color: #83A7B6; padding: 20px; + display: flex; + justify-content: center; + align-items: center; } a, a:visited, a:link, a:hover { @@ -20,7 +23,7 @@ a, a:visited, a:link, a:hover { } .conteneur { - width: 100%; + width: 80%; height: 100%; } @@ -28,11 +31,12 @@ h1 { margin: 0; margin-bottom: 30px; text-align: center; - opacity: 0.6; + opacity: 0.8; + color: #1C414F; } h1:hover { - opacity: 0.9; + opacity: 1.2; } input.quoi-faire { @@ -40,9 +44,11 @@ input.quoi-faire { padding: 15px; font-size: 36px; padding-left: 50px; - box-shadow: 10px 10px 15px 1px #ababab; + box-shadow: 10px 10px 15px 1px #1C414F; + background-color: #FFFBF6; border: none; margin: 20px 0; + border-radius: 5px; } div.filtres { @@ -71,7 +77,6 @@ ul.liste-taches { margin-top: 10px; list-style: none; padding: 0; - background-color: white; width: 99%; } @@ -80,6 +85,18 @@ ul.liste-taches li { border-bottom: 5px solid #d5d5d5; padding: 40px; position: relative; + border-radius: 5px; + background-color: #FFFBF6; + display: flex; +} + +.memo { + display: flex; + flex-direction: column; + justify-content: center; + width: 80%; + height: 100%; + margin-top: 10px; } ul.liste-taches li:hover { @@ -96,23 +113,26 @@ ul.liste-taches li.accomplie { opacity: 0.5; } +ul.liste-taches li.accomplie:hover { + text-decoration: line-through; + opacity: 0.75; +} + ul.liste-taches li span.ajout { font-size: 0.5em; font-family: Georgia; font-style: italic; opacity: 0.5; - position: absolute; - bottom: 5px; - right: 5px; } .coche { position: absolute; - top: 10%; - right: 2%; + top: 25%; + right: 3%; } .done { position: relative; left: 0%; top: 10%; -} \ No newline at end of file +} + -- GitLab