jsCalc/style.css at master · arkch99/jsCalc · 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
102
103
104
105
106
107
108
109
110
111
112
113
.main-container{
	background-color: #364658;
	width: 400px;
	height: 370px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 30px 25px 5px 20px;
	border-style: solid;
	border-radius: 20px;
}

.display{
	background-color: powderblue;
	position: relative;
	text-align: right;
	width: 380px;
	height: 40px;
	font-size: 25px;
	padding-top: 18px;
	padding-right: 20px;
	padding-bottom: 10px;
	border-style: solid;
}

.btn-group{
	width:100%;
	height: 250px;
	display: grid;
	grid-template-columns: repeat(5, auto);
	grid-template-rows: repeat(4, auto);
	gap: 20px 20px;
	padding-top: 20px;
}

#del{
	grid-column: 4/5;
}

#clear{
	grid-column: 5/6;
}

.row-1{
	grid-row: 1/2;
}

.row-2{
	grid-row: 2/3;
}

.row-3{
	grid-row: 3/4;
}

.row-4{
	grid-row: 4/5;
}

#sign{
	grid-column: 3/4;
}

#sqrt{
	grid-column: 4/5;
}

.btn-group button{
	font-size: 18px;
	width: 65px;
	border-radius:10px;
	border-style: solid;
	border-color: black;
	border-width: 2px;
}

.num-button, #decimal-point
{
	background-color:lightgrey;
}

#del, #clear{
	background-color: rgb(216, 114, 114);
	color: white;
}

#decimal-point{
	font-weight: 900;
}

.bin-operator, .un-operator, #equals{
	font-weight: bolder;
	color: white;
	background-color: steelblue;
}

.num-button:hover, #decimal-point:hover
{
	color: white;
	background-color: orange;
}

.bin-operator:hover, .un-operator:hover, #equals:hover{
	background-color: turquoise;
	color: white;
}

#del:hover, #clear:hover{
	background-color: red;
	color: white;
}