rearrange CSS, remove duplicate code
This commit is contained in:
Jan-Christoph Borchardt
parent
d831afc792
commit
f1ce58de3e
|
|
@ -1,3 +1,17 @@
|
|||
/* prevent ugly selection effect on accidental selection */
|
||||
#header,
|
||||
#navigation,
|
||||
#expanddiv {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* LOGO and APP NAME -------------------------------------------------------- */
|
||||
|
||||
#header .logo {
|
||||
background-image: url(../img/logo.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -64,28 +78,30 @@
|
|||
}
|
||||
|
||||
|
||||
/* toggle navigation */
|
||||
|
||||
/* NAVIGATION --------------------------------------------------------------- */
|
||||
|
||||
#content-wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: fixed;
|
||||
top: 45px;
|
||||
bottom: initial;
|
||||
width: 265px;
|
||||
max-height: 85%;
|
||||
margin-top: 0;
|
||||
top: 45px;
|
||||
background-color: rgba(36, 40, 47, .97);
|
||||
overflow-x: initial;
|
||||
border-bottom-right-radius: 7px;
|
||||
border-bottom: 1px #333 solid;
|
||||
border-right: 1px #333 solid;
|
||||
box-shadow: 0 0 7px rgba(29,45,68,.97);
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 150;
|
||||
}
|
||||
#navigation, #navigation * {
|
||||
box-sizing:border-box; -moz-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#navigation li {
|
||||
display: inline-block;
|
||||
|
|
@ -104,21 +120,48 @@
|
|||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
#navigation .icon {
|
||||
/* icon opacity and hover effect */
|
||||
#navigation a img,
|
||||
#navigation a span {
|
||||
/* 50% opacity when inactive */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
opacity: .5;
|
||||
}
|
||||
#navigation a:hover img, #navigation a:focus img,
|
||||
#navigation a:hover span, #navigation a:focus span {
|
||||
/* 80% opacity when hovered or focused */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
opacity: .8;
|
||||
}
|
||||
#navigation a.active img,
|
||||
#navigation a.active span {
|
||||
/* full opacity for the active app */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#navigation .app-icon {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
#navigation li:first-child .icon {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Apps management as sticky footer */
|
||||
#navigation .wrapper {
|
||||
min-height: initial;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Apps management */
|
||||
#apps-management {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60);
|
||||
opacity: .6;
|
||||
min-height: initial;
|
||||
height: initial;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -133,15 +176,56 @@
|
|||
background-color: rgba(0, 0, 0, .2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#navigation .app-loading .icon {
|
||||
#navigation .app-loading .app-icon {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
|
||||
/* shift to account for missing navigation */
|
||||
#body-user #controls,
|
||||
#body-settings #controls {
|
||||
padding-left: 0;
|
||||
|
||||
|
||||
/* USER MENU */
|
||||
#settings {
|
||||
float: right;
|
||||
color: #bbb;
|
||||
}
|
||||
#expand {
|
||||
display: block;
|
||||
padding: 7px 12px 6px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#expand:hover, #expand:focus, #expand:active { color:#fff; }
|
||||
#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
|
||||
#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
|
||||
#expanddiv {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 45px;
|
||||
z-index: 150;
|
||||
display: none;
|
||||
background-color: #383c43;
|
||||
border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
|
||||
box-shadow:0 0 7px rgb(29,45,68);
|
||||
-moz-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
padding: 4px 12px 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: .7;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a img {
|
||||
margin-bottom: -3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,16 +210,6 @@ input img, button img, .button img {
|
|||
}
|
||||
|
||||
|
||||
/* prevent ugly selection effect on accidental selection */
|
||||
#header,
|
||||
#navigation,
|
||||
#expanddiv {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLING */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
@ -324,11 +314,6 @@ input[type="submit"].enabled {
|
|||
border-bottom: 1px solid #e7e7e7;
|
||||
z-index: 50;
|
||||
}
|
||||
/* account for shift of controls bar due to app navigation */
|
||||
#body-user #controls,
|
||||
#body-settings #controls {
|
||||
padding-left: 80px;
|
||||
}
|
||||
#controls .button,
|
||||
#controls button,
|
||||
#controls input[type='submit'],
|
||||
|
|
@ -716,120 +701,6 @@ label.infield {
|
|||
|
||||
|
||||
|
||||
/* NAVIGATION ------------------------------------------------------------- */
|
||||
#navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
margin-top:45px;
|
||||
z-index: 75;
|
||||
background-color: #383c43;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-moz-box-sizing:border-box; box-sizing:border-box;
|
||||
}
|
||||
#apps {
|
||||
height: 100%;
|
||||
}
|
||||
#navigation a span {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */
|
||||
padding-bottom: 10px;
|
||||
/* prevent shift caused by scrollbar */
|
||||
padding-left: 8px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
/* icon opacity and hover effect */
|
||||
#navigation a img,
|
||||
#navigation a span {
|
||||
/* 50% opacity when inactive */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
opacity: .5;
|
||||
}
|
||||
#navigation a:hover img, #navigation a:focus img,
|
||||
#navigation a:hover span, #navigation a:focus span {
|
||||
/* 80% opacity when hovered or focused */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
opacity: .8;
|
||||
}
|
||||
#navigation a.active img,
|
||||
#navigation a.active span {
|
||||
/* full opacity for the active app */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
#navigation .icon {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 24px;
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
#navigation li:first-child .icon { /* special rule for Files icon as it's first */
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* Apps management as sticky footer, less obtrusive in the list */
|
||||
#apps-management {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* USER MENU */
|
||||
#settings {
|
||||
float: right;
|
||||
color: #bbb;
|
||||
}
|
||||
#expand {
|
||||
display: block;
|
||||
padding: 7px 12px 6px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#expand:hover, #expand:focus, #expand:active { color:#fff; }
|
||||
#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
|
||||
#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
|
||||
#expanddiv {
|
||||
position:absolute; right:0; top:45px; z-index:76; display:none;
|
||||
background-color: #383c43;
|
||||
border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
|
||||
box-shadow:0 0 7px rgb(29,45,68);
|
||||
-moz-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
padding: 4px 12px 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: .7;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a img {
|
||||
margin-bottom: -3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* VARIOUS REUSABLE SELECTORS */
|
||||
.hidden { display:none; }
|
||||
.bold { font-weight:bold; }
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<li data-id="<?php p($entry['id']); ?>">
|
||||
<a href="<?php print_unescaped($entry['href']); ?>" title=""
|
||||
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
|
||||
<img class="app-icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
|
||||
<div class="icon-loading-dark" style="display:none;"></div>
|
||||
<span>
|
||||
<?php p($entry['name']); ?>
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<li id="apps-management">
|
||||
<a href="<?php print_unescaped(OC_Helper::linkToRoute('settings_apps').'?installed'); ?>" title=""
|
||||
<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
|
||||
<img class="app-icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
|
||||
<span>
|
||||
<?php p($l->t('Apps')); ?>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue