-
Notifications
You must be signed in to change notification settings - Fork 0
/
units.css
69 lines (61 loc) · 1.4 KB
/
units.css
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
/* *{border:1px solid black;} */
html{
width:500px;
margin-left:auto;
margin-right:auto;
}
body{
text-align: center;
background: white;
}
#base{
margin:20px;
padding:5px;
}
#base div{
padding: 10px;
text-align: center;
font-weight: 100;
float:left;
width:40px;
font-size: larger;
}
#base div [data-op='multiply'], #base div [data-op='divide']{
background: rgba(255,255,255,0.5);
padding:10px;
cursor: pointer;
}
#base div [data-op='multiply']:hover, #base div [data-op='divide']:hover{
background: grey;
color:white;
}
#base div [data-op='multiply']:active, #base div [data-op='divide']:active{
background: black;
color:white;
}
#m{ background: lightgrey; }
#kg{ background: pink;}
#s{ background: darkorange; }
#A{ background: lightblue; }
#K{ background: tan; }
#cd{ background: gold; }
#mol{ background: lightgreen; }
#frac{padding:20px;}
#frac #top, #frac #bottom{
display: block; height:50px; width:420px; background:#eee;
font-size:xx-large; text-align: center;
}
#top{border-bottom: 1px solid black;}
#stack{width:430px;text-align:left;padding:20px;}
#stack div{display:block;width:430px;}
#stack, #frac{float:left;}
.exp{vertical-align:super;font-size: x-large;}
.unit{padding-left:5px;}
#symbol{font-size:40px; font-weight:bolder; height:40px;}
#name{font-variant:small-caps; font-size:xx-large;height:40px;}
#purpose{color:grey;height:20px;}
footer{
position: fixed;
bottom:10px;
right:10px;
}