mirror of
https://github.com/nextcloud/server.git
synced 2026-03-09 01:40:53 -04:00
26db9540d4
"#body-login" is only used in the layout for guest pages. Therefore, before SCSS was enabled for guest pages, all "#body-login" rules in SCSS files were ignored. Now that SCSS is enabled for guest pages those rules break the guest pages, but given that they were ignored until now they can be safely removed. Note, however, that all of the above refers to regular SCSS rules; those defined in the Theming app are different, as they were converted to CSS and used in the guest pages even when SCSS was disabled, so they do not need to be adjusted due to SCSS being enabled now. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
1166 lines
20 KiB
SCSS
1166 lines
20 KiB
SCSS
/**
|
|
* @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>
|
|
*
|
|
* @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;
|
|
}
|
|
|
|
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: 300;
|
|
font-size: .8em;
|
|
line-height: 1.6em;
|
|
font-family: var(--font-face);
|
|
color: var(--color-main-text);
|
|
height: auto;
|
|
}
|
|
|
|
.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: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-background-darker);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/* Searchbox */
|
|
|
|
.searchbox {
|
|
position: relative;
|
|
input[type='search'] {
|
|
position: relative;
|
|
font-size: 1.2em;
|
|
padding: 3px;
|
|
padding-left: 25px;
|
|
padding-right: 20px;
|
|
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
|
|
color: var(--color-primary-text);
|
|
border: 0;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 9px;
|
|
width: 0;
|
|
cursor: pointer;
|
|
-webkit-transition: all 100ms;
|
|
transition: all 100ms;
|
|
opacity: .6;
|
|
&:focus, &:active, &:valid {
|
|
background-position-x: 6px;
|
|
color: var(--color-primary-text);
|
|
width: 155px;
|
|
cursor: text;
|
|
background-color: var(--color-primary) !important;
|
|
border: 1px solid var(--color-primary-text-dark) !important;
|
|
}
|
|
&:hover, &:focus, &:active {
|
|
opacity: 1;
|
|
}
|
|
& ~ .icon-close-white {
|
|
display: inline;
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
margin: 0;
|
|
&, &:focus, &:active, &:hover {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
&:not(:valid) ~ .icon-close-white {
|
|
display: none;
|
|
}
|
|
&::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CONTENT ------------------------------------------------------------------ */
|
|
|
|
#controls {
|
|
box-sizing: border-box;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
height: 44px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--color-main-background);
|
|
z-index: 60;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
display: flex;
|
|
top: 0;
|
|
}
|
|
|
|
/* 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;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.button.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
.hascontrols {
|
|
margin-top: 45px;
|
|
}
|
|
}
|
|
|
|
#content-wrapper {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
/* prevent horizontal scrollbar */
|
|
padding-top: 50px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* allow horizontal scrollbar for personal and admin settings */
|
|
|
|
#body-settings:not(.snapjs-left) .app-settings {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 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;
|
|
line-height: 150%;
|
|
}
|
|
[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;
|
|
}
|
|
|
|
/* keep the labels for screen readers but hide them since we use placeholders */
|
|
|
|
label.infield {
|
|
display: none;
|
|
}
|
|
|
|
/* Show password toggle */
|
|
|
|
#show, #dbpassword {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: .8em;
|
|
float: right;
|
|
}
|
|
|
|
#show, #dbpassword, #personal-show {
|
|
display: none;
|
|
}
|
|
|
|
#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: url('../img/actions/toggle.svg?v=1');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
opacity: .3;
|
|
}
|
|
|
|
#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: -36px;
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
/* Warnings and errors are the same */
|
|
|
|
#body-user .warning, #body-settings .warning {
|
|
margin-top: 8px;
|
|
padding: 5px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.warning {
|
|
legend, a {
|
|
color: var(--color-primary-text) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
}
|
|
|
|
.error {
|
|
a {
|
|
color: var(--color-primary-text) !important;
|
|
font-weight: 600 !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 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#notification {
|
|
margin: 0 auto;
|
|
max-width: 60%;
|
|
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;
|
|
|
|
.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: 300;
|
|
}
|
|
.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);
|
|
|
|
.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: 300;
|
|
}
|
|
}
|
|
/* 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 {
|
|
.dirtree {
|
|
width: 92%;
|
|
flex-wrap: wrap;
|
|
div:first-child a {
|
|
background-image: url('../img/places/home.svg?v=1');
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.filelist-container {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
/** overflow under the button row */
|
|
width: 100%;
|
|
}
|
|
.emptycontent {
|
|
color: var(--color-text-details);
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
.filelist {
|
|
background-color: var(--color-main-background);
|
|
width: 100%;
|
|
}
|
|
#filestable.filelist {
|
|
/* prevent the filepicker to overflow */
|
|
min-width: initial;
|
|
margin-bottom: 50px;
|
|
}
|
|
.filelist {
|
|
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;
|
|
}
|
|
.filesize, .date {
|
|
width: 80px;
|
|
}
|
|
.filesize {
|
|
text-align: right;
|
|
}
|
|
}
|
|
.filepicker_element_selected {
|
|
background-color: lightblue;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
opacity: .6;
|
|
}
|
|
}
|
|
|
|
#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% - 50px);
|
|
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;
|
|
&.icon-home {
|
|
// Hide home text
|
|
text-indent: -9999px;
|
|
}
|
|
}
|
|
> a[class^='icon-'] {
|
|
padding: 0;
|
|
width: 44px;
|
|
}
|
|
&:not(:first-child) a {
|
|
}
|
|
&:last-child {
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
// Allow multiple span next to the main 'a'
|
|
a ~ span {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
&:hover, &:focus, a:focus, &:active {
|
|
> 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;
|
|
}
|
|
}
|
|
|
|
/* public footer */
|
|
|
|
#body-public footer {
|
|
position: relative;
|
|
text-align: center;
|
|
.info {
|
|
color: var(--color-text-lighter);
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 20px 0;
|
|
a {
|
|
color: var(--color-text-lighter);
|
|
font-weight: 600;
|
|
padding: 13px;
|
|
margin: -13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|