diff options
Diffstat (limited to 'views/default/css/elements/navigation.php')
| -rw-r--r-- | views/default/css/elements/navigation.php | 324 |
1 files changed, 223 insertions, 101 deletions
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php index 21df87f9f..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,47 +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; -} - -/* Allow inline image blocks in horizontal menus */ -.elgg-menu-hz .elgg-body:after { - content: '.'; -} - -/* *************************************** BREADCRUMBS *************************************** */ .elgg-breadcrumbs { @@ -135,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; @@ -163,30 +127,46 @@ } .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: 7000; + z-index: 1; } .elgg-menu-site > li > a { @@ -199,7 +179,6 @@ text-decoration: none; } - .elgg-menu-site-default { position: absolute; bottom: 0; @@ -212,60 +191,78 @@ margin-right: 1px; } -.elgg-menu-site-default > li > a {color: white} +.elgg-menu-site-default > li > a { + color: white; +} + +.elgg-menu-site > li > ul { + display: none; + background-color: white; +} +.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; + -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } .elgg-menu-site-more { - display:none; - position:relative; + position: relative; left: -1px; width: 100%; - 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); - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); -} + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; -li:hover > .elgg-menu-site-more { - display:block; + -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-more > li > a { - background: white; - color: #555555; + 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-more > li > a:hover { background: #4690D6; color: white; } + .elgg-menu-site-more > li:last-child > a, .elgg-menu-site-more > li:last-child > a:hover { - -moz-border-radius: 0 0 4px 4px; -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; + font-size: smaller; margin-right: 4px; } @@ -273,11 +270,12 @@ li:hover > .elgg-menu-site-more { TITLE *************************************** */ .elgg-menu-title { - float:right; + float: right; } .elgg-menu-title > li { - display:inline-block + display: inline-block; + margin-left: 4px; } /* *************************************** @@ -285,33 +283,38 @@ li:hover > .elgg-menu-site-more { *************************************** */ .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 { @@ -323,12 +326,19 @@ li:hover > .elgg-menu-site-more { /* *************************************** 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 { @@ -363,15 +373,20 @@ li:hover > .elgg-menu-site-more { 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; @@ -384,7 +399,7 @@ li:hover > .elgg-menu-site-more { font-size: 92%; } .elgg-menu-hover a:hover { - background: #cccccc; + background: #ccc; text-decoration: none; } .elgg-menu-hover-admin a { @@ -396,12 +411,12 @@ li:hover > .elgg-menu-site-more { } /* *************************************** - FOOTER + SITE FOOTER *************************************** */ .elgg-menu-footer > li, .elgg-menu-footer > li > a { display: inline-block; - color:#999; + color: #999; } .elgg-menu-footer > li:after { @@ -409,26 +424,77 @@ li:hover > .elgg-menu-site-more { 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; +} + +/* *************************************** + 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; +} /* *************************************** LONGTEXT @@ -436,3 +502,59 @@ li:hover > .elgg-menu-site-more { .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; +} |
