From c990133ade32a3aad7c1fed32289fe10543e674b Mon Sep 17 00:00:00 2001 From: Julien WITTOUCK Date: Wed, 10 Sep 2025 10:07:19 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20:=20update=20template=20styles?= =?UTF-8?q?=20to=20use=20new=20utility=20classes=20and=20standardized=20co?= =?UTF-8?q?lor=20palette?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/public/main.css | 267 ++++++++++++++---- src/main/resources/templates/error/4xx.html | 2 +- src/main/resources/templates/error/5xx.html | 2 +- src/main/resources/templates/quiz/answer.html | 2 +- .../resources/templates/quiz/preview.html | 2 +- .../resources/templates/quiz/results.html | 95 ++++--- 6 files changed, 263 insertions(+), 107 deletions(-) diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css index e194281..92ec313 100644 --- a/src/main/resources/public/main.css +++ b/src/main/resources/public/main.css @@ -782,6 +782,40 @@ h6 { --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .text-input { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1056,6 +1090,14 @@ h6 { pointer-events: none; } +.pointer-events-auto { + pointer-events: auto; +} + +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -1122,6 +1164,10 @@ h6 { margin-left: 12px; } +.ml-4 { + margin-left: 16px; +} + .ml-6 { margin-left: 24px; } @@ -1186,6 +1232,11 @@ h6 { display: none; } +.size-5 { + width: 20px; + height: 20px; +} + .h-12 { height: 48px; } @@ -1218,6 +1269,10 @@ h6 { min-height: 100%; } +.w-0 { + width: 0px; +} + .w-12 { width: 48px; } @@ -1271,6 +1326,10 @@ h6 { max-width: 1536px; } +.max-w-sm { + max-width: 24rem; +} + .max-w-xl { max-width: 36rem; } @@ -1283,6 +1342,10 @@ h6 { flex-shrink: 0; } +.shrink-0 { + flex-shrink: 0; +} + .table-auto { table-layout: auto; } @@ -1291,6 +1354,15 @@ h6 { transform-origin: top right; } +.translate-y-0 { + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .cursor-not-allowed { cursor: not-allowed; } @@ -1303,6 +1375,12 @@ h6 { list-style-type: decimal; } +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -1311,10 +1389,6 @@ h6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - .flex-row { flex-direction: row; } @@ -1323,14 +1397,18 @@ h6 { flex-direction: column; } -.items-start { - align-items: flex-start; +.items-end { + align-items: flex-end; } .items-center { align-items: center; } +.items-baseline { + align-items: baseline; +} + .justify-start { justify-content: flex-start; } @@ -1380,11 +1458,6 @@ h6 { column-gap: 12px; } -.gap-x-4 { - -moz-column-gap: 16px; - column-gap: 16px; -} - .gap-x-6 { -moz-column-gap: 24px; column-gap: 24px; @@ -1409,6 +1482,12 @@ h6 { margin-bottom: calc(48px * var(--tw-space-y-reverse)); } +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(16px * var(--tw-space-y-reverse)); +} + .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse))); @@ -1443,20 +1522,6 @@ h6 { border-radius: 0.375rem; } -.rounded-sm { - border-radius: 0.125rem; -} - -.rounded-s { - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; -} - -.rounded-l { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; -} - .border-0 { border-width: 0px; } @@ -1517,6 +1582,11 @@ h6 { background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } +.bg-green-light { + --tw-bg-opacity: 1; + background-color: rgb(130 230 172 / var(--tw-bg-opacity)); +} + .bg-primary-100 { --tw-bg-opacity: 1; background-color: rgb(67 97 238 / var(--tw-bg-opacity)); @@ -1527,11 +1597,26 @@ h6 { background-color: rgb(242 48 48 / var(--tw-bg-opacity)); } +.bg-red-light { + --tw-bg-opacity: 1; + background-color: rgb(245 96 96 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-red-dark { + --tw-bg-opacity: 1; + background-color: rgb(225 14 14 / var(--tw-bg-opacity)); +} + +.bg-red-light-20 { + --tw-bg-opacity: 1; + background-color: rgb(242 48 48 / var(--tw-bg-opacity)); +} + .fill-primary-100 { fill: #4361EE; } @@ -1565,6 +1650,10 @@ h6 { padding: 32px; } +.p-2 { + padding: 8px; +} + .px-10 { padding-left: 40px; padding-right: 40px; @@ -1575,6 +1664,11 @@ h6 { padding-right: 48px; } +.px-2 { + padding-left: 8px; + padding-right: 8px; +} + .px-20 { padding-left: 80px; padding-right: 80px; @@ -1630,14 +1724,19 @@ h6 { padding-bottom: 20px; } +.py-6 { + padding-top: 24px; + padding-bottom: 24px; +} + .py-8 { padding-top: 32px; padding-bottom: 32px; } -.px-2 { - padding-left: 8px; - padding-right: 8px; +.px-1 { + padding-left: 4px; + padding-right: 4px; } .pb-12 { @@ -1684,10 +1783,6 @@ h6 { padding-left: 32px; } -.pr-10 { - padding-right: 40px; -} - .pr-12 { padding-right: 48px; } @@ -1763,10 +1858,6 @@ h6 { font-weight: 600; } -.uppercase { - text-transform: uppercase; -} - .leading-6 { line-height: 1.5rem; } @@ -1783,6 +1874,11 @@ h6 { letter-spacing: -0.025em; } +.text-dark-4 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + .text-dark-6 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -1798,9 +1894,14 @@ h6 { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-dark-4 { +.text-green-dark { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(26 130 69 / var(--tw-text-opacity)); +} + +.text-red-dark { + --tw-text-opacity: 1; + color: rgb(225 14 14 / var(--tw-text-opacity)); } .opacity-0 { @@ -1815,12 +1916,30 @@ h6 { opacity: 0.25; } +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline-1 { + outline-width: 1px; +} + +.-outline-offset-1 { + outline-offset: -1px; +} + +.outline-white\/10 { + outline-color: rgb(255 255 255 / 0.1); +} + .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -1855,6 +1974,22 @@ h6 { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + @font-face { font-family: "Noto Sans"; @@ -1876,24 +2011,19 @@ h6 { background-color: rgb(31 42 55 / var(--tw-bg-opacity)); } -.checked\:text-white:checked { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .hover\:bg-dark-4:hover { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } -.hover\:bg-primary-80:hover { +.hover\:bg-primary-100:hover { --tw-bg-opacity: 1; - background-color: rgb(54 78 190 / var(--tw-bg-opacity)); + background-color: rgb(67 97 238 / var(--tw-bg-opacity)); } -.hover\:bg-primary-100:hover { +.hover\:bg-primary-80:hover { --tw-bg-opacity: 1; - background-color: rgb(67 97 238 / var(--tw-bg-opacity)); + background-color: rgb(54 78 190 / var(--tw-bg-opacity)); } .hover\:text-white:hover { @@ -1916,8 +2046,11 @@ h6 { --tw-ring-color: rgb(67 97 238 / var(--tw-ring-opacity)); } -.focus\:outline-none:focus { - outline: 2px solid transparent; +.focus\:outline-2:focus { + outline-width: 2px; +} + +.focus\:outline-offset-2:focus { outline-offset: 2px; } @@ -1937,14 +2070,14 @@ h6 { --tw-ring-inset: inset; } -.focus\:ring-primary-160:focus { +.focus\:ring-primary-100:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(180 192 248 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(67 97 238 / var(--tw-ring-opacity)); } -.focus\:ring-primary-100:focus { +.focus\:ring-primary-160:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(67 97 238 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(180 192 248 / var(--tw-ring-opacity)); } .focus-visible\:outline:focus-visible { @@ -1972,14 +2105,15 @@ h6 { display: flex; } - .sm\:flex-1 { - flex: 1 1 0%; - } - .sm\:flex-auto { flex: 1 1 auto; } + .sm\:translate-x-0 { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -1988,6 +2122,14 @@ h6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } + .sm\:items-start { + align-items: flex-start; + } + + .sm\:items-end { + align-items: flex-end; + } + .sm\:items-center { align-items: center; } @@ -1996,6 +2138,10 @@ h6 { justify-content: space-between; } + .sm\:p-6 { + padding: 24px; + } + .sm\:px-6 { padding-left: 24px; padding-right: 24px; @@ -2060,3 +2206,10 @@ h6 { column-gap: 32px; } } + +@media (prefers-color-scheme: dark) { + .dark\:hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + } +} diff --git a/src/main/resources/templates/error/4xx.html b/src/main/resources/templates/error/4xx.html index 8da12d5..4355009 100644 --- a/src/main/resources/templates/error/4xx.html +++ b/src/main/resources/templates/error/4xx.html @@ -4,7 +4,7 @@
-
+
-
+

Plusieurs réponses correctes par question sont possibles.

-
+

Plusieurs réponses correctes par question sont possibles.

-
+

Les questions auxquelles vous avez répondu correctement sont surlignées en - + - vert +  vert , les autres en - + - rouge +  rouge .

-
-
+
    +
  1. - - - - - - Question text - + + + + + +   + Question text + - - - - - Question text - + + + + +   + Question text + -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - -
    -
    - -
    - Question explanation -
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    +
    -
    +
    + Question explanation +
    +
+ -
+
-- 2.51.2