diff options
Diffstat (limited to 'Statics/Css/main.css')
| -rw-r--r-- | Statics/Css/main.css | 498 |
1 files changed, 498 insertions, 0 deletions
diff --git a/Statics/Css/main.css b/Statics/Css/main.css new file mode 100644 index 0000000..65b6d89 --- /dev/null +++ b/Statics/Css/main.css @@ -0,0 +1,498 @@ +/* +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 { + /* Opacité de l'élément 0=transparent 1=opaque */ + opacity: 1 !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 */ +.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 */ +#slideshow { + 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; +} + +#slideshow 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; + /* 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; +} + +#slideshow 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: 30%} + 35% {top: 18%} + 100% {top: 18%} +} + +#slideIndicator { + position: absolute; + /* Centrer un élément absolu, gauche moitié puis droite (moins moitié) */ + left: 50%; + transform: translateX(-50%); + margin: 0 auto; + bottom: 10%; +} +#slideIndicator i { + margin-right: 1em; +} + +#slideIndicator i:last-child { + margin-right: none; +} +/* FIN SLIDER */ + +/* GLOBAL */ +#login, +#register, +#userInfo, +#message, +#delete, +#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, +#delete 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, +#delete form, +#search form { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 1em; + padding: 1.5% 5%; + align-items: center; +} + +#search form, +#delete form { + flex-direction: row; +} + +#login label, +#userInfo label, +#register label, +#mission label, +#delete label, +#search label { + width: 80%; + display: flex; +} + +#login i, +#userInfo i, +#register i, +#mission i, +#delete i, +#search i { + width: 90px; + height: 2em; + line-height: 2em; + font-size: 28px; + color: var(--iconColor); + background-color: var(--mainSiteColor); +} + +#myMission table, +#delete table, +#search table { + color: var(--text); + padding: 5%; + border-collapse: collapse; + width: 95%; + margin: 1em auto; +} + +#myMission th, +#delete th, +#search th { + font-size: 15px; + border: 2px solid var(--mainSiteColor); + background-color: var(--tableBg); +} + +#myMission td, +#delete 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"], +#delete 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, +#delete 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 */ |