Rumpf-Konstrukt fuer Webapps
view | history | commit | commitdiff
ulrich
2021-05-11 00c9b90a741b84760a50792485a871f6ca3bd333
commit | author | age
00c9b9 1 /*
U 2   Proto - Ein Rumpf-Konstrukt fuer Webapps
3   Copyright (C) 2021  Ulrich Hilger
4
5   This program is free software: you can redistribute it and/or modify
6   it under the terms of the GNU Affero General Public License as
7   published by the Free Software Foundation, either version 3 of the
8   License, or (at your option) any later version.
9
10   This program is distributed in the hope that it will be useful,
11   but WITHOUT ANY WARRANTY; without even the implied warranty of
12   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13   GNU Affero General Public License for more details.
14
15   You should have received a copy of the GNU Affero General Public License
16   along with this program.  If not, see <https://www.gnu.org/licenses/>.
17 */
18 html, body {
19   margin: 0;
20   padding: 0;
21   height: 100%; /* Anmerkung 2 */
22   font-size: larger;
23   font-family: 'Roboto Condensed';
24 }
25 body {
26   min-height: 0; /* Anmerkung 1 */
27   display: flex;
28   flex-flow: column;
29 }
30 .inhalt {
31   display: flex;
32   flex-flow: row;
33   height: 100%; /* Anmerkung 2 */
34   min-height: 0; /* Anmerkung 1 */
35   background-color: #ededed;
36   overflow: hidden;
37 }
38 .nord {
39   background-color: black;
40   display: flex;
41   flex-flow: row;
42   height: 1.3em;
43   align-items: center;
44   /* justify-content: space-between; */
45 }
46 #nav-menu {
47   margin-left: 0.4rem;
48 }
49 .sued {
50   height: 1.5em;
51   overflow: hidden;
52   transition: all 0.3s ease-in;
53   background-color: lightgray;
54 }
55 .west {
56   flex-grow: 0;
57   flex-shrink: 0;
58   flex-basis: 4em;
59   /* background-color: white; */
60   transition: all 0.3s ease-in;
61   overflow: hidden;
62   white-space: nowrap;
63 }
64 .ost {
65   flex-grow: 0;
66   flex-shrink: 0;
67   flex-basis: 6em;
68   transition: all 0.3s ease-in;
69   background-color: antiquewhite;
70   overflow: hidden;
71 }
72 .zentrum-behaelter {
73   display: flex;
74   flex-flow: column;
75   /* background-color: #eaeaea; */
76   width: 100%;
77 }
78
79 .zentrum {
80   width: 100%;
81   height: 100%;
82   overflow-x: hidden;
83   overflow-y: auto;
84   -webkit-overflow-scrolling: touch;
85   background-color: white;
86 }
87
88 .zentraler-inhalt {
89   padding: 0.5em;
90 }
91
92 /*
93   Anmerkungen:
94   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
95       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
96   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
97       immer ueber das gesamte Browserfenster ausdehnt.
98 */
99
100 .app-titel {
101   margin-left: 0.6em;
102   color: white;
103 }
104
105 .pointer-cursor {
106   cursor: pointer;
107 }
108
109 .top-band {
110   display: flex;
111   flex-flow: row;
112   padding: 0.2rem 0 0.2rem 0.2rem;
113   font-size: smaller;  
114 }
115
116 .breadcrumb-behaelter {
117   display: flex;
118   flex-flow: row;
119   font-size: smaller;
120 }
121
122 .breadcrumb-link {
123   padding-right: 0.3rem;
124   text-decoration: none;
125   color: #0a67d1;
126 }
127
128 .breadcrumb-link:hover {
129   text-decoration: underline;
130 }
131
132 .bereich-name {
133   padding-left: 0.4rem;
134   font-size: smaller;  
135 }
136
137 .dialog {
138   position: relative;
139   /* height: 0.1em; */
140   transition: all 0.3s ease-in;
141 }
142
143 .dlg-behaelter {
144   line-height: 1.6;
145   padding: 0.4em;
146 }
147
148 .dlg-info {
149   background-color: #dcf2fb; // blau
150   padding: 0.4em;
151 }
152
153 /*
154   Close Button
155
156   <div>
157     <span class="close-btn">&#10006;</span>
158   </div>
159 */
160
161 .close-btn {
162   position: absolute;
163   top: 0px;
164   right: 0.4em;
165   margin: 0;
166   padding: 0;
167   font-size: 1.3em;
168   color: #b8b8b8;
169 }