diff options
Diffstat (limited to 'views/default/css')
-rw-r--r-- | views/default/css/elements/base.php | 53 | ||||
-rw-r--r-- | views/default/css/elements/chrome.php | 34 | ||||
-rw-r--r-- | views/default/css/elements/forms.php | 6 | ||||
-rw-r--r-- | views/default/css/elements/helpers.php | 134 | ||||
-rw-r--r-- | views/default/css/elements/layout_objects.php (renamed from views/default/css/elements/core.php) | 182 | ||||
-rw-r--r-- | views/default/css/elements/misc.php | 139 | ||||
-rw-r--r-- | views/default/css/elements/page_layout.php (renamed from views/default/css/elements/layout.php) | 19 | ||||
-rw-r--r-- | views/default/css/elements/spacing.php | 76 | ||||
-rw-r--r-- | views/default/css/elements/typography.php | 17 | ||||
-rw-r--r-- | views/default/css/screen.php | 28 |
10 files changed, 352 insertions, 336 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/chrome.php b/views/default/css/elements/chrome.php index 9031f4408..6ff7279ee 100644 --- a/views/default/css/elements/chrome.php +++ b/views/default/css/elements/chrome.php @@ -81,9 +81,6 @@ h2 { .link { cursor:pointer; } -.small { - font-size: 90%; -} .divider { border-top:1px solid #cccccc; } @@ -95,35 +92,10 @@ h2 { } -<?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 add a series of dividers and borders -<?php //@todo move to helpers.php ?> +?> <?php //@todo convert to hyphen-separated ?> .elgg_hrt { border-top: 1px solid #CCCCCC; diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php index d15fcb760..bd233bf3b 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -38,11 +38,6 @@ input[type="text"]:focus, input[type="password"]:focus { color:#333333; } -<?php //@todo prefix with "elgg-" ?> -textarea.monospace { - font-family: Monaco,"Courier New",Courier,monospace; - font-size: 13px; -} a.elgg-longtext-control { float: right; margin-left: 14px; @@ -164,6 +159,7 @@ a.elgg-action-button { border:1px solid #999999; color:#333333; padding:2px 15px 2px 15px; + margin: 5px 0; text-align:center; font-weight:bold; text-decoration:none; diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php new file mode 100644 index 000000000..0818fba6e --- /dev/null +++ b/views/default/css/elements/helpers.php @@ -0,0 +1,134 @@ +<?php +/** + * Helpers CSS + * + * Contains generic elements that can be used throughout the site. + */ +?> + +.clearfloat { + clear: both; +} + +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.hidden { + display: none; +} + +.centered { + margin: 0 auto; +} + +.center { + text-align: center; +} + +.right { + float: right; +} + +.left { + float: left; +} + +.large { + font-size: 120%; +} + +.small { + font-size: 80%; +} + +.elgg-discover .elgg-discoverable { + display: none; +} + +.elgg-discover:hover .elgg-discoverable { + display: block; +} + +/* *************************************** + 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 +.pan{padding:$none} +.pas{padding:$small} +.pam{padding:$medium} +.pal{padding:$large} +.ptn{padding-top:$none} +.pts{padding-top:$small} +.ptm{padding-top:$medium} +.ptl{padding-top:$large} +.prn{padding-right:$none} +.prs{padding-right:$small} +.prm{padding-right:$medium} +.prl{padding-right:$large} +.pbn{padding-bottom:$none} +.pbs{padding-bottom:$small} +.pbm{padding-bottom:$medium} +.pbl{padding-bottom:$large} +.pln{padding-left:$none} +.pls{padding-left:$small} +.plm{padding-left:$medium} +.pll{padding-left:$large} +.phn{padding-left:$none;padding-right:$none} +.phs{padding-left:$small;padding-right:$small} +.phm{padding-left:$medium;padding-right:$medium} +.phl{padding-left:$large;padding-right:$large} +.pvn{padding-top:$none;padding-bottom:$none} +.pvs{padding-top:$small;padding-bottom:$small} +.pvm{padding-top:$medium;padding-bottom:$medium} +.pvl{padding-top:$large;padding-bottom:$large} +.man{margin:$none} +.mas{margin:$small} +.mam{margin:$medium} +.mal{margin:$large} +.mtn{margin-top:$none} +.mts{margin-top:$small} +.mtm{margin-top:$medium} +.mtl{margin-top:$large} +.mrn{margin-right:$none} +.mrs{margin-right:$small} +.mrm{margin-right:$medium} +.mrl{margin-right:$large} +.mbn{margin-bottom:$none} +.mbs{margin-bottom:$small} +.mbm{margin-bottom:$medium} +.mbl{margin-bottom:$large} +.mln{margin-left:$none} +.mls{margin-left:$small} +.mlm{margin-left:$medium} +.mll{margin-left:$large} +.mhn{margin-left:$none;margin-right:$none} +.mhs{margin-left:$small;margin-right:$small} +.mhm{margin-left:$medium;margin-right:$medium} +.mhl{margin-left:$large;margin-right:$large} +.mvn{margin-top:$none;margin-bottom:$none} +.mvs{margin-top:$small;margin-bottom:$small} +.mvm{margin-top:$medium;margin-bottom:$medium} +.mvl{margin-top:$large;margin-bottom:$large} +CSS; +?> diff --git a/views/default/css/elements/core.php b/views/default/css/elements/layout_objects.php index 3c7ffa4f9..87608e205 100644 --- a/views/default/css/elements/core.php +++ b/views/default/css/elements/layout_objects.php @@ -7,6 +7,29 @@ */ ?> +/** + * 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 "; +} /* *************************************** Image Block *************************************** */ @@ -68,6 +91,26 @@ border: none; } /* *************************************** + Tables +*************************************** */ +<?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; +} +/* *************************************** Modules *************************************** */ @@ -262,3 +305,142 @@ a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover { .elgg-system-message p { margin:0; } +/* *************************************** + 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; +} + +/* *************************************** + LIKES +*************************************** */ +.elgg-likes-list { + width: 345px; + position: absolute; +} + +/* *************************************** + TAGS +*************************************** */ +.elgg-tags { + background-image:url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png); + background-repeat: no-repeat; + background-position: left -196px; + padding:1px 0 0 14px; + font-size: 85%; +} +.elgg-tags li { + display: inline; + margin-right: 5px; +} +.elgg-tags li:after { + content: ","; +} +.elgg-tags li:last-child:after { + content: ""; +} +.elgg-tagcloud { + text-align: justify; +}
\ No newline at end of file diff --git a/views/default/css/elements/misc.php b/views/default/css/elements/misc.php index 297becefe..92107db8c 100644 --- a/views/default/css/elements/misc.php +++ b/views/default/css/elements/misc.php @@ -4,127 +4,9 @@ */ ?> -/* *************************************** - 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? ?> /* *************************************** @@ -256,27 +138,6 @@ } -/* *************************************** - 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 diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/page_layout.php index 6b4a98ae9..ebb201225 100644 --- a/views/default/css/elements/layout.php +++ b/views/default/css/elements/page_layout.php @@ -48,11 +48,11 @@ body { /***** 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: 1000; } /***** PAGE HEADER ******/ @@ -74,8 +74,7 @@ body { position: relative; } -<?php //@todo location-dependent styles ?> -.elgg-page-header h1 a { +.elgg-site-title, .elgg-site-title:hover { font-size: 2em; line-height: 1.4em; color: white; @@ -94,8 +93,6 @@ body { 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; } @@ -114,7 +111,6 @@ body { min-height: 360px; padding: 10px; } - .elgg-aside { padding: 20px 10px; position: relative; @@ -132,8 +128,9 @@ body { } .elgg-main .elgg-header { - border-bottom: 1px solid #CCCCCC; padding-bottom: 3px; + border-bottom: 1px solid #CCCCCC; + margin-bottom: 10px; } <?php //@todo location-dependent styles ?> 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..70be91da4 100644 --- a/views/default/css/elements/typography.php +++ b/views/default/css/elements/typography.php @@ -15,14 +15,14 @@ body { font-family: "Lucida Grande",Arial,Tahoma,Verdana,sans-serif; } pre, code { - font-family:Monaco,"Courier New",Courier,monospace; - font-size:12px; + font-family: Monaco,"Courier New",Courier,monospace; + font-size: 12px; } -blockquote { - line-height:1.3em; +input, textarea { + font: 120% Arial, Helvetica, sans-serif; } -small { - font-size: 90%; +blockquote { + line-height: 1.3em; } h1, h2, h3, h4, h5, h6 { font-weight: bold; @@ -35,4 +35,9 @@ h4 { font-size: 1.0em; } h5 { font-size: 0.9em; } h6 { font-size: 0.8em; } +.elgg-monospace { + font-family: Monaco,"Courier New",Courier,monospace; +} + + <?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 diff --git a/views/default/css/screen.php b/views/default/css/screen.php index 93c08c83d..cab694385 100644 --- a/views/default/css/screen.php +++ b/views/default/css/screen.php @@ -18,37 +18,35 @@ if ($old_css_view != "{$CONFIG->viewpath}") { Base CSS * CSS reset - * spacing + * helpers * grid - * base *******************************************************************************/ echo elgg_view('css/elements/reset', $vars); -echo elgg_view('css/elements/spacing', $vars); +echo elgg_view('css/elements/helpers', $vars); echo elgg_view('css/elements/grid', $vars); -echo elgg_view('css/elements/base', $vars); /******************************************************************************* Skin CSS - * typography - fonts, line spacing - * chrome - general skin - * forms - form elements, buttons - * navigation - menus, breadcrumbs, pagination - * core - modules, lists, content blocks, notifications, avatars, widgets - * icons - icons, sprites, graphics - * layout - page layout - * misc - river, login, settings, profile + * typography - fonts, line spacing + * chrome - general skin + * forms - form elements, buttons + * navigation - menus, breadcrumbs, pagination + * icons - icons, sprites, graphics + * layout_objects - modules, lists, content blocks, notifications, avatars, widgets + * page_layout - page layout + * misc - to be removed/redone *******************************************************************************/ echo elgg_view('css/elements/typography', $vars); echo elgg_view('css/elements/chrome', $vars); echo elgg_view('css/elements/forms', $vars); -echo elgg_view('css/elements/navigation', $vars); -echo elgg_view('css/elements/core', $vars); echo elgg_view('css/elements/icons', $vars); -echo elgg_view('css/elements/layout', $vars); +echo elgg_view('css/elements/navigation', $vars); +echo elgg_view('css/elements/layout_objects', $vars); +echo elgg_view('css/elements/page_layout', $vars); echo elgg_view('css/elements/misc', $vars); |