-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.css
121 lines (106 loc) · 1.83 KB
/
main.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
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
body {
font-size: 16px;
line-height: 1;
font-family: sans-serif;
background-color: white;
color: #222;
}
h1 {
font-size: 1.2em;
font-family: sans-serif;
position: absolute;
right: 0.5em;
top: 0.5em;
margin: 0; // override default
}
h3 {
font-size: 1em;
margin: 0;
}
input[type="text"] {
max-width: 4em;
}
label {
font-size: 0.8em;
color: hsla(0,0%,50%,1);
}
/* For multiline text only */
.multiline {
line-height: 1.5; // Better for reading but makes balancing vertical margins harder for UI elements
}
.memory {
max-height: 70vh;
overflow-y: auto;
background: hsla(240, 80%, 30%, 1);
color: white;
}
.register {
background: hsla(141, 61%, 30%, 1);
color: white;
}
.binaryDisplays {
display: flex;
padding: 0.62em;
flex-wrap: wrap;
flexDirection: row;
align-items: center;
justify-content: space-evenly;
}
.Cell {
flex-basis: calc(12.5% - 0.62em);
flex-grow: 1;
flex-shrink: 1;
text-align: right;
overflow: hidden;
min-width: 2em;
display: inline-block;
padding-right: 1em;
padding: 0;
list-style: none;
font-family: monospace;
}
.binaryDisplays .Cell:nth-child(4n){
color: hsla(6, 100%, 79%, 1);
}
/* TODO make these elements of "cell" block */
@keyframes executionFade {
from {
background-color: hsla(240, 80%, 60%, 1);
}
to {
background-color: hsla(240, 80%, 30%, 1);
}
}
.Cell_executed {
animation: executionFade 6s;
animation-timing-function: ease-in;
}
.Cell_number {
color: hsla(0,0%,100%,0.5);
}
.Cell_lastActive {
background: black;
color: white;
}
.programCounter {
background: hsla(0,80%,30%, 1);
color: white;
}
.instructionRegister {
background: hsl(55, 100%, 53%);
color: #3a3a3a;
}
.programCounter,
.instructionRegister {
margin-right: 1em;
padding: 0.62em;
display: inline-block;
}
.spacer {
display: inline-block;
height: 1px;
width: 2em;
}
.controls {
margin-bottom: 1em;
}