OXYGENHUB
◆ main enhanced-x16-emulator / webassembly / styles.css
3.9 KiB · CSS · last changed chore(): initial commit 25 days ago source blame history raw
1 
body, html {
2 
    padding:0;
3 
    margin:0;
4 
    height: 100%;
5 
    overflow: hidden;
6 
}
7
8 
textarea, select, input, button, canvas { outline: none; }
9
10 
body {
11 
    background: #333;
12 
    color: #ccc;
13 
    font-family: 'ArialMT', 'Arial', sans-serif;
14 
}
15
16 
.container {
17 
    display: flex;
18 
    flex-direction: row-reverse;
19 
    justify-content: space-between;
20 
    flex-wrap: nowrap;
21 
    height: 100%;
22 
}
23 
#editor {
24 
    flex-grow: 100;
25 
    padding:30px;
26 
    padding-right:15px;
27 
}
28
29 
.editor-layout {
30 
    width:100%;
31 
    height: 100%;
32 
    display: flex;
33 
    flex-direction: column;
34 
    justify-content: space-between;
35 
    flex-wrap: nowrap;
36 
}
37
38 
.editor-top h1 {
39 
    float:left;
40 
    margin-top:0;
41
42 
}
43
44 
.editor-top h1 a {
45 
    color: rgba(40, 116, 180,0.6);
46 
    text-decoration: none;
47 
    font-size: 14px;
48 
}
49
50 
.editor-top h1 a:hover {
51 
    color: rgba(40, 116, 180,1);
52 
}
53 
.editor-top button {
54 
    float:right;
55 
    margin-left:15px;
56 
    background: rgb(40, 116, 180);
57 
    color: #fff;
58 
    border:0;
59 
    padding: 8px 10px;
60 
}
61
62 
.editor-middle {
63 
    flex-grow: 100;
64 
    display: flex;
65 
}
66
67
68 
#code {
69 
    width: 100%;
70 
    padding: 0;
71 
    margin: 0;
72 
    border: 0;
73 
    background: #222;
74 
    color: #999;
75 
    resize: none;
76 
    font-size: 16px;
77 
    opacity: 0.8;
78 
}
79
80 
#code:focus {
81 
    box-shadow: 0px 0px 5px 0px rgba(40, 116, 180,0.6);
82 
    opacity: 1;
83 
}
84
85
86 
#emulator {
87 
    padding:30px;
88 
    padding-left:15px;
89 
}
90 
.emu-layout {
91 
    width:100%;
92 
    height: 100%;
93 
    display: flex;
94 
    flex-direction: column;
95 
    justify-content: space-between;
96 
    flex-wrap: nowrap;
97 
}
98
99
100 
.emu-container {
101 
    width: 640px;
102 
    height: 480px;
103 
    background: #000;
104 
    text-align: center;
105 
}
106
107
108 
#canvas {
109 
    opacity: 0.8;
110 
    min-width: 640px;
111 
    min-height: 480px;
112 
}
113 
#canvas:focus {
114 
    box-shadow: 0px 0px 5px 0px rgba(40, 116, 180,0.6);
115 
    opacity: 1;
116 
}
117
118 
.fullscreen-audio {
119 
    display:none;
120 
}
121
122 
.fullscreen .fullscreen-audio {
123 
    display:block!important;
124 
    position: absolute;
125 
    left:10px;
126 
    top:10px;
127 
}
128 
.fullscreen-audio a {
129 
    color:#fff;
130 
    margin-left: 10px;
131 
}
132
133
134
135 
.close-fullscreen {
136 
    display:none;
137 
}
138 
.fullscreen .close-fullscreen {
139 
    display:block!important;
140 
    position: absolute;
141 
    right:0;
142 
    top:0;
143 
}
144 
.close-fullscreen a {
145 
    color:#fff;
146 
    text-decoration: none;
147 
    font-size: 50px;
148 
    margin-right: 10px;
149 
}
150
151 
.emu-container.fullscreen {
152 
    position: absolute;
153 
    top: 0;
154 
    left: 0;
155 
    height: 100%;
156 
    width: 100%;
157 
    display: flex;
158 
    flex-direction: row;
159 
    justify-content: center;
160 
    align-items: center;
161 
    background: #000000;
162 
    z-index: 1;
163 
}
164
165 
.fullscreen #canvas {
166 
    height: 90%;
167 
    display: block;
168 
    border: 0;
169 
    opacity: 1;
170 
}
171
172 
.output-container {
173 
    flex-grow: 100;
174 
    margin-top: 30px;
175 
    overflow-x: auto;
176 
    overflow-y: auto;
177 
    background: #000;
178 
    color: #999;
179 
    width: 640px;
180
181 
}
182 
#output {
183
184
185 
    margin: 0;
186 
    min-height: 100%;
187
188
189
190
191 
}
192
193 
#spinner {
194 
    overflow:visible;
195 
}
196
197 
#spinner strong{
198 
    display: block;
199 
    margin-top: 15px;
200 
}
201
202 
.spinner {
203 
    height: 50px;
204 
    width: 50px;
205 
    margin: 0px auto;
206 
    -webkit-animation: rotation .8s linear infinite;
207 
    -moz-animation: rotation .8s linear infinite;
208 
    -o-animation: rotation .8s linear infinite;
209 
    animation: rotation 0.8s linear infinite;
210 
    border-left: 10px solid rgb(0, 150, 240);
211 
    border-right: 10px solid rgb(0, 150, 240);
212 
    border-bottom: 10px solid rgb(0, 150, 240);
213 
    border-top: 10px solid rgb(100, 0, 200);
214 
    border-radius: 100%;
215 
    background-color: rgb(200, 100, 250);
216 
}
217
218 
@-webkit-keyframes rotation {
219 
    from {
220 
        -webkit-transform: rotate(0deg);
221 
    }
222 
    to {
223 
        -webkit-transform: rotate(360deg);
224 
    }
225 
}
226
227 
@-moz-keyframes rotation {
228 
    from {
229 
        -moz-transform: rotate(0deg);
230 
    }
231 
    to {
232 
        -moz-transform: rotate(360deg);
233 
    }
234 
}
235
236 
@-o-keyframes rotation {
237 
    from {
238 
        -o-transform: rotate(0deg);
239 
    }
240 
    to {
241 
        -o-transform: rotate(360deg);
242 
    }
243 
}
244
245 
@keyframes rotation {
246 
    from {
247 
        transform: rotate(0deg);
248 
    }
249 
    to {
250 
        transform: rotate(360deg);
251 
    }
252 
}