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