|
|
@@ -1,3 +1,10 @@ |
|
|
|
/** |
|
|
|
* @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com) |
|
|
|
* |
|
|
|
* @license GNU AGPL version 3 or any later version |
|
|
|
* |
|
|
|
*/ |
|
|
|
|
|
|
|
/* prevent ugly selection effect on accidental selection */ |
|
|
|
|
|
|
|
#header, #navigation, #expanddiv { |
|
|
@@ -25,7 +32,6 @@ |
|
|
|
} |
|
|
|
|
|
|
|
/* HEADERS ------------------------------------------------------------------ */ |
|
|
|
|
|
|
|
#body-user #header, #body-settings #header, #body-public #header { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
@@ -39,7 +45,6 @@ |
|
|
|
} |
|
|
|
|
|
|
|
/* LOGO and APP NAME -------------------------------------------------------- */ |
|
|
|
|
|
|
|
#nextcloud { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
@@ -88,6 +93,16 @@ |
|
|
|
padding-top: 18px; |
|
|
|
padding-right: 10px; |
|
|
|
} |
|
|
|
/* show caret indicator next to logo to make clear it is tappable */ |
|
|
|
.icon-caret { |
|
|
|
display: inline-block; |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
margin: 0; |
|
|
|
margin-top: -21px; |
|
|
|
padding: 0; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* hover effect for app switcher label */ |
|
|
@@ -123,7 +138,6 @@ |
|
|
|
} |
|
|
|
|
|
|
|
/* show appname next to logo */ |
|
|
|
|
|
|
|
.header-appname { |
|
|
|
display: inline-block; |
|
|
|
position: relative; |
|
|
@@ -136,26 +150,14 @@ |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
/* show caret indicator next to logo to make clear it is tappable */ |
|
|
|
|
|
|
|
#header .icon-caret { |
|
|
|
display: inline-block; |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
margin: 0; |
|
|
|
margin-top: -21px; |
|
|
|
padding: 0; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
/* do not show menu toggle on public share links as there is no menu */ |
|
|
|
|
|
|
|
#body-public #header .icon-caret { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* NAVIGATION --------------------------------------------------------------- */ |
|
|
|
|
|
|
|
#navigation { |
|
|
|
position: fixed; |
|
|
|
top: 45px; |
|
|
@@ -170,6 +172,7 @@ |
|
|
|
border-top-left-radius: 0; |
|
|
|
border-top-right-radius: 0; |
|
|
|
display: none; |
|
|
|
box-sizing: border-box; |
|
|
|
/*overflow-y: auto; |
|
|
|
overflow-x: hidden;*/ |
|
|
|
z-index: 2000; |
|
|
@@ -185,37 +188,8 @@ |
|
|
|
border-bottom-color: rgba(255, 255, 255, 0.97); |
|
|
|
border-width: 10px; |
|
|
|
margin-left: -10px; |
|
|
|
left: 47%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* arrow look */ |
|
|
|
|
|
|
|
#expanddiv:after { |
|
|
|
bottom: 100%; |
|
|
|
border: solid transparent; |
|
|
|
content: ' '; |
|
|
|
height: 0; |
|
|
|
width: 0; |
|
|
|
position: absolute; |
|
|
|
pointer-events: none; |
|
|
|
border-color: rgba(0, 0, 0, 0); |
|
|
|
border-bottom-color: rgba(255, 255, 255, 0.97); |
|
|
|
border-width: 10px; |
|
|
|
margin-left: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* position of dropdown arrow */ |
|
|
|
|
|
|
|
#navigation:after { |
|
|
|
left: 47%; |
|
|
|
} |
|
|
|
|
|
|
|
#expanddiv:after { |
|
|
|
right: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
#navigation { |
|
|
|
box-sizing: border-box; |
|
|
|
* { |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
@@ -245,7 +219,10 @@ |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; |
|
|
|
opacity: .5; |
|
|
|
} |
|
|
|
&:hover svg, &:focus svg, &:hover span, &:focus span { |
|
|
|
&:hover svg, |
|
|
|
&:focus svg, |
|
|
|
&:hover span, |
|
|
|
&:focus span { |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
@@ -256,26 +233,30 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* icon opacity and hover effect */ |
|
|
|
|
|
|
|
#apps-management a { |
|
|
|
&:hover svg, &:focus svg, &.active svg, &:hover span, &:focus span, &.active span { |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; |
|
|
|
opacity: 1; |
|
|
|
.app-icon { |
|
|
|
margin: 0 auto; |
|
|
|
padding: 0; |
|
|
|
max-height: 32px; |
|
|
|
max-width: 32px; |
|
|
|
} |
|
|
|
/* loading feedback for apps */ |
|
|
|
.app-loading { |
|
|
|
.icon-loading-dark { |
|
|
|
display: inline !important; |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
left: 24px; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
} |
|
|
|
.app-icon { |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#navigation .app-icon { |
|
|
|
margin: 0 auto; |
|
|
|
padding: 0; |
|
|
|
max-height: 32px; |
|
|
|
max-width: 32px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Apps management */ |
|
|
|
|
|
|
|
#apps-management { |
|
|
|
min-height: initial; |
|
|
|
height: initial; |
|
|
@@ -285,23 +266,16 @@ |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; |
|
|
|
opacity: .3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* loading feedback for apps */ |
|
|
|
|
|
|
|
#navigation .app-loading { |
|
|
|
.icon-loading-dark { |
|
|
|
display: inline !important; |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
left: 24px; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
} |
|
|
|
.app-icon { |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; |
|
|
|
opacity: 0; |
|
|
|
/* icon opacity and hover effect */ |
|
|
|
&:hover svg, |
|
|
|
&:focus svg, |
|
|
|
&.active svg, |
|
|
|
&:hover span, |
|
|
|
&:focus span, |
|
|
|
&.active span { |
|
|
|
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@@ -313,7 +287,6 @@ |
|
|
|
/* USER MENU -----------------------------------------------------------------*/ |
|
|
|
|
|
|
|
/* info part on the right, used e.g. for info on who shared something */ |
|
|
|
|
|
|
|
.header-right { |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
@@ -325,21 +298,6 @@ |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
/* Profile picture in header */ |
|
|
|
|
|
|
|
#header .avatardiv { |
|
|
|
float: left; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 8px; |
|
|
|
cursor: pointer; |
|
|
|
height: 32px; |
|
|
|
width: 32px; |
|
|
|
img { |
|
|
|
opacity: 1; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#settings { |
|
|
|
float: right; |
|
|
|
color: #ddd; |
|
|
@@ -352,6 +310,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* User menu on the right */ |
|
|
|
#expand { |
|
|
|
display: block; |
|
|
|
padding: 7px 30px 6px 10px; |
|
|
@@ -374,6 +333,24 @@ |
|
|
|
.icon-caret { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* Profile picture in header */ |
|
|
|
.avatardiv { |
|
|
|
float: left; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 8px; |
|
|
|
cursor: pointer; |
|
|
|
height: 32px; |
|
|
|
width: 32px; |
|
|
|
img { |
|
|
|
opacity: 1; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
/* do not show display name when profile picture is present */ |
|
|
|
&.avatardiv-shown + #expandDisplayName { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#expanddiv { |
|
|
@@ -389,8 +366,19 @@ |
|
|
|
border-top-right-radius: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
&:after { |
|
|
|
/* position of dropdown arrow */ |
|
|
|
right: 15px; |
|
|
|
border-color: rgba(0, 0, 0, 0); |
|
|
|
border-bottom-color: rgba(255, 255, 255, 1); |
|
|
|
bottom: 100%; |
|
|
|
border: solid transparent; |
|
|
|
content: ' '; |
|
|
|
height: 0; |
|
|
|
width: 0; |
|
|
|
position: absolute; |
|
|
|
pointer-events: none; |
|
|
|
border-width: 10px; |
|
|
|
margin-left: -10px; |
|
|
|
} |
|
|
|
a { |
|
|
|
display: block; |
|
|
@@ -410,14 +398,3 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* do not show display name when profile picture is present */ |
|
|
|
|
|
|
|
#header { |
|
|
|
.avatardiv.avatardiv-shown + #expandDisplayName { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
#expand { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |