diff options
Diffstat (limited to 'views/default/css/elements')
-rw-r--r-- | views/default/css/elements/buttons.php | 84 | ||||
-rw-r--r-- | views/default/css/elements/forms.php | 142 | ||||
-rw-r--r-- | views/default/css/elements/helpers.php | 18 | ||||
-rw-r--r-- | views/default/css/elements/icons.php | 4 | ||||
-rw-r--r-- | views/default/css/elements/layout.php | 127 | ||||
-rw-r--r-- | views/default/css/elements/modules.php | 2 | ||||
-rw-r--r-- | views/default/css/elements/typography.php | 37 |
7 files changed, 240 insertions, 174 deletions
diff --git a/views/default/css/elements/buttons.php b/views/default/css/elements/buttons.php index f584fa90f..e9c99cf96 100644 --- a/views/default/css/elements/buttons.php +++ b/views/default/css/elements/buttons.php @@ -14,34 +14,38 @@ .elgg-button { font-size: 14px; font-weight: bold; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + width: auto; - padding: 1px 4px; + padding: 2px 4px; cursor: pointer; outline: none; - background:#333333; - color:#ffffff; + -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; } -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-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: #333333; + border-color: #0054a7; text-decoration: none; color: white; - background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; + background: #0054a7 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px; } .elgg-button-submit.elgg-state-disabled { @@ -65,23 +69,31 @@ color:#ffffff; /* Action: This button should convey a normal, inconsequential action, such as clicking a link */ .elgg-button-action { - color: #fff; + 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; - height:27px; - line-height:27px; - border:3px solid #ffffff; - -moz-border-radius:10px; - -webkit-border-radius:10px; - border-radius:10px; + + -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; - box-shadow:0px 0px 4px #333333; + border: 1px solid #999; } /* Delete: This button should convey "be careful before you click me" */ @@ -90,6 +102,7 @@ color:#ffffff; 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; @@ -99,21 +112,26 @@ color:#ffffff; } .elgg-button-dropdown { + padding:3px 6px; 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; + 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 { @@ -122,11 +140,17 @@ color:#ffffff; } .elgg-button-dropdown:hover { + background-color:#71B9F7; text-decoration:none; - box-shadow:0px 0px 4px #333333; } .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/forms.php b/views/default/css/elements/forms.php index c6aa55841..2fc156447 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -33,13 +33,16 @@ input, textarea { font: 120% Arial, Helvetica, sans-serif; padding: 5px; 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; } -input:focus, textarea:focus { - +input[type=text]:focus, textarea:focus { + border: solid 1px #4690d6; background: #e4ecf5; color:#333; } @@ -69,14 +72,13 @@ input[type="radio"] { width:auto; } .elgg-input-checkboxes.elgg-horizontal li, -.elgg-input-radio.elgg-horizontal li { +.elgg-input-radios.elgg-horizontal li { display: inline; padding-right: 10px; } -.elgg-form-account input[type="text"], -.elgg-form-account input[type="password"] { - width: 300px; +.elgg-form-login, .elgg-form-account { + max-width: 450px; } /* *************************************** @@ -102,7 +104,7 @@ input[type="radio"] { margin: 0; padding:0; position: relative; - width: 100%; + width: 730px; } .friends-picker { position: relative; @@ -112,9 +114,18 @@ input[type="radio"] { 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 */ @@ -160,6 +171,10 @@ input[type="radio"] { display: block; padding: 0; width:20px; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } .tabHasContent { background: white; @@ -170,6 +185,7 @@ input[type="radio"] { color:white !important; } .friends-picker-navigation li a.current { + background: #4690D6; color:white !important; } .friends-picker-navigation-l, .friends-picker-navigation-r { @@ -208,91 +224,147 @@ input[type="radio"] { } .friendspicker-members-table { background: #dedede; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin:10px 0 0; padding:10px 10px 0; } /* *************************************** - USER PICKER + 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; + 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; +} +.ui-autocomplete a:hover { + text-decoration: none; + color: #4690D6; +} -.user-picker .user-picker-entry { - clear:both; - height:25px; - padding:5px; - margin-top:5px; - border-bottom:1px solid #cccccc; +/* *************************************** + USER PICKER +*************************************** */ +.elgg-user-picker-list li:first-child { + border-top: 1px dotted #ccc; + margin-top: 5px; } -.user-picker-entry .elgg-button-delete { - margin-right:10px; +.elgg-user-picker-list > li { + border-bottom: 1px dotted #ccc; } + /* *************************************** DATE PICKER **************************************** */ .ui-datepicker { + display: none; + margin-top: 3px; + width: 208px; background-color: white; - border: 1px solid #333333; + 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); +} +.ui-datepicker-inline { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .ui-datepicker-header { + position: relative; + background: #4690D6; color: white; padding: 2px 0; + border-bottom: 1px solid #0054A7; } .ui-datepicker-header a { color: white; } .ui-datepicker-prev, .ui-datepicker-next { - position: absolute; - top: 5px; + position: absolute; + top: 5px; cursor: pointer; } .ui-datepicker-prev { - left: 6px; + left: 6px; } .ui-datepicker-next { - right: 6px; + right: 6px; } .ui-datepicker-title { - line-height: 1.8em; - margin: 0 30px; - text-align: center; + line-height: 1.8em; + margin: 0 30px; + text-align: center; font-weight: bold; } .ui-datepicker-calendar { margin: 4px; } .ui-datepicker th { - color: #333333; + color: #0054A7; border: none; - font-weight: bold; - padding: 5px 6px; - text-align: center; + 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; + display: block; + padding: 2px; line-height: 1.2em; - text-align: right; - text-decoration: none; + text-align: right; + text-decoration: none; } .ui-datepicker-calendar .ui-state-default { border: 1px solid #ccc; + color: #4690D6;; background: #fafafa; } .ui-datepicker-calendar .ui-state-hover { border: 1px solid #aaa; - color: #333333; + color: #0054A7; background: #eee; } .ui-datepicker-calendar .ui-state-active, .ui-datepicker-calendar .ui-state-active.ui-state-hover { font-weight: bold; - border: 1px solid #333333; - color: #333333; + border: 1px solid #0054A7; + color: #0054A7; background: #E4ECF5; } diff --git a/views/default/css/elements/helpers.php b/views/default/css/elements/helpers.php index 9d0cd7ba9..e9a9e0a30 100644 --- a/views/default/css/elements/helpers.php +++ b/views/default/css/elements/helpers.php @@ -12,6 +12,7 @@ .clearfloat { clear: both; } + .hidden { display: none; } @@ -32,27 +33,10 @@ 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; } diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php index f7c789e33..9b12e0a57 100644 --- a/views/default/css/elements/icons.php +++ b/views/default/css/elements/icons.php @@ -288,8 +288,8 @@ .elgg-ajax-loader { background: white url(<?php echo elgg_get_site_url(); ?>_graphics/ajax_loader_bw.gif) no-repeat center center; - min-height: 33px; - min-width: 33px; + min-height: 31px; + min-width: 31px; } /* *************************************** diff --git a/views/default/css/elements/layout.php b/views/default/css/elements/layout.php index 2a3780681..9d92752b4 100644 --- a/views/default/css/elements/layout.php +++ b/views/default/css/elements/layout.php @@ -12,131 +12,110 @@ ?> /* *************************************** -PAGE LAYOUT + 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; + 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/habitorio_theme/graphics/purity_01.png) top center no-repeat; -} -.elgg-page-default .elgg-page-header { - + width: 990px; + margin: 0 auto; + height: 90px; } .elgg-page-default .elgg-page-body > .elgg-inner { -width: 990px; -margin: 0px auto; -background:url(<?php echo $vars['url']; ?>mod/habitorio_theme/graphics/purity_02.png) top center repeat-y; -padding:0px 13px; -} -.elgg-body { -background:none; + width: 990px; + margin: 0 auto; } .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/habitorio_theme/graphics/purity_03.png) bottom center no-repeat; -width:1016px; -padding:10px; -margin:0px auto; -height:50px; + width: 990px; + margin: 0 auto; + padding: 5px 0; + border-top: 1px solid #DEDEDE; } /***** TOPBAR ******/ .elgg-page-topbar { -background: #2D2D2D ; -position: relative; -height: 24px; -z-index: 9000; -width:940px; -margin-left:auto; -margin-right:auto; + background: #333333 url(<?php echo elgg_get_site_url(); ?>_graphics/toptoolbar_background.gif) repeat-x top left; + border-bottom: 1px solid #000000; + position: relative; + height: 24px; + z-index: 9000; } .elgg-page-topbar > .elgg-inner { -padding: 0 10px; + padding: 0 10px; } /***** PAGE MESSAGES ******/ .elgg-system-messages { -position: absolute; -top: 24px; -right: 20px; -max-width: 500px; -z-index: 2000; + position: fixed; + top: 24px; + right: 20px; + max-width: 500px; + z-index: 2000; } .elgg-system-messages li { -margin-top: 10px; + margin-top: 10px; } .elgg-system-messages li p { -margin: 0; + margin: 0; } /***** PAGE HEADER ******/ .elgg-page-header { -position: relative; + position: relative; + background: #4690D6 url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png) repeat-x bottom left; } .elgg-page-header > .elgg-inner { -position: relative; + position: relative; } /***** PAGE BODY LAYOUT ******/ .elgg-layout { -min-height: 360px; + min-height: 360px; } .elgg-layout-one-sidebar { -background: transparent url(<?php echo elgg_get_site_url(); ?>mod/habitorio_theme/graphics/sidebar_background.gif) repeat-y right top; + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/sidebar_background.gif) repeat-y right top; } .elgg-layout-two-sidebar { -background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y right top; + background: transparent url(<?php echo elgg_get_site_url(); ?>_graphics/two_sidebar_background.gif) repeat-y right top; +} +.elgg-layout-error { + margin-top: 20px; } .elgg-sidebar { -position: relative; -padding: 20px 10px; -float: right; -width: 210px; -margin: 0 0 0 10px; --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;} + position: relative; + padding: 20px 10px; + float: right; + width: 210px; + margin: 0 0 0 10px; +} .elgg-sidebar-alt { -position: relative; -padding: 20px 10px; -float: left; -width: 160px; -margin: 0 10px 0 0; + position: relative; + padding: 20px 10px; + float: left; + width: 160px; + margin: 0 10px 0 0; } .elgg-main { -position: relative; -min-height: 360px; -padding: 10px; + position: relative; + min-height: 360px; + padding: 10px; } .elgg-main > .elgg-head { -padding-bottom: 3px; -border-bottom: 1px solid #CCCCCC; -margin-bottom: 10px; + padding-bottom: 3px; + border-bottom: 1px solid #CCCCCC; + margin-bottom: 10px; } /***** PAGE FOOTER ******/ .elgg-page-footer { -position: relative; -padding-top:20px; + position: relative; } .elgg-page-footer { -color: #999; + color: #999; } .elgg-page-footer a:hover { -color: #666; + color: #666; } diff --git a/views/default/css/elements/modules.php b/views/default/css/elements/modules.php index 74092c774..a37ae094b 100644 --- a/views/default/css/elements/modules.php +++ b/views/default/css/elements/modules.php @@ -191,4 +191,4 @@ a.elgg-widget-collapsed:before { .elgg-widget-placeholder { border: 2px dashed #dedede; margin-bottom: 15px; -}
\ No newline at end of file +} diff --git a/views/default/css/elements/typography.php b/views/default/css/elements/typography.php index 5c59f1639..c044cb1cc 100644 --- a/views/default/css/elements/typography.php +++ b/views/default/css/elements/typography.php @@ -13,11 +13,11 @@ 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:#333333; + color: #4690D6; } a:hover, @@ -35,7 +35,8 @@ p:last-child { } pre, code { - font-size: 11px; + font-family: Monaco, "Courier New", Courier, monospace; + font-size: 12px; background:#EBF5FF; color:#000000; @@ -55,10 +56,11 @@ pre { } code { - padding:1px 3px; + padding:2px 3px; } .elgg-monospace { + font-family: Monaco, "Courier New", Courier, monospace; } blockquote { @@ -68,11 +70,14 @@ blockquote { background:#EBF5FF; border:none; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } h1, h2, h3, h4, h5, h6 { font-weight: bold; - color: #333333; + color: #0054A7; } h1 { font-size: 1.8em; } @@ -83,12 +88,13 @@ 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; + 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; - margin-top:40px; - margin-left:40px; - float:left; } .elgg-heading-main { @@ -97,7 +103,7 @@ h6 { font-size: 0.8em; } margin-right: 10px; } .elgg-heading-basic { - color: #333333; + color: #0054A7; font-size: 1.2em; font-weight: bold; } @@ -120,7 +126,7 @@ h6 { font-size: 0.8em; } } .elgg-loud { - color: #333333; + color: #0054A7; } /* *************************************** @@ -133,7 +139,7 @@ h6 { font-size: 0.8em; } .elgg-output dt { font-weight: bold } .elgg-output dd { margin: 0 0 1em 1em } -.elgg-output ul, ol { +.elgg-output ul, .elgg-output ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } @@ -152,4 +158,5 @@ h6 { font-size: 0.8em; } } .elgg-output img { max-width: 100%; -}
\ No newline at end of file + height: auto; +} |