Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-06 8239d17d0bbdae65fdd801a652a3918b7212072a
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;
faab2d 38   background-color: #ececec; /* white; */
cfa858 39   transition: all 0.3s ease-in;
U 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;
faab2d 64   background-color: white;
cfa858 65 }
U 66
67 .zentraler-inhalt {
68   padding: 0.5em;
69 }
70
71 /*
72   Anmerkungen:
73   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
74       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
75   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
76       immer ueber das gesamte Browserfenster ausdehnt.
77 */
78
79 .app-titel {
80   margin-left: 0.6em;
81   color: white;
82 }
83
84 .pointer-cursor {
85   cursor: pointer;
86 }
87
88 .dialog {
89   position: relative;
90   /* height: 0.1em; */
91   transition: all 0.3s ease-in;
92 }
93
8239d1 94 .dialog-unten {
U 95   position: relative;
96   /* height: 0.1em; */
97   transition: all 0.3s ease-in;
98 }
99
cfa858 100 .dlg-behaelter {
U 101   line-height: 1.6;
102   padding: 0.4em;
103 }
104
105 .dlg-info {
faab2d 106   background-color: #dcf2fb; /* blau */
cfa858 107   padding: 0.4em;
U 108 }
109
110 /*
111   Close Button
112
113   <div>
114     <span class="close-btn">&#10006;</span>
115   </div>
116 */
117
118 .close-btn {
119   position: absolute;
120   top: 0px;
121   right: 0.4em;
122   margin: 0;
123   padding: 0;
124   font-size: 1.3em;
125   color: #b8b8b8;
126 }
b379f5 127
U 128 /* ab hier Mediazentrale */
129
130 .entity-formular {
131   display: flex;
132   flex-flow: column;
133 }
134
faab2d 135 .entity-liste-kopf {
U 136   display: flex;
137   flex-flow: row;
138   justify-content: space-between;
139   vertical-align: middle;
140 }
141
142 .entity-liste-kopf .button {
143   /* margin-left: 1rem; */
144   /* margin-top: -0.2rem; */
145 }
146
b379f5 147 .entity-element {
U 148   margin: 0.4rem;
faab2d 149 }
U 150
151 .entity-element:hover {
152   background-color: background;
b379f5 153 }
U 154
a43e1a 155 .entity-liste {
U 156   list-style-type: none;
157 }
158
159 .entity-eintrag {
160   margin-top: 0.8rem;
161   margin-left: 0;
162   margin-right: 0;
163   margin-bottom: 0;
faab2d 164   cursor: pointer;
U 165 }
166
167 .entity-eintrag:hover {
168   background-color: background;
a43e1a 169 }
U 170
5b7356 171 .form-button-footer {
U 172   display: flex;
173   flex-flow: row;
174 }
175
176 .dlg-btn {
177   margin-left: 0.4rem;
178 }
179
faab2d 180
b379f5 181 @media (min-width: 800px) {
faab2d 182   .zentraler-inhalt {
b379f5 183     margin: 0 10% 0 10%;
U 184   }
185 }
186
187
188 /* von Skeleton */
189
190 /* Buttons
191 –––––––––––––––––––––––––––––––––––––––––––––––––– */
192 .button,
193 button,
194 input[type="submit"],
195 input[type="reset"],
196 input[type="button"] {
197   display: inline-block;
198   height: 38px;
199   padding: 0 30px;
200   color: #555;
201   text-align: center;
202   font-size: 11px;
203   font-weight: 600;
204   line-height: 38px;
205   letter-spacing: .1rem;
206   text-transform: uppercase;
207   text-decoration: none;
208   white-space: nowrap;
209   background-color: transparent;
210   border-radius: 4px;
211   border: 1px solid #bbb;
212   cursor: pointer;
213   box-sizing: border-box; }
214 .button:hover,
215 button:hover,
216 input[type="submit"]:hover,
217 input[type="reset"]:hover,
218 input[type="button"]:hover,
219 .button:focus,
220 button:focus,
221 input[type="submit"]:focus,
222 input[type="reset"]:focus,
223 input[type="button"]:focus {
224   color: #333;
225   border-color: #888;
226   outline: 0; }
227 .button.button-primary,
228 button.button-primary,
229 input[type="submit"].button-primary,
230 input[type="reset"].button-primary,
231 input[type="button"].button-primary {
232   color: #FFF;
233   background-color: #33C3F0;
234   border-color: #33C3F0; }
235 .button.button-primary:hover,
236 button.button-primary:hover,
237 input[type="submit"].button-primary:hover,
238 input[type="reset"].button-primary:hover,
239 input[type="button"].button-primary:hover,
240 .button.button-primary:focus,
241 button.button-primary:focus,
242 input[type="submit"].button-primary:focus,
243 input[type="reset"].button-primary:focus,
244 input[type="button"].button-primary:focus {
245   color: #FFF;
246   background-color: #1EAEDB;
247   border-color: #1EAEDB; }
248
249
250 /* Forms
251 –––––––––––––––––––––––––––––––––––––––––––––––––– */
252 input[type="email"],
253 input[type="number"],
254 input[type="search"],
255 input[type="text"],
256 input[type="tel"],
257 input[type="url"],
258 input[type="password"],
259 textarea,
260 select {
261   height: 38px;
262   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
263   background-color: #fff;
264   border: 1px solid #D1D1D1;
265   border-radius: 4px;
266   box-shadow: none;
267   box-sizing: border-box; }
268 /* Removes awkward default styles on some inputs for iOS */
269 input[type="email"],
270 input[type="number"],
271 input[type="search"],
272 input[type="text"],
273 input[type="tel"],
274 input[type="url"],
275 input[type="password"],
276 textarea {
277   -webkit-appearance: none;
278      -moz-appearance: none;
279           appearance: none; }
280 textarea {
281   min-height: 65px;
282   padding-top: 6px;
283   padding-bottom: 6px; }
284 input[type="email"]:focus,
285 input[type="number"]:focus,
286 input[type="search"]:focus,
287 input[type="text"]:focus,
288 input[type="tel"]:focus,
289 input[type="url"]:focus,
290 input[type="password"]:focus,
291 textarea:focus,
292 select:focus {
293   border: 1px solid #33C3F0;
294   outline: 0; }
295 label,
296 legend {
297   display: block;
298   margin-bottom: .5rem;
299   font-weight: 600; }
300 fieldset {
301   padding: 0;
302   border-width: 0; }
303 input[type="checkbox"],
304 input[type="radio"] {
305   display: inline; }
306 label > .label-body {
307   display: inline-block;
308   margin-left: .5rem;
309   font-weight: normal; }