chore: 💄 halloween theme

cloud-pi-native · Oct 30, 2024 · a3f0d53 · a3f0d53
1 parent 324948f
commit a3f0d53
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 44 deletions.
diff --git a/apps/client/public/halloween.png b/apps/client/public/halloween.png
diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue
@@ -55,53 +55,57 @@ watch(userStore, async () => {
 </script>
 
 <template>
-  <DsfrHeader
-    service-title="Console Cloud π Native"
-    :logo-text="['Ministère', 'de l’intérieur', 'et des outre-mer']"
-    :quick-links="quickLinks"
-  />
-  <DsfrNotice
-    v-if="systemStore.systemSettingsByKey.maintenance?.value === 'on'"
-    title="Le mode Maintenance est actuellement activé"
-    data-testid="maintenance-notice"
-  />
-  <div class="fr-container fr-grid-row fr-mb-8w">
-    <div class="fr-col-12 fr-col-md-3">
-      <SideMenu />
-    </div>
-    <div class="fr-col-12 fr-col-md-9 fr-py-6v">
-      <router-view />
+  <div id="theme" class="halloween">
+    <DsfrHeader
+      service-title="Console Cloud π Native"
+      :logo-text="['Ministère', 'de l’intérieur', 'et des outre-mer']"
+      :quick-links="quickLinks"
+    />
+    <DsfrNotice
+      v-if="systemStore.systemSettingsByKey.maintenance?.value === 'on'"
+      title="Le mode Maintenance est actuellement activé"
+      data-testid="maintenance-notice"
+    />
+    <div class="fr-container fr-grid-row fr-mb-8w ">
+      <div class="fr-col-12 fr-col-md-3">
+        <div class="halloween-sidemenu">
+          <SideMenu />
+        </div>
+      </div>
+      <div class="fr-col-12 fr-col-md-9 fr-py-6v">
+        <router-view />
+      </div>
+      <DsoSnackbar />
+      <SelectProject />
     </div>
-    <DsoSnackbar />
-    <SelectProject />
-  </div>
 
-  <DsfrFooter
-    class="dso-footer"
-    a11y-compliance="partiellement conforme"
-    :mandatory-links="[]"
-  >
-    <template #description>
-      <div
-        class="flex gap-2 justify-end"
-      >
-        <a
-          data-testid="swaggerUrl"
-          :href="swaggerUiPath"
-          title="accéder au swagger"
+    <DsfrFooter
+      class="dso-footer"
+      a11y-compliance="partiellement conforme"
+      :mandatory-links="[]"
+    >
+      <template #description>
+        <div
+          class="flex gap-2 justify-end"
         >
-          swagger
-        </a>
-        <a
-          data-testid="appVersionUrl"
-          :href="`https://github.com/cloud-pi-native/console/releases/tag/${appVersion}`"
-          title="accéder au code source"
-        >
-          {{ appVersion }}
-        </a>
-      </div>
-    </template>
-  </DsfrFooter>
+          <a
+            data-testid="swaggerUrl"
+            :href="swaggerUiPath"
+            title="accéder au swagger"
+          >
+            swagger
+          </a>
+          <a
+            data-testid="appVersionUrl"
+            :href="`https://github.com/cloud-pi-native/console/releases/tag/${appVersion}`"
+            title="accéder au code source"
+          >
+            {{ appVersion }}
+          </a>
+        </div>
+      </template>
+    </DsfrFooter>
+  </div>
 </template>
 
 <style>
@@ -112,4 +116,28 @@ watch(userStore, async () => {
 .fr-header__logo {
   display: none;
 }
+
+.halloween-sidemenu {
+  background-color: var(--background-default-grey);
+}
+
+.halloween {
+  margin: 0;
+  padding: 0;
+}
+
+.halloween::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("/halloween.png");
+  background-size: 100% 100%;
+  background-position: center;
+  opacity: 0.2;
+  z-index: -1;
+  pointer-events: none;
+}
 </style>