path: root/Statics/Css/main.css

/* 
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
*/

/* Déclaration de la palette de couleur */
:root {
    /* GLOBAL */
    --mainSiteColor:      #c0392b;
    /* SEPARATOR */
    --separatorBg:        white;
    /* NAVBAR */
    --navbarText:         black;
    --navbarBg:           white;
    /* SLIDER */
    --slideText:          whitesmoke;
    --slideBg:            black;
    --slideStroke:        black;
    /* MAIN */
    --bg:                 white;
    --text:               black;
    --iconColor:          white;
    --btnHoverBg:         #e74c3c;
    /* TABLES */
    --tableText:          black;
    --tableBg:            #f1f1f1;
    --tableBorder:        rgba(0, 0, 0, 0.2);
    --tableStarUnchecked: darkgray;
    --tableStarChecked:   orange;
    /* FOOTER */
    --footerText:         #636e72;
    --footerBg:           #2d3436;
}

/* Déclaration des fonts */
@font-face {
    /* Nom du font */
    font-family: "akira";
    /* source du font */
    src:          url("../Fonts/akira.otf")
}

@font-face {
    font-family: "SourceSansPro";
    src:         url("../Fonts/SourceSansPro.ttf")
}

/* Déclaration des class */
/* NAVBAR */
.titleNavbar {
    /* Type de font à utiliser */
    font-family: akira;
    /* Couleur du text */
    color:       var(--mainSiteColor) !important;
    /* taille de l'élément flex */
    flex-grow:   1;
}

.userManager{
    /* Seconde ligne si plus de place */
    flex-wrap: wrap;
    flex-grow: 1;
}

.userManager li {
    /* type d'affichage */
    display:     flex;
    /* Alignement verticale */
    align-items: center;
}

.userManager a {
    /* Hauteur de la ligne */
    line-height: 2.5em;
}

.userManager i{
    /* Taille du texte */
    font-size: 1.3em;
}

.language{
    /* hauteur */
    height:          100%;
    display:         flex;
    /* direction du flex */
    flex-direction:  column;
    /* Métode d'espacement des éléments fles */
    justify-content: space-around;
    /* Alignement du texte horizontalement */
    text-align:      center;
    flex-grow:       1;
}
/* FIN NAVBAR */

/* SLIDER */
.slideSelected {
    color:     var(--mainSiteColor);
    /* Transform de type zoom x1,3 */
    transform: scale(1.3);
}

.show_slide {
    /* Opacité de l'élément 0=transparent 1=opaque */
    display: block !important;
}
/* FIN SLIDER */

/* MESSAGE */
.success {
    color:         green;
    /* Type de texte gras */
    font-weight:     bold;
    /* Type du texte sous-ligné */
    text-decoration: underline;
    font-size:       28px;
}

.error {
    color:         red;
    font-weight:     bold;
    text-decoration: underline;
    font-size:       28px;
}
/* FIN MESSAGE */

/* TABLEAU */
.show_table {
    /* Opacité de l'élément 0=transparent 1=opaque */
    display: table !important;
}

.star {
    /* !important prend le dessus sur tout type de déclaration précédente */
    font-size:        20px           !important;
    width:            20%            !important;
    line-height:      1em            !important;
    height:           1em            !important;
    background-color: var(--tableBg) !important;
}

.unchecked {
    color: var(--tableStarUnchecked) !important;
}

.checked {
    color: var(--tableStarChecked) !important;
}

.noBorder {
    /* Bordure */
    border:           none    !important;
    background-color: white !important;
}
/* FIN TABLEAU */

/* GLOBAL */
.separator {
    height:             10vh;
    /* Couleur du fond */
    background-color:   var(--separatorBg);
}

.info {
    /* Style du texte italic */
    font-style: italic;
}

.spacer {
    flex-grow: 2;
}

.flex-center {
    justify-content: center !important;
}

.width-auto {
    width: auto !important;
}
/* FIN GLOBAL */

/* Déclaration globale */
html {
    /* transitions douce lors d'un appel d'id ex: index.php#IdNumero1 */
	scroll-behavior: smooth;
}

body {
    /* Choix du font */
    font-family:     SourceSansPro !important;
    margin:          0px;
    /* taille en vh (view height) pourcentage de hauteur de fenêtre*/
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
}

pre {
    /* Permet d'aller à la ligne */
    white-space: pre-wrap;
    margin:      0.3em 0em;
}

/* Déclaration par ID */
/* NAVBAR */
#navbar {
    /* Index de profondeur */
    z-index:          1;
    height:           10vh;
    display:          flex;
    align-items:      center;
    justify-content:  space-around;
    text-align:       center;
    background-color: var(--navbarBg);
    border-top:       var(--mainSiteColor) solid 1.5vh;
    border-bottom:    var(--mainSiteColor) solid 0.5vh;
    color:            var(--navbarText);
}

#navbar ul {
    display:              flex;
    justify-content:      space-around;
    column-gap:           15px;
    list-style-type:      none;
    /* Marge extérieure de l'élément */
    margin-block-start:   0px;
    margin-block-end:     0px;
    /* Marge intérieure de l'élément */
    padding-inline-start: 0px;
}

#navbar i {
    margin-right: 0.4em;
}

#navbar a {
    color:           var(--navbarText);
    text-decoration: none;
    transition:      0.15s;
}

#navbar a:hover {
    color:     var(--mainSiteColor);
    transform: scale(1.1);
    z-index:   2;
}
/* FIN NAVBAR */

/* SLIDER */
#slides {
    width:               100%;
    height:              70vh;
    background-color:    var(--navbarBg);
    /* Image de fond du slider */
    background-image:    url("/Medias/Images/slide0.jpg");
    /* Remplissage du fond en zoom */
    background-size:     cover;
    /* Non répétition de l'image de fond  */
    background-repeat:   no-repeat;
    /* Centrage de l'image */
    background-position: center;
    text-align:          center;
    transition:          background-image 0.3s linear;
}

#slides p {
    position:                  absolute;
    display:                   inline-block;
    left:                      0; 
    right:                     0; 
    margin-left:               auto; 
    margin-right:              auto;
    max-width:                 80%;
    font-size:                 48px;
    color:                     var(--slideText);
    /* opacity:                   0; */
    display: none;
    /* Aniamtion liée */
    animation-name:            textSlide;
    /* Durée de l'animation */
    animation-duration:        5s;
    /* Nombre de répétition de l'animation */
    animation-iteration-count: infinite;
}

#slides p span {
    font-family: akira;
    color:       var(--mainSiteColor);
    /* Ombre du texte: positionX, positionY, Etendue, Fondue */
    text-shadow:
         1px  1px 0 var(--slideStroke),          
         1px -1px 0 var(--slideStroke),
        -1px  1px 0 var(--slideStroke),
        -1px -1px 0 var(--slideStroke);
}

/* Etapes de l'animation */
@keyframes textSlide {
    0%    {top: 29%}
    35%   {top: 18%}
    100%  {top: 18%}
}

#slideDots {
    position:  absolute;
    /* Centrer un élément absolu, gauche moitié puis droite (moins moitié) */
    left:      50%;
    transform: translateX(-50%);
    margin:    0 auto;
    bottom:    10%;
}
#slideDots i {
    margin-right: 1em;
}

#slideDots i:last-child {
    margin-right: none;
}
/* FIN SLIDER */

/* GLOBAL */
#login,
#register,
#userInfo,
#message,
#admin,
#mission,
#myMission,
#search {
    width:             80%;
    min-height:        70vh;
    /* margin left & right en auto = centré */
    margin-left:       auto;
    margin-right:      auto;
    display:           flex;
    flex-direction:    column;
    justify-content:   center;
    text-align:        center;
    border-top:        1.5vh solid var(--mainSiteColor);
    border-right:      0.5vh solid var(--mainSiteColor);
    border-bottom:     0.5vh solid var(--mainSiteColor);
    border-left:       0.5vh solid var(--mainSiteColor);
    background-color:  var(--bg);
    color:             var(--text);
}

#login      h2,
#register   h2,
#userInfo   h2,
#message    h2,
#admin      h2,
#search     h2,
#mission    h2,
#myMission  h2 {
    display:       inline-block;
    margin-left:   auto;
    margin-right:  auto;
    padding:       1.5% 5%;
    border-bottom: var(--mainSiteColor) 0.5vh solid;
}

#login    form,
#userInfo form,
#register form,
#mission  form,
#admin    form,
#search   form {
    display:         flex;
    flex-direction:  column;
    justify-content: space-around;
    gap:             1em;
    padding:         1.5% 5%;
    align-items:     center;
}

#search form,
#admin  form {
    flex-direction: row;
}

#login    label,
#userInfo label,
#register label,
#mission  label,
#admin    label,
#search   label {
    width:   80%;
    display: flex;
}

#login    i,
#userInfo i,
#register i,
#mission  i,
#admin    i,
#search   i {
    width:            90px;
    height:           2em;
    line-height:      2em;
    font-size:        28px;
    color:            var(--iconColor);
    background-color: var(--mainSiteColor);
}

#myMission table,
#admin     table,
#search    table {
    color:           var(--text);
    padding:         5%;
    border-collapse: collapse;
    width:           95%;
    margin:          1em auto;
}

#myMission table {
    display: none;
}

#myMission th,
#admin     th,
#search    th {
    font-size:        15px;
    border:           2px solid var(--mainSiteColor);
    background-color: var(--tableBg);
}

#myMission td,
#admin     td,
#search    td {

    border:           2px solid var(--tableBorder);
    background-color: var(--tableBg);
}

#userInfo input[type="text"],
#mission  input[type="text"],
#login    input[type="email"],
#login    input[type="password"],
#register input[type="email"],
#search   input[type="search"],
#register input[type="password"] {
    width:   inherit;
    border:  0.5vh solid var(--mainSiteColor);
    padding: 1em;
}

#mission select {
    height:        2.5em;
    line-height:   2.5em;
    margin-top:    auto;
    margin-bottom: auto;
    margin-left:   1em;
}

#userInfo textarea,
#mission  textarea {
    width:  83%;
    height: 3.4em;
    border: 0.5vh solid var(--mainSiteColor);
}

#login    input[type="submit"],
#userInfo input[type="submit"],
#mission  input[type="submit"],
#search   input[type="submit"],
#admin    input[type="submit"],
#register input[type="submit"] {
    font-size:        17px;
    font-weight:      bold;
    height:           2.5em;
    border:           0.15em solid var(--mainSiteColor);
    background-color: var(--bg);
    border-radius:    3px;
    padding:          0% 0.7em;
}

#login    input[type="submit"]:hover,
#userInfo input[type="submit"]:hover,
#mission  input[type="submit"]:hover,
#search   input[type="submit"]:hover,
#admin    input[type="submit"]:hover,
#register input[type="submit"]:hover {
    cursor:             pointer;
    color:              var(--bg);
    background-color:   var(--btnHoverBg);
}

#message p {
    font-size: 20px;
}
/* FIN GLOBAL */

/* FOOTER */
#footer {
    min-height:         10vh;
    display:            flex;
    flex-direction:     column;
    text-align:         center;
    color:              var(--footerText);
    background-color:   var(--footerBg);
}
/* FIN FOOTER */