From c3503013427b587ecbd645362dd4d460db860f8f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
Date: Mon, 8 Aug 2011 17:57:45 +0200
Subject: [PATCH] optimized CSS, fixed login header

---
 core/css/styles.css             |  38 ++++----
 core/templates/installation.php | 157 ++++++++++++++++----------------
 core/templates/layout.guest.php |   5 +-
 core/templates/login.php        |  40 ++++----
 4 files changed, 120 insertions(+), 120 deletions(-)

diff --git a/core/css/styles.css b/core/css/styles.css
index 0f05850e26..97352abb6c 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -1,16 +1,31 @@
-* { margin:0; padding:0; border:0; cursor:default; }
+* { margin:0; padding:0; border:0; outline:0; cursor:default; }
 body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; }
-#header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; }
+
+
+/* HEADERS */
+#body-user #header, #body-settings #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; }
 #body-settings #header { background:#313131; }
+#body-login #header { margin:-2em auto 0; text-align:center; height:10em;
+ -moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000;
+background: #1d2d44; /* Old browsers */
+background: -moz-linear-gradient(top, #35537a 0%, #1d2d42 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Opera11.10+ */
+background: -ms-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* IE10+ */
+background: linear-gradient(top, #35537a 0%,#1d2d42 100%); /* W3C */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ }
+
 #owncloud { float:left; }
 h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercase; font-weight:normal; font-style:italic; color:#666; }
 p.center { text-align:center; }
-a { color:#000; text-decoration:none; outline:0; }
+a { color:#000; text-decoration:none; }
 table { white-space:nowrap; }
-input, select { background:#fff; color:#333; outline:0; }
 a, a img, a strong, a span, input, button, select, li { cursor:pointer; }
-input[type="text"], input[type="password"] { cursor:text; }
 
+
+/* INPUTS */
+input[type="text"], input[type="password"] { cursor:text; }
 input, select { font-size:1em; width:10em; margin:.3em; padding:.5em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
 input[type="text"], input[type="password"] { background:#f8f8f8; color:#555; cursor:text; }
 input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus { background:#fff; color:#333; }
@@ -27,6 +42,8 @@ radius:1em; border-radius:1em; }
 input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; }
 input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-shadow:#ffeedd 0 1px 0; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; }
 
+
+
 form#user_settings { max-width:600px; }
 form#user_settings p label { display:block; float:left; width:35%; padding:0.4em 0.5em 0 0; text-align:right; }
 form p { padding:0.5em 4em 0.5em 0.5em; text-align:left; }
@@ -44,17 +61,6 @@ div.controls { width:100%; height:3em; margin:0; background-color:#f7f7f7; borde
 #body-login p.info { width:16em; margin:2em auto; padding:1em; background-color:#eee; -moz-box-shadow:0 1px 0 #bbb inset; -webkit-box-shadow:0 1px 0 #bbb inset; box-shadow:0 1px 0 #bbb inset; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; }
 #body-login p.info a { font-weight:bold; }
 
-#body-login header { margin:-2em auto 0; text-align:center; height:10em;
- -moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000;
-background: #1d2d44; /* Old browsers */
-background: -moz-linear-gradient(top, #35537a 0%, #1d2d42 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Opera11.10+ */
-background: -ms-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* IE10+ */
-background: linear-gradient(top, #35537a 0%,#1d2d42 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ }
-
 #login { min-height:30em; margin:2em auto 0; border-bottom:1px solid #f8f8f8; background:#eee; }
 #login form { width:18em; margin:2em auto 5em; padding:0; }
 #login form fieldset { background-color:transparent; border:0; margin:0; padding:0; }
diff --git a/core/templates/installation.php b/core/templates/installation.php
index de14c56241..c5cf26bf12 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -1,85 +1,82 @@
-<div id="login">
-	<header><img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" /></header>
-	<form action="index.php" method="post">
+<form action="index.php" method="post">
+
+<input type="hidden" name="install" value="true" />
+	<?php if(count($_['errors']) > 0): ?>
+	<ul class="errors">
+		<?php foreach($_['errors'] as $err): ?>
+		<li>
+			<?php if(is_array($err)):?>
+				<?php print $err['error']; ?>
+				<p class='hint'><?php print $err['hint']; ?></p>
+			<?php else: ?>
+				<?php print $err; ?>
+			<?php endif; ?>
+		</li>
+		<?php endforeach; ?>
+	</ul>
+	<?php endif; ?>
+
+	<fieldset>
+		<legend><?php echo $l->t( 'Create an <strong>admin account</strong>' ); ?></legend>
+		<input type="text" name="adminlogin" id="adminlogin" value="<?php print OC_Helper::init_var('adminlogin'); ?>" placeholder="<?php echo $l->t( 'Username' ); ?>" autofocus /></p>
+		<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" placeholder="<?php echo $l->t( 'Password' ); ?>" /></p>
+</fieldset>
+
+<a id='showAdvanced'><strong><?php echo $l->t( 'Advanced' ); ?> ▾</strong></a>
+
+<fieldset id='datadirField'>
+		<legend><?php echo $l->t( 'Set data folder' ); ?></legend>
+		<input type="text" name="directory" id="directory" value="<?php print OC_Helper::init_var('directory', $_['directory']); ?>" placeholder="<?php echo $l->t( 'Data folder' ); ?>" /></p>
+	</fieldset>
 	
-	<input type="hidden" name="install" value="true" />
-		<?php if(count($_['errors']) > 0): ?>
-		<ul class="errors">
-			<?php foreach($_['errors'] as $err): ?>
-			<li>
-				<?php if(is_array($err)):?>
-					<?php print $err['error']; ?>
-					<p class='hint'><?php print $err['hint']; ?></p>
-				<?php else: ?>
-					<?php print $err; ?>
-				<?php endif; ?>
-			</li>
-			<?php endforeach; ?>
-		</ul>
+	<fieldset id='databaseField'>
+		<legend><?php echo $l->t( 'Configure the database' ); ?></legend>
+		<?php if($_['hasSQLite']): ?>
+		<input type='hidden' id='hasSQLite' value='true'/>
+		<?php if(!$_['hasMySQL'] and !$_['hasPostgreSQL']): ?>
+		<p><?php echo $l->t( 'SQLite will be used.' ); ?></p>
+		<input type="hidden" id="dbtype" name="dbtype" value="sqlite" />
+		<?php else: ?>
+		<p><label class="sqlite" for="sqlite"><?php echo $l->t( 'SQLite' ); ?></label><input type="radio" name="dbtype" value='sqlite' id="sqlite" <?php OC_Helper::init_radio('dbtype', 'sqlite', 'sqlite'); ?>/></p>
+		<?php endif; ?>
 		<?php endif; ?>
 
-		<fieldset>
-			<legend><?php echo $l->t( 'Create an <strong>admin account</strong>' ); ?></legend>
-			<input type="text" name="adminlogin" id="adminlogin" value="<?php print OC_Helper::init_var('adminlogin'); ?>" placeholder="<?php echo $l->t( 'Username' ); ?>" autofocus /></p>
-			<input type="password" name="adminpass" id="adminpass" value="<?php print OC_Helper::init_var('adminpass'); ?>" placeholder="<?php echo $l->t( 'Password' ); ?>" /></p>
-        </fieldset>
-        
-        <a id='showAdvanced'><strong><?php echo $l->t( 'Advanced' ); ?> ▾</strong></a>
-        
-        <fieldset id='datadirField'>
-			<legend><?php echo $l->t( 'Set data folder' ); ?></legend>
-			<input type="text" name="directory" id="directory" value="<?php print OC_Helper::init_var('directory', $_['directory']); ?>" placeholder="<?php echo $l->t( 'Data folder' ); ?>" /></p>
-		</fieldset>
-		
-		<fieldset id='databaseField'>
-			<legend><?php echo $l->t( 'Configure the database' ); ?></legend>
-			<?php if($_['hasSQLite']): ?>
-			<input type='hidden' id='hasSQLite' value='true'/>
-			<?php if(!$_['hasMySQL'] and !$_['hasPostgreSQL']): ?>
-			<p><?php echo $l->t( 'SQLite will be used.' ); ?></p>
-			<input type="hidden" id="dbtype" name="dbtype" value="sqlite" />
-			<?php else: ?>
-			<p><label class="sqlite" for="sqlite"><?php echo $l->t( 'SQLite' ); ?></label><input type="radio" name="dbtype" value='sqlite' id="sqlite" <?php OC_Helper::init_radio('dbtype', 'sqlite', 'sqlite'); ?>/></p>
-			<?php endif; ?>
-			<?php endif; ?>
+		<?php if($_['hasMySQL']): ?>
+		<input type='hidden' id='hasMySQL' value='true'/>
+		<?php if(!$_['hasSQLite'] and !$_['hasPostgreSQL']): ?>
+		<p><?php echo $l->t( 'MySQL will be used.' ); ?></p>
+		<input type="hidden" id="dbtype" name="dbtype" value="mysql" />
+		<?php else: ?>
+		<label class="mysql" for="mysql">MySQL</label><input type="radio" name="dbtype" value='mysql' id="mysql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/>
+		<?php endif; ?>
+		<div id="use_mysql">
+			<input type="text" name="dbuser" id="dbuser" value="<?php print OC_Helper::init_var('dbuser'); ?>" placeholder="<?php echo $l->t( 'Database user' ); ?>" />
+			<input type="password" name="dbpass" id="dbpass" value="<?php print OC_Helper::init_var('dbpass'); ?>" placeholder="<?php echo $l->t( 'Database password' ); ?>" />
+			<input type="text" name="dbname" id="dbname" value="<?php print OC_Helper::init_var('dbname'); ?>" placeholder="<?php echo $l->t( 'Database name' ); ?>" />
+			<input type="text" name="dbhost" id="dbhost" value="<?php print OC_Helper::init_var('dbhost', 'localhost'); ?>" placeholder="<?php echo $l->t( 'Host' ); ?>" />
+			<input type="text" name="dbtableprefix" id="dbtableprefix" value="<?php print OC_Helper::init_var('dbtableprefix', 'oc_'); ?>" placeholder="<?php echo $l->t( 'Table prefix' ); ?>" />
+			
+		</div>
+		<?php endif; ?>
 
-			<?php if($_['hasMySQL']): ?>
-			<input type='hidden' id='hasMySQL' value='true'/>
-			<?php if(!$_['hasSQLite'] and !$_['hasPostgreSQL']): ?>
-			<p><?php echo $l->t( 'MySQL will be used.' ); ?></p>
-			<input type="hidden" id="dbtype" name="dbtype" value="mysql" />
-			<?php else: ?>
-			<label class="mysql" for="mysql">MySQL</label><input type="radio" name="dbtype" value='mysql' id="mysql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/>
-			<?php endif; ?>
-			<div id="use_mysql">
-				<input type="text" name="dbuser" id="dbuser" value="<?php print OC_Helper::init_var('dbuser'); ?>" placeholder="<?php echo $l->t( 'Database user' ); ?>" />
-				<input type="password" name="dbpass" id="dbpass" value="<?php print OC_Helper::init_var('dbpass'); ?>" placeholder="<?php echo $l->t( 'Database password' ); ?>" />
-				<input type="text" name="dbname" id="dbname" value="<?php print OC_Helper::init_var('dbname'); ?>" placeholder="<?php echo $l->t( 'Database name' ); ?>" />
-				<input type="text" name="dbhost" id="dbhost" value="<?php print OC_Helper::init_var('dbhost', 'localhost'); ?>" placeholder="<?php echo $l->t( 'Host' ); ?>" />
-				<input type="text" name="dbtableprefix" id="dbtableprefix" value="<?php print OC_Helper::init_var('dbtableprefix', 'oc_'); ?>" placeholder="<?php echo $l->t( 'Table prefix' ); ?>" />
-				
-			</div>
-			<?php endif; ?>
+		<?php if($_['hasPostgreSQL']): ?>
+		<input type='hidden' id='hasPostgreSQL' value='true'/>
+		<?php if(!$_['hasSQLite'] and !$_['hasSQLite']): ?>
+		<p><?php echo $l->t( 'PostgreSQL will be used.' ); ?></p>
+		<input type="hidden" id="dbtype" name="dbtype" value="pgsql" />
+		<?php else: ?>
+		<p><label class="pgsql" for="pgsql">PostgreSQL</label><input type="radio" name="dbtype" value='pgsql' id="pgsql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/></p>
+		<?php endif; ?>
+		<div id="use_postgresql">
+			<input type="text" name="pg_dbuser" id="pg_dbuser" value="<?php print OC_Helper::init_var('dbuser'); ?>" placeholder="<?php echo $l->t( 'Database user' ); ?>" />
+			<input type="password" name="pg_dbpass" id="pg_dbpass" value="<?php print OC_Helper::init_var('dbpass'); ?>" placeholder="<?php echo $l->t( 'PostgreSQL password' ); ?>" />
+			<input type="text" name="pg_dbname" id="pg_dbname" value="<?php print OC_Helper::init_var('dbname'); ?>" placeholder="<?php echo $l->t( 'Database name' ); ?>" />
+			<input type="text" name="pg_dbhost" id="pg_dbhost" value="<?php print OC_Helper::init_var('dbhost', 'localhost'); ?>" placeholder="<?php echo $l->t( 'Host' ); ?>" />
+			<input type="text" name="pg_dbtableprefix" id="pg_dbtableprefix" value="<?php print OC_Helper::init_var('dbtableprefix', 'oc_'); ?>" placeholder="<?php echo $l->t( 'Table prefix' ); ?>" />
+			
+		</div>
+		<?php endif; ?>
+	</fieldset>
 
-			<?php if($_['hasPostgreSQL']): ?>
-			<input type='hidden' id='hasPostgreSQL' value='true'/>
-			<?php if(!$_['hasSQLite'] and !$_['hasSQLite']): ?>
-			<p><?php echo $l->t( 'PostgreSQL will be used.' ); ?></p>
-			<input type="hidden" id="dbtype" name="dbtype" value="pgsql" />
-			<?php else: ?>
-			<p><label class="pgsql" for="pgsql">PostgreSQL</label><input type="radio" name="dbtype" value='pgsql' id="pgsql" <?php OC_Helper::init_radio('dbtype','pgsql', 'mysql', 'sqlite'); ?>/></p>
-			<?php endif; ?>
-			<div id="use_postgresql">
-				<input type="text" name="pg_dbuser" id="pg_dbuser" value="<?php print OC_Helper::init_var('dbuser'); ?>" placeholder="<?php echo $l->t( 'Database user' ); ?>" />
-				<input type="password" name="pg_dbpass" id="pg_dbpass" value="<?php print OC_Helper::init_var('dbpass'); ?>" placeholder="<?php echo $l->t( 'PostgreSQL password' ); ?>" />
-				<input type="text" name="pg_dbname" id="pg_dbname" value="<?php print OC_Helper::init_var('dbname'); ?>" placeholder="<?php echo $l->t( 'Database name' ); ?>" />
-				<input type="text" name="pg_dbhost" id="pg_dbhost" value="<?php print OC_Helper::init_var('dbhost', 'localhost'); ?>" placeholder="<?php echo $l->t( 'Host' ); ?>" />
-				<input type="text" name="pg_dbtableprefix" id="pg_dbtableprefix" value="<?php print OC_Helper::init_var('dbtableprefix', 'oc_'); ?>" placeholder="<?php echo $l->t( 'Table prefix' ); ?>" />
-				
-			</div>
-			<?php endif; ?>
-		</fieldset>
-
-		<input type="submit" value="<?php echo $l->t( 'Finish setup' ); ?>" />
-	</form>
-</div>
+	<input type="submit" value="<?php echo $l->t( 'Finish setup' ); ?>" />
+</form>
diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php
index 0b6189ef1c..cd4078395b 100644
--- a/core/templates/layout.guest.php
+++ b/core/templates/layout.guest.php
@@ -29,7 +29,10 @@
 	</head>
 
 	<body id="body-login">
-		<?php echo $_['content']; ?>
+		<div id="login">
+			<div id="header"><img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" /></div>
+			<?php echo $_['content']; ?>
+		</div>
 		<p class="info"><?php echo $l->t( '<a href="http://owncloud.org/">ownCloud</a> is a personal cloud which runs on your own server.</p>' ); ?>
 	</body>
 </html>
diff --git a/core/templates/login.php b/core/templates/login.php
index 19f25f033d..85db3bc9a5 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -1,23 +1,17 @@
-<div id="login">
-	<header>
-		<img src="<?php echo image_path('', 'owncloud-logo-medium-white.png'); ?>" alt="ownCloud" />
-	</header>
-	<form action="index.php" method="post">
-		<fieldset>
-			<?php if($_['error']): ?>
-				<?php echo $l->t( 'Login failed!' ); ?>
-			<?php endif; ?>
-			<?php if(empty($_["username"])){?>
-			<input type="text" name="user" id="user" placeholder="Username" value="" autocomplete="off" required autofocus />
-			<input type="password" name="password" id="password" placeholder="Password" value="" required />
-			<input type="checkbox" name="remember_login" id="remember_login" /><label for="remember_login"><?php echo $l->t('remember'); ?></label>
-			<?php }else{ ?>
-			<input type="text" name="user" id="user" placeholder="Username" value="<?php echo $_['username']; ?>" autocomplete="off" required >
-			<input type="password" name="password" id="password" placeholder="Password" value="" required autofocus />
-			<input type="checkbox" name="remember_login" id="remember_login" checked /><label for="remember_login"><?php echo $l->t('remember'); ?></label>
-			<?php } ?>
-			<input type="submit" id="submit" value="Log in" />
-		</fieldset>
-	</form>
-</div>
-
+<form action="index.php" method="post">
+	<fieldset>
+		<?php if($_['error']): ?>
+			<?php echo $l->t( 'Login failed!' ); ?>
+		<?php endif; ?>
+		<?php if(empty($_["username"])){?>
+		<input type="text" name="user" id="user" placeholder="Username" value="" autocomplete="off" required autofocus />
+		<input type="password" name="password" id="password" placeholder="Password" value="" required />
+		<input type="checkbox" name="remember_login" id="remember_login" /><label for="remember_login"><?php echo $l->t('remember'); ?></label>
+		<?php }else{ ?>
+		<input type="text" name="user" id="user" placeholder="Username" value="<?php echo $_['username']; ?>" autocomplete="off" required >
+		<input type="password" name="password" id="password" placeholder="Password" value="" required autofocus />
+		<input type="checkbox" name="remember_login" id="remember_login" checked /><label for="remember_login"><?php echo $l->t('remember'); ?></label>
+		<?php } ?>
+		<input type="submit" id="submit" value="Log in" />
+	</fieldset>
+</form>