diff options
Diffstat (limited to 'views/default/css/elements/forms.php')
| -rw-r--r-- | views/default/css/elements/forms.php | 492 |
1 files changed, 311 insertions, 181 deletions
diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php index ca03afd10..068cc8fd6 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -1,245 +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; } -textarea.monospace { - font-family: Monaco,"Courier New",Courier,monospace; - font-size: 13px; + +textarea { + height: 200px; } -a.longtext-control { - float:right; - margin-left:14px; + + +.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; } -.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 .ui-menu-item:hover { + background-color: #eee; +} +.ui-autocomplete a:hover { text-decoration: none; - background-color: #cccccc; - border: 1px solid #999999; + color: #4690D6; +} +.ui-autocomplete a.ui-state-hover { + background-color: #eee; + display: block; } -/* -.elgg-submit-button.disabled { - 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-submit-button.disabled:hover { - background-color:#999999; - border-color:#999999; - color:#dedede; +.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; } - -*/ - -/* 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; } |