146 lines
3.3 KiB
CSS
146 lines
3.3 KiB
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;
|
|
|
|
.page-title {
|
|
@apply text-5xl font-semibold text-neutral-800 pb-16;
|
|
}
|
|
&__stats-container {
|
|
@apply grid md:grid-cols-2 gap-16 overflow-hidden;
|
|
}
|
|
&__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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
.download-btns {
|
|
@apply flex flex-col md:flex-row gap-x-12 gap-y-4 justify-center my-12;
|
|
.dowload-stats {
|
|
@apply bg-blue-600 text-white font-medium uppercase tracking-widest block py-4 px-6 rounded-full w-fit;
|
|
transition: all 0.3s;
|
|
}
|
|
.dowload-stats:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
.block-data-score {
|
|
@apply mb-16;
|
|
}
|
|
}
|
|
|
|
#graphic-score-repartition {
|
|
max-height: 400px;
|
|
@apply w-fit mt-8;
|
|
}
|