Révision complète du css et modification du js principalement

1 files changed, 214 insertions, 0 deletions

diff --git a/Static/Css/main.css b/Static/Css/main.css
new file mode 100644
index 0000000..a602db3
--- /dev/null
+++ b/Static/Css/main.css
@@ -0,0 +1,214 @@
+/* 
+Sites web utilisés pour le CSS:
+https://css-tricks.com/guides/
+https://stackoverflow.com/
+https://www.w3schools.com/css/default.asp
+
+Toutes les recherches sont effectuées en anglais
+sur mon instance SearX https://searx.debulois.fr
+*/
+
+:root {
+    --mainSiteColor:           #c0392b;
+    --bodyBg:                  #fafafa;  
+    --separatorBg:              var(--bodyBg);
+    --bg:                      white;
+    --text:                    black;
+
+    --navbarTextColor:          var(--text);
+    --headerBg:                 var(--bg);
+    --navBg:                   #f8f8f8;
+
+    --slideText:               whitesmoke;
+    --slideBg:                 black;
+    --slideStroke:             black;
+
+    --footerTextColor:         #636e72;
+    --footerBgColor:           #2d3436;
+
+    --iconColor:               white;
+    --btnHoverBg:              #e74c3c;
+
+    --tableText:                var(--text);
+    --tableBg:                  var(--bodyBg);
+    --tdBorderColor:           rgba(0, 0, 0, 0.2);
+    --tableStarUnchecked:      darkgray;
+    --tableStarChecked:        orange;
+
+    --messageTextErrorColor:   red;
+    --messageTextSuccessColor: green;
+
+    --inputBorder:              2px solid var(--mainSiteColor);
+    --thBorder:                 2px solid var(--mainSiteColor);
+    --tdBorder:                 2px solid var(--tdBorderColor);
+    --iBorderRadius:            5px 0px 0px 5px;
+    --inputBorderRadius:        0px 5px 5px 0px;
+
+    --fontSizeI:                20px;
+    --fontSizeSlideP:           34px;
+    --fontSizeSmall:            16px;
+    --fontSizeSmallPlus:        18px;
+    --fontSizeMedium:           26px;
+    --fontSizeLarge:            28px;
+}
+
+@font-face {
+    font-family: "akira";
+    src:          url("../Fonts/akira.otf")
+}
+
+@font-face {
+    font-family: "SourceSansPro";
+    src:         url("../Fonts/SourceSansPro.ttf")
+}
+
+.show_flex {
+    display:        flex !important;
+    flex-direction: column;
+}
+
+.show_block {
+    display: block !important;
+}
+
+.noBorder {
+    border:           none !important;
+    background-color: var(--bg) !important;
+}
+
+.separator {
+    height:             10vh;
+    background-color:   var(--separatorBg);
+}
+
+.info {
+    font-style: italic;
+}
+
+.spacer {
+    flex-grow: 2;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+    font-family:     SourceSansPro;
+    font-size:       var(--fontSizeSmall);
+    margin:          0px;
+    min-height:      100vh;
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-between;
+    background-color: var(--bodyBg);
+    color:            var(--textColor);
+}
+
+main {
+    width:             80%;
+    min-height:        70vh;
+    margin-left:       auto;
+    margin-right:      auto;
+    display:           flex;
+    flex-direction:    column;
+    justify-content:   center;
+    text-align:        center;
+    border-top:        6px solid var(--mainSiteColor);
+    border-right:      3px solid var(--mainSiteColor);
+    border-bottom:     3px solid var(--mainSiteColor);
+    border-left:       3px solid var(--mainSiteColor);
+    border-radius:     3px;
+    background-color:  var(--bg);
+    color:             var(--textColor);
+}
+
+main h2 {
+    max-width:     80%;
+    font-size:     var(--fontSizeLarge);
+    margin-left:   auto;
+    margin-right:  auto;
+    padding:       1.5% 3%;
+    border-bottom: var(--mainSiteColor) 3px solid;
+}
+
+main h3 {
+    max-width:     80%;
+    font-size:     var(--fontSizeMedium);
+    margin-left:   auto;
+    margin-right:  auto;
+    padding:       0.5% 3%;
+    border-bottom: var(--mainSiteColor) 2px solid;
+}
+
+main label {
+    display:         flex;
+    justify-content: center;
+}
+
+main i {
+    width:            60px;
+    margin:           0px !important; /* important à cause de -> flag.css */
+    height:           2em !important; /* important à cause de -> all.css fontawesome*/
+    line-height:      2em !important; /* important à cause de -> all.css fontawesome*/
+    font-size:        var(--fontSizeI);
+    color:            var(--iconColor);
+    background-color: var(--mainSiteColor);
+    border-radius:    var(--iBorderRadius);
+}
+
+main table {
+    display:         block;
+    Overflow-x:      auto;
+    Overflow-y:      auto;
+    color:           var(--textColor);
+    padding:         1em;
+    border-collapse: collapse;
+    max-width:       95%;
+    margin-left:     auto;
+    margin-right:    auto;
+}
+
+main th {
+    font-size:        var(--fontSizeSmallPlus);
+    border:           var(--thBorder);
+    background-color: var(--tableBg);
+}
+
+main td {
+    border:           var(--tdBorder);
+    background-color: var(--tableBg);
+}
+
+
+select {
+    height:        1.6em;
+    line-height:   1.6em;
+    border-radius: 3px;
+    border:        var(--inputBorder);
+}
+
+main input[type="text"],
+main input[type="email"],
+main input[type="password"] {
+    border:        var(--inputBorder);
+    border-radius: var(--inputBorderRadius);
+}
+
+main input[type="submit"],
+main button {
+    color:            var(--textColor);
+    font-size:        var(--fontSizeSmall);
+    border:           var(--inputBorder);
+    background-color: var(--bg);
+    border-radius:    5px;
+    padding:          0.2em 0.3em;
+    transition:       all 0.08s ease-in-out;
+}
+
+main input[type="submit"]:hover,
+main button:hover {
+    cursor:             pointer;
+    color:              var(--bg);
+    background-color:   var(--btnHoverBg);
+}