Statistics
| Branch: | Revision:

blinker / firefox.plugin / data / style / style.css @ master

History | View | Annotate | Download (5.938 KB)

1
#gazeLinksInner{
2
        display: block;
3
        height: 300px;
4
        overflow: scroll;
5
        
6
}
7

    
8
.openedElement {
9
        transform:scale(1.2);
10
    border-color:#4bc970;
11
    box-shadow: 0 0 10px #4bc970;
12
    transition:all .07s;
13
}
14

    
15
.scrollGazeLinks{
16
        height:50px;
17
        display:block;
18
        width: 300px;
19
        color: #000000;
20
        text-align:center;
21
        background-color: #FFFFFF;
22
        border: 1px solid;
23
        box-shadow: 3px 3px 2px;
24
        padding: 5px;
25
        margin-bottom: 5px;
26

    
27
}
28

    
29
.scrollGazeLinksIcon{
30
        font-size: 50px !important;
31
}
32

    
33
.scrollGazeLinks a:link{
34
        color: #000000;
35
}
36

    
37
.scrollGazeLinks a:hover{
38
        color: #000000;
39
}
40

    
41
/*
42
#gazeOption_single{
43
        display:block;
44
        width:300px;
45
        height:50px;
46
        position:absolute;
47
}*/
48

    
49
.gazeLinkGazeOver {
50
        color: #FF000;
51
        background-color: #000000;
52
} 
53

    
54

    
55
#gazeLinks{
56
        z-index: 150001;
57
        /*max-height: 600px;*/
58
        min-width: 100px;
59
        overflow: hidden;                
60

    
61
}
62

    
63
.gazeLink{
64
        font-size:0.5em;
65
        display:block;
66
        width: 300px;
67
        height: 50px;
68
        overflow: hidden;
69
        /*overflow-y: hidden;*/
70
        color: #000000;
71
        background-color: #FFFFFF;
72
        border: 1px solid #000000;
73
        /*box-shadow: 3px 3px 2px;*/
74
        padding: 5px;
75
}
76

    
77
.gazeLink img{
78
        max-height: 45px;
79
        max-width: 280px;
80
}
81

    
82
.gazeLinkName {
83
        font-size:15px;
84
}
85

    
86
.gazeLinkOptionIcon{        
87
        z-index: -1;
88
        font-size: 40px !important;
89
        padding: 5px;
90
}
91

    
92
.gazeLinkOptionIcon.gazeConfirmation{
93
        display: block;
94
        text-align: center;
95
        font-size: 15px !important;
96
        padding: 5px;
97
}
98

    
99
.gazeLinkOption {        
100
        position:absolute;
101
        text-align: center;
102
        display:none;
103
        background-color: #FFFFFF;
104
        border: 1px solid #000000;
105
        /*width: 50px;
106
        height: 50px;*/
107
        z-index: 150003;
108
}
109

    
110
.modeIndicator{
111
        position: fixed;
112
        right: 0px;
113
        top: 0px;
114
        z-index: 120000;
115
        width: 75px;
116
        height: 75px;
117
        font-size: 25px;
118
        display:block;
119
        color:white;
120
        background-image: linear-gradient(#13D1EB, #74D7E5);
121
}
122

    
123
.gazeLinkConfirmation {        
124
        z-index:  150002;
125
        position:absolute;
126
        display:none;
127
        background-color: #FFFFFF;
128
        border: 1px solid #000000;
129
        width: 50px;
130
        height: 50px;
131
}
132

    
133
#leftGazeOption_single{
134
        display: block;
135
        position:absolute;
136
}
137

    
138
#rightGazeOption_single{
139
        display: block;        
140
        position: absolute;
141
}
142

    
143
#notification {
144
        display: none;
145
        z-index: 160000 !important;
146
        padding:10px !important;
147
        position: fixed !important;        
148
        right: 20px !important;
149
        bottom: 20px !important;
150
        width: 300px !important;
151
        height: auto !important;
152
        background-color: #13D1EB !important;
153
        border-radius:10px !important;
154
        color: #FFFFFF !important;        
155
        text-shadow: 2px 2px 4px #000000 !important;
156
}
157

    
158
#notification.table, #notification.tr, #notification.td{
159
        font-family: arial;
160
        color:white;
161
        background-color: #13D1EB !important;
162
        border: 0 !important;
163
}
164

    
165
.notifyjs-wrapper{
166
        z-index: 2147483641;
167

    
168
}
169

    
170
.notif_icon{
171
        
172
        font-size: 60px;
173
        display: inline-table;
174
        vertical-align: middle;
175
        padding-right:10px;
176
}
177

    
178
.notif_text{        
179
        line-height:1em;
180
        width:200px;
181
        display: inline-table;
182
        font-size: 20px;
183
        vertical-align: middle;
184
        /*border: 1px solid #000000;*/
185
        
186
}
187

    
188

    
189
.subtitle{
190
        font-size:12px !important;
191
        font-weight: bold;
192
        position:relative !important;
193
        top: -15px !important;
194
        text-shadow: -1px 0 #13D1EB, 0 1px #13D1EB, 1px 0 #13D1EB, 0 -1px #13D1EB;
195
}
196

    
197
.selectGazeLink{
198
        
199
}
200

    
201
.gazeLink a:link{
202
         color: #000000;
203
}
204
.gazeLink a:visited{
205
         color: #000000;
206
}
207

    
208
.wheelSelector.gazeLinkName{
209

    
210
        font-size: 20px !important;
211
        position: absolute;
212
        top: 175px;
213
        left: 175px;
214
        text-align: center;
215
        line-height: 30px;
216
        overflow: hidden;
217

    
218
}
219

    
220
.wheelSelector.gazeLinkName img{
221
        max-height: 140px;
222
        max-width: 140px;
223
}
224

    
225
.wheelSelector{
226
        color: #FFFFFF;
227
        position: absolute;
228
        display: inline-block;
229
        background-color: #74D7E5;
230
        width: 150px;
231
        height: 150px;
232
        border: 1px solid;
233
        border-radius: 75px;
234
        font-size: 100px;
235
        text-align: center;
236
}
237

    
238
.gazeGestures {
239
        display:none;
240
        position:absolute;
241
        background-color:#13D1EB;
242
        height: calc(100% * 0.25);
243
        width:  calc(100% * 0.25);
244
        z-index: 2147483641; /*on above calibration blackout*/
245
}
246

    
247
#gestureTopLeft {
248
        top:0;
249
        left:0;
250
}
251

    
252
#gestureTopRight {
253
        top:0;
254
        right:0;
255
}
256

    
257
#gestureBottomLeft {
258
        bottom: 0;
259
        left: 0;
260
}
261

    
262
#gestureBottomRight {
263
        bottom:0;
264
        right:0;
265
}
266
        
267

    
268

    
269

    
270
.controlBar {
271
  font-family: arial;
272
  font-size: 25px !important;
273
  top: 30% !important;
274
  width: 100% !important;
275
  background-image: linear-gradient(#13D1EB, #74D7E5) !important;
276
  position: fixed !important;
277
  text-align:center !important;
278
  z-index: 160000 !important;
279
  color:white !important;
280
  left:0px !important;
281
  box-shadow: 5px 5px 3px #444444 !important;
282
  line-height: 1em !important;
283
  /*overflow: hidden;
284
  white-space: nowrap;*/
285
}
286

    
287
.topBarItem {
288
  color: #FFFFFF !important;
289
  border: 1px solid #FFFFFF !important;
290
  background: #74D7E5 !important;
291
  height: 130px !important;
292
  width: 150px !important;
293
  display:inline-block !important;
294
  margin: 10px !important;
295
  font-size: 100px !important;
296
  text-align: center !important;
297
  vertical-align: middle !important;
298
  padding-top:20px !important;
299
  border-radius: 5px !important;
300
  box-shadow: 2px 2px 1px #444444 !important;
301
}
302

    
303

    
304
.wheelSelector a:link{
305
        color: #000000 !important;
306
}
307
.wheelSelector a:visited{
308
        color: #000000 !important;
309
}
310
.wheelSelector a:hover{
311
        color: #FF0000 !important;
312
}
313
.wheelSelector a:active{
314
        color: #FF0000 !important;
315
}
316

    
317
.wheelSelectorIcon{
318
        padding-top:25px;
319
}
320

    
321
body {
322
    overflow-x: hidden;
323
}
324

    
325
.edgeIndicator{
326
        display: block;
327
        position: fixed;
328
        background-color: #13D1EB;
329
        color: #FFFFFF;        
330
}
331

    
332
#leftIndicator{
333
        display:table-cell !important;
334
        vertical-align: middle;
335
        left:0px;
336
        top:0px;
337
        height:100%;
338
        width:20px;
339
}
340

    
341
#rightIndicator{
342
        right:0px;
343
        top:0px;
344
        height:100%;
345
        width:20px;
346
}
347

    
348
#topIndicator{
349
        left:0px;
350
        top:0px;
351
        height:20px;
352
        width:100%;
353
}
354

    
355
#noFocusHider{
356
        left:0px;
357
        top:0px;
358
        background-color: #13D1EB;
359
        display:none;
360
        position:fixed;
361
        width: 100%;
362
        height: 100%;
363
        z-index: 1600000 !important;
364
}