diff --git a/resources/css/pages/stats-dashboard.css b/resources/css/pages/stats-dashboard.css new file mode 100644 index 0000000..0935f6b --- /dev/null +++ b/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; +}