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;
    --bodyBg:             #fafafa;  
    /* SEPARATOR */
    --separatorBg:        #fafafa;
    /* 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:            #fafafa;
    --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_block {
    /* Opacité de l'élément 0=transparent 1=opaque */
    display: block !important;
}
/* FIN SLIDER */

.show_flex {
    /* Opacité de l'élément 0=transparent 1=opaque */
    display: flex !important;
    flex-direction: column;
}

/* 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;
    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;
    background-color: var(--bodyBg);
}

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

/* Déclaration par ID */
/* NAVBAR */
nav {
    /* 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 6px;
    border-bottom:    var(--mainSiteColor) solid 3px;
    color:            var(--navbarText);
}

nav 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;
}

nav i {
    margin-right: 0.4em;
}

nav a {
    color:           var(--navbarText);
    text-decoration: none;
    transition:      all 0.15s ease-in-out;
}

nav 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 */
main {
    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:        6px solid var(--mainSiteColor);
    border-right:      3px solid var(--mainSiteColor);
    border-bottom:     3px solid var(--mainSiteColor);
    border-left:       3px solid var(--mainSiteColor);
    border-radius:     5px;
    background-color:  var(--bg);
    color:             var(--text);
}

main h2 {
    display:       inline-block;
    margin-left:   auto;
    margin-right:  auto;
    padding:       1.5% 5%;
    border-bottom: var(--mainSiteColor) 0.5vh solid;
}

#mainAdmin section {
    display: none;
}

#mainLogin    form,
#mainUserInfo form,
#mainRegister form,
#mainMission  form,
#mainAdmin    form,
#mainSearch   form {
    display:         flex;
    flex-direction:  column;
    justify-content: space-around;
    gap:             1em;
    padding:         1.5% 5%;
    align-items:     center;
}

#mainSearch form,
#mainAdmin  form {
    flex-direction: row;
}

#mainLogin    label,
#mainUserInfo label,
#mainRegister label,
#mainMission  label,
#mainAdmin    label,
#mainSearch   label {
    width:   80%;
    display: flex;
}

#mainLogin    i,
#mainUserInfo i,
#mainRegister i,
#mainMission  i,
#mainAdmin    i,
#mainSearch   i {
    width:            90px;
    height:           2em;
    line-height:      2em;
    font-size:        28px;
    color:            var(--iconColor);
    background-color: var(--mainSiteColor);
    border-radius: 5px 0px 0px 5px;
}

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

#mainMyMission table {
    display: none;
}

#mainMyMission th,
#mainAdmin     th,
#mainSearch    th {
    font-size:        15px;
    border:           2px solid var(--mainSiteColor);
    background-color: var(--tableBg);
}

#mainMyMission td,
#mainAdmin     td,
#mainSearch    td {

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

#mainUserInfo input[type="text"],
#mainMission  input[type="text"],
#mainLogin    input[type="email"],
#mainLogin    input[type="password"],
#mainRegister input[type="email"],
#mainSearch   input[type="search"],
#mainRegister input[type="password"] {
    width:   inherit;
    border:  3px solid var(--mainSiteColor);
    border-radius: 0px 5px 5px 0px;
    padding: 0.5em;
}

#userJob {
    justify-content: space-between;
}

#userJobs i {
    border-radius: 5px;
}

#userJob select {
    height:        2.5em;
    line-height:   2.5em;
    margin-top:    auto;
    margin-bottom: auto;
}

#userJob  button[type="button"] {
    margin-top:    auto;
    margin-bottom: auto;
    margin-right: 3em;
    font-size:        16px;
    height:           2em;
    border:           2px solid var(--mainSiteColor);
    background-color: var(--bg);
    border-radius:    5px;
    padding:          0em 1em;
    transition:       all 0.1s ease-in-out;
}

#userJob  button[type="button"]:hover {
    cursor:             pointer;
    color:              var(--bg);
    background-color:   var(--btnHoverBg);
}

#jobsList {
    border: 3px solid var(--mainSiteColor);
    border-radius: 5px;
    padding: 2em 5em;
    list-style: circle;
}

#jobsList > li > button {
    border: none;
    background-color: inherit;
}

#jobsList > li > button > i {
    background-color: inherit;
    color: var(--mainSiteColor);
    border: 2px solid grey;
    border-radius: 4px;
    font-size:   22px;
    width:       1.3em;
    height:      1.3em;
    line-height: 1.3em;
    transition:       all 0.15s ease-in-out;
}

#jobsList > li > button > i:hover {
    background-color: var(--btnHoverBg);
    color: whitesmoke;
    cursor:  pointer;
}

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

#mainUserInfo textarea,
#mainMission  textarea {
    width:  83%;
    height: 3.4em;
    border: 0.5vh solid var(--mainSiteColor);
    border-radius: 0px 5px 5px 0px;
}

#mainLogin    input[type="submit"],
#mainUserInfo input[type="submit"],
#mainMission  input[type="submit"],
#mainSearch   input[type="submit"],
#mainAdmin    input[type="submit"],
#mainRegister input[type="submit"] {
    font-size:        17px;
    font-weight:      bold;
    height:           2.5em;
    border:           0.15em solid var(--mainSiteColor);
    background-color: var(--bg);
    border-radius:    5px;
    padding:          0% 0.7em;
    transition:       all 0.1s ease-in-out;
}

#mainLogin    input[type="submit"]:hover,
#mainUserInfo input[type="submit"]:hover,
#mainMission  input[type="submit"]:hover,
#mainSearch   input[type="submit"]:hover,
#mainAdmin    input[type="submit"]:hover,
#mainRegister input[type="submit"]:hover {
    cursor:             pointer;
    color:              var(--bg);
    background-color:   var(--btnHoverBg);
}

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