Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-06 2597cdc3863be2c566c6bba8fe985eaff4a87df6
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">&#10006;</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; }