diff options
Diffstat (limited to 'views/default/css/elements')
-rw-r--r-- | views/default/css/elements/buttons.php | 132 | ||||
-rw-r--r-- | views/default/css/elements/forms.php | 298 | ||||
-rw-r--r-- | views/default/css/elements/helpers.php | 161 | ||||
-rw-r--r-- | views/default/css/elements/layout.php | 142 | ||||
-rw-r--r-- | views/default/css/elements/typography.php | 155 |
5 files changed, 888 insertions, 0 deletions
diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php new file mode 100644 index 000000000..f584fa90f --- /dev/null +++ b/views/default/css/elements/buttons.php @@ -0,0 +1,132 @@ +<?php +/** + * CSS buttons + * + * @package Elgg.Core + * @subpackage UI + */ +?> +/* ************************** + BUTTONS +************************** */ + +/* Base */ +.elgg-button { + font-size: 14px; + font-weight: bold; + width: auto; + padding: 1px 4px; + cursor: pointer; + outline: none; + background:#333333; + color:#ffffff; + +} +a.elgg-button { + padding: 3px 6px; +} +a.elgg-button:hover { +color:#ffffff; +} + +/* Submit: This button should convey, "you're about to take some definitive action" */ +.elgg-button-submit { + color: white; + text-decoration: none; + + +} + +.elgg-button-submit:hover { + border-color: #333333; + text-decoration: none; + color: white; + background: #333333 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 { + color: #fff; + text-align: center; + font-weight: bold; + text-decoration: none; + cursor: pointer; + height:27px; + line-height:27px; + border:3px solid #ffffff; + -moz-border-radius:10px; + -webkit-border-radius:10px; + border-radius:10px; +} + +.elgg-button-action:hover, +.elgg-button-action:focus { + text-decoration: none; + box-shadow:0px 0px 4px #333333; +} + +/* 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; +} +.elgg-button-delete:hover { + color: #999; + background-color: #333; + background-position: left 10px; + text-decoration: none; +} + +.elgg-button-dropdown { + text-decoration:none; + text-align:center; + display:block; + font-weight:bold; + position:relative; + right:30px; + top:30px; + color: #333333; + border:2px solid #dddddd; + width:70px; + height:30px; + line-height:30px; + -moz-border-radius:10px; + -webkit-border-radius:10px; + border-radius:10px; +} + +.elgg-button-dropdown:after { + content: " \25BC "; + font-size:smaller; +} + +.elgg-button-dropdown:hover { + text-decoration:none; + box-shadow:0px 0px 4px #333333; +} + +.elgg-button-dropdown.elgg-state-active { + outline: none; + color: #333; +} diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php new file mode 100644 index 000000000..c6aa55841 --- /dev/null +++ b/views/default/css/elements/forms.php @@ -0,0 +1,298 @@ +<?php +/** + * 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: #333; + font-size: 110%; +} + +input, textarea { + border: 1px solid #ccc; + color: #666; + font: 120% Arial, Helvetica, sans-serif; + padding: 5px; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input:focus, textarea:focus { + + background: #e4ecf5; + color:#333; +} + +textarea { + height: 200px; +} + + +.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; + width:auto; +} +.elgg-input-checkboxes.elgg-horizontal li, +.elgg-input-radio.elgg-horizontal li { + display: inline; + padding-right: 10px; +} + +.elgg-form-account input[type="text"], +.elgg-form-account input[type="password"] { + width: 300px; +} + +/* *************************************** + FRIENDS PICKER +*************************************** */ +.friends-picker-main-wrapper { + margin-bottom: 15px; +} +.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: 100%; +} +.friends-picker { + position: relative; + overflow: hidden; + margin: 0; + padding:0; + width: 730px; + height: auto; + background-color: #dedede; +} +.friendspicker-savebuttons { + background: white; + 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; + display: block; + padding: 0; + width:20px; +} +.tabHasContent { + background: white; + color:#333 !important; +} +.friends-picker-navigation li a:hover { + background: #333; + color:white !important; +} +.friends-picker-navigation li a.current { + 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; + margin:10px 0 0; + padding:10px 10px 0; +} + +/* *************************************** + USER PICKER +*************************************** */ + +.user-picker .user-picker-entry { + clear:both; + height:25px; + padding:5px; + margin-top:5px; + border-bottom:1px solid #cccccc; +} +.user-picker-entry .elgg-button-delete { + margin-right:10px; +} +/* *************************************** + DATE PICKER +**************************************** */ +.ui-datepicker { + margin-top: 3px; + background-color: white; + border: 1px solid #333333; + overflow: hidden; +} + +.ui-datepicker-header { + color: white; + padding: 2px 0; +} +.ui-datepicker-header a { + color: white; +} +.ui-datepicker-prev, .ui-datepicker-next { + position: absolute; + top: 5px; + cursor: pointer; +} +.ui-datepicker-prev { + left: 6px; +} +.ui-datepicker-next { + right: 6px; +} +.ui-datepicker-title { + line-height: 1.8em; + margin: 0 30px; + text-align: center; + font-weight: bold; +} +.ui-datepicker-calendar { + margin: 4px; +} +.ui-datepicker th { + color: #333333; + border: none; + font-weight: bold; + padding: 5px 6px; + text-align: center; +} +.ui-datepicker td { + padding: 1px; +} +.ui-datepicker td span, .ui-datepicker td a { + display: block; + padding: 2px; + line-height: 1.2em; + text-align: right; + text-decoration: none; +} +.ui-datepicker-calendar .ui-state-default { + border: 1px solid #ccc; + background: #fafafa; +} +.ui-datepicker-calendar .ui-state-hover { + border: 1px solid #aaa; + color: #333333; + background: #eee; +} +.ui-datepicker-calendar .ui-state-active, +.ui-datepicker-calendar .ui-state-active.ui-state-hover { + font-weight: bold; + border: 1px solid #333333; + color: #333333; + background: #E4ECF5; +} diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php new file mode 100644 index 000000000..e6f59260d --- /dev/null +++ b/views/default/css/elements/helpers.php @@ -0,0 +1,161 @@ +<?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; +} + +.right { + float: right; +} + +.left { + float: left; +} + +.link { + cursor: pointer; +} + +<?php @todo // do we need something like large and small? ?> +.large { + font-size: 120%; +} + +.small { + font-size: 80%; +} + +.elgg-discover .elgg-discoverable { + display: none; +} + +.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/layout.php b/views/default/css/elements/layout.php new file mode 100644 index 000000000..06c23f147 --- /dev/null +++ b/views/default/css/elements/layout.php @@ -0,0 +1,142 @@ +<?php +/** + * Page Layout + * + * Contains CSS for the page shell and page layout + * + * Default layout: 990px wide, centered. Used in default page shell + * + * @package Elgg.Core + * @subpackage UI + */ +?> + +/* *************************************** +PAGE LAYOUT +*************************************** */ +/***** DEFAULT LAYOUT ******/ +<?php // the width is on the page rather than topbar to handle small viewports ?> +body { +text-shadow:1px 1px 0px #ffffff; +} +.elgg-page-default { +min-width: 998px; +} +.elgg-page-default .elgg-page-header > .elgg-inner { +width: 1016px; +margin:20px auto 0px auto; +background:url(<?php echo $vars['url']; ?>mod/purity_theme/graphics/purity_01.png) top center no-repeat; +} +.elgg-page-default .elgg-page-header { + +} +.elgg-page-default .elgg-page-body > .elgg-inner { +width: 990px; +margin: 0px auto; +background:url(<?php echo $vars['url']; ?>mod/purity_theme/graphics/purity_02.png) top center repeat-y; +padding:0px 13px; +} +.elgg-body { +background:none; +} +.elgg-page-default .elgg-page-footer > .elgg-inner { +width: 970px; +margin: 0 auto; +padding: 5px 0; +} +.elgg-page-default .elgg-page-footer { +background:url(<?php echo $vars['url']; ?>mod/purity_theme/graphics/purity_03.png) bottom center no-repeat; +width:1016px; +padding:10px; +margin:0px auto; +height:50px; +} + +/***** TOPBAR ******/ +.elgg-page-topbar { +background: #2D2D2D ; +position: relative; +height: 24px; +z-index: 9000; +width:940px; +margin-left:auto; +margin-right:auto; +} +.elgg-page-topbar > .elgg-inner { +padding: 0 10px; +} + +/***** PAGE MESSAGES ******/ +.elgg-system-messages { +position: absolute; +top: 24px; +right: 20px; +max-width: 500px; +z-index: 2000; +} +.elgg-system-messages li { +margin-top: 10px; +} +.elgg-system-messages li p { +margin: 0; +} + +/***** PAGE HEADER ******/ +.elgg-page-header { +position: relative; +} +.elgg-page-header > .elgg-inner { +position: relative; +} + +/***** PAGE BODY LAYOUT ******/ +.elgg-layout { +min-height: 360px; +} +.elgg-layout-one-sidebar { +background: transparent url(<?php echo elgg_get_site_url(); ?>mod/purity_theme/graphics/sidebar_background.gif) repeat-y right top; +} +.elgg-layout-two-sidebar { +background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y right top; +} +.elgg-sidebar { +position: relative; +padding: 20px 10px; +float: right; +width: 210px; +margin: 0 0 0 10px; +-webkit-border-top-left-radius: 15px; +-webkit-border-top-right-radius: 15px; +-moz-border-radius-topleft: 15px; +-moz-border-radius-topright: 15px; +border-top-left-radius: 15px; +border-top-right-radius: 15px;} +.elgg-sidebar-alt { +position: relative; +padding: 20px 10px; +float: left; +width: 160px; +margin: 0 10px 0 0; +} +.elgg-main { +position: relative; +min-height: 360px; +padding: 10px; +} +.elgg-main > .elgg-head { +padding-bottom: 3px; +border-bottom: 1px solid #CCCCCC; +margin-bottom: 10px; +} + +/***** PAGE FOOTER ******/ +.elgg-page-footer { +position: relative; +padding-top:20px; +} +.elgg-page-footer { +color: #999; +} +.elgg-page-footer a:hover { +color: #666; +}
\ No newline at end of file diff --git a/views/default/css/elements/typography.php b/views/default/css/elements/typography.php new file mode 100644 index 000000000..5c59f1639 --- /dev/null +++ b/views/default/css/elements/typography.php @@ -0,0 +1,155 @@ +<?php +/** + * CSS typography + * + * @package Elgg.Core + * @subpackage UI + */ +?> + +/* *************************************** + Typography +*************************************** */ +body { + font-size: 80%; + line-height: 1.4em; +font-family: "Lucida Grande", Arial, Tahoma, Verdana, sans-serif; + } + +a { + color:#333333; +} + +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-size: 11px; + + 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 */ + +} + +pre { + padding:3px 15px; + margin:0px 0 15px 0; + line-height:1.3em; +} + +code { + padding:1px 3px; +} + +.elgg-monospace { +} + +blockquote { + line-height: 1.3em; + padding:3px 15px; + margin:0px 0 15px 0; + background:#EBF5FF; + border:none; + +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + color: #333333; +} + +h1 { font-size: 1.8em; } +h2 { font-size: 1.5em; line-height: 1.1em; padding-bottom:5px} +h3 { font-size: 1.2em; } +h4 { font-size: 1.0em; } +h5 { font-size: 0.9em; } +h6 { font-size: 0.8em; } + +.elgg-heading-site, .elgg-heading-site:hover { + font-size: 2.2em; + line-height: 1.2em; + text-decoration: none; + margin-top:40px; + margin-left:40px; + float:left; +} + +.elgg-heading-main { + float: left; + max-width: 530px; + margin-right: 10px; +} +.elgg-heading-basic { + color: #333333; + 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: #333333; +} + +/* *************************************** + 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, 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%; +}
\ No newline at end of file |