From ea9d6e5e829f668c9313c9558889cca350c988e7 Mon Sep 17 00:00:00 2001
From: Dirk Engling <erdgeist@erdgeist.org>
Date: Mon, 15 Aug 2016 15:46:38 +0200
Subject: Style input fields

---
 index.html | 30 +++++++++++++++---------------
 style.css  | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 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 @@
     <div id="wrapper" class="step1">
       <div class="collapsable block-step1">
         <div onclick="step0_done()" class="block-header">
-          <h1 id="head1"><div class="circle_num">&#9730;</div> Abmahnbeantworter</h1>
+          <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1>
         </div>
         <div class="juice">
           <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
@@ -56,12 +56,12 @@
 
           <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p>
           <ul>
-            <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="Kanzlei"/></li>
-            <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="Bearbeiter (optional)"/></li>
-            <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li>
-            <li><input id="abmahnender_plz" type="text" name="plz" placeholder="Postleitzahl"/></li>
-            <li><input id="abmahnender_ort" type="text" name="ort" placeholder="Ort"/></li>
-            <li><input id="abmahnender_fax" type="text" name="fax" placeholder="Fax"/></li>
+            <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="kanzlei"/></li>
+            <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="bearbeiter (optional)"/></li>
+            <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
+            <li><input id="abmahnender_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
+            <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li>
+            <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
           </ul>
           <div class="one-button">
             <div class="button button-green" onclick="step2_done()">Weiter</div>
@@ -76,7 +76,7 @@
           <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
           <ul>
             <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li>
-            <li><input id="vorgang_detail" type="text" name="detail" placeholder="Beschreibung (optional)"/></li>
+            <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li>
           </ul>
 
           <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 @@
         <div class="juice">
           <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>
           <ul>
-            <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="Vorname"/></li>
-            <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="Nachname"/></li>
-            <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="Zusatz (optional)"/></li>
-            <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li>
-            <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="Postleitzahl"/></li>
-            <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="Wohnort"/></li>
-            <li><input id="abgemahnter_land" type="text" name="land" placeholder="Land (optional)"/></li>
+            <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="vorname"/></li>
+            <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="nachname"/></li>
+            <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="zusatz (optional)"/></li>
+            <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
+            <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
+            <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="wohnort"/></li>
+            <li><input id="abgemahnter_land" type="text" name="land" placeholder="land (optional)"/></li>
           </ul>
           <div class="hint">
             <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 {
 }
 
 .block-step1 .circle_num {
-  background-color: #403040;
+  background-color: black;
   color: #F1F2E3;
   margin: 4px 28px 0 0;
   line-height: 1.3em;
@@ -326,15 +326,65 @@ p a:visited {
 
 input[type="text"] {
   width: 95%;
-  border: solid 1px silver;
-  border-radius: 4px;
+  background-color : rgba(255, 255, 255, 0.30);
+  border: 0px solid rgba(255, 255, 255, 0.30);
+  border-radius: 6px;
   font-family: 'SourceSansPro', sans-serif;
   font-size: 13pt;
   font-weight: normal;
+  color: white;
   padding: 0.4em 0.6em 0.4em 0.6em;
   margin-bottom: 0.7em;
 }
 
+input:focus {
+  outline: none !important;
+}
+
+input:focus::placeholder {
+  opacity: 0;
+}
+
+::placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+
+:focus::-moz-placeholder {
+  opacity: 0
+}
+
+::-moz-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+::-ms-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+:focus::-webkit-input-placeholder {
+  opacity: 0;
+}
+::-webkit-input-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
 select.tag {
   width: 15%;
   margin-right: 3%;
@@ -384,7 +434,7 @@ input[type=checkbox]:not(old) + label > span {
   background-color : rgba(255, 255, 255, 0.30);
   margin           : 2px 36px 8px 2px;
   border           : 0px solid rgba(255, 255, 255, 0.30);
-  border-radius    : 25%;
+  border-radius    : 6px;
   vertical-align   : top;
   transition       : font-size 0.4s;
   font-size        : 1pt;
-- 
cgit v1.2.3