acss/style.css at master · allwcons/acss · 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

:root{
	--font_size: 10px;
	--a: 1;
	--width:50px;
	--height:100vh;
	--w:50px;
	--secheight:calc( var(--height) - 50px);
	--sidebar_bg: #2c3e50;
	--sidebar_item_hover_bg: #34495e;
	--sidebar_item_active_bg: #1abc9c;
	--sidebar_item_color: #ecf0f1;
	--sidebar_item_hover_color: #bdc3c7;
	--transition_duration: 0.3s;
}
body{
	margin:0;
}
.navbar{
	display:flex;
--if_110aae7a-33e9-4ee0-afed-0578546ac874:#efeeec;--else_110aae7a-33e9-4ee0-afed-0578546ac874:rgb(80,50,100);

	background-color: var(--else_110aae7a-33e9-4ee0-afed-0578546ac874,var(--if_110aae7a-33e9-4ee0-afed-0578546ac874));
	transition: background-color 0.5s ease;
}
.btn svg{
	width: 20px;
}
.btn{

--if_2945a44d-d628-4c66-b4ec-0ab2d907e1eb:#221f3b;--else_2945a44d-d628-4c66-b4ec-0ab2d907e1eb:black;

	background-color: var(--else_2945a44d-d628-4c66-b4ec-0ab2d907e1eb,var(--if_2945a44d-d628-4c66-b4ec-0ab2d907e1eb));
	width: var(--width);
	height: 50px;
--if_03fb8828-f920-4895-8c7c-7052ed8ee346:lightblue;--else_03fb8828-f920-4895-8c7c-7052ed8ee346:yellow;

	color: var(--else_03fb8828-f920-4895-8c7c-7052ed8ee346,var(--if_03fb8828-f920-4895-8c7c-7052ed8ee346));
	display:flex;
	align-items: center;
	justify-content: center;

}
.card{
	background:rgb(51, 164, 239);
--if_b1c7093c-6f83-40fd-be07-08224da1c14d:200px;--else_b1c7093c-6f83-40fd-be07-08224da1c14d:var(--w);

	width:var(--else_b1c7093c-6f83-40fd-be07-08224da1c14d,var(--if_b1c7093c-6f83-40fd-be07-08224da1c14d));
	transition:width 0.5s;
--if_7b207950-c98b-4e0b-96f7-feb9d19552c2:200px;--else_7b207950-c98b-4e0b-96f7-feb9d19552c2:var(--secheight);

	height: var(--else_7b207950-c98b-4e0b-96f7-feb9d19552c2,var(--if_7b207950-c98b-4e0b-96f7-feb9d19552c2));
	overflow: hidden;
}


.sidebar{
	display: flex;
	flex-direction: column;
	width:200px;
	background-color: var(--sidebar_bg);
	height: 100vh;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar-item{
	display: flex;
	padding:10px;
	align-items: center;
	gap:20px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--sidebar_item_color);
	transition: background-color var(--transition_duration), color var(--transition_duration);
	cursor: pointer;
}

.sidebar-item:hover{
	background-color: var(--sidebar_item_hover_bg);
	color: var(--sidebar_item_hover_color);
}

.sidebar-item.active{
	background-color: var(--sidebar_item_active_bg);
	color: var(--sidebar_item_color);
}

.sidebar-item svg{
	width:30px;
	transition: transform var(--transition_duration);
}

.sidebar-item:hover svg{
	transform: scale(1.1);
}