Merge branch 'dev' into features/notifications

# Conflicts: # package-lock.json # package.json # src/components/Header/Header.jsx
2026-01-12 00:15:16 +01:00
parent 69e7fdb35c 007ba0b758
commit 6da4880f0d
42 changed files with 2469 additions and 1656 deletions
@@ -0,0 +1,119 @@
+.leftBlock {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: calc(100vh - 260px);
+  margin-bottom: auto;
+}
+
+.participationHeader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.partiText {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2%;
+  margin-top: 2%;
+  animation: slideInEvent 2s;
+}
+
+.partiText label {
+  font-size: 20px;
+  text-align: right;
+  transition: all 0.3s ease;
+}
+
+.chartContainer {
+  max-width: 80%;
+  width: 400px;
+  height: auto;
+  margin: 0 auto;
+  position: relative;
+  animation: slideEvent2 2s;
+}
+
+.chartWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.chartPercentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  font-size: 60px;
+  font-weight: bold;
+  color: #333;
+}
+
+@keyframes slideEvent2 {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInEvent {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.formControl {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.formDesign {
+  margin: 0 auto;
+  width: fit-content;
+}
+
+@media screen and (max-width: 760px) {
+  .partiText {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .partiText label {
+    text-align: center;
+  }
+
+  .leftBlock {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: fit-content;
+    margin-bottom: auto;
+    margin-top: 30px;
+  }
+  .chartContainer{
+    height:fit-content;
+  }
+
+}