• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/* Colors:
2     IAMF purple/blue: #202e5f
3     IAMF green: #12b17d
4     IAMF yellow: #ffc80c
5     background of page: #ccc
6     text: #444
7     card inside: #f5f5f5
8     logBox has its own colors.
9*/
10
11body {
12  font-family: 'Google Sans', Arial, sans-serif;
13  margin: 0;
14  padding: 0;
15  background-color: #ccc;
16  transition: background-color 0.25s ease;
17  line-height: 1.6;
18}
19
20button {
21  font-size: 24px;
22  margin-top: 1rem;
23  padding: 0.25rem 1rem;
24  border: 2px solid #ccc;
25  border-radius: 0.25rem;
26  background-color: #f5f5f5;
27  font-weight: bold;
28}
29
30button:hover {
31  border: 2px solid #12b17d;
32  cursor: pointer;
33}
34
35button:active {
36  outline: none;
37  background-color: #12b17d;
38  color: #f5f5f5;
39}
40
41.activeButton {
42  outline: none;
43  background-color: #12b17d;
44  color: #f5f5f5;
45}
46
47h1 {
48  color: #202e5f;
49  text-align: center;
50  margin-top: 30px;
51  margin-bottom: 30px;
52}
53
54h2 {
55  text-align: center;
56  padding-bottom: 0.5rem;
57  margin-bottom: 2rem;
58  border-bottom: 2px solid #6b67bb;
59}
60
61h3 {
62  text-align: center;
63}
64
65audio {
66  width: 100%;
67}
68
69video {
70  width: 100%;
71  border-radius: 5px;
72}
73
74img {
75  display: block;
76  margin-left: auto;
77  margin-right: auto;
78  width: 35%;
79}
80
81input[type="checkbox"] {
82  accent-color: #12b17d;
83}
84
85label {
86  margin-left: 0.5rem;
87}
88
89canvas {
90  width: 100%;
91  height: 120px;
92  border-radius: 5px;
93  border: 2px solid #ccc;
94}
95
96canvas:hover {
97  cursor: crosshair;
98}
99
100.card {
101  background: #f5f5f5;
102  border-radius: 10px;
103  margin: 1rem;
104  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
105  padding: 20px;
106}
107
108.container {
109  width: 80%;
110  max-width: 1000px;
111  margin: auto;
112  overflow: hidden;
113}
114
115.div-disabled {
116  pointer-events: none;
117  border: 2px solid #ccc;
118  opacity: 0.1;
119}
120
121.dropdown {
122  margin-bottom: 1rem;
123}
124
125select {
126  padding: 0.25rem 1rem;
127  border: 2px solid #ccc;
128  border-radius: 0.25rem;
129  background-color: #f5f5f5;
130}
131
132select:focus {
133  outline: none;
134  border: 2px solid #12b17d;
135}
136
137.flexBox {
138 display: flex;
139}
140
141.audioDiv {
142  flex: 50%;
143  display: flex;
144  flex-direction: column;
145  justify-content: center;
146  align-items: center;
147  transition: background-color 0.1s ease;
148}
149
150.fineprint {
151  color: #202e5f;
152  text-align: center;
153  font-size: 11px;
154}
155
156#audioTimeline {
157  height: 150px;
158  width: 100%;
159  border: 2px solid #ccc;
160  border-radius: 10px;
161}
162
163#demoFile {
164  width: 500px;
165}
166
167#fileDrop {
168  height: 1.5rem;
169  width: 500px;
170  border-radius: 0.25rem;
171  border: 2px solid #12b17d;
172  padding: 0.25rem 0rem;
173  text-align: center;
174}
175
176#logBox {
177  background-color: #1b1b1b;
178  color: #ccc;
179  padding: 1rem;
180  height: 600px;
181  overflow-y: auto;
182  font-family: monospace;
183  font-size: 14px;
184}
185
186#logBox pre {
187  margin: 0;
188}
189