summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDirk Engling <erdgeist@erdgeist.org>2016-08-15 15:46:38 +0200
committerDirk Engling <erdgeist@erdgeist.org>2016-08-15 15:46:38 +0200
commitea9d6e5e829f668c9313c9558889cca350c988e7 (patch)
treecd2a01f8b4668677fda4cb46c87153aa8aa8ec0f
parentd7942d05bc1d206319dd0d79cdd064083b707d4b (diff)
Style input fields
-rw-r--r--index.html30
-rw-r--r--style.css58
2 files changed, 69 insertions, 19 deletions
diff --git a/index.html b/index.html
index 9fc1d49..92c7572 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
12 <div id="wrapper" class="step1"> 12 <div id="wrapper" class="step1">
13 <div class="collapsable block-step1"> 13 <div class="collapsable block-step1">
14 <div onclick="step0_done()" class="block-header"> 14 <div onclick="step0_done()" class="block-header">
15 <h1 id="head1"><div class="circle_num">&#9730;</div> Abmahnbeantworter</h1> 15 <h1 id="head1"><div class="circle_num"></div> Abmahnbeantworter</h1>
16 </div> 16 </div>
17 <div class="juice"> 17 <div class="juice">
18 <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p> 18 <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
@@ -56,12 +56,12 @@
56 56
57 <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p> 57 <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p>
58 <ul> 58 <ul>
59 <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="Kanzlei"/></li> 59 <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="kanzlei"/></li>
60 <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="Bearbeiter (optional)"/></li> 60 <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="bearbeiter (optional)"/></li>
61 <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li> 61 <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
62 <li><input id="abmahnender_plz" type="text" name="plz" placeholder="Postleitzahl"/></li> 62 <li><input id="abmahnender_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
63 <li><input id="abmahnender_ort" type="text" name="ort" placeholder="Ort"/></li> 63 <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li>
64 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="Fax"/></li> 64 <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
65 </ul> 65 </ul>
66 <div class="one-button"> 66 <div class="one-button">
67 <div class="button button-green" onclick="step2_done()">Weiter</div> 67 <div class="button button-green" onclick="step2_done()">Weiter</div>
@@ -76,7 +76,7 @@
76 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p> 76 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
77 <ul> 77 <ul>
78 <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li> 78 <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li>
79 <li><input id="vorgang_detail" type="text" name="detail" placeholder="Beschreibung (optional)"/></li> 79 <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li>
80 </ul> 80 </ul>
81 81
82 <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p> 82 <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p>
@@ -199,13 +199,13 @@
199 <div class="juice"> 199 <div class="juice">
200 <p>Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.</p> 200 <p>Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.</p>
201 <ul> 201 <ul>
202 <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="Vorname"/></li> 202 <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="vorname"/></li>
203 <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="Nachname"/></li> 203 <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="nachname"/></li>
204 <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="Zusatz (optional)"/></li> 204 <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="zusatz (optional)"/></li>
205 <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li> 205 <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
206 <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="Postleitzahl"/></li> 206 <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
207 <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="Wohnort"/></li> 207 <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="wohnort"/></li>
208 <li><input id="abgemahnter_land" type="text" name="land" placeholder="Land (optional)"/></li> 208 <li><input id="abgemahnter_land" type="text" name="land" placeholder="land (optional)"/></li>
209 </ul> 209 </ul>
210 <div class="hint"> 210 <div class="hint">
211 <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p> 211 <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p>
diff --git a/style.css b/style.css
index da2a215..8dcc8ea 100644
--- a/style.css
+++ b/style.css
@@ -116,7 +116,7 @@ h2 {
116} 116}
117 117
118.block-step1 .circle_num { 118.block-step1 .circle_num {
119 background-color: #403040; 119 background-color: black;
120 color: #F1F2E3; 120 color: #F1F2E3;
121 margin: 4px 28px 0 0; 121 margin: 4px 28px 0 0;
122 line-height: 1.3em; 122 line-height: 1.3em;
@@ -326,15 +326,65 @@ p a:visited {
326 326
327input[type="text"] { 327input[type="text"] {
328 width: 95%; 328 width: 95%;
329 border: solid 1px silver; 329 background-color : rgba(255, 255, 255, 0.30);
330 border-radius: 4px; 330 border: 0px solid rgba(255, 255, 255, 0.30);
331 border-radius: 6px;
331 font-family: 'SourceSansPro', sans-serif; 332 font-family: 'SourceSansPro', sans-serif;
332 font-size: 13pt; 333 font-size: 13pt;
333 font-weight: normal; 334 font-weight: normal;
335 color: white;
334 padding: 0.4em 0.6em 0.4em 0.6em; 336 padding: 0.4em 0.6em 0.4em 0.6em;
335 margin-bottom: 0.7em; 337 margin-bottom: 0.7em;
336} 338}
337 339
340input:focus {
341 outline: none !important;
342}
343
344input:focus::placeholder {
345 opacity: 0;
346}
347
348::placeholder {
349 color: white;
350 opacity: 0.5;
351 font-variant: small-caps;
352 font-weight: normal;
353 letter-spacing: 0.15em;
354}
355
356
357:focus::-moz-placeholder {
358 opacity: 0
359}
360
361::-moz-placeholder {
362 color: white;
363 opacity: 0.5;
364 font-variant: small-caps;
365 font-weight: normal;
366 letter-spacing: 0.15em;
367}
368
369::-ms-placeholder {
370 color: white;
371 opacity: 0.5;
372 font-variant: small-caps;
373 font-weight: normal;
374 letter-spacing: 0.15em;
375}
376
377:focus::-webkit-input-placeholder {
378 opacity: 0;
379}
380::-webkit-input-placeholder {
381 color: white;
382 opacity: 0.5;
383 font-variant: small-caps;
384 font-weight: normal;
385 letter-spacing: 0.15em;
386}
387
338select.tag { 388select.tag {
339 width: 15%; 389 width: 15%;
340 margin-right: 3%; 390 margin-right: 3%;
@@ -384,7 +434,7 @@ input[type=checkbox]:not(old) + label > span {
384 background-color : rgba(255, 255, 255, 0.30); 434 background-color : rgba(255, 255, 255, 0.30);
385 margin : 2px 36px 8px 2px; 435 margin : 2px 36px 8px 2px;
386 border : 0px solid rgba(255, 255, 255, 0.30); 436 border : 0px solid rgba(255, 255, 255, 0.30);
387 border-radius : 25%; 437 border-radius : 6px;
388 vertical-align : top; 438 vertical-align : top;
389 transition : font-size 0.4s; 439 transition : font-size 0.4s;
390 font-size : 1pt; 440 font-size : 1pt;