styling dashboard

resources/css/pages/stats-dashboard.css

@@ -0,0 +1,136 @@
+@import '../components/circle.css';
+
+.dashboard-widget {
+  @apply pb-12;
+  &__title {
+    @apply !text-2xl text-center !font-semibold !text-blue-600;
+  }
+  &__preview-picture {
+    @apply w-full mx-auto;
+    max-width: 300px;
+    display: block;
+  }
+  &__cta {
+    @apply bg-blue-500 text-lg !text-white py-4 px-6 rounded-full block w-fit mx-auto;
+    text-decoration: none;
+    transition: all 0.3s;
+    cusror: pointer;
+    &:hover {
+      filter: hue-rotate(10deg);
+      scale: 1.05;
+    }
+  }
+  p {
+    @apply text-lg text-slate-500 text-center max-w-xs mx-auto;
+  }
+}
+
+.page-sessions-datas {
+  .game_stats {
+    @apply bg-white my-12 !px-16 !py-6;
+    box-sizing: border-box;
+    .stats-container {
+      @apply grid grid-cols-2 gap-16 overflow-hidden;
+    }
+
+    .donut-average {
+      width: 80px;
+      height: 80px;
+      border: 20px solid rgba(0, 0, 0, 0.1);
+      border-left-color: #7983ff;
+      border-radius: 50%;
+      transform: rotate(90deg);
+    }
+
+    .average-score {
+      /* @apply relative w-fit; */
+      @apply w-48  relative;
+      .text {
+        @apply top-0 left-0;
+        @apply font-bold text-6xl text-blue-600  absolute top-1/2 left-1/2 m-0 p-0;
+        transform: translate(-60%, -50%);
+      }
+      .circular-chart {
+        display: block;
+        max-width: 100%;
+        max-height: 250px;
+        /* background: red; */
+      }
+
+      .circle {
+        @apply stroke-blue-600;
+        /* stroke: #4cc790; */
+        fill: none;
+        stroke-width: 2.8;
+        stroke-linecap: round;
+        animation: progress 1s ease-out forwards;
+        padding: 20px;
+      }
+
+      @keyframes progress {
+        0% {
+          stroke-dasharray: 0 100;
+        }
+      }
+    }
+
+    &__game-title {
+      @apply text-3xl font-semibold text-neutral-800 mt-0;
+    }
+    &__statistics-section {
+      p,
+      li {
+        @apply text-lg text-slate-600;
+      }
+      h3 {
+        @apply text-blue-600 uppercase font-bold text-base my-0 tracking-widest mb-4;
+      }
+      h4 {
+        @apply font-normal text-lg font-medium text-slate-400 my-0;
+      }
+    }
+
+    &__scores-distribution {
+      ul {
+        @apply flex gap-x-8;
+      }
+    }
+
+    .block-data-score {
+      @apply mb-16;
+    }
+    .page-title {
+      @apply text-5xl font-semibold  text-neutral-800 pb-16;
+    }
+    @apply py-12 text-base max-w-screen-xl mx-auto px-4;
+
+    /* .geopraphy-statistics,
+    .game-statistics {
+      @apply grid grid-cols-2 gap-8 overflow-hidden;
+    } */
+
+    .section-title {
+      @apply col-span-2 mb-4;
+    }
+    .data-label {
+      @apply font-medium text-blue-500 underline underline-offset-2;
+      underline-offset: 2px;
+      text-decoration-color: rgba(59, 130, 246, 0.5);
+    }
+    .data-value {
+      @apply font-semibold text-slate-800;
+    }
+    .joueurs {
+      @apply text-slate-400;
+    }
+
+    .countries .data-label {
+      @apply capitalize;
+    }
+  }
+}
+
+#graphic-score-repartition {
+  max-height: 400px;
+  @apply w-fit mt-8;
+}