mirror of
https://github.com/nextcloud/server.git
synced 2026-02-19 02:38:40 -05:00
68ed1af3c0
Input fields require a 44x44 pixels target size, this makes all the input fields and button use that size. Bonus is that now the input fields and buttons now have the same size as the new vue button and this looks less weird than the previous state with controls of different sizes. See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html Signed-off-by: Carl Schwan <carl@carlschwan.eu>
1169 lines
30 KiB
CSS
1169 lines
30 KiB
CSS
@charset "UTF-8";
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
/**
|
|
* @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-2020, 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;
|
|
font-weight: inherit;
|
|
font-size: 100%;
|
|
font-family: inherit;
|
|
vertical-align: baseline;
|
|
cursor: default;
|
|
scrollbar-color: var(--color-border-dark) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.js-focus-visible :focus:not(.focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/** Let vue apps handle the focus themselves */
|
|
.content:not(#content-vue) :focus-visible,
|
|
.app-navigation:not(#app-navigation-vue) :focus-visible {
|
|
box-shadow: inset 0 0 0 2px var(--color-primary);
|
|
outline: none;
|
|
}
|
|
|
|
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;
|
|
}
|
|
a * {
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.external {
|
|
margin: 0 3px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
input {
|
|
cursor: pointer;
|
|
}
|
|
input * {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select, .button span, label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-main-background);
|
|
font-weight: normal;
|
|
/* bring the default font size up to 15px */
|
|
font-size: var(--default-font-size);
|
|
line-height: var(--default-line-height);
|
|
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;
|
|
left: 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;
|
|
}
|
|
#nojavascript div {
|
|
display: block;
|
|
position: relative;
|
|
width: 50%;
|
|
top: 35%;
|
|
margin: 0px auto;
|
|
}
|
|
#nojavascript a {
|
|
color: var(--color-primary-text);
|
|
border-bottom: 2px dotted var(--color-main-background);
|
|
}
|
|
#nojavascript a:hover, #nojavascript a:focus {
|
|
color: var(--color-primary-text-dark);
|
|
}
|
|
|
|
/* SCROLLING */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border-dark);
|
|
border-radius: var(--border-radius-large);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
/* SELECTION */
|
|
::selection {
|
|
background-color: var(--color-primary-element);
|
|
color: var(--color-primary-text);
|
|
}
|
|
|
|
/* CONTENT ------------------------------------------------------------------ */
|
|
.files-controls {
|
|
box-sizing: border-box;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
height: 54px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--color-main-background-translucent);
|
|
z-index: 62;
|
|
/* must be above the filelist sticky header and texteditor menubar */
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
display: flex;
|
|
top: 50px;
|
|
}
|
|
|
|
/* position controls for apps with app-navigation */
|
|
.viewer-mode #app-navigation + #app-content .files-controls {
|
|
left: 0;
|
|
}
|
|
|
|
#app-navigation * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.files-controls .actions > div > .button, .files-controls .actions > div button, .files-controls .actions > .button, .files-controls .actions button {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
display: flex;
|
|
height: 44px;
|
|
width: 44px;
|
|
padding: 9px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.files-controls .actions > div .button.hidden, .files-controls .actions .button.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
|
|
#emptycontent,
|
|
.emptycontent {
|
|
color: var(--color-text-maxcontrast);
|
|
text-align: center;
|
|
margin-top: 30vh;
|
|
width: 100%;
|
|
}
|
|
#app-sidebar #emptycontent,
|
|
#app-sidebar .emptycontent {
|
|
margin-top: 10vh;
|
|
}
|
|
#emptycontent .emptycontent-search,
|
|
.emptycontent .emptycontent-search {
|
|
position: static;
|
|
}
|
|
#emptycontent h2,
|
|
.emptycontent h2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
#emptycontent [class^=icon-],
|
|
#emptycontent [class*=icon-],
|
|
.emptycontent [class^=icon-],
|
|
.emptycontent [class*=icon-] {
|
|
background-size: 64px;
|
|
height: 64px;
|
|
width: 64px;
|
|
margin: 0 auto 15px;
|
|
}
|
|
#emptycontent [class^=icon-]:not([class^=icon-loading]), #emptycontent [class^=icon-]:not([class*=icon-loading]),
|
|
#emptycontent [class*=icon-]:not([class^=icon-loading]),
|
|
#emptycontent [class*=icon-]:not([class*=icon-loading]),
|
|
.emptycontent [class^=icon-]:not([class^=icon-loading]),
|
|
.emptycontent [class^=icon-]:not([class*=icon-loading]),
|
|
.emptycontent [class*=icon-]:not([class^=icon-loading]),
|
|
.emptycontent [class*=icon-]:not([class*=icon-loading]) {
|
|
opacity: 0.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: 0.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: 0.8;
|
|
}
|
|
|
|
#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
|
|
box-shadow: var(--color-primary) 0 0 0 2px;
|
|
opacity: 1;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
#show + label, #dbpassword + label, #personal-show + label {
|
|
position: absolute !important;
|
|
height: 20px;
|
|
width: 24px;
|
|
background-image: var(--icon-toggle-dark);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Feedback for keyboard focus and mouse hover */
|
|
#show:focus + label,
|
|
#dbpassword:focus + label,
|
|
#personal-show:focus + label {
|
|
opacity: 1;
|
|
}
|
|
#show + label:hover,
|
|
#dbpassword + label:hover,
|
|
#personal-show + 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-main-text);
|
|
background-color: rgba(var(--color-warning-rgb), 0.2);
|
|
}
|
|
|
|
.warning legend, .warning a {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.error:not(.toastify) a {
|
|
color: white !important;
|
|
font-weight: bold !important;
|
|
}
|
|
.error:not(.toastify) a.button {
|
|
color: var(--color-text-lighter) !important;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.error:not(.toastify) pre {
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.error-wide {
|
|
width: 700px;
|
|
margin-left: -200px !important;
|
|
}
|
|
.error-wide .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 Nextcloud instance */
|
|
/* Sticky footer */
|
|
/* round profile photos */
|
|
.avatar, .avatardiv {
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.avatar > img, .avatardiv > img {
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
td.avatar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
tr .action:not(.permanent), .selectedActions > a {
|
|
opacity: 0;
|
|
}
|
|
|
|
tr:hover .action:not(.menuitem), tr:focus .action:not(.menuitem),
|
|
tr .action.permanent:not(.menuitem) {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.selectedActions > a {
|
|
opacity: 0.5;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.selectedActions > a:hover, .selectedActions > a:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
tr .action {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.header-action {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
tr:hover .action:hover, tr:focus .action:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.selectedActions a:hover, .selectedActions a:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.header-action:hover, .header-action:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
tbody tr:hover, tbody tr:focus, tbody tr: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: 0.7em 13em 0 0;
|
|
}
|
|
.pager 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;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-state-default,
|
|
.ui-widget.ui-datepicker .ui-widget-content .ui-state-default,
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-state-default {
|
|
border: 1px solid transparent;
|
|
background: inherit;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header {
|
|
padding: 7px;
|
|
font-size: 13px;
|
|
border: none;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-datepicker-title {
|
|
line-height: 1;
|
|
font-weight: normal;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-icon {
|
|
opacity: 0.5;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
|
|
background: url("../img/actions/arrow-right.svg") center center no-repeat;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
|
|
background: url("../img/actions/arrow-left.svg") center center no-repeat;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-widget-header .ui-state-hover .ui-icon {
|
|
opacity: 1;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar th {
|
|
font-weight: normal;
|
|
color: var(--color-text-lighter);
|
|
opacity: 0.8;
|
|
width: 26px;
|
|
padding: 2px;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar tr:hover {
|
|
background-color: inherit;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a:not(.ui-state-hover) {
|
|
background-color: var(--color-background-darker);
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a.ui-state-active,
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td .ui-state-hover,
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td .ui-state-focus {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-text);
|
|
font-weight: bold;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar td .ui-priority-secondary:not(.ui-state-hover) {
|
|
color: var(--color-text-lighter);
|
|
opacity: 0.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;
|
|
/* AM/PM fix */
|
|
}
|
|
.ui-widget.ui-timepicker .ui-widget-content {
|
|
border: none !important;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-state-default,
|
|
.ui-widget.ui-timepicker .ui-widget-content .ui-state-default,
|
|
.ui-widget.ui-timepicker .ui-widget-header .ui-state-default {
|
|
border: 1px solid transparent;
|
|
background: inherit;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-widget-header {
|
|
padding: 7px;
|
|
font-size: 13px;
|
|
border: none;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
}
|
|
.ui-widget.ui-timepicker .ui-widget-header .ui-timepicker-title {
|
|
line-height: 1;
|
|
font-weight: normal;
|
|
}
|
|
.ui-widget.ui-timepicker table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
|
|
margin-left: 30px;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table th {
|
|
font-weight: normal;
|
|
color: var(--color-text-lighter);
|
|
opacity: 0.8;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table th.periods {
|
|
padding: 0;
|
|
width: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table tr:hover {
|
|
background-color: inherit;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table td.ui-timepicker-hour-cell a.ui-state-active, .ui-widget.ui-timepicker .ui-timepicker-table td.ui-timepicker-minute-cell a.ui-state-active,
|
|
.ui-widget.ui-timepicker .ui-timepicker-table td .ui-state-hover,
|
|
.ui-widget.ui-timepicker .ui-timepicker-table td .ui-state-focus {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-text);
|
|
font-weight: bold;
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table td.ui-timepicker-minutes:not(.ui-state-hover) {
|
|
color: var(--color-text-lighter);
|
|
}
|
|
.ui-widget.ui-timepicker .ui-timepicker-table td.ui-timepicker-hours {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ---- jQuery UI datepicker & timepicker global rules ---- */
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar tr,
|
|
.ui-widget.ui-timepicker table.ui-timepicker tr {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar tr td,
|
|
.ui-widget.ui-timepicker table.ui-timepicker tr td {
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
padding: 2px;
|
|
height: 26px;
|
|
width: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.ui-widget.ui-datepicker .ui-datepicker-calendar tr td > *,
|
|
.ui-widget.ui-timepicker table.ui-timepicker tr td > * {
|
|
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: 0.9em;
|
|
}
|
|
|
|
/* ---- DIALOGS ---- */
|
|
#oc-dialog-filepicker-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree {
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
padding-right: 140px;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree div:first-child a {
|
|
background-image: var(--icon-home-dark);
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree span:not(:last-child) {
|
|
cursor: pointer;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree span:last-child {
|
|
font-weight: bold;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after {
|
|
content: ">";
|
|
padding: 3px;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-showgridview {
|
|
position: absolute;
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 22px;
|
|
opacity: 0.5;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-showgridview:hover, #oc-dialog-filepicker-content #picker-showgridview:active, #oc-dialog-filepicker-content #picker-showgridview:focus {
|
|
box-shadow: 0 0 0 2px var(--color-primary);
|
|
opacity: 1;
|
|
}
|
|
#oc-dialog-filepicker-content .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;
|
|
left: 15px;
|
|
top: 3px;
|
|
order: 1;
|
|
}
|
|
#oc-dialog-filepicker-content .actions.creatable .icon.icon-add {
|
|
background-image: var(--icon-add-dark);
|
|
background-size: 16px 16px;
|
|
width: 34px;
|
|
height: 34px;
|
|
margin: 0px;
|
|
opacity: 0.5;
|
|
}
|
|
#oc-dialog-filepicker-content .actions.creatable a {
|
|
width: 36px;
|
|
padding: 0px;
|
|
position: static;
|
|
}
|
|
#oc-dialog-filepicker-content .actions.creatable .menu {
|
|
top: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
#oc-dialog-filepicker-content .actions.creatable .menu form {
|
|
display: flex;
|
|
margin: 10px;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist-container {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
/*height: 100%;*/
|
|
/* overflow under the button row */
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
#oc-dialog-filepicker-content .emptycontent {
|
|
color: var(--color-text-maxcontrast);
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist {
|
|
background-color: var(--color-main-background);
|
|
width: 100%;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist {
|
|
/* prevent the filepicker to overflow */
|
|
min-width: initial;
|
|
margin-bottom: 50px;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist thead tr {
|
|
border-bottom: 1px solid var(--color-border);
|
|
background-color: var(--color-main-background);
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist thead tr th {
|
|
width: 80%;
|
|
border: none;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th .columntitle {
|
|
display: block;
|
|
padding: 15px;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th .columntitle.name {
|
|
padding-left: 5px;
|
|
margin-left: 50px;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th .sort-indicator {
|
|
width: 10px;
|
|
height: 8px;
|
|
margin-left: 5px;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
opacity: 0.3;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .sort-indicator.hidden,
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th:hover .sort-indicator.hidden,
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th:focus .sort-indicator.hidden {
|
|
visibility: hidden;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th:hover .sort-indicator.hidden,
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist th:focus .sort-indicator.hidden {
|
|
visibility: visible;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist td {
|
|
padding: 14px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .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;
|
|
max-width: 0;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .filename .filename-parts {
|
|
display: flex;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .filename .filename-parts__first {
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .filename .filename-parts__last {
|
|
white-space: pre;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .filesize, #oc-dialog-filepicker-content #picker-filestable.filelist .date {
|
|
width: 80px;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist .filesize {
|
|
text-align: right;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 120px);
|
|
justify-content: space-around;
|
|
row-gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr {
|
|
display: block;
|
|
position: relative;
|
|
border-radius: var(--border-radius);
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100px;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr td {
|
|
border: none;
|
|
padding: 0;
|
|
text-align: center;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr td.filename {
|
|
padding: 100px 0 0 0;
|
|
background-position: center top;
|
|
background-size: contain;
|
|
line-height: 30px;
|
|
max-width: none;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr td.filename .filename-parts {
|
|
justify-content: center;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr td.filesize {
|
|
line-height: 10px;
|
|
width: 100%;
|
|
}
|
|
#oc-dialog-filepicker-content #picker-filestable.filelist.view-grid tbody tr td.date {
|
|
display: none;
|
|
}
|
|
#oc-dialog-filepicker-content .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 {
|
|
cursor: pointer;
|
|
}
|
|
#contactsmenu .menutoggle:before {
|
|
background-size: 20px 20px;
|
|
background-repeat: no-repeat;
|
|
background-position-x: 3px;
|
|
background-position-y: 4px;
|
|
padding: 14px;
|
|
content: " ";
|
|
background-image: var(--original-icon-contacts-white);
|
|
filter: var(--primary-invert-if-bright);
|
|
}
|
|
#contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
|
|
opacity: 1 !important;
|
|
}
|
|
#contactsmenu #contactsmenu-menu a {
|
|
padding: 2px;
|
|
}
|
|
#contactsmenu #contactsmenu-menu a:focus-visible {
|
|
box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
|
|
}
|
|
|
|
#header .header-right > div#contactsmenu > .menu {
|
|
/* show 2.5 to 4.5 entries depending on the screen height */
|
|
height: calc(100vh - 150px);
|
|
max-height: 275px;
|
|
min-height: 175px;
|
|
width: 350px;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .emptycontent {
|
|
margin-top: 5vh !important;
|
|
margin-bottom: 2vh;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-loading,
|
|
#header .header-right > div#contactsmenu > .menu .emptycontent .icon-search {
|
|
display: inline-block;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .content {
|
|
/* fixed max height of the parent container without the search input */
|
|
height: calc(100vh - 150px - 50px);
|
|
max-height: 225px;
|
|
min-height: 125px;
|
|
overflow-y: auto;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .content .footer {
|
|
text-align: center;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .content .footer a {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px 0;
|
|
opacity: 0.5;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
padding: 3px 3px 3px 10px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
/* actions menu */
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .avatar {
|
|
height: 32px;
|
|
width: 32px;
|
|
display: inline-block;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .body {
|
|
flex-grow: 1;
|
|
padding-left: 8px;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .body div {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .body .full-name, #header .header-right > div#contactsmenu > .menu .contact .body .last-message {
|
|
/* TODO: don't use fixed width */
|
|
max-width: 204px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .body .last-message {
|
|
opacity: 0.5;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
|
|
width: 16px;
|
|
height: 16px;
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
|
|
padding: 14px;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
|
|
opacity: 1;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
|
|
margin: 5px;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
|
|
border-color: transparent;
|
|
box-shadow: 0 0 0 2px var(--color-main-text);
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .menu {
|
|
top: 47px;
|
|
margin-right: 13px;
|
|
}
|
|
#header .header-right > div#contactsmenu > .menu .contact .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;
|
|
}
|
|
#tagsdialog .scrollarea {
|
|
overflow: auto;
|
|
border: 1px solid var(--color-background-darker);
|
|
width: 100%;
|
|
height: 240px;
|
|
}
|
|
#tagsdialog .bottombuttons {
|
|
width: 100%;
|
|
height: 30px;
|
|
}
|
|
#tagsdialog .bottombuttons * {
|
|
float: left;
|
|
}
|
|
#tagsdialog .taglist li {
|
|
background: var(--color-background-dark);
|
|
padding: 0.3em 0.8em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-transition: background-color 500ms;
|
|
transition: background-color 500ms;
|
|
}
|
|
#tagsdialog .taglist li:hover, #tagsdialog .taglist li:active {
|
|
background: var(--color-background-darker);
|
|
}
|
|
#tagsdialog .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;
|
|
}
|
|
div.crumb.crumbmenu {
|
|
order: 2;
|
|
position: relative;
|
|
}
|
|
div.crumb.crumbmenu a {
|
|
opacity: 0.5;
|
|
}
|
|
div.crumb.crumbmenu.canDropChildren .popovermenu, div.crumb.crumbmenu.canDrop .popovermenu {
|
|
display: block;
|
|
}
|
|
div.crumb.crumbmenu .popovermenu {
|
|
top: 100%;
|
|
margin-right: 3px;
|
|
}
|
|
div.crumb.crumbmenu .popovermenu ul {
|
|
max-height: 345px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-right: 5px;
|
|
}
|
|
div.crumb.crumbmenu .popovermenu ul li.canDrop span:first-child {
|
|
background-image: url("../img/filetypes/folder-drag-accept.svg?v=1") !important;
|
|
}
|
|
div.crumb.crumbmenu .popovermenu .in-breadcrumb {
|
|
display: none;
|
|
}
|
|
div.crumb.hidden {
|
|
display: none;
|
|
}
|
|
div.crumb.hidden ~ .crumb {
|
|
order: 3;
|
|
}
|
|
div.crumb > a,
|
|
div.crumb > span {
|
|
position: relative;
|
|
padding: 12px;
|
|
opacity: 0.5;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
flex: 0 0 auto;
|
|
max-width: 200px;
|
|
}
|
|
div.crumb > a.icon-home, div.crumb > a.icon-delete,
|
|
div.crumb > span.icon-home,
|
|
div.crumb > span.icon-delete {
|
|
text-indent: -9999px;
|
|
}
|
|
div.crumb > a[class^=icon-] {
|
|
padding: 0;
|
|
width: 44px;
|
|
}
|
|
div.crumb:last-child {
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
div.crumb:last-child a ~ span {
|
|
padding-left: 0;
|
|
}
|
|
div.crumb:hover, div.crumb:focus, div.crumb a:focus, div.crumb:active {
|
|
opacity: 1;
|
|
}
|
|
div.crumb:hover > a,
|
|
div.crumb:hover > span, div.crumb:focus > a,
|
|
div.crumb:focus > span, div.crumb a:focus > a,
|
|
div.crumb a:focus > span, div.crumb:active > a,
|
|
div.crumb:active > span {
|
|
opacity: 0.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;
|
|
}
|
|
.appear.transparent {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* LEGACY FIX only - do not use fieldsets for settings */
|
|
fieldset.warning legend, fieldset.update legend {
|
|
top: 18px;
|
|
position: relative;
|
|
}
|
|
fieldset.warning legend + p, fieldset.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;
|
|
}
|
|
|
|
/*# sourceMappingURL=styles.css.map */
|