update demo page and add object drawing capability
[face-privacy-filter.git] / web_demo / demo-framework.css
1 /*
2   ===============LICENSE_START=======================================================
3   Acumos Apache-2.0
4   ===================================================================================
5   Copyright (C) 2017-2018 AT&T Intellectual Property & Tech Mahindra. All rights reserved.
6   ===================================================================================
7   This Acumos software file is distributed by AT&T and Tech Mahindra
8   under the Apache License, Version 2.0 (the "License");
9   you may not use this file except in compliance with the License.
10   You may obtain a copy of the License at
11
12   http://www.apache.org/licenses/LICENSE-2.0
13
14   This file is distributed on an "AS IS" BASIS,
15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16   See the License for the specific language governing permissions and
17   limitations under the License.
18   ===============LICENSE_END=========================================================
19 */
20 body {
21   font-size:100%;
22   font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
23 }
24
25
26 hr {
27     margin: 10px 0;
28     width:100%;
29     clear: both;
30     float: none;
31 }
32
33 #srcVideo {
34   z-index: 1;
35 }
36 .videoWin {
37     margin: 5px;
38     height: 80px;
39     width: 120px;
40     position: absolute;
41     /* max-width:100%;
42     max-height:300px; */
43     margin-left: auto;
44     margin-right: auto;
45     /* width: auto;
46     height: auto; */
47     border: solid #888 3px;
48     background: rgba(221, 221, 221, 0.8); // #DDD;
49 }
50
51
52 .workingImage {
53     opacity: 0.7;
54 }
55
56 table {
57   border-collapse: collapse;
58   width: 100%;
59 }
60
61 th, td {
62   text-align: left;
63   padding: 8px;
64 }
65
66 th, .header {
67   background-color: #4CAF50;
68   color: white;
69 }
70
71 .tableConfig td:nth-child(odd) {
72     text-align:right;
73 }
74
75 tr:nth-child(even){
76   background-color: #c8c8c8;
77 }
78
79 br {
80     float: none;
81     clear: both;
82 }
83
84 .tiny {
85     font-size: x-small;
86     text-transform: uppercase;
87 }
88
89 .mediaRibbon div {
90     float:left;
91     clear: none;
92     padding: 2px;
93     border: solid #888 3px;
94     margin: 2px;
95     width: 40%;
96     background: rgba(221, 221, 221, 0.8); // #DDD;
97 }
98
99 #sourceRibbon div {
100     width:15%;
101 }
102
103 #sourceRibbon div:hover, #sourceRibbon div.selected {
104     border: solid blue 3px;
105     background: #BBB;
106 }
107
108
109 .mediaRibbon div img, .mediaRibbon div canvas {
110     display: block;
111     max-width:100%;
112     max-height:300px;
113     margin-left: auto;
114     margin-right: auto;
115     width: auto;
116     height: auto;
117 }
118
119
120 #sourceRibbon div img, #sourceRibbon div canvas {
121     max-height:95px;
122 }
123
124 .mediaRibbon div span {
125     font-size: small;
126     text-align: center;
127     clear: both;
128     display: block;
129 }
130
131 .mediaRibbon div .colorblock, .colorblock {
132     height: 5px;
133     width: 5px;
134     border: 1px solid black;
135     background-color: white;
136     display: block;
137     float: left;
138 }
139
140 #postSpinner {
141     background-image: url('spinnerbar.gif');
142     background-size:     contain;
143     background-repeat:   no-repeat;
144     height: 100px;
145     background-position: center center;
146     border: none;
147     width: 98%;
148     margin-left: auto;
149     margin-right: auto;
150 }