Bedienoberfläche für Webradio
view | history | commit | commitdiff
ulrich
2018-01-04 ec55bf23138a7ab58af407b2bdb684b339864a5e
commit | author | age
9f0d54 1
U 2 /* ehem. app-layout anfang */
3
623a61 4 html, body {
9f0d54 5   margin: 0;
U 6   padding: 0;
7   height: 100%; /* Anmerkung 2 */
8   font-size: initial;
623a61 9   /* font-size: 1.5em; */   /* currently ems cause chrome bug misinterpreting rems on body element */
U 10   line-height: 1.6;
11   font-weight: 400;
9f0d54 12   font-family: RobotoCondensed;
623a61 13 }
9f0d54 14 body {
U 15   min-height: 0; /* Anmerkung 1 */
16   display: flex;
17   flex-flow: column;
18 }
19 .inhalt {
851c9c 20   display: flex;
U 21   flex-flow: row;
9f0d54 22   height: 100%; /* Anmerkung 2 */
U 23   min-height: 0; /* Anmerkung 1 */
623a61 24 }
9f0d54 25 .nord {
U 26   background-color: lightgray;
27   display: flex;
28   flex-flow: row;
29   height: 1.6em;
30 }
31 .sued {
32   background-color: lightgray;
33 }
623a61 34 .west {
9f0d54 35   flex-grow: 0;
U 36   flex-shrink: 0;
37   flex-basis: 10em;
38   background-color: antiquewhite;
623a61 39   transition: all 0.3s ease-in;
U 40   overflow: hidden;
41   white-space: nowrap;
9f0d54 42   background-color: #f7f7f7;
623a61 43 }
9f0d54 44 .ost {
U 45   flex-grow: 0;
46   flex-shrink: 0;
47   flex-basis: 10em;
48   background-color: antiquewhite;
49 }
50 /*
51 .zentrum {
52   width: 100%;
53   height: 100%;
54   overflow: auto;
55   -webkit-overflow-scrolling: touch;
56 }
57 */
58 .zentrum {
59   display: flex;
60   flex-flow: row;
61   overflow-x: hidden;
62   margin: 0;
63 }
64
65 /*
66   Anmerkungen:
67   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
68       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
69   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
70       immer ueber das gesamte Browserfenster ausdehnt.
71 */
72
73 /* ehem. app-layout ende */
74
75
623a61 76
U 77 #app-titel {
78   padding-left: 2em;
79 }
80
81 .pointer-cursor {
82   cursor: pointer;
83 }
84
9f0d54 85 .zentrum-behaelter {
623a61 86   display: flex;
9f0d54 87   flex-flow: column;
U 88 }
89
90
91 /* Dialogfeld */
92
93 .dialog {
94   background-color: #fffbde;
95   position: relative;
96 }
97
98
99 /*
100   Close Button
101
102   <div>
103     <span class="close-btn">&#10006;</span>
104   </div>
105 */
106
107 .close-btn {
108   position: absolute;
109   top: 0px;
110   right: 0.4em;
623a61 111   margin: 0;
9f0d54 112   padding: 0;
U 113   font-size: 1.3em;
114   color: #b8b8b8;
623a61 115 }
U 116
36646e 117 .dlg-info {
U 118   background-color: #dcf2fb;
119 }
120
47a970 121 /* Sender */
U 122
123 .sender-behaelter {
124   display: flex;
125   flex-flow: column;
126 }
127
128 .sender {
129   display: flex;
130   flex-flow: row;
131   padding: 0.4em;
132   flex-wrap: wrap;
133   background-color: #eaeaea;
134 }
135
136 .sender-kachel {
137   display: flex;
138   flex-flow: column;
139   align-items: center;
140   margin: 0.4em;
141   padding: 0.4em;
142   background-color: white;
143 }
144
145 .sender-name {
146   font-family: RobotoCondensedBold;
147 }
148
149 .sender-bild {
150   width: 5em;
151   background-color: #ebe6e6;
152 }
153
9f0d54 154 /* Menü-Erscheinung */
U 155
156 .app-menu-kopf {
157   font-family: Oswald;
158 }
159
851c9c 160 /* fonts */
623a61 161
U 162 @font-face {
851c9c 163     font-family: 'Amethysta';
U 164     font-style: normal;
165     font-weight: 700;
166     src: url(/lib/fonts/Amethysta/Amethysta-Regular.ttf) format('truetype');
623a61 167 }
851c9c 168 @font-face {
U 169     font-family: 'Oswald';
170     font-style: normal;
171     font-weight: 700;
172     src: url(/lib/fonts/Oswald/Oswald-Regular.ttf) format('truetype');
173 }
174 @font-face {
175     font-family: 'OswaldBold';
176     font-weight: bold;
177     src: url(/lib/fonts/Oswald/Oswald-Bold.ttf) format('truetype');
178 }
179 @font-face {
180     font-family: 'RobotoCondensed';
181     font-weight: normal;
182     src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf) format('truetype');
183 }
184 @font-face {
185     font-family: 'RobotoCondensedBold';
186     font-weight: bold;
187     src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf) format('truetype');
188 }