stylesheet changed

forms changed

cryptobox.conf.d/usr/share/cryptobox/templates/config_form.cs

@@ -3,21 +3,23 @@
 
     <form action="<?cs var:ScriptName ?>" method="post"
 	    enctype="application/x-www-form-urlencoded">
-	<table class="form">
-	    <tr><td><?cs var:Lang.Text.IPAddress ?></td><td>
-		<input type="text" size="16" maxsize="15" name="ip"
-		    value="<?cs var:Data.Config.IP ?>" /></td></tr>
-	    <tr><td><?cs var:Lang.Text.TimeOut ?></td><td>
-		<input type="text" size="16" maxsize="5" name="timeout"
-		    value="<?cs var:Data.Config.TimeOut ?>" /></td></tr>
-	    <tr><td><?cs var:Lang.Text.SelectLanguage ?></td><td>
+
+	<p><label for="ip"><?cs var:Lang.Text.IPAddress ?></label>
+		<input type="text" id="ip" size="16" maxsize="15" name="ip"
+		    value="<?cs var:Data.Config.IP ?>" /><p>
+
+	<p><label for="timeout"><?cs var:Lang.Text.TimeOut ?></label>
+		<input type="text" id="timeout" size="16" maxsize="5" name="timeout"
+		    value="<?cs var:Data.Config.TimeOut ?>" /></p>
+
+	<p><label for="language"><?cs var:Lang.Text.SelectLanguage ?></label>
 		<select name="language">
 			<option value="de">Deutsch</option>
 			<option value="en">English</option>
-		</select></td></tr>
-	    <tr><td colspan="2">
-		<button type="submit" name="action" value="config_do">
-		    <?cs var:Lang.Button.SaveConfig ?></button></td></tr>
-	</table>
+		</select></p>
+
+	<button type="submit" name="action" value="config_do">
+		    <?cs var:Lang.Button.SaveConfig ?></button>
+
     </form>
 </div>

cryptobox.conf.d/usr/share/cryptobox/templates/init_form.cs

@@ -3,32 +3,21 @@
   <div class="init">
 	<form action="<?cs var:ScriptName ?>" method="post" enctype="application/x-www-form-urlencoded">
 
-	    <table class="form">
-	        <!-- TODO: replace colgroup by css? -->
-		<colgroup><col align="right" width="50%"/><col align="left" width="50%"/></colgroup>
-		<caption style="caption-side:top; text-align:center; font-weight:bold; color:red">
-		<?cs var:Lang.Text.InitWarning ?></caption>
-		<tr><td colspan="2" style="text-align:center"></td></tr>
-		<tr><td align="right"><?cs var:Lang.Text.EnterNewPassword ?></td><td>
-		  <input type="password" name="password" size="20" tabindex="1" maxlength="40" />
-		</td></tr>
-		<tr><td align="right"><?cs var:Lang.Text.EnterSamePassword ?> </td><td>
-		  <input type="password" name="password2" size="20" tabindex="2" maxlength="40" />
-		</td></tr>
-		<tr><td colspan="2" align="center">
-		  <?cs var:Lang.Text.ConfirmInitHint ?> <span id="confirmtext"><?cs var:Lang.Text.ConfirmInit ?></span></td></tr>
-		<tr><td colspan="2" align="center">
-		  <input type="text" name="confirm" size="30" tabindex="3" maxlength="50" />
-		</td></tr>
-		<tr><td colspan="2" align="center" style="padding:3%">
-		  <button type="submit" name="action" value="init_do"><?cs var:Lang.Button.DoInit ?></button>
-		</td></tr>
-	    </table>
+	    <p class="note"><?cs var:Lang.Text.InitWarning ?></p>
+	    <p><label for="password"><?cs var:Lang.Text.EnterNewPassword ?></label><br/>
+		<input type="password" id="password" name="password" size="20" tabindex="1" maxlength="40" /></p>
+	    <p><label for="password2"><?cs var:Lang.Text.EnterSamePassword ?></label><br/>
+		<input type="password" id="password2" name="password2" size="20" tabindex="2" maxlength="40" /></p>
+	    <p><label for="confirm"><?cs var:Lang.Text.ConfirmInitHint ?><br/>
+		<span class="note" id="confirmtext"><?cs var:Lang.Text.ConfirmInit ?></span></label><br/>
+		<input type="text" id="confirm" name="confirm" size="30" tabindex="3" maxlength="50" /></p>
+	    <button type="submit" name="action" value="init_do"><?cs var:Lang.Button.DoInit ?></button>
 	</form>
   </div>
 
+  <hr/>
+
   <div class="partition_info">
-	<hr/>
 	<h2><?cs var:Lang.Text.PartitionInfo ?></h2>
 	<!-- TODO: CSS! -->
 	<p style="margin-left:10%; margin-right:10%; font-family:monospace">

cryptobox.conf.d/usr/share/cryptobox/templates/mount_form.cs

@@ -1,15 +1,13 @@
 <h1>Aktivierung des verschl&uuml;sselten Dateisystems</h1>
 
 <div align="center">
-  <table border="0">
     <form action="<?cs var:ScriptName ?>" method="post"
 	    enctype="application/x-www-form-urlencoded">
-	<tr><td align="right">Passwort eingeben: </td><td>
-	<input type="password" name="password" size="20" tabindex="0"
-	    maxlength="40" /></td></tr>
-	<tr><td colspan="2" align="center" style="padding:3%">
+
+	<p><label for="passwort">Passwort eingeben:</label>
+	    <input type="password" name="password" size="20" tabindex="0" maxlength="40" /></p>
+
 	<button type="submit" name="action" value="mount_do">Dateisystem aktivieren</button>
-	    </td></tr>
+
     </form>
-  </table>
 </div>

cryptobox.conf.d/usr/share/cryptobox/templates/umount_form.cs

@@ -1,13 +1,11 @@
 <h1><?cs var:Lang.Title.Umount ?></h1>
 
 <div align="center">
-  <table border="0">
     <form action="<?cs var:ScriptName ?>" method="post"
 		enctype="application/x-www-form-urlencoded">
-	<tr><td colspan="2" align="center" style="padding:3%">
+
 	<button type="submit" name="action"
 		value="umount_do"><?cs var:Lang.Button.Umount ?></button>
-	</td></tr>
+
     </form>
-  </table>
 </div>

cryptobox.conf.d/var/www/cryptobox.css

@@ -13,7 +13,6 @@ body {
 	background: none;
 	width: 600px;
 	padding: 0px;
-	text-align: left;
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -47,7 +46,6 @@ body {
 	margin: 0;
 	padding: 0;
 	width: 600px;
-	text-align: left;
 	font-size: 0.9em;
 }
 
@@ -95,11 +93,21 @@ body {
 }
 
 #words {
-	float: left;
+	width: 570px;
+// warum float?
+//	float: left;
 	padding: 1.1em 0em 1.1em 1.1em;
 	margin-top: 0;
 }
-	
+
+#words h1{
+	font-size: 1.8em;
+}
+
+#words h2{
+	font-size: 1.4em;
+}
+
 #words ol, #words ul {
 	font-size: 0.9em;
 }
@@ -146,28 +154,37 @@ body {
 
 /* --------------------=-=-=- Spezialkram -=-=-=------------------- */
 
-.warning {
-	background-color: #fff;
-	border: 2px dashed #5e5e5e;
-	margin-top: 40px;
-	margin-bottom: 40px;
+#words div.warning {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	padding-top: 10px;
+	padding-bottom: 15px;
+	}
 
-	line-height: 5em;
+#words .warning {
+	background-color: #ffd0d0;
+	border: 2px dashed #5e5e5e;
+	text-align: center;
 	color: #5e5e5e;
 	text-decoration: none;
 	font-weight: bold;
 	font-size: 0.9em;
-
 	}
 
-#content .warning a {
+#words .warning a {
 	line-height: 5em;
 	color: #5e5e5e;
 	text-decoration: none;
 	font-weight: bold;
 	font-size: 0.9em;
-
 }
+
+#words .note {
+	text-align: center;
+	color: #F48659;
+	font-style: italic;
+	}
+	
 /* ----------------------=-=-=- Forms -=-=-=--------------------- */
 /* nachfolgend die Sachen fuer schoene Formulare und Buttons */	
 input {
@@ -186,7 +203,7 @@ input:hover {
 	}
 	
 textarea {
-	font-family: Arial, Verdana, Helvetica;
+	font-family: arial, verdana, helvetica;
 	font-size: 1.1em;
 	border: 1px solid #BFBFBF;
 	color: #949494;
@@ -208,8 +225,9 @@ button {
 	font-weight: bold;
 	cursor: pointer;
 	}
+
 button:hover {
-	background-color: #fff;
+	background-color: #8fc955;
 	border: 1px solid #7fb945;
 	color: #5e5e5e;
 	font-size: 0.8em;
@@ -217,3 +235,10 @@ button:hover {
 	cursor: pointer;
 	}
 
+#words form label {
+	min-width: 20em;
+	}
+
+#words form p {
+	text-align: center;
+	}