put explanatory text directly in popup

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

core/css/apps.css

@@ -333,7 +333,8 @@
 	opacity: .5 !important;
 }
 .bubble .action:hover,
-.bubble .action:focus {
+.bubble .action:focus,
+.bubble .action.active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 	filter: alpha(opacity=100) !important;
 	opacity: 1 !important;
@@ -646,7 +647,8 @@ em {
 }
 
 .popovermenu .menuitem:hover,
-.popovermenu .menuitem:focus {
+.popovermenu .menuitem:focus,
+.popovermenu .menuitem.active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;

core/css/header.css

@@ -227,8 +227,8 @@
 	#apps-management a:hover span,
 	#apps-management a:focus span,
 	#apps-management a.active span {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-		opacity: .75;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+		opacity: 1;
 	}
 
 #navigation .app-icon {
@@ -372,8 +372,8 @@
 	#expanddiv a:focus,
 	#expanddiv a:active,
 	#expanddiv a.active {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-		opacity: .75;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+		opacity: 1;
 	}
 
 /* do not show display name when profile picture is present */

settings/css/settings.css

@@ -90,9 +90,11 @@ input#openid, input#webdav { width:20em; }
 #personal-settings-container > div h2 span[class^="icon-"],
 #personal-settings-avatar-container h2 span[class^="icon-"] {
 	display: inline-block;
-	margin-left: 5px;
-	background-size: 110%;
-	opacity: 0.3;
+	padding: 8px;
+	margin-left: -5px;
+	margin-bottom: -8px;
+	background-size: 22px;
+	opacity: .3;
 	cursor: pointer;
 }
 .personal-settings-setting-box input[type="text"],
@@ -112,10 +114,16 @@ input#openid, input#webdav { width:20em; }
 .federationScopeMenu.bubble::after {
 	right: 50%;
 	transform: translate(50%, 0);
+	margin-right: -8px;
 }
-.federationScopeMenu.popovermenu {
-	font-weight: 100;
-	font-size: medium;
+.federationScopeMenu.popovermenu a.menuitem,
+.federationScopeMenu.popovermenu label.menuitem,
+.federationScopeMenu.popovermenu .menuitem {
+	font-size: 12.8px;
+	line-height: 1.6em;
+}
+.federationScopeMenu.popovermenu .menuitem .menuitem-text-detail {
+	opacity: .75;
 }
 
 #lostpassword,

settings/js/federationscopemenu.js

@@ -16,7 +16,7 @@
 		'<ul>' +
 		'{{#each items}}' +
 		'<li>' +
-		'<a href="#" class="menuitem action action-{{name}} permanent" data-action="{{name}}" title="{{tooltip}}">' +
+		'<a href="#" class="menuitem action action-{{name}} permanent {{#if active}}active{{/if}}" data-action="{{name}}">' +
 			'{{#if icon}}<img class="icon" src="{{icon}}"/>' +
 			'{{else}}'+
 				'{{#if iconClass}}' +
@@ -25,7 +25,8 @@
 				'<span class="no-icon"></span>' +
 				'{{/if}}' +
 			'{{/if}}' +
-			'<span>{{displayName}}</span></a>' +
+			'<p><strong class="menuitem-text">{{displayName}}</strong><br>' +
+			'<span class="menuitem-text-detail">{{tooltip}}</span></p></a>' +
 		'</li>' +
 		'{{/each}}' +
 		'</ul>';
@@ -134,4 +135,3 @@
 	OC.Settings.FederationScopeMenu = FederationScopeMenu;
 
 })();
-