CSS update, Personal looks better now
This commit is contained in:
Jan-Christoph Borchardt
parent
2ba3793671
commit
7474c907dc
|
|
@ -9,9 +9,9 @@ table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
|
|||
caption, th, td { text-align:left; font-weight:normal; }
|
||||
table, td, th { vertical-align:middle; }
|
||||
a { border:0; color:#000; text-decoration:none;}
|
||||
a, a *, input, input *, select, .button span, li { cursor:pointer; }
|
||||
a, a *, input, input *, select, .button span, li, label { cursor:pointer; }
|
||||
ul { list-style:none; }
|
||||
body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; margin-bottom:2em; }
|
||||
body { background:#fefefe; font:normal .8em/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; }
|
||||
|
||||
|
||||
/* HEADERS */
|
||||
|
|
@ -28,16 +28,15 @@ 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; }
|
||||
|
||||
|
||||
/* INPUTS */
|
||||
input[type="text"], input[type="password"] { cursor:text; }
|
||||
input, select, .button { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; 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, select, .button, #quota { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; 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; }
|
||||
|
||||
input[type="submit"], input[type="button"], .button { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
|
||||
input[type="submit"], input[type="button"], .button, #quota { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
|
||||
input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .button:hover { background:#fff; color:#333; }
|
||||
input[type="checkbox"] { width:auto; }
|
||||
|
||||
|
|
@ -49,20 +48,16 @@ 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 label { cursor:pointer; }
|
||||
#body-settings fieldset { padding:1em; width:40em; margin:1em;
|
||||
border:1px solid #ddd; font-weight:bold; background:#f2f2f2; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em;}
|
||||
legend { padding:.2em; font-size:1.2em; }
|
||||
.template{display:none;}
|
||||
|
||||
/* CONTENT ------------------------------------------------------------------ */
|
||||
#controls { width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
|
||||
#content { margin:3.5em 0 0 12.5em; padding-bottom:10em; }
|
||||
#leftcontent { position:absolute; top:6.4em; width:20em; background:#f8f8f8; height:100%; border-right:1px solid #ddd; }
|
||||
#leftcontent li { padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
|
||||
#leftcontent li:hover { background:#eee; }
|
||||
#leftcontent li:hover, #leftcontent li:active { background:#eee; }
|
||||
#rightcontent { position:absolute; top:6.4em; left:33em; }
|
||||
|
||||
|
||||
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
||||
#body-login { background:#ddd; }
|
||||
#body-login p.info { width:16em; margin:2em auto; padding:1em; background:#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; }
|
||||
|
|
@ -94,15 +89,21 @@ legend { padding:.2em; font-size:1.2em; }
|
|||
#expand+span { position:relative; bottom:.4em; left:.2em; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; }
|
||||
#logout { position:absolute; right:0; top:0; padding:1.2em 2em .55em 1.2em; }
|
||||
|
||||
/* USER SETTINGS ------------------------------------------------------------ */
|
||||
#quota_indicator { margin:0 4em 1em 0; padding:0; border:1px solid #ccc; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
||||
#quota_indicator div { background:#76a9ea; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
|
||||
|
||||
li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
|
||||
.hidden{ display:none; }
|
||||
#notification{ z-index:101; cursor:pointer; background-color:#fc4; border:0; padding:0 .7em .3em; display:block; position:fixed; left:50%; top:0;
|
||||
-moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em;
|
||||
-moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
|
||||
/* VARIOUS REUSABLE SELECTORS */
|
||||
.hidden { display:none; }
|
||||
|
||||
#notification { z-index:101; cursor:pointer; background-color:#fc4; border:0; padding:0 .7em .3em; display:block; position:fixed; left:50%; top:0; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
|
||||
|
||||
.action, .selectedActions a, #logout { opacity:.3; -webkit-transition:opacity 500ms; -moz-transition:opacity 500ms; -o-transition:opacity 500ms; transition:opacity 500ms; }
|
||||
.action:hover, .selectedActions a:hover, #logout:hover { opacity:1; }
|
||||
|
||||
table tr { -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
|
||||
tbody tr:hover, tr:active { background-color:#f8f8f8; }
|
||||
|
||||
#body-settings .personalblock { padding:.5em 1em; margin:1em; border:1px solid #eee; font-weight:bold; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em;}
|
||||
#body-settings div.personalblock:first-child { position:relative;margin-top:4.5em; padding:0; }
|
||||
|
||||
#quota div { padding:.6em 1em; background:#e6e6e6; font-weight:normal; white-space:nowrap; }
|
||||
|
||||
li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
/* FILE TABLE */
|
||||
span#emptyfolder { position:absolute; margin:10em 0 0 10em; font-size:1.5em; font-weight:bold; color:#888; text-shadow:#fff 0 1px 0; }
|
||||
table { position:relative; top:37px; width:100%; }
|
||||
table tr { -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
|
||||
tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#f8f8f8; height:1em; }
|
||||
tbody tr.selected { background-color:#eee; }
|
||||
tbody a { color:#000; }
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
<form id="quota">
|
||||
<fieldset>
|
||||
<legend><?php echo $l->t( 'Account information' );?></legend>
|
||||
<div id="quota_indicator"><div style="width:<?php echo $_['usage_relative'] ?>%;"> </div></div>
|
||||
<p><?php echo $l->t( 'You\'re currently using' );?> <?php echo $_['usage_relative'] ?>% (<?php echo $_['usage'] ?>) <?php echo $l->t( 'of your' );?> <?php echo $_['total_space'] ?> <?php echo $l->t( 'space' );?>.</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="quota" class="personalblock"><div style="width:<?php echo $_['usage_relative'] ?>%;">
|
||||
<p><?php echo $l->t( 'You\'re currently using' );?> <strong><?php echo $_['usage_relative'] ?>%</strong> (<?php echo $_['usage'] ?>) <?php echo $l->t( 'of your' );?> <?php echo $_['total_space'] ?> <?php echo $l->t( 'space' );?>.</p>
|
||||
</div></div>
|
||||
|
||||
<form id="passwordform">
|
||||
<fieldset>
|
||||
<legend><?php echo $l->t( 'Change Password' );?></legend>
|
||||
<fieldset class="personalblock">
|
||||
<div id="passwordchanged"><?php echo $l->t( 'Your password got changed');?></div>
|
||||
<div id="passworderror"></div>
|
||||
<input type="password" id="pass1" name="oldpassword" placeholder="<?php echo $l->t( 'Old password' );?>" />
|
||||
|
|
@ -18,18 +13,15 @@
|
|||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form id="languageform">
|
||||
<fieldset>
|
||||
<legend><?php echo $l->t( 'Language' );?></legend>
|
||||
<label for=''></label>
|
||||
<select id="languageinput" name='lang'>
|
||||
<?php foreach($_['languages'] as $language):?>
|
||||
<option value='<?php echo $language;?>'><?php echo $language;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="personalblock">
|
||||
<label for="languageinput"><?php echo $l->t( 'Language' );?></label>
|
||||
<select id="languageinput" name='lang'>
|
||||
<?php foreach($_['languages'] as $language):?>
|
||||
<option value='<?php echo $language;?>'><?php echo $language;?></option>
|
||||
<?php endforeach;?>
|
||||
</select>
|
||||
|
||||
<?php foreach($_['forms'] as $form){
|
||||
echo $form;
|
||||
};?>
|
||||
<?php foreach($_['forms'] as $form){
|
||||
echo $form;
|
||||
};?>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue