summaryrefslogtreecommitdiff
path: root/Static/Css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'Static/Css/main.css')
-rw-r--r--Static/Css/main.css214
1 files changed, 214 insertions, 0 deletions
diff --git a/Static/Css/main.css b/Static/Css/main.css
new file mode 100644
index 0000000..a602db3
--- /dev/null
+++ b/Static/Css/main.css
@@ -0,0 +1,214 @@
+/*
+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
+*/
+
+:root {
+ --mainSiteColor: #c0392b;
+ --bodyBg: #fafafa;
+ --separatorBg: var(--bodyBg);
+ --bg: white;
+ --text: black;
+
+ --navbarTextColor: var(--text);
+ --headerBg: var(--bg);
+ --navBg: #f8f8f8;
+
+ --slideText: whitesmoke;
+ --slideBg: black;
+ --slideStroke: black;
+
+ --footerTextColor: #636e72;
+ --footerBgColor: #2d3436;
+
+ --iconColor: white;
+ --btnHoverBg: #e74c3c;
+
+ --tableText: var(--text);
+ --tableBg: var(--bodyBg);
+ --tdBorderColor: rgba(0, 0, 0, 0.2);
+ --tableStarUnchecked: darkgray;
+ --tableStarChecked: orange;
+
+ --messageTextErrorColor: red;
+ --messageTextSuccessColor: green;
+
+ --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;
+
+ --fontSizeI: 20px;
+ --fontSizeSlideP: 34px;
+ --fontSizeSmall: 16px;
+ --fontSizeSmallPlus: 18px;
+ --fontSizeMedium: 26px;
+ --fontSizeLarge: 28px;
+}
+
+@font-face {
+ font-family: "akira";
+ src: url("../Fonts/akira.otf")
+}
+
+@font-face {
+ font-family: "SourceSansPro";
+ src: url("../Fonts/SourceSansPro.ttf")
+}
+
+.show_flex {
+ display: flex !important;
+ flex-direction: column;
+}
+
+.show_block {
+ display: block !important;
+}
+
+.noBorder {
+ border: none !important;
+ background-color: var(--bg) !important;
+}
+
+.separator {
+ height: 10vh;
+ background-color: var(--separatorBg);
+}
+
+.info {
+ font-style: italic;
+}
+
+.spacer {
+ flex-grow: 2;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: SourceSansPro;
+ font-size: var(--fontSizeSmall);
+ margin: 0px;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: var(--bodyBg);
+ color: var(--textColor);
+}
+
+main {
+ width: 80%;
+ min-height: 70vh;
+ 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: 3px;
+ background-color: var(--bg);
+ color: var(--textColor);
+}
+
+main h2 {
+ max-width: 80%;
+ font-size: var(--fontSizeLarge);
+ margin-left: auto;
+ margin-right: auto;
+ padding: 1.5% 3%;
+ border-bottom: var(--mainSiteColor) 3px solid;
+}
+
+main h3 {
+ max-width: 80%;
+ font-size: var(--fontSizeMedium);
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0.5% 3%;
+ border-bottom: var(--mainSiteColor) 2px solid;
+}
+
+main label {
+ display: flex;
+ justify-content: center;
+}
+
+main i {
+ width: 60px;
+ margin: 0px !important; /* important à cause de -> flag.css */
+ height: 2em !important; /* important à cause de -> all.css fontawesome*/
+ line-height: 2em !important; /* important à cause de -> all.css fontawesome*/
+ font-size: var(--fontSizeI);
+ color: var(--iconColor);
+ background-color: var(--mainSiteColor);
+ border-radius: var(--iBorderRadius);
+}
+
+main table {
+ display: block;
+ Overflow-x: auto;
+ Overflow-y: auto;
+ color: var(--textColor);
+ padding: 1em;
+ border-collapse: collapse;
+ max-width: 95%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+main th {
+ font-size: var(--fontSizeSmallPlus);
+ border: var(--thBorder);
+ background-color: var(--tableBg);
+}
+
+main td {
+ border: var(--tdBorder);
+ background-color: var(--tableBg);
+}
+
+
+select {
+ height: 1.6em;
+ line-height: 1.6em;
+ border-radius: 3px;
+ border: var(--inputBorder);
+}
+
+main input[type="text"],
+main input[type="email"],
+main input[type="password"] {
+ border: var(--inputBorder);
+ border-radius: var(--inputBorderRadius);
+}
+
+main input[type="submit"],
+main button {
+ color: var(--textColor);
+ font-size: var(--fontSizeSmall);
+ border: var(--inputBorder);
+ background-color: var(--bg);
+ border-radius: 5px;
+ padding: 0.2em 0.3em;
+ transition: all 0.08s ease-in-out;
+}
+
+main input[type="submit"]:hover,
+main button:hover {
+ cursor: pointer;
+ color: var(--bg);
+ background-color: var(--btnHoverBg);
+}