Skip to content

Commit f62edef

Browse files
RolandRRolandR
committed
Split css into multiple files. Added button icons. Enabled popup closing by pressing esc or clicking the mask.
1 parent 38aa54b commit f62edef

16 files changed

+795
-381
lines changed

‎_css/control.css

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/*
2+
Styles for emulator control elements.
3+
*/
4+
5+
#control{
6+
7+
}
8+
9+
.controlValueLabel{
10+
vertical-align: center;
11+
height: 30px;
12+
}
13+
14+
#run{
15+
margin: 15px 10px 10px 40px;
16+
width: 106px;
17+
}
18+
19+
#run:active{
20+
border-color: #AADDAA;
21+
}
22+
23+
#cycle{
24+
width: 106px;
25+
margin: 0px 10px 20px 40px;
26+
}
27+
28+
#resetpc{
29+
width: 170px;
30+
}
31+
32+
#resetmem{
33+
width: 170px;
34+
}
35+
36+
#control button > span{
37+
display: inline-block;
38+
margin: -1px 4px -3px -1px;
39+
height: 16px;
40+
width: 16px;
41+
float: left;
42+
43+
background-size: contain;
44+
background-repeat: no-repeat;
45+
background-position: center;
46+
}
47+
48+
.runButton span{
49+
background-image: url(../_media/start.svg);
50+
}
51+
52+
.stopButton span{
53+
background-image: url(../_media/pause.svg);
54+
}
55+
56+
#cycle span{
57+
background-image: url(../_media/step.svg);
58+
}
59+
60+
#resetpc span{
61+
background-image: url(../_media/reset.svg);
62+
}
63+
64+
#resetmem span{
65+
background-image: url(../_media/hardReset.svg);
66+
}
67+
68+
.runButton{
69+
background: linear-gradient(to bottom, #DDFFDD, #AAFFAA);
70+
border-color: #AADDAA;
71+
}
72+
73+
.runButton:hover{
74+
background: linear-gradient(to bottom, #F6FFF6, #CCFFCC);
75+
border-color: #BBEEBB;
76+
}
77+
78+
.runButton:active{
79+
border-color: #AADDAA;
80+
}
81+
82+
.stopButton{
83+
background: linear-gradient(to bottom, #FFDDDD, #FFAAAA);
84+
border-color: #DDAAAA;
85+
}
86+
87+
.stopButton:hover{
88+
background: linear-gradient(to bottom, #FFF6F6, #FFCCCC);
89+
border-color: #EEBBBB;
90+
}
91+
92+
.stopButton:active{
93+
border-color: #DDAAAA;
94+
}
95+
96+
#control .controlValueLabel{
97+
margin-left: 5px;
98+
display: inline-block;
99+
width: 176px;
100+
}
101+
102+
#control .controlValueButton{
103+
margin-left: 5px;
104+
margin-bottom: 5px;
105+
}
106+
107+
#control .controlValue{
108+
width: 40px;
109+
text-align: right;
110+
height: 18px;
111+
}
112+
113+
#control #frequencyLabel{
114+
width: 120px;
115+
}
116+
117+
#control #frequency{
118+
text-align: right;
119+
width: 153px;
120+
}

‎_css/editor.css

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/*
2+
Classes for editor syntax highlighting
3+
*/
4+
15
.e-comment{
26
color: #55CC44;
37
}

‎_css/generic.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
Generic styling for things like buttons, input elements and
3+
stuff like that.
4+
*/
5+
6+
*{
7+
border: none;
8+
margin: 0px;
9+
padding: 0px;
10+
}
11+
12+
body{
13+
font-size: 16px;
14+
font-family: "Courier New", monospace;
15+
}
16+
17+
h1{
18+
display: inline-block;
19+
}
20+
21+
h2{
22+
font-size: 1em;
23+
font-weight: normal;
24+
}
25+
26+
p{
27+
margin-bottom: 15px;
28+
}
29+
30+
textarea,
31+
div [contenteditable="true"]{
32+
font-size: 14px;
33+
border: 1px #DDDDDD solid;
34+
outline: none;
35+
background-color: #FFFFFF;
36+
white-space: pre;
37+
overflow-y: auto;
38+
font-family: "Courier New", monospace;
39+
box-sizing: border-box;
40+
resize: none;
41+
}
42+
43+
textarea:hover, textarea:active, textarea:focus,
44+
div [contenteditable="true"]:hover, div [contenteditable="true"]:active, div [contenteditable="true"]:focus{
45+
border-color: #AAAAAA;
46+
}
47+
48+
button{
49+
border: 1px #CCCCCC solid;
50+
background-image: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
51+
padding: 3px 6px;
52+
cursor: pointer;
53+
outline: none;
54+
height: 25px;
55+
font-family: inherit;
56+
}
57+
58+
button:hover{
59+
border: 1px #DDDDDD solid;
60+
background-color: #FFFFFF;
61+
background-image: none;
62+
}
63+
64+
button:active{
65+
border: 1px #BBBBBB solid;
66+
background-image: linear-gradient(to top, #FFFFFF, #EEEEEE);
67+
}
68+
69+
input[type="text"],
70+
input[type="number"]{
71+
border: 1px #DDDDDD solid;
72+
outline: none;
73+
height: 15px;
74+
padding: 2px;
75+
font-family: "Courier New", monospace;
76+
}
77+
78+
input[type="text"]:hover, input[type="text"]:active, input[type="text"]:focus,
79+
input[type="number"]:hover, input[type="number"]:active, input[type="number"]:focus{
80+
border-color: #AAAAAA;
81+
}
82+
83+
hr{
84+
border-top: 1px #888888 solid;
85+
margin-top: 0px;
86+
margin-bottom: 5px;
87+
}

0 commit comments

Comments
 (0)