Fixes/Refinements from Testing
[aaf/authz.git] / auth / auth-gui / theme / onap / aaf5.css
1 /*
2   Standard CSS for AAF
3 */
4
5 html {
6         height: 100%;
7 }
8
9 body {
10         background-image:url('ONAP_LOGO.png');
11         background-color: #FFFFFF;
12         background-repeat:no-repeat;
13         background-position: right top;
14         background-size:15em 4.3em;
15         color:#606060;
16         font-family: Verdana,Arial,Helvetica,sans-serif;
17         overflow: scroll;
18         }
19
20 header h1,p {
21         margin: 4px auto;
22 }
23
24 header h1 {
25         display: inline;
26 }
27
28 header {
29         display: block;
30         color: #347FA0;
31 }
32
33 p#version {
34         margin:0;
35         display:inline;
36         font-size: 0.75em;
37         float:center;
38         color: 2B6E9C;
39         padding-right:4.2em;
40 }
41
42 header hr {
43         margin: 0;
44 }
45
46 hr {
47         border: 1px solid #C0C0C0;
48 }
49
50 #breadcrumbs {
51         padding: 5px 0 12px 0;
52 }
53
54
55 #breadcrumbs ul {
56         color: #DFEFFC;
57         margin: 0;
58         list-style-type:none;
59         padding: 0;
60 }
61
62 #breadcrumbs li {
63         border-width:2px;
64         margin: 3px 1px;
65         padding: 2px 9px;
66         border-style:solid;
67         border-top-left-radius: .8em;
68         border-bottom-left-radius: .8em;
69         background-color:#80C337;
70         display:inline;
71 }
72
73 #breadcrumbs a {
74         text-decoration:none;
75         color: white;
76 }
77
78 caption {
79         color:4BADA9;
80         text-align: center;
81         font-size:1.3em;
82         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
83 }
84
85 #Pages {
86         padding: 3px 2px 10px 4px;
87         background: linear-gradient(to right, #147AB3,#FFFFFF);
88 }
89
90 #Pages h3,h4,h5 {
91         color: #909090;
92 }
93
94 # SuperScript
95 sup {
96         color: #909090;
97         font-size: 70%;
98         vertical-align: super;
99 }
100  
101 form {
102         padding: 10px;
103         margin: 4px;
104 }
105
106 .textInput {
107 #       size: 120%;
108 }
109
110 #form input[id],select#myroles {
111 #       margin: 4px 0;
112 #       width: 150%;
113 #}
114
115 form label {
116         margin: 4px 0;
117 }
118
119 form label[required] {
120         color: red;
121 }
122
123 form input[type=submit], form input[type=reset] {
124         font-size: 1.0em;
125         margin: 12px 0 0px 0;
126 #       color: #347FA0;
127         color: white;
128         background-color: #7FB5C9;
129         border-radius: 15px;
130 }
131
132 p.preamble, p.notfound,.expedite_request {
133         display: block;
134         margin: 30px 0px 10px 0px;
135         font: italic bold 20px/30px Georgia, serif;
136         font-size: 110%;
137         color: #0079B8;
138 }
139 .expedite_request {
140         margin-top: 0;
141         color: 4BADA9;
142 }
143
144 .subtext {
145         margin-left: 10px;
146         font-size: 75%;
147         font-style: italic;
148 }
149
150 .protected {
151         font-size: 80%;
152         font-style: italic;
153         color: red;
154 }
155
156 #Pages a {
157         display:block;
158         font-weight:bold;
159         color:#FFFFFF;
160         background-color:#80C337;
161         text-decoration:none;
162         border-top-right-radius: .8em;
163         border-bottom-right-radius: .8em;
164         border-top-left-radius: .2em;
165         border-bottom-left-radius: .2em;
166         padding: 3px 40px 3px 10px;
167         margin: 4px;
168         width: 50%;
169 }
170
171 #footer {
172         background-color: #2B6E9C;
173         color: #FFFFFF; 
174         text-align:right;
175         font-size: 60%;
176         padding: 5px;
177         position:fixed;
178         bottom: 0px;
179         left: 0px;
180         right: 0px;
181 }
182
183 /* 
184   Standard Table, with Alternating Colors
185 */
186 div.std {
187         vertical-align: top;
188 }
189
190 div.std table, div.stdform table {
191         position: relative;
192         border-collapse:collapse;
193         table-layout:auto;
194         left: 1.3%;
195         width: 98%;
196         margin-top: 5px;
197         bottom: 4px;
198         border-radius: 4px;
199 }
200
201 td.detailFirst {
202         border-color:red;
203         border-style:solid none none none;
204 }
205
206 td.detail {
207   border-style:none;
208  }
209
210
211 div.std td, div.stdform td {
212         font-size:.9em;
213         vertical-align:top;
214 }
215
216 .center {
217         text-align: center;
218 }
219
220 .right {
221         text-align: right;
222         padding-right: 4px;
223 }
224
225 .left {
226         text-align: left;
227         padding-left: 4px;
228 }
229
230
231 p.double {
232         line-height: 2em;
233 }
234
235 p.api_comment {
236         font-size: .9em;
237         text-indent: 6px;
238 }
239
240 p.api_contentType {
241         font-size: .8em;
242         text-indent: 6px;
243 }
244
245 p.api_label {
246         font-size: .9em;
247         font-style: italic;
248 }
249
250 .button, .greenbutton {
251     text-decoration: none; font: menu;
252     display: inline-block; padding: 2px 8px;
253     background: ButtonFace; color: ButtonText;
254     border-style: solid; border-width: 2px;
255     border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
256         border-radius: 10px;
257         color: black;
258 }
259
260 .greenbutton {
261         color: white;
262         background-color: #80C337;
263 }
264
265 div.std h1, div.std h2, div.std h3, div.std h4, div.std h5 {
266         text-indent: 7px;
267 }
268         
269 div.std td {
270         border:1px solid #A6C9E2;
271 }
272         
273 div.std th, div.stdform th {
274         background-color:#6FA7D1;
275         color:#FFFFFF;
276         }
277
278 div.std tr.alt, div.stdform tr.alt {
279         background-color:#DFEFFC;
280 }
281
282 div.std th {
283         text-align: left;
284         text-indent: .1em;
285 }
286
287 #div.std a, div.stdform a {
288 #       /*color: #606060;*/
289 #       /*color: #147AB3;*/
290 #       color: black;
291 #}
292
293 td.head {
294         font-weight:bold;
295         text-align: center;
296 }
297
298 td.head a {
299         color:blue;
300 }
301
302 /* 
303   A Table representing 1 or more columns of text, i.e. Detail lists
304 */
305 div.detail table {
306         width: 100%;
307 }
308
309 div.detail caption {
310         border-bottom: solid 1px #C0C0C0;
311 }
312
313
314 /*
315         Approval Form select all
316
317 */
318 .selectAllButton {
319         background: transparent;
320         border:none;
321         color:blue;
322         text-decoration:underline;
323         font-weight:bold;
324         cursor:pointer;
325 }
326
327
328 /*
329         Begin Web Command Styling
330 */
331 #console_and_options {
332         position:relative;
333 }
334
335 .maximized {
336         position:absolute;
337         top:0px;
338         bottom:50px;
339         left:0px;
340         right:0px;
341         z-index:1000;
342         background-color:white;
343 }
344
345 #console_area {
346         -webkit-border-radius: 15px;
347         -moz-border-radius: 15px;
348         border-radius: 15px;
349         background-color: black;
350         color: white;
351         font-family: "Lucida Console", Monaco, monospace;
352         overflow-y: scroll;
353         height: 600px;
354         min-width: 600px;
355         padding: 5px;   
356         resize: vertical;
357 }
358
359 .command,.bold {
360         font-weight: bold;
361 }
362
363 .command:before {
364         content: "> ";
365 }
366
367 .response{
368         font-style: italic;
369         font-size: 150%;
370 }
371
372 #input_area {
373         margin-top: 10px;       
374         clear: both;
375 }
376
377 #command_field, #submit {
378         font-size: 125%;
379         background-color: #333333;
380         color: white;
381         font-family: "Lucida Console", Monaco, monospace;
382         -webkit-border-radius: 1em;
383         -moz-border-radius: 1em;
384         border-radius: 1em;
385 }
386
387 #command_field {
388         width: 75%;
389         padding-left: 1em;
390 }
391
392 #submit {
393         background-color: #7FB5C9;
394         padding: 0 5%;
395         float: right;
396 }
397
398 /*
399         Options Menu Styling for Web Command
400 */
401 #options_link {
402         -webkit-border-radius: 0 0 20% 20%;
403         -moz-border-radius: 0 0 20% 20%;
404         border-radius: 0 0 20% 20%;
405         -webkit-transition: opacity 0.5s ease-in-out;
406         -moz-transition: opacity 0.5s ease-in-out;
407         -ms-transition: opacity 0.5s ease-in-out;
408         -o-transition: opacity 0.5s ease-in-out;
409         transition: opacity 0.5s ease-in-out;
410 }
411
412 .closed {
413         opacity: 0.5;
414         filter: alpha(opacity=50);
415 }
416
417 #options_link:hover, .open {
418         opacity: 1.0;
419         filter: alpha(opacity=100);
420 }
421
422 #options_link, #options {
423         background: white;
424         position:absolute;
425         top:0;
426         right:2em;
427         padding:0.1em;
428 }
429
430 #options > img {
431         cursor: pointer;
432         float: right;
433         padding: 0.2em;
434 }
435
436 .selected {
437         border: 3px solid 2B6E9C;
438 }
439
440 #options, #text_slider {
441         display:none;
442         padding:0.5em;
443         -webkit-border-radius: 0 0 0 10px;
444         -moz-border-radius: 0 0 0 10px;
445         border-radius: 0 0 0 10px;
446 }
447 #text_slider {
448         clear:both;
449 }
450
451 /*
452         Button styling for changing text size
453 */
454 .change_font {
455         border-top: 1px solid #96d1f8;
456         background: #65a9d7;
457         background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
458         background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
459         background: -moz-linear-gradient(top, #3e779d, #65a9d7);
460         background: -ms-linear-gradient(top, #3e779d, #65a9d7);
461         background: -o-linear-gradient(top, #3e779d, #65a9d7);
462         padding: 0 2px;
463         -webkit-border-radius: 50%;
464         -moz-border-radius: 50%;
465         border-radius: 50%;
466         -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
467         -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
468         box-shadow: rgba(0,0,0,1) 0 1px 0;
469         text-shadow: rgba(0,0,0,.4) 0 1px 0;
470         color: white;
471         font-size: 14px;
472         font-family: monospace;
473         text-decoration: none;
474         vertical-align: middle;
475 }
476 .change_font:hover {
477         border-top-color: #28597a;
478         background: #28597a;
479         color: #ccc;
480 }
481
482 /*
483         Text Size Slider styling
484 */
485
486 input[type=range] {
487   -webkit-appearance: none;
488   width: 60%;
489   margin: 0;
490 }
491 input[type=range]:focus {
492   outline: none;
493 }
494 input[type=range]::-webkit-slider-runnable-track {
495   width: 100%;
496   height: 4px;
497   cursor: pointer;
498   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
499   background: #3071a9;
500   border-radius: 0.6px;
501   border: 0.5px solid #010101;
502 }
503 input[type=range]::-webkit-slider-thumb {
504   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
505   border: 1px solid #000000;
506   height: 16px;
507   width: 16px;
508   border-radius: 30px;
509   background: #efffff;
510   cursor: pointer;
511   -webkit-appearance: none;
512   margin-top: -7.15px;
513 }
514 input[type=range]:focus::-webkit-slider-runnable-track {
515   background: #367ebd;
516 }
517 input[type=range]::-moz-range-track {
518   width: 100%;
519   height: 2.7px;
520   cursor: pointer;
521   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
522   background: #3071a9;
523   border-radius: 0.6px;
524   border: 0.5px solid #010101;
525 }
526 input[type=range]::-moz-range-thumb {
527   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
528   border: 1px solid #000000;
529   height: 16px;
530   width: 16px;
531   border-radius: 30px;
532   background: #efffff;
533   cursor: pointer;
534 }
535 input[type=range]::-ms-track {
536   width: 100%;
537   height: 2.7px;
538   cursor: pointer;
539   background: transparent;
540   border-color: transparent;
541   color: transparent;
542 }
543 input[type=range]::-ms-fill-lower {
544   background: #2a6495;
545   border: 0.5px solid #010101;
546   border-radius: 1.2px;
547   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
548 }
549 input[type=range]::-ms-fill-upper {
550   background: #3071a9;
551   border: 0.5px solid #010101;
552   border-radius: 1.2px;
553   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
554 }
555 input[type=range]::-ms-thumb {
556   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
557   border: 1px solid #000000;
558   height: 16px;
559   width: 16px;
560   border-radius: 30px;
561   background: #efffff;
562   cursor: pointer;
563   height: 2.7px;
564 }
565 input[type=range]:focus::-ms-fill-lower {
566   background: #3071a9;
567 }
568 input[type=range]:focus::-ms-fill-upper {
569   background: #367ebd;
570 }
571 .expired {
572         color: red;
573         background-color: pink;
574 }
575 .blank_line {
576         padding: 10px;
577 }
578 #filterByUser input {
579         display: inline;
580 }
581
582 #PassChange p {
583         font-size: .9em;
584 }
585
586 #passwordRules li {
587         font-size: .9em;
588 }