From 735ee8fe34dbe6de9a300cdbf3d00db44be5a1e1 Mon Sep 17 00:00:00 2001 From: Dan Rice Date: Thu, 27 Sep 2012 13:09:30 -0400 Subject: [PATCH 1/2] improve CSS whitespace consistency --- app/assets/stylesheets/login.css.scss | 176 +++++++++++------------ app/assets/stylesheets/mobile.css.scss | 188 ++++++++++++------------- app/assets/stylesheets/print.css.scss | 72 +++++----- app/assets/stylesheets/tracks.css.scss | 94 ++++++------- 4 files changed, 265 insertions(+), 265 deletions(-) diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss index 84d81802..37b48e5c 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -1,27 +1,27 @@ body { background-color: #fff; color: #333; } body, ol, ul, td { - font-family: verdana, arial, helvetica, sans-serif; - font-size: 12px; - line-height: 18px; - background: #eee; + font-family: verdana, arial, helvetica, sans-serif; + font-size: 12px; + line-height: 18px; + background: #eee; } p { - background: #eee; + background: #eee; } a, a:link, a:active, a:visited { - color: #cc3334; - text-decoration: none; - padding-left: 1px; - padding-right: 1px; - } - + color: #cc3334; + text-decoration: none; + padding-left: 1px; + padding-right: 1px; +} + a:hover { - color: #fff; - background-color: #cc3334; - } + color: #fff; + background-color: #cc3334; +} h1, h2, h3 { color: #333; font-family: verdana, arial, helvetica, sans-serif; text-align: center; } h1 { font-size: 28px } @@ -31,132 +31,132 @@ h3 { font-size: 16px } li { margin-bottom: 7px; } pre { - background-color: #eee; - padding: 10px; - font-size: 11px; + background-color: #eee; + padding: 10px; + font-size: 11px; } td {background-color: #ff9;} #scaffold-main { - width: 80%; - margin: 10px auto; - padding: 6px; + width: 80%; + margin: 10px auto; + padding: 6px; } div.form { - width: 350px; - margin: 100px auto 10px auto; - padding: 10px; - border: 1px solid #999; - background: #ff9; + width: 350px; + margin: 100px auto 10px auto; + padding: 10px; + border: 1px solid #999; + background: #ff9; } div.memo { - width: 40%; - margin: 100px auto; - padding: 10px; - border: 1px solid #999; - background: #ff9; + width: 40%; + margin: 100px auto; + padding: 10px; + border: 1px solid #999; + background: #ff9; } /* Flash box styling */ h4.alert { - font-size: 0.8em; - font-weight:bold; - margin:0; - padding:5px; - text-align: center; + font-size: 0.8em; + font-weight: bold; + margin: 0; + padding: 5px; + text-align: center; } h4.warning { - border: 1px solid #ED2E38; - background-color: #F6979C; - color: #000000; + border: 1px solid #ED2E38; + background-color: #F6979C; + color: #000000; } h4.error { - color:#fff; - background:#c00; + color:#fff; + background:#c00; } h4.notice { - border: 1px solid #007E00; - background-color: #c2ffc2; - color: #007E00; + border: 1px solid #007E00; + background-color: #c2ffc2; + color: #007E00; } /*#notice { - padding: 2px; - border: 1px solid #007E00; - background-color: #c2ffc2; - color: #007E00; - margin-bottom: 15px; - text-align: center; - } + padding: 2px; + border: 1px solid #007E00; + background-color: #c2ffc2; + color: #007E00; + margin-bottom: 15px; + text-align: center; +} */ #footer { - clear: both; - background-color: #eee; - font-size: 0.8em; - text-align: center; - color: #999; - margin: 20px auto; - padding: 0px; - } + clear: both; + background-color: #eee; + font-size: 0.8em; + text-align: center; + color: #999; + margin: 20px auto; + padding: 0px; +} /* Error message styles */ .fieldWithErrors { - padding: 2px; - background-color: red; - display: table; + padding: 2px; + background-color: red; + display: table; } #errorExplanation { - border: 2px solid #ff0000; - padding: 7px; - padding-bottom: 12px; - margin: 10px auto 10px auto; - background-color: #f0f0f0; + border: 2px solid #ff0000; + padding: 7px; + padding-bottom: 12px; + margin: 10px auto 10px auto; + background-color: #f0f0f0; } #errorExplanation h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - background-color: #c00; - color: #fff; + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + background-color: #c00; + color: #fff; } #errorExplanation p { - color: #333; - margin-bottom: 0; - padding: 5px; + color: #333; + margin-bottom: 0; + padding: 5px; } #errorExplanation ul li { - font-size: 1em; - list-style-type: disc; - list-style-position: outside; + font-size: 1em; + list-style-type: disc; + list-style-position: outside; } input.login_text { - width:200px; + width:200px; } input.open_id { - background: image-url('open-id-login-bg.gif') no-repeat; - background-color: #fff; - background-position: 0 50%; - color: #000; - padding-left: 18px; - width:182px; + background: image-url('open-id-login-bg.gif') no-repeat; + background-color: #fff; + background-position: 0 50%; + color: #000; + padding-left: 18px; + width: 182px; } p.alternate_auth { - text-align:center; + text-align: center; } p.alternate_auth a { - text-decoration:underline; + text-decoration: underline; } diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index 99a83138..f1dee2cd 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -11,7 +11,7 @@ div.footer { color: #999999; text-align: center; } - + a, a:link, a:active, a:visited { color: #CC3334; padding: 0.25em; @@ -26,24 +26,24 @@ a:hover { div.footer a { text-decoration: underline; color: #999999; - } +} h1 { - color: #fff; - padding-top: 0.2em; - padding-bottom: 0.2em; - padding-left:8px; - margin-top:0; - margin-bottom:0; - font-size:medium; + color: #fff; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left:8px; + margin-top:0; + margin-bottom:0; + font-size:medium; } h2 { - background-color: #aaaaaa; - margin: .3em 0; - padding: .3em 0 .1em .3em; - border-top: 1px solid #777777; - font-size:medium; + background-color: #aaaaaa; + margin: .3em 0; + padding: .3em 0 .1em .3em; + border-top: 1px solid #777777; + font-size:medium; } h2 a, h2 a:link, h2 a:active, h2 a:visited { @@ -58,31 +58,31 @@ h2 a:hover { } h4.alert { - border: 1px solid #666666; - text-align: center; + border: 1px solid #666666; + text-align: center; } h4.warning { - border: 1px solid #ED2E38; - background-color: #F6979C; - color: #000; + border: 1px solid #ED2E38; + background-color: #F6979C; + color: #000; } h4.error { - color:#fff; - background:#c00; + color:#fff; + background:#c00; } h4.notice { - border: 1px solid #007E00; - background-color: #c2ffc2; - color: #007E00; + border: 1px solid #007E00; + background-color: #c2ffc2; + color: #007E00; } span.tag { - font-size: small; - background-color: #CCE7FF; - color: #000; - padding: 1px; - margin-right: 2px; + font-size: small; + background-color: #CCE7FF; + color: #000; + padding: 1px; + margin-right: 2px; } span.r { @@ -95,81 +95,81 @@ span.prj, span.ctx{ } #ctx, #pjr { - margin: 0.5em 0; + margin: 0.5em 0; } #ctx a, #pjr a { - padding: 0.1em 0; + padding: 0.1em 0; } /* Draw attention to some text Same format as traffic lights */ .red { - color: #fff; - background: #f00; - padding: 1px; - font-size: 1em; + color: #fff; + background: #f00; + padding: 1px; + font-size: 1em; } - + .amber { - color: #fff; - background: #ff6600; - padding: 1px; - font-size: 1em; + color: #fff; + background: #ff6600; + padding: 1px; + font-size: 1em; } - + .orange { - color: #fff; - background: #FFA500; - padding: 1px; - font-size: 1em; + color: #fff; + background: #FFA500; + padding: 1px; + font-size: 1em; } .green { - color: #fff; - background: #33cc00; - padding: 1px; - font-size: 1em; + color: #fff; + background: #33cc00; + padding: 1px; + font-size: 1em; } - + .grey { - color: #fff; - background: #999; - padding: 1px; - font-size: 1em; + color: #fff; + background: #999; + padding: 1px; + font-size: 1em; } - + .count { - color: #fff; - background: #f00; - padding: 0.2em; + color: #fff; + background: #f00; + padding: 0.2em; } .errors { - background: #FFC2C2; + background: #FFC2C2; } ul.c li { -list-style-type: none; + list-style-type: none; } ul.c { - padding: 0; - margin: 0; - padding-left: 0.1em; + padding: 0; + margin: 0; + padding-left: 0.1em; } ul.c li { - padding: 0.25em 0; - margin: 0; + padding: 0.25em 0; + margin: 0; } ul.c li span.r { - display: none; + display: none; } span.r { - display:none; + display:none; } #topbar { @@ -184,12 +184,12 @@ span.r { } .nav { - color: #fff; - background: #000; - padding:0; - overflow:auto; - list-style:none; - margin:0; + color: #fff; + background: #000; + padding:0; + overflow:auto; + list-style:none; + margin:0; } .nav a, .nav a:link, .nav a:active, .nav a:visited { @@ -219,60 +219,60 @@ span.r { } #database_auth_form table td { - width:7em; + width:7em; } table.c { - margin-left: 5px; + margin-left: 5px; } .mobile-done { - display:inline; + display:inline; } input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project_id, select#todo_context_id { - width: 95%; + width: 95%; } .next-prev-project { - overflow:auto; - padding:0; - margin:0; - list-style:none; + overflow:auto; + padding:0; + margin:0; + list-style:none; } .prev, .next { - float:left; - width:50%; + float:left; + width:50%; } .next { - float:right; + float:right; } .prev a, .next a { - display:block; - height:1em; - overflow:hidden; + display:block; + height:1em; + overflow:hidden; } .prev a { - background: image-url('previous.png') left center no-repeat; - padding-left: 20px; + background: image-url('previous.png') left center no-repeat; + padding-left: 20px; } .prev a:hover { - background: #cc3334 image-url('previous.png') left center no-repeat; + background: #cc3334 image-url('previous.png') left center no-repeat; } .next a { - text-align:right; - background: image-url('next.png') right center no-repeat; - padding-right: 20px; + text-align:right; + background: image-url('next.png') right center no-repeat; + padding-right: 20px; } .next a:hover { - background: #cc3334 image-url('next.png') right center no-repeat; + background: #cc3334 image-url('next.png') right center no-repeat; } diff --git a/app/assets/stylesheets/print.css.scss b/app/assets/stylesheets/print.css.scss index 7fde32f3..70650638 100644 --- a/app/assets/stylesheets/print.css.scss +++ b/app/assets/stylesheets/print.css.scss @@ -1,26 +1,26 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } body { - background: #fff; - color: #000; - font-size: 8.2pt; - font-family: "Lucida Grande", "Bitstream Vera Sans", Helvetica, Verdana, Arial, sans-serif; + background: #fff; + color: #000; + font-size: 8.2pt; + font-family: "Lucida Grande", "Bitstream Vera Sans", Helvetica, Verdana, Arial, sans-serif; } img { - max-width: 2.2in; - max-height: 4.3in; - border:0; + max-width: 2.2in; + max-height: 4.3in; + border:0; } #navcontainer, #input_box, #footer, .big-box, .refresh, .badge, h1, .icon, #minilinks, .defer-container, .menu_sort, .position, .buttons, .sf-item-menu, .container_toggle, .grip, .show_notes, .recurring_icon, #project-next-prev, .project_settings, .add_note_link { - display:none; + display:none; } .tag { @@ -28,56 +28,56 @@ img { } .contexts { - margin: 0 0 2em 0; - border-top: 1px solid #000; - page-break-before: always; + margin: 0 0 2em 0; + border-top: 1px solid #000; + page-break-before: always; } .contexts:first-child { - page-break-before: avoid; + page-break-before: avoid; } h2 { - font-size: 1.4em; - font-weight: bold; - margin-bottom: .3em; - margin-top: 5pt; - padding: .2em 0; - border-bottom: 1pt dotted #000; + font-size: 1.4em; + font-weight: bold; + margin-bottom: .3em; + margin-top: 5pt; + padding: .2em 0; + border-bottom: 1pt dotted #000; } a, p, blockquote, ul, li, ol, dt, dd, dl, table { - margin: 0 0 .3em 0; + margin: 0 0 .3em 0; } .notes { - margin: .12em 1.2em; - padding: .3em; + margin: .12em 1.2em; + padding: .3em; } .description { - margin-left: 18pt; - line-height: 150% + margin-left: 18pt; + line-height: 150% } ul { - list-style-type: circle; + list-style-type: circle; } li { - margin: .1em 0 .1em 2em; - line-height: 1.4em; + margin: .1em 0 .1em 2em; + line-height: 1.4em; } .item-container { - clear:both; - padding-top: .3em; - padding-bottom: .3em; + clear:both; + padding-top: .3em; + padding-bottom: .3em; } .item-checkbox { - width: 10pt; - height: 10pt; - display:block; - float:left; -} \ No newline at end of file + width: 10pt; + height: 10pt; + display:block; + float:left; +} diff --git a/app/assets/stylesheets/tracks.css.scss b/app/assets/stylesheets/tracks.css.scss index bb801c83..c5c7f38a 100644 --- a/app/assets/stylesheets/tracks.css.scss +++ b/app/assets/stylesheets/tracks.css.scss @@ -60,7 +60,7 @@ q:before,q:after { } abbr,acronym { - border:0; + border:0; } body { @@ -436,7 +436,7 @@ input.item-checkbox { } .project_description, .context_description { - margin-left: 50px; + margin-left: 50px; } .stale_l1 { @@ -483,15 +483,15 @@ body.preferences div#footer { /* override jquery css to match tracks defaults better */ body.preferences div.ui-widget { - font-size: 1em; + font-size: 1em; } body.preferences div.ui-tabs li a { - padding: 0.1em 1em; + padding: 0.1em 1em; } body.preferences div.pref_new_token a { - color: #CC3334; + color: #CC3334; } /* The notes which may be attached to an item */ @@ -522,21 +522,21 @@ body.preferences div.pref_new_token a { .todo_notes ol li, .todo_notes ul li, .project_notes ol li, .project_notes ul li { - margin-left: 20px; + margin-left: 20px; } .todo_notes h1, .project_notes h1 { - font-size: 1.5em; - font-weight: bold; - margin: 10px 0px; + font-size: 1.5em; + font-weight: bold; + margin: 10px 0px; } .todo_notes h2, .project_notes h2 { - font-size: 1.2em; - font-style: italic; - margin: 10px 0px !important; - padding: 0px !important; - background-color: transparent !important; + font-size: 1.2em; + font-style: italic; + margin: 10px 0px !important; + padding: 0px !important; + background-color: transparent !important; } /* The notes for the project */ @@ -571,7 +571,7 @@ div.note_footer a, div.note_footer a:hover { /* For the detailed notes view */ .project_notes { - padding: 5px; + padding: 5px; } div.add_note_link { @@ -1040,7 +1040,7 @@ div.message { } .drop_target { - display:none; + display:none; } .hover { @@ -1049,9 +1049,9 @@ div.message { } .context_target { - height: 15px; - margin: 4px; - border: 4px dotted #999; + height: 15px; + margin: 4px; + border: 4px dotted #999; } /* Error message styles */ @@ -1384,65 +1384,65 @@ div.integrations textarea { } .defer-container { - float:right; + float:right; } .defer-container a:hover { - background-color: inherit; + background-color: inherit; } div.auto_complete { - width: 350px; - background: #fff; - color: #000; + width: 350px; + background: #fff; + color: #000; } div.auto_complete ul { - border:1px solid #888; - margin:0; - padding:0; - width:100%; - list-style-type:none; + border:1px solid #888; + margin:0; + padding:0; + width:100%; + list-style-type:none; } div.auto_complete ul li { - font-size: 1.0em; - margin:0; - padding:3px; - list-style-type: none; + font-size: 1.0em; + margin:0; + padding:3px; + list-style-type: none; } div.auto_complete ul li.selected { - background-color: #ffb; - font-weight:bold; + background-color: #ffb; + font-weight:bold; } div.auto_complete ul strong.highlight { - color: #800; - margin:0; - padding:0; + color: #800; + margin:0; + padding:0; } .ui-datepicker { - z-index: 1000 !important; + z-index: 1000 !important; } .ui-autocomplete-loading { - background: white image-url('ui-anim_basic_16x16.gif') right center no-repeat; + background: white image-url('ui-anim_basic_16x16.gif') right center no-repeat; } a.item-downarrow { - margin-left: 0; - margin-right: 0; + margin-left: 0; + margin-right: 0; } ul.todo-submenu > li > a { - position: relative; - padding-left: 24px; + position: relative; + padding-left: 24px; } ul.todo-submenu > li > a > img { - position: absolute; - left: 0px; - top: 0px; + position: absolute; + left: 0px; + top: 0px; } From a24b18b72451c5f537977bd8f6eac41feb4a5895 Mon Sep 17 00:00:00 2001 From: Dan Rice Date: Thu, 27 Sep 2012 13:10:09 -0400 Subject: [PATCH 2/2] refactor CSS to take some advantage of Sass nesting --- .gitignore | 1 + app/assets/stylesheets/login.css.scss | 42 +-- app/assets/stylesheets/mobile.css.scss | 74 ++-- app/assets/stylesheets/print.css.scss | 4 +- app/assets/stylesheets/tracks.css.scss | 492 +++++++++++++------------ 5 files changed, 314 insertions(+), 299 deletions(-) diff --git a/.gitignore b/.gitignore index 522bc7c9..91589d79 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ rerun.txt tags /.bundle/ /public/assets/ +.sass-cache/ diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss index 37b48e5c..6100ed75 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -119,28 +119,28 @@ h4.notice { padding-bottom: 12px; margin: 10px auto 10px auto; background-color: #f0f0f0; -} -#errorExplanation h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - background-color: #c00; - color: #fff; -} + h2 { + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + background-color: #c00; + color: #fff; + } -#errorExplanation p { - color: #333; - margin-bottom: 0; - padding: 5px; -} + p { + color: #333; + margin-bottom: 0; + padding: 5px; + } -#errorExplanation ul li { - font-size: 1em; - list-style-type: disc; - list-style-position: outside; + ul li { + font-size: 1em; + list-style-type: disc; + list-style-position: outside; + } } input.login_text { @@ -156,7 +156,5 @@ input.open_id { } p.alternate_auth { text-align: center; -} -p.alternate_auth a { - text-decoration: underline; + a { text-decoration:underline; } } diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index f1dee2cd..f767bed7 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -44,17 +44,17 @@ h2 { padding: .3em 0 .1em .3em; border-top: 1px solid #777777; font-size:medium; -} -h2 a, h2 a:link, h2 a:active, h2 a:visited { - color: #666666; - text-decoration: none; -} + a, a:link, a:active, a:visited { + color: #666666; + text-decoration: none; + } -h2 a:hover { - background-color: transparent; - color: #CC3334; - text-decoration: none; + a:hover { + background-color: transparent; + color: #CC3334; + text-decoration: none; + } } h4.alert { @@ -190,32 +190,32 @@ span.r { overflow:auto; list-style:none; margin:0; -} -.nav a, .nav a:link, .nav a:active, .nav a:visited { - background: #666; - color: #fff; - padding: 0.5em; -} + a, a:link, a:active, a:visited { + background: #666; + color: #fff; + padding: 0.5em; + } -.nav a:focus, .nav a:hover, .nav a:active { - background: transparent; - text-decoration: underline; -} + a:focus, a:hover, a:active { + background: transparent; + text-decoration: underline; + } -.nav li:hover, .nav a:focus, .nav a:hover, .nav a:active { - color: #CCCCCC; -} + li:hover, a:focus, a:hover, a:active { + color: #CCCCCC; + } -.nav li.link { - width:20%; - float:left; - outline:black solid 1px; -} -.nav .link a { - font-size:small; - text-align:center; - display:block; + li.link { + width:20%; + float:left; + outline:black solid 1px; + } + .link a { + font-size:small; + text-align:center; + display:block; + } } #database_auth_form table td { @@ -261,18 +261,18 @@ input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project .prev a { background: image-url('previous.png') left center no-repeat; padding-left: 20px; -} -.prev a:hover { - background: #cc3334 image-url('previous.png') left center no-repeat; + &:hover { + background: #cc3334 image-url('previous.png') left center no-repeat; + } } .next a { text-align:right; background: image-url('next.png') right center no-repeat; padding-right: 20px; -} -.next a:hover { - background: #cc3334 image-url('next.png') right center no-repeat; + &:hover { + background: #cc3334 image-url('next.png') right center no-repeat; + } } diff --git a/app/assets/stylesheets/print.css.scss b/app/assets/stylesheets/print.css.scss index 70650638..bdbf85ed 100644 --- a/app/assets/stylesheets/print.css.scss +++ b/app/assets/stylesheets/print.css.scss @@ -31,10 +31,8 @@ img { margin: 0 0 2em 0; border-top: 1px solid #000; page-break-before: always; -} -.contexts:first-child { - page-break-before: avoid; + &:first-child { page-break-before: avoid; } } h2 { diff --git a/app/assets/stylesheets/tracks.css.scss b/app/assets/stylesheets/tracks.css.scss index c5c7f38a..40c924d1 100644 --- a/app/assets/stylesheets/tracks.css.scss +++ b/app/assets/stylesheets/tracks.css.scss @@ -106,11 +106,31 @@ h3 { /* Rules for the icon links */ -img.edit_item {background-image: image-url('edit_off.png'); background-repeat: no-repeat; border: none;} -a:hover img.edit_item {background-image: image-url('edit_on.png'); background-color: transparent; background-repeat: no-repeat; border: none;} +img.edit_item { + background-image: image-url('edit_off.png'); + background-repeat: no-repeat; + border: none; -img.delete_item {background-image: image-url('delete_off.png'); background-repeat: no-repeat; border: none;} -a:hover img.delete_item {background-image: image-url('delete_on.png');background-color: transparent;background-repeat: no-repeat; border: none;} + a:hover & { + background-image: image-url('edit_on.png'); + background-color: transparent; + background-repeat: no-repeat; + border: none; + } +} + +img.delete_item { + background-image: image-url('delete_off.png'); + background-repeat: no-repeat; + border: none; + + a:hover & { + background-image: image-url('delete_on.png'); + background-color: transparent; + background-repeat: no-repeat; + border: none; + } +} a.undecorated_link {background-color:transparent;color:transparent;} img.todo_star {background-image: image-url('staricons.png'); background-repeat: no-repeat; border:none; background-position: -32px 0px;} @@ -118,14 +138,20 @@ img.todo_star.starred{ background-position: 0px 0px; } a:hover img.todo_star { background-position: -48px 0px;} a:hover img.todo_star.starred { background-position: -16px 0px; } -a.to_top {background: transparent image-url('top_off.png') no-repeat;} -a.to_top:hover {background: transparent image-url('top_on.png') no-repeat;} +a.to_top { + background: transparent image-url('top_off.png') no-repeat; + &:hover {background: transparent image-url('top_on.png') no-repeat;} +} -a.up {background: transparent image-url('up_off.png') no-repeat;} -a.up:hover {background: transparent image-url('up_on.png') no-repeat;} +a.up { + background: transparent image-url('up_off.png') no-repeat; + &:hover {background: transparent image-url('up_on.png') no-repeat;} +} -a.down {background: transparent image-url('down_off.png') no-repeat;} -a.down:hover {background: transparent image-url('down_on.png') no-repeat;} +a.down { + background: transparent image-url('down_off.png') no-repeat; + &:hover {background: transparent image-url('down_on.png') no-repeat;} +} a.to_bottom {background: transparent image-url('bottom_off.png') no-repeat;} a.to_bottom:hover {background: transparent image-url('bottom_on.png') no-repeat;} @@ -203,8 +229,8 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url float: left; } -#recurring_todo input, #recurring_todo textarea { - width: 100%; +#recurring_todo { + input, textarea { width: 100%; } } .recurring_container { @@ -226,32 +252,32 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url #navlist { margin: 0; padding: 0 0 20px 5px; -} -#navlist ul, #navlist li { - margin: 0; - padding: 0; - display: inline; - list-style-type: none; -} + ul, li { + margin: 0; + padding: 0; + display: inline; + list-style-type: none; + } -#navlist a:link, #navlist a:visited { - float: left; - line-height: 14px; - font-weight: bold; - margin: 0 10px 4px 10px; - text-decoration: none; - color: #eee; -} + a:link, a:visited { + float: left; + line-height: 14px; + font-weight: bold; + margin: 0 10px 4px 10px; + text-decoration: none; + color: #eee; + } -#navlist a:link#current, #navlist a:visited#current, #navlist a:hover { - border-bottom: 4px solid #CCC; - padding-bottom: 2px; - background: transparent; - color: #CCC; -} + a:link#current, a:visited#current, a:hover { + border-bottom: 4px solid #CCC; + padding-bottom: 2px; + background: transparent; + color: #CCC; + } -#navlist a:hover { color: #CCC; } + a:hover { color: #CCC; } +} #develop-notify-bar { line-height:0.5; @@ -279,9 +305,8 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url margin-top: 15px; margin-bottom: 5px; white-space: nowrap; /* added 2006-05-17 for safari display, timfm */ -} -#date h1 { - font-size: 152%; + + h1 { font-size: 152%; } } #minilinks { @@ -323,15 +348,17 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url border:0px; } -h2 a, h2 a:link, h2 a:active, h2 a:visited { - color: #666; - text-decoration: none; -} +h2 { + a, a:link, a:active, a:visited { + color: #666; + text-decoration: none; + } -h2 a:hover { - color: #cc3334; - background-color: transparent; - text-decoration: none; + a:hover { + color: #cc3334; + background-color: transparent; + text-decoration: none; + } } div#input_box { @@ -389,8 +416,10 @@ a:hover img.icon_delete_dep {width: 10px; background-image: image-url('icon_dele a.icon_delete_dep:hover {width: 10px; background-color: black;} /* deleting dependency from edit form of a todo */ -form.edit_todo_form a.icon_delete_dep:hover { background-color: #cccccc;} -form.edit_todo_form a:hover img.icon_delete_dep { background-color: #cccccc; } +form.edit_todo_form { + a.icon_delete_dep:hover { background-color: #cccccc;} + a:hover img.icon_delete_dep { background-color: #cccccc; } +} /* delete button for deleting a dep from the tree of a todo */ a.delete_dependency_button:hover {background-color: white;} @@ -458,40 +487,40 @@ input.item-checkbox { padding: 0px; } -a.footer_link {color: #cc3334; font-style: normal;} -a.footer_link:hover {color: #fff; background-color: #cc3334 !important;} +a.footer_link { + color: #cc3334; + font-style: normal; + + &:hover { + color: #fff; + background-color: #cc3334 !important; + } +} /* preferences */ -body.preferences div#display_box { - margin-right:510px; -} +body.preferences { + div#display_box { + margin-right:510px; + } -body.preferences div#input_box { - width:490px; - right:15px; -} + div#input_box { + width:490px; + right:15px; + } -body.preferences select#prefs_time_zone, body.preferences select#prefs_sms_context_id { - width: 250px; -} + select#prefs_time_zone, select#prefs_sms_context_id { + width: 250px; + } -body.preferences div#footer { - margin-right:410px; -} + div#footer { + margin-right:410px; + } -/* override jquery css to match tracks defaults better */ - -body.preferences div.ui-widget { - font-size: 1em; -} - -body.preferences div.ui-tabs li a { - padding: 0.1em 1em; -} - -body.preferences div.pref_new_token a { - color: #CC3334; + /* override jquery css to match tracks defaults better */ + div.ui-widget { font-size: 1em; } + div.ui-tabs li a { padding: 0.1em 1em; } + div.pref_new_token a { color: #CC3334; } } /* The notes which may be attached to an item */ @@ -915,54 +944,54 @@ input#go_to_project, input#context_hide { width: 5%; } -#todo_new_action_container .show_from_input, #todo_new_action_container .due_input { - width: 45%; +#todo_new_action_container { + .show_from_input, .due_input { + width: 45%; + } } #todo_new_action_container .show_from_input { float: right; } -#todo-form-new-action .submit_box, #project_form .submit_box, #context_form .submit_box, #todo-form-multi-new-action .submit_box { - height: 25px; - padding: 5px 0; - text-align: center; - clear: right; +#todo-form-new-action, #project_form, #context_form, #todo-form-multi-new-action { + .submit_box { + height: 25px; + padding: 5px 0; + text-align: center; + clear: right; + } } -.edit_todo_form .submit_box { - height: 25px; - padding: 5px 0; - text-align: center; - clear: right; +.edit_todo_form { + input, textarea { width:100%; } + + .submit_box { + height: 25px; + padding: 5px 0; + text-align: center; + clear: right; + } + + .Date { width:89%; } + + a.date_clear:hover { background: #CCCCCC; } + + .tag_list_label { clear:both; } + + .due_input, .show_from_input, .project_input, .context_input { + width:48%; + } + + .show_from_input, .context_input { + float: right; + } + + .submit_box input { + width:120px; + } } -.edit_todo_form input, .edit_todo_form textarea { - width:100%; -} - -.edit_todo_form .Date { - width:89%; -} - -.edit_todo_form a.date_clear:hover { - background: #CCCCCC; -} - -.edit_todo_form .tag_list_label { - clear:both; -} -.edit_todo_form .due_input, .edit_todo_form .show_from_input, .edit_todo_form .project_input, .edit_todo_form .context_input { - width:48%; -} - -.edit_todo_form .show_from_input, .edit_todo_form .context_input { - float: right; -} - -.edit_todo_form .submit_box input { - width:120px; -} .hide_form { text-align:right; } @@ -1067,31 +1096,31 @@ div.message { padding-bottom: 12px; margin: 10px auto 20px auto; background-color: #f0f0f0; -} -#errorExplanation h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - background-color: #c00; - color: #fff; -} + h2 { + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + background-color: #c00; + color: #fff; + } -#errorExplanation > p { - color: #333; - margin-top: 5px; - margin-bottom: 0; - padding: 5px; -} + > p { + color: #333; + margin-top: 5px; + margin-bottom: 0; + padding: 5px; + } -#errorExplanation ul li { - font-size: 1em; - list-style-type: disc; - list-style-position: inside; - margin-left:7px; - color: #333; + ul li { + font-size: 1em; + list-style-type: disc; + list-style-position: inside; + margin-left:7px; + color: #333; + } } ul#prefs {list-style-type: disc; margin-left: 15px;} @@ -1126,38 +1155,32 @@ ul#prefs {list-style-type: disc; margin-left: 15px;} color: #666; padding: 5px 20px; text-align: left; + + h3, dl, dt, dd { + display: inline; + } + + dt { margin-left: 15px; } + dd { margin-left: 3px; } + p { margin-bottom: 0px; } } -#feedlegend h3, #feedlegend dl, #feedlegend dt, #feedlegend dd { - display: inline; -} +#feeds { + img.rss-icon { + margin-bottom: -4px; + } -#feedlegend dt { - margin-left: 15px; -} + li { + font-size:13px; + font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif; -#feedlegend dd { - margin-left: 3px; -} - -#feedlegend p { - margin-bottom: 0px; -} - -#feeds img.rss-icon { - margin-bottom: -4px; -} - -#feeds li { - font-size:13px; - font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif; -} - -#feeds li h4 { - margin-top: 12px; - margin-bottom: 4px; - font-weight: normal; - font-style:oblique; + h4 { + margin-top: 12px; + margin-bottom: 4px; + font-weight: normal; + font-style:oblique; + } + } } input.open_id { @@ -1174,32 +1197,32 @@ div.page_name_auto_complete { background: #fff; display: inline; z-index: 100; -} -div.page_name_auto_complete ul { - border: 1px solid #888; - margin: 0; - padding: 0; - width: 100%; - list-style-type: none; -} + ul { + border: 1px solid #888; + margin: 0; + padding: 0; + width: 100%; + list-style-type: none; -div.page_name_auto_complete ul li { - margin: 0; - padding: 2px; - font-weight:bold; - list-style-type: none; - color: #000; -} + li { + margin: 0; + padding: 2px; + font-weight:bold; + list-style-type: none; + color: #000; + } -div.page_name_auto_complete ul li.selected { - background-color: #ffb; -} + li.selected { + background-color: #ffb; + } -div.page_name_auto_complete ul strong.highlight { - color: #800; - margin: 0; - padding: 0; + strong.highlight { + color: #800; + margin: 0; + padding: 0; + } + } } table.next_actions td { @@ -1355,72 +1378,67 @@ button.positive, .widgets a.positive{ margin-bottom:15px; } -div.integrations h2 { - margin-top:40px; - padding-top:20px; - margin-bottom:10px; - border-top:1px solid #ccc; -} +div.integrations { + h2 { + margin-top:40px; + padding-top:20px; + margin-bottom:10px; + border-top:1px solid #ccc; + } -div.integrations p, div.integrations li { - font-size:1.0em; -} + p, li { font-size:1.0em; } + pre { font-size:1.1em; } -div.integrations pre { - font-size:1.1em; -} + li { + list-style-type: disc; + list-style-position: inside; + margin-left:30px; + } -div.integrations li { - list-style-type: disc; - list-style-position: inside; - margin-left:30px; -} - -div.integrations textarea { - margin:10px; - padding:3px; - width:80%; - background-color:#ddd; + textarea { + margin:10px; + padding:3px; + width:80%; + background-color:#ddd; + } } .defer-container { float:right; -} -.defer-container a:hover { - background-color: inherit; + a:hover { background-color: inherit; } } div.auto_complete { width: 350px; background: #fff; color: #000; -} -div.auto_complete ul { - border:1px solid #888; - margin:0; - padding:0; - width:100%; - list-style-type:none; -} + ul { + border:1px solid #888; + margin:0; + padding:0; + width:100%; + list-style-type:none; -div.auto_complete ul li { - font-size: 1.0em; - margin:0; - padding:3px; - list-style-type: none; -} + li { + font-size: 1.0em; + margin:0; + padding:3px; + list-style-type: none; + } -div.auto_complete ul li.selected { - background-color: #ffb; - font-weight:bold; -} + li.selected { + background-color: #ffb; + font-weight:bold; + } -div.auto_complete ul strong.highlight { - color: #800; - margin:0; - padding:0; + strong.highlight { + color: #800; + margin:0; + padding:0; + } + } } .ui-datepicker { @@ -1439,10 +1457,10 @@ a.item-downarrow { ul.todo-submenu > li > a { position: relative; padding-left: 24px; -} -ul.todo-submenu > li > a > img { - position: absolute; - left: 0px; - top: 0px; + > img { + position: absolute; + left: 0px; + top: 0px; + } }