Mis en place du RGPD

1 files changed, 107 insertions, 0 deletions

diff --git a/Static/Css/rgpd.css b/Static/Css/rgpd.css
new file mode 100644
index 0000000..023b5ad
--- /dev/null
+++ b/Static/Css/rgpd.css
@@ -0,0 +1,107 @@
+
+/*
+############################################################################
+#                                                                          #
+# Description: CSS spécifique au bandeau RGPD                              #
+#                                                                          #
+############################################################################
+*/
+
+#rgpd {
+    position:          fixed;
+    display:           flex;
+    flex-direction:    column;
+    justify-content:   space-around;
+    z-index:           3;
+    width:             100%;
+    height:            100%;
+    background-color: #10101090;
+}
+
+#rgpd section {
+    display:          flex;
+    flex-direction:   column;
+    position:         relative;
+    width:            -moz-fit-content;
+    width:            fit-content;
+    max-width:        50%;
+    margin-left:      auto;
+    margin-right:     auto;
+    padding:          1em;
+    background-color: var(--bg);
+    border:           4px solid var(--mainSiteColor);
+    border-radius:    10px;
+    font-size:        var(--fontSizeSmallLess);
+}
+
+#rgpd h3 {
+    margin-left:   auto;
+    margin-right:  auto;
+    width:         -moz-fit-content;
+    width:         fit-content;
+    font-size:     var(--fontSizeMedium);
+    border-bottom: var(--mainSiteColor) 2px solid;
+}
+
+#mainRgpd {
+    display: flex;
+    padding: 1em;
+}
+
+#mainRgpd p {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
+}
+
+#rgpd span {
+    display:         flex;
+    flex-direction:  column;
+    justify-content: space-around;
+    padding:         0.2em;
+    font-size:       64px;
+}
+
+#btnRgpd {
+    display:      flex;
+    margin-left:  auto;
+    margin-right: 1em;
+    padding:      1em;
+    gap:          1em;
+}
+
+#rgpdAccept, #rgpdDecline {
+    background-color: var(--bg);
+    border-radius:    5px;
+    padding:          0.4em 0.6em;
+    transition:       all 0.08s ease-in-out;
+}
+
+#rgpdAccept:hover, #rgpdDecline:hover {
+    cursor: pointer;
+    color:  var(--bg);
+}
+
+#rgpdAccept {
+    color: #145814;
+    border: 2px solid #218a21;
+}
+
+#rgpdDecline {
+    color: #5e5e5e;
+    border: 2px solid #a1a1a1;
+}
+
+#rgpdAccept:hover {
+    background-color: #218a21;
+}
+
+#rgpdDecline:hover {
+    background-color: #a1a1a1;
+}
+
+@media screen and (max-width: 768px) {
+    #rgpd section {
+        max-width: 80%;
+    }
+}