Bedienoberfläche für Webradio
view | history | commit | commitdiff
ulrich
2018-01-03 9f0d54067fefd1d3c9c6babf425d3d3a443eeccc
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
47a970 117 /* Sender */
U 118
119 .sender-behaelter {
120   display: flex;
121   flex-flow: column;
122 }
123
124 .sender {
125   display: flex;
126   flex-flow: row;
127   padding: 0.4em;
128   flex-wrap: wrap;
129   background-color: #eaeaea;
130 }
131
132 .sender-kachel {
133   display: flex;
134   flex-flow: column;
135   align-items: center;
136   margin: 0.4em;
137   padding: 0.4em;
138   background-color: white;
139 }
140
141 .sender-name {
142   font-family: RobotoCondensedBold;
143 }
144
145 .sender-bild {
146   width: 5em;
147   background-color: #ebe6e6;
148 }
149
9f0d54 150 /* Menü-Erscheinung */
U 151
152 .app-menu-kopf {
153   font-family: Oswald;
154 }
155
851c9c 156 /* fonts */
623a61 157
U 158 @font-face {
851c9c 159     font-family: 'Amethysta';
U 160     font-style: normal;
161     font-weight: 700;
162     src: url(/lib/fonts/Amethysta/Amethysta-Regular.ttf) format('truetype');
623a61 163 }
851c9c 164 @font-face {
U 165     font-family: 'Oswald';
166     font-style: normal;
167     font-weight: 700;
168     src: url(/lib/fonts/Oswald/Oswald-Regular.ttf) format('truetype');
169 }
170 @font-face {
171     font-family: 'OswaldBold';
172     font-weight: bold;
173     src: url(/lib/fonts/Oswald/Oswald-Bold.ttf) format('truetype');
174 }
175 @font-face {
176     font-family: 'RobotoCondensed';
177     font-weight: normal;
178     src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf) format('truetype');
179 }
180 @font-face {
181     font-family: 'RobotoCondensedBold';
182     font-weight: bold;
183     src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf) format('truetype');
184 }