Subversion Repositories oidplus

Rev

Rev 379 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
4 daniel-mar 1
/*
2
 * OIDplus 2.0
3
 * Copyright 2019 Daniel Marschall, ViaThinkSoft
4
 *
5
 * Licensed under the Apache License, Version 2.0 (the "License");
6
 * you may not use this file except in compliance with the License.
7
 * You may obtain a copy of the License at
8
 *
9
 *     http://www.apache.org/licenses/LICENSE-2.0
10
 *
11
 * Unless required by applicable law or agreed to in writing, software
12
 * distributed under the License is distributed on an "AS IS" BASIS,
13
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
 * See the License for the specific language governing permissions and
15
 * limitations under the License.
16
 */
2 daniel-mar 17
 
287 daniel-mar 18
/*************************************************************************************
19
 ** ATTENTION:                                                                      **
20
 *************************************************************************************
366 daniel-mar 21
 ** Please do NOT edit this file, since a software update will override             **
287 daniel-mar 22
 ** your changes.                                                                   **
366 daniel-mar 23
 ** To do changes to the design, you have following possibilities:                  **
287 daniel-mar 24
 ** - If you just want to change colors, then the color plugin in the admin area    **
25
 **   could an option for you.                                                      **
366 daniel-mar 26
 ** - Create userdata/styles/oidplus_add.css (it will be placed after this file),   **
27
 **   and use the "!important" statements to override style definitions.            **
28
 ** - You can completely REPLACE oidplus_base.css by                                **
29
 **   creating userdata/styles/oidplus_base.css . This is very dangerous, because   **
30
 **   you need to regularly check if the official oidplus_base.css gets changed or  **
31
 **   extended, and you need to apply the changes according to the master file.     **
287 daniel-mar 32
 *************************************************************************************/
33
 
122 daniel-mar 34
@media print {
35
        /* Printing */
36
        .ui-layout-west, .ui-layout-resizer {
37
                display:none !important;
38
        }
39
        .ui-layout-center {
40
                left:0px !important;
41
                width:100% !important;
42
        }
43
        #oidtree, .ui-layout-center {
44
                position:relative !important;
45
                width:100% !important;
46
                top: 0 !important;
379 daniel-mar 47
 
122 daniel-mar 48
        }
49
        #content_window {
50
                top: 0 !important;
51
        }
52
}
120 daniel-mar 53
 
54
@media only screen and (max-width: 800px) {
55
        /* Mobile */
56
        .ui-layout-west, .ui-layout-resizer {
57
                display:none !important;
58
        }
59
        .ui-layout-center {
60
                left:0px !important;
61
                width:100% !important;
62
        }
63
        #oidtree, .ui-layout-center {
64
                position:relative !important;
65
                width:100% !important;
218 daniel-mar 66
                padding-right:10px !important;
122 daniel-mar 67
                top: 0 !important;
379 daniel-mar 68
                padding-bottom:80px !important; /* because iPhone Safari bar at the bottom */
69
                                                /* Attention: If you incrase .lng_flag.margin, then you need to increase this, too */
120 daniel-mar 70
        }
71
        #content_window {
122 daniel-mar 72
                top: 0 !important;
120 daniel-mar 73
        }
126 daniel-mar 74
        #frames {
75
                display:flex;
76
                flex-direction:column;
77
                align-items: flex-start;
78
        }
79
        #system_title_bar {
80
                order:0;
81
                flex:none;
82
        }
83
        #oidtree {
84
                order:1;
85
                flex:none;
86
        }
87
        #content_window {
88
                order:2;
89
                flex:none;
90
        }
91
        #system_title_text {
92
                overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
93
        }
120 daniel-mar 94
}
95
 
96
@media only screen and (min-width: 801px) {
97
        /* Desktop */
98
        #system_title_menu {
99
                display:none !important;
100
        }
101
}
102
 
103
#system_title_bar {
104
        width:100% !important;
105
        position:relative !important;
122 daniel-mar 106
        white-space: nowrap;
120 daniel-mar 107
}
108
 
109
body, #frames {
110
        width:100%;
111
        height:100%;
112
}
113
 
96 daniel-mar 114
.wrap {
115
        overflow-x: auto;
116
        margin: 0 auto;
117
        width:100%;
118
}
119
 
101 daniel-mar 120
.gray_footer_font {
144 daniel-mar 121
        color:#808080;
100 daniel-mar 122
        font-size:0.9em;
123
}
124
 
43 daniel-mar 125
label.padding_label {
126
        font-weight: normal !important;
127
        display: inline-block;
128
        clear: left;
129
        width: 100px;
130
        text-align: right;
131
        padding-top: 3px;
132
        margin-right: 8px;
133
}
134
 
4 daniel-mar 135
.box {
136
        width:auto !important;
137
        padding:20px;
138
        background-color:#fff;
139
        border:1px solid #ccc;
140
        border-radius:5px;
141
        margin-top:10px;
142
}
143
#titleedit {
144
        width:100%;
145
}
146
#system_title_1 {
11 daniel-mar 147
        color:#2D6A9F;
122 daniel-mar 148
        margin-left:5px;
4 daniel-mar 149
}
150
#system_title_2 {
11 daniel-mar 151
        color:#2B336F;
4 daniel-mar 152
        font-size:2em;
122 daniel-mar 153
        margin-left:5px;
4 daniel-mar 154
}
105 daniel-mar 155
 
156
/* Mobile menu button */
157
 
158
#bar1, #bar2, #bar3 {
108 daniel-mar 159
        width: 27px;
105 daniel-mar 160
        height: 5px;
144 daniel-mar 161
        background-color: #FFA500;
105 daniel-mar 162
        margin: 6px 0;
163
        transition: 0.4s;
108 daniel-mar 164
        margin-left:14px;
105 daniel-mar 165
}
166
 
167
#system_title_menu.active {
144 daniel-mar 168
        background-color: #FFA500;
105 daniel-mar 169
}
170
 
171
.active #bar1 {
108 daniel-mar 172
        -webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
173
        transform: rotate(-45deg) translate(-7.5px, 7.5px);
144 daniel-mar 174
        background-color: #000;
105 daniel-mar 175
}
176
 
177
.active #bar2 {
178
        opacity: 0;
144 daniel-mar 179
        background-color: #000;
105 daniel-mar 180
}
181
 
182
.active #bar3 {
183
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
184
        transform: rotate(45deg) translate(-8px, -8px);
144 daniel-mar 185
        background-color: #000;
105 daniel-mar 186
}
187
 
188
.hover #bar1, .hover #bar2, .hover #bar3 {
144 daniel-mar 189
        background-color:#fff;
105 daniel-mar 190
}
191
 
192
#system_title_menu {
193
        width:55px;
194
        height:55px;
195
        padding-top:8px;
95 daniel-mar 196
        text-decoration: none;
99 daniel-mar 197
        font-size: 19px;
122 daniel-mar 198
        display: none; /* will be set to 'block' by JavaScript */
144 daniel-mar 199
        background-color: #000;
122 daniel-mar 200
        float:left;
105 daniel-mar 201
        cursor: pointer;
95 daniel-mar 202
}
203
 
105 daniel-mar 204
/* Title bar */
99 daniel-mar 205
 
4 daniel-mar 206
#system_title_bar {
207
        line-height:1.75em;
2 daniel-mar 208
 
4 daniel-mar 209
        height:55px !important;
2 daniel-mar 210
 
4 daniel-mar 211
        font-style:italic;
212
        font-weight:bolder;
213
        float:left;
214
        border-bottom:1px;
2 daniel-mar 215
 
122 daniel-mar 216
        width:100%; /* required for NoScript */
217
        padding-left:5px;/* required for NoScript */
218
        padding-right:5px;/* required for NoScript */
2 daniel-mar 219
 
4 daniel-mar 220
        padding-left:0px;
9 daniel-mar 221
        margin-left:0px;
2 daniel-mar 222
 
112 daniel-mar 223
        display:block;
2 daniel-mar 224
 
4 daniel-mar 225
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
226
        background: #a0d8ef; /* Old browsers */
227
        background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */
228
        background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
229
        background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
230
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */
95 daniel-mar 231
 
232
        overflow:hidden;
4 daniel-mar 233
}
178 daniel-mar 234
#system_title_bar a {
4 daniel-mar 235
        text-decoration:none;
236
}
105 daniel-mar 237
 
238
/* OID-Tree */
239
 
120 daniel-mar 240
@media only screen and (max-width: 800px) {
241
        /* Mobile */
242
 
243
        #content_window {
244
                padding-left:16px;
245
                padding-top:0px;
246
        }
247
 
4 daniel-mar 248
}
120 daniel-mar 249
@media only screen and (min-width: 801px) {
250
        /* Desktop */
251
 
252
        #oidtree {
253
                position:absolute;
254
                left:0px;
255
                bottom:0px;
122 daniel-mar 256
                top:55px; /* required for NoScript */
257
                width:400px; /* required for NoScript */
120 daniel-mar 258
                padding-top:5px;
122 daniel-mar 259
                white-space:nowrap; /* required for NoScript */
260
                overflow:scroll; /* required for NoScript */
382 daniel-mar 261
                padding-bottom:10px !important;
120 daniel-mar 262
        }
122 daniel-mar 263
 
120 daniel-mar 264
        #content_window {
265
                position:absolute;
128 daniel-mar 266
                left:400px;
120 daniel-mar 267
                right:0px;
268
                bottom:0px;
122 daniel-mar 269
                top:55px; /* required for NoScript */
120 daniel-mar 270
                padding-left:20px;
271
                padding-right:20px;
272
        }
95 daniel-mar 273
}
120 daniel-mar 274
 
275
#oidtree {
276
        padding-top:5px !important;
122 daniel-mar 277
        padding-left:5px;/* required for NoScript */
278
        padding-right:5px;/* required for NoScript */
95 daniel-mar 279
}
120 daniel-mar 280
 
4 daniel-mar 281
html {
282
        margin:0;
283
        padding:0;
284
        height:100%;
366 daniel-mar 285
        font-family:"Helvetica";
4 daniel-mar 286
}
287
body {
288
        margin:0px;
289
        padding:0px;
290
        font-size:0.85em;
291
        height:100%;
161 daniel-mar 292
        /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
366 daniel-mar 293
        font-family:"Arial","sans-serif" !important;
4 daniel-mar 294
}
120 daniel-mar 295
 
296
@media only screen and (min-width: 801px) {
297
        /* Desktop */
298
        body {
299
                overflow:hidden;
300
        }
122 daniel-mar 301
        .borderbox {
302
                border:1px solid silver;
303
        }
95 daniel-mar 304
}
120 daniel-mar 305
 
122 daniel-mar 306
.borderbox {
307
        overflow:auto;
308
}
309
 
4 daniel-mar 310
h1 {
311
        font-size:1.8em;
312
}
11 daniel-mar 313
h2 {
314
        font-size:1.6em !important;
315
}
4 daniel-mar 316
 
144 daniel-mar 317
textarea,input[type="text"],input[type="password"],select {
143 daniel-mar 318
        /* for dark themes, this looks better */
319
        /*background:transparent;*/
301 daniel-mar 320
        background:rgba(255,255,255,0.4);
143 daniel-mar 321
        border: #AAAAAA 1px solid;
322
}
323
 
286 daniel-mar 324
input[type=button], input[type=submit], input[type=reset],
325
input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
326
input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
327
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
366 daniel-mar 328
        border: 1px solid #a2a2a2;
329
        padding-top:2px;
330
        padding-bottom:2px;
331
        padding-left:7px;
332
        padding-right:7px;
333
        text-decoration:none;
334
        background: #ffffff;
335
        color: #0066CC;
163 daniel-mar 336
}
286 daniel-mar 337
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
366 daniel-mar 338
        background: #f4f4ff;
286 daniel-mar 339
}
340
.hand, input[type=button], input[type=submit], input[type=reset] {
366 daniel-mar 341
        cursor: pointer;
286 daniel-mar 342
}
163 daniel-mar 343
 
4 daniel-mar 344
/**
345
 *      Splitter / uiLayout
346
 */
347
.ui-layout-pane { /* all 'panes' */
348
        border: 1px solid #BBB;
349
}
350
.ui-layout-pane-center { /* content body */
351
        padding: 0;
352
        margin:  0;
353
}
354
.ui-layout-pane-west { /* west pane */
355
        padding: 0 10px;
356
        background-color: #f9f9f9 !important;
357
        overflow: auto;
358
}
359
.ui-layout-resizer { /* all 'resizer-bars' */
360
        background: #DDD;
361
        top:55px !important; /* DM 13.03.2019 */
362
}
363
.ui-layout-resizer-open:hover { /* mouse-over */
364
        background: #9D9;
365
}
366
.ui-layout-resizer-north {
367
        background:#2b336f !important;
122 daniel-mar 368
        z-index:10 !important; /* DM 13.03.2019 */
4 daniel-mar 369
}
370
.ui-layout-toggler { /* all 'toggler-buttons' */
371
        background: #AAA;
2 daniel-mar 372
        }
4 daniel-mar 373
.ui-layout-toggler-closed { /* closed toggler-button */
374
        background: #CCC;
375
        border-bottom: 1px solid #BBB;
376
}
377
.ui-layout-toggler .content { /* toggler-text */
366 daniel-mar 378
        font-size: 14px;
379
        font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
380
        font-weight: bold;
4 daniel-mar 381
}
382
.ui-layout-toggler:hover { /* mouse-over */
383
        background: #DCA;
384
}
385
.ui-layout-toggler:hover .content { /* mouse-over */
386
        color: #009;
387
}
2 daniel-mar 388
 
4 daniel-mar 389
/* masks are usually transparent - make them visible (must 'override' default) */
390
.ui-layout-mask {
6 daniel-mar 391
        background: #C00 !important;
392
        opacity: .20 !important;
393
        filter: alpha(opacity=20) !important;
4 daniel-mar 394
}
10 daniel-mar 395
 
355 daniel-mar 396
/* Language box */
397
 
398
@media only screen and (min-width: 801px) {
399
        /* Desktop */
400
 
401
        #languageBox {
402
                position:absolute;
403
                right:420px;
404
                top:15px;
405
        }
406
 
407
}
408
 
379 daniel-mar 409
@media only screen and (max-width: 800px) {
410
        /* Mobile */
411
 
412
        .lng_flag {
413
                margin: 10px;
414
        }
415
 
416
}
417
 
355 daniel-mar 418
.lng_flag {
419
        cursor: pointer;
356 daniel-mar 420
        border: 1px solid #000 !important;
379 daniel-mar 421
        height: 20px;
355 daniel-mar 422
}
423
 
356 daniel-mar 424
.picture_ghost {
362 daniel-mar 425
        opacity: 0.4;
355 daniel-mar 426
}
427
 
183 daniel-mar 428
/* Goto box */
429
 
430
@media only screen and (max-width: 800px) {
431
        /* Mobile */
432
 
433
        #gotobox {
185 daniel-mar 434
                /*max-width:350px;*/
435
                width:75%;
183 daniel-mar 436
        }
437
 
185 daniel-mar 438
        .mobilehidden {
439
                display:none !important;
440
        }
441
 
183 daniel-mar 442
}
443
 
444
@media only screen and (min-width: 801px) {
445
        /* Desktop */
446
 
447
        #gotobox {
448
                position:absolute;
449
                right:10px;
450
                top:10px;
451
                width:30%;
185 daniel-mar 452
                max-width:400px;
183 daniel-mar 453
        }
454
 
185 daniel-mar 455
}
183 daniel-mar 456
 
185 daniel-mar 457
#gotobox {
458
        display: none; /* will be set to 'block' by JavaScript */
183 daniel-mar 459
 
185 daniel-mar 460
        line-height:1.75em;
461
 
462
        height:55px !important;
463
 
464
        font-style:italic;
465
        font-weight:bolder;
466
        float:left;
467
        border-bottom:1px;
468
 
469
        width:100%; /* required for NoScript */
470
        padding-left:5px;/* required for NoScript */
471
        padding-right:5px;/* required for NoScript */
472
 
473
        padding-left:0px;
474
        margin-left:0px;
183 daniel-mar 475
}
476
 
185 daniel-mar 477
#gotobox input[type="text"] {
478
        width:calc(100% - 45px);
479
}
480
 
481
#gotobox input[type="button"] {
482
        width:40px;
483
}
484
 
366 daniel-mar 485
/* Logbook severities (shared between plugins ra099, ra200, admin600) */
288 daniel-mar 486
 
487
.severity_0 {
488
        /* Undefined */
489
}
490
 
491
.severity_1 {
492
        /* Success */
493
        color: DarkGreen;
494
}
495
 
496
.severity_2 {
497
        /* Informational */
498
        color: CornflowerBlue;
499
}
500
 
501
.severity_3 {
502
        /* Warning */
503
        color: DarkGoldenRod;
504
}
505
 
506
.severity_4 {
507
        /* Error */
508
        color: DarkRed;
509
}
510
 
511
.severity_5 {
512
        /* Critical */
513
        color: DarkMagenta;
514
}