Subversion Repositories oidplus

Rev

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