diff options
Diffstat (limited to 'web/css')
| -rw-r--r-- | web/css/_main.scss | 139 | ||||
| -rw-r--r-- | web/css/cobrands/emptyhomes/emptyhomes.css | 24 | ||||
| -rw-r--r-- | web/css/core.css | 845 | ||||
| -rw-r--r-- | web/css/core.scss | 503 | ||||
| -rw-r--r-- | web/css/ie6-378.css | 2 | ||||
| -rw-r--r-- | web/css/ie6.css | 6 | ||||
| -rw-r--r-- | web/css/main.css | 182 | ||||
| -rw-r--r-- | web/css/main.scss | 14 |
8 files changed, 1131 insertions, 584 deletions
diff --git a/web/css/_main.scss b/web/css/_main.scss new file mode 100644 index 000000000..44fd82b3b --- /dev/null +++ b/web/css/_main.scss @@ -0,0 +1,139 @@ +// Generics + +body { + font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + // color: #a9aeb0; +} + +h1 { + margin: 0; + font-size: 175%; +} +h2 { + font-size: 140%; +} + +select, input, textarea { + font-size: 99%; +} + +#mysociety { + + a.unsuitable-report { + font-size: small; + } + + blockquote { + border-left: solid 4px $header_colour; + } + + .a { + color: #000000; + background-color: $header_back_lighter; + } + + #postcodeForm { + background-color: $header_back; + } + + #front_stats div { + background-color: $header_back; + } + +} + +// Site layout + +#header { + font-size: 200%; + font-weight: bold; + border-bottom: solid 2px $header_colour; + margin: 0; + padding: 0.15em 0.5em; + background-color: $header_back; + color: $header_colour; + + a:link, a:visited { + color: $header_colour; + background-color: $header_back; + text-decoration: none; + } + a:active, a:hover { + text-decoration: underline; + } +} + +#my { + color: $header_darker; + background-color: $header_back; +} + +#mysociety { + width: 100%; /* Must specify a width or IE goes crazy wrong! */ + position: relative; + margin: 0 auto; + max-width: 60em; +} + +/* Can't put the margin in #mysociety because of above IE craziness */ +#wrapper { + margin: 2em; +} + +.v { + display: none; +} + +#navigation { + position: absolute; + top: 1em; + right: 1em; + padding: 0; + margin: 0; + list-style-type: none; + + li { + display: inline; + padding: 0; + margin: 0; + } + + a { + display: -moz-inline-box; + display: inline-block; + padding: 0.4em 1em; + } + a:link, a:visited { + color: $header_colour; + } + a:hover, a:active { + background-color: $header_colour; + color: $header_back; + } +} + +#nav_new a { + background-image: url("/i/new.png"); + background-repeat: no-repeat; + background-position: 100% 0; +} + +#logo { + border: none; + position: absolute; + top: 3.3em; + right: 10px; +} + +#footer { + clear: both; + text-align: right; + font-size: 83%; + border-top: solid 1px $header_colour; + display: table; + margin: 2em 0 1em auto; + padding: 2px 4px; +} + diff --git a/web/css/cobrands/emptyhomes/emptyhomes.css b/web/css/cobrands/emptyhomes/emptyhomes.css index c3d514807..15afee568 100644 --- a/web/css/cobrands/emptyhomes/emptyhomes.css +++ b/web/css/cobrands/emptyhomes/emptyhomes.css @@ -74,8 +74,6 @@ blockquote { /* Site layout */ #header { - font-size: 200%; - font-weight: bold; margin: 0; padding: 5px 0; float: left; @@ -85,14 +83,24 @@ blockquote { margin-left: 0.5em; } -#content { +#header #eha-logo { + float: left; + margin-right: 1em; +} + +#header div { + float: left; + margin-top: 0.5em; +} + +#mysociety { width: 100%; /* Must specify a width or IE goes crazy wrong! */ position: relative; margin: 0 auto; max-width: 60em; } -/* Can't put the margin in #content because of above IE craziness */ +/* Can't put the margin in #mysociety because of above IE craziness */ #wrapper { clear: both; margin: 0 2em 2em; @@ -146,7 +154,7 @@ blockquote { right: 10px; } -#footer { +#emptyhomes-footer { clear: both; font-size: 83%; border-top: solid 2em #ffffff; @@ -156,11 +164,11 @@ blockquote { padding: 20px; overflow: auto; } -#footer div { +#emptyhomes-footer div { float: left; - margin-right: 1em; + margin-right: 2em; } -#footer a { +#emptyhomes-footer a { color: #FFFFFF; } diff --git a/web/css/core.css b/web/css/core.css index 0ff8fb1a2..5b64d67b9 100644 --- a/web/css/core.css +++ b/web/css/core.css @@ -1,488 +1,379 @@ -/* Generics */ -blockquote { - border-left: solid 4px #666666; - padding-left: 0.5em; +#mysociety blockquote { + border-left: solid 4px #666666; + padding-left: 0.5em; +} +#mysociety blockquote h2, #mysociety blockquote p { + margin: 0; +} +#mysociety dt { + font-weight: bold; + margin-top: 0.5em; +} +#mysociety .gone { + color: #666666; + background-color: #cccccc; +} +#mysociety p.error { + text-align: center; + color: #cc0000; + font-size: larger; +} +#mysociety ul { + padding: 0 0 0 1.5em; + margin: 0; +} +#mysociety ul.error { + color: #cc0000; + background-color: #ffeeee; + padding-right: 4px; + text-align: left; + font-size: larger; +} +#mysociety div.form-error { + color: #cc0000; + margin: 5px 1em 5px 1em; + padding: 2px 5px 2px 5px; + float: left; + background-color: #ffeeee; + text-align: left; +} +#mysociety div.form-field { + clear: both; +} +#mysociety #advert_thin { + width: 50%; + margin: 1em auto; + border-top: dotted 1px #999999; +} +#mysociety #advert_hfymp { + border-top: dotted 1px #999999; + text-align: center; +} +#mysociety p#expl { + text-align: center; + font-size: 150%; + margin: 0 2em; +} +#mysociety #postcodeForm { + display: table; + _width: 33em; + text-align: center; + font-size: 150%; + margin: 1em auto; + padding: 1em; + -moz-border-radius: 1em; + -webkit-border-radius: 1em; + border-radius: 1em; +} +#mysociety #postcodeForm label { + float: none; + padding-right: 0; +} +#mysociety #postcodeForm #submit { + font-size: 83%; +} +#mysociety #front_intro { + float: left; + width: 48%; +} +#mysociety #front_intro p { + clear: both; + margin-top: 0; +} +#mysociety #front_stats div { + text-align: center; + width: 5.5em; + -moz-border-radius: 0.5em; + -webkit-border-radius: 0.5em; + border-radius: 0.5em; + float: left; + margin: 0 1em 1em; +} +#mysociety #front_stats div big { + font-size: 150%; + display: block; +} +#mysociety #front_recent { + float: right; + width: 48%; + margin-bottom: 1em; +} +#mysociety #front_recent img, #mysociety #alert_recent img { + margin-right: 0.25em; + margin-bottom: 0.25em; +} +#mysociety #front_recent > h2:first-child, #mysociety #front_intro > h2:first-child { + margin-top: 0; +} +#mysociety form { + margin: 0; +} +#mysociety label { + float: left; + text-align: right; + padding-right: 0.5em; + width: 5em; +} +#mysociety fieldset, #mysociety #fieldset { + border: none; + padding: 0.5em; +} +#mysociety fieldset div, #mysociety #fieldset div { + margin-top: 2px; + clear: left; +} +#mysociety legend { + display: none; +} +#mysociety #fieldset div.checkbox, #mysociety #problem_submit { + padding-left: 5.5em; +} +#mysociety #fieldset div.checkbox label, #mysociety label.n { + float: none; + text-align: left; + padding-right: 0; + width: auto; + cursor: pointer; + cursor: hand; +} +#mysociety #questionnaire label, #mysociety #alerts label { + float: none; +} +#mysociety .confirmed { + background-color: #ccffcc; + border: solid 2px #009900; + padding: 5px; + text-align: center; +} +#mysociety #watermark { + background: url("/i/mojwatermark6.png"); + height: 113px; + width: 231px; + position: absolute; + bottom: 0; + right: 0; +} +#mysociety #map_box { + float: right; + width: 502px; + position: relative; + padding-left: 20px; + background-color: #ffffff; +} +#mysociety p#copyright { + float: right; + margin: 0 0 1em 0; + font-size: 78%; +} +#mysociety #map { + border: solid 1px #000000; + width: 500px; + height: 500px; + overflow: hidden; + position: relative; + background-color: #f1f1f1; +} +#mysociety #drag { + position: absolute; + width: 500px; + height: 500px; + right: 0; + top: 0; +} +#mysociety #drag input, #mysociety #drag img { + position: absolute; + border: none; +} +#mysociety #drag input { + cursor: crosshair; + background-color: #cccccc; +} +#mysociety #drag img { + cursor: move; +} +#mysociety #drag img.pin { + z-index: 100; + background-color: inherit; +} +#mysociety #drag a img.pin { + cursor: pointer; + cursor: hand; +} +#mysociety form#mapForm #map { + cursor: pointer; +} +#mysociety form#mapForm .olTileImage { + cursor: crosshair; +} +#mysociety #compass { + background-color: #ffffff; + border: solid 1px #000000; + border-width: 0 1px 1px 0; + color: #000000; + position: absolute; + top: 0px; + left: 0px; +} +#mysociety #compass img { + border: 0; +} +#mysociety #text_map { + margin-top: 0.5em; + margin-bottom: 1em; + font-size: 110%; +} +#mysociety #text_no_map { + margin-top: 0; +} +#mysociety #sub_map_links { + float: right; + clear: right; + margin-top: 0; +} +#mysociety #fixed { + margin: 0 530px 1em 0; + padding: 5px; + text-align: center; + position: relative; + background-color: #ccffcc; + border: solid 2px #009900; +} +#mysociety #unknown { + margin: 0 530px 1em 0; + padding: 5px; + text-align: center; + position: relative; + background-color: #ffcccc; + border: solid 2px #990000; +} +#mysociety #updates div { + padding: 0 0 0.5em; + margin: 0 0 0.25em; + border-bottom: dotted 1px #5e552b; +} +#mysociety #updates div .problem-update, #mysociety #updates div .update-text { + padding: 0; + margin: 0; + border-bottom: 0; +} +#mysociety #updates p { + margin: 0; +} +#mysociety #nearby_lists h2 { + margin-top: 0.5em; + margin-bottom: 0; +} +#mysociety #alert_links { + float: right; +} +#mysociety #alert_links_area { + background-color: #ffeecc; + border: solid 1px #ff9900; + border-width: 1px 0; + padding: 3px 10px; + margin: 0; +} +#mysociety #rss_alert { + text-decoration: none; +} +#mysociety #rss_alert span { + text-decoration: underline; +} +#mysociety #email_alert_box { + display: none; + position: absolute; + padding: 3px; + font-size: 83%; + border: solid 1px #7399C3; + background-color: #eeeeff; + color: #000000; +} +#mysociety #email_alert_box p { + margin: 0; +} +#mysociety .council_sent_info { + font-size: smaller; +} +#mysociety #rss_items { + width: 62%; + float: left; +} +#mysociety #rss_rhs { + border-left: 1px dashed #999; + width: 36%; + float: right; + padding: 0 0 0 0.5em; + margin: 0 0 1em 0.5em; +} +#mysociety #rss_box { + padding: 10px; + border: 1px solid #999999; +} +#mysociety #rss_feed { + list-style-type: none; + margin-bottom: 2em; +} +#mysociety #rss_feed li { + margin-bottom: 1em; +} +#mysociety #alert_or { + font-style: italic; + font-size: 125%; + margin: 0; +} +#mysociety #rss_list { + float: left; + width: 47%; +} +#mysociety #rss_list ul { + list-style-type: none; +} +#mysociety #rss_buttons { + float: right; + width: 35%; + text-align: center; + margin-bottom: 2em; +} +#mysociety #rss_local { + margin-left: 1.5em; + margin-bottom: 0; } -blockquote h2, blockquote p { - margin: 0; +#mysociety #rss_local_alt { + margin: 0 0 2em 4em; +} +#mysociety #alert_photos { + text-align: center; + float: right; + width: 150px; + margin-left: 0.5em; } +#mysociety #alert_photos h2 { + font-size: 100%; -form { - margin: 0; } - -label { - float: left; - text-align: right; - padding-right: 0.5em; - width: 5em; -} - -fieldset, #fieldset { - border: none; - padding: 0.5em; -} - -legend { - display: none; -} - -dt { - font-weight: bold; - margin-top: 0.5em; -} - -.v { display: none; } - -.gone { - color: #666666; - background-color: #cccccc; -} - -p.error { - text-align: center; - color: #cc0000; - font-size: larger; -} - -span.error { - color: #cc0000; -} - -ul { - padding: 0 0 0 1.5em; - margin: 0; -} - -ul.error { - color: #cc0000; - background-color: #ffeeee; - padding-right: 4px; - text-align: left; - font-size: larger; +#mysociety #alert_photos img { + margin-bottom: 0.25em; } - -div.form-error { - color: #cc0000; - margin: 5px 1em 5px 1em; - padding: 2px 5px 2px 5px; - float: left; - background-color: #ffeeee; - text-align: left; +#mysociety #col_problems, #mysociety #col_fixed { + float: left; + width: 48%; + margin-right: 1em; } - -div.form-field { - clear: both; -} - -/* Site-wide layout */ - -#advert_thin { - width: 50%; - margin: 1em auto; - border-top: dotted 1px #999999; -} -#advert_hfymp { - border-top: dotted 1px #999999; - text-align: center; -} - -/* Front page */ - -p#expl { - text-align: center; - font-size: 150%; - margin: 0 2em; -} - -#postcodeForm { - display: table; - _width: 33em; - text-align: center; - font-size: 150%; - margin: 1em auto; - padding: 1em; - -moz-border-radius: 1em; - -webkit-border-radius: 1em; - border-radius: 1em; -} - -#postcodeForm label { - float: none; - padding-right: 0; -} - -#postcodeForm #submit { - font-size: 83%; +#mysociety .contact-details { + font-size: 80%; + margin-top: 2em; } -#front_intro { - float: left; - width: 48%; -} - -#front_intro p { - clear: both; - margin-top: 0; -} - -#front_stats div { - text-align: center; - width: 5.5em; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; - border-radius: 0.5em; - float: left; - margin: 0 1em 1em; -} - -#front_stats div big { - font-size: 150%; - display: block; -} - -#front_recent { - float: right; - width: 48%; - margin-bottom: 1em; -} -#front_recent img, #alert_recent img { - margin-right: 0.25em; - margin-bottom: 0.25em; -} -#front_recent > h2:first-child, #front_intro > h2:first-child { - margin-top: 0; -} - -/* Forms */ - -fieldset div, #fieldset div { - margin-top: 2px; - clear: left; -} -#fieldset div.checkbox, #problem_submit { - padding-left: 5.5em; -} -#fieldset div.checkbox label, label.n { - float: none; - text-align: left; - padding-right: 0; - width: auto; - cursor: pointer; - cursor: hand; -} - -#questionnaire label, #alerts label { - float: none; -} - -.confirmed { - background-color: #ccffcc; - border: solid 2px #009900; - padding: 5px; - text-align: center; -} - -/* Map */ - -#watermark { - background: url("/i/mojwatermark6.png"); - height: 113px; - width: 231px; - position: absolute; - bottom: 0; - right: 0; -} - -#map_box { - float: right; - width: 502px; /* Two pixels more than width of #map */ - position: relative; - padding-left: 20px; - background-color: #ffffff; -} - -p#copyright { - float: right; - margin: 0 0 1em 0; - font-size: 78%; -} - -#map { - border: solid 1px #000000; - width: 500px; /* Twice a tile width */ - height: 500px; - overflow: hidden; - position: relative; - background-color: #f1f1f1; -} - -#drag { - position: absolute; - width: 500px; - height: 500px; - right: 0; - top: 0; -} - -#drag input { - cursor: crosshair; - background-color: #cccccc; -} -#drag img { - cursor: move; -} -#drag input, #drag img { - position: absolute; - border: none; -} -#drag img.pin { - z-index: 100; - background-color: inherit; -} -#drag a img.pin { - cursor: pointer; - cursor: hand; -} - -#compass { - background-color: #ffffff; - border: solid 1px #000000; - border-width: 0 1px 1px 0; - color: #000000; - position: absolute; - top: 0px; - left: 0px; -} - -#compass img { - border: 0; -} - -#text_map { - margin-top: 0.5em; - margin-bottom: 1em; - font-size: 110%; -} -#text_no_map { - margin-top: 0; - /* background-color: #ffeecc; - padding: 4px; */ -} - -#sub_map_links { - float: right; - clear: right; - margin-top: 0; -} - -/* Problem pages */ - -#fixed, #unknown { - margin: 0 530px 1em 0; - padding: 5px; - text-align: center; - position: relative; -} -#fixed { - background-color: #ccffcc; - border: solid 2px #009900; -} -#unknown { - background-color: #ffcccc; - border: solid 2px #990000; -} - -#updates div { - padding: 0 0 0.5em; - margin: 0 0 0.25em; - border-bottom: dotted 1px #5e552b; -} - -#updates div .problem-update, -#updates div .update-text { - padding: 0; - margin: 0; - border-bottom: 0; -} -#updates p { - margin: 0; -} - -#nearby_lists h2 { - margin-top: 0.5em; - margin-bottom: 0; -} -#alert_links { - float: right; -} -#alert_links_area { - background-color: #ffeecc; - border: solid 1px #ff9900; - border-width: 1px 0; - padding: 3px 10px; - /* padding: 0 3px; */ - margin: 0; -} -#rss_alert { - text-decoration: none; -} -#rss_alert span { - text-decoration: underline; -} -#email_alert { -} -#email_alert_box { - display:none; - position: absolute; - padding: 3px; - font-size:83%; - border:solid 1px #7399C3; - background-color: #eeeeff; - color: #000000; -} -#email_alert_box p { - margin: 0; -} - -.council_sent_info { - font-size: smaller; -} - -/* RSS feed XSL */ - -#rss_items { - width:62%; - float:left; -} -#rss_rhs { - border-left:1px dashed #999; - width:36%; - float:right; - padding: 0 0 0 0.5em; - margin: 0 0 1em 0.5em; -} -#rss_box { - padding:10px; - border:1px solid #999999; -} - -/* Alerts */ -#rss_feed { - list-style-type: none; - margin-bottom: 2em; -} -#rss_feed li { - margin-bottom: 1em; -} -#alert_or { - font-style: italic; - font-size: 125%; - margin: 0; -} -#rss_list { - float: left; - width: 47%; -} -#rss_list ul { - list-style-type: none; -} -#rss_buttons { - float: right; - width: 35%; - text-align: center; - margin-bottom: 2em; -} -#rss_local { - margin-left: 1.5em; - margin-bottom: 0; -} -#rss_local_alt { - margin: 0 0 2em 4em; -} - -#alert_photos { - text-align: center; - float: right; - width: 150px; - margin-left: 0.5em; -} -#alert_photos h2 { - font-size: 100%; -} -#alert_photos img { - margin-bottom: 0.25em; -} - -/* Report page */ - -#col_problems, #col_fixed { - float: left; - width: 48%; - margin-right: 1em; -} - -/* Contact page */ -.contact-details { - font-size: 80%; - margin-top: 2em; -} - -/* Printing */ @media print { - #map_box { float: none; margin: 0 auto; } - #content { max-width: none; } - #side { margin-right: 0; } -} - -/* File upload */ -.progressContainer { - margin: 5px; - padding: 4px; - width: 357px; - border: solid 1px #E8E8E8; - background-color: #F7F7F7; - overflow: hidden; -} -.red { border: solid 1px #B50000; background-color: #FFEBEB; } -.green { border: solid 1px #DDF0DD; background-color: #EBFFEB; } -.blue { border: solid 1px #CEE2F2; background-color: #F0F5FF; } - -.progressName { - font-size: 8pt; - font-weight: bold; - color: #555555; - width: 323px; - height: 14px; - text-align: left; - white-space: nowrap; - overflow: hidden; -} -.progressBarInProgress, .progressBarComplete, .progressBarError { - font-size: 0px; - width: 0%; - height: 2px; - background-color: blue; - margin-top: 2px; -} -.progressBarComplete { - width: 100%; - background-color: green; - visibility: hidden; -} -.progressBarError { - width: 100%; - background-color: red; - visibility: hidden; -} -.progressBarStatus { - margin-top: 2px; - width: 337px; - font-size: 7pt; - font-family: Verdana; - text-align: left; - white-space: nowrap; + #mysociety #map_box { + float: none; + margin: 0 auto; + } + #mysociety #mysociety { + max-width: none; + } + #mysociety #side { + margin-right: 0; + } } - - diff --git a/web/css/core.scss b/web/css/core.scss new file mode 100644 index 000000000..8bbebfce1 --- /dev/null +++ b/web/css/core.scss @@ -0,0 +1,503 @@ +$map_width: 500px; + +@mixin problem-banner { + margin: 0 $map_width + 30px 1em 0; + padding: 5px; + text-align: center; + position: relative; +} + +// Generics + +#mysociety { + + blockquote { + border-left: solid 4px #666666; + padding-left: 0.5em; + h2, p { + margin: 0; + } + } + + dt { + font-weight: bold; + margin-top: 0.5em; + } + + .gone { + color: #666666; + background-color: #cccccc; + } + + p.error { + text-align: center; + color: #cc0000; + font-size: larger; + } + + ul { + padding: 0 0 0 1.5em; + margin: 0; + } + + ul.error { + color: #cc0000; + background-color: #ffeeee; + padding-right: 4px; + text-align: left; + font-size: larger; + } + + div.form-error { + color: #cc0000; + margin: 5px 1em 5px 1em; + padding: 2px 5px 2px 5px; + float: left; + background-color: #ffeeee; + text-align: left; + } + + div.form-field { + clear: both; + } + + // Site-wide layout + + #advert_thin { + width: 50%; + margin: 1em auto; + border-top: dotted 1px #999999; + } + #advert_hfymp { + border-top: dotted 1px #999999; + text-align: center; + } + + // Front page + + p#expl { + text-align: center; + font-size: 150%; + margin: 0 2em; + } + + #postcodeForm { + display: table; + _width: 33em; + text-align: center; + font-size: 150%; + margin: 1em auto; + padding: 1em; + -moz-border-radius: 1em; + -webkit-border-radius: 1em; + border-radius: 1em; + + label { + float: none; + padding-right: 0; + } + + #submit { + font-size: 83%; + } + } + + #front_intro { + float: left; + width: 48%; + + p { + clear: both; + margin-top: 0; + } + } + + #front_stats div { + text-align: center; + width: 5.5em; + -moz-border-radius: 0.5em; + -webkit-border-radius: 0.5em; + border-radius: 0.5em; + float: left; + margin: 0 1em 1em; + + big { + font-size: 150%; + display: block; + } + } + + #front_recent { + float: right; + width: 48%; + margin-bottom: 1em; + } + #front_recent img, #alert_recent img { + margin-right: 0.25em; + margin-bottom: 0.25em; + } + #front_recent > h2:first-child, #front_intro > h2:first-child { + margin-top: 0; + } + + // Forms + + form { + margin: 0; + } + + label { + float: left; + text-align: right; + padding-right: 0.5em; + width: 5em; + } + + fieldset, #fieldset { + border: none; + padding: 0.5em; + div { + margin-top: 2px; + clear: left; + } + } + + legend { + display: none; + } + + #fieldset div.checkbox, #problem_submit { + padding-left: 5.5em; + } + #fieldset div.checkbox label, label.n { + float: none; + text-align: left; + padding-right: 0; + width: auto; + cursor: pointer; + cursor: hand; + } + + #questionnaire label, #alerts label { + float: none; + } + + .confirmed { + background-color: #ccffcc; + border: solid 2px #009900; + padding: 5px; + text-align: center; + } + + // Map + + #watermark { + background: url("/i/mojwatermark6.png"); + height: 113px; + width: 231px; + position: absolute; + bottom: 0; + right: 0; + } + + #map_box { + float: right; + width: $map_width + 2px; + position: relative; + padding-left: 20px; + background-color: #ffffff; + } + + p#copyright { + float: right; + margin: 0 0 1em 0; + font-size: 78%; + } + + #map { + border: solid 1px #000000; + width: $map_width; // Twice a tile width + height: $map_width; + overflow: hidden; + position: relative; + background-color: #f1f1f1; + } + + #drag { + position: absolute; + width: $map_width; + height: $map_width; + right: 0; + top: 0; + + input, img { + position: absolute; + border: none; + } + input { + cursor: crosshair; + background-color: #cccccc; + } + img { + cursor: move; + } + img.pin { + z-index: 100; + background-color: inherit; + } + a img.pin { + cursor: pointer; + cursor: hand; + } + } + + form#mapForm #map { + cursor: pointer; + } + + form#mapForm .olTileImage { + cursor: crosshair; + } + + #compass { + background-color: #ffffff; + border: solid 1px #000000; + border-width: 0 1px 1px 0; + color: #000000; + position: absolute; + top: 0px; + left: 0px; + img { + border: 0; + } + } + + #text_map { + margin-top: 0.5em; + margin-bottom: 1em; + font-size: 110%; + } + #text_no_map { + margin-top: 0; + // background-color: #ffeecc; + // padding: 4px; + } + + #sub_map_links { + float: right; + clear: right; + margin-top: 0; + } + + // Problem pages + + #fixed { + @include problem-banner; + background-color: #ccffcc; + border: solid 2px #009900; + } + + #unknown { + @include problem-banner; + background-color: #ffcccc; + border: solid 2px #990000; + } + + #updates { + div { + padding: 0 0 0.5em; + margin: 0 0 0.25em; + border-bottom: dotted 1px #5e552b; + + .problem-update, .update-text { + padding: 0; + margin: 0; + border-bottom: 0; + } + } + + p { + margin: 0; + } + } + + #nearby_lists h2 { + margin-top: 0.5em; + margin-bottom: 0; + } + #alert_links { + float: right; + } + #alert_links_area { + background-color: #ffeecc; + border: solid 1px #ff9900; + border-width: 1px 0; + padding: 3px 10px; + // padding: 0 3px; + margin: 0; + } + #rss_alert { + text-decoration: none; + span { + text-decoration: underline; + } + } + #email_alert { + } + #email_alert_box { + display:none; + position: absolute; + padding: 3px; + font-size:83%; + border:solid 1px #7399C3; + background-color: #eeeeff; + color: #000000; + } + #email_alert_box p { + margin: 0; + } + + .council_sent_info { + font-size: smaller; + } + + // RSS feed XSL + + #rss_items { + width:62%; + float:left; + } + #rss_rhs { + border-left:1px dashed #999; + width:36%; + float:right; + padding: 0 0 0 0.5em; + margin: 0 0 1em 0.5em; + } + #rss_box { + padding:10px; + border:1px solid #999999; + } + + // Alerts + #rss_feed { + list-style-type: none; + margin-bottom: 2em; + } + #rss_feed li { + margin-bottom: 1em; + } + #alert_or { + font-style: italic; + font-size: 125%; + margin: 0; + } + #rss_list { + float: left; + width: 47%; + } + #rss_list ul { + list-style-type: none; + } + #rss_buttons { + float: right; + width: 35%; + text-align: center; + margin-bottom: 2em; + } + #rss_local { + margin-left: 1.5em; + margin-bottom: 0; + } + #rss_local_alt { + margin: 0 0 2em 4em; + } + + #alert_photos { + text-align: center; + float: right; + width: 150px; + margin-left: 0.5em; + } + #alert_photos h2 { + font-size: 100%; + } + #alert_photos img { + margin-bottom: 0.25em; + } + + // Report page + + #col_problems, #col_fixed { + float: left; + width: 48%; + margin-right: 1em; + } + + // Contact page + .contact-details { + font-size: 80%; + margin-top: 2em; + } + + // File upload + // .progressContainer { + // margin: 5px; + // padding: 4px; + // width: 357px; + // border: solid 1px #E8E8E8; + // background-color: #F7F7F7; + // overflow: hidden; + // } + // .red { border: solid 1px #B50000; background-color: #FFEBEB; } + // .green { border: solid 1px #DDF0DD; background-color: #EBFFEB; } + // .blue { border: solid 1px #CEE2F2; background-color: #F0F5FF; } + + // .progressName { + // font-size: 8pt; + // font-weight: bold; + // color: #555555; + // width: 323px; + // height: 14px; + // text-align: left; + // white-space: nowrap; + // overflow: hidden; + // } + // .progressBarInProgress, .progressBarComplete, .progressBarError { + // font-size: 0px; + // width: 0%; + // height: 2px; + // background-color: blue; + // margin-top: 2px; + // } + // .progressBarComplete { + // width: 100%; + // background-color: green; + // visibility: hidden; + // } + // .progressBarError { + // width: 100%; + // background-color: red; + // visibility: hidden; + // } + // .progressBarStatus { + // margin-top: 2px; + // width: 337px; + // font-size: 7pt; + // font-family: Verdana; + // text-align: left; + // white-space: nowrap; + // } + +} + +// Printing, SCSS doesn't handle @media nesting + +@media print { + #mysociety { + #map_box { float: none; margin: 0 auto; } + #mysociety { max-width: none; } + #side { margin-right: 0; } + } +} + diff --git a/web/css/ie6-378.css b/web/css/ie6-378.css index e22f519ff..83efdb634 100644 --- a/web/css/ie6-378.css +++ b/web/css/ie6-378.css @@ -1,4 +1,4 @@ -#watermark { +#mysociety #watermark { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mojwatermark-378.png',sizingMethod='scale'); } diff --git a/web/css/ie6.css b/web/css/ie6.css index 051a117db..3bb91aa31 100644 --- a/web/css/ie6.css +++ b/web/css/ie6.css @@ -1,4 +1,4 @@ -#watermark { +#mysociety #watermark { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mojwatermark6.png',sizingMethod='scale'); } @@ -16,3 +16,7 @@ right: 10px; cursor: pointer; } + +#emptyhomes-footer { + zoom: 1; +} diff --git a/web/css/main.css b/web/css/main.css index f1d416773..ddea37970 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -1,146 +1,134 @@ -/* Generics */ +a:link { + color: #0000ff; +} +a:visited { + color: #000099; +} +a:hover, a:active { + color: #ff0000; +} body { - font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif; - margin: 0; - padding: 0; - /* color: #a9aeb0; */ + font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; } h1 { - margin: 0; - font-size: 175%; + margin: 0; + font-size: 175%; } + h2 { - font-size: 140%; + font-size: 140%; } select, input, textarea { - font-size: 99%; + font-size: 99%; } -a:link { - color: #0000ff; +#mysociety a.unsuitable-report { + font-size: small; } -a:visited { - color: #000099; -} -a:hover, a:active { - color: #ff0000; +#mysociety blockquote { + border-left: solid 4px #5e552b; } - -a.unsuitable-report { - font-size: small; +#mysociety .a { + color: #000000; + background-color: #f3e5a5; } - -blockquote { - border-left: solid 4px #5e552b; +#mysociety #postcodeForm { + background-color: #e3d595; } - -.a { - color: #000000; - background-color: #f3e5a5; +#mysociety #front_stats div { + background-color: #e3d595; } -/* Site layout */ - #header { - font-size: 200%; - font-weight: bold; - border-bottom: solid 2px #5e552b; - margin: 0; - padding: 0.15em 0.5em; - background-color: #e3d595; - color: #5e552b; + font-size: 200%; + font-weight: bold; + border-bottom: solid 2px #5e552b; + margin: 0; + padding: 0.15em 0.5em; + background-color: #e3d595; + color: #5e552b; } - -#my { - color: #4e451b; - background-color: #e3d595; -} -#beta { - color: #6e653b; - background-color: #e3d595; - font-size: 50%; - font-style: italic; -} - #header a:link, #header a:visited { - color: #5e552b; - background-color: #e3d595; - text-decoration: none; + color: #5e552b; + background-color: #e3d595; + text-decoration: none; } #header a:active, #header a:hover { - text-decoration: underline; + text-decoration: underline; } -#content { - width: 100%; /* Must specify a width or IE goes crazy wrong! */ - position: relative; - margin: 0 auto; - max-width: 60em; +#my { + color: #4e451b; + background-color: #e3d595; +} + +#mysociety { + width: 100%; + /* Must specify a width or IE goes crazy wrong! */ + position: relative; + margin: 0 auto; + max-width: 60em; } -/* Can't put the margin in #content because of above IE craziness */ +/* Can't put the margin in #mysociety because of above IE craziness */ #wrapper { - margin: 2em; + margin: 2em; +} + +.v { + display: none; } #navigation { - position: absolute; - top: 1em; - right: 1em; - padding: 0; - margin: 0; - list-style-type: none; + position: absolute; + top: 1em; + right: 1em; + padding: 0; + margin: 0; + list-style-type: none; } #navigation li { - display: inline; - padding: 0; - margin: 0; + display: inline; + padding: 0; + margin: 0; } - #navigation a { - display: -moz-inline-box; - display: inline-block; - padding: 0.4em 1em; + display: -moz-inline-box; + display: inline-block; + padding: 0.4em 1em; } #navigation a:link, #navigation a:visited { - color: #5e552b; + color: #5e552b; } #navigation a:hover, #navigation a:active { - background-color: #5e552b; - color: #e3d595; + background-color: #5e552b; + color: #e3d595; } #nav_new a { - background-image: url("/i/new.png"); - background-repeat: no-repeat; - background-position: 100% 0; + background-image: url("/i/new.png"); + background-repeat: no-repeat; + background-position: 100% 0; } #logo { - border: none; - position: absolute; - top: 3.3em; - right: 10px; + border: none; + position: absolute; + top: 3.3em; + right: 10px; } #footer { - clear: both; - text-align: right; - font-size: 83%; - border-top: solid 1px #5e552b; - display: table; - margin: 2em 0 1em auto; - padding: 2px 4px; -} - -#postcodeForm { - background-color: #e3d595; + clear: both; + text-align: right; + font-size: 83%; + border-top: solid 1px #5e552b; + display: table; + margin: 2em 0 1em auto; + padding: 2px 4px; } - -#front_stats div { - background-color: #e3d595; -} - diff --git a/web/css/main.scss b/web/css/main.scss new file mode 100644 index 000000000..bcebc2bd0 --- /dev/null +++ b/web/css/main.scss @@ -0,0 +1,14 @@ +// Generics + +$header_back: #e3d595; +$header_back_lighter: #f3e5a5; +$header_colour: #5e552b; +$header_darker: #4e451b; + +a { + &:link { color: #0000ff; } + &:visited { color: #000099; } + &:hover, &:active { color: #ff0000; } +} + +@import "_main"; |