diff options
Diffstat (limited to 'views/default/css/elements/components.php')
| -rw-r--r-- | views/default/css/elements/components.php | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/views/default/css/elements/components.php b/views/default/css/elements/components.php new file mode 100644 index 000000000..9ab48b12b --- /dev/null +++ b/views/default/css/elements/components.php @@ -0,0 +1,307 @@ +<?php +/** + * Layout Object CSS + * + * Image blocks, lists, tables, gallery, messages + * + * @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 { + 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-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-list-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; +} + +/* *************************************** + Tables +*************************************** */ +.elgg-table { + width: 100%; + border-top: 1px solid #cccccc; +} +.elgg-table td, .elgg-table th { + padding: 4px 8px; + border: 1px solid #cccccc; +} +.elgg-table th { + background-color: #dddddd; +} +.elgg-table tr:nth-child(odd), .elgg-table tr.odd { + background-color: #ffffff; +} +.elgg-table tr:nth-child(even), .elgg-table tr.even { + background-color: #f0f0f0; +} +.elgg-table-alt { + width: 100%; + border-top: 1px solid #cccccc; +} +.elgg-table-alt td { + padding: 2px 4px 2px 4px; + border-bottom: 1px solid #cccccc; +} +.elgg-table-alt td:first-child { + width: 200px; +} +.elgg-table-alt tr:hover { + background: #E4E4E4; +} + +/* *************************************** + Owner Block +*************************************** */ +.elgg-owner-block { + margin-bottom: 20px; +} +.elgg-menu-owner-block li { + float: left; + width: 50%; + font-size: 90%; +} + +/* *************************************** + 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); + -webkit-border-radius: 8px; + -moz-border-radius: 8px; +} +.elgg-state-success { + background-color: black; +} +.elgg-state-error { + background-color: red; +} +.elgg-state-notice { + background-color: #4690D6; +} + +/* *************************************** + 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-avatar { + 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-image-alt a { + font-size: 90%; + float: right; + clear: both; +} + +/* *************************************** + Likes +*************************************** */ +.elgg-likes-list { + width: 345px; + position: absolute; +} + +/* *************************************** + Tags +*************************************** */ +.elgg-tags { + display: inline; + 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; +} |