Skip to content

Commit 7020afa

Browse files
author
Joseph Hager
committed
Pull all css into a separate file
1 parent af5057e commit 7020afa

File tree

2 files changed

+163
-127
lines changed

2 files changed

+163
-127
lines changed

‎playground/index.html

Lines changed: 4 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -2,130 +2,7 @@
22
<html ng-app="playground">
33
<head>
44
<title>GopherJS Playground</title>
5-
<style>
6-
html {
7-
height: 100%;
8-
}
9-
body {
10-
color: #222;
11-
height: 100%;
12-
margin: 0;
13-
padding: 0;
14-
width: 100%;
15-
}
16-
a {
17-
color: #009;
18-
}
19-
.box {
20-
position: absolute;
21-
left: 0px;
22-
top: 0px;
23-
right: 0px;
24-
bottom: 0px;
25-
border: 300px;
26-
}
27-
.yellow {
28-
background: #ebdac7;
29-
margin: 0px;
30-
padding: 10px;
31-
}
32-
.show-generated-false #generated {
33-
display: none;
34-
}
35-
.show-generated-true #input {
36-
right: 50%;
37-
margin-right: 2px;
38-
}
39-
.show-generated-true #generated {
40-
left: 50%;
41-
margin-left: 2px;
42-
}
43-
#code, #output, #generated, pre, .lines {
44-
font-family: Menlo,Courier\ New,monospace;
45-
font-size: 11pt;
46-
}
47-
#code {
48-
width: 100%;
49-
height: 100%;
50-
background: inherit;
51-
border: none;
52-
float: right;
53-
margin: 0;
54-
outline: none;
55-
padding: 0;
56-
resize: none;
57-
wrap: off;
58-
}
59-
#generated {
60-
overflow: scroll;
61-
}
62-
#output {
63-
position: absolute;
64-
overflow: scroll;
65-
background: #ddd;
66-
margin-top: 10px;
67-
padding: 10px;
68-
}
69-
#output .system,#output .loading {
70-
color: #999;
71-
}
72-
#output .err {
73-
color: #900;
74-
}
75-
#output pre {
76-
margin: 0;
77-
}
78-
#banner {
79-
left: 0;
80-
position: absolute;
81-
right: 0;
82-
top: 0;
83-
white-space: nowrap;
84-
padding: 4px;
85-
}
86-
#head {
87-
font-family: Arial,sans;
88-
font-size: 32px;
89-
font-variant: small-caps;
90-
}
91-
#controls {
92-
padding-left: 20px;
93-
}
94-
input[type="button"] {
95-
background: #eee;
96-
border: 1px solid #ccc;
97-
color: #222;
98-
font-size: 20px;
99-
height: 30px;
100-
}
101-
input[type="button"]:hover {
102-
background: #666;
103-
color: #fff;
104-
}
105-
label {
106-
font-family: sans-serif;
107-
font-size: 16px;
108-
}
109-
input[type="checkbox"] {
110-
height: 14px;
111-
}
112-
.lines {
113-
float: left;
114-
overflow: hidden;
115-
text-align: right;
116-
}
117-
.lines div {
118-
color: #d3d3d3;
119-
padding-right: 5px;
120-
}
121-
.lineerror {
122-
background: #fdd;
123-
color: red;
124-
}
125-
.exit {
126-
color: #d3d3d3;
127-
}
128-
</style>
5+
<link rel="stylesheet" type="text/css" href="playground.css">
1296
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
1307
<script src="playground.js"></script>
1318
</head>
@@ -139,15 +16,15 @@
13916
</span>
14017
</div>
14118

142-
<div class="box show-generated-{{showGenerated}}" style="top: 50px; bottom: 25%;">
19+
<div class="box show-generated-{{showGenerated}}" id="content">
14320
<div class="box yellow" id="input">
14421
<textarea ng-model="code" id="code" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea>
14522
</div>
14623
<div class="box yellow" id="generated">
147-
<pre style="margin: 0px;">{{generated}}</pre>
24+
<pre>{{generated}}</pre>
14825
</div>
14926
</div>
150-
<div class="box" style="top: 75%;" id="output">
27+
<div class="box" id="output">
15128
<pre ng-repeat="line in output" class="{{line.type}}">{{line.content}}&nbsp;</pre>
15229
</div>
15330
</body>

‎playground/playground.css

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
html {
2+
height: 100%;
3+
}
4+
5+
body {
6+
color: #222;
7+
height: 100%;
8+
margin: 0;
9+
padding: 0;
10+
width: 100%;
11+
}
12+
13+
a {
14+
color: #009;
15+
}
16+
17+
.box {
18+
position: absolute;
19+
left: 0px;
20+
top: 0px;
21+
right: 0px;
22+
bottom: 0px;
23+
border: 300px;
24+
}
25+
26+
#content {
27+
top: 50px;
28+
bottom: 25%;
29+
}
30+
31+
.yellow {
32+
background: #ebdac7;
33+
margin: 0px;
34+
padding: 10px;
35+
}
36+
37+
.show-generated-false #generated {
38+
display: none;
39+
}
40+
41+
.show-generated-true #input {
42+
right: 50%;
43+
margin-right: 2px;
44+
}
45+
46+
.show-generated-true #generated {
47+
left: 50%;
48+
margin-left: 2px;
49+
}
50+
51+
#code,
52+
#output,
53+
#generated,
54+
pre,
55+
.lines {
56+
font-family: Menlo, Courier\ New, monospace;
57+
font-size: 11pt;
58+
margin: 0px;
59+
}
60+
61+
#code {
62+
width: 100%;
63+
height: 100%;
64+
background: inherit;
65+
border: none;
66+
float: right;
67+
margin: 0;
68+
outline: none;
69+
padding: 0;
70+
resize: none;
71+
wrap: off;
72+
}
73+
74+
#generated {
75+
overflow: scroll;
76+
}
77+
78+
#output {
79+
position: absolute;
80+
overflow: scroll;
81+
background: #ddd;
82+
margin-top: 10px;
83+
padding: 10px;
84+
top: 75%;
85+
}
86+
87+
#output .system,
88+
#output .loading {
89+
color: #999;
90+
}
91+
92+
#output .err {
93+
color: #900;
94+
}
95+
96+
#output pre {
97+
margin: 0;
98+
}
99+
100+
#banner {
101+
left: 0;
102+
position: absolute;
103+
right: 0;
104+
top: 0;
105+
white-space: nowrap;
106+
padding: 4px;
107+
}
108+
109+
#head {
110+
font-family: Arial, sans;
111+
font-size: 32px;
112+
font-variant: small-caps;
113+
}
114+
115+
#controls {
116+
padding-left: 20px;
117+
}
118+
119+
input[type="button"] {
120+
background: #eee;
121+
border: 1px solid #ccc;
122+
color: #222;
123+
font-size: 20px;
124+
height: 30px;
125+
}
126+
127+
input[type="button"]:hover {
128+
background: #666;
129+
color: #fff;
130+
}
131+
132+
label {
133+
font-family: sans-serif;
134+
font-size: 16px;
135+
}
136+
137+
input[type="checkbox"] {
138+
height: 14px;
139+
}
140+
141+
.lines {
142+
float: left;
143+
overflow: hidden;
144+
text-align: right;
145+
}
146+
147+
.lines div {
148+
color: #d3d3d3;
149+
padding-right: 5px;
150+
}
151+
152+
.lineerror {
153+
background: #fdd;
154+
color: red;
155+
}
156+
157+
.exit {
158+
color: #d3d3d3;
159+
}

0 commit comments

Comments
 (0)