calculator/style.css at master · pullant/calculator · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
@font-face {
	font-family: 'JetBrainsMono';
	src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: darkslategray ;
	height: 100vh;
	height: 100dvh;
	margin: 0;
}

main {
	font-family: JetBrainsMono, monospace;
	color: darkslategray;
	display: flex;
	flex-direction: column;
	height: 80vh;
	width: 60vh;
	height: 80dvh;
	width: 60dvh;
	margin-right: 1dvh;
}
main > * {
	flex: 1;
	margin-top: 1dvh;
}

#history,
#display {
	color: white;
	margin-left: 3dvh;
	margin-right: 2dvh;
	overflow: auto;
	white-space: nowrap;
	scrollbar-color: slategray darkslategray;
}
#display {
	font-size: 4dvh;
}
#history {
	font-size: 2dvh;
}

#operators,
#first-row,
#second-row,
#third-row,
#forth-row {
	display: flex;
	user-select: none; /*prevent selection when double click numbers*/
}

#operators > *,
#first-row > *,
#second-row > *,
#third-row > *,
#forth-row > * {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1dvh;
}
#operators > * {
	border-radius: 50%;
	background-color: slategray;
}
#first-row > *,
#second-row > *,
#third-row > *,
#forth-row > * {
	font-size: 3dvh;
	border-radius: 35%;
	background-color: peachpuff;
}

#operators > * > * {
	width: 20%;
	pointer-events: none; /* Make the image non-interactive so click triggers events */
}

#zero {
	flex: 2; /* 2 1 0% */
	flex-basis: 1dvh;
	border-radius: 50%;
}

#backspace {
	border-radius: 20%;
}

#clear {
	background-color: salmon;
	border-radius: 20%;
}

#equalsA {
	background-color: darkseagreen;
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
	border-bottom-left-radius: 0%;
	border-bottom-right-radius: 0%;
}
#equalsB {
	background-color: darkseagreen;
	align-items: flex-start;
	border-top-left-radius: 0%;
	border-top-right-radius: 0%;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	margin-top: -2dvh;
}
#equalsB > * {
	width: 20%;
	margin-top: calc(((60dvh - 4dvh) / 4 * 0.20 * ( 8.1280003 / 10.921991 ) / 2 * -1 ) + 1.5dvh);
	/*
	(page width - margins) / (4 elements in row) => width of container
	 * (size of image width: 20% ) => width of image
	 * (ratio H / W) => height of the image
	 / 2 (moved it half way) (make it negative) => centered based on width on the edge of container
	 - (half margin of default container) */
	pointer-events: none;
}