Merge pull request #627 from nextcloud/white-app-menu
Change app menu to white background with dark icons
This commit is contained in:
commit
3728479beb
|
@ -151,7 +151,7 @@
|
|||
max-height: 85%;
|
||||
margin-top: 0;
|
||||
padding-bottom: 10px;
|
||||
background-color: rgba(0, 0, 0, .97);
|
||||
background-color: rgba(255, 255, 255, .97);
|
||||
box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
|
||||
border-radius: 3px;
|
||||
border-top-left-radius: 0;
|
||||
|
@ -171,7 +171,7 @@
|
|||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
border-bottom-color: rgba(0, 0, 0, .97);
|
||||
border-bottom-color: rgba(255, 255, 255, .97);
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
@ -204,25 +204,31 @@
|
|||
padding-left: 0;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
/* icon opacity and hover effect */
|
||||
#navigation a img,
|
||||
#navigation a svg,
|
||||
#navigation a span {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
opacity: .7;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
opacity: .5;
|
||||
}
|
||||
#navigation a:hover img,
|
||||
#navigation a:focus img,
|
||||
#navigation a:hover svg,
|
||||
#navigation a:focus svg,
|
||||
#navigation a:hover span,
|
||||
#navigation a:focus span,
|
||||
#navigation a.active img,
|
||||
#navigation a.active span {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
opacity: 1;
|
||||
#navigation a.active svg,
|
||||
#navigation a.active span,
|
||||
#apps-management a:hover svg,
|
||||
#apps-management a:focus svg,
|
||||
#apps-management a.active svg,
|
||||
#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;
|
||||
}
|
||||
|
||||
#navigation .app-icon {
|
||||
|
@ -234,12 +240,15 @@
|
|||
|
||||
/* Apps management */
|
||||
#apps-management {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
opacity: .6;
|
||||
min-height: initial;
|
||||
height: initial;
|
||||
margin: 0;
|
||||
}
|
||||
#apps-management a svg,
|
||||
#apps-management a span {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
|
||||
/* loading feedback for apps */
|
||||
|
@ -252,8 +261,8 @@
|
|||
height: 32px;
|
||||
}
|
||||
#navigation .app-loading .app-icon {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
opacity: .1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#apps {
|
||||
|
@ -351,8 +360,8 @@
|
|||
height: 40px;
|
||||
color: #000;
|
||||
padding: 4px 12px 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
opacity: .7;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
opacity: .5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a img {
|
||||
|
@ -363,8 +372,8 @@
|
|||
#expanddiv a:focus,
|
||||
#expanddiv a:active,
|
||||
#expanddiv a.active {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
/* do not show display name when profile picture is present */
|
||||
|
|
|
@ -113,7 +113,10 @@
|
|||
<li data-id="<?php p($entry['id']); ?>">
|
||||
<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
|
||||
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="app-icon" alt="" src="<?php print_unescaped($entry['icon']); ?>">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
|
||||
<image x="0" y="0" width="32" height="32" preserveAspectRatio="true" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon']); ?>" class="app-icon"/>
|
||||
</svg>
|
||||
<div class="icon-loading-dark" style="display:none;"></div>
|
||||
<span>
|
||||
<?php p($entry['name']); ?>
|
||||
|
@ -128,7 +131,10 @@
|
|||
<li id="apps-management">
|
||||
<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
|
||||
<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="app-icon" alt="" src="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" class="app-icon">
|
||||
<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
|
||||
<image x="0" y="0" width="32" height="32" preserveAspectRatio="true" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"/>
|
||||
</svg>
|
||||
<div class="icon-loading-dark" style="display:none;"></div>
|
||||
<span>
|
||||
<?php p($l->t('Apps')); ?>
|
||||
|
|
Loading…
Reference in New Issue