diff --git a/index.php b/index.php index 631407a..6b5e664 100644 --- a/index.php +++ b/index.php @@ -84,21 +84,17 @@ echo "
"; + echo ""; + echo ""; + echo ""; + echo ""; } ?> diff --git a/styles.css b/styles.css index d94c45b..0ab4c97 100644 --- a/styles.css +++ b/styles.css @@ -608,90 +608,47 @@ h1,h2,h3,h4,h5,h6 { ======================================================================== */ -.tableform { - margin-top: 20px; - display: table; - margin-left: auto; - margin-right: auto; - width: 80%; +.formbox { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; } -.tableform *{ - padding: 5px; - margin: 10px; - line-height: 20px; - text-justify: none; +.labels, .inputs{ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-around; } -.tableform p { - display: table-row; -} - -.tableform label { - display: table-cell; - text-align: left; -} - -input[type=radio] { - all: revert; - margin-top: 20px; -} - -input[type=checkbox] { - all: revert; - margin-left: 15px; - text-align: left; -} - -.input-symbol-euro { - position: relative; - } - .input-symbol-euro { - margin-left: -5px; - padding-top: 0px; - } - - .input-symbol-euro::after { - position: absolute; - top: 0; - content:"€"; - font-size: 120%; -} - -.tableform .mode { +.mode { display: table-cell; } -.tableform .renseignements { - display: table-cell; +.renseignements { border-bottom: 2px solid lightgrey; border-radius: 3px; background-color: whitesmoke; - padding: 5px; color: black; - width: 100%; } -.tableform .renseignements:focus { +.renseignements:focus { border-bottom: 2px solid var(--a-lec_blue); border-radius: 3px; background-color: aliceblue; } -.tableform .validation { +.validation { background-color: var(--a-lec_blue); box-shadow: 3px 3px 5px grey; color: white; font-weight: bold; border: none; cursor: pointer; - float: right; - margin-bottom: -10px; - margin-top: 15px; } -.tableform .validation:focus { - display: table-cell; +.validation:focus { background-color: var(--a-lec_red); color: white; font-weight: bold; @@ -699,13 +656,23 @@ input[type=checkbox] { box-shadow: none; } -.tableform p img { +.inputs img { all: unset; margin-top: 20px; margin-left: 10px; width: 30vh; } +input[type=radio] { + all: revert; +} + +input[type=checkbox] { + all: revert; + text-align: left; +} + + /* ======================================================================== LITTLE SCREENS