popover style for apps and user dropdown menus

diff --git a/core/css/header.css b/core/css/header.css
index c2d485de323c1d707f5dbe8706a6eb22bd870b72..f0f8b3a97fe794f5034558c51832004c7af3a201 100644 (file)
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -139,19 +139,39 @@
 
 #navigation {
        position: fixed;
-       top: 45px;
+       top: 55px;
+       left: 10px;
        width: 265px;
        max-height: 85%;
        margin-top: 0;
        padding-bottom: 10px;
-       background-color: rgba(36, 40, 47, .97);
-       border-bottom-right-radius: 7px;
-       box-shadow: 0 0 7px rgba(29,45,68,.97);
+       background-color: rgba(0, 0, 0, .97);
+       /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
+       border-radius: 5px;
        display: none;
-       overflow-y: auto;
-       overflow-x: hidden;
+       /*overflow-y: auto;
+       overflow-x: hidden;*/
        z-index: 2000;
 }
+/* arrow look */
+#navigation:after, #expanddiv:after {
+       bottom: 100%;
+       left: 47%;
+       border: solid transparent;
+       content: " ";
+       height: 0;
+       width: 0;
+       position: absolute;
+       pointer-events: none;
+       border-color: rgba(0, 0, 0, 0);
+       border-bottom-color: rgba(0, 0, 0, .97);
+       border-width: 10px;
+       margin-left: -10px;
+}
+#expanddiv:after {
+       left: 75%;
+}
+
 #navigation, #navigation * {
        -moz-box-sizing:border-box;
        box-sizing:border-box;
@@ -182,15 +202,15 @@
        /* icon opacity and hover effect */
        #navigation a img,
        #navigation a span {
-               /* 50% opacity when inactive */
-               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-               opacity: .5;
+               -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+               opacity: .7;
        }
-       #navigation a:hover img, #navigation a:focus img,
-       #navigation a:hover span, #navigation a:focus span,
+       #navigation a:hover img,
+       #navigation a:focus img,
+       #navigation a:hover span,
+       #navigation a:focus span,
        #navigation a.active img,
        #navigation a.active span {
-                /* full opacity for the active app or when hovered/focused */
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                opacity: 1;
        }
@@ -289,13 +309,13 @@
 }
 #expanddiv {
        position: absolute;
-       right: 0;
-       top: 45px;
+       right: 10px;
+       top: 55px;
        z-index: 2000;
        display: none;
-       background-color: #383c43;
-       border-bottom-left-radius: 7px;
-       box-shadow: 0 0 7px rgb(29,45,68);
+       background-color: rgba(0, 0, 0, .97);
+       /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
+       border-radius: 5px;
        -moz-box-sizing: border-box; box-sizing: border-box;
 }
        #expanddiv a {

diff --git a/core/js/js.js b/core/js/js.js
index 00adcc514bc911e1d0a5292482f891b78cf95057..378af83d090ba48f5f1fbfe7abd76e4f38c18c71 100644 (file)
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -477,7 +477,7 @@ var OC={
                $menuEl.addClass('menu');
                $toggle.on('click.menu', function(event) {
                        if ($menuEl.is(OC._currentMenu)) {
-                               $menuEl.slideUp(OC.menuSpeed);
+                               $menuEl.hide();
                                OC._currentMenu = null;
                                OC._currentMenuToggle = null;
                                return false;
@@ -487,7 +487,7 @@ var OC={
                                // close it
                                OC._currentMenu.hide();
                        }
-                       $menuEl.slideToggle(OC.menuSpeed);
+                       $menuEl.toggle();
                        OC._currentMenu = $menuEl;
                        OC._currentMenuToggle = $toggle;
                        return false;
@@ -500,7 +500,7 @@ var OC={
        unregisterMenu: function($toggle, $menuEl) {
                // close menu if opened
                if ($menuEl.is(OC._currentMenu)) {
-                       $menuEl.slideUp(OC.menuSpeed);
+                       $menuEl.hide();
                        OC._currentMenu = null;
                        OC._currentMenuToggle = null;
                }
@@ -1128,7 +1128,7 @@ function initCore() {
                }
        });
        $('#settings #expand').click(function(event) {
-               $('#settings #expanddiv').slideToggle(OC.menuSpeed);
+               $('#settings #expanddiv').toggle();
                event.stopPropagation();
        });
        $('#settings #expanddiv').click(function(event){
@@ -1136,7 +1136,7 @@ function initCore() {
        });
        //hide the user menu when clicking outside it
        $(document).click(function(){
-               $('#settings #expanddiv').slideUp(OC.menuSpeed);
+               $('#settings #expanddiv').hide();
        });
 
        // all the tipsy stuff needs to be here (in reverse order) to work
@@ -1159,7 +1159,7 @@ function initCore() {
                        return false;
                }
                if (OC._currentMenu) {
-                       OC._currentMenu.slideUp(OC.menuSpeed);
+                       OC._currentMenu.hide();
                }
                OC._currentMenu = null;
                OC._currentMenuToggle = null;