diff options
Diffstat (limited to 'views/default/css/elements/navigation.php')
| -rw-r--r-- | views/default/css/elements/navigation.php | 382 |
1 files changed, 252 insertions, 130 deletions
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php index d8c857b8c..6b29e4c19 100644 --- a/views/default/css/elements/navigation.php +++ b/views/default/css/elements/navigation.php @@ -16,14 +16,17 @@ text-align: center; } .elgg-pagination li { - display: inline; + display: inline-block; margin: 0 6px 0 0; text-align: center; } .elgg-pagination a, .elgg-pagination span { - padding: 2px 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; + border-radius: 4px; + + display: block; + padding: 2px 6px; color: #4690d6; border: 1px solid #4690d6; font-size: 12px; @@ -53,12 +56,14 @@ } .elgg-tabs li { float: left; - border: 2px solid #cccccc; + border: 2px solid #ccc; border-bottom: 0; - background: #eeeeee; + background: #eee; margin: 0 0 0 10px; - -moz-border-radius: 5px 5px 0 0; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } .elgg-tabs a { text-decoration: none; @@ -66,14 +71,14 @@ padding: 3px 10px 0 10px; text-align: center; height: 21px; - color: #999999; + color: #999; } .elgg-tabs a:hover { background: #dedede; - color:#4690D6; + color: #4690D6; } .elgg-tabs .elgg-state-selected { - border-color: #cccccc; + border-color: #ccc; background: white; } .elgg-tabs .elgg-state-selected a { @@ -83,42 +88,6 @@ } /* *************************************** - * MENUS - * - * To add separators to a menu: - * .elgg-menu-$menu > li:after {content: '|'; background: ...;} - *************************************** */ -/* For dropdown/flyout menus */ -.elgg-menu > li { - position:relative; -} - -/* For separators */ -.elgg-menu > li:last-child:after { - display:none -} - -/* Maximize click target */ -.elgg-menu > li > a { - display:block -} - -/* Image placement correction */ -.elgg-menu img, -.elgg-menu .elgg-icon { - vertical-align: middle; - margin-top: -2px; -} - -/* Horizontal menus w/ separator support */ -.elgg-menu-hz > li, -.elgg-menu-hz > li:after, -.elgg-menu-hz > li > a { - display:inline-block; - vertical-align:middle; -} - -/* *************************************** BREADCRUMBS *************************************** */ .elgg-breadcrumbs { @@ -130,14 +99,14 @@ .elgg-breadcrumbs > li { display: inline-block; } -.elgg-breadcrumbs > li:after{ +.elgg-breadcrumbs > li:after { content: "\003E"; padding: 0 4px; font-weight: normal; } .elgg-breadcrumbs > li > a { display: inline-block; - color: #999999; + color: #999; } .elgg-breadcrumbs > li > a:hover { color: #0054a7; @@ -158,121 +127,155 @@ } .elgg-menu-topbar > li { - float:left; + float: left; } .elgg-menu-topbar > li > a { - padding: 2px 15px; - color: #eeeeee; - margin-top: 2px; - line-height: 1.1em; + padding-top: 2px; + color: #eee; + margin: 1px 15px 0; } .elgg-menu-topbar > li > a:hover { - color: #71cbff; + color: #4690D6; text-decoration: none; } .elgg-menu-topbar-alt { - float:right; + float: right; +} + +.elgg-menu-topbar .elgg-icon { + vertical-align: middle; + margin-top: -1px; +} + +.elgg-menu-topbar > li > a.elgg-topbar-logo { + margin-top: 0; + padding-left: 5px; + width: 38px; + height: 20px; +} + +.elgg-menu-topbar > li > a.elgg-topbar-avatar { + width: 18px; + height: 18px; } /* *************************************** SITE MENU *************************************** */ .elgg-menu-site { + z-index: 1; +} + +.elgg-menu-site > li > a { + font-weight: bold; + padding: 3px 13px 0px 13px; + height: 20px; +} + +.elgg-menu-site > li > a:hover { + text-decoration: none; +} + +.elgg-menu-site-default { position: absolute; - height: 23px; bottom: 0; left: 0; - width: auto; - z-index: 7000; + height: 23px; } -.elgg-menu-site > li { - display: inline-block; + +.elgg-menu-site-default > li { + float: left; margin-right: 1px; } -.elgg-menu-site li { - height: 23px; -} -.elgg-menu-site a { + +.elgg-menu-site-default > li > a { color: white; - font-weight: bold; - padding: 3px 13px 0px 13px; - height: 20px; } -.elgg-menu-site a:hover { - text-decoration: none; + +.elgg-menu-site > li > ul { + display: none; + background-color: white; } -.elgg-menu-site li.elgg-state-selected a, -.elgg-menu-site li a:hover, -.elgg-menu-site .elgg-more:hover a { + +.elgg-menu-site > li:hover > ul { + display: block; +} + +.elgg-menu-site-default > .elgg-state-selected > a, +.elgg-menu-site-default > li:hover > a { background: white; - color: #555555; - -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + color: #555; + -webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; -} + -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); -.elgg-more > a:before { - content: "\25BC"; - font-size:smaller; - margin-right: 4px; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } -.elgg-more > ul { - display:none; - position:relative; +.elgg-menu-site-more { + position: relative; left: -1px; - top: -1px; width: 100%; -} - -.elgg-more:hover > ul { - display:block; -} - -.elgg-menu-site .elgg-more ul { - z-index: 7000; min-width: 150px; - border: 1px solid #999999; + border: 1px solid #999; border-top: 0; - -moz-border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); } -.elgg-menu-site .elgg-more ul li { - display:block; -} -.elgg-menu-site .elgg-more:hover ul li a { - background: white; - color: #555555; + +.elgg-menu-site-more > li > a { + background-color: white; + color: #555; + -webkit-border-radius: 0; -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; -moz-box-shadow: none; + box-shadow: none; } -.elgg-menu-site .elgg-more ul li a:hover { + +.elgg-menu-site-more > li > a:hover { background: #4690D6; color: white; } -.elgg-menu-site .elgg-more ul li:last-child a, -.elgg-menu-site .elgg-more ul li:last-child a:hover { - -moz-border-radius: 0 0 4px 4px; + +.elgg-menu-site-more > li:last-child > a, +.elgg-menu-site-more > li:last-child > a:hover { -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.elgg-more > a:before { + content: "\25BC"; + font-size: smaller; + margin-right: 4px; } /* *************************************** TITLE *************************************** */ .elgg-menu-title { - float:right; + float: right; } .elgg-menu-title > li { - display:inline-block + display: inline-block; + margin-left: 4px; } /* *************************************** @@ -280,33 +283,38 @@ *************************************** */ .elgg-menu-filter { margin-bottom: 5px; - border-bottom: 2px solid #cccccc; + border-bottom: 2px solid #ccc; display: table; width: 100%; } .elgg-menu-filter > li { float: left; - border: 2px solid #cccccc; + border: 2px solid #ccc; border-bottom: 0; - background: #eeeeee; + background: #eee; margin: 0 0 0 10px; - -moz-border-radius: 5px 5px 0 0; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} +.elgg-menu-filter > li:hover { + background: #dedede; } .elgg-menu-filter > li > a { text-decoration: none; display: block; - padding: 3px 10px 0 10px; + padding: 3px 10px 0; text-align: center; height: 21px; - color: #999999; + color: #999; } .elgg-menu-filter > li > a:hover { background: #dedede; - color:#4690D6; + color: #4690D6; } .elgg-menu-filter > .elgg-state-selected { - border-color: #cccccc; + border-color: #ccc; background: white; } .elgg-menu-filter > .elgg-state-selected > a { @@ -318,12 +326,19 @@ /* *************************************** PAGE MENU *************************************** */ +.elgg-menu-page { + margin-bottom: 15px; +} + .elgg-menu-page a { display: block; + -webkit-border-radius: 8px; -moz-border-radius: 8px; + border-radius: 8px; + background-color: white; - margin: 0 0 3px 0; + margin: 0 0 3px; padding: 2px 4px 2px 8px; } .elgg-menu-page a:hover { @@ -358,15 +373,20 @@ position: absolute; z-index: 10000; - width: 165px; + overflow: hidden; + + min-width: 165px; + max-width: 250px; border: solid 1px; border-color: #E5E5E5 #999 #999 #E5E5E5; - background-color: #FFFFFF; + background-color: #FFF; + -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50); } .elgg-menu-hover > li { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; } .elgg-menu-hover > li:last-child { border-bottom: none; @@ -379,7 +399,7 @@ font-size: 92%; } .elgg-menu-hover a:hover { - background: #cccccc; + background: #ccc; text-decoration: none; } .elgg-menu-hover-admin a { @@ -391,12 +411,12 @@ } /* *************************************** - FOOTER + SITE FOOTER *************************************** */ .elgg-menu-footer > li, .elgg-menu-footer > li > a { display: inline-block; - color:#999; + color: #999; } .elgg-menu-footer > li:after { @@ -404,30 +424,76 @@ padding: 0 4px; } -.elgg-menu-footer-alt { +.elgg-menu-footer-default { float: right; } +.elgg-menu-footer-alt { + float: left; +} + +/* *************************************** + GENERAL MENU +*************************************** */ +.elgg-menu-general > li, +.elgg-menu-general > li > a { + display: inline-block; + color: #999; +} + +.elgg-menu-general > li:after { + content: "\007C"; + padding: 0 4px; +} + /* *************************************** - ENTITY METADATA + ENTITY AND ANNOTATION *************************************** */ -.elgg-menu-metadata { +<?php // height depends on line height/font size ?> +.elgg-menu-entity, .elgg-menu-annotation { float: right; margin-left: 15px; font-size: 90%; color: #aaa; + line-height: 16px; + height: 16px; } -.elgg-menu-metadata > li { - display: inline-block; +.elgg-menu-entity > li, .elgg-menu-annotation > li { margin-left: 15px; } -.elgg-menu-metadata > li > a { +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { color: #aaa; } +<?php // need to override .elgg-menu-hz ?> +.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a { + display: block; +} +.elgg-menu-entity > li > span, .elgg-menu-annotation > li > span { + vertical-align: baseline; +} -/* Ick. Allows the horizontal menu to hold image blocks without breaking */ -.elgg-menu-metadata .elgg-body:after { - content: '.'; +/* *************************************** + OWNER BLOCK +*************************************** */ +.elgg-menu-owner-block li a { + display: block; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + + background-color: white; + margin: 3px 0 5px 0; + padding: 2px 4px 2px 8px; +} +.elgg-menu-owner-block li a:hover { + background-color: #0054A7; + color: white; + text-decoration: none; +} +.elgg-menu-owner-block li.elgg-state-selected > a { + background-color: #4690D6; + color: white; } /* *************************************** @@ -436,3 +502,59 @@ .elgg-menu-longtext { float: right; } + +/* *************************************** + RIVER +*************************************** */ +.elgg-menu-river { + float: right; + margin-left: 15px; + font-size: 90%; + color: #aaa; + line-height: 16px; + height: 16px; +} +.elgg-menu-river > li { + display: inline-block; + margin-left: 5px; +} +.elgg-menu-river > li > a { + color: #aaa; + height: 16px; +} +<?php // need to override .elgg-menu-hz ?> +.elgg-menu-river > li > a { + display: block; +} +.elgg-menu-river > li > span { + vertical-align: baseline; +} + +/* *************************************** + SIDEBAR EXTRAS (rss, bookmark, etc) +*************************************** */ +.elgg-menu-extras { + margin-bottom: 15px; +} + +/* *************************************** + WIDGET MENU +*************************************** */ +.elgg-menu-widget > li { + position: absolute; + top: 4px; + display: inline-block; + width: 18px; + height: 18px; + padding: 2px 2px 0 0; +} + +.elgg-menu-widget > .elgg-menu-item-collapse { + left: 5px; +} +.elgg-menu-widget > .elgg-menu-item-delete { + right: 5px; +} +.elgg-menu-widget > .elgg-menu-item-settings { + right: 25px; +} |
