sudo-quiz-react/src/App.css at dev · jeetsdev/sudo-quiz-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
@import url("https://sudo-ui.netlify.app/components/components.css");
/* @import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css"); */

/*! Colors here */

:root {
	--color-pri: #29a366;
	--text-pri: #527a66;
	--primary-bg: #f2f2f2;
	--level-color: #00cc7a;
	--level-bg: #00c7771a;
	--points-color: #fabb00;
	--points-bg: #fabb001a;
}

/*! Main menu section style here  */

.main__menu-sec {
	border-right: 2px solid var(--level-color);
}

.main__menu-sec,
.main__profile-sec {
	justify-content: flex-start;
}

.menu__title-sec,
.profile-title,
.main__quiz-title {
	margin: 2rem 0;
}

/* Menu options style here */
.menu__option-sec > a {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

/*! main profile section style here  */

.main__profile-sec {
	border-left: 2px solid var(--level-color);
}

.main__profile-sec h4 {
	margin: 2rem 0;
}

.main__profile-logout {
	margin: 2rem 0;
}

.profile__avatar-sec img {
	border: 2px solid var(--level-bg);
}

/*! Profile stats section style here   */

.profile__stats-sec {
	width: 100%;
}

.stats__level,
.stats__point {
	padding: 0.5rem;
	min-width: 7rem;
	min-height: 9rem;
	display: flex;
	font-weight: 600;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 10%;
}

.stats__icon {
	font-size: 2rem;
}

.stats__level {
	color: var(--level-color);
	background-color: var(--level-bg);
}

.stats__point {
	color: var(--points-color);
	background-color: var(--points-bg);
}

/* ! Loader style here */

.loader__container {
	position: relative;
}
.loader__img {
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	left: 0;
}