summaryrefslogtreecommitdiff
path: root/Static/Css
diff options
context:
space:
mode:
Diffstat (limited to 'Static/Css')
-rw-r--r--Static/Css/admin.css5
-rw-r--r--Static/Css/footer.css1
-rw-r--r--Static/Css/login.css1
-rw-r--r--Static/Css/main.css85
-rw-r--r--Static/Css/message.css3
-rw-r--r--Static/Css/mission.css7
-rw-r--r--Static/Css/myMission.css1
-rw-r--r--Static/Css/navbar.css3
-rw-r--r--Static/Css/notification.css123
-rw-r--r--Static/Css/register.css4
-rw-r--r--Static/Css/search.css5
-rw-r--r--Static/Css/slideshow.css3
-rw-r--r--Static/Css/userInfo.css5
13 files changed, 198 insertions, 48 deletions
diff --git a/Static/Css/admin.css b/Static/Css/admin.css
index 96d9c03..91a04c1 100644
--- a/Static/Css/admin.css
+++ b/Static/Css/admin.css
@@ -7,12 +7,13 @@
############################################################################
*/
+
/* BUTTONS */
#adminButtons {
display: flex;
justify-content: space-around;
gap: 1em;
- width: 80%;
+ max-width: 80%;
margin-left: auto;
margin-right: auto;
padding: 2em;
@@ -61,4 +62,4 @@
#secAdminMissions form {
flex-direction: column;
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/footer.css b/Static/Css/footer.css
index d0e4c02..ecbc25e 100644
--- a/Static/Css/footer.css
+++ b/Static/Css/footer.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
/* FOOTER */
footer {
min-height: 10vh;
diff --git a/Static/Css/login.css b/Static/Css/login.css
index 0b373b1..2c3b2cc 100644
--- a/Static/Css/login.css
+++ b/Static/Css/login.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
/* MAIN */
#mainLogin form {
display: flex;
diff --git a/Static/Css/main.css b/Static/Css/main.css
index ff1e229..7614cd3 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -6,7 +6,6 @@
# #
############################################################################
-
Sites web utilisés pour le CSS:
https://css-tricks.com/guides/
https://stackoverflow.com/
@@ -16,51 +15,60 @@ Toutes les recherches sont effectuées en anglais
sur mon instance SearX https://searx.debulois.fr
*/
+
:root {
/* Global */
- --mainSiteColor: #c0392b;
- --bodyBg: #fafafa;
- --separatorBg: var(--bodyBg);
- --bg: white;
- --text: black;
+ --mainSiteColor: #c0392b;
+ --bodyBg: #fafafa;
+ --separatorBg: var(--bodyBg);
+ --bg: white;
+ --text: black;
/* Header & navbar */
- --navbarTextColor: var(--text);
- --headerBg: var(--bg);
- --navBg: #f8f8f8;
+ --navbarTextColor: var(--text);
+ --headerBg: var(--bg);
+ --navBg: #f8f8f8;
/* Slideshow */
- --slideText: whitesmoke;
- --slideBg: black;
- --slideStroke: black;
+ --slideText: whitesmoke;
+ --slideBg: black;
+ --slideStroke: black;
/* Footer */
- --footerTextColor: #636e72;
- --footerBgColor: #2d3436;
+ --footerTextColor: #636e72;
+ --footerBgColor: #2d3436;
/* Tableaux */
- --tableText: var(--text);
- --tableBg: var(--bodyBg);
- --tdBorderColor: rgba(0, 0, 0, 0.2);
- --tableStarUnchecked: darkgray;
- --tableStarChecked: orange;
+ --tableText: var(--text);
+ --tableBg: var(--bodyBg);
+ --tdBorderColor: rgba(0, 0, 0, 0.2);
+ --tableStarUnchecked: darkgray;
+ --tableStarChecked: orange;
/* Messages */
- --messageTextErrorColor: red;
- --messageTextSuccessColor: green;
+ --messageTextErrorColor: red;
+ --messageTextSuccessColor: green;
/* Input icon et button */
- --iconColor: white;
- --btnHoverBg: #e74c3c;
+ --iconColor: white;
+ --btnHoverBg: #e74c3c;
/* Input border */
- --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;
+ --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;
+ /* Notification */
+ --notifAsideBg: #f8f8f8;
+ --notifAsideBorder: 4px solid #cf7e39;
+ --notifButtonCloseColor: #1a1a1a;
+ --notifButtonCloseBg: #d3c9c3c9;
+ --notifButtonCloseBorder: solid 1px #6e5e5e;
+ --notifButtonCloseHoverColor: #e7e7e7;
+ --notifButtonCloseHoverBg: #ff5959;
/* Fonts size */
- --fontSizeI: 20px;
- --fontSizeSlideP: 34px;
- --fontSizeSmallPhone: 12px;
- --fontSizeSmallLess: 14px;
- --fontSizeSmall: 16px;
- --fontSizeSmallPlus: 18px;
- --fontSizeMedium: 26px;
- --fontSizeLarge: 28px;
+ --fontSizeI: 20px;
+ --fontSizeSlideP: 34px;
+ --fontSizeSmallPhone: 12px;
+ --fontSizeSmallLess: 14px;
+ --fontSizeSmall: 16px;
+ --fontSizeSmallPlus: 18px;
+ --fontSizeMedium: 26px;
+ --fontSizeLarge: 28px;
}
@font-face {
@@ -184,6 +192,7 @@ main table {
main th {
border: var(--thBorder);
background-color: var(--tableBg);
+
}
main td {
@@ -203,7 +212,7 @@ main input[type="email"],
main input[type="password"] {
padding: 2px;
height: 2.5em;
- font-size: calc(32px / 2.5);
+ font-size: calc(32px / 2.5); /* nécessaire par rapport à quand c'est une div */
border: var(--inputBorder);
border-radius: var(--inputBorderRadius);
}
@@ -237,4 +246,4 @@ main button:hover {
main h3 {
font-size: var(--fontSizeSmallPlus);
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/message.css b/Static/Css/message.css
index d2276ea..22d27cd 100644
--- a/Static/Css/message.css
+++ b/Static/Css/message.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.success {
font-weight: bold;
text-decoration: underline;
@@ -23,4 +24,4 @@
#mainMessage h3 {
border: none;
-} \ No newline at end of file
+}
diff --git a/Static/Css/mission.css b/Static/Css/mission.css
index b9383d9..944227e 100644
--- a/Static/Css/mission.css
+++ b/Static/Css/mission.css
@@ -8,6 +8,7 @@
############################################################################
*/
+
#mainMission form {
display: flex;
flex-direction: column;
@@ -21,6 +22,12 @@
width: 70%;
}
+#mainMission select {
+ height: 3em;
+ font-size: calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
+ border-radius: var(--inputBorderRadius);
+}
+
#mainMission input[type="text"] {
width: inherit;
}
diff --git a/Static/Css/myMission.css b/Static/Css/myMission.css
index 34afff3..ca22ddb 100644
--- a/Static/Css/myMission.css
+++ b/Static/Css/myMission.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
#myMissionButtons {
display: flex;
justify-content: space-around;
diff --git a/Static/Css/navbar.css b/Static/Css/navbar.css
index 6887f0d..91b102b 100644
--- a/Static/Css/navbar.css
+++ b/Static/Css/navbar.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.showNav {
top: 0vh !important;
}
@@ -127,4 +128,4 @@ nav p {
header a:first-child {
min-width: 20%;
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/notification.css b/Static/Css/notification.css
new file mode 100644
index 0000000..beddf4a
--- /dev/null
+++ b/Static/Css/notification.css
@@ -0,0 +1,123 @@
+
+/*
+############################################################################
+# #
+# Description: CSS du message de notification #
+# #
+############################################################################
+https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
+https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+*/
+
+
+.show_notif {
+ left: 2em;
+}
+
+/* Div de la notification */
+aside {
+ z-index: 2; /* Position en profondeur */
+ position: fixed; /* Comment vas être positionné l'élément */
+ left: -75%; /* position à gauche de l'écran (démarre masqué) */
+ bottom: 2em; /* position en bas de l'écran */
+ width: 350px; /* largeur de la div définie selon le contenu */
+ padding: 0.3em; /* marge interne de 1 fois la taille du texte */
+ background-color: var(--notifAsideBg); /* couleur du fond */
+ border: var(--notifAsideBorder); /* taille type et couleur de la bordure */
+ border-radius: 10px; /* arrondie des angles de la bordure */
+ text-align: center; /* le texte est centré */
+ box-shadow: 4px 4px 9px black; /* Ombre, déportation x, deportation y, diffusion, couleur */
+ transition: all 0.6s ease-in-out; /* ajout d'un effet acceleration/decerelation de l'animation */
+}
+
+/* Zone clickable */
+aside a {
+ cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
+}
+
+/* Boutton pour fermer */
+aside button {
+ position: absolute; /* Position fixe relative */
+ right: 0px; /* tout à droite */
+ top: 0px; /* tout en haut */
+ border: none; /* sans bordure*/
+ padding: 0px;
+ margin-top: 4px;
+ margin-right: 4px;
+ color: var(--notifButtonCloseColor);
+ background-color: var(--notifButtonCloseBg);
+ border-radius: 4px;
+ font-size: 19px;
+ width: 23px;
+ line-height: 23px;
+ height: 23px;
+ border: var(--notifButtonCloseBorder);
+ transition: all 0.05s ease-in-out;
+}
+
+aside button:hover {
+ cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
+ color: var(--notifButtonCloseHoverColor);
+ background-color: var(--notifButtonCloseHoverBg);
+}
+
+aside span {
+ float: left; /* float à gauche */
+ position: absolute; /* position fixe relative */
+ left: 0.5em; /* distance a gauche */
+ /* (espace totale(h3, p pad & marg + font-size) - cloche font-size) / 2*/
+ top: calc((52.8px - 32px) / 2); /* centré */
+ font-size: 32px; /* taille de la cloche */
+ animation-name: cloche; /* nom animation keyframe */
+ animation-timing-function: ease-in-out; /* vitesse et style de transition */
+ animation-iteration-count: infinite; /* répété à l'infini */
+ animation-duration: 2.7s; /* duréé de l'animation */
+}
+
+/* Titre de la fenetre */
+aside h3 {
+ font-size: 17px;
+ margin-top: 0px; /* on supprime la marge du haut */
+ padding-top: 0.3em; /* on la remplace avec du padding pour que la zone soit clickable */
+ margin-bottom: 0.3em;
+}
+
+/* Contenu */
+aside p {
+ font-style: italic; /* le texte est en italic */
+ text-decoration: underline;
+ margin-bottom: 0px;
+ padding-bottom: 0.3em;
+ margin-top: 0.3em;
+}
+
+/* Etapes de l'animation */
+@keyframes cloche {
+ 0% {transform: rotate(5deg) scale(1.1);}
+ 4% {transform: rotate(-10deg) scale(1.2);}
+ 8% {transform: rotate(10deg) scale(1.2);}
+ 12% {transform: rotate(-10deg) scale(1.2);}
+ 16% {transform: rotate(10deg) scale(1.2);}
+ 20% {transform: rotate(-10deg) scale(1.2);}
+ 24% {transform: rotate(10deg) scale(1.2);}
+ 28% {transform: rotate(-10deg) scale(1.2);}
+ 32% {transform: rotate(10deg) scale(1.2);}
+ 36% {transform: rotate(-5deg) scale(1.1);}
+ 40% {transform: rotate(0deg) scale(1);}
+ 100% {transform: rotate(0deg);}
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+ .show_notif {
+ bottom: 1em;
+ left: calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+ }
+
+ /* Div de la notification */
+ aside {
+ bottom: -300px;
+ width: 90%;
+ left: calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+ }
+}
diff --git a/Static/Css/register.css b/Static/Css/register.css
index 56808af..9324ad3 100644
--- a/Static/Css/register.css
+++ b/Static/Css/register.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.valid {
color: #338533;
}
@@ -53,6 +54,7 @@
flex-direction: column;
align-items: center;
gap: 0.5em;
+ width: 100%;
}
#mainRegister input[type="email"],
@@ -67,4 +69,4 @@
flex-direction: column;
font-size: var(--fontSizeSmallPhone);
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/search.css b/Static/Css/search.css
index 7362ac9..be96775 100644
--- a/Static/Css/search.css
+++ b/Static/Css/search.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.star {
width: 1.2em !important;
background-color: var(--tableBg) !important;
@@ -51,7 +52,7 @@
#mainSearch select {
height: 3em;
- font-size: calc((var(--fontSizeI) * 2) / 3);
+ font-size: calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
border-radius: var(--inputBorderRadius);
}
@@ -78,4 +79,4 @@
#divSearch {
flex-direction: column;
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/slideshow.css b/Static/Css/slideshow.css
index d2cdaa3..8dd6f39 100644
--- a/Static/Css/slideshow.css
+++ b/Static/Css/slideshow.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.slideDotSelected {
color: var(--mainSiteColor);
transform: scale(1.4);
@@ -72,4 +73,4 @@
#secSlides p {
font-size: var(--fontSizeMedium);
}
-} \ No newline at end of file
+}
diff --git a/Static/Css/userInfo.css b/Static/Css/userInfo.css
index 45d1133..c9113df 100644
--- a/Static/Css/userInfo.css
+++ b/Static/Css/userInfo.css
@@ -7,6 +7,7 @@
############################################################################
*/
+
.jobsListElem {
border-radius: 10px;
background-color: rgb(243, 201, 201);
@@ -51,7 +52,7 @@
#userJob div {
width: 70%;
- font-size: calc(36px / 2.5);
+ font-size: calc(36px / 2.5); /* Pour avoir la meme hauter qu'un input */
height: 2.5em;
line-height: 2.5em;
display: flex;
@@ -86,4 +87,4 @@
#userJob div span{
display: none;
}
-} \ No newline at end of file
+}