Thu, 04 Jun 2015 14:50:33 +0200
Genesis of lecture sources for Droidcon Berlin 2015 in Postbahnhof.
1 /*
2 *
3 * Licensed to the Apache Software Foundation (ASF) under one
4 * or more contributor license agreements. See the NOTICE file
5 * distributed with this work for additional information
6 * regarding copyright ownership. The ASF licenses this file
7 * to you under the Apache License, Version 2.0 (the
8 * "License"); you may not use this file except in compliance
9 * with the License. You may obtain a copy of the License at
10 *
11 * http://www.apache.org/licenses/LICENSE-2.0
12 *
13 * Unless required by applicable law or agreed to in writing,
14 * software distributed under the License is distributed on an
15 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 * KIND, either express or implied. See the License for the
17 * specific language governing permissions and limitations
18 * under the License.
19 *
20 */
22 /* Main dialog setup */
23 form[role="dialog"] {
24 background:
25 url(../img/pattern.png) repeat left top,
26 url(../img/gradient.png) no-repeat left top / 100% 100%;
27 overflow: hidden;
28 position: absolute;
29 z-index: 100;
30 top: 0;
31 left: 0;
32 right: 0;
33 bottom: 0;
34 padding: 1.5rem 0 7rem;
35 font-family: "MozTT", Sans-serif;
36 font-size: 0;
37 /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
38 created by white-spaces and break lines in the code betewen inline-block elements */
39 color: #fff;
40 text-align: left;
41 }
43 form[role="dialog"]:before {
44 content: "";
45 display: inline-block;
46 vertical-align: middle;
47 width: 0.1rem;
48 height: 100%;
49 margin-left: -0.1rem;
50 }
52 form[role="dialog"] > section {
53 font-weight: lighter;
54 font-size: 1.8rem;
55 color: #FAFAFA;
56 padding: 0 1.5rem;
57 -moz-box-sizing: padding-box;
58 width: 100%;
59 display: inline-block;
60 overflow-y: scroll;
61 max-height: 100%;
62 vertical-align: middle;
63 white-space: normal;
64 }
66 form[role="dialog"] h1 {
67 font-weight: normal;
68 font-size: 1.6rem;
69 line-height: 1.5em;
70 color: #fff;
71 margin: 0;
72 padding: 0 1.5rem 1rem;
73 border-bottom: 0.1rem solid #686868;
74 }
76 /* Menu & buttons setup */
77 form[role="dialog"] menu {
78 margin: 0;
79 padding: 1.5rem;
80 padding-bottom: 0.5rem;
81 border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
82 background: #2d2d2d url(../img/pattern.png) repeat left top;
83 display: block;
84 overflow: hidden;
85 position: absolute;
86 left: 0;
87 right: 0;
88 bottom: 0;
89 text-align: center;
90 }
92 form[role="dialog"] menu button::-moz-focus-inner {
93 border: none;
94 outline: none;
95 }
96 form[role="dialog"] menu button {
97 width: 100%;
98 height: 2.4rem;
99 margin: 0 0 1rem;
100 padding: 0 1.5rem;
101 -moz-box-sizing: border-box;
102 display: inline-block;
103 vertical-align: middle;
104 text-overflow: ellipsis;
105 white-space: nowrap;
106 overflow: hidden;
107 background: #fafafa url(../img/default.png) repeat-x left bottom/ auto 100%;
108 border: 0.1rem solid #a6a6a6;
109 border-radius: 0.3rem;
110 font: 500 1.2rem/2.4rem 'MozTT', Sans-serif;
111 color: #333;
112 text-align: center;
113 text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
114 text-decoration: none;
115 outline: none;
116 }
118 /* Press (default & recommend) */
119 form[role="dialog"] menu button:active,
120 form[role="dialog"] menu button.recommend:active,
121 a.recommend[role="button"]:active {
122 border-color: #008aaa;
123 color: #333;
124 }
126 /* Recommend */
127 form[role="dialog"] menu button.recommend {
128 background-image: url(../img/recommend.png);
129 background-color: #00caf2;
130 border-color: #008eab;
131 }
133 /* Danger */
134 form[role="dialog"] menu button.danger,
135 a.danger[role="button"] {
136 background-image: url(../img/danger.png);
137 background-color: #b70404;
138 color: #fff;
139 text-shadow: none;
140 border-color: #820000;
141 }
143 /* Danger Press */
144 form[role="dialog"] menu button.danger:active {
145 background-image: url(../img/danger-press.png);
146 background-color: #890707;
147 }
149 /* Disabled */
150 form[role="dialog"] > menu > button[disabled] {
151 background: #5f5f5f;
152 color: #4d4d4d;
153 text-shadow: none;
154 border-color: #4d4d4d;
155 pointer-events: none;
156 }
159 form[role="dialog"] menu button:nth-child(even) {
160 margin-left: 1rem;
161 }
163 form[role="dialog"] menu button,
164 form[role="dialog"] menu button:nth-child(odd) {
165 margin: 0 0 1rem 0;
166 }
168 form[role="dialog"] menu button {
169 width: calc((100% - 1rem) / 2);
170 }
172 form[role="dialog"] menu button.full {
173 width: 100%;
174 }
176 /* Specific component code */
177 form[role="dialog"] p {
178 word-wrap: break-word;
179 margin: 1rem 0 0;
180 padding: 0 1.5rem 1rem;
181 line-height: 3rem;
182 }
184 form[role="dialog"] p img {
185 float: left;
186 margin-right: 2rem;
187 }
189 form[role="dialog"] p strong {
190 font-weight: lighter;
191 }
193 form[role="dialog"] p small {
194 font-size: 1.4rem;
195 font-weight: normal;
196 color: #cbcbcb;
197 display: block;
198 }
200 form[role="dialog"] dl {
201 border-top: 0.1rem solid #686868;
202 margin: 1rem 0 0;
203 overflow: hidden;
204 padding-top: 1rem;
205 font-size: 1.6rem;
206 line-height: 2.2rem;
207 }
209 form[role="dialog"] dl > dt {
210 clear: both;
211 float: left;
212 width: 7rem;
213 padding-left: 1.5rem;
214 font-weight: 500;
215 text-align: left;
216 }
218 form[role="dialog"] dl > dd {
219 padding-right: 1.5rem;
220 font-weight: 300;
221 text-overflow: ellipsis;
222 vertical-align: top;
223 overflow: hidden;
224 }
226 /* input areas */
227 input[type="text"],
228 input[type="password"],
229 input[type="email"],
230 input[type="tel"],
231 input[type="search"],
232 input[type="url"],
233 input[type="number"],
234 textarea {
235 -moz-box-sizing: border-box;
236 display: block;
237 overflow: hidden;
238 width: 100%;
239 height: 3rem;
240 resize: none;
241 padding: 0 1rem;
242 font-size: 1.6rem;
243 line-height: 3rem;
244 border: 0.1rem solid #ccc;
245 border-radius: 0.3rem;
246 box-shadow: none; /* override the box-shadow from the system (performance issue) */
247 background: #fff url(input_areas/images/ui/shadow.png) repeat-x;
248 }