diff options
Diffstat (limited to 'views/default/css/elements')
| -rw-r--r-- | views/default/css/elements/base.php | 53 | ||||
| -rw-r--r-- | views/default/css/elements/buttons.php | 156 | ||||
| -rw-r--r-- | views/default/css/elements/chrome.php | 151 | ||||
| -rw-r--r-- | views/default/css/elements/components.php | 286 | ||||
| -rw-r--r-- | views/default/css/elements/core.php | 333 | ||||
| -rw-r--r-- | views/default/css/elements/forms.php | 488 | ||||
| -rw-r--r-- | views/default/css/elements/grid.php | 6 | ||||
| -rw-r--r-- | views/default/css/elements/helpers.php | 144 | ||||
| -rw-r--r-- | views/default/css/elements/icons.php | 353 | ||||
| -rw-r--r-- | views/default/css/elements/layout.php | 188 | ||||
| -rw-r--r-- | views/default/css/elements/misc.php | 466 | ||||
| -rw-r--r-- | views/default/css/elements/modules.php | 194 | ||||
| -rw-r--r-- | views/default/css/elements/navigation.php | 507 | ||||
| -rw-r--r-- | views/default/css/elements/reset.php | 11 | ||||
| -rw-r--r-- | views/default/css/elements/spacing.php | 76 | ||||
| -rw-r--r-- | views/default/css/elements/typography.php | 142 |
16 files changed, 2080 insertions, 1474 deletions
diff --git a/views/default/css/elements/base.php b/views/default/css/elements/base.php deleted file mode 100644 index 5ba21909a..000000000 --- a/views/default/css/elements/base.php +++ /dev/null @@ -1,53 +0,0 @@ -<?php -/** - * - */ - - -?> - -<?php //@todo move to helpers.php ?> -.clearfloat { clear:both; } - -/* Clearfix! */ -.clearfix:after { - content:"."; - display:block; - height:0; - clear:both; - visibility:hidden; -} -.hidden { - display:none; -} -.centered { - margin:0 auto; -} -.center { - text-align: center; -} - -<?php //@todo move to core.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 - */ -.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 "; -}
\ No newline at end of file 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 9031f4408..000000000 --- a/views/default/css/elements/chrome.php +++ /dev/null @@ -1,151 +0,0 @@ -<?php -/** - * - */ - -/* Colors: - - #4690D6 - elgg light blue - #0054A7 - elgg dark blue - #e4ecf5 - elgg v 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; /* css-3 */ - white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ -} -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; -} - - -/* *************************************** - GENERIC SELECTORS -*************************************** */ -h2 { -/* border-bottom:1px solid #CCCCCC; */ - padding-bottom:5px; -} - - -.link { - cursor:pointer; -} -.small { - font-size: 90%; -} -.divider { - border-top:1px solid #cccccc; -} - - -.radius8 { - -webkit-border-radius: 8px; - -moz-border-radius: 8px; -} - - -<?php //@todo lists.php ?> -.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; - margin-right: 5px; -} -.elgg-tags li:after { - content: ","; -} -.elgg-tags li:last-child:after { - content: ""; -} -.elgg-tagcloud { - text-align:justify; -} -.elgg-discover .elgg-discoverable { - display: none; -} -.elgg-discover:hover .elgg-discoverable { - display: block; -} - -<?php //@todo move to helpers.php ?> -<?php //@todo convert to hyphen-separated ?> -.elgg_hrt { - border-top: 1px solid #CCCCCC; -} -.elgg_hrb { - border-bottom: 1px solid #CCCCCC; -} -.elgg-border-plain { - border: 1px solid #eeeeee; -} -.elgg-rss { - float: right; -} - - -.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; -}
\ No newline at end of file diff --git a/views/default/css/elements/components.php b/views/default/css/elements/components.php new file mode 100644 index 000000000..7fe535d57 --- /dev/null +++ b/views/default/css/elements/components.php @@ -0,0 +1,286 @@ +<?php +/** + * Layout Object CSS + * + * Image blocks, lists, tables, gallery, messages + * + * @package Elgg.Core + * @subpackage UI + */ +?> + +/* *************************************** + Image Block +*************************************** */ +.elgg-image-block { + padding: 3px 0; +} +.elgg-image-block .elgg-image { + float: left; + margin-right: 5px; +} +.elgg-image-block .elgg-image-alt { + float: right; + margin-left: 5px; +} + +/* *************************************** + List +*************************************** */ +.elgg-list { + border-top: 1px dotted #CCCCCC; + margin: 5px 0; + clear: both; +} +.elgg-list > li { + border-bottom: 1px dotted #CCCCCC; +} + +.elgg-item .elgg-subtext { + margin-bottom: 5px; +} +.elgg-item .elgg-content { + margin: 10px 5px; +} + +/* *************************************** + Gallery +*************************************** */ +.elgg-gallery { + border: none; + margin-right: auto; + margin-left: auto; +} +.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 #ccc; +} +.elgg-table td, .elgg-table th { + padding: 4px 8px; + border: 1px solid #ccc; +} +.elgg-table th { + background-color: #ddd; +} +.elgg-table tr:nth-child(odd), .elgg-table tr.odd { + 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 #ccc; +} +.elgg-table-alt th { + background-color: #eee; + font-weight: bold; +} +.elgg-table-alt td, .elgg-table-alt th { + padding: 2px 4px 2px 4px; + border-bottom: 1px solid #ccc; +} +.elgg-table-alt td:first-child { + width: 200px; +} +.elgg-table-alt tr:hover { + background: #E4E4E4; +} + +/* *************************************** + Owner Block +*************************************** */ +.elgg-owner-block { + margin-bottom: 20px; +} + +/* *************************************** + Messages +*************************************** */ +.elgg-message { + color: white; + font-weight: bold; + display: block; + 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; +} +.elgg-state-error { + background-color: red; +} +.elgg-state-notice { + background-color: #4690D6; +} + +/* *************************************** + River +*************************************** */ +.elgg-list-river { + border-top: 1px solid #CCC; +} +.elgg-list-river > li { + border-bottom: 1px solid #CCC; +} +.elgg-river-item { + padding: 7px 0; +} +.elgg-river-item .elgg-pict { + margin-right: 20px; +} +.elgg-river-timestamp { + 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 #CCC; + font-size: 85%; + line-height: 1.5em; + margin: 8px 0 5px 0; + padding-left: 5px; +} +.elgg-river-attachments .elgg-avatar, +.elgg-river-attachments .elgg-icon { + float: left; +} +.elgg-river-layout .elgg-input-dropdown { + float: right; + margin: 10px 0; +} + +.elgg-river-comments-tab { + display: block; + background-color: #EEE; + color: #4690D6; + margin-top: 5px; + width: auto; + float: right; + font-size: 85%; + padding: 1px 7px; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +<?php //@todo components.php ?> +.elgg-river-comments { + margin: 0; + border-top: none; +} +.elgg-river-comments li:first-child { + -webkit-border-radius: 5px 0 0; + -moz-border-radius: 5px 0 0; + border-radius: 5px 0 0; +} +.elgg-river-comments li:last-child { + -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: #EEE; + border-bottom: none; + padding: 4px; + margin-bottom: 2px; +} +.elgg-river-comments .elgg-media { + padding: 0; +} +.elgg-river-more { + background-color: #EEE; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + + padding: 2px 4px; + font-size: 85%; + margin-bottom: 2px; +} + +<?php //@todo location-dependent styles ?> +.elgg-river-item form { + background-color: #EEE; + padding: 4px; + + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + + height: 30px; +} +.elgg-river-item input[type=text] { + width: 80%; +} +.elgg-river-item input[type=submit] { + margin: 0 0 0 10px; +} + + +/* ************************************** + Comments (from elgg_view_comments) +************************************** */ +.elgg-comments { + margin-top: 25px; +} +.elgg-comments > form { + margin-top: 15px; +} + +/* *************************************** + Image-related +*************************************** */ +.elgg-photo { + border: 1px solid #ccc; + padding: 3px; + background-color: white; +} + +/* *************************************** + Tags +*************************************** */ +.elgg-tags { + font-size: 85%; +} +.elgg-tags > li { + float:left; + margin-right: 5px; +} +.elgg-tags li.elgg-tag:after { + content: ","; +} +.elgg-tags li.elgg-tag:last-child:after { + content: ""; +} +.elgg-tagcloud { + text-align: justify; +} diff --git a/views/default/css/elements/core.php b/views/default/css/elements/core.php index 3c7ffa4f9..74f21ee59 100644 --- a/views/default/css/elements/core.php +++ b/views/default/css/elements/core.php @@ -1,264 +1,117 @@ <?php /** * Core CSS - * - * @package Elgg.Core - * @subpackage UI + * + * 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 */ ?> -/* *************************************** - Image Block -*************************************** */ -.elgg-image-block { - padding: 3px 0; -} -.elgg-image-block .elgg-image { - float: left; - margin-right: 5px; -} - -<?php //@todo is this the best way to do it? Perhaps elgg-image-alt would be cleaner... ?> -.elgg-image-block .elgg-image.elgg-alt { - float: right; - margin-left: 5px; -} -/* *************************************** - List -*************************************** */ -.elgg-list { - border-top: 1px dotted #CCCCCC; - margin: 5px 0; +/* 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; } -.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-subtext { - color: #666666; - font-size: 85%; - line-height: 1.2em; - font-style: italic; -} -.elgg-tags { - margin-bottom: 5px; -} -.elgg-list-content { - margin: 10px 5px; -} -/* *************************************** - Gallery -*************************************** */ -.elgg-gallery { - border: none; -} -/* *************************************** - Modules -*************************************** */ -.elgg-aside-module { - margin-bottom: 20px; -} -.elgg-aside-module .elgg-head { - border-bottom: 1px solid #CCCCCC; - margin-bottom: 5px; - padding-bottom: 5px; -} - -.elgg-group-module { - margin-bottom: 20px; -} -.elgg-group-module > .elgg-head { - padding: 5px 5px 3px; - background-color: #e4e4e4; - border-bottom: 1px solid #cccccc; - -moz-border-radius: 4px 4px 0 0; -} -.elgg-group-module > .elgg-head h3 { - color: #333333; -} - -.elgg-info-module { - margin-bottom: 20px; -} -.elgg-info-module .elgg-head { - background: #e4e4e4; - padding: 5px; - margin-bottom: 10px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; +/* 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 //@todo should not assume h3 ?> -.elgg-info-module .elgg-head h3 { - color: #333333; -} +<?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. + */ -.elgg-popup-module { - background-color: white; - border: 1px solid #cccccc; - z-index: 9999; - padding: 5px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); +//@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 "; } -<?php //@todo core.php? ?> -.elgg-owner-block { - margin-bottom: 20px; -} /* *************************************** - WIDGETS -*************************************** */ + * 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-widgets { - float: right; - min-height: 30px; -} -.elgg-widget-add-control { - text-align: right; - margin: 5px 5px 15px; -} -.elgg-widgets-add-panel { - padding: 10px; - margin: 0 5px 15px; - background: #dedede; - border: 2px solid #cccccc; +.elgg-menu > li:last-child::after { + display: none; } -<?php //@todo location-dependent style: make an extension of elgg-gallery ?> -.elgg-widgets-add-panel li { - float: left; - margin: 2px 10px; - width: 200px; - padding: 4px; - background-color: #cccccc; - border: 2px solid #b0b0b0; - font-weight: bold; -} -.elgg-widgets-add-panel li a { - display: block; -} -.elgg-widgets-add-panel .elgg-state-available { - color: #333333; - cursor: pointer; -} -.elgg-widgets-add-panel .elgg-state-available:hover { - background-color: #bcbcbc; -} -.elgg-widgets-add-panel .elgg-state-unavailable { - color: #888888; -} +/* Maximize click target */ +.elgg-menu > li > a { display: block } -<?php //@todo Still too many location-dependent/overly-qualified styles ?> -.elgg-module-widget { - background-color: #dedede; - padding: 2px; - margin: 0 5px 15px; - position: relative; -} -.elgg-module-widget:hover { - background-color: #cccccc; -} -.elgg-module-widget > .elgg-head { - background-color: #dedede; - height: 30px; - line-height: 30px; - overflow: hidden; -} -.elgg-module-widget > .elgg-head h3 { - float: left; - padding: 0 45px 0 20px; - color: #333333; -} -.elgg-module-widget.elgg-state-draggable > .elgg-head { - 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; -} -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-edit-button { - right: 25px; - background:transparent url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -300px -1px; -} -a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover { - border: 1px solid #cccccc; -} -.elgg-module-widget > .elgg-body { - background-color: white; - width: 100%; - overflow: hidden; -} -.elgg-widget-edit { - display: none; - width: 96%; - padding: 2%; - border-bottom: 2px solid #dedede; -} -.elgg-widget-content { - padding: 10px; -} -.elgg-widget-placeholder { - border: 2px dashed #dedede; - margin-bottom: 15px; +/* 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; } -<?php //@todo push into page.php ?> -/* *************************************** - SYSTEM MESSAGES -*************************************** */ +/* Allow inline image blocks in horizontal menus */ +.elgg-menu-hz .elgg-body:after { content: '.'; } -.elgg-system-messages li { - color:white; - font-weight:bold; - display:block; - padding:3px 10px; - margin-top: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); -} -.elgg-state-success { - background-color:black; -} -.elgg-state-error { - background-color:red; -} +<?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; -.elgg-system-message p { - margin:0; + display: inline-block; } diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php index d15fcb760..068cc8fd6 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -1,251 +1,375 @@ <?php /** - * CSS form elements + * CSS form/input elements * * @package Elgg.Core * @subpackage UI */ ?> + /* *************************************** Form Elements *************************************** */ +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; padding: 5px; - border: 1px solid #cccccc; - color: #666666; + width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -textarea { - height: 200px; - width: 98%; -} -input[type="text"], textarea { - width: 98%; -} -input[type="password"] { - width: 200px; -} -input[type="text"]:focus, input[type="password"]:focus { + +input[type=text]:focus, textarea:focus { border: solid 1px #4690d6; background: #e4ecf5; - color:#333333; + color:#333; } -<?php //@todo prefix with "elgg-" ?> -textarea.monospace { - font-family: Monaco,"Courier New",Courier,monospace; - font-size: 13px; +textarea { + height: 200px; } -a.elgg-longtext-control { + + +.elgg-longtext-control { float: right; margin-left: 14px; + font-size: 80%; + cursor: pointer; } .elgg-input-access { margin:5px 0 0 0; } + input[type="checkbox"], 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-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-submit-button { - 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-submit-button: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-cancel-button { - 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-cancel-button:hover { - color: white; - background-color: #999999; - background-position: left 10px; - text-decoration: none; + +/* *************************************** + FRIENDS PICKER +*************************************** */ +.friends-picker-main-wrapper { + margin-bottom: 15px; } -.elgg-action-button { - 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-action-button:hover, -.elgg-action-button: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; } -/* -<?php //@todo elgg-state-disabled? ?> -.elgg-submit-button.disabled { - background-color:#999999; - border-color:#999999; - color:#dedede; +.ui-autocomplete a.ui-state-hover { + background-color: #eee; + display: block; } -.elgg-submit-button.disabled:hover { - background-color:#999999; - border-color:#999999; - color:#dedede; + +/* *************************************** + USER PICKER +*************************************** */ +.elgg-user-picker-list li:first-child { + border-top: 1px dotted #ccc; + margin-top: 5px; +} +.elgg-user-picker-list > li { + border-bottom: 1px dotted #ccc; } -.elgg-action-button { - 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-action-button, -a.elgg-action-button { - -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; - 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-action-button:hover, -a.elgg-action-button:hover, -input.elgg-action-button:focus, -a.elgg-action-button: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-action-button:active { - background-image:none; +.ui-datepicker-header a { + color: white; } -.elgg-action-button.disabled { - color:#999999; - padding:2px 7px 2px 7px; +.ui-datepicker-prev, .ui-datepicker-next { + position: absolute; + top: 5px; + cursor: pointer; } -.elgg-action-button.disabled:hover { - background-position:0 -15px; - color:#111111; - border:1px solid #999999; +.ui-datepicker-prev { + left: 6px; } -.elgg-action-button.disabled:active { - background-image:none; +.ui-datepicker-next { + right: 6px; } -.elgg-action-button.download { - padding: 5px 9px 5px 6px; +.ui-datepicker-title { + line-height: 1.8em; + margin: 0 30px; + text-align: center; + font-weight: bold; } -.elgg-action-button.download:hover { - +.ui-datepicker-calendar { + margin: 4px; } -.elgg-action-button.download img { - margin-right:6px; - position:relative; - top:5px; +.ui-datepicker th { + color: #0054A7; + border: none; + font-weight: bold; + padding: 5px 6px; + text-align: center; } -.elgg-action-button.small { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - width: auto; - height:8px; - padding: 4px; - font-size: 0.9em; - line-height: 0.6em; +.ui-datepicker td { + padding: 1px; } -.elgg-action-button.small:hover { - background-color: #4690d6; - background-image: none; - border-color: #4690d6; - color:white; - text-shadow:0 -1px 0 black; +.ui-datepicker td span, .ui-datepicker td a { + display: block; + padding: 2px; + line-height: 1.2em; + text-align: right; + text-decoration: none; } - -*/ - -<?php //@todo prefix with elgg- ?> -/* small round delete button */ -.delete-button { - width:14px; - height:14px; - margin:0; - float:right; +.ui-datepicker-calendar .ui-state-default { + border: 1px solid #ccc; + color: #4690D6;; + background: #fafafa; } -.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-calendar .ui-state-hover { + border: 1px solid #aaa; + color: #0054A7; + background: #eee; } -.delete-button a:hover { - background-position: -200px -16px; +.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 f7d23a6f0..fdbaf4aca 100644 --- a/views/default/css/elements/grid.php +++ b/views/default/css/elements/grid.php @@ -5,14 +5,14 @@ * @package Elgg.Core * @subpackage UI * - * @todo last column needs to be elgg-body style to absorb subpixel rounding discrepancies + * To work around subpixel rounding discrepancies, apply .elgg-col-last to + * the last column (@todo we need broswer-specific test cases for this). */ ?> + /* *************************************** GRID *************************************** */ -.elgg-grid { -} .elgg-col { float: left; } diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php new file mode 100644 index 000000000..e9a9e0a30 --- /dev/null +++ b/views/default/css/elements/helpers.php @@ -0,0 +1,144 @@ +<?php +/** + * Helpers CSS + * + * Contains generic elements that can be used throughout the site. + * + * @package Elgg.Core + * @subpackage UI + */ +?> + +.clearfloat { + clear: both; +} + +.hidden { + display: none; +} + +.centered { + margin: 0 auto; +} + +.center { + text-align: center; +} + +.float { + float: left; +} + +.float-alt { + float: right; +} + +.link { + cursor: pointer; +} + +.elgg-discover .elgg-discoverable { + display: none; +} + +.elgg-discover:hover .elgg-discoverable { + 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) +*************************************** */ +<?php +/** + * Spacing classes + * Should be used to modify the default spacing between objects (not between nodes of the same object) + * Please use judiciously. You want to be using defaults most of the time, these are exceptions! + * <type><location><size> + * <type>: m = margin, p = padding + * <location>: a = all, t = top, r = right, b = bottom, l = left, h = horizontal, v = vertical + * <size>: n = none, s = small, m = medium, l = large + */ + +$none = '0'; +$small = '5px'; +$medium = '10px'; +$large = '20px'; + +echo <<<CSS +/* Padding */ +.pan{padding:$none} +.prn, .phn{padding-right:$none} +.pln, .phn{padding-left:$none} +.ptn, .pvn{padding-top:$none} +.pbn, .pvn{padding-bottom:$none} + +.pas{padding:$small} +.prs, .phs{padding-right:$small} +.pls, .phs{padding-left:$small} +.pts, .pvs{padding-top:$small} +.pbs, .pvs{padding-bottom:$small} + +.pam{padding:$medium} +.prm, .phm{padding-right:$medium} +.plm, .phm{padding-left:$medium} +.ptm, .pvm{padding-top:$medium} +.pbm, .pvm{padding-bottom:$medium} + +.pal{padding:$large} +.prl, .phl{padding-right:$large} +.pll, .phl{padding-left:$large} +.ptl, .pvl{padding-top:$large} +.pbl, .pvl{padding-bottom:$large} + +/* Margin */ +.man{margin:$none} +.mrn, .mhn{margin-right:$none} +.mln, .mhn{margin-left:$none} +.mtn, .mvn{margin-top:$none} +.mbn, .mvn{margin-bottom:$none} + +.mas{margin:$small} +.mrs, .mhs{margin-right:$small} +.mls, .mhs{margin-left:$small} +.mts, .mvs{margin-top:$small} +.mbs, .mvs{margin-bottom:$small} + +.mam{margin:$medium} +.mrm, .mhm{margin-right:$medium} +.mlm, .mhm{margin-left:$medium} +.mtm, .mvm{margin-top:$medium} +.mbm, .mvm{margin-bottom:$medium} + +.mal{margin:$large} +.mrl, .mhl{margin-right:$large} +.mll, .mhl{margin-left:$large} +.mtl, .mvl{margin-top:$large} +.mbl, .mvl{margin-bottom:$large} +CSS; +?>
\ No newline at end of file diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php index b8e6b20f0..9b12e0a57 100644 --- a/views/default/css/elements/icons.php +++ b/views/default/css/elements/icons.php @@ -1,6 +1,9 @@ <?php /** + * Elgg icons * + * @package Elgg.Core + * @subpackage UI */ ?> @@ -13,109 +16,333 @@ 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-delete { + background-position: 0 -270px; +} +.elgg-icon-download:hover { + background-position: 0 -288px; +} +.elgg-icon-download { + background-position: 0 -306px; +} +.elgg-icon-eye { + background-position: 0 -324px; +} +.elgg-icon-facebook { + background-position: 0 -342px; +} +.elgg-icon-grid:hover { + background-position: 0 -360px; +} +.elgg-icon-grid { + background-position: 0 -378px; +} +.elgg-icon-home:hover { + background-position: 0 -396px; +} +.elgg-icon-home { + background-position: 0 -414px; } -.elgg-icon-likes { - background-position: 0px -101px; - width: 20px; - height: 20px; +.elgg-icon-hover-menu:hover { + background-position: 0 -432px; } -.elgg-icon-likes:hover { - background-position: 0px -131px; +.elgg-icon-hover-menu { + background-position: 0 -450px; } -.elgg-icon-liked { - background-position: 0px -131px; - width: 20px; - height: 20px; +.elgg-icon-info:hover { + background-position: 0 -468px; } -.elgg-icon-arrow-s { - background-position: -146px -56px; +.elgg-icon-info { + background-position: 0 -486px; } -.elgg-icon-arrow-s:hover { - background-position: -146px -76px; +.elgg-icon-link:hover { + background-position: 0 -504px; } -.elgg-icon-following { - background-position: -35px -100px; - width: 22px; - height: 20px; +.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-rss { - background-position: -249px 1px; + 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; } -<?php //@todo prefix with 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; -} -.ajax-loader.left { - background-position: left center; + +.elgg-avatar > .elgg-icon-hover-menu { + display: none; + position: absolute; + right: 0; + bottom: 0; + margin: 0; + cursor: pointer; +} + +.elgg-ajax-loader { + background: white url(<?php echo elgg_get_site_url(); ?>_graphics/ajax_loader_bw.gif) no-repeat center center; + min-height: 31px; + min-width: 31px; } /* *************************************** AVATAR ICONS *************************************** */ -.elgg-user-icon { - position:relative; +.elgg-avatar { + position: relative; + display: inline-block; +} +.elgg-avatar > a > img { + display: block; } -.elgg-user-icon.tiny, -img.tiny { - width:25px; - height:25px; +.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-user-icon.small, -img.small { - width:40px; - height:40px; +.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; + height: 100px; } -img.large { - width:200px; - height:200px; +.elgg-avatar-large > a > img { + width: 200px; + height: 200px; } -img.medium { - width:100px; - height:100px; -}
\ No newline at end of file diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php index 6b4a98ae9..9d92752b4 100644 --- a/views/default/css/elements/layout.php +++ b/views/default/css/elements/layout.php @@ -1,181 +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 *************************************** */ -<?php //@todo should be in base/reset ?> -body { - background-color: white; +/***** 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; - 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; -} -/* elgg logo and user avatar need to be adjusted slightly */ -.elgg-page-topbar img { - margin-top: -1px; + padding: 0 10px; } /***** PAGE MESSAGES ******/ .elgg-system-messages { - position:fixed; - top:24px; - right:20px; - max-width:500px; - z-index:9600; + 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 { - x-overflow: hidden; 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; + background: #4690D6 url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png) repeat-x bottom left; } - -<?php //@todo Put all elgg-classic styles together ?> -.elgg-classic .elgg-page-header > .elgg-inner { - width: 990px; - margin: 0 auto; - height: 90px; +.elgg-page-header > .elgg-inner { position: relative; } -<?php //@todo location-dependent styles ?> -.elgg-page-header h1 a { - 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 { +/***** PAGE BODY LAYOUT ******/ +.elgg-layout { min-height: 360px; } -.elgg-classic .elgg-page-body > .elgg-inner { - width: 990px; - margin: 0 auto; -} - -<?php //@todo layout object is different from page object -- put in separate files? ?> -#elgg-layout-one-column { - padding: 10px 0; +.elgg-layout-one-sidebar { + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif) repeat-y right top; } -#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: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y 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-layout-error { + margin-top: 20px; } -.elgg-main { +.elgg-sidebar { position: relative; - min-height: 360px; - padding: 10px; -} - -.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 { +.elgg-sidebar-alt { + position: relative; + padding: 20px 10px; float: left; width: 160px; margin: 0 10px 0 0; } - -.elgg-main .elgg-header { - border-bottom: 1px solid #CCCCCC; - padding-bottom: 3px; -} - -<?php //@todo location-dependent styles ?> -.elgg-main .elgg-header h2 { - float: left; - max-width: 530px; - margin-right: 10px; +.elgg-main { + position: relative; + min-height: 360px; + padding: 10px; } - -.elgg-main > .elgg-header a { - float: right; +.elgg-main > .elgg-head { + padding-bottom: 3px; + border-bottom: 1px solid #CCCCCC; + margin-bottom: 10px; } /***** PAGE FOOTER ******/ - .elgg-page-footer { position: relative; - z-index: 999; } -.elgg-classic .elgg-page-footer > .elgg-inner { - width: 990px; - margin: 0 auto; - padding: 5px 0; - border-top: 1px solid #DEDEDE; -} - -<?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-inner, -.elgg-page-footer .elgg-inner a, -.elgg-page-footer .elgg-inner p { - color: #999999; +.elgg-page-footer { + color: #999; } -.elgg-page-footer .elgg-inner a:hover { - color: #666666; +.elgg-page-footer a:hover { + color: #666; } diff --git a/views/default/css/elements/misc.php b/views/default/css/elements/misc.php index 297becefe..d9622d34a 100644 --- a/views/default/css/elements/misc.php +++ b/views/default/css/elements/misc.php @@ -1,443 +1,25 @@ -<?php -/** - * - */ - -?> -/* *************************************** - PRIMITIVES -*************************************** */ -.right {float:right} -.left {float:left} - -/* *************************************** - LIKES -*************************************** */ -.elgg-likes-list { - width: 345px; - position: absolute; -} - /* *************************************** - RIVER -*************************************** */ -.elgg-river { - border-top: 1px solid #CCCCCC; -} -.elgg-river > li { - border-bottom: 1px solid #CCCCCC; -} -.elgg-river-item { - padding: 7px 0; -} -.elgg-river-item .elgg-pict { - margin-right: 20px; -} -.elgg-river-timestamp { - color: #666666; - font-size: 85%; - font-style: italic; - line-height: 1.2em; -} -.elgg-river-content { - border-left: 1px solid #CCCCCC; - font-size: 85%; - line-height: 1.5em; - margin: 8px 0 5px 0; - padding-left: 5px; -} - -<?php //@todo location-dependent styles ?> -.elgg-river-content .elgg-user-icon { - float: left; -} -.elgg-river-layout .elgg-input-dropdown { - float: right; - margin: 10px 0; -} - -<?php //@todo do we need another elgg-tabs extension? ?> -.elgg-river-comments-tab { - display: block; - background-color: #EEEEEE; - 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; -} - -<?php //@todo lists.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; -} -.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; -} -.elgg-river-comments li { - background-color: #EEEEEE; - border-bottom: none; - padding: 4px; - margin-bottom: 2px; -} -.elgg-river-comments .elgg-media { - padding: 0; -} -.elgg-river-more { - background-color: #EEEEEE; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - padding: 2px 4px; - font-size: 85%; - margin-bottom: 2px; -} - -<?php //@todo location-dependent styles ?> -.elgg-river-item form { - background-color: #EEEEEE; - padding: 4px 4px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - display: none; - height: 30px; -} -.elgg-river-item input[type=text] { - width: 80%; -} -.elgg-river-item input[type=submit] { - margin: 0 0 0 10px; -} -.elgg-river-item > .elgg-alt a { - font-size: 90%; - float: right; - clear: both; -} - -<?php //@todo needs revamp: elgg-login-form, elgg-register-form? ?> -/* *************************************** - LOGIN / REGISTER + MISC *************************************** */ -/* login in sidebar */ -.elgg-aside #login { - width:auto; -} -.elgg-aside #login form { - width:auto; -} -.elgg-aside #login .login-textarea { - width:196px; -} -/* default login and register forms */ -#login input[type="text"], -#login input[type="password"], -.register input[type="text"], -.register input[type="password"] { - margin:0 0 10px 0; -} -.register input[type="text"], -.register input[type="password"] { - width:380px; -} -.rememberme label { - font-weight:normal; - font-size:100%; -} -.loginbox .elgg-submit-button { - margin-right: 15px; -} -#login .persistent-login { - float:right; - display:block; - margin-top:-34px; - margin-left:80px; -} -#login .persistent-login label { - font-size:1.0em; - font-weight: normal; - cursor: pointer; -} #login-dropdown { - float:right; position: absolute; top:10px; right:0; - z-index: 9599; -} -#login-dropdown #signin-button { - padding:10px 0px 12px; - line-height:23px; - text-align:right; -} -#login-dropdown #signin-button a.signin { - padding:2px 6px 3px 6px; - text-decoration:none; - 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; -} -#login-dropdown #signin-button a.signin span { - padding:4px 0 6px 12px; - background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png); - background-position:-150px -51px; - background-repeat:no-repeat; -} -#login-dropdown #signin-button a.signin:hover { - background-color:#71B9F7; - /* color:black; */ -} -#login-dropdown #signin-button a.signin:hover span { - /* background-position:-150px -71px; */ -} -#login-dropdown #signin-button a.signin.menu-open { - background:#cccccc !important; - color:#666666 !important; - border:1px solid #cccccc; - outline:none; -} -#login-dropdown #signin-button a.signin.menu-open span { - background-position:-150px -71px; - color:#333333; -} -#login-dropdown #signin-menu { - -moz-border-radius-topleft:5px; - -moz-border-radius-bottomleft:5px; - -moz-border-radius-bottomright:5px; - -webkit-border-top-left-radius:5px; - -webkit-border-bottom-left-radius:5px; - -webkit-border-bottom-right-radius:5px; - display:none; - background-color:white; - position:absolute; - width:210px; - z-index:100; - border:5px solid #CCCCCC; - text-align:left; - padding:12px; - top: 26px; - right: 0px; - margin-top:5px; - margin-right: 0px; - color:#333333; - -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45); - -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45); -} -#login-dropdown #signin-menu input[type=text], -#login-dropdown #signin-menu input[type=password] { - width:203px; - margin:0 0 5px; -} -#login-dropdown #signin-menu p { - margin:0; -} -#login-dropdown #signin-menu label { - font-weight:normal; - font-size: 100%; -} -#login-dropdown #signin-menu .elgg-submit-button { - margin-right:15px; + z-index: 100; } - -/* *************************************** - USER SETTINGS -*************************************** */ -<?php //@todo prefix with elgg-. Move to chrome.php ?> -table.styled { - width:100%; -} -table.styled { - border-top:1px solid #cccccc; -} -table.styled td { - padding:2px 4px 2px 4px; - border-bottom:1px solid #cccccc; -} -table.styled td.column-one { - width:200px; -} -table.styled tr:hover { - background: #E4E4E4; -} - -<?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-submit-button, -.friendspicker-savebuttons .elgg-cancel-button { - 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; @@ -448,19 +30,33 @@ table.styled tr:hover { } /* *************************************** - 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 new file mode 100644 index 000000000..a37ae094b --- /dev/null +++ b/views/default/css/elements/modules.php @@ -0,0 +1,194 @@ +/* *************************************** + Modules +*************************************** */ +.elgg-module { + overflow: hidden; + margin-bottom: 20px; +} + +/* Aside */ +.elgg-module-aside .elgg-head { + border-bottom: 1px solid #CCC; + + margin-bottom: 5px; + padding-bottom: 5px; +} + +/* Info */ +.elgg-module-info > .elgg-head { + background: #e4e4e4; + padding: 5px; + margin-bottom: 10px; + + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.elgg-module-info > .elgg-head * { + color: #333; +} + +/* Popup */ +.elgg-module-popup { + background-color: white; + border: 1px solid #ccc; + + z-index: 9999; + margin-bottom: 0; + padding: 5px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + + -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); +} +.elgg-module-popup > .elgg-head { + margin-bottom: 5px; +} +.elgg-module-popup > .elgg-head * { + color: #0054A7; +} + +/* Dropdown */ +.elgg-module-dropdown { + background-color:white; + border:5px solid #CCC; + + -webkit-border-radius: 5px 0 5px 5px; + -moz-border-radius: 5px 0 5px 5px; + border-radius: 5px 0 5px 5px; + + display:none; + + width: 210px; + 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; + 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; + background-color: #4690D6; +} +.elgg-module-featured > .elgg-head * { + color: white; +} +.elgg-module-featured > .elgg-body { + padding: 10px; +} + +/* *************************************** + Widgets +*************************************** */ +.elgg-widgets { + float: right; + min-height: 30px; +} +.elgg-widget-add-control { + text-align: right; + margin: 5px 5px 15px; +} +.elgg-widgets-add-panel { + padding: 10px; + margin: 0 5px 15px; + background: #dedede; + border: 2px solid #ccc; +} +<?php //@todo location-dependent style: make an extension of elgg-gallery ?> +.elgg-widgets-add-panel li { + float: left; + margin: 2px 10px; + width: 200px; + padding: 4px; + background-color: #ccc; + border: 2px solid #b0b0b0; + font-weight: bold; +} +.elgg-widgets-add-panel li a { + display: block; +} +.elgg-widgets-add-panel .elgg-state-available { + color: #333; + cursor: pointer; +} +.elgg-widgets-add-panel .elgg-state-available:hover { + background-color: #bcbcbc; +} +.elgg-widgets-add-panel .elgg-state-unavailable { + color: #888; +} + +.elgg-module-widget { + background-color: #dedede; + padding: 2px; + margin: 0 5px 15px; + position: relative; +} +.elgg-module-widget:hover { + background-color: #ccc; +} +.elgg-module-widget > .elgg-head { + background-color: #eeeeee; + height: 26px; + overflow: hidden; +} +.elgg-module-widget > .elgg-head h3 { + float: left; + padding: 4px 45px 0 20px; + color: #666; +} +.elgg-module-widget.elgg-state-draggable .elgg-widget-handle { + cursor: move; +} +a.elgg-widget-collapse-button { + color: #c5c5c5; +} +a.elgg-widget-collapse-button:hover, +a.elgg-widget-collapsed:hover { + color: #9d9d9d; + text-decoration: none; +} +a.elgg-widget-collapse-button:before { + content: "\25BC"; +} +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; +} +.elgg-widget-placeholder { + border: 2px dashed #dedede; + margin-bottom: 15px; +} diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php index 4ebe5a6f1..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; @@ -41,6 +44,7 @@ color: #555555; border-color: #555555; } + /* *************************************** TABS *************************************** */ @@ -52,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; @@ -67,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 { @@ -82,6 +86,7 @@ top: 2px; background: white; } + /* *************************************** BREADCRUMBS *************************************** */ @@ -91,235 +96,465 @@ 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; - left:0; + top: -6px; + left: 0; } + +/* *************************************** + 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-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-site-menu li { - display: block; - float: left; height: 23px; } -.elgg-site-menu > li { + +.elgg-menu-site-default > li { + float: left; margin-right: 1px; } -.elgg-site-menu a { + +.elgg-menu-site-default > li > a { color: white; - font-weight: bold; - padding: 3px 13px 0px 13px; - height: 20px; - display: block; } -.elgg-site-menu a:hover { - text-decoration: none; + +.elgg-menu-site > li > ul { + display: none; + background-color: white; } -.elgg-site-menu li.elgg-state-selected a, -.elgg-site-menu li a:hover, -.elgg-site-menu .elgg-more:hover a { + +.elgg-menu-site > li:hover > ul { + display: block; +} + +.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-site-menu .elgg-more { - overflow: hidden; -} -.elgg-site-menu .elgg-more:hover { - overflow: visible; -} -.elgg-site-menu .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-site-menu .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-site-menu .elgg-more ul li { - float: none; -} -.elgg-site-menu .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-site-menu .elgg-more ul li a:hover { + +.elgg-menu-site-more > li > a:hover { background: #4690D6; color: white; } -.elgg-site-menu .elgg-more ul li:last-child a, -.elgg-site-menu .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-page-menu a { +.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-page-menu a:hover { +.elgg-menu-page a:hover { background-color: #0054A7; color: white; text-decoration: none; } -.elgg-page-menu li.elgg-state-selected > a { +.elgg-menu-page li.elgg-state-selected > a { background-color: #4690D6; color: white; } -.elgg-page-menu .elgg-child-menu { +.elgg-menu-page .elgg-child-menu { display: none; margin-left: 15px; } -.elgg-page-menu .elgg-menu-closed:before, .elgg-menu-opened:before { +.elgg-menu-page .elgg-menu-closed:before, .elgg-menu-opened:before { display: inline-block; padding-right: 4px; } -.elgg-page-menu .elgg-menu-closed:before { +.elgg-menu-page .elgg-menu-closed:before { content: "\002B"; } -.elgg-page-menu .elgg-menu-opened:before { +.elgg-menu-page .elgg-menu-opened:before { content: "\002D"; } + /* *************************************** HOVER MENU *************************************** */ -.elgg-hover-menu { +.elgg-menu-hover { display: none; position: absolute; + z-index: 10000; + + overflow: hidden; - 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; + 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-hover-menu > li { - border-bottom: 1px solid #dddddd; +.elgg-menu-hover > li { + border-bottom: 1px solid #ddd; } -.elgg-hover-menu > li:last-child { +.elgg-menu-hover > li:last-child { border-bottom: none; } -.elgg-hover-menu a { +.elgg-menu-hover .elgg-heading-basic { display: block; +} +.elgg-menu-hover a { padding: 2px 8px; font-size: 92%; } -.elgg-hover-menu a:hover { - background: #cccccc; +.elgg-menu-hover a:hover { + 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; } -<?php //@todo needs revamp ?> -.avatar_menu_button { - width:15px; - height:15px; - position:absolute; - cursor:pointer; - display:none; - right:0; - bottom:0; +/* *************************************** + SITE FOOTER +*************************************** */ +.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; +} + +/* *************************************** + 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; } -.avatar_menu_arrow { - background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px top; - width:15px; - height:15px; +.elgg-menu-entity > li, .elgg-menu-annotation > li { + margin-left: 15px; +} +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { + color: #aaa; } -.avatar_menu_arrow_on { - background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px -16px; - width:15px; - height:15px; +<?php // need to override .elgg-menu-hz ?> +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { + display: block; } -.avatar_menu_arrow_hover { - background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px -32px; - width:15px; - height:15px; +.elgg-menu-entity > li > span, .elgg-menu-annotation > li > span { + vertical-align: baseline; } /* *************************************** OWNER BLOCK *************************************** */ -.elgg-owner-block-menu li { - float: left; - width: 50%; +.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; + 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; +} + /* *************************************** - FOOTER + SIDEBAR EXTRAS (rss, bookmark, etc) *************************************** */ -.elgg-footer-menu li { - float: left; +.elgg-menu-extras { + margin-bottom: 15px; } -.elgg-footer-menu li:after{ - content: "\007C"; + +/* *************************************** + WIDGET MENU +*************************************** */ +.elgg-menu-widget > li { + position: absolute; + top: 4px; display: inline-block; - padding: 0 4px 0 4px; - font-weight: normal; + 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-footer-menu li:last-child:after { - content: ""; +.elgg-menu-widget > .elgg-menu-item-settings { + right: 25px; } diff --git a/views/default/css/elements/reset.php b/views/default/css/elements/reset.php index b5f77675e..44bf2fac9 100644 --- a/views/default/css/elements/reset.php +++ b/views/default/css/elements/reset.php @@ -28,13 +28,20 @@ table, caption, tbody, tfoot, thead, tr, th, td { font-family: inherit; vertical-align: baseline; } +body { + background-color: white; +} +<?php // force vertical scroll bar ?> +html, body { + height: 100%; + margin-bottom: 1px; +} img { border-width:0; border-color:transparent; } :focus { - outline:0 none; - -moz-outline-style: none; + outline: 0 none; } ol, ul { list-style: none; diff --git a/views/default/css/elements/spacing.php b/views/default/css/elements/spacing.php deleted file mode 100644 index 8cab342be..000000000 --- a/views/default/css/elements/spacing.php +++ /dev/null @@ -1,76 +0,0 @@ -<?php -/** - * CSS spacing - * - * @package Elgg.Core - * @subpackage UI - * - * @todo use variables so people can adjust the numbers easily if they want? - */ -?> - -/* *************************************** - Spacing (from OOCSS) -*************************************** */ -/** -* Spacing classes -* Should be used to modify the default spacing between objects (not between nodes of the same object) -* Please use judiciously. You want to be using defaults most of the time, these are exceptions! -* <type><location><size> -*/ -.pan{padding:0} -.pas{padding:5px} -.pam{padding:10px} -.pal{padding:20px} -.ptn{padding-top:0} -.pts{padding-top:5px} -.ptm{padding-top:10px} -.ptl{padding-top:20px} -.prn{padding-right:0} -.prs{padding-right:5px} -.prm{padding-right:10px} -.prl{padding-right:20px} -.pbn{padding-bottom:0} -.pbs{padding-bottom:5px} -.pbm{padding-bottom:10px} -.pbl{padding-bottom:20px} -.pln{padding-left:0} -.pls{padding-left:5px} -.plm{padding-left:10px} -.pll{padding-left:20px} -.phn{padding-left:0;padding-right:0} -.phs{padding-left:5px;padding-right:5px} -.phm{padding-left:10px;padding-right:10px} -.phl{padding-left:20px;padding-right:20px} -.pvn{padding-top:0;padding-bottom:0} -.pvs{padding-top:5px;padding-bottom:5px} -.pvm{padding-top:10px;padding-bottom:10px} -.pvl{padding-top:20px;padding-bottom:20px} -.man{margin:0} -.mas{margin:5px} -.mam{margin:10px} -.mal{margin:20px} -.mtn{margin-top:0} -.mts{margin-top:5px} -.mtm{margin-top:10px} -.mtl{margin-top:20px} -.mrn{margin-right:0} -.mrs{margin-right:5px} -.mrm{margin-right:10px} -.mrl{margin-right:20px} -.mbn{margin-bottom:0} -.mbs{margin-bottom:5px} -.mbm{margin-bottom:10px} -.mbl{margin-bottom:20px} -.mln{margin-left:0} -.mls{margin-left:5px} -.mlm{margin-left:10px} -.mll{margin-left:20px} -.mhn{margin-left:0;margin-right:0} -.mhs{margin-left:5px;margin-right:5px} -.mhm{margin-left:10px;margin-right:10px} -.mhl{margin-left:20px;margin-right:20px} -.mvn{margin-top:0;margin-bottom:0} -.mvs{margin-top:5px;margin-bottom:5px} -.mvm{margin-top:10px;margin-bottom:10px} -.mvl{margin-top:20px;margin-bottom:20px} diff --git a/views/default/css/elements/typography.php b/views/default/css/elements/typography.php index a550058e8..c044cb1cc 100644 --- a/views/default/css/elements/typography.php +++ b/views/default/css/elements/typography.php @@ -6,33 +6,157 @@ * @subpackage UI */ ?> + /* *************************************** Typography *************************************** */ 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-size:12px; + 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 */ + } -blockquote { + +pre { + padding:3px 15px; + margin:0px 0 15px 0; line-height:1.3em; } -small { - font-size: 90%; + +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; - line-height: auto; + 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; } -<?php //@todo many location-dependent styles are for styling headings. Move those here and make them into non-location-dependent classes ?>
\ No newline at end of file +.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; +} + +.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; +} |