diff options
Diffstat (limited to 'views/default/css/elements')
| -rw-r--r-- | views/default/css/elements/buttons.php | 156 | ||||
| -rw-r--r-- | views/default/css/elements/chrome.php | 130 | ||||
| -rw-r--r-- | views/default/css/elements/components.php (renamed from views/default/css/elements/layout_objects.php) | 178 | ||||
| -rw-r--r-- | views/default/css/elements/core.php | 117 | ||||
| -rw-r--r-- | views/default/css/elements/forms.php | 461 | ||||
| -rw-r--r-- | views/default/css/elements/grid.php | 23 | ||||
| -rw-r--r-- | views/default/css/elements/helpers.php | 51 | ||||
| -rw-r--r-- | views/default/css/elements/icons.php | 306 | ||||
| -rw-r--r-- | views/default/css/elements/layout.php | 121 | ||||
| -rw-r--r-- | views/default/css/elements/misc.php | 246 | ||||
| -rw-r--r-- | views/default/css/elements/modules.php | 78 | ||||
| -rw-r--r-- | views/default/css/elements/navigation.php | 453 | ||||
| -rw-r--r-- | views/default/css/elements/page_layout.php | 174 | ||||
| -rw-r--r-- | views/default/css/elements/reset.php | 6 | ||||
| -rw-r--r-- | views/default/css/elements/typography.php | 132 |
15 files changed, 1593 insertions, 1039 deletions
diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php new file mode 100644 index 000000000..e9c99cf96 --- /dev/null +++ b/views/default/css/elements/buttons.php @@ -0,0 +1,156 @@ +<?php +/** + * CSS buttons + * + * @package Elgg.Core + * @subpackage UI + */ +?> +/* ************************** + BUTTONS +************************** */ + +/* Base */ +.elgg-button { + font-size: 14px; + font-weight: bold; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + width: auto; + padding: 2px 4px; + cursor: pointer; + outline: none; + + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); +} +a.elgg-button { + padding: 3px 6px; +} + +/* Submit: This button should convey, "you're about to take some definitive action" */ +.elgg-button-submit { + color: white; + text-shadow: 1px 1px 0px black; + text-decoration: none; + border: 1px solid #4690d6; + background: #4690d6 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; +} + +.elgg-button-submit:hover { + border-color: #0054a7; + text-decoration: none; + color: white; + background: #0054a7 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; +} + +.elgg-button-submit.elgg-state-disabled { + background: #999; + border-color: #999; + cursor: default; +} + +/* Cancel: This button should convey a negative but easily reversible action (e.g., turning off a plugin) */ +.elgg-button-cancel { + color: #333; + background: #ddd url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; + border: 1px solid #999; +} +.elgg-button-cancel:hover { + color: #444; + background-color: #999; + background-position: left 10px; + text-decoration: none; +} + +/* Action: This button should convey a normal, inconsequential action, such as clicking a link */ +.elgg-button-action { + background: #ccc url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif) repeat-x 0 0; + border:1px solid #999; + color: #333; + padding: 2px 15px; + text-align: center; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px 0 white; + cursor: pointer; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.elgg-button-action:hover, +.elgg-button-action:focus { + background: #ccc url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif) repeat-x 0 -15px; + color: #111; + text-decoration: none; + border: 1px solid #999; +} + +/* Delete: This button should convey "be careful before you click me" */ +.elgg-button-delete { + color: #bbb; + text-decoration: none; + border: 1px solid #333; + background: #555 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; + text-shadow: 1px 1px 0px black; +} +.elgg-button-delete:hover { + color: #999; + background-color: #333; + background-position: left 10px; + text-decoration: none; +} + +.elgg-button-dropdown { + padding:3px 6px; + text-decoration:none; + display:block; + font-weight:bold; + position:relative; + margin-left:0; + color: white; + border:1px solid #71B9F7; + + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + + -webkit-box-shadow: 0 0 0; + -moz-box-shadow: 0 0 0; + box-shadow: 0 0 0; + + /*background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png); + background-position:-150px -51px; + background-repeat:no-repeat;*/ +} + +.elgg-button-dropdown:after { + content: " \25BC "; + font-size:smaller; +} + +.elgg-button-dropdown:hover { + background-color:#71B9F7; + text-decoration:none; +} + +.elgg-button-dropdown.elgg-state-active { + background: #ccc; + outline: none; + color: #333; + border:1px solid #ccc; + + -webkit-border-radius:4px 4px 0 0; + -moz-border-radius:4px 4px 0 0; + border-radius:4px 4px 0 0; +} diff --git a/views/default/css/elements/chrome.php b/views/default/css/elements/chrome.php deleted file mode 100644 index a9b82d41d..000000000 --- a/views/default/css/elements/chrome.php +++ /dev/null @@ -1,130 +0,0 @@ -<?php -/** - * Visual styling - * - * @package Elgg.Core - * @subpackage UI - */ - -/* Colors: - - #4690D6 - elgg light blue - #0054A7 - elgg dark blue - #e4ecf5 - elgg very light blue -*/ - -?> - -a { - color: #4690D6; -} -a:hover, -a.selected { - color: #555555; -} -a:hover, -a.selected { - text-decoration: underline; -} -h1, h2, h3, h4, h5, h6 { - color: #0054A7; -} -p { - margin-bottom: 15px; -} -p:last-child { - margin-bottom: 0; -} - -dt { - font-weight: bold; -} -dd { - margin: 0 0 1em 1em; -} -pre, code { - background:#EBF5FF; - color:#000000; - overflow:auto; - - overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ - - white-space: pre-wrap; - word-wrap: break-word; /* IE 5.5-7 */ -} -code { - padding:2px 3px; -} -pre { - padding:3px 15px; - margin:0px 0 15px 0; - line-height:1.3em; -} -blockquote { - padding:3px 15px; - margin:0px 0 15px 0; - background:#EBF5FF; - border:none; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; -} - -h2 { - padding-bottom:5px; -} - -.elgg-quiet { - color: #666666; -} - -.elgg-loud { - color: #0054A7; -} - -<?php //@todo remove ?> -.radius8 { - -webkit-border-radius: 8px; - -moz-border-radius: 8px; -} - -/* *************************************** - Borders (inspired by OOCSS) - b<location><type> -*************************************** */ - -<?php //@todo style is 'a' or 'b' because I didn't want to think of something cooler ?> -/* a */ -.bta, .bva, .baa {border-top: 1px solid #ccc} -.bba, .bva, .baa {border-bottom: 1px solid #ccc} -.bla, .bha, .baa {border-left: 1px solid #ccc} -.bra, .bha, .baa {border-right: 1px solid #ccc} - -/* b */ -.btb, .bvb, .bab {border-top: 1px solid #eee} -.bbb, .bvb, .bab {border-bottom: 1px solid #eee} -.blb, .bhb, .bab {border-left: 1px solid #eee} -.brb, .bhb, .bab {border-right: 1px solid #eee} - -.elgg-text ul, ol { - margin: 0 1.5em 1.5em 0; - padding-left: 1.5em; -} -.elgg-text ul { - list-style-type: disc; -} -.elgg-text ol { - list-style-type: decimal; -} - -.elgg-subtext { - color: #666666; - font-size: 85%; - line-height: 1.2em; - font-style: italic; -} - -.elgg-photo { - border: 1px solid #ccc; - padding: 3px; - background-color: white; -} diff --git a/views/default/css/elements/layout_objects.php b/views/default/css/elements/components.php index cc733ea06..7fe535d57 100644 --- a/views/default/css/elements/layout_objects.php +++ b/views/default/css/elements/components.php @@ -7,37 +7,9 @@ * @package Elgg.Core * @subpackage UI */ -/** - * elgg-body fills the space available to it. - * It uses hidden text to expand itself. The combination of auto width, overflow - * hidden, and the hidden text creates this effect. - * - * This allows us to float fixed width divs to either side of an .elgg-body div - * without having to specify the body div's width. - * - * @todo check what happens with long <pre> tags or large images - * @todo Move this to its own file -- it is very complicated and should not have to be overridden. - */ ?> /* *************************************** - Body -*************************************** */ -.elgg-body { - width: auto; - word-wrap: break-word; - overflow: hidden; -} -.elgg-body:after { - display: block; - visibility: hidden; - height: 0 !important; - line-height: 0; - font-size: xx-large; - content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "; -} - -/* *************************************** Image Block *************************************** */ .elgg-image-block { @@ -63,25 +35,11 @@ .elgg-list > li { border-bottom: 1px dotted #CCCCCC; } -.elgg-list-metadata { - float: right; - margin-left: 15px; - font-size: 90%; -} -.elgg-list-metadata > li { - float: left; - margin-left: 15px; -} -.elgg-list-metadata, .elgg-list-metadata a { - color: #aaaaaa; -} -.elgg-list-item .elgg-subtext { - margin-bottom: 5px; -} -.elgg-tags { + +.elgg-item .elgg-subtext { margin-bottom: 5px; } -.elgg-list-content { +.elgg-item .elgg-content { margin: 10px 5px; } @@ -96,34 +54,44 @@ .elgg-gallery td { padding: 5px; } +.elgg-gallery-fluid > li { + float: left; +} +.elgg-gallery-users > li { + margin: 0 2px; +} /* *************************************** Tables *************************************** */ .elgg-table { width: 100%; - border-top: 1px solid #cccccc; + border-top: 1px solid #ccc; } .elgg-table td, .elgg-table th { padding: 4px 8px; - border: 1px solid #cccccc; + border: 1px solid #ccc; } .elgg-table th { - background-color: #dddddd; + background-color: #ddd; } .elgg-table tr:nth-child(odd), .elgg-table tr.odd { - background-color: #ffffff; + background-color: #fff; } .elgg-table tr:nth-child(even), .elgg-table tr.even { background-color: #f0f0f0; } .elgg-table-alt { width: 100%; - border-top: 1px solid #cccccc; + border-top: 1px solid #ccc; +} +.elgg-table-alt th { + background-color: #eee; + font-weight: bold; } -.elgg-table-alt td { +.elgg-table-alt td, .elgg-table-alt th { padding: 2px 4px 2px 4px; - border-bottom: 1px solid #cccccc; + border-bottom: 1px solid #ccc; } .elgg-table-alt td:first-child { width: 200px; @@ -138,11 +106,6 @@ .elgg-owner-block { margin-bottom: 20px; } -.elgg-owner-block-menu li { - float: left; - width: 50%; - font-size: 90%; -} /* *************************************** Messages @@ -154,10 +117,14 @@ padding: 3px 10px; cursor: pointer; opacity: 0.9; + -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); + -webkit-border-radius: 8px; -moz-border-radius: 8px; + border-radius: 8px; } .elgg-state-success { background-color: black; @@ -172,11 +139,11 @@ /* *************************************** River *************************************** */ -.elgg-river { - border-top: 1px solid #CCCCCC; +.elgg-list-river { + border-top: 1px solid #CCC; } -.elgg-river > li { - border-bottom: 1px solid #CCCCCC; +.elgg-list-river > li { + border-bottom: 1px solid #CCC; } .elgg-river-item { padding: 7px 0; @@ -185,21 +152,23 @@ margin-right: 20px; } .elgg-river-timestamp { - color: #666666; + color: #666; font-size: 85%; font-style: italic; line-height: 1.2em; } + +.elgg-river-attachments, +.elgg-river-message, .elgg-river-content { - border-left: 1px solid #CCCCCC; + border-left: 1px solid #CCC; font-size: 85%; line-height: 1.5em; margin: 8px 0 5px 0; padding-left: 5px; } - -<?php //@todo location-dependent styles ?> -.elgg-river-content .elgg-avatar { +.elgg-river-attachments .elgg-avatar, +.elgg-river-attachments .elgg-icon { float: left; } .elgg-river-layout .elgg-input-dropdown { @@ -207,39 +176,38 @@ margin: 10px 0; } -<?php //@todo do we need another elgg-tabs extension? ?> .elgg-river-comments-tab { display: block; - background-color: #EEEEEE; + background-color: #EEE; color: #4690D6; margin-top: 5px; width: auto; float: right; font-size: 85%; padding: 1px 7px; - -moz-border-radius-topleft: 5px; - -moz-border-radius-topright: 5px; - -webkit-border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } -<?php //@todo lists.php ?> +<?php //@todo components.php ?> .elgg-river-comments { margin: 0; border-top: none; } .elgg-river-comments li:first-child { - -moz-border-radius-topleft: 5px; - -webkit-border-top-left-radius: 5px; + -webkit-border-radius: 5px 0 0; + -moz-border-radius: 5px 0 0; + border-radius: 5px 0 0; } .elgg-river-comments li:last-child { - -moz-border-radius-bottomleft: 5px; - -moz-border-radius-bottomright: 5px; - -webkit-border-bottom-right-radius: 5px; - -webkit-border-bottom-left-radius: 5px; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius-bottomleft: 0 0 5px 5px; + border-radius-bottomleft: 0 0 5px 5px; } .elgg-river-comments li { - background-color: #EEEEEE; + background-color: #EEE; border-bottom: none; padding: 4px; margin-bottom: 2px; @@ -248,9 +216,12 @@ padding: 0; } .elgg-river-more { - background-color: #EEEEEE; - -moz-border-radius: 5px; + background-color: #EEE; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding: 2px 4px; font-size: 85%; margin-bottom: 2px; @@ -258,11 +229,13 @@ <?php //@todo location-dependent styles ?> .elgg-river-item form { - background-color: #EEEEEE; - padding: 4px 4px; + background-color: #EEE; + padding: 4px; + -moz-border-radius: 5px; -webkit-border-radius: 5px; - display: none; + border-radius: 5px; + height: 30px; } .elgg-river-item input[type=text] { @@ -271,38 +244,41 @@ .elgg-river-item input[type=submit] { margin: 0 0 0 10px; } -.elgg-river-item > .elgg-image-alt a { - font-size: 90%; - float: right; - clear: both; + + +/* ************************************** + Comments (from elgg_view_comments) +************************************** */ +.elgg-comments { + margin-top: 25px; +} +.elgg-comments > form { + margin-top: 15px; } /* *************************************** - Likes + Image-related *************************************** */ -.elgg-likes-list { - width: 345px; - position: absolute; +.elgg-photo { + border: 1px solid #ccc; + padding: 3px; + background-color: white; } /* *************************************** Tags *************************************** */ .elgg-tags { - background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png); - background-repeat: no-repeat; - background-position: left -196px; - padding:1px 0 0 14px; font-size: 85%; } -.elgg-tags li { - display: inline; +.elgg-tags > li { + float:left; margin-right: 5px; } -.elgg-tags li:after { +.elgg-tags li.elgg-tag:after { content: ","; } -.elgg-tags li:last-child:after { +.elgg-tags li.elgg-tag:last-child:after { content: ""; } .elgg-tagcloud { diff --git a/views/default/css/elements/core.php b/views/default/css/elements/core.php new file mode 100644 index 000000000..74f21ee59 --- /dev/null +++ b/views/default/css/elements/core.php @@ -0,0 +1,117 @@ +<?php +/** + * Core CSS + * + * This file holds all the complicated/hacky stuff that you really + * shouldn't touch or override unless you're sure you know what you're doing. + * + * Provides classes that implement cross-browser support for the following features: + * * clearfix + * * fluid-width content area that doesn't wrap around floats + * * menu's with separators + * * inline-block + * * horizontal menus + * * fluid gallery without using tables + */ +?> + +/* Clearfix */ +.clearfix:after, +.elgg-grid:after, +.elgg-layout:after, +.elgg-inner:after, +.elgg-page-header:after, +.elgg-page-footer:after, +.elgg-head:after, +.elgg-foot:after, +.elgg-col:after, +.elgg-image-block:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Fluid width container that does not wrap floats */ +.elgg-body, +.elgg-col-last { + display: block; + width: auto; + word-wrap: break-word; + overflow: hidden; + + /* IE 6, 7 */ + zoom:1; + *overflow:visible; +} + +<?php +/** + * elgg-body fills the space available to it. + * It uses hidden text to expand itself. The combination of auto width, overflow + * hidden, and the hidden text creates this effect. + * + * This allows us to float fixed width divs to either side of an .elgg-body div + * without having to specify the body div's width. + * + * @todo check what happens with long <pre> tags or large images + * @todo Move this to its own file -- it is very complicated and should not have to be overridden. + */ + +//@todo isn't this only needed if we use display:table-cell? +?> +.elgg-body:after, +.elgg-col-last:after { + display: block; + visibility: hidden; + height: 0 !important; + line-height: 0; + overflow: hidden; + + /* Stretch to fill up available space */ + font-size: xx-large; + content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "; +} + +/* *************************************** + * MENUS + * + * To add separators to a menu: + * .elgg-menu-$menu > li:after {content: '|'; background: ...;} + *************************************** */ +/* Enabled nesting of dropdown/flyout menus */ +.elgg-menu > li { position: relative; } + +.elgg-menu > li:last-child::after { + display: none; +} + +/* Maximize click target */ +.elgg-menu > li > a { display: block } + +/* Horizontal menus w/ separator support */ +.elgg-menu-hz > li, +.elgg-menu-hz > li:after, +.elgg-menu-hz > li > a, +.elgg-menu-hz > li > span { + vertical-align: middle; +} + +/* Allow inline image blocks in horizontal menus */ +.elgg-menu-hz .elgg-body:after { content: '.'; } + +<?php //@todo This isn't going to work as-is. Needs testing ?> +/* Inline block */ +.elgg-gallery > li, +.elgg-button, +.elgg-icon, +.elgg-menu-hz > li, +.elgg-menu-hz > li:after, +.elgg-menu-hz > li > a, +.elgg-menu-hz > li > span { + /* Google says do this, but why? */ + position: relative; + + display: inline-block; +} diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php index b56aeddcb..068cc8fd6 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -1,6 +1,6 @@ <?php /** - * CSS form elements + * CSS form/input elements * * @package Elgg.Core * @subpackage UI @@ -10,40 +10,41 @@ /* *************************************** Form Elements *************************************** */ -<?php //@todo not comfortable with these... ?> fieldset > div { margin-bottom: 15px; } fieldset > div:last-child { margin-bottom: 0; } +.elgg-form-alt > fieldset > .elgg-foot { + border-top: 1px solid #CCC; + padding: 10px 0; +} label { font-weight: bold; - color: #333333; + color: #333; font-size: 110%; } input, textarea { + border: 1px solid #ccc; + color: #666; font: 120% Arial, Helvetica, sans-serif; - color: #666666; - padding: 5px; - - border: 1px solid #cccccc; + width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; - - width: 100%; - -moz-box-sizing: border-box; + border-radius: 5px; -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; } -input:focus, textarea:focus { +input[type=text]:focus, textarea:focus { border: solid 1px #4690d6; background: #e4ecf5; - color:#333333; + color:#333; } textarea { @@ -51,7 +52,7 @@ textarea { } -a.elgg-longtext-control { +.elgg-longtext-control { float: right; margin-left: 14px; font-size: 80%; @@ -68,201 +69,307 @@ input[type="radio"] { margin:0 3px 0 0; padding:0; border:none; + border-radius:0; width:auto; } .elgg-input-checkboxes.elgg-horizontal li, -.elgg-input-radio.elgg-horizontal li { +.elgg-input-radios.elgg-horizontal li { display: inline; padding-right: 10px; } -input[type="submit"], -input[type="button"], -.elgg-button { - font-size: 14px; - font-weight: bold; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - width: auto; - padding: 2px 4px; - margin: 10px 0 10px 0; - cursor: pointer; - outline: none; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40); +.elgg-form-login, .elgg-form-account { + max-width: 450px; } -input[type="submit"], -.elgg-button-submit { - color: white; - text-shadow: 1px 1px 0px black; - text-decoration: none; - border: 1px solid #4690d6; - background-color: #4690d6; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; -} -input[type="submit"]:hover, -.elgg-button-submit:hover { - border-color: #0054a7; - text-decoration: none; - color: white; - background-color: #0054a7; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; -} -.elgg-button-cancel { - color: #333333; - background-color: #dddddd; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png); - background-repeat: repeat-x; - background-position: left 10px; - border: 1px solid #999999; -} -.elgg-button-cancel:hover { - color: white; - background-color: #999999; - background-position: left 10px; - text-decoration: none; + +/* *************************************** + FRIENDS PICKER +*************************************** */ +.friends-picker-main-wrapper { + margin-bottom: 15px; } -.elgg-button-action { - background-color:#cccccc; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif); - background-repeat: repeat-x; - background-position: 0 0; - border:1px solid #999999; - color: #333333; - padding: 2px 15px 2px 15px; - text-align: center; +.friends-picker-container h3 { + font-size:4em !important; + text-align: left; + margin:10px 0 20px !important; + color:#999 !important; + background: none !important; + padding:0 !important; +} +.friends-picker .friends-picker-container .panel ul { + text-align: left; + margin: 0; + padding:0; +} +.friends-picker-wrapper { + margin: 0; + padding:0; + position: relative; + width: 730px; +} +.friends-picker { + position: relative; + overflow: hidden; + margin: 0; + padding:0; + width: 730px; + height: auto; + background-color: #dedede; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; +} +.friendspicker-savebuttons { + background: white; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + margin:0 10px 10px; +} +.friends-picker .friends-picker-container { /* long container used to house end-to-end panels. Width is calculated in JS */ + position: relative; + left: 0; + top: 0; + width: 100%; + list-style-type: none; +} +.friends-picker .friends-picker-container .panel { + float:left; + height: 100%; + position: relative; + width: 730px; + margin: 0; + padding:0; +} +.friends-picker .friends-picker-container .panel .wrapper { + margin: 0; + padding:4px 10px 10px 10px; + min-height: 230px; +} +.friends-picker-navigation { + margin: 0 0 10px; + padding:0 0 10px; + border-bottom:1px solid #ccc; +} +.friends-picker-navigation ul { + list-style: none; + padding-left: 0; +} +.friends-picker-navigation ul li { + float: left; + margin:0; + background:white; +} +.friends-picker-navigation a { font-weight: bold; + text-align: center; + background: white; + color: #999; text-decoration: none; - text-shadow: 0 1px 0 white; - cursor: pointer; + display: block; + padding: 0; + width:20px; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.tabHasContent { + background: white; + color:#333 !important; +} +.friends-picker-navigation li a:hover { + background: #333; + color:white !important; +} +.friends-picker-navigation li a.current { + background: #4690D6; + color:white !important; +} +.friends-picker-navigation-l, .friends-picker-navigation-r { + position: absolute; + top: 46px; + text-indent: -9000em; +} +.friends-picker-navigation-l a, .friends-picker-navigation-r a { + display: block; + height: 40px; + width: 40px; +} +.friends-picker-navigation-l { + right: 48px; + z-index:1; +} +.friends-picker-navigation-r { + right: 0; + z-index:1; +} +.friends-picker-navigation-l { + background: url("<?php echo elgg_get_site_url(); ?>_graphics/friendspicker.png") no-repeat left top; +} +.friends-picker-navigation-r { + background: url("<?php echo elgg_get_site_url(); ?>_graphics/friendspicker.png") no-repeat -60px top; +} +.friends-picker-navigation-l:hover { + background: url("<?php echo elgg_get_site_url(); ?>_graphics/friendspicker.png") no-repeat left -44px; +} +.friends-picker-navigation-r:hover { + background: url("<?php echo elgg_get_site_url(); ?>_graphics/friendspicker.png") no-repeat -60px -44px; +} +.friendspicker-savebuttons .elgg-button-submit, +.friendspicker-savebuttons .elgg-button-cancel { + margin:5px 20px 5px 5px; +} +.friendspicker-members-table { + background: #dedede; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + margin:10px 0 0; + padding:10px 10px 0; +} + +/* *************************************** + AUTOCOMPLETE +*************************************** */ +<?php //autocomplete will expand to fullscreen without max-width ?> +.ui-autocomplete { + position: absolute; + cursor: default; +} +.elgg-autocomplete-item .elgg-body { + max-width: 600px; +} +.ui-autocomplete { + background-color: white; + border: 1px solid #ccc; + overflow: hidden; + -webkit-border-radius: 5px; -moz-border-radius: 5px; - -webkit-box-shadow: none; - -moz-box-shadow: none; + border-radius: 5px; +} +.ui-autocomplete .ui-menu-item { + padding: 0px 4px; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.ui-autocomplete .ui-menu-item:hover { + background-color: #eee; } -.elgg-button-action:hover, -.elgg-button-action:focus { - background-position: 0 -15px; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif); - background-repeat: repeat-x; - color: #111111; +.ui-autocomplete a:hover { text-decoration: none; - background-color: #cccccc; - border: 1px solid #999999; + color: #4690D6; } -/* -.elgg-button-submit.elgg-state-disabled { - background-color:#999999; - border-color:#999999; - color:#dedede; +.ui-autocomplete a.ui-state-hover { + background-color: #eee; + display: block; +} + +/* *************************************** + USER PICKER +*************************************** */ +.elgg-user-picker-list li:first-child { + border-top: 1px dotted #ccc; + margin-top: 5px; } -.elgg-button-submit.elgg-state-disabled:hover { - background-color:#999999; - border-color:#999999; - color:#dedede; +.elgg-user-picker-list > li { + border-bottom: 1px dotted #ccc; } -.elgg-button-action { - margin-left: 10px; +/* *************************************** + DATE PICKER +**************************************** */ +.ui-datepicker { + display: none; + + margin-top: 3px; + width: 208px; + background-color: white; + border: 1px solid #0054A7; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + overflow: hidden; + + -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); } -input.elgg-button-action, -a.elgg-button-action { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - background-color:#cccccc; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif); - background-repeat: repeat-x; - background-position: 0 0; - border:1px solid #999999; - color:#333333; - padding:2px 15px 2px 15px; - margin: 5px 0; - text-align:center; - font-weight:bold; - text-decoration:none; - text-shadow:0 1px 0 white; - cursor:pointer; +.ui-datepicker-inline { -webkit-box-shadow: none; -moz-box-shadow: none; + box-shadow: none; } -input.elgg-button-action:hover, -a.elgg-button-action:hover, -input.elgg-button-action:focus, -a.elgg-button-action:focus { - background-position:0 -15px; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif); - background-repeat: repeat-x; - color:#111111; - text-decoration: none; - background-color:#cccccc; - border:1px solid #999999; + +.ui-datepicker-header { + position: relative; + background: #4690D6; + color: white; + padding: 2px 0; + border-bottom: 1px solid #0054A7; } -.elgg-button-action:active { - background-image:none; +.ui-datepicker-header a { + color: white; } -.elgg-button-action.elgg-state-disabled { - color:#999999; - padding:2px 7px 2px 7px; +.ui-datepicker-prev, .ui-datepicker-next { + position: absolute; + top: 5px; + cursor: pointer; } -.elgg-button-action.elgg-state-disabled:hover { - background-position:0 -15px; - color:#111111; - border:1px solid #999999; +.ui-datepicker-prev { + left: 6px; } -.elgg-button-action.elgg-state-disabled:active { - background-image:none; +.ui-datepicker-next { + right: 6px; } -.elgg-button-action.download { - padding: 5px 9px 5px 6px; +.ui-datepicker-title { + line-height: 1.8em; + margin: 0 30px; + text-align: center; + font-weight: bold; } -.elgg-button-action.download:hover { - +.ui-datepicker-calendar { + margin: 4px; } -.elgg-button-action.download img { - margin-right:6px; - position:relative; - top:5px; -} -.elgg-button-action.small { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - width: auto; - height:8px; - padding: 4px; - font-size: 0.9em; - line-height: 0.6em; -} -.elgg-button-action.small:hover { - background-color: #4690d6; - background-image: none; - border-color: #4690d6; - color:white; - text-shadow:0 -1px 0 black; +.ui-datepicker th { + color: #0054A7; + border: none; + font-weight: bold; + padding: 5px 6px; + text-align: center; } - -*/ - -<?php //@todo prefix with elgg- ?> -/* small round delete button */ -.delete-button { - width:14px; - height:14px; - margin:0; - float:right; +.ui-datepicker td { + padding: 1px; } -.delete-button a { - display:block; - cursor: pointer; - width:14px; - height:14px; - background: url("<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png") no-repeat -200px top; - text-indent: -9000px; - text-align: left; +.ui-datepicker td span, .ui-datepicker td a { + display: block; + padding: 2px; + line-height: 1.2em; + text-align: right; + text-decoration: none; } -.delete-button a:hover { - background-position: -200px -16px; +.ui-datepicker-calendar .ui-state-default { + border: 1px solid #ccc; + color: #4690D6;; + background: #fafafa; +} +.ui-datepicker-calendar .ui-state-hover { + border: 1px solid #aaa; + color: #0054A7; + background: #eee; +} +.ui-datepicker-calendar .ui-state-active, +.ui-datepicker-calendar .ui-state-active.ui-state-hover { + font-weight: bold; + border: 1px solid #0054A7; + color: #0054A7; + background: #E4ECF5; } diff --git a/views/default/css/elements/grid.php b/views/default/css/elements/grid.php index 00cd448b9..fdbaf4aca 100644 --- a/views/default/css/elements/grid.php +++ b/views/default/css/elements/grid.php @@ -13,14 +13,6 @@ /* *************************************** GRID *************************************** */ -.elgg-grid:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - .elgg-col { float: left; } @@ -60,18 +52,3 @@ .elgg-col-5of6 { width: 83.33%; } -.elgg-col-last { - width: auto; - float: none; - display: table-cell; -} -.elgg-col-last:after { - clear: both; - display: block; - visibility: hidden; - overflow: hidden; - height: 0 !important; - line-height: 0; - font-size: xx-large; - content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "; -} diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php index ac13c0efc..e9a9e0a30 100644 --- a/views/default/css/elements/helpers.php +++ b/views/default/css/elements/helpers.php @@ -13,14 +13,6 @@ clear: both; } -.clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - .hidden { display: none; } @@ -33,27 +25,18 @@ text-align: center; } -.right { - float: right; +.float { + float: left; } -.left { - float: left; +.float-alt { + float: right; } .link { cursor: pointer; } -<?php @todo // do we need something like large and small? ?> -.large { - font-size: 120%; -} - -.small { - font-size: 80%; -} - .elgg-discover .elgg-discoverable { display: none; } @@ -62,6 +45,32 @@ display: block; } +.elgg-transition:hover { + opacity: .7; +} + +/* *************************************** + BORDERS AND SEPARATORS +*************************************** */ +.elgg-border-plain { + border: 1px solid #eeeeee; +} +.elgg-border-transition { + border: 1px solid #eeeeee; +} +.elgg-divide-top { + border-top: 1px solid #CCCCCC; +} +.elgg-divide-bottom { + border-bottom: 1px solid #CCCCCC; +} +.elgg-divide-left { + border-left: 1px solid #CCCCCC; +} +.elgg-divide-right { + border-right: 1px solid #CCCCCC; +} + /* *************************************** Spacing (from OOCSS) *************************************** */ diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php index b52503b57..9b12e0a57 100644 --- a/views/default/css/elements/icons.php +++ b/views/default/css/elements/icons.php @@ -16,67 +16,267 @@ background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat left; width: 16px; height: 16px; - display: block; - float: left; margin: 0 2px; } -.elgg-icon-settings { - background-position: -302px -44px; +.elgg-icon-arrow-left { + background-position: 0 -0px; } -.elgg-icon-friends { - background-position: 0 -300px; - width: 36px; +.elgg-icon-arrow-right { + background-position: 0 -18px; } -.elgg-icon-friends:hover { - background-position: 0 -340px; +.elgg-icon-arrow-two-head { + background-position: 0 -36px; } -.elgg-icon-help { - background-position: -302px -136px; +.elgg-icon-attention:hover { + background-position: 0 -54px; } -.elgg-icon-delete { - background-position: -199px 1px; +.elgg-icon-attention { + background-position: 0 -72px; +} +.elgg-icon-calendar { + background-position: 0 -90px; +} +.elgg-icon-cell-phone { + background-position: 0 -108px; +} +.elgg-icon-checkmark:hover { + background-position: 0 -126px; +} +.elgg-icon-checkmark { + background-position: 0 -144px; +} +.elgg-icon-clip:hover { + background-position: 0 -162px; +} +.elgg-icon-clip { + background-position: 0 -180px; +} +.elgg-icon-cursor-drag-arrow { + background-position: 0 -198px; +} +.elgg-icon-delete-alt:hover { + background-position: 0 -216px; +} +.elgg-icon-delete-alt { + background-position: 0 -234px; } .elgg-icon-delete:hover { - background-position: -199px -15px; + background-position: 0 -252px; } -.elgg-icon-likes { - background-position: 0px -101px; - width: 20px; - height: 20px; +.elgg-icon-delete { + background-position: 0 -270px; } -.elgg-icon-likes:hover { - background-position: 0px -131px; +.elgg-icon-download:hover { + background-position: 0 -288px; } -.elgg-icon-liked { - background-position: 0px -131px; - width: 20px; - height: 20px; +.elgg-icon-download { + background-position: 0 -306px; } -.elgg-icon-arrow-s { - background-position: -146px -56px; +.elgg-icon-eye { + background-position: 0 -324px; } -.elgg-icon-arrow-s:hover { - background-position: -146px -76px; +.elgg-icon-facebook { + background-position: 0 -342px; } -.elgg-icon-following { - background-position: -35px -100px; - width: 22px; - height: 20px; +.elgg-icon-grid:hover { + background-position: 0 -360px; } -.elgg-icon-rss { - background-position: -249px 1px; +.elgg-icon-grid { + background-position: 0 -378px; } -.elgg-icon-hover-menu { - background-position: -150px 0; +.elgg-icon-home:hover { + background-position: 0 -396px; +} +.elgg-icon-home { + background-position: 0 -414px; } .elgg-icon-hover-menu:hover { - background-position: -150px -32px; + background-position: 0 -432px; +} +.elgg-icon-hover-menu { + background-position: 0 -450px; +} +.elgg-icon-info:hover { + background-position: 0 -468px; +} +.elgg-icon-info { + background-position: 0 -486px; +} +.elgg-icon-link:hover { + background-position: 0 -504px; +} +.elgg-icon-link { + background-position: 0 -522px; +} +.elgg-icon-list { + background-position: 0 -540px; +} +.elgg-icon-lock-closed { + background-position: 0 -558px; +} +.elgg-icon-lock-open { + background-position: 0 -576px; +} +.elgg-icon-mail-alt:hover { + background-position: 0 -594px; +} +.elgg-icon-mail-alt { + background-position: 0 -612px; +} +.elgg-icon-mail:hover { + background-position: 0 -630px; +} +.elgg-icon-mail { + background-position: 0 -648px; +} +.elgg-icon-photo { + background-position: 0 -666px; +} +.elgg-icon-print-alt { + background-position: 0 -684px; +} +.elgg-icon-print { + background-position: 0 -702px; +} +.elgg-icon-push-pin-alt { + background-position: 0 -720px; +} +.elgg-icon-push-pin { + background-position: 0 -738px; +} +.elgg-icon-redo { + background-position: 0 -756px; +} +.elgg-icon-refresh:hover { + background-position: 0 -774px; +} +.elgg-icon-refresh { + background-position: 0 -792px; +} +.elgg-icon-round-arrow-left { + background-position: 0 -810px; +} +.elgg-icon-round-arrow-right { + background-position: 0 -828px; +} +.elgg-icon-round-checkmark { + background-position: 0 -846px; +} +.elgg-icon-round-minus { + background-position: 0 -864px; +} +.elgg-icon-round-plus { + background-position: 0 -882px; } -.elgg-icon-dragger { - background-position: -302px -186px; - width: 21px; - height: 21px; +.elgg-icon-rss { + background-position: 0 -900px; +} +.elgg-icon-search-focus { + background-position: 0 -918px; +} +.elgg-icon-search { + background-position: 0 -936px; +} +.elgg-icon-settings-alt:hover { + background-position: 0 -954px; +} +.elgg-icon-settings-alt { + background-position: 0 -972px; +} +.elgg-icon-settings { + background-position: 0 -990px; +} +.elgg-icon-share:hover { + background-position: 0 -1008px; +} +.elgg-icon-share { + background-position: 0 -1026px; +} +.elgg-icon-shop-cart:hover { + background-position: 0 -1044px; +} +.elgg-icon-shop-cart { + background-position: 0 -1062px; +} +.elgg-icon-speech-bubble-alt:hover { + background-position: 0 -1080px; +} +.elgg-icon-speech-bubble-alt { + background-position: 0 -1098px; +} +.elgg-icon-speech-bubble:hover { + background-position: 0 -1116px; +} +.elgg-icon-speech-bubble { + background-position: 0 -1134px; +} +.elgg-icon-star-alt { + background-position: 0 -1152px; +} +.elgg-icon-star-empty:hover { + background-position: 0 -1170px; +} +.elgg-icon-star-empty { + background-position: 0 -1188px; +} +.elgg-icon-star:hover { + background-position: 0 -1206px; +} +.elgg-icon-star { + background-position: 0 -1224px; +} +.elgg-icon-tag:hover { + background-position: 0 -1242px; } +.elgg-icon-tag { + background-position: 0 -1260px; +} +.elgg-icon-thumbs-down-alt:hover { + background-position: 0 -1278px; +} +.elgg-icon-thumbs-down:hover, +.elgg-icon-thumbs-down-alt { + background-position: 0 -1296px; +} +.elgg-icon-thumbs-down { + background-position: 0 -1314px; +} +.elgg-icon-thumbs-up-alt:hover { + background-position: 0 -1332px; +} +.elgg-icon-thumbs-up:hover, +.elgg-icon-thumbs-up-alt { + background-position: 0 -1350px; +} +.elgg-icon-thumbs-up { + background-position: 0 -1368px; +} +.elgg-icon-trash { + background-position: 0 -1386px; +} +.elgg-icon-twitter { + background-position: 0 -1404px; +} +.elgg-icon-undo { + background-position: 0 -1422px; +} +.elgg-icon-user:hover { + background-position: 0 -1440px; +} +.elgg-icon-user { + background-position: 0 -1458px; +} +.elgg-icon-users:hover { + background-position: 0 -1476px; +} +.elgg-icon-users { + background-position: 0 -1494px; +} +.elgg-icon-video { + background-position: 0 -1512px; +} + + .elgg-avatar > .elgg-icon-hover-menu { display: none; position: absolute; @@ -87,12 +287,9 @@ } .elgg-ajax-loader { - background-color: white; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/ajax_loader_bw.gif); - background-repeat: no-repeat; - background-position: center center; - min-height: 33px; - min-width: 33px; + background: white url(<?php echo elgg_get_site_url(); ?>_graphics/ajax_loader_bw.gif) no-repeat center center; + min-height: 31px; + min-width: 31px; } /* *************************************** @@ -100,6 +297,7 @@ *************************************** */ .elgg-avatar { position: relative; + display: inline-block; } .elgg-avatar > a > img { display: block; @@ -107,28 +305,38 @@ .elgg-avatar-tiny > a > img { width: 25px; height: 25px; + /* remove the border-radius if you don't want rounded avatars in supported browsers */ -webkit-border-radius: 3px; -moz-border-radius: 3px; + border-radius: 3px; + -moz-background-clip: border; + background-clip: border; - -o-background-size: 25px; -webkit-background-size: 25px; -khtml-background-size: 25px; -moz-background-size: 25px; + -o-background-size: 25px; + background-size: 25px; } .elgg-avatar-small > a > img { width: 40px; height: 40px; + /* remove the border-radius if you don't want rounded avatars in supported browsers */ -webkit-border-radius: 5px; -moz-border-radius: 5px; + border-radius: 5px; + -moz-background-clip: border; + background-clip: border; - -o-background-size: 40px; -webkit-background-size: 40px; -khtml-background-size: 40px; -moz-background-size: 40px; + -o-background-size: 40px; + background-size: 40px; } .elgg-avatar-medium > a > img { width: 100px; diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php new file mode 100644 index 000000000..9d92752b4 --- /dev/null +++ b/views/default/css/elements/layout.php @@ -0,0 +1,121 @@ +<?php +/** + * Page Layout + * + * Contains CSS for the page shell and page layout + * + * Default layout: 990px wide, centered. Used in default page shell + * + * @package Elgg.Core + * @subpackage UI + */ +?> + +/* *************************************** + PAGE LAYOUT +*************************************** */ +/***** DEFAULT LAYOUT ******/ +<?php // the width is on the page rather than topbar to handle small viewports ?> +.elgg-page-default { + min-width: 998px; +} +.elgg-page-default .elgg-page-header > .elgg-inner { + width: 990px; + margin: 0 auto; + height: 90px; +} +.elgg-page-default .elgg-page-body > .elgg-inner { + width: 990px; + margin: 0 auto; +} +.elgg-page-default .elgg-page-footer > .elgg-inner { + width: 990px; + margin: 0 auto; + padding: 5px 0; + border-top: 1px solid #DEDEDE; +} + +/***** TOPBAR ******/ +.elgg-page-topbar { + background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left; + border-bottom: 1px solid #000000; + position: relative; + height: 24px; + z-index: 9000; +} +.elgg-page-topbar > .elgg-inner { + padding: 0 10px; +} + +/***** PAGE MESSAGES ******/ +.elgg-system-messages { + position: fixed; + top: 24px; + right: 20px; + max-width: 500px; + z-index: 2000; +} +.elgg-system-messages li { + margin-top: 10px; +} +.elgg-system-messages li p { + margin: 0; +} + +/***** PAGE HEADER ******/ +.elgg-page-header { + position: relative; + background: #4690D6 url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png) repeat-x bottom left; +} +.elgg-page-header > .elgg-inner { + position: relative; +} + +/***** PAGE BODY LAYOUT ******/ +.elgg-layout { + min-height: 360px; +} +.elgg-layout-one-sidebar { + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif) repeat-y right top; +} +.elgg-layout-two-sidebar { + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y right top; +} +.elgg-layout-error { + margin-top: 20px; +} +.elgg-sidebar { + position: relative; + padding: 20px 10px; + float: right; + width: 210px; + margin: 0 0 0 10px; +} +.elgg-sidebar-alt { + position: relative; + padding: 20px 10px; + float: left; + width: 160px; + margin: 0 10px 0 0; +} +.elgg-main { + position: relative; + min-height: 360px; + padding: 10px; +} +.elgg-main > .elgg-head { + padding-bottom: 3px; + border-bottom: 1px solid #CCCCCC; + margin-bottom: 10px; +} + +/***** PAGE FOOTER ******/ +.elgg-page-footer { + position: relative; +} +.elgg-page-footer { + color: #999; +} +.elgg-page-footer a:hover { + color: #666; +} diff --git a/views/default/css/elements/misc.php b/views/default/css/elements/misc.php index 5f6d0599c..d9622d34a 100644 --- a/views/default/css/elements/misc.php +++ b/views/default/css/elements/misc.php @@ -1,223 +1,25 @@ -<?php -/** - * - */ - -?> - - - - -<?php //@todo needs revamp: elgg-login-form, elgg-register-form? ?> /* *************************************** - LOGIN / REGISTER + MISC *************************************** */ #login-dropdown { position: absolute; top:10px; right:0; - z-index: 9599; -} - -.elgg-button-dropdown { - padding:3px 6px; - text-decoration:none; - display:block; - font-weight:bold; - position:relative; - margin-left:0; - color: white; - border:1px solid #71B9F7; - -webkit-border-radius:4px; - -moz-border-radius:4px; - border-radius:4px; - /*background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png); - background-position:-150px -51px; - background-repeat:no-repeat;*/ + z-index: 100; } -.elgg-button-dropdown:after { - content: " \25BC "; - font-size:smaller; -} - -.elgg-button-dropdown:hover { - background-color:#71B9F7; - text-decoration:none; -} - -.elgg-button-dropdown.elgg-state-active { - background: #cccccc; - outline: none; - color: #333333; - - border:1px solid #cccccc; - -webkit-border-radius:4px 4px 0 0; - -moz-border-radius:4px 4px 0 0; - border-radius:4px 4px 0 0; -} - -<?php //@todo needs revamp ?> -/* *************************************** - FRIENDS PICKER -*************************************** */ -.friends-picker-container h3 { - font-size:4em !important; - text-align: left; - margin:10px 0 20px 0 !important; - color:#999999 !important; - background: none !important; - padding:0 !important; -} -.friends-picker .friends-picker-container .panel ul { - text-align: left; - margin: 0; - padding:0; -} -.friends-picker-wrapper { - margin: 0; - padding:0; - position: relative; - width: 100%; -} -.friends-picker { - position: relative; - overflow: hidden; - margin: 0; - padding:0; - width: 730px; - height: auto; -} -.friendspicker-savebuttons { - background: white; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - margin:0 10px 10px 10px; -} -.friends-picker .friends-picker-container { /* long container used to house end-to-end panels. Width is calculated in JS */ - position: relative; - left: 0; - top: 0; - width: 100%; - list-style-type: none; -} -.friends-picker .friends-picker-container .panel { - float:left; - height: 100%; - position: relative; - width: 730px; - margin: 0; - padding:0; -} -.friends-picker .friends-picker-container .panel .wrapper { - margin: 0; - padding:4px 10px 10px 10px; - min-height: 230px; -} -.friends-picker-navigation { - margin: 0 0 10px 0; - padding:0 0 10px 0; - border-bottom:1px solid #cccccc; -} -.friends-picker-navigation ul { - list-style: none; - padding-left: 0; -} -.friends-picker-navigation ul li { - float: left; - margin:0; - background:white; -} -.friends-picker-navigation a { - font-weight: bold; - text-align: center; - background: white; - color: #999999; - text-decoration: none; - display: block; - padding: 0; - width:20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; -} -.tabHasContent { - background: white; - color:#333333 !important; -} -.friends-picker-navigation li a:hover { - background: #333333; - color:white !important; -} -.friends-picker-navigation li a.current { - background: #4690D6; - color:white !important; -} -.friends-picker-navigation-l, .friends-picker-navigation-r { - position: absolute; - top: 46px; - text-indent: -9000em; -} -.friends-picker-navigation-l a, .friends-picker-navigation-r a { - display: block; - height: 43px; - width: 43px; -} -.friends-picker-navigation-l { - right: 48px; - z-index:1; -} -.friends-picker-navigation-r { - right: 0; - z-index:1; -} -.friends-picker-navigation-l { - background: url("<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png") no-repeat left top; -} -.friends-picker-navigation-r { - background: url("<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png") no-repeat -60px top; -} -.friends-picker-navigation-l:hover { - background: url("<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png") no-repeat left -44px; -} -.friends-picker-navigation-r:hover { - background: url("<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png") no-repeat -60px -44px; -} -.friendspicker-savebuttons .elgg-button-submit, -.friendspicker-savebuttons .elgg-button-cancel { - margin:5px 20px 5px 5px; -} -#collectionMembersTable { - background: #dedede; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - margin:10px 0 0 0; - padding:10px 10px 0 10px; -} - - - - /* *************************************** AVATAR UPLOADING & CROPPING *************************************** */ -#avatar-upload { - height:145px; -} + #current-user-avatar { - float:left; - width:160px; - height:130px; - border-right:1px solid #cccccc; - margin:0 20px 0 0; + border-right:1px solid #ccc; } #avatar-croppingtool { - border-top: 1px solid #cccccc; - margin:20px 0 0 0; - padding:10px 0 0 0; + border-top: 1px solid #ccc; } -#user-avatar { +#user-avatar-cropper { float: left; - margin-right: 20px; } #user-avatar-preview { float: left; @@ -228,19 +30,33 @@ } /* *************************************** - MISC + FRIENDS COLLECTIONS *************************************** */ -.user-picker .user-picker-entry { - clear:both; - height:25px; - padding:5px; - margin-top:5px; - border-bottom:1px solid #cccccc; +#friends_collections_accordian li { + color: #666; +} +#friends_collections_accordian li h2 { + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + background: none repeat scroll 0 0 #4690D6; + color: white; + cursor: pointer; + font-size: 1.2em; + margin: 10px 0; + padding: 4px 2px 4px 6px; } -.user-picker-entry .delete-button { - margin-right:10px; +#friends_collections_accordian li h2:hover { + background-color: #333; } -#dashboard-info .elgg-inner { - border: 2px solid #dedede; +#friends_collections_accordian .friends_collections_controls { + float: right; + font-size: 70%; +} +#friends_collections_accordian .friends-picker-main-wrapper { + background: none repeat scroll 0 0 white; + display: none; + padding: 0; } diff --git a/views/default/css/elements/modules.php b/views/default/css/elements/modules.php index 1ed0d0312..a37ae094b 100644 --- a/views/default/css/elements/modules.php +++ b/views/default/css/elements/modules.php @@ -2,12 +2,13 @@ Modules *************************************** */ .elgg-module { + overflow: hidden; margin-bottom: 20px; } /* Aside */ .elgg-module-aside .elgg-head { - border-bottom: 1px solid #CCCCCC; + border-bottom: 1px solid #CCC; margin-bottom: 5px; padding-bottom: 5px; @@ -18,17 +19,19 @@ background: #e4e4e4; padding: 5px; margin-bottom: 10px; + -webkit-border-radius: 3px; -moz-border-radius: 3px; + border-radius: 3px; } .elgg-module-info > .elgg-head * { - color: #333333; + color: #333; } /* Popup */ .elgg-module-popup { background-color: white; - border: 1px solid #cccccc; + border: 1px solid #ccc; z-index: 9999; margin-bottom: 0; @@ -51,8 +54,8 @@ /* Dropdown */ .elgg-module-dropdown { background-color:white; + border:5px solid #CCC; - border:5px solid #CCCCCC; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; @@ -60,25 +63,26 @@ display:none; width: 210px; - padding:12px; + padding: 12px; margin-right: 0px; - z-index:100; + -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45); position:absolute; right: 0px; - - <?php //@todo cleaner way to do this? ?> - top: 26px; + top: 100%; } /* Featured */ .elgg-module-featured { border: 1px solid #4690D6; + -webkit-border-radius: 6px; -moz-border-radius: 6px; + border-radius: 6px; } .elgg-module-featured > .elgg-head { padding: 5px; @@ -106,7 +110,7 @@ padding: 10px; margin: 0 5px 15px; background: #dedede; - border: 2px solid #cccccc; + border: 2px solid #ccc; } <?php //@todo location-dependent style: make an extension of elgg-gallery ?> .elgg-widgets-add-panel li { @@ -114,7 +118,7 @@ margin: 2px 10px; width: 200px; padding: 4px; - background-color: #cccccc; + background-color: #ccc; border: 2px solid #b0b0b0; font-weight: bold; } @@ -122,17 +126,16 @@ display: block; } .elgg-widgets-add-panel .elgg-state-available { - color: #333333; + color: #333; cursor: pointer; } .elgg-widgets-add-panel .elgg-state-available:hover { background-color: #bcbcbc; } .elgg-widgets-add-panel .elgg-state-unavailable { - color: #888888; + color: #888; } -<?php //@todo Still too many location-dependent/overly-qualified styles ?> .elgg-module-widget { background-color: #dedede; padding: 2px; @@ -140,58 +143,47 @@ position: relative; } .elgg-module-widget:hover { - background-color: #cccccc; + background-color: #ccc; } .elgg-module-widget > .elgg-head { - background-color: #dedede; - height: 30px; - line-height: 30px; + background-color: #eeeeee; + height: 26px; overflow: hidden; } .elgg-module-widget > .elgg-head h3 { float: left; - padding: 0 45px 0 20px; - color: #333333; + padding: 4px 45px 0 20px; + color: #666; } -.elgg-module-widget.elgg-state-draggable > .elgg-head { +.elgg-module-widget.elgg-state-draggable .elgg-widget-handle { cursor: move; } -.elgg-module-widget > .elgg-head a { - position: absolute; - top: 5px; - display: block; - width: 18px; - height: 18px; - border: 1px solid transparent; -} a.elgg-widget-collapse-button { - left: 5px; - background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat 0px -385px; -} -a.elgg-widget-collapsed { - background-position: 0px -365px; + color: #c5c5c5; } -a.elgg-widget-delete-button { - right: 5px; - background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -198px 3px; +a.elgg-widget-collapse-button:hover, +a.elgg-widget-collapsed:hover { + color: #9d9d9d; + text-decoration: none; } -a.elgg-widget-edit-button { - right: 25px; - background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -1px; +a.elgg-widget-collapse-button:before { + content: "\25BC"; } -a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover { - border: 1px solid #cccccc; +a.elgg-widget-collapsed:before { + content: "\25BA"; } .elgg-module-widget > .elgg-body { background-color: white; width: 100%; overflow: hidden; + border-top: 2px solid #dedede; } .elgg-widget-edit { display: none; width: 96%; padding: 2%; border-bottom: 2px solid #dedede; + background-color: #f9f9f9; } .elgg-widget-content { padding: 10px; @@ -199,4 +191,4 @@ a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover { .elgg-widget-placeholder { border: 2px dashed #dedede; margin-bottom: 15px; -}
\ No newline at end of file +} diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php index 0c92f069a..6b29e4c19 100644 --- a/views/default/css/elements/navigation.php +++ b/views/default/css/elements/navigation.php @@ -16,14 +16,17 @@ text-align: center; } .elgg-pagination li { - display: inline; + display: inline-block; margin: 0 6px 0 0; text-align: center; } .elgg-pagination a, .elgg-pagination span { - padding: 2px 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; + border-radius: 4px; + + display: block; + padding: 2px 6px; color: #4690d6; border: 1px solid #4690d6; font-size: 12px; @@ -53,14 +56,14 @@ } .elgg-tabs li { float: left; - border: 2px solid #cccccc; - border-bottom-width: 0; - background: #eeeeee; + border: 2px solid #ccc; + border-bottom: 0; + background: #eee; margin: 0 0 0 10px; - -moz-border-radius-topleft: 5px; - -moz-border-radius-topright: 5px; - -webkit-border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } .elgg-tabs a { text-decoration: none; @@ -68,14 +71,14 @@ padding: 3px 10px 0 10px; text-align: center; height: 21px; - color: #999999; + color: #999; } .elgg-tabs a:hover { background: #dedede; - color:#4690D6; + color: #4690D6; } .elgg-tabs .elgg-state-selected { - border-color: #cccccc; + border-color: #ccc; background: white; } .elgg-tabs .elgg-state-selected a { @@ -93,25 +96,23 @@ line-height: 1.2em; color: #bababa; } -.elgg-breadcrumbs li { - display: inline; +.elgg-breadcrumbs > li { + display: inline-block; } -.elgg-breadcrumbs li:after{ +.elgg-breadcrumbs > li:after { content: "\003E"; - display: inline-block; - padding: 0 4px 0 4px; + padding: 0 4px; font-weight: normal; } -.elgg-breadcrumbs li:last-child:after { - content: ""; -} -.elgg-breadcrumbs a { - color: #999999; +.elgg-breadcrumbs > li > a { + display: inline-block; + color: #999; } -.elgg-breadcrumbs a:hover { +.elgg-breadcrumbs > li > a:hover { color: #0054a7; text-decoration: underline; } + .elgg-main .elgg-breadcrumbs { position: relative; top: -6px; @@ -119,100 +120,225 @@ } /* *************************************** + TOPBAR MENU +*************************************** */ +.elgg-menu-topbar { + float: left; +} + +.elgg-menu-topbar > li { + float: left; +} + +.elgg-menu-topbar > li > a { + padding-top: 2px; + color: #eee; + margin: 1px 15px 0; +} + +.elgg-menu-topbar > li > a:hover { + color: #4690D6; + text-decoration: none; +} + +.elgg-menu-topbar-alt { + float: right; +} + +.elgg-menu-topbar .elgg-icon { + vertical-align: middle; + margin-top: -1px; +} + +.elgg-menu-topbar > li > a.elgg-topbar-logo { + margin-top: 0; + padding-left: 5px; + width: 38px; + height: 20px; +} + +.elgg-menu-topbar > li > a.elgg-topbar-avatar { + width: 18px; + height: 18px; +} + +/* *************************************** SITE MENU *************************************** */ .elgg-menu-site { + z-index: 1; +} + +.elgg-menu-site > li > a { + font-weight: bold; + padding: 3px 13px 0px 13px; + height: 20px; +} + +.elgg-menu-site > li > a:hover { + text-decoration: none; +} + +.elgg-menu-site-default { position: absolute; - height: 23px; bottom: 0; left: 0; - width: auto; - z-index: 7000; -} -.elgg-menu-site li { - display: block; - float: left; height: 23px; } -.elgg-menu-site > li { + +.elgg-menu-site-default > li { + float: left; margin-right: 1px; } -.elgg-menu-site a { + +.elgg-menu-site-default > li > a { color: white; - font-weight: bold; - padding: 3px 13px 0px 13px; - height: 20px; - display: block; } -.elgg-menu-site a:hover { - text-decoration: none; + +.elgg-menu-site > li > ul { + display: none; + background-color: white; +} + +.elgg-menu-site > li:hover > ul { + display: block; } -.elgg-menu-site li.elgg-state-selected a, -.elgg-menu-site li a:hover, -.elgg-menu-site .elgg-more:hover a { + +.elgg-menu-site-default > .elgg-state-selected > a, +.elgg-menu-site-default > li:hover > a { background: white; - color: #555555; + color: #555; + -webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); - -moz-border-radius-topleft: 4px; - -moz-border-radius-topright: 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; -} -.elgg-menu-site .elgg-more { - overflow: hidden; -} -.elgg-menu-site .elgg-more:hover { - overflow: visible; -} -.elgg-menu-site .elgg-more:hover span { - background-position: -146px -76px; + box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } -.elgg-menu-site .elgg-more ul { - z-index: 7000; + +.elgg-menu-site-more { + position: relative; + left: -1px; + width: 100%; min-width: 150px; - border-left: 1px solid #999999; - border-right: 1px solid #999999; - border-bottom: 1px solid #999999; - -moz-border-radius-bottomleft: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-left-radius: 4px; - -webkit-border-bottom-right-radius: 4px; + border: 1px solid #999; + border-top: 0; + + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); } -.elgg-menu-site .elgg-more ul li { - float: none; -} -.elgg-menu-site .elgg-more:hover ul li a { - background: white; - color: #555555; + +.elgg-menu-site-more > li > a { + background-color: white; + color: #555; + -webkit-border-radius: 0; -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; -moz-box-shadow: none; + box-shadow: none; } -.elgg-menu-site .elgg-more ul li a:hover { + +.elgg-menu-site-more > li > a:hover { background: #4690D6; color: white; } -.elgg-menu-site .elgg-more ul li:last-child a, -.elgg-menu-site .elgg-more ul li:last-child a:hover { - -moz-border-radius-bottomleft: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-left-radius: 4px; - -webkit-border-bottom-right-radius: 4px; + +.elgg-menu-site-more > li:last-child > a, +.elgg-menu-site-more > li:last-child > a:hover { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.elgg-more > a:before { + content: "\25BC"; + font-size: smaller; + margin-right: 4px; +} + +/* *************************************** + TITLE +*************************************** */ +.elgg-menu-title { + float: right; +} + +.elgg-menu-title > li { + display: inline-block; + margin-left: 4px; +} + +/* *************************************** + FILTER MENU +*************************************** */ +.elgg-menu-filter { + margin-bottom: 5px; + border-bottom: 2px solid #ccc; + display: table; + width: 100%; +} +.elgg-menu-filter > li { + float: left; + border: 2px solid #ccc; + border-bottom: 0; + background: #eee; + margin: 0 0 0 10px; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} +.elgg-menu-filter > li:hover { + background: #dedede; +} +.elgg-menu-filter > li > a { + text-decoration: none; + display: block; + padding: 3px 10px 0; + text-align: center; + height: 21px; + color: #999; +} +.elgg-menu-filter > li > a:hover { + background: #dedede; + color: #4690D6; +} +.elgg-menu-filter > .elgg-state-selected { + border-color: #ccc; + background: white; +} +.elgg-menu-filter > .elgg-state-selected > a { + position: relative; + top: 2px; + background: white; } /* *************************************** PAGE MENU *************************************** */ +.elgg-menu-page { + margin-bottom: 15px; +} + .elgg-menu-page a { display: block; + -webkit-border-radius: 8px; -moz-border-radius: 8px; + border-radius: 8px; + background-color: white; - margin: 0 0 3px 0; + margin: 0 0 3px; padding: 2px 4px 2px 8px; } .elgg-menu-page a:hover { @@ -247,17 +373,20 @@ position: absolute; z-index: 10000; - width: 165px; - border-top: solid 1px #E5E5E5; - border-left: solid 1px #E5E5E5; - border-right: solid 1px #999999; - border-bottom: solid 1px #999999; - background-color: #FFFFFF; + overflow: hidden; + + min-width: 165px; + max-width: 250px; + border: solid 1px; + border-color: #E5E5E5 #999 #999 #E5E5E5; + background-color: #FFF; + -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); } .elgg-menu-hover > li { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; } .elgg-menu-hover > li:last-child { border-bottom: none; @@ -266,34 +395,166 @@ display: block; } .elgg-menu-hover a { - display: block; padding: 2px 8px; font-size: 92%; } .elgg-menu-hover a:hover { - background: #cccccc; + background: #ccc; text-decoration: none; } -.elgg-hover-admin a { +.elgg-menu-hover-admin a { color: red; } -.elgg-hover-admin a:hover { +.elgg-menu-hover-admin a:hover { color: white; background-color: red; } /* *************************************** - FOOTER + SITE FOOTER *************************************** */ -.elgg-menu-footer li { +.elgg-menu-footer > li, +.elgg-menu-footer > li > a { + display: inline-block; + color: #999; +} + +.elgg-menu-footer > li:after { + content: "\007C"; + padding: 0 4px; +} + +.elgg-menu-footer-default { + float: right; +} + +.elgg-menu-footer-alt { float: left; } -.elgg-menu-footer li:after{ + +/* *************************************** + GENERAL MENU +*************************************** */ +.elgg-menu-general > li, +.elgg-menu-general > li > a { + display: inline-block; + color: #999; +} + +.elgg-menu-general > li:after { content: "\007C"; + padding: 0 4px; +} + +/* *************************************** + ENTITY AND ANNOTATION +*************************************** */ +<?php // height depends on line height/font size ?> +.elgg-menu-entity, .elgg-menu-annotation { + float: right; + margin-left: 15px; + font-size: 90%; + color: #aaa; + line-height: 16px; + height: 16px; +} +.elgg-menu-entity > li, .elgg-menu-annotation > li { + margin-left: 15px; +} +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { + color: #aaa; +} +<?php // need to override .elgg-menu-hz ?> +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { + display: block; +} +.elgg-menu-entity > li > span, .elgg-menu-annotation > li > span { + vertical-align: baseline; +} + +/* *************************************** + OWNER BLOCK +*************************************** */ +.elgg-menu-owner-block li a { + display: block; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + background-color: white; + margin: 3px 0 5px 0; + padding: 2px 4px 2px 8px; +} +.elgg-menu-owner-block li a:hover { + background-color: #0054A7; + color: white; + text-decoration: none; +} +.elgg-menu-owner-block li.elgg-state-selected > a { + background-color: #4690D6; + color: white; +} + +/* *************************************** + LONGTEXT +*************************************** */ +.elgg-menu-longtext { + float: right; +} + +/* *************************************** + RIVER +*************************************** */ +.elgg-menu-river { + float: right; + margin-left: 15px; + font-size: 90%; + color: #aaa; + line-height: 16px; + height: 16px; +} +.elgg-menu-river > li { display: inline-block; - padding: 0 4px 0 4px; - font-weight: normal; + margin-left: 5px; +} +.elgg-menu-river > li > a { + color: #aaa; + height: 16px; +} +<?php // need to override .elgg-menu-hz ?> +.elgg-menu-river > li > a { + display: block; +} +.elgg-menu-river > li > span { + vertical-align: baseline; +} + +/* *************************************** + SIDEBAR EXTRAS (rss, bookmark, etc) +*************************************** */ +.elgg-menu-extras { + margin-bottom: 15px; +} + +/* *************************************** + WIDGET MENU +*************************************** */ +.elgg-menu-widget > li { + position: absolute; + top: 4px; + display: inline-block; + width: 18px; + height: 18px; + padding: 2px 2px 0 0; +} + +.elgg-menu-widget > .elgg-menu-item-collapse { + left: 5px; +} +.elgg-menu-widget > .elgg-menu-item-delete { + right: 5px; } -.elgg-menu-footer li:last-child:after { - content: ""; +.elgg-menu-widget > .elgg-menu-item-settings { + right: 25px; } diff --git a/views/default/css/elements/page_layout.php b/views/default/css/elements/page_layout.php deleted file mode 100644 index e5de55830..000000000 --- a/views/default/css/elements/page_layout.php +++ /dev/null @@ -1,174 +0,0 @@ -<?php -/** - * Page Layout - * - * Contains CSS for the page shell and page layout - * - * Classic layout: 990 wide centered. Used in default page shell - * - * @package Elgg.Core - * @subpackage UI - */ -?> - -/* *************************************** - PAGE LAYOUT -*************************************** */ -/***** CLASSIC LAYOUT ******/ -.elgg-page-classic .elgg-page-header > .elgg-inner { - width: 990px; - margin: 0 auto; - height: 90px; -} -.elgg-page-classic .elgg-page-body > .elgg-inner { - width: 990px; - margin: 0 auto; -} -.elgg-page-classic .elgg-page-footer > .elgg-inner { - width: 990px; - margin: 0 auto; - padding: 5px 0; - border-top: 1px solid #DEDEDE; -} - -/***** TOPBAR ******/ -.elgg-page-topbar { - background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left; - border-bottom: 1px solid #000000; - min-width: 998px; - position: relative; - height: 24px; - z-index: 9000; -} -.elgg-page-topbar > .elgg-inner { - padding: 2px 10px 2px 8px; -} -<?php //@todo location-dependent styles ?> -.elgg-page-topbar a { - color: #eeeeee; - float: left; - margin: 2px 30px 0 0; - line-height: 1.1em; -} -.elgg-page-topbar a.elgg-alt { - float: right; - margin: 2px 0 0 30px; -} -.elgg-page-topbar a:hover { - color: #71cbff; - text-decoration: none; -} -<?php // elgg logo and user avatar need to be adjusted slightly ?> -.elgg-page-topbar img { - margin-top: -1px; -} - -/***** PAGE MESSAGES ******/ -.elgg-system-messages { - position: fixed; - top: 24px; - right: 20px; - max-width: 500px; - z-index: 1000; -} -.elgg-system-messages li { - margin-top: 10px; -} -.elgg-system-messages li p { - margin: 0; -} - -/***** PAGE HEADER ******/ -.elgg-page-header { - position: relative; - background-color: #4690D6; - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png); - background-repeat: repeat-x; - background-position: bottom left; -} -.elgg-page-header > .elgg-inner { - position: relative; -} -.elgg-heading-site, .elgg-heading-site:hover { - font-size: 2em; - line-height: 1.4em; - color: white; - font-style: italic; - font-family: Georgia, times, serif; - text-shadow: 1px 2px 4px #333333; - text-decoration: none; -} - -/***** PAGE BODY ******/ -.elgg-page-body > .elgg-inner { - min-height: 360px; -} -#elgg-layout-one-column { - padding: 10px 0; -} -#elgg-layout-sidebar { - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif); - background-repeat: repeat-y; - background-position: right top; -} -#elgg-layout-two-sidebar { - background-image: url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif); - background-repeat: repeat-y; - background-position: right top; -} -.elgg-aside { - padding: 20px 10px; - position: relative; - min-height: 360px; -} -.elgg-sidebar { - float: right; - width: 210px; - margin: 0 0 0 10px; -} -.elgg-sidebar.elgg-alt { - float: left; - width: 160px; - margin: 0 10px 0 0; -} -.elgg-main { - position: relative; - min-height: 360px; - padding: 10px; -} -.elgg-main > .elgg-head { - padding-bottom: 3px; - border-bottom: 1px solid #CCCCCC; - margin-bottom: 10px; -} -.elgg-heading-main { - float: left; - max-width: 530px; - margin-right: 10px; -} -.elgg-main > .elgg-head a { - float: right; -} - -/***** PAGE FOOTER ******/ -.elgg-page-footer { - position: relative; - z-index: 999; -} -<?php //@todo location-dependent styles ?> -.elgg-page-footer a { - float: left; -} -.elgg-page-footer a.elgg-alt { - float: right; -} -.elgg-page-footer .elgg-menu { - float: left; - width: 100%; -} -.elgg-page-footer, .elgg-page-footer a { - color: #999999; -} -.elgg-page-footer a:hover { - color: #666666; -} diff --git a/views/default/css/elements/reset.php b/views/default/css/elements/reset.php index 43e756b2e..44bf2fac9 100644 --- a/views/default/css/elements/reset.php +++ b/views/default/css/elements/reset.php @@ -30,7 +30,11 @@ table, caption, tbody, tfoot, thead, tr, th, td { } body { background-color: white; - overflow-y: scroll; +} +<?php // force vertical scroll bar ?> +html, body { + height: 100%; + margin-bottom: 1px; } img { border-width:0; diff --git a/views/default/css/elements/typography.php b/views/default/css/elements/typography.php index c76802231..c044cb1cc 100644 --- a/views/default/css/elements/typography.php +++ b/views/default/css/elements/typography.php @@ -13,36 +13,150 @@ body { font-size: 80%; line-height: 1.4em; - font-family: "Lucida Grande",Arial,Tahoma,Verdana,sans-serif; + font-family: "Lucida Grande", Arial, Tahoma, Verdana, sans-serif; } + +a { + color: #4690D6; +} + +a:hover, +a.selected { <?php //@todo remove .selected ?> + color: #555555; + text-decoration: underline; +} + +p { + margin-bottom: 15px; +} + +p:last-child { + margin-bottom: 0; +} + pre, code { - font-family: Monaco,"Courier New",Courier,monospace; + font-family: Monaco, "Courier New", Courier, monospace; font-size: 12px; + + background:#EBF5FF; + color:#000000; + overflow:auto; + + overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ + + white-space: pre-wrap; + word-wrap: break-word; /* IE 5.5-7 */ + } -input, textarea { - font: 120% Arial, Helvetica, sans-serif; + +pre { + padding:3px 15px; + margin:0px 0 15px 0; + line-height:1.3em; } + +code { + padding:2px 3px; +} + +.elgg-monospace { + font-family: Monaco, "Courier New", Courier, monospace; +} + blockquote { line-height: 1.3em; + padding:3px 15px; + margin:0px 0 15px 0; + background:#EBF5FF; + border:none; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } + h1, h2, h3, h4, h5, h6 { font-weight: bold; + color: #0054A7; } + h1 { font-size: 1.8em; } -h2 { font-size: 1.5em; line-height: 1.1em; } +h2 { font-size: 1.5em; line-height: 1.1em; padding-bottom:5px} h3 { font-size: 1.2em; } h4 { font-size: 1.0em; } h5 { font-size: 0.9em; } h6 { font-size: 0.8em; } -.elgg-monospace { - font-family: Monaco,"Courier New",Courier,monospace; +.elgg-heading-site, .elgg-heading-site:hover { + font-size: 2em; + line-height: 1.4em; + color: white; + font-style: italic; + font-family: Georgia, times, serif; + text-shadow: 1px 2px 4px #333333; + text-decoration: none; } -<?php //@todo many location-dependent styles are for styling headings. Move those here and make them into non-location-dependent classes ?> - +.elgg-heading-main { + float: left; + max-width: 530px; + margin-right: 10px; +} .elgg-heading-basic { color: #0054A7; font-size: 1.2em; font-weight: bold; } + +.elgg-subtext { + color: #666666; + font-size: 85%; + line-height: 1.2em; + font-style: italic; +} + +.elgg-text-help { + display: block; + font-size: 85%; + font-style: italic; +} + +.elgg-quiet { + color: #666; +} + +.elgg-loud { + color: #0054A7; +} + +/* *************************************** + USER INPUT DISPLAY RESET +*************************************** */ +.elgg-output { + margin-top: 10px; +} + +.elgg-output dt { font-weight: bold } +.elgg-output dd { margin: 0 0 1em 1em } + +.elgg-output ul, .elgg-output ol { + margin: 0 1.5em 1.5em 0; + padding-left: 1.5em; +} +.elgg-output ul { + list-style-type: disc; +} +.elgg-output ol { + list-style-type: decimal; +} +.elgg-output table { + border: 1px solid #ccc; +} +.elgg-output table td { + border: 1px solid #ccc; + padding: 3px 5px; +} +.elgg-output img { + max-width: 100%; + height: auto; +} |