1 | @font-face {
|
2 | font-family: 'MuliRegular';
|
3 | src: url('font/Muli-Regular-webfont.eot');
|
4 | src: url('font/Muli-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
5 | url('font/Muli-Regular-webfont.woff') format('woff'),
|
6 | url('font/Muli-Regular-webfont.ttf') format('truetype'),
|
7 | url('font/Muli-Regular-webfont.svg#MuliRegular') format('svg');
|
8 | font-weight: normal;
|
9 | font-style: normal;
|
10 |
|
11 | }
|
12 |
|
13 | html,body {
|
14 | background-color: #f3f3f3;
|
15 | }
|
16 |
|
17 | html,body,iframe {
|
18 | width: 100%;
|
19 | height: 100%;
|
20 | margin: 0px;
|
21 | }
|
22 |
|
23 | #content, iframe {
|
24 | position:absolute;
|
25 | background-color: transparent;
|
26 | }
|
27 |
|
28 | #content {
|
29 | top: 32px;
|
30 | left: 0;
|
31 | bottom: 0;
|
32 | right: 0;
|
33 | z-index: 1;
|
34 | }
|
35 |
|
36 | html,body {
|
37 | overflow: hidden;
|
38 | }
|
39 |
|
40 | #status_bar {
|
41 | top: 0px;
|
42 | height: 31px;
|
43 | line-height: 32px;
|
44 | vertical-align: center;
|
45 | border-bottom: 1px solid #dfdfdf;
|
46 | box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
|
47 | background-color: #FFF;
|
48 | color: #000;
|
49 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
50 | padding: 0 10px;
|
51 | }
|
52 |
|
53 | #status_bar, #content, #background_text, #status_logs {
|
54 | position: absolute;
|
55 | left: 0px;
|
56 | right: 0px;
|
57 | }
|
58 |
|
59 | .title {
|
60 | text-rendering: optimizeLegibility;
|
61 | font-family: "MuliRegular";
|
62 | text-transform: uppercase;
|
63 | font-size: 16px;
|
64 | letter-spacing: 2px;
|
65 | margin-right: 2em;
|
66 | }
|
67 | .title .initials {
|
68 | font-family: "MuliRegular";
|
69 | text-transform: lowercase;
|
70 | font-size: 20px;
|
71 | font-weight: normal;
|
72 | letter-spacing: -1px;
|
73 | margin-right: 6px;
|
74 | }
|
75 |
|
76 |
|
77 | #pause_resume {
|
78 | position: absolute;
|
79 | top: 0px;
|
80 | right: 10px;
|
81 | color: #000;
|
82 | }
|
83 |
|
84 | #background_text {
|
85 | position: absolute;
|
86 | top: 32px;
|
87 | bottom: 10em;
|
88 | }
|
89 |
|
90 | #background_text:after {
|
91 | content: "attester";
|
92 | position: absolute;
|
93 | top: 50%;
|
94 | left: 50%;
|
95 | font-size: 200px;
|
96 | line-height: 100px;
|
97 | margin: -50px 0 0 -350px;
|
98 | color: #ccc;
|
99 | color: rgba(0,0,0,0.15);
|
100 | font-family: "MuliRegular";
|
101 | }
|
102 |
|
103 | #status_logs {
|
104 | position: absolute;
|
105 | bottom: 0px;
|
106 | height: 10em;
|
107 | vertical-align: baseline;
|
108 | border-top: 1px solid #dfdfdf;
|
109 | box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
|
110 | background-color: #FFF;
|
111 | color: #000;
|
112 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
113 | overflow: auto;
|
114 | }
|
115 |
|
116 | #status_logs p {
|
117 | padding-left: 10px;
|
118 | margin: 0.4em 0;
|
119 | vertical-align: middle;
|
120 | }
|
121 |
|
122 | #status_logs .timestamp {
|
123 | font-size: 85%;
|
124 | color: #8a8a8a;
|
125 | width: 6em;
|
126 | text-align: right;
|
127 | display: inline-block;
|
128 | margin-right: 1em;
|
129 | }
|
130 |
|
131 | #status_logs i {
|
132 | font-style: normal;
|
133 | color: #8a8a8a;
|
134 | font-family: monospace;
|
135 | font-size: 120%;
|
136 | }
|
137 |
|
138 | #status_logs i.event {
|
139 | min-width: 9em;
|
140 | display: inline-block;
|
141 | text-align: center;
|
142 | }
|
143 |
|
144 | #status_logs i.error {
|
145 | color: #cc7768;
|
146 | }
|
147 |
|
148 | @media screen and (max-width: 900px) {
|
149 | #background_text:after {
|
150 | content: "attester";
|
151 | font-size: 100px;
|
152 | line-height: 50px;
|
153 | margin: -30px 0 0 -200px;
|
154 | }
|
155 | #background_text {
|
156 | bottom: 6em;
|
157 | }
|
158 | #status_logs {
|
159 | height: 6em;
|
160 | }
|
161 | }
|
162 |
|
163 | @media screen and (max-width: 430px) {
|
164 | #background_text:after {
|
165 | content: "attester";
|
166 | font-size: 50px;
|
167 | margin: -30px 0 0 -100px;
|
168 | }
|
169 | .title {
|
170 | display: none;
|
171 | }
|
172 | } |
\ | No newline at end of file |