← Back to branch summary

~holger-seelig/cobweb.js/trunk

« back to all changes in this revision

Viewing changes to cobweb.js/cobweb.css

  • Committer: Holger Seelig
  • Date: 2017-08-22 04:53:24 UTC
  • Revision ID: holger.seelig@yahoo.de-20170822045324-4of4xxgt79669gbt
Switched to npm.

Show diffs side-by-side

added added

removed removed

Lines of Context:
cobweb.js/cobweb.css
1
 
/* CSS StyleSheet */
2
 
@charset "utf-8";
3
 
 
4
 
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
5
 
@import url(spinner.css);
6
 
 
7
 
X3DCanvas {
8
 
        position: relative;
9
 
        display: inline-block;
10
 
        margin: 0px;
11
 
        padding: 0px;
12
 
        border: 0px;
13
 
        overflow: hidden;
14
 
        width: 300px;
15
 
        height: 150px;
16
 
}
17
 
 
18
 
X3DCanvas.cobweb-fullscreen {
19
 
        width: 100% !important;
20
 
        height: 100% !important;
21
 
}
22
 
 
23
 
X3DCanvas > *:not(.cobweb-fallback) {
24
 
        display: none;
25
 
}
26
 
 
27
 
.cobweb-console {
28
 
        font-family: monospace;
29
 
        white-space: pre;
30
 
}
31
 
 
32
 
X3DCanvas .cobweb-browser {
33
 
        z-index: 0;
34
 
        display: block;
35
 
        position: absolute;
36
 
        top: 0;
37
 
        right: 0;
38
 
        bottom: 0;
39
 
        left: 0;
40
 
        margin: 0px;
41
 
        padding: 0px;
42
 
        border: 0px;
43
 
}
44
 
 
45
 
X3DCanvas .cobweb-surface {
46
 
        margin: 0px;
47
 
        padding: 0px;
48
 
        border: 0px;
49
 
        height: 100%;
50
 
        margin-right: 0px;
51
 
}
52
 
 
53
 
X3DCanvas canvas {
54
 
        display: block;
55
 
        outline: none;
56
 
        margin: 0px;
57
 
        padding: 0px;
58
 
        border: 0px;
59
 
        width: 100%;
60
 
        height: 100%;
61
 
}
62
 
 
63
 
X3DCanvas .cobweb-notification {
64
 
        display: none;
65
 
        padding: 2px 5px 5px 5px;
66
 
        position: absolute;
67
 
        top: 20px;
68
 
        right: -4px;
69
 
        background: rgba(0,0,0,0.61803);
70
 
        background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
71
 
        background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
72
 
        background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
73
 
        border: 4px solid rgba(60,60,60,0.61803);
74
 
        border-radius: 5px;
75
 
        -webkit-background-clip: padding-box; /* for Safari */
76
 
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
77
 
        color: white;
78
 
        font-family: PT Sans, sans-serif;
79
 
        font-size: 10pt;
80
 
        white-space: pre;
81
 
        pointer-events: none;
82
 
}
83
 
 
84
 
X3DCanvas .cobweb-notification span {
85
 
        padding: 0px 24px 0px 20px;
86
 
        background: url(images/icon.bw.png) no-repeat 0px center;
87
 
}
88
 
 
89
 
X3DCanvas .cobweb-browser-timings {
90
 
        display: none;
91
 
        position: absolute;
92
 
        bottom: -4px;
93
 
        left: -4px;
94
 
        padding: 10px 15px 14px 14px;
95
 
        background: rgba(0,0,0,0.61803);
96
 
        background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
97
 
        background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
98
 
        background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
99
 
        border: 4px solid rgba(60,60,60,0.61803);
100
 
        border-radius: 5px;
101
 
        -webkit-background-clip: padding-box; /* for Safari */
102
 
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
103
 
        color: white;
104
 
        font-family: PT Sans, sans-serif;
105
 
        font-size: 9pt;
106
 
        line-height: 1.1;
107
 
        white-space: pre;
108
 
        pointer-events: none;
109
 
}
110
 
 
111
 
X3DCanvas .cobweb-browser-timings table,
112
 
X3DCanvas .cobweb-browser-timings thead,
113
 
X3DCanvas .cobweb-browser-timings tbody,
114
 
X3DCanvas .cobweb-browser-timings tfoot,
115
 
X3DCanvas .cobweb-browser-timings tr,
116
 
X3DCanvas .cobweb-browser-timings th,
117
 
X3DCanvas .cobweb-browser-timings td {
118
 
        outline: 0;
119
 
        margin: 0;
120
 
        border: 0;
121
 
        padding: 0;
122
 
        background: none;
123
 
        color: white;
124
 
        font-weight: normal;
125
 
        font-style: normal;
126
 
        line-height: 1;
127
 
        text-align: left;
128
 
}
129
 
 
130
 
X3DCanvas .cobweb-browser-timings table {
131
 
        background: url(images/Time.png) no-repeat;
132
 
}
133
 
 
134
 
X3DCanvas .cobweb-browser-timings tr,
135
 
X3DCanvas .cobweb-browser-timings th,
136
 
X3DCanvas .cobweb-browser-timings td {
137
 
        border-collapse: separate;
138
 
}
139
 
 
140
 
X3DCanvas .cobweb-browser-timings thead th {
141
 
        padding-left: 20px;
142
 
        padding-bottom: 5px;
143
 
}
144
 
 
145
 
X3DCanvas .cobweb-browser-timings thead th {
146
 
        font-weight: bold;
147
 
}
148
 
 
149
 
X3DCanvas .cobweb-browser-timings td:first-child {
150
 
        padding-right: 10px;
151
 
}
152
 
 
153
 
X3DCanvas .cobweb-browser-timings tr.cobweb-more td {
154
 
        padding-bottom: 5px;
155
 
}
156
 
 
157
 
X3DCanvas .cobweb-browser-timings td {
158
 
        padding-bottom: 2px;
159
 
}
160
 
 
161
 
X3DCanvas .cobweb-browser-timings tfoot td {
162
 
        padding-top: 4px;
163
 
}
164
 
 
165
 
X3DCanvas .cobweb-browser-timings button {
166
 
        border: 0;
167
 
        padding: 2px;
168
 
        background: rgba(0,0,0,0.38196601);
169
 
        color: white;
170
 
        font-size: 9pt;
171
 
        line-height: 1.1;
172
 
        font-family: PT Sans, sans-serif;
173
 
        font-style: italic;
174
 
        pointer-events: all;
175
 
        cursor: default;
176
 
}
177
 
 
178
 
X3DCanvas .cobweb-browser-timings button:hover {
179
 
        cursor: pointer;
180
 
}
181
 
 
182
 
/*!
183
 
 * jQuery contextMenu - Plugin for simple contextMenu handling
184
 
 *
185
 
 * Version: v1.8.1
186
 
 *
187
 
 * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
188
 
 * Web: http://swisnl.github.io/jQuery-contextMenu/
189
 
 *
190
 
 * Copyright (c) 2011-2015 SWIS BV and contributors
191
 
 *
192
 
 * Licensed under
193
 
 *   MIT License http://www.opensource.org/licenses/mit-license
194
 
 
195
 
 * Date: 2015-09-20T18:47:54.927Z
196
 
 */
197
 
 
198
 
/* menu title */
199
 
.cobweb-menu.cobweb-menu-title:before {
200
 
    content: "Cobweb X3D Browser";
201
 
    display: block;
202
 
    padding: 4px 32px 4px 8px;
203
 
    font-weight: bold;
204
 
}
205
 
 
206
 
.cobweb-menu .context-menu-selected {
207
 
        font-weight: bold;
208
 
        font-style: italic;
209
 
}
210
 
 
211
 
.cobweb-menu.context-menu-list,
212
 
.cobweb-menu .context-menu-list {
213
 
        position: absolute;
214
 
        display: inline-block;
215
 
        min-width: 120px;
216
 
        padding: 0;
217
 
        margin: 0;
218
 
        white-space: pre;
219
 
        font-family: PT Sans, sans-serif;
220
 
        font-size: 10pt;
221
 
        line-height: 1.2;
222
 
        list-style-type: none;
223
 
        background: #222;
224
 
        color: #eee;
225
 
        border: 0px solid #ddd;
226
 
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
227
 
                box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
228
 
}
229
 
 
230
 
.cobweb-menu .context-menu-item {
231
 
        position: relative;
232
 
        background-color: #222;
233
 
        border-top: 1px solid #222;
234
 
        border-bottom: 1px solid #222;
235
 
        padding: 3px 24px 3px 24px;
236
 
        -webkit-user-select: none;
237
 
           -moz-user-select: none;
238
 
            -ms-user-select: none;
239
 
                user-select: none;
240
 
}
241
 
 
242
 
.cobweb-menu .context-menu-separator {
243
 
        padding-bottom: 0;
244
 
        border-bottom: 1px solid #111;
245
 
}
246
 
 
247
 
.cobweb-menu .context-menu-item > label > input,
248
 
.cobweb-menu .context-menu-item > label > textarea {
249
 
        -webkit-user-select: text;
250
 
           -moz-user-select: text;
251
 
            -ms-user-select: text;
252
 
               user-select: text;
253
 
}
254
 
 
255
 
.cobweb-menu .context-menu-item.hover {
256
 
        cursor: pointer;
257
 
        background-color: #444;
258
 
        border-top: 1px solid #eee;
259
 
        border-bottom: 1px solid #eee;
260
 
}
261
 
 
262
 
.cobweb-menu .context-menu-item.disabled {
263
 
        color: #666;
264
 
}
265
 
 
266
 
.cobweb-menu .context-menu-input.hover,
267
 
.cobweb-menu .context-menu-item.disabled.hover {
268
 
        cursor: default;
269
 
}
270
 
 
271
 
.cobweb-menu .context-menu-submenu:after {
272
 
        content: "";
273
 
        position: absolute;
274
 
        display: block;
275
 
        right: 0;
276
 
        top: 5px;
277
 
        margin-right: 2px;
278
 
        /* CSS triangle */
279
 
        width: 0;
280
 
        height: 0;
281
 
        border-style: solid;
282
 
        border-width: 4px 0 4px 5px;
283
 
        border-color: transparent transparent transparent #eee;
284
 
}
285
 
 
286
 
/* icons
287
 
   #protip:
288
 
   In case you want to use sprites for icons (which I would suggest you do) have a look at
289
 
   http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
290
 
   .context-menu-item.icon:before {}
291
 
 */
292
 
 
293
 
.cobweb-menu .context-menu-item.context-menu-icon {
294
 
        background-repeat: no-repeat;
295
 
        background-position: 3px 2px;
296
 
}
297
 
 
298
 
/* vertically align inside labels */
299
 
.cobweb-menu .context-menu-input > label > * {
300
 
        vertical-align: top;
301
 
}
302
 
 
303
 
/* position checkboxes and radios as icons */
304
 
.cobweb-menu .context-menu-input > label > input[type="checkbox"],
305
 
.cobweb-menu .context-menu-input > label > input[type="radio"] {
306
 
        display: inline;
307
 
        margin: 0;
308
 
        margin-left: -20px;
309
 
        margin-right: 3px;
310
 
        padding: 0;
311
 
}
312
 
 
313
 
.cobweb-menu .context-menu-input > label > span {
314
 
        margin-left: 4px;
315
 
}
316
 
 
317
 
.cobweb-menu .context-menu-input > label,
318
 
.cobweb-menu .context-menu-input > label > input[type="text"],
319
 
.cobweb-menu .context-menu-input > label > textarea,
320
 
.cobweb-menu .context-menu-input > label > select {
321
 
        display: block;
322
 
        width: 100%;
323
 
        -webkit-box-sizing: border-box;
324
 
           -moz-box-sizing: border-box;
325
 
                box-sizing: border-box;
326
 
}
327
 
 
328
 
.cobweb-menu .context-menu-input > label > textarea {
329
 
        height: 100px;
330
 
}
331
 
 
332
 
.cobweb-menu .context-menu-item > .context-menu-list {
333
 
        top: 5px;
334
 
        /* re-positioned by js */
335
 
        right: -5px;
336
 
        display: none;
337
 
}
338
 
 
339
 
.cobweb-menu .context-menu-item.visible > .context-menu-list {
340
 
        display: block;
341
 
}
342
 
 
343
 
.cobweb-menu .context-menu-accesskey {
344
 
        text-decoration: underline;
345
 
}
346
 
 
347
 
/* Icons */
348
 
 
349
 
.cobweb-icon-viewpoint {
350
 
        background: url("images/Viewpoint.png");
351
 
}
352
 
 
353
 
.cobweb-icon-examine-viewer {
354
 
        background: url("images/ExamineViewer.png");
355
 
}
356
 
 
357
 
.cobweb-icon-walk-viewer {
358
 
        background: url("images/WalkViewer.png");
359
 
}
360
 
 
361
 
.cobweb-icon-fly-viewer {
362
 
        background: url("images/FlyViewer.png");
363
 
}
364
 
 
365
 
.cobweb-icon-lookat-viewer {
366
 
        background: url("images/gtk-zoom-in.png");
367
 
}
368
 
 
369
 
.cobweb-icon-plane-viewer {
370
 
        background: url("images/PlaneViewer.png");
371
 
}
372
 
 
373
 
.cobweb-icon-none-viewer {
374
 
        background: url("images/NoneViewer.png");
375
 
}
376
 
 
377
 
.cobweb-icon-zoom-fit {
378
 
        background: url("images/gtk-zoom-fit.png");
379
 
}
380
 
 
381
 
.cobweb-icon-zoom-in {
382
 
        background: url("images/gtk-zoom-in.png");
383
 
}
384
 
 
385
 
.cobweb-icon-primitive-quality {
386
 
        background: url("images/PrimitiveQuality.png");
387
 
}
388
 
 
389
 
.cobweb-icon-texture-quality {
390
 
        background: url("images/TextureQuality.png");
391
 
}
392
 
 
393
 
.cobweb-icon-fullscreen {
394
 
        background: url("images/gtk-fullscreen.png");
395
 
}
396
 
 
397
 
.cobweb-icon-leave-fullscreen {
398
 
        background: url("images/gtk-leave-fullscreen.png");
399
 
}
400
 
 
401
 
.cobweb-icon-help-about {
402
 
        background: url("images/help-about.png");
403
 
}