summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--core/css/header.scss194
1 files changed, 91 insertions, 103 deletions
diff --git a/core/css/header.scss b/core/css/header.scss
index d77114e484d..5a5d6276e0e 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -175,6 +175,7 @@
/* show appname next to logo */
.header-appname {
+ display: inline-block;
position: relative;
color: #fff;
font-size: 16px;
@@ -185,8 +186,6 @@
vertical-align: middle;
}
-
-
/* do not show menu toggle on public share links as there is no menu */
#body-public #header .icon-caret {
display: none;
@@ -201,8 +200,8 @@
max-height: 85%;
margin-top: 0;
padding-bottom: 10px;
- background-color: rgba(255, 255, 255, 0.97);
- box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
+ background-color: rgba(255, 255, 255, .97);
+ box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
border-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -219,7 +218,7 @@
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
- border-bottom-color: rgba(255, 255, 255, 0.97);
+ border-bottom-color: rgba(255, 255, 255, .97);
border-width: 9px;
margin-left: -9px;
}
@@ -236,7 +235,7 @@
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
- border-bottom-color: rgba(255, 255, 255, 0.97);
+ border-bottom-color: rgba(255, 255, 255, .97);
border-width: 10px;
margin-left: -10px;
}
@@ -418,7 +417,7 @@
z-index: 2000;
display: none;
background: rgb(255, 255, 255);
- box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
+ box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
border-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -465,129 +464,118 @@
width: auto;
clear: both;
height: 44px;
-}
-#appmenu ul {
-}
-
-#appmenu li {
- float: left;
- display: inline-block;
- vertical-align: top !important;
- height: 20px;
- padding: 12px;
-}
+ li {
+ float: left;
+ display: inline-block;
+ vertical-align: top !important;
+ height: 20px;
+ padding: 12px;
-#appmenu li a {
- opacity: 0.6;
- margin: 0;
- text-align: center;
- vertical-align: top !important;
- position: relative;
- height: 44px;
-}
+ a {
+ opacity: 0.6;
+ margin: 0;
+ text-align: center;
+ vertical-align: top !important;
+ position: relative;
+ height: 44px;
+ }
+ }
-#appmenu li:hover a,
-#appmenu li a.active {
- opacity: 1;
-}
+ li:hover a,
+ li a.active {
+ opacity: 1;
-#appmenu li img,
-#appmenu .icon-more-white {
- display: inline-block;
- width: 20px;
- height: 20px;
-}
+ }
-#appmenu li span {
- display: none;
- position: absolute;
- overflow: visible;
- left: 0;
- background-color: #FFF;
- border: 1px solid #000;
- color: #000;
-}
+ li img,
+ .icon-more-white {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ }
-#appmenu li:hover a {
- position: relative
-}
+ li span {
+ display: none;
+ position: absolute;
+ overflow: visible;
+ background-color: rgba(255, 255, 255, .97);
+ white-space: nowrap;
+ border: none;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ margin-top: 0;
+ color: rgba(0, 0, 0, .6);
+ width: auto;
+ left: 50%;
+ top: 31px;
+ transform: translateX(-50%);
+ padding: 4px 10px;
+ -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
+ -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
+ -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
+ -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
+ filter: drop-shadow(0 0 5px rgba(150, 150, 150, .75));
+ }
+
+ li:hover span {
+ display: inline-block;
+ }
-#appmenu li:hover span {
- display: inline-block;
- white-space: nowrap;
- position: absolute;
-}
-#appmenu li:hover span {
- background-color: white;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- margin-top: 0;
- border: none;
- color: #333;
- width: auto;
- left: 50%;
- top: 31px;
- transform: translateX(-50%);
- padding: 2px 10px;
- -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
- filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-}
+ li:hover a:before,
+ li a.active:before {
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border: 0 solid transparent;
+ border-bottom-color: white;
+ border-width: 10px;
+ transform: translateX(-50%);
+ left: 50%;
+ top: 14px;
+ z-index: 100;
+ display: block;
+ }
+ &.menu-open li:hover a:before,
+ &.menu-open li a.active:before {
+ display: none !important;
+ }
-#appmenu li:hover span {
- display: block;
-}
+ /* do not show active indicator when hovering other icons */
+ &:hover li:not(:hover) a:before {
+ display: none;
+ }
-#appmenu li:hover a:before,
-#appmenu li a.active:before {
- content: " ";
- border: solid transparent;
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-bottom-color: white;
- border-width: 10px;
- transform: translateX(-50%);
- left: 50%;
- top: 14px;
- z-index: 100;
- display: block;
}
-// do not show active indicator when hovering other icons
-#appmenu:hover li:not(:hover) a:before {
- display:none;
-}
+/* use popover menu on mobile and small screens */
@media only screen and (max-width: 768px) {
#header .header-appname-container {
display: inline-block !important;
}
+
#appmenu {
display: none;
}
- #apps {
- .in-header {
- display: inline-block;
- }
+ #apps .in-header {
+ display: inline-block;
}
#navigation {
position: fixed;
top: 45px;
left: 10px;
- }
- #navigation:after {
- left: 214px;
+ &:after {
+ left: 214px;
+ }
}
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-15 13:46:27 +0000