From 7cd7e64498f54bbfff6ffe6d1bce80b844391938 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 28 Jul 2011 01:26:26 +0200 Subject: [PATCH] proper CSS formatting for better workflow --- core/css/styles.css | 194 ++++++-------------------------------------- files/css/files.css | 115 +++++--------------------- 2 files changed, 46 insertions(+), 263 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index ac4a6448af2..0782986eada 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -7,7 +7,7 @@ h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercas p.center { text-align:center; } a { color:#000; text-decoration:none; outline:0; } table { white-space:nowrap; } -input { background:#fff; } +input, select { background:#fff; color:#333; } a, a img, a strong, a span, input, button, select, li { cursor:pointer; } input[type="text"], input[type="password"] { cursor:text; } @@ -20,9 +20,9 @@ form input { padding:0.2em; border:1px solid #ddd; font-size:1.2em; } form input[type="submit"] { padding:0.1em 1em; border:1px solid #999; font-weight:bold; font-size:0.9em; cursor:pointer; } form input[type="submit"]:hover, form input[type="submit"]:focus { border:1px solid #999; background-color:#999; outline:0; } form input[type="submit"]:active { outline:0; } -form input[type="button"], form input[type="text"] { font-size: 0.9em; } +form input[type="button"], form input[type="text"] { font-size:0.9em; } fieldset { padding:1em; background-color:#f7f7f7; border:1px solid #ddd; max-width:600px; margin:2em 2em 2em 3em; } -legend { padding: 0.5em; font-size:1.2em; } +legend { padding:0.5em; font-size:1.2em; } div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:100 } @@ -30,170 +30,30 @@ div.controls { width:100%; margin:0px; background-color:#f7f7f7; border-bottom:1 #body-login { width:100%; background-image:none; background-color:#ddd; } #body-login p.info { width:16em; margin:4em auto; padding:1em; background-color:#eee; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } -#login -{ - margin: 0 auto 0 auto; - padding: 2em 0 0 0; - background-image: url(../img/header-login.png); - background-position: left 0; - background-repeat: repeat-x; - background-color: #EEE; - border-bottom: 1px solid #FFF; - text-align: center; -} - -#login_form -{ - width: 20em; - margin: 4em auto; - padding: 0; -} - -#login_form fieldset -{ - background-color: transparent; - border: 0; -} - -#login_form fieldset p -{ - margin: 0.5em 0 0 0; - padding: 0; - text-align: left; -} - -#login_form fieldset p.submit -{ - margin: 2em 0 0 0; - padding: 1em 0 0 0; - border-top: 1px solid #DDD; - text-align: right; -} - -#login_form label -{ - font-size: 1em; - color: #666; -} - -#login_form input -{ - width: 100%; - margin: 0 0 0.5em 0; - padding: 0.5em; - border: 1px solid #DDD; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - font-size: 1.5em; - color: #333; - text-align: center; -} - -#login_form input[type=submit] -{ - width: auto; - margin: 1em 0 0 0.5em; - text-align: center; - border: 1px solid #DDD; - background-color: #FFF; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - font-size: 1.5em -} - -#login_form input[type=submit]:hover -{ - border: 1px solid #666; - background-color: #666; - color: #FFF; -} -#login_form input[type="checkbox"] -{ - width:15px; -} - -#setup_form { - margin: 3em auto; - text-align: left; - width: 720px; -} - -#setup_form #use_mysql { - font-size: 0.9em; - margin: 0 0 0 1em; -} - -#setup_form p.intro { - color: #666; - font-size: 1.3em; - margin: 4em 0 3em 0; - padding: 0; - text-align: center; -} - -#setup_form ul.errors { - background-image: url(images/no.png); - background-position: 1em 1em; - background-repeat: no-repeat; - background-color: #FED7D7; - border: 1px solid #F00; - font-size: 1.2em; - list-style-indent: inside; - margin: 0 0 4em 0; - padding: 1em 1em 1em 5em; -} - -#setup_form fieldset { - margin: 0 0 3em 0; -} - -#setup_form p { - line-height: 1.8em; -} - -#setup_form legend { - font-weight: normal; -} - -#setup_form label { - cursor: pointer; - display: block; - float: left; - margin: 0 0 0.2em 0; - text-align: right; - width: 40%; -} - +#login { margin:0 auto 0 auto; padding:2em 0 0 0; background-image:url(../img/header-login.png); background-position:left 0; background-repeat:repeat-x; background-color:#EEE; border-bottom:1px solid #FFF; text-align:center; } +#login_form { width:20em; margin:4em auto; padding:0; } +#login_form fieldset { background-color:transparent; border:0; } +#login_form fieldset p { margin:0.5em 0 0 0; padding:0; text-align:left; } +#login_form fieldset p.submit { margin:2em 0 0 0; padding:1em 0 0 0; border-top:1px solid #DDD; text-align:right; } +#login_form label { font-size:1em; color:#666; } +#login_form input { width:100%; margin:0 0 0.5em 0; padding:0.5em; border:1px solid #DDD; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em; color:#333; text-align:center; } +#login_form input[type=submit] { width:auto; margin:1em 0 0 0.5em; text-align:center; border:1px solid #DDD; background-color:#FFF; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em } +#login_form input[type=submit]:hover { border:1px solid #666; background-color:#666; color:#FFF; } +#login_form input[type="checkbox"] { width:15px; } +#setup_form { margin:3em auto; text-align:left; width:720px; } +#setup_form #use_mysql { font-size:0.9em; margin:0 0 0 1em; } +#setup_form p.intro { color:#666; font-size:1.3em; margin:4em 0 3em 0; padding:0; text-align:center; } +#setup_form ul.errors { background-image:url(images/no.png); background-position:1em 1em; background-repeat:no-repeat; background-color:#FED7D7; border:1px solid #F00; font-size:1.2em; list-style-indent:inside; margin:0 0 4em 0; padding:1em 1em 1em 5em; } +#setup_form fieldset { margin:0 0 3em 0; } +#setup_form p { line-height:1.8em; } +#setup_form legend { font-weight:normal; } +#setup_form label { cursor:pointer; display:block; float:left; margin:0 0 0.2em 0; text-align:right; width:40%; } #setup_form input[type='text'], -#setup_form input[type='password'] { - font-size: 1em; - margin: 0 0 0 0.5em; - padding: 0.3em; -} - -#setup_form input[type='radio'] { - margin: 0 0 0 1em; -} - -#setup_form input[type='submit'] { - background-color: #DDD; - border: 1px solid #999; - color: #666; - font-size: 1.2em; -} - -#setup_form input[type='submit']:hover { - border-color: #000; - color: #000; -} - -#setup_form p.submit { - padding: 0 0 1em 0; - text-align: center; -} - +#setup_form input[type='password'] { font-size:1em; margin:0 0 0 0.5em; padding:0.3em; } +#setup_form input[type='radio'] { margin:0 0 0 1em; } +#setup_form input[type='submit'] { background-color:#DDD; border:1px solid #999; color:#666; font-size:1.2em; } +#setup_form input[type='submit']:hover { border-color:#000; color:#000; } +#setup_form p.submit { padding:0 0 1em 0; text-align:center; } .prettybutton { margin:0.1em; padding:0.2em 0.5em; border:1px solid #ddd; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size:1.5em; text-decoration:none; color:#666; background-color:#fff; } @@ -252,4 +112,4 @@ p.actions a.delete, div.actions a.delete { background-image:url('../img/delete.p #logs_options input[type="submit"] { float:right; margin:0 2em 0 0; } #logs_options input[type="submit"].nofloat { float:none; margin:0 2em 0 0; } #logs_options input[type="text"] { margin:0; padding:0; border:1px solid #ccc; text-align:right; } -li.error{ list-style:none; width:640px; margin:4em auto; padding:1em 1em 1em 4em; background-color:#fee; background-image:url('../img/task-attention.png'); background-position:0.8em 0.8em; background-repeat:no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } +li.error { list-style:none; width:640px; margin:4em auto; padding:1em 1em 1em 4em; background-color:#fee; background-image:url('../img/task-attention.png'); background-position:0.8em 0.8em; background-repeat:no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } diff --git a/files/css/files.css b/files/css/files.css index 7db46e3b0a7..e956f8c03af 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -1,95 +1,24 @@ /* FILE MENU */ - -#file_menu -{ - right:0px; - position:absolute; - top:0; -} - -#file_menu a -{ - display:block; - float:left; - background-image:none; - text-decoration: none; -} - -.file_upload_form, #file_newfolder_form { - display: inline; -} - -#fileSelector, #file_upload_submit, #file_newfolder_submit { - display: none; -} - -.file_upload_filename, #file_newfolder_name { - background-repeat: no-repeat; - background-position: 0.5em 0; - padding-left: 2em; -} - -.file_upload_filename { - background-image:url("../img/file.png"); font-weight:bold; -} -.file_upload_start {opacity:0;filter: alpha(opacity = 0);} - -#file_newfolder_name { - background-image:url("../img/folder.png"); font-weight:bold; - width: 11em; -} - -.file_upload_start, .file_upload_filename{ - position:absolute; - top:0px; - left:0px; - width:11em; - font-size: 0.9em; -} - -.file_upload_wrapper{ - position:relative; - top:-1.2em; - left:-2em; - display: -moz-inline-box; /* fallback for older firefox versions*/ - display: inline-block; - width:12em; -} - -#file_newfolder_submit, #file_upload_submit { - width: 3em; -} - -.file_upload_target { - display: none; -} +#file_menu { right:0px; position:absolute; top:0; } +#file_menu a { display:block; float:left; background-image:none; text-decoration:none; } +.file_upload_form, #file_newfolder_form { display:inline; } +#fileSelector, #file_upload_submit, #file_newfolder_submit { display:none; } +.file_upload_filename, #file_newfolder_name { background-repeat:no-repeat; background-position:0.5em 0; padding-left:2em; } +.file_upload_filename { background-image:url("../img/file.png"); font-weight:bold; }.file_upload_start { opacity:0;filter:alpha(opacity = 0); } + +#file_newfolder_name { background-image:url("../img/folder.png"); font-weight:bold; width:11em; } +.file_upload_start, .file_upload_filename { position:absolute; top:0px; left:0px; width:11em; font-size:0.9em; } +.file_upload_wrapper { position:relative; top:-1.2em; left:-2em; display:-moz-inline-box; /* fallback for older firefox versions*/ display:inline-block; width:12em; } +#file_newfolder_submit, #file_upload_submit { width:3em; } +.file_upload_target { display:none; } /* FILE TABLE */ - -table { - position:relative; - top:37px; - width: 100%; -} - +table { position:relative; top:37px; width:100%; } tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#eee; } tbody a { color:#000; } -span.extention{ - color:#999; -} - -div.crumb{ - float:left; - display:block; - background-repeat:no-repeat; - background-position:right 0px; - font-weight:bold; - padding-top:8px; - padding-left:8px; - height:28px; /*36-8*/ -} - +span.extention { color:#999; } +div.crumb { float:left; display:block; background-repeat:no-repeat; background-position:right 0px; font-weight:bold; padding-top:8px; padding-left:8px; height:28px; /*36-8*/ } table tr.mouseOver td { background-color:#eee; } table th { padding:.5em; } table th .name { float:left; margin-left:.5em; } @@ -119,17 +48,11 @@ table td.create { background-image:url('../img/folder-new.png'); } table td.delete { background-image:url('../img/delete.png'); } #fileList tr input[type=checkbox] { display:none; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ } #fileList tr input[type=checkbox]:checked, #fileList tr:hover input[type=checkbox] { display:inline; } -#fileList tr.selected td.filename a, #fileList tr:hover td.filename a{background-image:none !important} -#select_all{float:left; margin:0.2em; margin-left:0.6em; } +#fileList tr.selected td.filename a, #fileList tr:hover td.filename a { background-image:none !important } +#select_all { float:left; margin:0.2em; margin-left:0.6em; } #selectedActions { float:right; display:none; } #selectedActions a { margin:0 .5em; } -#uploadsize-message{ display:none; } +#uploadsize-message { display:none; } /* add breadcrumb divider to the File item in navigation panel */ -#plugins li:first-child{ - background-position: 15.7em 0px; - background-repeat:no-repeat; - background-image: url("/owncloud/core/img/breadcrumb-divider-start.png"); - width:15.7em; - padding-right:11px; -} +#plugins li:first-child { background-position:15.7em 0px; background-repeat:no-repeat; background-image:url("/owncloud/core/img/breadcrumb-divider-start.png"); width:15.7em; padding-right:11px; }