Bedienoberfläche für Webradio
view | history | commit | commitdiff
ulrich
2017-12-31 623a61e2006e4772af9f61d9b3613fcc87d9a148
commit | author | age
623a61 1 html, body {
U 2   font-size: 10pt;
3   /* font-size: 1.5em; */   /* currently ems cause chrome bug misinterpreting rems on body element */
4   line-height: 1.6;
5   font-weight: 400;
6   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
7 }
8
9 .nord {
10   height: 2em;
11 }
12
13 .west {
14   transition: all 0.3s ease-in;
15   overflow: hidden;
16   white-space: nowrap;
17 }
18
19 #app-titel {
20   padding-left: 2em;
21 }
22
23 .pointer-cursor {
24   cursor: pointer;
25 }
26
27 .zentrum {
28   display: flex;
29   flex-flow: row;
30   overflow-x: hidden;
31   margin: 0;
32 }
33
34 .cond {
35   display: none;
36 }
37
38 @media (min-width: 35em) {
39   .cond {
40     display: block;
41     background-color: aliceblue;
42     text-align: right;
43     width: 40%;
44   }
45   .zentrum {
46     width: 60%;
47     background-color: white;
48   }
49 }
50
51 @media (min-width: 55em) {
52   .cond {
53     display: block;
54     background-color: aliceblue;
55     text-align: right;
56     width: 60%;
57   }
58   .zentrum {
59     width: 40%;
60     background-color: white;
61   }
62 }
63
64
65 .button-liste {
66   display: flex;
67   flex-flow: column;
68   flex-wrap: wrap;
69   padding: 0;
70   margin: 0 0.2em 0 0.2em;
71 }
72
73 .button-liste .button {
74   text-align: left;
75   margin: 0 0 0.2em 0;
76   padding: 0 0.4em 0 0.4em;
77 }
78
79 .abspieler-auswahl {
80   margin: 0.3em 0 0.3em 0.5em;
81 }
82
83 @font-face {
84   font-family: 'Raleway';
85   font-style: normal;
86   src: url(../jslib/fonts/Raleway/Raleway-Regular.ttf) format('truetype');
87 }
88
89 /* aus Skeleton */
90
91 .docs-header {
92   text-transform: uppercase;
93   font-size: 1.4rem;
94   letter-spacing: .2rem;
95   font-weight: 600; }
96
97 /* Typography
98 ?????????????????????????????????????????????????? */
99 h1, h2, h3, h4, h5, h6 {
100   margin-top: 0;
101   margin-bottom: 2rem;
102   font-weight: 300; }
103 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
104 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
105 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
106 h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
107 h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
108 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
109
110 /* Buttons
111 ?????????????????????????????????????????????????? */
112 .button,
113 button,
114 input[type="submit"],
115 input[type="reset"],
116 input[type="button"] {
117   display: inline-block;
118   height: 38px;
119   padding: 0 30px;
120   color: #555;
121   text-align: center;
122   font-size: 11px;
123   font-weight: 600;
124   line-height: 38px;
125   letter-spacing: .1rem;
126   text-transform: uppercase;
127   text-decoration: none;
128   white-space: nowrap;
129   background-color: transparent;
130   border-radius: 4px;
131   border: 1px solid #bbb;
132   cursor: pointer;
133   box-sizing: border-box; }
134 .button:hover,
135 button:hover,
136 input[type="submit"]:hover,
137 input[type="reset"]:hover,
138 input[type="button"]:hover,
139 .button:focus,
140 button:focus,
141 input[type="submit"]:focus,
142 input[type="reset"]:focus,
143 input[type="button"]:focus {
144   color: #333;
145   border-color: #888;
146   outline: 0; }
147 .button.button-primary,
148 button.button-primary,
149 input[type="submit"].button-primary,
150 input[type="reset"].button-primary,
151 input[type="button"].button-primary {
152   color: #FFF;
153   background-color: #33C3F0;
154   border-color: #33C3F0; }
155 .button.button-primary:hover,
156 button.button-primary:hover,
157 input[type="submit"].button-primary:hover,
158 input[type="reset"].button-primary:hover,
159 input[type="button"].button-primary:hover,
160 .button.button-primary:focus,
161 button.button-primary:focus,
162 input[type="submit"].button-primary:focus,
163 input[type="reset"].button-primary:focus,
164 input[type="button"].button-primary:focus {
165   color: #FFF;
166   background-color: #1EAEDB;
167   border-color: #1EAEDB; }
168
169 /* Forms
170 ?????????????????????????????????????????????????? */
171 input[type="email"],
172 input[type="number"],
173 input[type="search"],
174 input[type="text"],
175 input[type="tel"],
176 input[type="url"],
177 input[type="password"],
178 textarea,
179 select {
180   height: 38px;
181   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
182   background-color: #fff;
183   border: 1px solid #D1D1D1;
184   border-radius: 4px;
185   box-shadow: none;
186   box-sizing: border-box; }
187 /* Removes awkward default styles on some inputs for iOS */
188 input[type="email"],
189 input[type="number"],
190 input[type="search"],
191 input[type="text"],
192 input[type="tel"],
193 input[type="url"],
194 input[type="password"],
195 textarea {
196   -webkit-appearance: none;
197      -moz-appearance: none;
198           appearance: none; }
199 textarea {
200   min-height: 65px;
201   padding-top: 6px;
202   padding-bottom: 6px; }
203 input[type="email"]:focus,
204 input[type="number"]:focus,
205 input[type="search"]:focus,
206 input[type="text"]:focus,
207 input[type="tel"]:focus,
208 input[type="url"]:focus,
209 input[type="password"]:focus,
210 textarea:focus,
211 select:focus {
212   border: 1px solid #33C3F0;
213   outline: 0; }
214 label,
215 legend {
216   display: block;
217   margin-bottom: .5rem;
218   font-weight: 600; }
219 fieldset {
220   padding: 0;
221   border-width: 0; }
222 input[type="checkbox"],
223 input[type="radio"] {
224   display: inline; }
225 label > .label-body {
226   display: inline-block;
227   margin-left: .5rem;
228   font-weight: normal; }