source: EcnlProtoTool/trunk/webapp/webmrbc/css/webmrbc.css@ 270

Last change on this file since 270 was 270, checked in by coas-nagasima, 7 years ago

mruby版ECNLプロトタイピング・ツールを追加
  • Property svn:eol-style set to native
  • Property svn:keywords set to Id
  • Property svn:mime-type set to text/css
File size: 7.1 KB
Line 
1html, body {
2 height: 100%;
3 margin: 0;
4}
5
6body {
7 user-select: none;
8 -moz-user-select: none;
9 -khtml-user-select: none;
10 -webkit-user-select: none;
11 -ms-user-select: none;
12}
13
14html {
15 -ms-touch-action: manipulation;
16}
17
18.dropdown-menu > li > a {
19 cursor: default;
20}
21
22#main-menu {
23 margin-bottom: 0px;
24}
25
26 #main-menu .container {
27 width: 100%;
28 }
29
30#modes-container {
31 position: absolute;
32 width: 100%;
33 left: 0;
34 top: 56px;
35 right: 0;
36 bottom: 0;
37}
38
39 #modes-container .modes-tab-pane {
40 position: relative;
41 height: 100%;
42 }
43
44#selectors-container {
45 position: absolute;
46 margin-left: 20px;
47 width: 200px;
48 height: 100%;
49 overflow: hidden;
50}
51
52 #selectors-container ul.nav-pills {
53 margin: 0 0 4px 0;
54 font-size: 0.8em;
55 line-height: 1em;
56 }
57
58 #selectors-container ul.nav-pills li {
59 line-height: 12px;
60 }
61
62 #selectors-container ul.nav-pills li a {
63 margin-right: 2px;
64 margin-top: 2px;
65 margin-bottom: 2px;
66 padding-top: 8px;
67 padding-bottom: 8px;
68 padding-right: 5px;
69 padding-left: 5px;
70 line-height: 12px;
71 }
72
73#selectors-tab-content {
74 position: absolute;
75 top: 32px;
76 left: 0;
77 right: 0;
78 bottom: -2px;
79 overflow-y: scroll;
80}
81
82 #selectors-tab-content .selector-tab .item {
83 position: relative;
84 }
85
86 #selectors-tab-content .selector-tab .item a {
87 text-decoration: none;
88 cursor: pointer;
89 font-size: 1.5em;
90 vertical-align: middle;
91 display: table-cell;
92 }
93
94 #selectors-tab-content .selector-tab .item .item-info {
95 position: absolute;
96 left: 0;
97 top: 0;
98 right: 0;
99 bottom: 0;
100 width: 160px;
101 height: 160px;
102 color: gray;
103 }
104
105 #selectors-tab-content .selector-tab .item .item-info .name {
106 position: absolute;
107 left: 10px;
108 top: 10px;
109 font-size: 1em;
110 z-index: 1;
111 }
112
113 #selectors-tab-content .selector-tab .item .item-info .attributes {
114 position: absolute;
115 left: 10px;
116 bottom: 10px;
117 font-size: 0.8em;
118 line-height: 1.1em;
119 text-align: left;
120 z-index: 1;
121 }
122
123 #selectors-tab-content .selector-tab .item .item-info a.modify-button {
124 position: absolute;
125 right: 10px;
126 bottom: 10px;
127 padding-left: 0.5em;
128 padding-top: 0.5em;
129 font-size: 1.5em;
130 z-index: 1;
131 }
132
133 #selectors-tab-content .selector-tab .item .item-info .topright-buttons {
134 position: absolute;
135 right: 10px;
136 top: 10px;
137 padding-left: 0.5em;
138 padding-bottom: 0.5em;
139 z-index: 1;
140 }
141
142 #selectors-tab-content .selector-tab .item .item-info .topright-buttons > a {
143 font-size: 1.5em;
144 }
145
146 #selectors-tab-content .selector-tab .item a.celltype {
147 position: relative;
148 overflow: hidden;
149 display: table-cell;
150 text-align: center;
151 vertical-align: middle;
152 width: 170px;
153 height: 170px;
154 border: 5px solid white;
155 }
156
157 #selectors-tab-content .selector-tab .item a.celltype div {
158 margin: -5px;
159 }
160
161 #selectors-tab-content .selector-tab .item a.celltype img {
162 max-width: 160px;
163 max-height: 160px;
164 }
165
166 #selectors-tab-content .selector-tab .item a.celltype:hover {
167 border: 5px solid #0088cc;
168 }
169
170 #selectors-tab-content .selector-tab .item a#add-celltype-button.celltype {
171 text-align: center;
172 vertical-align: middle;
173 font-size: 1em;
174 border: 5px dashed lightgrey;
175 }
176
177 #selectors-tab-content .selector-tab .item a#add-celltype-button.celltype i {
178 font-size: 2em;
179 }
180
181 #selectors-tab-content .selector-tab .item a#add-celltype-button.celltype:hover {
182 border: 5px dashed #0088cc;
183 }
184
185#block-tab-left-pane {
186 position: relative;
187 height: 100%;
188 width: 100%;
189 float: left;
190}
191
192#block-tab-right-pane {
193 position: absolute;
194 height: 100%;
195 width: 100%;
196 float: right;
197}
198
199 #block-tab-right-pane .blockly-div {
200 margin-left: 220px;
201 position: absolute;
202 left: 0;
203 top: 0;
204 right: 0;
205 bottom: 0;
206 -ms-touch-action: none;
207 }
208
209 #block-tab-right-pane .blockly-div svg.blocklySvg {
210 overflow: hidden;
211 }
212
213#text-editor {
214 position: absolute;
215 left: 0;
216 top: 0;
217 right: 0;
218 bottom: 0;
219 font-size: 10pt;
220}
221
222#eobject-modal {
223 position: absolute;
224 top: 5%;
225 left: 5%;
226 width: 90%;
227 height: 90%;
228}
229
230 #eobject-modal .modal-dialog {
231 width: 100%;
232 height: 100%;
233 margin-top: 0px;
234 margin-bottom: 0px;
235 }
236
237 #eobject-modal .modal-body {
238 padding: 0px;
239 height: 480px;
240 }
241
242#eobject-modal-preview {
243 position: relative;
244 width: 160px;
245 height: 160px;
246 background-color: white;
247 border: 1px solid gray;
248 overflow: hidden;
249 margin-bottom: 8px;
250}
251
252#eobject-modal-celltype {
253 position: absolute;
254 -ms-touch-action: none;
255}
256
257 #eobject-modal-celltype img {
258 width: 100%;
259 height: 100%;
260 }
261
262#eobject-modal-form {
263 margin-bottom: 0;
264}
265
266 #eobject-modal-form .control-group {
267 margin-bottom: 8px;
268 }
269
270 #eobject-modal-form .control-group .control-label {
271 width: 30%;
272 }
273
274 #eobject-modal-form .control-group .dropdown {
275 display: inline-block;
276 }
277
278 #eobject-modal-form .control-group .controls {
279 display: inline-flex;
280 }
281
282#eobject-modal-left-pane {
283 position: relative;
284 height: 80%;
285 width: 50%;
286 float: left;
287}
288
289#eobject-modal-right-pane {
290 position: absolute;
291 margin-left: 50%;
292 height: 80%;
293 width: 50%;
294 float: left;
295}
296
297#eobject-modal-right-pane-inner {
298 left: 0;
299 top: 0;
300 right: 0;
301 bottom: 0;
302 height: 480px;
303 overflow-y: scroll;
304}
305
306#eobject_properties {
307 width: 100%;
308}
309
310 #eobject_properties label {
311 text-align: left;
312 }
313
314#preference-modal {
315 width: 700px;
316 margin-left: -350px;
317}
318
319 #preference-modal .modal-body form {
320 margin-bottom: 0;
321 }
322
323 #preference-modal .modal-body form .control-group {
324 margin-bottom: 8px;
325 }
326
327.emscripten {
328 padding-right: 0;
329 margin-left: auto;
330 margin-right: auto;
331 display: block;
332}
333
334div.emscripten {
335 text-align: center;
336}
337
338div.emscripten_border {
339 border: 1px solid black;
340}
341
342#emscripten_logo {
343 display: inline-block;
344 margin: 4px;
345}
346
347.spinner {
348 height: 30px;
349 width: 30px;
350 margin: 0;
351 margin-top: 20px;
352 margin-left: 20px;
353 display: inline-block;
354 vertical-align: top;
355 -webkit-animation: rotation .8s linear infinite;
356 -moz-animation: rotation .8s linear infinite;
357 -o-animation: rotation .8s linear infinite;
358 animation: rotation 0.8s linear infinite;
359 border-left: 5px solid rgb(235, 235, 235);
360 border-right: 5px solid rgb(235, 235, 235);
361 border-bottom: 5px solid rgb(235, 235, 235);
362 border-top: 5px solid rgb(120, 120, 120);
363 border-radius: 100%;
364 background-color: rgb(189, 215, 46);
365}
366
367#emscripten-box {
368 position: absolute;
369 top: 0px;
370}
371
372#term-box {
373 position: relative;
374 height: 100%;
375}
376
377#term {
378 position: absolute;
379 top: 0;
380 right: 0;
381 bottom: 0;
382 left: 0;
383 font-size: small;
384}
385
386@-webkit-keyframes rotation {
387 from {
388 -webkit-transform: rotate(0deg);
389 }
390
391 to {
392 -webkit-transform: rotate(360deg);
393 }
394}
395
396@-moz-keyframes rotation {
397 from {
398 -moz-transform: rotate(0deg);
399 }
400
401 to {
402 -moz-transform: rotate(360deg);
403 }
404}
405
406@-o-keyframes rotation {
407 from {
408 -o-transform: rotate(0deg);
409 }
410
411 to {
412 -o-transform: rotate(360deg);
413 }
414}
415
416@keyframes rotation {
417 from {
418 transform: rotate(0deg);
419 }
420
421 to {
422 transform: rotate(360deg);
423 }
424}
425
426#status {
427 display: inline-block;
428 vertical-align: top;
429 margin-top: 30px;
430 margin-left: 20px;
431 font-weight: bold;
432 color: rgb(120, 120, 120);
433}
434
435#progress {
436 height: 20px;
437 width: 30px;
438}
439
440#controls {
441 display: inline-block;
442 float: right;
443 vertical-align: top;
444 margin-top: 30px;
445 margin-right: 20px;
446}
Note: See TracBrowser for help on using the repository browser.