commit | author | age
|
cfa858
|
1 |
html, body { |
U |
2 |
margin: 0; |
|
3 |
padding: 0; |
|
4 |
height: 100%; /* Anmerkung 2 */ |
|
5 |
font-size: larger; |
|
6 |
font-family: 'Roboto Condensed'; |
|
7 |
} |
|
8 |
body { |
|
9 |
min-height: 0; /* Anmerkung 1 */ |
|
10 |
display: flex; |
|
11 |
flex-flow: column; |
|
12 |
} |
|
13 |
.inhalt { |
|
14 |
display: flex; |
|
15 |
flex-flow: row; |
|
16 |
height: 100%; /* Anmerkung 2 */ |
|
17 |
min-height: 0; /* Anmerkung 1 */ |
|
18 |
background-color: #ededed; |
|
19 |
overflow: hidden; |
|
20 |
} |
|
21 |
.nord { |
|
22 |
background-color: black; |
|
23 |
display: flex; |
|
24 |
flex-flow: row; |
|
25 |
height: 2em; |
|
26 |
align-items: center; |
|
27 |
} |
|
28 |
.sued { |
|
29 |
height: 1.5em; |
|
30 |
overflow: hidden; |
|
31 |
transition: all 0.3s ease-in; |
|
32 |
background-color: lightgray; |
|
33 |
} |
|
34 |
.west { |
|
35 |
flex-grow: 0; |
|
36 |
flex-shrink: 0; |
|
37 |
flex-basis: 4em; |
|
38 |
background-color: white; |
|
39 |
transition: all 0.3s ease-in; |
|
40 |
overflow: hidden; |
|
41 |
white-space: nowrap; |
|
42 |
} |
|
43 |
.ost { |
|
44 |
flex-grow: 0; |
|
45 |
flex-shrink: 0; |
|
46 |
flex-basis: 6em; |
|
47 |
transition: all 0.3s ease-in; |
|
48 |
background-color: antiquewhite; |
|
49 |
overflow: hidden; |
|
50 |
} |
|
51 |
.zentrum-behaelter { |
|
52 |
display: flex; |
|
53 |
flex-flow: column; |
|
54 |
/* background-color: #eaeaea; */ |
|
55 |
width: 100%; |
|
56 |
} |
|
57 |
|
|
58 |
.zentrum { |
|
59 |
width: 100%; |
|
60 |
height: 100%; |
|
61 |
overflow-x: hidden; |
|
62 |
overflow-y: auto; |
|
63 |
-webkit-overflow-scrolling: touch; |
|
64 |
} |
|
65 |
|
|
66 |
.zentraler-inhalt { |
|
67 |
padding: 0.5em; |
|
68 |
} |
|
69 |
|
|
70 |
/* |
|
71 |
Anmerkungen: |
|
72 |
1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. |
|
73 |
http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto |
|
74 |
2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles |
|
75 |
immer ueber das gesamte Browserfenster ausdehnt. |
|
76 |
*/ |
|
77 |
|
|
78 |
.app-titel { |
|
79 |
margin-left: 0.6em; |
|
80 |
color: white; |
|
81 |
} |
|
82 |
|
|
83 |
.pointer-cursor { |
|
84 |
cursor: pointer; |
|
85 |
} |
|
86 |
|
|
87 |
.dialog { |
|
88 |
position: relative; |
|
89 |
/* height: 0.1em; */ |
|
90 |
transition: all 0.3s ease-in; |
|
91 |
} |
|
92 |
|
|
93 |
.dlg-behaelter { |
|
94 |
line-height: 1.6; |
|
95 |
padding: 0.4em; |
|
96 |
} |
|
97 |
|
|
98 |
.dlg-info { |
|
99 |
background-color: #dcf2fb; // blau |
|
100 |
padding: 0.4em; |
|
101 |
} |
|
102 |
|
|
103 |
/* |
|
104 |
Close Button |
|
105 |
|
|
106 |
<div> |
|
107 |
<span class="close-btn">✖</span> |
|
108 |
</div> |
|
109 |
*/ |
|
110 |
|
|
111 |
.close-btn { |
|
112 |
position: absolute; |
|
113 |
top: 0px; |
|
114 |
right: 0.4em; |
|
115 |
margin: 0; |
|
116 |
padding: 0; |
|
117 |
font-size: 1.3em; |
|
118 |
color: #b8b8b8; |
|
119 |
} |
b379f5
|
120 |
|
U |
121 |
/* ab hier Mediazentrale */ |
|
122 |
|
|
123 |
.entity-formular { |
|
124 |
display: flex; |
|
125 |
flex-flow: column; |
|
126 |
} |
|
127 |
|
|
128 |
.entity-element { |
|
129 |
margin: 0.4rem; |
|
130 |
} |
|
131 |
|
a43e1a
|
132 |
.entity-liste { |
U |
133 |
list-style-type: none; |
|
134 |
} |
|
135 |
|
|
136 |
.entity-eintrag { |
|
137 |
margin-top: 0.8rem; |
|
138 |
margin-left: 0; |
|
139 |
margin-right: 0; |
|
140 |
margin-bottom: 0; |
|
141 |
} |
|
142 |
|
5b7356
|
143 |
.form-button-footer { |
U |
144 |
display: flex; |
|
145 |
flex-flow: row; |
|
146 |
} |
|
147 |
|
|
148 |
.dlg-btn { |
|
149 |
margin-left: 0.4rem; |
|
150 |
} |
|
151 |
|
b379f5
|
152 |
/* |
U |
153 |
@media (min-width: 800px) { |
|
154 |
.zentrum-behaelter { |
|
155 |
padding: 0 1em 0 1em; |
|
156 |
} |
|
157 |
.zentrum-behaelter, .nord { |
|
158 |
margin: 0 10% 0 10%; |
|
159 |
} |
|
160 |
} |
|
161 |
|
|
162 |
|
|
163 |
/* von Skeleton */ |
|
164 |
|
|
165 |
/* Buttons |
|
166 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
|
167 |
.button, |
|
168 |
button, |
|
169 |
input[type="submit"], |
|
170 |
input[type="reset"], |
|
171 |
input[type="button"] { |
|
172 |
display: inline-block; |
|
173 |
height: 38px; |
|
174 |
padding: 0 30px; |
|
175 |
color: #555; |
|
176 |
text-align: center; |
|
177 |
font-size: 11px; |
|
178 |
font-weight: 600; |
|
179 |
line-height: 38px; |
|
180 |
letter-spacing: .1rem; |
|
181 |
text-transform: uppercase; |
|
182 |
text-decoration: none; |
|
183 |
white-space: nowrap; |
|
184 |
background-color: transparent; |
|
185 |
border-radius: 4px; |
|
186 |
border: 1px solid #bbb; |
|
187 |
cursor: pointer; |
|
188 |
box-sizing: border-box; } |
|
189 |
.button:hover, |
|
190 |
button:hover, |
|
191 |
input[type="submit"]:hover, |
|
192 |
input[type="reset"]:hover, |
|
193 |
input[type="button"]:hover, |
|
194 |
.button:focus, |
|
195 |
button:focus, |
|
196 |
input[type="submit"]:focus, |
|
197 |
input[type="reset"]:focus, |
|
198 |
input[type="button"]:focus { |
|
199 |
color: #333; |
|
200 |
border-color: #888; |
|
201 |
outline: 0; } |
|
202 |
.button.button-primary, |
|
203 |
button.button-primary, |
|
204 |
input[type="submit"].button-primary, |
|
205 |
input[type="reset"].button-primary, |
|
206 |
input[type="button"].button-primary { |
|
207 |
color: #FFF; |
|
208 |
background-color: #33C3F0; |
|
209 |
border-color: #33C3F0; } |
|
210 |
.button.button-primary:hover, |
|
211 |
button.button-primary:hover, |
|
212 |
input[type="submit"].button-primary:hover, |
|
213 |
input[type="reset"].button-primary:hover, |
|
214 |
input[type="button"].button-primary:hover, |
|
215 |
.button.button-primary:focus, |
|
216 |
button.button-primary:focus, |
|
217 |
input[type="submit"].button-primary:focus, |
|
218 |
input[type="reset"].button-primary:focus, |
|
219 |
input[type="button"].button-primary:focus { |
|
220 |
color: #FFF; |
|
221 |
background-color: #1EAEDB; |
|
222 |
border-color: #1EAEDB; } |
|
223 |
|
|
224 |
|
|
225 |
/* Forms |
|
226 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ |
|
227 |
input[type="email"], |
|
228 |
input[type="number"], |
|
229 |
input[type="search"], |
|
230 |
input[type="text"], |
|
231 |
input[type="tel"], |
|
232 |
input[type="url"], |
|
233 |
input[type="password"], |
|
234 |
textarea, |
|
235 |
select { |
|
236 |
height: 38px; |
|
237 |
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ |
|
238 |
background-color: #fff; |
|
239 |
border: 1px solid #D1D1D1; |
|
240 |
border-radius: 4px; |
|
241 |
box-shadow: none; |
|
242 |
box-sizing: border-box; } |
|
243 |
/* Removes awkward default styles on some inputs for iOS */ |
|
244 |
input[type="email"], |
|
245 |
input[type="number"], |
|
246 |
input[type="search"], |
|
247 |
input[type="text"], |
|
248 |
input[type="tel"], |
|
249 |
input[type="url"], |
|
250 |
input[type="password"], |
|
251 |
textarea { |
|
252 |
-webkit-appearance: none; |
|
253 |
-moz-appearance: none; |
|
254 |
appearance: none; } |
|
255 |
textarea { |
|
256 |
min-height: 65px; |
|
257 |
padding-top: 6px; |
|
258 |
padding-bottom: 6px; } |
|
259 |
input[type="email"]:focus, |
|
260 |
input[type="number"]:focus, |
|
261 |
input[type="search"]:focus, |
|
262 |
input[type="text"]:focus, |
|
263 |
input[type="tel"]:focus, |
|
264 |
input[type="url"]:focus, |
|
265 |
input[type="password"]:focus, |
|
266 |
textarea:focus, |
|
267 |
select:focus { |
|
268 |
border: 1px solid #33C3F0; |
|
269 |
outline: 0; } |
|
270 |
label, |
|
271 |
legend { |
|
272 |
display: block; |
|
273 |
margin-bottom: .5rem; |
|
274 |
font-weight: 600; } |
|
275 |
fieldset { |
|
276 |
padding: 0; |
|
277 |
border-width: 0; } |
|
278 |
input[type="checkbox"], |
|
279 |
input[type="radio"] { |
|
280 |
display: inline; } |
|
281 |
label > .label-body { |
|
282 |
display: inline-block; |
|
283 |
margin-left: .5rem; |
|
284 |
font-weight: normal; } |