summaryrefslogtreecommitdiff
path: root/Statics/Css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'Statics/Css/main.css')
-rw-r--r--Statics/Css/main.css246
1 files changed, 157 insertions, 89 deletions
diff --git a/Statics/Css/main.css b/Statics/Css/main.css
index 12e84e0..cd3ab65 100644
--- a/Statics/Css/main.css
+++ b/Statics/Css/main.css
@@ -12,8 +12,9 @@ sur mon instance SearX https://searx.debulois.fr
:root {
/* GLOBAL */
--mainSiteColor: #c0392b;
+ --bodyBg: #fafafa;
/* SEPARATOR */
- --separatorBg: white;
+ --separatorBg: #fafafa;
/* NAVBAR */
--navbarText: black;
--navbarBg: white;
@@ -28,7 +29,7 @@ sur mon instance SearX https://searx.debulois.fr
--btnHoverBg: #e74c3c;
/* TABLES */
--tableText: black;
- --tableBg: #f1f1f1;
+ --tableBg: #fafafa;
--tableBorder: rgba(0, 0, 0, 0.2);
--tableStarUnchecked: darkgray;
--tableStarChecked: orange;
@@ -105,12 +106,18 @@ sur mon instance SearX https://searx.debulois.fr
transform: scale(1.3);
}
-.show_slide {
+.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;
@@ -192,24 +199,26 @@ html {
body {
/* Choix du font */
- font-family: SourceSansPro !important;
+ 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 */
-#navbar {
+nav {
/* Index de profondeur */
z-index: 1;
height: 10vh;
@@ -218,12 +227,12 @@ pre {
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;
+ border-top: var(--mainSiteColor) solid 6px;
+ border-bottom: var(--mainSiteColor) solid 3px;
color: var(--navbarText);
}
-#navbar ul {
+nav ul {
display: flex;
justify-content: space-around;
column-gap: 15px;
@@ -235,17 +244,17 @@ pre {
padding-inline-start: 0px;
}
-#navbar i {
+nav i {
margin-right: 0.4em;
}
-#navbar a {
+nav a {
color: var(--navbarText);
text-decoration: none;
- transition: 0.15s;
+ transition: all 0.15s ease-in-out;
}
-#navbar a:hover {
+nav a:hover {
color: var(--mainSiteColor);
transform: scale(1.1);
z-index: 2;
@@ -325,14 +334,7 @@ pre {
/* FIN SLIDER */
/* GLOBAL */
-#login,
-#register,
-#userInfo,
-#message,
-#admin,
-#mission,
-#myMission,
-#search {
+main {
width: 80%;
min-height: 70vh;
/* margin left & right en auto = centré */
@@ -342,22 +344,16 @@ pre {
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);
+ 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);
}
-#login h2,
-#register h2,
-#userInfo h2,
-#message h2,
-#admin h2,
-#search h2,
-#mission h2,
-#myMission h2 {
+main h2 {
display: inline-block;
margin-left: auto;
margin-right: auto;
@@ -365,12 +361,16 @@ pre {
border-bottom: var(--mainSiteColor) 0.5vh solid;
}
-#login form,
-#userInfo form,
-#register form,
-#mission form,
-#admin form,
-#search form {
+#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;
@@ -379,38 +379,39 @@ pre {
align-items: center;
}
-#search form,
-#admin form {
+#mainSearch form,
+#mainAdmin form {
flex-direction: row;
}
-#login label,
-#userInfo label,
-#register label,
-#mission label,
-#admin label,
-#search label {
+#mainLogin label,
+#mainUserInfo label,
+#mainRegister label,
+#mainMission label,
+#mainAdmin label,
+#mainSearch label {
width: 80%;
display: flex;
}
-#login i,
-#userInfo i,
-#register i,
-#mission i,
-#admin i,
-#search i {
+#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;
}
-#myMission table,
-#admin table,
-#search table {
+#mainMyMission table,
+#mainAdmin table,
+#mainSearch table {
color: var(--text);
padding: 5%;
border-collapse: collapse;
@@ -418,39 +419,104 @@ pre {
margin: 1em auto;
}
-#myMission table {
+#mainMyMission table {
display: none;
}
-#myMission th,
-#admin th,
-#search th {
+#mainMyMission th,
+#mainAdmin th,
+#mainSearch th {
font-size: 15px;
border: 2px solid var(--mainSiteColor);
background-color: var(--tableBg);
}
-#myMission td,
-#admin td,
-#search td {
+#mainMyMission td,
+#mainAdmin td,
+#mainSearch 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"] {
+#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: 0.5vh solid var(--mainSiteColor);
- padding: 1em;
+ 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;
}
-#mission select {
+#mainMission select {
height: 2.5em;
line-height: 2.5em;
margin-top: auto;
@@ -458,46 +524,48 @@ pre {
margin-left: 1em;
}
-#userInfo textarea,
-#mission textarea {
+#mainUserInfo textarea,
+#mainMission textarea {
width: 83%;
height: 3.4em;
border: 0.5vh solid var(--mainSiteColor);
+ border-radius: 0px 5px 5px 0px;
}
-#login input[type="submit"],
-#userInfo input[type="submit"],
-#mission input[type="submit"],
-#search input[type="submit"],
-#admin input[type="submit"],
-#register input[type="submit"] {
+#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: 3px;
+ border-radius: 5px;
padding: 0% 0.7em;
+ transition: all 0.1s ease-in-out;
}
-#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 {
+#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);
}
-#message p {
+#mainMessage p {
font-size: 20px;
}
/* FIN GLOBAL */
/* FOOTER */
-#footer {
+footer {
min-height: 10vh;
display: flex;
flex-direction: column;