You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1267 lines
22 KiB
1267 lines
22 KiB
/** |
|
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com> |
|
* @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch> |
|
* @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl> |
|
* @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net> |
|
* @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com> |
|
* @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de> |
|
* @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at> |
|
* @copyright Copyright (c) 2016, Raghu Nayyar <hey@raghunayyar.com> |
|
* @copyright Copyright (c) 2011-2017, Jan-Christoph Borchardt <hey@jancborchardt.net> |
|
* @copyright Copyright (c) 2019, Gary Kim <gary@garykim.dev> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
*/ |
|
|
|
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
outline: 0; |
|
font-weight: inherit; |
|
font-size: 100%; |
|
font-family: inherit; |
|
vertical-align: baseline; |
|
cursor: default; |
|
scrollbar-color: var(--color-border-dark) transparent; |
|
scrollbar-width: thin; |
|
} |
|
|
|
html, body { |
|
height: 100%; |
|
} |
|
|
|
article, aside, dialog, figure, footer, header, hgroup, nav, section { |
|
display: block; |
|
} |
|
|
|
body { |
|
line-height: 1.5; |
|
} |
|
|
|
table { |
|
border-collapse: separate; |
|
border-spacing: 0; |
|
white-space: nowrap; |
|
} |
|
|
|
caption, th, td { |
|
text-align: left; |
|
font-weight: normal; |
|
} |
|
|
|
table, td, th { |
|
vertical-align: middle; |
|
} |
|
|
|
a { |
|
border: 0; |
|
color: var(--color-main-text); |
|
text-decoration: none; |
|
cursor: pointer; |
|
* { |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
a.external { |
|
margin: 0 3px; |
|
text-decoration: underline; |
|
} |
|
|
|
input { |
|
cursor: pointer; |
|
* { |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
select, .button span, label { |
|
cursor: pointer; |
|
} |
|
|
|
ul { |
|
list-style: none; |
|
} |
|
|
|
body { |
|
background-color: var(--color-main-background); |
|
font-weight: normal; |
|
font-size: .8em; |
|
line-height: 1.6em; |
|
font-family: var(--font-face); |
|
color: var(--color-main-text); |
|
} |
|
|
|
.two-factor-header { |
|
text-align: center; |
|
} |
|
|
|
.two-factor-provider { |
|
text-align: center; |
|
width: 258px !important; |
|
display: inline-block; |
|
margin-bottom: 0 !important; |
|
background-color: var(--color-background-darker) !important; |
|
border: none !important; |
|
} |
|
|
|
.two-factor-link { |
|
display: inline-block; |
|
padding: 12px; |
|
color: var(--color-text-lighter); |
|
} |
|
|
|
.float-spinner { |
|
height: 32px; |
|
display: none; |
|
} |
|
|
|
#nojavascript { |
|
position: fixed; |
|
top: 0; |
|
bottom: 0; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 9000; |
|
text-align: center; |
|
background-color: var(--color-background-darker); |
|
color: var(--color-primary-text); |
|
line-height: 125%; |
|
font-size: 24px; |
|
div { |
|
display: block; |
|
position: relative; |
|
width: 50%; |
|
top: 35%; |
|
margin: 0px auto; |
|
} |
|
a { |
|
color: var(--color-primary-text); |
|
border-bottom: 2px dotted var(--color-main-background); |
|
&:hover, &:focus { |
|
color: var(--color-primary-text-dark); |
|
} |
|
} |
|
} |
|
|
|
/* SCROLLING */ |
|
|
|
::-webkit-scrollbar { |
|
width: 6px; |
|
height: 5px; |
|
} |
|
|
|
::-webkit-scrollbar-track-piece { |
|
background-color: transparent; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: var(--color-border-dark); |
|
border-radius: var(--border-radius); |
|
} |
|
|
|
|
|
/* SELECTION */ |
|
|
|
::selection { |
|
background-color: var(--color-primary-element); |
|
color: var(--color-primary-text); |
|
} |
|
|
|
|
|
/* CONTENT ------------------------------------------------------------------ */ |
|
|
|
#controls { |
|
box-sizing: border-box; |
|
@include position('sticky'); |
|
height: 44px; |
|
padding: 0; |
|
margin: 0; |
|
background-color: var(--color-main-background-translucent); |
|
z-index: 60; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
display: flex; |
|
top: $header-height; |
|
} |
|
|
|
/* position controls for apps with app-navigation */ |
|
|
|
.viewer-mode #app-navigation + #app-content #controls { |
|
left: 0; |
|
} |
|
|
|
#app-navigation * { |
|
box-sizing: border-box; |
|
} |
|
|
|
#controls .actions { |
|
> div, |
|
& { |
|
> .button, button { |
|
box-sizing: border-box; |
|
display: inline-block; |
|
display: flex; |
|
height: 36px; |
|
width: 36px; |
|
padding: 9px; // width - border - icon width = 18px |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.button.hidden { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */ |
|
|
|
#emptycontent, |
|
.emptycontent { |
|
color: var(--color-text-maxcontrast); |
|
text-align: center; |
|
margin-top: 30vh; |
|
width: 100%; |
|
#app-sidebar & { |
|
margin-top: 10vh; |
|
} |
|
.emptycontent-search { |
|
position: static; |
|
} |
|
h2 { |
|
margin-bottom: 10px; |
|
} |
|
[class^='icon-'], |
|
[class*='icon-'] { |
|
background-size: 64px; |
|
height: 64px; |
|
width: 64px; |
|
margin: 0 auto 15px; |
|
&:not([class^='icon-loading']), |
|
&:not([class*='icon-loading']) { |
|
opacity: .4; |
|
} |
|
} |
|
} |
|
|
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */ |
|
|
|
#datadirContent label { |
|
width: 100%; |
|
} |
|
|
|
/* strengthify wrapper */ |
|
|
|
/* General new input field look */ |
|
|
|
/* Nicely grouping input field sets */ |
|
|
|
.grouptop, .groupmiddle, .groupbottom { |
|
position: relative; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
/* Show password toggle */ |
|
|
|
#show, #dbpassword { |
|
position: absolute; |
|
right: 1em; |
|
top: .8em; |
|
float: right; |
|
} |
|
|
|
#show + label, #dbpassword + label { |
|
right: 21px; |
|
top: 15px !important; |
|
margin: -14px !important; |
|
padding: 14px !important; |
|
} |
|
|
|
#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { |
|
opacity: .8; |
|
} |
|
|
|
#show + label, #dbpassword + label, #personal-show + label { |
|
position: absolute !important; |
|
height: 20px; |
|
width: 24px; |
|
background-image: var(--icon-toggle-000); |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
opacity: .3; |
|
} |
|
|
|
/* Feedback for keyboard focus and mouse hover */ |
|
#show, |
|
#dbpassword, |
|
#personal-show { |
|
&:focus + label { |
|
opacity: 1; |
|
} |
|
+ label:hover { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
#show + label:before, #dbpassword + label:before, #personal-show + label:before { |
|
display: none; |
|
} |
|
|
|
#pass2, input[name='personal-password-clone'] { |
|
padding-right: 30px; |
|
} |
|
|
|
.personal-show-container { |
|
position: relative; |
|
display: inline-block; |
|
margin-right: 6px; |
|
} |
|
#personal-show + label { |
|
display: block; |
|
right: 0; |
|
margin-top: -43px; |
|
margin-right: -4px; |
|
padding: 22px; |
|
} |
|
|
|
/* Warnings and errors are the same */ |
|
|
|
#body-user .warning, #body-settings .warning { |
|
margin-top: 8px; |
|
padding: 5px; |
|
border-radius: var(--border-radius); |
|
color: var(--color-primary-text); |
|
background-color: var(--color-warning); |
|
} |
|
|
|
.warning { |
|
legend, a { |
|
color: var(--color-primary-text) !important; |
|
font-weight: bold !important; |
|
} |
|
} |
|
|
|
.error { |
|
a { |
|
color: var(--color-primary-text) !important; |
|
font-weight: bold !important; |
|
&.button { |
|
color: var(--color-text-lighter) !important; |
|
display: inline-block; |
|
text-align: center; |
|
} |
|
} |
|
pre { |
|
white-space: pre-wrap; |
|
text-align: left; |
|
} |
|
} |
|
|
|
.error-wide { |
|
width: 700px; |
|
margin-left: -200px !important; |
|
.button { |
|
color: black !important; |
|
} |
|
} |
|
|
|
.warning-input { |
|
border-color: var(--color-error) !important; |
|
} |
|
|
|
/* fixes for update page TODO should be fixed some time in a proper way */ |
|
/* this is just for an error while updating the ownCloud instance */ |
|
|
|
/* Alternative Logins */ |
|
|
|
#alternative-logins { |
|
legend { |
|
margin-bottom: 10px; |
|
} |
|
li { |
|
height: 40px; |
|
display: inline-block; |
|
white-space: nowrap; |
|
} |
|
} |
|
|
|
/* Log in and install button */ |
|
|
|
#remember_login { |
|
margin: 18px 5px 0 16px !important; |
|
} |
|
|
|
/* Sticky footer */ |
|
|
|
/* round profile photos */ |
|
|
|
.avatar, .avatardiv { |
|
border-radius: 50%; |
|
flex-shrink: 0; |
|
img { |
|
border-radius: 50%; |
|
flex-shrink: 0; |
|
} |
|
} |
|
|
|
td.avatar { |
|
border-radius: 0; |
|
} |
|
|
|
#notification-container { |
|
left: 50%; |
|
max-width: 60%; |
|
position: fixed; |
|
top: 0; |
|
text-align: center; |
|
transform: translateX(-50%); |
|
z-index: 8000; |
|
} |
|
|
|
#notification { |
|
margin: 0 auto; |
|
z-index: 8000; |
|
background-color: var(--color-main-background); |
|
border: 0; |
|
padding: 1px 8px; |
|
display: none; |
|
position: relative; |
|
top: 0; |
|
border-bottom-left-radius: 3px; |
|
border-bottom-right-radius: 3px; |
|
opacity: .9; |
|
span { |
|
cursor: pointer; |
|
margin-left: 1em; |
|
} |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
max-height: 100px; |
|
.row { |
|
position: relative; |
|
.close { |
|
display: inline-block; |
|
vertical-align: middle; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
margin-top: 2px; |
|
} |
|
&.closeable { |
|
padding-right: 20px; |
|
} |
|
} |
|
} |
|
|
|
tr .action:not(.permanent), .selectedActions a { |
|
opacity: 0; |
|
} |
|
|
|
tr { |
|
&:hover .action, &:focus .action, .action.permanent { |
|
opacity: .5; |
|
} |
|
} |
|
|
|
.selectedActions a { |
|
opacity: .5; |
|
} |
|
|
|
tr .action { |
|
width: 16px; |
|
height: 16px; |
|
} |
|
|
|
.header-action { |
|
opacity: .8; |
|
} |
|
|
|
tr { |
|
&:hover .action:hover, &:focus .action:focus { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.selectedActions a { |
|
&:hover, &:focus { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.header-action { |
|
&:hover, &:focus { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
tbody tr { |
|
&:hover, &:focus, &:active { |
|
background-color: var(--color-background-dark); |
|
} |
|
} |
|
|
|
code { |
|
font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace; |
|
} |
|
|
|
.pager { |
|
list-style: none; |
|
float: right; |
|
display: inline; |
|
margin: .7em 13em 0 0; |
|
li { |
|
display: inline-block; |
|
} |
|
} |
|
|
|
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.ui-icon-circle-triangle-e { |
|
background-image: url('../img/actions/play-next.svg?v=1'); |
|
} |
|
|
|
.ui-icon-circle-triangle-w { |
|
background-image: url('../img/actions/play-previous.svg?v=1'); |
|
} |
|
|
|
/* ---- jQuery UI datepicker ---- */ |
|
.ui-widget.ui-datepicker { |
|
margin-top: 10px; |
|
padding: 4px 8px; |
|
width: auto; |
|
border-radius: var(--border-radius); |
|
border: none; |
|
z-index: 1600 !important; // above sidebar |
|
|
|
.ui-state-default, |
|
.ui-widget-content .ui-state-default, |
|
.ui-widget-header .ui-state-default { |
|
border: 1px solid transparent; |
|
background: inherit; |
|
} |
|
.ui-widget-header { |
|
padding: 7px; |
|
font-size: 13px; |
|
border: none; |
|
background-color: var(--color-main-background); |
|
color: var(--color-main-text); |
|
|
|
.ui-datepicker-title { |
|
line-height: 1; |
|
font-weight: normal; |
|
} |
|
.ui-icon { |
|
opacity: .5; |
|
|
|
&.ui-icon-circle-triangle-e { |
|
background: url("../img/actions/arrow-right.svg") center center no-repeat; |
|
} |
|
&.ui-icon-circle-triangle-w { |
|
background: url("../img/actions/arrow-left.svg") center center no-repeat; |
|
} |
|
} |
|
.ui-state-hover .ui-icon { |
|
opacity: 1; |
|
} |
|
} |
|
.ui-datepicker-calendar { |
|
th { |
|
font-weight: normal; |
|
color: var(--color-text-lighter); |
|
opacity: .8; |
|
width: 26px; |
|
padding: 2px; |
|
} |
|
tr:hover { |
|
background-color: inherit; |
|
} |
|
td { |
|
&.ui-datepicker-today a:not(.ui-state-hover) { |
|
background-color: var(--color-background-darker); |
|
} |
|
|
|
&.ui-datepicker-current-day a.ui-state-active, |
|
.ui-state-hover, |
|
.ui-state-focus { |
|
background-color: var(--color-primary); |
|
color: var(--color-primary-text); |
|
font-weight: bold; |
|
} |
|
|
|
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover), |
|
.ui-priority-secondary:not(.ui-state-hover) { |
|
color: var(--color-text-lighter); |
|
opacity: .8; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.ui-datepicker-prev, .ui-datepicker-next { |
|
border: var(--color-border-dark); |
|
background: var(--color-main-background); |
|
} |
|
|
|
|
|
/* ---- jQuery UI timepicker ---- */ |
|
.ui-widget.ui-timepicker { |
|
margin-top: 10px !important; |
|
width: auto !important; |
|
border-radius: var(--border-radius); |
|
z-index: 1600 !important; |
|
|
|
.ui-widget-content { |
|
border: none !important; |
|
} |
|
|
|
.ui-state-default, |
|
.ui-widget-content .ui-state-default, |
|
.ui-widget-header .ui-state-default { |
|
border: 1px solid transparent; |
|
background: inherit; |
|
} |
|
.ui-widget-header { |
|
padding: 7px; |
|
font-size: 13px; |
|
border: none; |
|
background-color: var(--color-main-background); |
|
color: var(--color-main-text); |
|
|
|
.ui-timepicker-title { |
|
line-height: 1; |
|
font-weight: normal; |
|
} |
|
} |
|
/* AM/PM fix */ |
|
table.ui-timepicker tr .ui-timepicker-hour-cell:first-child { |
|
margin-left: 30px; |
|
} |
|
.ui-timepicker-table { |
|
th { |
|
font-weight: normal; |
|
color: var(--color-text-lighter); |
|
opacity: .8; |
|
&.periods { |
|
padding: 0; |
|
width: 30px; |
|
line-height: 30px; |
|
} |
|
} |
|
tr:hover { |
|
background-color: inherit; |
|
} |
|
td { |
|
&.ui-timepicker-hour-cell a.ui-state-active, |
|
&.ui-timepicker-minute-cell a.ui-state-active, |
|
.ui-state-hover, |
|
.ui-state-focus { |
|
background-color: var(--color-primary); |
|
color: var(--color-primary-text); |
|
font-weight: bold; |
|
} |
|
|
|
&.ui-timepicker-minutes:not(.ui-state-hover) { |
|
color: var(--color-text-lighter); |
|
} |
|
|
|
&.ui-timepicker-hours { |
|
border-right: 1px solid var(--color-border); |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* ---- jQuery UI datepicker & timepicker global rules ---- */ |
|
.ui-widget.ui-datepicker .ui-datepicker-calendar, |
|
.ui-widget.ui-timepicker table.ui-timepicker { |
|
tr { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
justify-content: space-between; |
|
td { |
|
flex: 1 1 auto; |
|
margin: 0; |
|
padding: 2px; |
|
height: 26px; |
|
width: 26px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
> * { |
|
border-radius: 50%; |
|
text-align: center; |
|
font-weight: normal; |
|
color: var(--color-main-text); |
|
display: block; |
|
line-height: 18px; |
|
width: 18px; |
|
height: 18px; |
|
padding: 3px; |
|
font-size: .9em; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* ---- DIALOGS ---- */ |
|
#oc-dialog-filepicker-content { |
|
position: relative; |
|
|
|
.dirtree { |
|
flex-wrap: wrap; |
|
padding-left: 12px; |
|
padding-right: 0px; |
|
box-sizing: border-box; |
|
|
|
div:first-child a { |
|
background-image: var(--icon-home-000); |
|
background-repeat: no-repeat; |
|
background-position: left center; |
|
} |
|
span { |
|
&:not(:last-child) { |
|
cursor: pointer; |
|
} |
|
&:last-child { |
|
font-weight: bold; |
|
} |
|
&:not(:last-child)::after { |
|
content: '>'; |
|
padding: 3px; |
|
} |
|
} |
|
} |
|
|
|
/* Grid view toggle */ |
|
#picker-view-toggle { |
|
position: absolute; |
|
background-color: transparent; |
|
border: none; |
|
margin: 0; |
|
padding: 22px; |
|
opacity: .5; |
|
right: 0; |
|
top: 0; |
|
|
|
&:hover, |
|
&:focus { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
// keyboard focus |
|
#picker-showgridview:focus + #picker-view-toggle { |
|
opacity: 1; |
|
} |
|
|
|
.actions.creatable { |
|
flex-wrap: wrap; |
|
padding: 0px; |
|
box-sizing: border-box; |
|
display: inline-flex; |
|
float: none; |
|
max-height: 36px; |
|
max-width: 36px; |
|
background-color: var(--color-background-dark); |
|
border: 1px solid var(--color-border-dark); |
|
border-radius: var(--border-radius-pill); |
|
position: relative; |
|
top: -5px; |
|
|
|
.icon.icon-add{ |
|
background-image: var(--icon-add-000); |
|
background-size: 16px 16px; |
|
width: 34px; |
|
height: 34px; |
|
margin: 0px; |
|
opacity: 0.5; |
|
} |
|
|
|
a { |
|
width: 36px; |
|
padding: 0px; |
|
position: static; |
|
} |
|
|
|
.menu { |
|
top:100%; |
|
margin:10px; |
|
margin-left: 1px; |
|
form { |
|
display:flex; |
|
margin:10px; |
|
} |
|
} |
|
|
|
} |
|
|
|
.filelist-container { |
|
box-sizing: border-box; |
|
display: inline-block; |
|
overflow-y: auto; |
|
height: 100%; |
|
/* overflow under the button row */ |
|
width: 100%; |
|
overflow-x: hidden; |
|
} |
|
.emptycontent { |
|
color: var(--color-text-maxcontrast); |
|
text-align: center; |
|
margin-top: 80px; |
|
width: 100%; |
|
display: none; |
|
} |
|
.filelist { |
|
background-color: var(--color-main-background); |
|
width: 100%; |
|
} |
|
#picker-filestable.filelist { |
|
/* prevent the filepicker to overflow */ |
|
min-width: initial; |
|
margin-bottom: 50px; |
|
thead { |
|
tr { |
|
border-bottom: 1px solid var(--color-border); |
|
background-color: var(--color-main-background); |
|
th { |
|
width: 80%; |
|
border: none; |
|
} |
|
} |
|
} |
|
th .columntitle { |
|
display: block; |
|
padding: 15px; |
|
height: 50px; |
|
box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
vertical-align: middle; |
|
} |
|
th .columntitle.name { |
|
padding-left: 5px; |
|
margin-left: 50px; |
|
} |
|
|
|
th .sort-indicator { |
|
width: 10px; |
|
height: 8px; |
|
margin-left: 5px; |
|
display: inline-block; |
|
vertical-align: text-bottom; |
|
opacity: .3; |
|
} |
|
.sort-indicator.hidden, |
|
th:hover .sort-indicator.hidden, |
|
th:focus .sort-indicator.hidden { |
|
visibility: hidden; |
|
} |
|
th:hover .sort-indicator.hidden, |
|
th:focus .sort-indicator.hidden { |
|
visibility: visible; |
|
} |
|
|
|
td { |
|
padding: 14px; |
|
border-bottom: 1px solid var(--color-border); |
|
} |
|
tr:last-child td { |
|
border-bottom: none; |
|
} |
|
.filename { |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
background-size: 32px; |
|
background-repeat: no-repeat; |
|
padding-left: 51px; |
|
background-position: 7px 7px; |
|
cursor: pointer; |
|
// avoid taking full width |
|
max-width: 0; |
|
.filename-parts { |
|
display: flex; |
|
&__first { |
|
overflow: hidden; |
|
white-space: pre; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
.filesize, .date { |
|
width: 80px; |
|
} |
|
.filesize { |
|
text-align: right; |
|
} |
|
&.view-grid { |
|
$grid-size: 120px; |
|
$grid-pad: 10px; |
|
$name-height: 30px; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
tbody { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, $grid-size); |
|
justify-content: space-around; |
|
row-gap: 15px; |
|
margin: 15px 0; |
|
|
|
tr { |
|
display: block; |
|
position: relative; |
|
border-radius: var(--border-radius); |
|
padding: $grid-pad; |
|
display: flex; |
|
flex-direction: column; |
|
width: $grid-size - 2 * $grid-pad; |
|
|
|
|
|
td { |
|
border: none; |
|
padding: 0; |
|
text-align: center; |
|
border-radius: var(--border-radius); |
|
|
|
&.filename { |
|
padding: #{$grid-size - 2 * $grid-pad} 0 0 0; |
|
background-position: center top; |
|
background-size: contain; |
|
line-height: $name-height; |
|
max-width: none; |
|
.filename-parts { |
|
justify-content: center; |
|
} |
|
} |
|
&.filesize { |
|
line-height: $name-height / 3; |
|
width: 100%; |
|
} |
|
&.date { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.filepicker_element_selected { |
|
background-color: var(--color-background-darker); |
|
} |
|
} |
|
|
|
.ui-dialog { |
|
position: fixed !important; |
|
} |
|
|
|
span.ui-icon { |
|
float: left; |
|
margin: 3px 7px 30px 0; |
|
} |
|
|
|
/* ---- CONTACTS MENU ---- */ |
|
|
|
#contactsmenu { |
|
.menutoggle { |
|
background-size: 16px 16px; |
|
padding: 14px; |
|
cursor: pointer; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
opacity: 1 !important; |
|
} |
|
} |
|
} |
|
|
|
#contactsmenu > .menu { |
|
/* show ~4.5 entries */ |
|
height: 278px; |
|
width: 350px; |
|
max-width: 90%; |
|
right: 13px; |
|
|
|
&::after { |
|
right: 61px; |
|
} |
|
|
|
.emptycontent { |
|
margin-top: 5vh !important; |
|
margin-bottom: 2vh; |
|
.icon-loading, |
|
.icon-search { |
|
display: inline-block; |
|
} |
|
} |
|
|
|
.content { |
|
max-height: calc(100% - #{$header-height}); |
|
height: 100%; |
|
overflow-y: auto; |
|
|
|
.footer { |
|
text-align: center; |
|
|
|
a { |
|
display: block; |
|
width: 100%; |
|
padding: 12px 0; |
|
opacity: .5; |
|
} |
|
} |
|
} |
|
|
|
.contact { |
|
display: flex; |
|
position: relative; |
|
align-items: center; |
|
padding: 3px 3px 3px 10px; |
|
border-bottom: 1px solid var(--color-border); |
|
|
|
:last-of-type { |
|
border-bottom: none; |
|
} |
|
|
|
.avatar { |
|
height: 32px; |
|
width: 32px; |
|
display: inline-block; |
|
} |
|
|
|
.body { |
|
flex-grow: 1; |
|
padding-left: 8px; |
|
|
|
div { |
|
position: relative; |
|
width: 100%; |
|
} |
|
|
|
.full-name, .last-message { |
|
/* TODO: don't use fixed width */ |
|
max-width: 204px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.last-message { |
|
opacity: .5; |
|
} |
|
} |
|
|
|
.top-action, .second-action, .other-actions { |
|
width: 16px; |
|
height: 16px; |
|
padding: 14px; |
|
opacity: .5; |
|
cursor: pointer; |
|
|
|
:hover { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
/* actions menu */ |
|
.menu { |
|
top: 47px; |
|
margin-right: 13px; |
|
} |
|
.popovermenu::after { |
|
right: 2px; |
|
} |
|
} |
|
} |
|
|
|
|
|
#contactsmenu-search { |
|
width: calc(100% - 16px); |
|
margin: 8px; |
|
height: 34px; |
|
} |
|
|
|
/* ---- TOOLTIPS ---- */ |
|
|
|
.extra-data { |
|
padding-right: 5px !important; |
|
} |
|
|
|
/* ---- TAGS ---- */ |
|
|
|
#tagsdialog { |
|
.content { |
|
width: 100%; |
|
height: 280px; |
|
} |
|
.scrollarea { |
|
overflow: auto; |
|
border: 1px solid var(--color-background-darker); |
|
width: 100%; |
|
height: 240px; |
|
} |
|
.bottombuttons { |
|
width: 100%; |
|
height: 30px; |
|
* { |
|
float: left; |
|
} |
|
} |
|
.taglist li { |
|
background: var(--color-background-dark); |
|
padding: .3em .8em; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
-webkit-transition: background-color 500ms; |
|
transition: background-color 500ms; |
|
&:hover, &:active { |
|
background: var(--color-background-darker); |
|
} |
|
} |
|
.addinput { |
|
width: 90%; |
|
clear: both; |
|
} |
|
} |
|
|
|
/* ---- BREADCRUMB ---- */ |
|
.breadcrumb { |
|
display: inline-flex; |
|
} |
|
div.crumb { |
|
display: inline-flex; |
|
background-image: url('../img/breadcrumb.svg?v=1'); |
|
background-repeat: no-repeat; |
|
background-position: right center; |
|
height: 44px; |
|
background-size: auto 24px; |
|
flex: 0 0 auto; |
|
order: 1; |
|
padding-right: 7px; |
|
&.crumbmenu { |
|
order: 2; |
|
position: relative; |
|
a { |
|
opacity: 0.5 |
|
} |
|
&.canDropChildren, |
|
&.canDrop { |
|
.popovermenu { |
|
display: block; |
|
} |
|
} |
|
// Fix because of the display flex |
|
.popovermenu { |
|
top: 100%; |
|
margin-right: 3px; |
|
ul { |
|
max-height: 345px; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
padding-right: 5px; |
|
li.canDrop span:first-child { |
|
background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; |
|
} |
|
} |
|
.in-breadcrumb { |
|
display: none; |
|
} |
|
} |
|
} |
|
&.hidden { |
|
display: none; |
|
~ .crumb { |
|
order: 3; |
|
} |
|
} |
|
> a, |
|
> span { |
|
position: relative; |
|
padding: 12px; |
|
opacity: 0.5; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
flex: 0 0 auto; |
|
// Some sane max-width for each folder name |
|
max-width: 200px; |
|
|
|
&.icon-home { |
|
// Hide home text |
|
text-indent: -9999px; |
|
} |
|
} |
|
> a[class^='icon-'] { |
|
padding: 0; |
|
width: 44px; |
|
} |
|
&:not(:first-child) a { |
|
} |
|
&:last-child { |
|
font-weight: bold; |
|
margin-right: 10px; |
|
// Allow multiple span next to the main 'a' |
|
a ~ span { |
|
padding-left: 0; |
|
} |
|
} |
|
&:hover, &:focus, a:focus, &:active { |
|
opacity: 1; |
|
|
|
> a, |
|
> span { |
|
opacity: .7; |
|
} |
|
} |
|
} |
|
|
|
/* some feedback for hover/tap on breadcrumbs */ |
|
|
|
.appear { |
|
opacity: 1; |
|
-webkit-transition: opacity 500ms ease 0s; |
|
-moz-transition: opacity 500ms ease 0s; |
|
-ms-transition: opacity 500ms ease 0s; |
|
-o-transition: opacity 500ms ease 0s; |
|
transition: opacity 500ms ease 0s; |
|
&.transparent { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
/* LEGACY FIX only - do not use fieldsets for settings */ |
|
|
|
fieldset { |
|
&.warning legend, &.update legend { |
|
top: 18px; |
|
position: relative; |
|
} |
|
&.warning legend + p, &.update legend + p { |
|
margin-top: 12px; |
|
} |
|
} |
|
|
|
/* for IE10 */ |
|
@-ms-viewport { |
|
width: device-width; |
|
} |
|
|
|
|
|
/* hidden input type=file field */ |
|
|
|
.hiddenuploadfield { |
|
display: none; |
|
width: 0; |
|
height: 0; |
|
opacity: 0; |
|
}
|
|
|