diff --git a/Makefile b/Makefile index e178d84b8c995..ca5488b5808cc 100644 --- a/Makefile +++ b/Makefile @@ -32,3 +32,9 @@ clean: clean-git: clean git checkout -- dist + +scss: dist/core-server.css apps/settings/css/settings.scss + node_modules/node-sass/bin/node-sass apps/settings/css/settings.scss dist/settings-setting-settingss.css + +dist/core-%.css: core/css/%.scss + node_modules/node-sass/bin/node-sass $< $@ diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index e2b9099f5d32a..20a70f32a6a96 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -14,25 +14,25 @@ input { } /* icons for sidebar */ -.nav-icon-personal-settings { - @include icon-color('personal', 'settings', $color-black); -} - -.nav-icon-security { - @include icon-color('toggle-filelist', 'settings', $color-black); -} - -.nav-icon-clientsbox { - @include icon-color('change', 'settings', $color-black); -} - -.nav-icon-federated-cloud { - @include icon-color('share', 'settings', $color-black); -} - -.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - @include icon-color('password', 'settings', $color-black); -} +//.nav-icon-personal-settings { +// @include icon-color('personal', 'settings', $color-black); +//} +// +//.nav-icon-security { +// @include icon-color('toggle-filelist', 'settings', $color-black); +//} +// +//.nav-icon-clientsbox { +// @include icon-color('change', 'settings', $color-black); +//} +// +//.nav-icon-federated-cloud { +// @include icon-color('share', 'settings', $color-black); +//} +// +//.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { +// @include icon-color('password', 'settings', $color-black); +//} #avatarform { .avatardiv { @@ -916,7 +916,7 @@ span.version { } } -@media only screen and (max-width: $breakpoint-mobile) { +@media only screen and (max-width: var(--breakpoint-mobile)) { .store .section { width: 50%; } @@ -1049,6 +1049,11 @@ span.version { align-items: center; } + .counter { + padding-left: calc(var(--header-height) - 10px); + margin: 10px; + } + &.installed { .apps-list-container { display: table; @@ -1572,7 +1577,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { align-self: normal; background-color: var(--color-main-background); z-index: 100; /* above multiselect */ - top: $header-height; + top: var(--header-height); &.sticky { box-shadow: 0 -2px 10px 1px var(--color-box-shadow); diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue index 16a46fee969b7..b10af493a7ad1 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -80,9 +80,7 @@ export default { .map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility })) .sort(compareParams), // TODO remove this when not used once the settings layout is updated - marginLeft: window.matchMedia('(min-width: 1600px)').matches - ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() - : '0px', + marginLeft: '0px', } }, @@ -104,6 +102,11 @@ export default { ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() : '0px' } + setTimeout(() => { + this.marginLeft = window.matchMedia('(min-width: 1600px)').matches + ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() + : '0px' + }, 1000) }, beforeDestroy() { diff --git a/apps/settings/src/main.js b/apps/settings/src/main.js new file mode 100644 index 0000000000000..68587f645954a --- /dev/null +++ b/apps/settings/src/main.js @@ -0,0 +1 @@ +import '../css/settings.scss' diff --git a/apps/settings/templates/settings/frame.php b/apps/settings/templates/settings/frame.php index 6d017f0767132..85a81c636ed3d 100644 --- a/apps/settings/templates/settings/frame.php +++ b/apps/settings/templates/settings/frame.php @@ -21,12 +21,13 @@ * */ -style('settings', 'settings'); -script('settings', 'settings'); -\OCP\Util::addScript('settings', 'legacy-admin'); -script('core', 'setupchecks'); -script('files', 'jquery.fileupload'); +use OCP\Util; +Util::addScript('settings', 'settings'); +Util::addScript('core', 'setupchecks'); +Util::addScript('files', 'jquery.fileupload'); +Util::addScript('settings', 'legacy-admin'); +Util::addStyle('settings', 'settings'); ?>
diff --git a/core/css/apps.scss b/core/css/apps.scss index 84179a94633cc..f60f6bb78b0bb 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -80,14 +80,14 @@ kbd { #app-navigation:not(.vue) { width: $navigation-width; position: fixed; - top: $header-height; + top: var(--header-height); left: 0; z-index: 500; overflow-y: auto; overflow-x: hidden; // Do not use vh because of mobile headers // are included in the calculation - height: calc(100% - #{$header-height}); + height: calc(100% - var(--header-height)); box-sizing: border-box; background-color: var(--color-main-background); -webkit-user-select: none; @@ -593,7 +593,7 @@ kbd { position: relative; display: flex; // padding is included in height - padding-top: $header-height; + padding-top: var(--header-height); min-height: 100%; } @@ -652,13 +652,13 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; min-width: $sidebar-min-width; max-width: $sidebar-max-width; display: block; - @include position('sticky'); - top: $header-height; + position: 'sticky'; + top: var(--header-height); right:0; overflow-y: auto; overflow-x: hidden; z-index: 1500; - height: calc(100vh - #{$header-height}); + height: calc(100vh - var(--header-height)); background: var(--color-main-background); border-left: 1px solid var(--color-border); flex-shrink: 0; @@ -1118,14 +1118,14 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2; /* CONTENT LIST ------------------------------------------------------------ */ .app-content-list { - @include position('sticky'); - top: $header-height; + position: 'sticky'; + top: var(--header-height); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; transition: transform 250ms ease-in-out; - min-height: calc(100vh - #{$header-height}); - max-height: calc(100vh - #{$header-height}); + min-height: calc(100vh - var(--header-height)); + max-height: calc(100vh - var(--header-height)); overflow-y: auto; overflow-x: hidden; flex: 1 1 $list-min-width; diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss index 1fe6e88dbe719..aac1dd86a7384 100644 --- a/core/css/css-variables.scss +++ b/core/css/css-variables.scss @@ -67,4 +67,6 @@ --animation-slow: #{$animation-slow}; --header-height: #{$header-height}; + + --breakpoint-mobile: #{$breakpoint-mobile}; } diff --git a/core/css/functions.scss b/core/css/functions.scss index 7489e574e9707..1bdc8c78b53c8 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -27,7 +27,9 @@ * @return string The color without # */ @function remove-hash-from-color($color) { - $color: unquote($color); + @if type-of($color) == 'string' { + $color: unquote($color); + } $index: str-index(inspect($color), '#'); @if $index { $color: str-slice(inspect($color), 2); @@ -48,9 +50,9 @@ @function icon-color-path($icon, $dir, $color, $version: 1, $core: false) { $color: remove-hash-from-color($color); @if $core { - @return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; + @return '../../svg/core/#{$dir}/#{$icon}?color=\##{$color}&v=#{$version}'; } @else { - @return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; + @return '../../svg/#{$dir}/#{$icon}?color=\##{$color}&v=#{$version}'; } } diff --git a/core/css/header.scss b/core/css/header.scss index 4c107c0d58f4b..efd0f35980650 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -48,7 +48,7 @@ top: 0; width: 100%; z-index: 2000; - height: $header-height; + height: var(--header-height); background-color: var(--color-primary); background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); box-sizing: border-box; @@ -78,7 +78,7 @@ @mixin header-menu-height() { min-height: calc(44px * 1.5); // show at least 1.5 entries - max-height: calc(100vh - #{$header-height} * 4); + max-height: calc(100vh - var(--header-height) * 4); } #header { @@ -96,7 +96,7 @@ max-width: 350px; @include header-menu-height(); right: 5px; // relative to parent - top: $header-height; + top: var(--header-height); margin: 0; &:not(.popovermenu) { @@ -233,7 +233,7 @@ display: flex; justify-content: center; align-items: center; - width: $header-height; + width: var(--header-height); height: 100%; cursor: pointer; opacity: 0.6; @@ -304,9 +304,9 @@ /* NAVIGATION --------------------------------------------------------------- */ nav[role='navigation'] { display: inline-block; - width: $header-height; - height: $header-height; - margin-left: -$header-height; + width: var(--header-height); + height: var(--header-height); + margin-left: -var(--header-height); position: relative; } @@ -428,7 +428,7 @@ nav[role='navigation'] { /* Apps menu */ #appmenu { display: inline-flex; - min-width: $header-height; + min-width: var(--header-height); z-index: 2; li { @@ -442,8 +442,8 @@ nav[role='navigation'] { position: relative; display: flex; margin: 0; - height: $header-height; - width: $header-height; + height: var(--header-height); + width: var(--header-height); align-items: center; justify-content: center; opacity: .6; @@ -655,7 +655,7 @@ nav[role='navigation'] { &:focus, &:active { - top: $header-height; + top: var(--header-height); } } diff --git a/core/css/icons.scss b/core/css/icons.scss index 78522895cf534..579cd990aec01 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -36,7 +36,7 @@ } .icon-breadcrumb { - background-image: url('../img/breadcrumb.svg?v=1'); + background-image: url('../core/img/breadcrumb.svg?v=1'); } /* LOADING ------------------------------------------------------------------ */ diff --git a/core/css/mobile.scss b/core/css/mobile.scss index d1abb0176a518..4bd8e23c6ba95 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -64,7 +64,7 @@ #app-navigation-toggle-back { position: fixed; display: inline-block !important; - top: $header-height; + top: var(--header-height); left: 0; width: 44px; height: 44px; diff --git a/core/css/server.scss b/core/css/server.scss index 1d4a79f6cf8b3..eed41c4abbbf2 100644 --- a/core/css/server.scss +++ b/core/css/server.scss @@ -1,3 +1,6 @@ +@import 'variables.scss'; +@import 'functions.scss'; +@import 'css-variables.scss'; @import 'styles.scss'; @import 'inputs.scss'; @import 'header.scss'; diff --git a/core/css/styles.scss b/core/css/styles.scss index 27e5675b53a99..d1814fd9436a1 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -179,7 +179,7 @@ body { #controls { box-sizing: border-box; - @include position('sticky'); + position: 'sticky'; height: 44px; padding: 0; margin: 0; @@ -190,7 +190,7 @@ body { -ms-user-select: none; user-select: none; display: flex; - top: $header-height; + top: var(--header-height); } /* position controls for apps with app-navigation */ @@ -1138,7 +1138,7 @@ span.ui-icon { } div.crumb { display: inline-flex; - background-image: url('../img/breadcrumb.svg?v=1'); + background-image: url('../core/img/breadcrumb.svg?v=1'); background-repeat: no-repeat; background-position: right center; height: 44px; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 4efe072a5bb3a..174ac4987c203 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -10,7 +10,7 @@ 'size' => $size, 'v' => $_['userAvatarVersion'] ]); -} +}; ?> diff --git a/dist/core-server.css b/dist/core-server.css new file mode 100644 index 0000000000000..0083ece742f4a --- /dev/null +++ b/dist/core-server.css @@ -0,0 +1,5434 @@ +@charset "UTF-8"; +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @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 . + * + */ +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @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 . + * + */ +/** + * Removes the "#" from a color. + * + * @param string $color The color + * @return string The color without # + */ +/** + * Calculates the URL to the svg under the SVG API. + * + * @param string $icon the icon filename + * @param string $dir the icon folder within /core/img if $core or app name + * @param string $color the desired color in hexadecimal + * @param int [$version] the version of the file + * @param bool [$core] search icon in core + * @return string The URL to the svg. + */ +/** + * SVG COLOR API + * + * @param string $icon the icon filename + * @param string $dir the icon folder within /core/img if $core or app name + * @param string $color the desired color in hexadecimal + * @param int $version the version of the file + * @param bool [$core] search icon in core + * + * @returns A background image with the url to the set to the requested icon. + */ +/** + * Create black and white icons + * This will add a default black version of and an additional white version when .icon-white is applied + */ +:root { + --color-main-text: #222; + --color-main-background: #fff; + --color-main-background-translucent: rgba(255, 255, 255, 0.97); + --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --color-background-hover: whitesmoke; + --color-background-dark: #ededed; + --color-background-darker: #dbdbdb; + --color-placeholder-light: #e6e6e6; + --color-placeholder-dark: #cccccc; + --color-primary: #0082c9; + --color-primary-hover: #339bd4; + --color-primary-light: #e6f3fa; + --color-primary-light-hover: #dce9ef; + --color-primary-text: #ffffff; + --color-primary-light-text: #0082c9; + --color-primary-text-dark: #ededed; + --color-primary-element: #0082c9; + --color-primary-element-hover: #339bd4; + --color-primary-element-light: #17adff; + --color-primary-element-lighter: #d9ecf7; + --color-error: #e9322d; + --color-error-hover: #ed5b57; + --color-warning: #eca700; + --color-warning-hover: #f0b933; + --color-success: #46ba61; + --color-success-hover: #6bc881; + --color-text-maxcontrast: #767676; + --color-text-light: #222; + --color-text-lighter: #767676; + --image-logo: url("../img/logo/logo.svg?v=1"); + --image-login-background: url("../img/background.png?v=2"); + --image-logoheader: url("../img/logo/logo.svg?v=1"); + --image-favicon: url("../img/logo/logo.svg?v=1"); + --color-loading-light: #ccc; + --color-loading-dark: #444; + --color-box-shadow: rgba(77, 77, 77, 0.5); + --color-border: #ededed; + --color-border-dark: #dbdbdb; + --border-radius: 3px; + --border-radius-large: 10px; + --border-radius-pill: 100px; + --font-face: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --default-font-size: 15px; + --default-line-height: 24px; + --animation-quick: 100ms; + --animation-slow: 300ms; + --header-height: 50px; + --breakpoint-mobile: 1024px; } + +/** + * @copyright Copyright (c) 2016, John Molakvoæ + * @copyright Copyright (c) 2016, Lukas Reschke + * @copyright Copyright (c) 2016, Robin Appelman + * @copyright Copyright (c) 2016, Julius Haertl + * @copyright Copyright (c) 2016, Joas Schilling + * @copyright Copyright (c) 2016, Morris Jobke + * @copyright Copyright (c) 2016, Christoph Wurst + * @copyright Copyright (c) 2016, Raghu Nayyar + * @copyright Copyright (c) 2011-2017, Jan-Christoph Borchardt + * @copyright Copyright (c) 2019-2020, Gary Kim + * + * @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; } + 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 ------------------------------------------------------------------ */ +#controls { + box-sizing: border-box; + position: 'sticky'; + height: 44px; + 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: var(--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, #controls .actions > div button, #controls .actions > .button, #controls .actions button { + box-sizing: border-box; + display: inline-block; + display: flex; + height: 36px; + width: 36px; + padding: 9px; + align-items: center; + justify-content: center; } + +#controls .actions > div .button.hidden, #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: .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: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-primary-text); + background-color: var(--color-warning); } + +.warning legend, .warning a { + color: var(--color-primary-text) !important; + 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; } + +#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; + overflow-x: hidden; + overflow-y: auto; + max-height: 100px; } + #notification span { + cursor: pointer; + margin-left: 1em; } + #notification .row { + position: relative; } + #notification .row .close { + display: inline-block; + vertical-align: middle; + position: absolute; + right: 0; + top: 0; + margin-top: 2px; } + #notification .row.closeable { + padding-right: 20px; } + +tr .action:not(.permanent), .selectedActions > a { + opacity: 0; } + +tr:hover .action:not(.menuitem), +tr:focus .action:not(.menuitem), +tr .action.permanent:not(.menuitem) { + opacity: .5; } + +.selectedActions > a { + opacity: .5; + position: relative; + top: 2px; } + .selectedActions > a:hover, .selectedActions > a:focus { + opacity: 1; } + +tr .action { + width: 16px; + height: 16px; } + +.header-action { + opacity: .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: .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: .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: .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: .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: .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: .9em; } + +/* ---- DIALOGS ---- */ +#oc-dialog-filepicker-content { + position: relative; + display: flex; + flex-direction: column; + /* Grid view toggle */ } + #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-000); + 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-view-toggle { + position: absolute; + background-color: transparent; + border: none; + margin: 0; + padding: 22px; + opacity: .5; + right: 0; + top: 0; } + #oc-dialog-filepicker-content #picker-view-toggle:hover, #oc-dialog-filepicker-content #picker-view-toggle:focus { + opacity: 1; } + #oc-dialog-filepicker-content #picker-showgridview:focus + #picker-view-toggle { + 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-000); + 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: .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 { + background-size: 20px 20px; + padding: 14px; + cursor: pointer; + filter: var(--primary-invert-if-bright); } + #contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active { + opacity: 1 !important; } + +#header .header-right > div#contactsmenu > .menu { + /* show 2.5 to 4.5 entries depending on the screen height */ + height: calc(100vh - 50px * 3); + max-height: calc(50px * 4.5 + 50px); + min-height: calc(50px * 3.5); + 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 - 50px * 3 - 50px); + max-height: calc(50px * 4.5); + min-height: calc(50px * 3.5 - 50px); + 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: .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 :last-of-type { + border-bottom: none; } + #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: .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; + padding: 14px; + opacity: .5; + cursor: pointer; } + #header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover { + opacity: 1; } + #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: .3em .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("../core/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.active { + font-weight: bold; } + div.crumb.active a ~ span { + padding-left: 0; } + 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: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: .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; } + +/** + * @copyright Copyright (c) 2016, John Molakvoæ + * @copyright Copyright (c) 2016, Morris Jobke + * @copyright Copyright (c) 2016, Joas Schilling + * @copyright Copyright (c) 2016, Julius Haertl + * @copyright Copyright (c) 2016, jowi + * @copyright Copyright (c) 2015, Joas Schilling + * @copyright Copyright (c) 2015, Hendrik Leppelsack + * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt + * + * @license GNU AGPL version 3 or any later version + * + */ +/* Specifically override browser styles */ +input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { + font-family: var(--font-face); } + +.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { + font-family: var(--font-face) !important; } + +/* Simple selector to allow easy overriding */ +select, +button:not(.button-vue), +input, +textarea, +div[contenteditable=true], +div[contenteditable=false] { + width: 130px; + min-height: 34px; + box-sizing: border-box; } + +/** + * color-text-lighter normal state + * color-text-lighter active state + * color-text-maxcontrast disabled state + */ +/* Default global values */ +div.select2-drop .select2-search input, +select, +button:not(.button-vue), .button, +input:not([type='range']), +textarea, +div[contenteditable=true], +.pager li a { + margin: 3px 3px 3px 0; + padding: 7px 6px; + font-size: 13px; + background-color: var(--color-main-background); + color: var(--color-main-text); + border: 1px solid var(--color-border-dark); + outline: none; + border-radius: var(--border-radius); + cursor: text; + /* Primary action button, use sparingly */ } + div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active, + select:not(:disabled):not(.primary):hover, + select:not(:disabled):not(.primary):focus, + select:not(:disabled):not(.primary).active, + button:not(.button-vue):not(:disabled):not(.primary):hover, + button:not(.button-vue):not(:disabled):not(.primary):focus, + button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active, + input:not([type='range']):not(:disabled):not(.primary):hover, + input:not([type='range']):not(:disabled):not(.primary):focus, + input:not([type='range']):not(:disabled):not(.primary).active, + textarea:not(:disabled):not(.primary):hover, + textarea:not(:disabled):not(.primary):focus, + textarea:not(:disabled):not(.primary).active, + div[contenteditable=true]:not(:disabled):not(.primary):hover, + div[contenteditable=true]:not(:disabled):not(.primary):focus, + div[contenteditable=true]:not(:disabled):not(.primary).active, + .pager li a:not(:disabled):not(.primary):hover, + .pager li a:not(:disabled):not(.primary):focus, + .pager li a:not(:disabled):not(.primary).active { + /* active class used for multiselect */ + border-color: var(--color-primary-element); + outline: none; } + div.select2-drop .select2-search input:not(:disabled):not(.primary):active, + select:not(:disabled):not(.primary):active, + button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active, + input:not([type='range']):not(:disabled):not(.primary):active, + textarea:not(:disabled):not(.primary):active, + div[contenteditable=true]:not(:disabled):not(.primary):active, + .pager li a:not(:disabled):not(.primary):active { + outline: none; + background-color: var(--color-main-background); + color: var(--color-text-light); } + div.select2-drop .select2-search input:disabled, + select:disabled, + button:not(.button-vue):disabled, .button:disabled, + input:not([type='range']):disabled, + textarea:disabled, + div[contenteditable=true]:disabled, + .pager li a:disabled { + background-color: var(--color-background-dark); + color: var(--color-text-maxcontrast); + cursor: default; + opacity: 0.5; } + div.select2-drop .select2-search input:required, + select:required, + button:not(.button-vue):required, .button:required, + input:not([type='range']):required, + textarea:required, + div[contenteditable=true]:required, + .pager li a:required { + box-shadow: none; } + div.select2-drop .select2-search input:invalid, + select:invalid, + button:not(.button-vue):invalid, .button:invalid, + input:not([type='range']):invalid, + textarea:invalid, + div[contenteditable=true]:invalid, + .pager li a:invalid { + box-shadow: none !important; + border-color: var(--color-error); } + div.select2-drop .select2-search input.primary, + select.primary, + button:not(.button-vue).primary, .button.primary, + input:not([type='range']).primary, + textarea.primary, + div[contenteditable=true].primary, + .pager li a.primary { + background-color: var(--color-primary-element); + border-color: var(--color-primary-element); + color: var(--color-primary-text); + cursor: pointer; + /* Apply border to primary button if on log in page (and not in a dark container) or if in header */ } + #body-login :not(.body-login-container) div.select2-drop .select2-search input.primary, + #header div.select2-drop .select2-search input.primary, #body-login :not(.body-login-container) + select.primary, + #header + select.primary, #body-login :not(.body-login-container) + button:not(.button-vue).primary, + #header + button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, + #header .button.primary, #body-login :not(.body-login-container) + input:not([type='range']).primary, + #header + input:not([type='range']).primary, #body-login :not(.body-login-container) + textarea.primary, + #header + textarea.primary, #body-login :not(.body-login-container) + div[contenteditable=true].primary, + #header + div[contenteditable=true].primary, #body-login :not(.body-login-container) + .pager li a.primary, + #header + .pager li a.primary { + border-color: var(--color-primary-text); } + div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active, + select.primary:not(:disabled):hover, + select.primary:not(:disabled):focus, + select.primary:not(:disabled):active, + button:not(.button-vue).primary:not(:disabled):hover, + button:not(.button-vue).primary:not(:disabled):focus, + button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active, + input:not([type='range']).primary:not(:disabled):hover, + input:not([type='range']).primary:not(:disabled):focus, + input:not([type='range']).primary:not(:disabled):active, + textarea.primary:not(:disabled):hover, + textarea.primary:not(:disabled):focus, + textarea.primary:not(:disabled):active, + div[contenteditable=true].primary:not(:disabled):hover, + div[contenteditable=true].primary:not(:disabled):focus, + div[contenteditable=true].primary:not(:disabled):active, + .pager li a.primary:not(:disabled):hover, + .pager li a.primary:not(:disabled):focus, + .pager li a.primary:not(:disabled):active { + background-color: var(--color-primary-element-light); + border-color: var(--color-primary-element-light); } + div.select2-drop .select2-search input.primary:not(:disabled):active, + select.primary:not(:disabled):active, + button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active, + input:not([type='range']).primary:not(:disabled):active, + textarea.primary:not(:disabled):active, + div[contenteditable=true].primary:not(:disabled):active, + .pager li a.primary:not(:disabled):active { + color: var(--color-primary-text-dark); } + div.select2-drop .select2-search input.primary:disabled, + select.primary:disabled, + button:not(.button-vue).primary:disabled, .button.primary:disabled, + input:not([type='range']).primary:disabled, + textarea.primary:disabled, + div[contenteditable=true].primary:disabled, + .pager li a.primary:disabled { + background-color: var(--color-primary-element); + color: var(--color-primary-text-dark); + cursor: default; } + +div[contenteditable=false] { + margin: 3px 3px 3px 0; + padding: 7px 6px; + font-size: 13px; + background-color: var(--color-main-background); + color: var(--color-text-lighter); + border: 1px solid var(--color-background-darker); + outline: none; + border-radius: var(--border-radius); + background-color: var(--color-background-dark); + color: var(--color-text-lighter); + cursor: default; + opacity: 0.5; } + +/* Specific override */ +input { + /* Color input doesn't respect the initial height + so we need to set a custom one */ } + input:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) { + -webkit-appearance: textfield; + -moz-appearance: textfield; + height: 34px; } + input[type='radio'], input[type='checkbox'], input[type='file'], input[type='image'] { + height: auto; + width: auto; } + input[type='color'] { + margin: 3px; + padding: 0 2px; + min-height: 30px; + width: 40px; + cursor: pointer; } + input[type='hidden'] { + height: 0; + width: 0; } + input[type='time'] { + width: initial; } + +/* 'Click' inputs */ +select, +button:not(.button-vue), .button, +input[type='button'], +input[type='submit'], +input[type='reset'] { + padding: 6px 16px; + width: auto; + min-height: 34px; + cursor: pointer; + box-sizing: border-box; + background-color: var(--color-background-dark); } + select:disabled, + button:not(.button-vue):disabled, .button:disabled, + input[type='button']:disabled, + input[type='submit']:disabled, + input[type='reset']:disabled { + cursor: default; } + +select *, +button:not(.button-vue) *, .button * { + cursor: pointer; } + +select:disabled *, +button:not(.button-vue):disabled *, .button:disabled * { + cursor: default; } + +/* Buttons */ +button:not(.button-vue), .button, +input[type='button'], +input[type='submit'], +input[type='reset'] { + font-weight: bold; + border-radius: var(--border-radius-pill); + /* Get rid of the inside dotted line in Firefox */ } + button:not(.button-vue)::-moz-focus-inner, .button::-moz-focus-inner, + input[type='button']::-moz-focus-inner, + input[type='submit']::-moz-focus-inner, + input[type='reset']::-moz-focus-inner { + border: 0; } + button:not(.button-vue).error, .button.error, + input[type='button'].error, + input[type='submit'].error, + input[type='reset'].error { + background-color: var(--color-error) !important; + border-color: var(--color-error) !important; + color: #fff !important; } + +button:not(.button-vue):not(.action-button) > span, .button > span { + /* icon position inside buttons */ } + button:not(.button-vue):not(.action-button) > span[class^='icon-'], button:not(.button-vue):not(.action-button) > span[class*=' icon-'], .button > span[class^='icon-'], .button > span[class*=' icon-'] { + display: inline-block; + vertical-align: text-bottom; + opacity: 0.5; } + +textarea, div[contenteditable=true] { + color: var(--color-main-text); + cursor: text; + font-family: inherit; + height: auto; } + textarea:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):focus { + border-color: var(--color-background-darker) !important; + background-color: var(--color-main-background) !important; } + +div[contenteditable=false] { + color: var(--color-text-lighter); + font-family: inherit; + height: auto; } + +/* Override the ugly select arrow */ +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--icon-triangle-s-000) no-repeat right 4px center; + background-color: inherit; + outline: 0; + padding-right: 24px !important; + height: 34px; } + +/* Confirm inputs */ +input[type='text'], input[type='password'], input[type='email'] { + /* only show confirm borders if input is not focused */ } + input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm { + margin-left: -8px !important; + border-left-color: transparent !important; + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; + background-clip: padding-box; + /* Avoid background under border */ + background-color: var(--color-main-background) !important; + opacity: 1; + height: 34px; + width: 34px; + padding: 7px 6px; + cursor: pointer; + margin-right: 0; } + input[type='text'] + .icon-confirm:disabled, input[type='password'] + .icon-confirm:disabled, input[type='email'] + .icon-confirm:disabled { + cursor: default; + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-confirm-fade-000: url("../../svg/core/actions/confirm-fade?color=#000&v=2"); + background-image: var(--icon-confirm-fade-000); } + input[type='text']:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type='password']:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type='email']:not(:active):not(:hover):not(:focus):invalid + .icon-confirm { + border-color: var(--color-error); } + input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { + border-color: var(--color-primary-element) !important; + border-radius: var(--border-radius) !important; } + input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type='text']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type='password']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type='email']:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled { + border-color: var(--color-background-darker) !important; } + input[type='text']:active + .icon-confirm, input[type='text']:hover + .icon-confirm, input[type='text']:focus + .icon-confirm, input[type='password']:active + .icon-confirm, input[type='password']:hover + .icon-confirm, input[type='password']:focus + .icon-confirm, input[type='email']:active + .icon-confirm, input[type='email']:hover + .icon-confirm, input[type='email']:focus + .icon-confirm { + border-color: var(--color-primary-element) !important; + border-left-color: transparent !important; + /* above previous input */ + z-index: 2; } + +/* Various Fixes */ +button img, +.button img { + cursor: pointer; } + +select, +.button.multiselect { + font-weight: normal; } + +/* Radio & Checkboxes */ +input[type='checkbox'], input[type='radio'] { + /* We do not use the nc-darken function as this is not supposed to be changed */ } + input[type='checkbox'].radio, input[type='checkbox'].checkbox, input[type='radio'].radio, input[type='radio'].checkbox { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + input[type='checkbox'].radio + label, input[type='checkbox'].checkbox + label, input[type='radio'].radio + label, input[type='radio'].checkbox + label { + user-select: none; } + input[type='checkbox'].radio:disabled + label, + input[type='checkbox'].radio:disabled + label:before, input[type='checkbox'].checkbox:disabled + label, + input[type='checkbox'].checkbox:disabled + label:before, input[type='radio'].radio:disabled + label, + input[type='radio'].radio:disabled + label:before, input[type='radio'].checkbox:disabled + label, + input[type='radio'].checkbox:disabled + label:before { + cursor: default; } + input[type='checkbox'].radio + label:before, input[type='checkbox'].checkbox + label:before, input[type='radio'].radio + label:before, input[type='radio'].checkbox + label:before { + content: ''; + display: inline-block; + height: 14px; + width: 14px; + vertical-align: middle; + border-radius: 50%; + margin: 0 6px 3px 3px; + border: 1px solid #878787; } + input[type='checkbox'].radio:not(:disabled):not(:checked) + label:hover:before, + input[type='checkbox'].radio:focus + label:before, input[type='checkbox'].checkbox:not(:disabled):not(:checked) + label:hover:before, + input[type='checkbox'].checkbox:focus + label:before, input[type='radio'].radio:not(:disabled):not(:checked) + label:hover:before, + input[type='radio'].radio:focus + label:before, input[type='radio'].checkbox:not(:disabled):not(:checked) + label:hover:before, + input[type='radio'].checkbox:focus + label:before { + border-color: var(--color-primary-element); } + input[type='checkbox'].radio:focus-visible + label, input[type='checkbox'].checkbox:focus-visible + label, input[type='radio'].radio:focus-visible + label, input[type='radio'].checkbox:focus-visible + label { + outline-style: solid; + outline-color: var(--color-main-text); + outline-width: 1px; + outline-offset: 2px; } + input[type='checkbox'].radio:checked + label:before, + input[type='checkbox'].radio.checkbox:indeterminate + label:before, input[type='checkbox'].checkbox:checked + label:before, + input[type='checkbox'].checkbox.checkbox:indeterminate + label:before, input[type='radio'].radio:checked + label:before, + input[type='radio'].radio.checkbox:indeterminate + label:before, input[type='radio'].checkbox:checked + label:before, + input[type='radio'].checkbox.checkbox:indeterminate + label:before { + /* ^ :indeterminate have a strange behavior on radio, + so we respecified the checkbox class again to be safe */ + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + background-color: var(--color-primary-element); + border-color: var(--color-primary-element); } + input[type='checkbox'].radio:disabled + label:before, input[type='checkbox'].checkbox:disabled + label:before, input[type='radio'].radio:disabled + label:before, input[type='radio'].checkbox:disabled + label:before { + border: 1px solid #878787; + background-color: #bababa !important; + /* override other status */ } + input[type='checkbox'].radio:checked:disabled + label:before, input[type='checkbox'].checkbox:checked:disabled + label:before, input[type='radio'].radio:checked:disabled + label:before, input[type='radio'].checkbox:checked:disabled + label:before { + background-color: #bababa; } + input[type='checkbox'].radio + label ~ em, input[type='checkbox'].checkbox + label ~ em, input[type='radio'].radio + label ~ em, input[type='radio'].checkbox + label ~ em { + display: inline-block; + margin-left: 25px; } + input[type='checkbox'].radio + label ~ em:last-of-type, input[type='checkbox'].checkbox + label ~ em:last-of-type, input[type='radio'].radio + label ~ em:last-of-type, input[type='radio'].checkbox + label ~ em:last-of-type { + margin-bottom: 14px; } + input[type='checkbox'].checkbox + label:before, input[type='radio'].checkbox + label:before { + border-radius: 1px; + height: 14px; + width: 14px; + box-shadow: none !important; + background-position: center; } + input[type='checkbox'].checkbox:checked + label:before, input[type='radio'].checkbox:checked + label:before { + background-image: url("../img/actions/checkbox-mark.svg"); } + input[type='checkbox'].checkbox:indeterminate + label:before, input[type='radio'].checkbox:indeterminate + label:before { + background-image: url("../img/actions/checkbox-mixed.svg"); } + input[type='checkbox'].radio--white + label:before, + input[type='checkbox'].radio--white:focus + label:before, input[type='checkbox'].checkbox--white + label:before, + input[type='checkbox'].checkbox--white:focus + label:before, input[type='radio'].radio--white + label:before, + input[type='radio'].radio--white:focus + label:before, input[type='radio'].checkbox--white + label:before, + input[type='radio'].checkbox--white:focus + label:before { + border-color: #bababa; } + input[type='checkbox'].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type='radio'].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type='radio'].checkbox--white:not(:disabled):not(:checked) + label:hover:before { + border-color: #fff; } + input[type='checkbox'].radio--white:checked + label:before, input[type='checkbox'].checkbox--white:checked + label:before, input[type='radio'].radio--white:checked + label:before, input[type='radio'].checkbox--white:checked + label:before { + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + background-color: #dbdbdb; + border-color: #dbdbdb; } + input[type='checkbox'].radio--white:disabled + label:before, input[type='checkbox'].checkbox--white:disabled + label:before, input[type='radio'].radio--white:disabled + label:before, input[type='radio'].checkbox--white:disabled + label:before { + background-color: #bababa !important; + /* override other status */ + border-color: rgba(255, 255, 255, 0.4) !important; + /* override other status */ } + input[type='checkbox'].radio--white:checked:disabled + label:before, input[type='checkbox'].checkbox--white:checked:disabled + label:before, input[type='radio'].radio--white:checked:disabled + label:before, input[type='radio'].checkbox--white:checked:disabled + label:before { + box-shadow: inset 0px 0px 0px 2px var(--color-main-background); + border-color: rgba(255, 255, 255, 0.4) !important; + /* override other status */ + background-color: #bababa; } + input[type='checkbox'].checkbox--white:checked + label:before, + input[type='checkbox'].checkbox--white:indeterminate + label:before, input[type='radio'].checkbox--white:checked + label:before, + input[type='radio'].checkbox--white:indeterminate + label:before { + background-color: transparent !important; + /* Override default checked */ + border-color: #fff !important; + /* Override default checked */ + background-image: url("../img/actions/checkbox-mark-white.svg"); } + input[type='checkbox'].checkbox--white:indeterminate + label:before, input[type='radio'].checkbox--white:indeterminate + label:before { + background-image: url("../img/actions/checkbox-mixed-white.svg"); } + input[type='checkbox'].checkbox--white:disabled + label:before, input[type='radio'].checkbox--white:disabled + label:before { + opacity: 0.7; + /* No other choice for white background image */ } + +/* Select2 overriding. Merged to core with vendor stylesheet */ +div.select2-drop { + margin-top: -2px; + background-color: var(--color-main-background); } + div.select2-drop.select2-drop-active { + border-color: var(--color-border-dark); } + div.select2-drop .avatar { + display: inline-block; + margin-right: 8px; + vertical-align: middle; } + div.select2-drop .avatar img { + cursor: pointer; } + div.select2-drop .select2-search input { + min-height: auto; + background: var(--icon-search-000) no-repeat right center !important; + background-origin: content-box !important; } + div.select2-drop .select2-results { + max-height: 250px; + margin: 0; + padding: 0; } + div.select2-drop .select2-results .select2-result-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + div.select2-drop .select2-results .select2-result-label span { + cursor: pointer; } + div.select2-drop .select2-results .select2-result-label span em { + cursor: inherit; + background: unset; } + div.select2-drop .select2-results .select2-result, + div.select2-drop .select2-results .select2-no-results, + div.select2-drop .select2-results .select2-searching { + position: relative; + display: list-item; + padding: 12px; + background-color: transparent; + cursor: pointer; + color: var(--color-text-lighter); } + div.select2-drop .select2-results .select2-result.select2-selected { + background-color: var(--color-background-dark); } + div.select2-drop .select2-results .select2-highlighted { + background-color: var(--color-background-dark); + color: var(--color-main-text); } + +.select2-chosen .avatar, +.select2-chosen .avatar img, +#select2-drop .avatar, +#select2-drop .avatar img { + cursor: pointer; } + +div.select2-container-multi .select2-choices, +div.select2-container-multi.select2-container-active .select2-choices { + box-shadow: none; + white-space: nowrap; + text-overflow: ellipsis; + background: var(--color-main-background); + color: var(--color-text-lighter) !important; + box-sizing: content-box; + border-radius: var(--border-radius); + border: 1px solid var(--color-border-dark); + margin: 0; + padding: 2px 0; + min-height: auto; } + div.select2-container-multi .select2-choices .select2-search-choice, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice { + line-height: 20px; + padding-left: 5px; } + div.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active, div.select2-container-multi .select2-choices .select2-search-choice, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:active, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice { + background-image: none; + background-color: var(--color-main-background); + color: var(--color-text-lighter); + border: 1px solid var(--color-border-dark); } + div.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; } + div.select2-container-multi .select2-choices .select2-search-field input, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input { + line-height: 20px; } + div.select2-container-multi .select2-choices .select2-search-field input.select2-active, + div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input.select2-active { + background: none !important; } + +div.select2-container { + margin: 3px 3px 3px 0; } + div.select2-container.select2-container-multi .select2-choices { + display: flex; + flex-wrap: wrap; } + div.select2-container.select2-container-multi .select2-choices li { + float: none; } + div.select2-container a.select2-choice { + box-shadow: none; + white-space: nowrap; + text-overflow: ellipsis; + background: var(--color-main-background); + color: var(--color-text-lighter) !important; + box-sizing: content-box; + border-radius: var(--border-radius); + border: 1px solid var(--color-border-dark); + margin: 0; + padding: 2px 0; + padding-left: 6px; + min-height: auto; } + div.select2-container a.select2-choice .select2-search-choice { + line-height: 20px; + padding-left: 5px; + background-image: none; + background-color: var(--color-background-dark); + border-color: var(--color-background-dark); } + div.select2-container a.select2-choice .select2-search-choice .select2-search-choice-close { + display: none; } + div.select2-container a.select2-choice .select2-search-choice.select2-search-choice-focus, div.select2-container a.select2-choice .select2-search-choice:hover { + background-color: var(--color-border); + border-color: var(--color-border); } + div.select2-container a.select2-choice .select2-arrow { + background: none; + border-radius: 0; + border: none; } + div.select2-container a.select2-choice .select2-arrow b { + background: var(--icon-triangle-s-000) no-repeat center !important; + opacity: .5; } + div.select2-container a.select2-choice:hover .select2-arrow b, + div.select2-container a.select2-choice:focus .select2-arrow b, + div.select2-container a.select2-choice:active .select2-arrow b { + opacity: .7; } + div.select2-container a.select2-choice .select2-search-field input { + line-height: 20px; } + +/* Vue v-select */ +.v-select { + margin: 3px 3px 3px 0; + display: inline-block; } + .v-select .dropdown-toggle { + display: flex !important; + flex-wrap: wrap; } + .v-select .dropdown-toggle .selected-tag { + line-height: 20px; + padding-left: 5px; + background-image: none; + background-color: var(--color-main-background); + color: var(--color-text-lighter); + border: 1px solid var(--color-border-dark); + display: inline-flex; + align-items: center; } + .v-select .dropdown-toggle .selected-tag .close { + margin-left: 3px; } + .v-select .dropdown-menu { + padding: 0; } + .v-select .dropdown-menu li { + padding: 5px; + position: relative; + display: list-item; + background-color: transparent; + cursor: pointer; + color: var(--color-text-lighter); } + .v-select .dropdown-menu li a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 25px; + padding: 3px 7px 4px 2px; + margin: 0; + cursor: pointer; + min-height: 1em; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-flex; + align-items: center; + background-color: transparent !important; + color: inherit !important; } + .v-select .dropdown-menu li a::before { + content: ' '; + background-image: var(--icon-checkmark-000); + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; + display: block; + opacity: 0.5; + margin-right: 5px; + visibility: hidden; } + .v-select .dropdown-menu li.highlight { + color: var(--color-main-text); } + .v-select .dropdown-menu li.active > a { + background-color: var(--color-background-dark); + color: var(--color-main-text); } + .v-select .dropdown-menu li.active > a::before { + visibility: visible; } + +/* Vue multiselect */ +.multiselect.multiselect-vue { + margin: 1px 2px; + padding: 0 !important; + display: inline-block; + width: 160px; + position: relative; + background-color: var(--color-main-background); + /* results wrapper */ } + .multiselect.multiselect-vue.multiselect--active { + /* Opened: force display the input */ } + .multiselect.multiselect-vue.multiselect--active input.multiselect__input { + opacity: 1 !important; + cursor: text !important; } + .multiselect.multiselect-vue.multiselect--disabled, + .multiselect.multiselect-vue.multiselect--disabled .multiselect__single { + background-color: var(--color-background-dark) !important; } + .multiselect.multiselect-vue .multiselect__tags { + /* space between tags and limit tag */ + display: flex; + flex-wrap: nowrap; + overflow: hidden; + border: 1px solid var(--color-border-dark); + cursor: pointer; + position: relative; + border-radius: var(--border-radius); + height: 34px; + /* tag wrapper */ + /* Single select default value */ + /* displayed text if tag limit reached */ + /* default multiselect input for search and placeholder */ } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap { + align-items: center; + display: inline-flex; + overflow: hidden; + max-width: 100%; + position: relative; + padding: 3px 5px; + flex-grow: 1; + /* no tags or simple select? Show input directly + input is used to display single value */ + /* selected tag */ } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input { + opacity: 1 !important; + /* hide default empty text, show input instead */ } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input + span:not(.multiselect__single) { + display: none; } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag { + flex: 1 0 0; + line-height: 20px; + padding: 1px 5px; + background-image: none; + color: var(--color-text-lighter); + border: 1px solid var(--color-border-dark); + display: inline-flex; + align-items: center; + border-radius: var(--border-radius); + /* require to override the default width + and force the tag to shring properly */ + min-width: 0; + max-width: 50%; + max-width: fit-content; + max-width: -moz-fit-content; + /* css hack, detect if more than two tags + if so, flex-basis is set to half */ + /* ellipsis the groups to be sure + we display at least two of them */ } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:only-child { + flex: 0 1 auto; } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:not(:last-child) { + margin-right: 5px; } + .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag > span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } + .multiselect.multiselect-vue .multiselect__tags .multiselect__single { + padding: 8px 10px; + flex: 0 0 100%; + z-index: 1; + /* above input */ + background-color: var(--color-main-background); + cursor: pointer; + line-height: 17px; } + .multiselect.multiselect-vue .multiselect__tags .multiselect__strong, + .multiselect.multiselect-vue .multiselect__tags .multiselect__limit { + flex: 0 0 auto; + line-height: 20px; + color: var(--color-text-lighter); + display: inline-flex; + align-items: center; + opacity: .7; + margin-right: 5px; + /* above the input */ + z-index: 5; } + .multiselect.multiselect-vue .multiselect__tags input.multiselect__input { + width: 100% !important; + position: absolute !important; + margin: 0; + opacity: 0; + /* let's leave it on top of tags but hide it */ + height: 100%; + border: none; + /* override hide to force show the placeholder */ + display: block !important; + /* only when not active */ + cursor: pointer; } + .multiselect.multiselect-vue .multiselect__content-wrapper { + position: absolute; + width: 100%; + margin-top: -1px; + border: 1px solid var(--color-border-dark); + background: var(--color-main-background); + z-index: 50; + max-height: 175px !important; + overflow-y: auto; } + .multiselect.multiselect-vue .multiselect__content-wrapper .multiselect__content { + width: 100%; + padding: 5px 0; } + .multiselect.multiselect-vue .multiselect__content-wrapper li { + padding: 5px; + position: relative; + display: flex; + align-items: center; + background-color: transparent; } + .multiselect.multiselect-vue .multiselect__content-wrapper li, + .multiselect.multiselect-vue .multiselect__content-wrapper li span { + cursor: pointer; } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 20px; + margin: 0; + min-height: 1em; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-flex; + align-items: center; + background-color: transparent !important; + color: var(--color-text-lighter); + width: 100%; + /* selected checkmark icon */ + /* add the prop tag-placeholder="create" to add the + + * icon on top of an unknown-and-ready-to-be-created entry + */ } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span::before { + content: ' '; + background-image: var(--icon-checkmark-000); + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; + display: block; + opacity: .5; + margin-right: 5px; + visibility: hidden; } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--disabled { + background-color: var(--color-background-dark); + opacity: .5; } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span[data-select='create']::before { + background-image: var(--icon-add-000); + visibility: visible; } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--highlight { + color: var(--color-main-text); } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before { + opacity: .3; } + .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--selected::before, .multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before { + visibility: visible; } + +/* Progressbar */ +progress:not(.vue) { + display: block; + width: 100%; + padding: 0; + border: 0 none; + background-color: var(--color-background-dark); + border-radius: var(--border-radius); + flex-basis: 100%; + height: 5px; + overflow: hidden; } + progress:not(.vue).warn::-moz-progress-bar { + background: var(--color-error); } + progress:not(.vue).warn::-webkit-progress-value { + background: var(--color-error); } + progress:not(.vue)::-webkit-progress-bar { + background: transparent; } + progress:not(.vue)::-moz-progress-bar { + border-radius: var(--border-radius); + background: var(--color-primary); + transition: 250ms all ease-in-out; } + progress:not(.vue)::-webkit-progress-value { + border-radius: var(--border-radius); + background: var(--color-primary); + transition: 250ms all ease-in-out; } + +/* Animation */ +@keyframes shake { + 10%, + 90% { + transform: translate(-1px); } + 20%, + 80% { + transform: translate(2px); } + 30%, + 50%, + 70% { + transform: translate(-4px); } + 40%, + 60% { + transform: translate(4px); } } + +.shake { + animation-name: shake; + animation-duration: .7s; + animation-timing-function: ease-out; } + +label.infield { + position: absolute; + left: -10000px; + top: -10000px; + width: 1px; + height: 1px; + overflow: hidden; } + +::placeholder, +::-ms-input-placeholder, +::-webkit-input-placeholder { + color: var(--color-text-maxcontrast); } + +/** + * @copyright Copyright (c) 2016, John Molakvoæ + * @copyright Copyright (c) 2016, Julius Haertl + * @copyright Copyright (c) 2016, Lukas Reschke + * @copyright Copyright (c) 2016, Jos Poortvliet + * @copyright Copyright (c) 2016, Erik Pellikka + * @copyright Copyright (c) 2016, jowi + * @copyright Copyright (c) 2015, Hendrik Leppelsack + * @copyright Copyright (c) 2015, Volker E + * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt + * + * @license GNU AGPL version 3 or any later version + * + */ +/* prevent ugly selection effect on accidental selection */ +#header, +#navigation, +#expanddiv { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + +/* removed until content-focusing issue is fixed */ +#skip-to-content a { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + #skip-to-content a:focus { + left: 76px; + top: -9px; + color: var(--color-primary-text); + width: auto; + height: auto; } + +/* HEADERS ------------------------------------------------------------------ */ +#body-user #header, +#body-settings #header, +#body-public #header { + display: inline-flex; + position: fixed; + top: 0; + width: 100%; + z-index: 2000; + height: var(--header-height); + background-color: var(--color-primary); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); + box-sizing: border-box; + justify-content: space-between; } + +/* LOGO and APP NAME -------------------------------------------------------- */ +#nextcloud { + padding: 7px 0; + padding-left: 86px; + position: relative; + height: 100%; + box-sizing: border-box; + opacity: 1; + align-items: center; + display: flex; + flex-wrap: wrap; + overflow: hidden; } + #nextcloud:focus { + opacity: .75; } + #nextcloud:hover, #nextcloud:active { + opacity: 1; } + +#header { + /* Header menu */ + /* show caret indicator next to logo to make clear it is tappable */ + /* Right header standard */ } + #header .header-left > nav > .menu, + #header .header-right > div > .menu { + background-color: var(--color-main-background); + filter: drop-shadow(0 1px 5px var(--color-box-shadow)); + border-radius: 0 0 var(--border-radius) var(--border-radius); + box-sizing: border-box; + z-index: 2000; + position: absolute; + max-width: 350px; + min-height: calc(44px * 1.5); + max-height: calc(100vh - var(--header-height) * 4); + right: 5px; + top: var(--header-height); + margin: 0; + /* Dropdown arrow */ + /* Use by the apps menu and the settings right menu */ } + #header .header-left > nav > .menu:not(.popovermenu), + #header .header-right > div > .menu:not(.popovermenu) { + display: none; } + #header .header-left > nav > .menu:after, + #header .header-right > div > .menu:after { + border: 10px solid transparent; + border-bottom-color: var(--color-main-background); + bottom: 100%; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + right: 10px; } + #header .header-left > nav > .menu #apps > ul, + #header .header-left > nav > .menu > div, + #header .header-left > nav > .menu > ul, + #header .header-right > div > .menu #apps > ul, + #header .header-right > div > .menu > div, + #header .header-right > div > .menu > ul { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + min-height: calc(44px * 1.5); + max-height: calc(100vh - var(--header-height) * 4); } + #header .header-left > nav > .menu #apps > ul li a, + #header .header-left > nav > .menu.settings-menu > ul li a, + #header .header-right > div > .menu #apps > ul li a, + #header .header-right > div > .menu.settings-menu > ul li a { + display: inline-flex; + align-items: center; + height: 44px; + color: var(--color-main-text); + padding: 10px 12px; + box-sizing: border-box; + white-space: nowrap; + position: relative; + width: 100%; } + #header .header-left > nav > .menu #apps > ul li a:hover, #header .header-left > nav > .menu #apps > ul li a:focus, + #header .header-left > nav > .menu.settings-menu > ul li a:hover, + #header .header-left > nav > .menu.settings-menu > ul li a:focus, + #header .header-right > div > .menu #apps > ul li a:hover, + #header .header-right > div > .menu #apps > ul li a:focus, + #header .header-right > div > .menu.settings-menu > ul li a:hover, + #header .header-right > div > .menu.settings-menu > ul li a:focus { + background-color: var(--color-background-hover); } + #header .header-left > nav > .menu #apps > ul li a:active, #header .header-left > nav > .menu #apps > ul li a.active, + #header .header-left > nav > .menu.settings-menu > ul li a:active, + #header .header-left > nav > .menu.settings-menu > ul li a.active, + #header .header-right > div > .menu #apps > ul li a:active, + #header .header-right > div > .menu #apps > ul li a.active, + #header .header-right > div > .menu.settings-menu > ul li a:active, + #header .header-right > div > .menu.settings-menu > ul li a.active { + background-color: var(--color-primary-light); } + #header .header-left > nav > .menu #apps > ul li a span, + #header .header-left > nav > .menu.settings-menu > ul li a span, + #header .header-right > div > .menu #apps > ul li a span, + #header .header-right > div > .menu.settings-menu > ul li a span { + display: inline-block; + padding-bottom: 0; + color: var(--color-main-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 110px; } + #header .header-left > nav > .menu #apps > ul li a .icon-loading-small, + #header .header-left > nav > .menu.settings-menu > ul li a .icon-loading-small, + #header .header-right > div > .menu #apps > ul li a .icon-loading-small, + #header .header-right > div > .menu.settings-menu > ul li a .icon-loading-small { + margin-right: 10px; + background-size: 16px 16px; } + #header .header-left > nav > .menu #apps > ul li a img, + #header .header-left > nav > .menu #apps > ul li a svg, + #header .header-left > nav > .menu.settings-menu > ul li a img, + #header .header-left > nav > .menu.settings-menu > ul li a svg, + #header .header-right > div > .menu #apps > ul li a img, + #header .header-right > div > .menu #apps > ul li a svg, + #header .header-right > div > .menu.settings-menu > ul li a img, + #header .header-right > div > .menu.settings-menu > ul li a svg { + opacity: .7; + margin-right: 10px; + height: 16px; + width: 16px; + filter: var(--background-invert-if-dark); } + #header .logo { + display: inline-flex; + background-image: var(--image-logoheader, var(--image-logo, url("../img/logo/logo.svg"))); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 62px; + position: absolute; + left: 12px; + top: 1px; + bottom: 1px; } + #header .logo img { + opacity: 0; + max-width: 100%; + max-height: 200px; } + #header .header-appname-container { + display: none; + padding-right: 10px; + flex-shrink: 0; } + #header .icon-caret { + display: inline-block; + width: 12px; + height: 12px; + margin: 0; + margin-top: -21px; + padding: 0; + vertical-align: middle; } + #header #header-left, #header .header-left, + #header #header-right, #header .header-right { + display: inline-flex; + align-items: center; } + #header #header-left, #header .header-left { + flex: 1 0; + white-space: nowrap; + min-width: 0; } + #header #header-right, #header .header-right { + justify-content: flex-end; + flex-shrink: 1; } + #header .header-right > div, + #header .header-right > form { + height: 100%; + position: relative; } + #header .header-right > div > .menutoggle, + #header .header-right > form > .menutoggle { + display: flex; + justify-content: center; + align-items: center; + width: var(--header-height); + height: 100%; + cursor: pointer; + opacity: 0.6; + padding: 0; + margin: 0; } + +/* hover effect for app switcher label */ +.header-appname-container .header-appname { + opacity: .75; } + +.menutoggle .icon-caret { + opacity: .75; } + +.menutoggle:hover .header-appname, .menutoggle:hover .icon-caret { + opacity: 1; } + +.menutoggle:focus .header-appname, .menutoggle:focus .icon-caret { + opacity: 1; } + +.menutoggle.active .header-appname, .menutoggle.active .icon-caret { + opacity: 1; } + +/* TODO: move into minimal css file for public shared template */ +/* only used for public share pages now as we have the app icons when logged in */ +.header-appname { + color: var(--color-primary-text); + font-size: 16px; + font-weight: bold; + margin: 0; + padding: 0; + padding-right: 5px; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 1 100%; } + +.header-shared-by { + color: var(--color-primary-text); + position: relative; + font-weight: 300; + font-size: 11px; + line-height: 11px; + overflow: hidden; + text-overflow: ellipsis; } + +/* do not show menu toggle on public share links as there is no menu */ +#body-public #header .icon-caret { + display: none; } + +/* NAVIGATION --------------------------------------------------------------- */ +nav[role='navigation'] { + display: inline-block; + width: var(--header-height); + height: var(--header-height); + margin-left: -var(--header-height); + position: relative; } + +#header .header-left > nav > #navigation { + position: relative; + left: 25px; + /* half the togglemenu */ + transform: translateX(-50%); + width: 160px; } + +#header .header-left > nav > #navigation, +.ui-datepicker, +.ui-timepicker.ui-widget { + background-color: var(--color-main-background); + filter: drop-shadow(0 1px 10px var(--color-box-shadow)); } + #header .header-left > nav > #navigation:after, + .ui-datepicker:after, + .ui-timepicker.ui-widget:after { + /* position of dropdown arrow */ + left: 50%; + 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: var(--color-main-background); + border-width: 10px; + margin-left: -10px; + /* border width */ } + +#navigation { + box-sizing: border-box; } + #navigation .in-header { + display: none; } + +/* USER MENU -----------------------------------------------------------------*/ +#settings { + display: inline-block; + height: 100%; + cursor: pointer; + flex: 0 0 auto; + /* User menu on the right */ } + #settings #expand { + opacity: 1; + /* override icon opacity */ + padding-right: 12px; + /* Profile picture in header */ + /* show triangle below user menu if active */ } + #settings #expand:hover, #settings #expand:focus, #settings #expand:active { + color: var(--color-primary-text); } + #settings #expand:hover #expandDisplayName, + #settings #expand:hover .avatardiv, #settings #expand:focus #expandDisplayName, + #settings #expand:focus .avatardiv, #settings #expand:active #expandDisplayName, + #settings #expand:active .avatardiv { + border-radius: 50%; + border: 2px solid var(--color-primary-text); + margin: -2px; } + #settings #expand:hover .avatardiv, #settings #expand:focus .avatardiv, #settings #expand:active .avatardiv { + background-color: var(--color-primary-text); } + #settings #expand:hover #expandDisplayName, #settings #expand:focus #expandDisplayName, #settings #expand:active #expandDisplayName { + opacity: 1; } + #settings #expand .avatardiv { + cursor: pointer; + height: 32px; + width: 32px; + /* do not show display name when profile picture is present */ } + #settings #expand .avatardiv img { + opacity: 1; + cursor: pointer; } + #settings #expand .avatardiv.avatardiv-shown + #expandDisplayName { + display: none; } + #settings #expand #expandDisplayName { + padding: 8px; + opacity: .6; + cursor: pointer; + /* full opacity for gear icon if active */ } + #body-settings #settings #expand #expandDisplayName { + opacity: 1; } + #body-settings #settings #expand:before { + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 0 solid transparent; + border-bottom-color: var(--color-main-background); + border-width: 10px; + bottom: 0; + z-index: 100; + display: block; } + #settings #expanddiv:after { + right: 22px; } + +/* Apps menu */ +#appmenu { + display: inline-flex; + min-width: var(--header-height); + z-index: 2; + /* Show all app titles on hovering app menu area */ + /* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */ + /* show triangle below active app */ + /* triangle focus feedback */ } + #appmenu li { + position: relative; + cursor: pointer; + padding: 0 2px; + display: flex; + justify-content: center; + /* focused app visual feedback */ + /* hidden apps menu */ + /* App title */ + /* Set up transitions for showing app titles on hover */ + /* App icon */ + /* Triangle */ } + #appmenu li a { + position: relative; + display: flex; + margin: 0; + height: var(--header-height); + width: var(--header-height); + align-items: center; + justify-content: center; + opacity: .6; + letter-spacing: -0.5px; + font-size: 12px; } + #appmenu li a svg image { + filter: var(--primary-invert-if-bright); } + #appmenu li:hover a, + #appmenu li a:focus, + #appmenu li a.active { + opacity: 1; + font-weight: bold; } + #appmenu li:hover a, + #appmenu li a:focus { + font-size: 14px; } + #appmenu li:hover a + span, + #appmenu li a:focus + span, + #appmenu li:hover span, + #appmenu li:focus span, + #appmenu li a:focus span, + #appmenu li a.active span { + display: inline-block; + text-overflow: initial; + width: auto; + overflow: hidden; + padding: 0 5px; + z-index: 2; } + #appmenu li img, + #appmenu li .icon-more-white { + display: inline-block; + width: 20px; + height: 20px; } + #appmenu li span { + opacity: 0; + position: absolute; + color: var(--color-primary-text); + bottom: 2px; + width: 100%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + transition: all var(--animation-quick) ease; + pointer-events: none; } + #appmenu li svg, + #appmenu li .icon-more-white { + transition: transform var(--animation-quick) ease; } + #appmenu li a::before { + transition: border var(--animation-quick) ease; } + #appmenu:hover li { + /* Move up app icon */ + /* Show app title */ + /* Prominent app title for current and hovered/focused app */ + /* Smaller triangle because of limited space */ } + #appmenu:hover li svg, + #appmenu:hover li .icon-more, + #appmenu:hover li .icon-more-white, + #appmenu:hover li .icon-loading-small, + #appmenu:hover li .icon-loading-small-dark { + transform: translateY(-7px); } + #appmenu:hover li span { + opacity: .6; + bottom: 2px; + z-index: -1; + /* fix clickability issue - otherwise we need to move the span into the link */ } + #appmenu:hover li:hover span, + #appmenu:hover li:focus span, + #appmenu:hover li .active + span { + opacity: 1; } + #appmenu:hover li a::before { + border-width: 5px; } + #appmenu li a:focus { + /* Move up app icon */ + /* Show app title */ + /* Smaller triangle because of limited space */ } + #appmenu li a:focus svg, + #appmenu li a:focus .icon-more, + #appmenu li a:focus .icon-more-white, + #appmenu li a:focus .icon-loading-small, + #appmenu li a:focus .icon-loading-small-dark { + transform: translateY(-7px); } + #appmenu li a:focus + span, + #appmenu li a:focus span { + opacity: 1; + bottom: 2px; } + #appmenu li a:focus::before { + border-width: 5px; } + #appmenu li a::before { + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 0 solid transparent; + border-bottom-color: var(--color-main-background); + border-width: 10px; + transform: translateX(-50%); + left: 50%; + bottom: 0; + display: none; } + #appmenu li a.active::before, + #appmenu li:hover a::before, + #appmenu li:hover a.active::before, + #appmenu li a:focus::before { + display: block; } + #appmenu li a.active::before { + z-index: 99; } + #appmenu li:hover a::before, + #appmenu li a.active:hover::before, + #appmenu li a:focus::before { + z-index: 101; } + #appmenu li.hidden { + display: none; } + #appmenu #more-apps { + z-index: 3; } + +.unread-counter { + display: none; } + +#apps .app-icon-notification, +#appmenu .app-icon-notification { + fill: var(--color-error); } + +#apps svg:not(.has-unread) .app-icon-notification-mask, +#appmenu svg:not(.has-unread) .app-icon-notification-mask { + display: none; } + +#apps svg:not(.has-unread) .app-icon-notification, +#appmenu svg:not(.has-unread) .app-icon-notification { + display: none; } + +/* Skip navigation links – show only on keyboard focus */ +.skip-navigation { + padding: 11px; + position: absolute; + overflow: hidden; + z-index: 9999; + top: -999px; + left: 3px; + /* Force primary color, otherwise too light focused color */ + background: var(--color-primary) !important; } + .skip-navigation.skip-content { + left: 300px; + margin-left: 3px; } + .skip-navigation:focus, .skip-navigation:active { + top: var(--header-height); } + +/* Empty content messages in the header e.g. notifications, contacts menu, … */ +header #emptycontent h2, +header .emptycontent h2 { + font-weight: normal; + font-size: 16px; } + +header #emptycontent [class^='icon-'], +header #emptycontent [class*='icon-'], +header .emptycontent [class^='icon-'], +header .emptycontent [class*='icon-'] { + background-size: 48px; + height: 48px; + width: 48px; } + +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * @author Joas Schilling + * @author Lukas Reschke + * @author Roeland Jago Douma + * @author Vincent Chan + * @author Thomas Müller + * @author Hendrik Leppelsack + * @author Jan-Christoph Borchardt + * + * @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 . + * + */ +/* GLOBAL ------------------------------------------------------------------- */ +[class^='icon-'], [class*=' icon-'] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; } + +.icon-breadcrumb { + background-image: url("../core/img/breadcrumb.svg?v=1"); } + +/* LOADING ------------------------------------------------------------------ */ +.loading, +.loading-small, +.icon-loading, +.icon-loading-dark, +.icon-loading-small, +.icon-loading-small-dark { + position: relative; } + .loading:after, + .loading-small:after, + .icon-loading:after, + .icon-loading-dark:after, + .icon-loading-small:after, + .icon-loading-small-dark:after { + z-index: 2; + content: ''; + height: 28px; + width: 28px; + margin: -16px 0 0 -16px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + border: 2px solid var(--color-loading-light); + border-top-color: var(--color-loading-dark); + filter: var(--background-invert-if-dark); } + .primary .loading:after, + .primary + .loading:after, .primary + .loading-small:after, + .primary + + .loading-small:after, .primary + .icon-loading:after, + .primary + + .icon-loading:after, .primary + .icon-loading-dark:after, + .primary + + .icon-loading-dark:after, .primary + .icon-loading-small:after, + .primary + + .icon-loading-small:after, .primary + .icon-loading-small-dark:after, + .primary + + .icon-loading-small-dark:after { + filter: var(--primary-invert-if-bright); } + +.icon-loading-dark:after, +.icon-loading-small-dark:after { + border: 2px solid var(--color-loading-dark); + border-top-color: var(--color-loading-light); } + +.icon-loading-small:after, +.icon-loading-small-dark:after { + height: 12px; + width: 12px; + margin: -8px 0 0 -8px; } + +/* Css replaced elements don't have ::after nor ::before */ +audio.icon-loading, canvas.icon-loading, embed.icon-loading, iframe.icon-loading, img.icon-loading, input.icon-loading, object.icon-loading, video.icon-loading { + background-image: url("../img/loading.gif"); } + +audio.icon-loading-dark, canvas.icon-loading-dark, embed.icon-loading-dark, iframe.icon-loading-dark, img.icon-loading-dark, input.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark { + background-image: url("../img/loading-dark.gif"); } + +audio.icon-loading-small, canvas.icon-loading-small, embed.icon-loading-small, iframe.icon-loading-small, img.icon-loading-small, input.icon-loading-small, object.icon-loading-small, video.icon-loading-small { + background-image: url("../img/loading-small.gif"); } + +audio.icon-loading-small-dark, canvas.icon-loading-small-dark, embed.icon-loading-small-dark, iframe.icon-loading-small-dark, img.icon-loading-small-dark, input.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark { + background-image: url("../img/loading-small-dark.gif"); } + +@keyframes rotate { + from { + transform: rotate(0deg); } + to { + transform: rotate(360deg); } } + +.icon-32 { + background-size: 32px !important; } + +.icon-white.icon-shadow { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +/* ICONS ------------------------------------------------------------------- + * These icon classes are generated automatically with the following pattern + * for icon-black-white('close', ...) + * .icon-close (black icon) + * .icon-close-white (white icon) + * .icon-close.icon-white (white icon) + * + * Some class definitions are kept as before, since they don't follow the pattern + * or have some additional styling like drop shadows + */ +.icon-add { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-add-000: url("../../svg/core/actions/add?color=#000&v=1"); + background-image: var(--icon-add-000); } + +.icon-add-white, +.icon-add.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-add-fff: url("../../svg/core/actions/add?color=#fff&v=1"); + background-image: var(--icon-add-fff); } + +.icon-address { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-address-000: url("../../svg/core/actions/address?color=#000&v=1"); + background-image: var(--icon-address-000); } + +.icon-address-white, +.icon-address.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-address-fff: url("../../svg/core/actions/address?color=#fff&v=1"); + background-image: var(--icon-address-fff); } + +.icon-audio { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-audio-000: url("../../svg/core/actions/audio?color=#000&v=2"); + background-image: var(--icon-audio-000); } + +.icon-audio-white, +.icon-audio.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-audio-fff: url("../../svg/core/actions/audio?color=#fff&v=2"); + background-image: var(--icon-audio-fff); } + +.icon-audio-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-audio-off { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-audio-off-000: url("../../svg/core/actions/audio-off?color=#000&v=1"); + background-image: var(--icon-audio-off-000); } + +.icon-audio-off-white, +.icon-audio-off.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-audio-off-fff: url("../../svg/core/actions/audio-off?color=#fff&v=1"); + background-image: var(--icon-audio-off-fff); } + +.icon-audio-off-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-caret-white, +.icon-caret { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-caret-fff: url("../../svg/core/actions/caret?color=#fff&v=1"); + background-image: var(--icon-caret-fff); } + +.icon-caret-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-caret-000: url("../../svg/core/actions/caret?color=#000&v=1"); + background-image: var(--icon-caret-000); } + +.icon-checkmark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-checkmark-000: url("../../svg/core/actions/checkmark?color=#000&v=1"); + background-image: var(--icon-checkmark-000); } + +.icon-checkmark-white, +.icon-checkmark.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-checkmark-fff: url("../../svg/core/actions/checkmark?color=#fff&v=1"); + background-image: var(--icon-checkmark-fff); } + +.icon-checkmark-color { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-checkmark-46ba61: url("../../svg/core/actions/checkmark?color=#46ba61&v=1"); + background-image: var(--icon-checkmark-46ba61); } + +.icon-clippy { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-clippy-000: url("../../svg/core/actions/clippy?color=#000&v=2"); + background-image: var(--icon-clippy-000); } + +.icon-clippy-white, +.icon-clippy.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-clippy-fff: url("../../svg/core/actions/clippy?color=#fff&v=2"); + background-image: var(--icon-clippy-fff); } + +.icon-close { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-close-000: url("../../svg/core/actions/close?color=#000&v=1"); + background-image: var(--icon-close-000); } + +.icon-close-white, +.icon-close.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-close-fff: url("../../svg/core/actions/close?color=#fff&v=1"); + background-image: var(--icon-close-fff); } + +.icon-comment { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-comment-000: url("../../svg/core/actions/comment?color=#000&v=1"); + background-image: var(--icon-comment-000); } + +.icon-comment-white, +.icon-comment.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-comment-fff: url("../../svg/core/actions/comment?color=#fff&v=1"); + background-image: var(--icon-comment-fff); } + +.icon-confirm { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-confirm-000: url("../../svg/core/actions/confirm?color=#000&v=2"); + background-image: var(--icon-confirm-000); } + +.icon-confirm-white, +.icon-confirm.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-confirm-fff: url("../../svg/core/actions/confirm?color=#fff&v=2"); + background-image: var(--icon-confirm-fff); } + +.icon-download { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-download-000: url("../../svg/core/actions/download?color=#000&v=1"); + background-image: var(--icon-download-000); } + +.icon-download-white, +.icon-download.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-download-fff: url("../../svg/core/actions/download?color=#fff&v=1"); + background-image: var(--icon-download-fff); } + +.icon-confirm-fade { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-confirm-fade-000: url("../../svg/core/actions/confirm-fade?color=#000&v=2"); + background-image: var(--icon-confirm-fade-000); } + +.icon-delete { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-000: url("../../svg/core/actions/delete?color=#000&v=1"); + background-image: var(--icon-delete-000); } + .icon-delete.no-permission:hover, .icon-delete.no-permission:focus, .icon-delete.no-hover:hover, .icon-delete.no-hover:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-000: url("../../svg/core/actions/delete?color=#000&v=1"); + background-image: var(--icon-delete-000); } + .icon-delete:hover, .icon-delete:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-e9322d: url("../../svg/core/actions/delete?color=#e9322d&v=1"); + background-image: var(--icon-delete-e9322d); + filter: initial; } + .icon-delete.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-fff: url("../../svg/core/actions/delete?color=#fff&v=1"); + background-image: var(--icon-delete-fff); } + +.icon-delete-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-fff: url("../../svg/core/actions/delete?color=#fff&v=1"); + background-image: var(--icon-delete-fff); } + .icon-delete-white.no-permission:hover, .icon-delete-white.no-permission:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-fff: url("../../svg/core/actions/delete?color=#fff&v=1"); + background-image: var(--icon-delete-fff); } + .icon-delete-white:hover, .icon-delete-white:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-delete-e9322d: url("../../svg/core/actions/delete?color=#e9322d&v=1"); + background-image: var(--icon-delete-e9322d); } + +.icon-details { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-details-000: url("../../svg/core/actions/details?color=#000&v=1"); + background-image: var(--icon-details-000); } + +.icon-details-white, +.icon-details.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-details-fff: url("../../svg/core/actions/details?color=#fff&v=1"); + background-image: var(--icon-details-fff); } + +.icon-edit { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-edit-000: url("../../svg/core/actions/edit?color=#000&v=1"); + background-image: var(--icon-edit-000); } + +.icon-edit-white, +.icon-edit.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-edit-fff: url("../../svg/core/actions/edit?color=#fff&v=1"); + background-image: var(--icon-edit-fff); } + +.icon-error { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-error-000: url("../../svg/core/actions/error?color=#000&v=1"); + background-image: var(--icon-error-000); } + +.icon-error-white, +.icon-error.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-error-fff: url("../../svg/core/actions/error?color=#fff&v=1"); + background-image: var(--icon-error-fff); } + +.icon-error-color { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-error-e9322d: url("../../svg/core/actions/error?color=#e9322d&v=1"); + background-image: var(--icon-error-e9322d); } + +.icon-external { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-external-000: url("../../svg/core/actions/external?color=#000&v=1"); + background-image: var(--icon-external-000); } + +.icon-external-white, +.icon-external.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-external-fff: url("../../svg/core/actions/external?color=#fff&v=1"); + background-image: var(--icon-external-fff); } + +.icon-fullscreen { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-fullscreen-000: url("../../svg/core/actions/fullscreen?color=#000&v=1"); + background-image: var(--icon-fullscreen-000); } + +.icon-fullscreen-white, +.icon-fullscreen.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-fullscreen-fff: url("../../svg/core/actions/fullscreen?color=#fff&v=1"); + background-image: var(--icon-fullscreen-fff); } + +.icon-fullscreen-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-history { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-history-000: url("../../svg/core/actions/history?color=#000&v=2"); + background-image: var(--icon-history-000); } + +.icon-history-white, +.icon-history.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-history-fff: url("../../svg/core/actions/history?color=#fff&v=2"); + background-image: var(--icon-history-fff); } + +.icon-info { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-info-000: url("../../svg/core/actions/info?color=#000&v=1"); + background-image: var(--icon-info-000); } + +.icon-info-white, +.icon-info.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-info-fff: url("../../svg/core/actions/info?color=#fff&v=1"); + background-image: var(--icon-info-fff); } + +.icon-logout { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-logout-000: url("../../svg/core/actions/logout?color=#000&v=1"); + background-image: var(--icon-logout-000); } + +.icon-logout-white, +.icon-logout.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-logout-fff: url("../../svg/core/actions/logout?color=#fff&v=1"); + background-image: var(--icon-logout-fff); } + +.icon-mail { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-mail-000: url("../../svg/core/actions/mail?color=#000&v=1"); + background-image: var(--icon-mail-000); } + +.icon-mail-white, +.icon-mail.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-mail-fff: url("../../svg/core/actions/mail?color=#fff&v=1"); + background-image: var(--icon-mail-fff); } + +.icon-menu { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-menu-000: url("../../svg/core/actions/menu?color=#000&v=1"); + background-image: var(--icon-menu-000); } + +.icon-menu-white, +.icon-menu.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-menu-fff: url("../../svg/core/actions/menu?color=#fff&v=1"); + background-image: var(--icon-menu-fff); } + +.icon-menu-sidebar { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-menu-sidebar-000: url("../../svg/core/actions/menu-sidebar?color=#000&v=1"); + background-image: var(--icon-menu-sidebar-000); } + +.icon-menu-sidebar-white, +.icon-menu-sidebar.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-menu-sidebar-fff: url("../../svg/core/actions/menu-sidebar?color=#fff&v=1"); + background-image: var(--icon-menu-sidebar-fff); } + +.icon-more { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-more-000: url("../../svg/core/actions/more?color=#000&v=1"); + background-image: var(--icon-more-000); } + +.icon-more-white, +.icon-more.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-more-fff: url("../../svg/core/actions/more?color=#fff&v=1"); + background-image: var(--icon-more-fff); } + +.icon-password { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-password-000: url("../../svg/core/actions/password?color=#000&v=1"); + background-image: var(--icon-password-000); } + +.icon-password-white, +.icon-password.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-password-fff: url("../../svg/core/actions/password?color=#fff&v=1"); + background-image: var(--icon-password-fff); } + +.icon-pause { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-pause-000: url("../../svg/core/actions/pause?color=#000&v=1"); + background-image: var(--icon-pause-000); } + +.icon-pause-white, +.icon-pause.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-pause-fff: url("../../svg/core/actions/pause?color=#fff&v=1"); + background-image: var(--icon-pause-fff); } + +.icon-play { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-000: url("../../svg/core/actions/play?color=#000&v=1"); + background-image: var(--icon-play-000); } + +.icon-play-white, +.icon-play.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-fff: url("../../svg/core/actions/play?color=#fff&v=1"); + background-image: var(--icon-play-fff); } + +.icon-play-add { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-add-000: url("../../svg/core/actions/play-add?color=#000&v=1"); + background-image: var(--icon-play-add-000); } + +.icon-play-add-white, +.icon-play-add.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-add-fff: url("../../svg/core/actions/play-add?color=#fff&v=1"); + background-image: var(--icon-play-add-fff); } + +.icon-play-next { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-next-000: url("../../svg/core/actions/play-next?color=#000&v=1"); + background-image: var(--icon-play-next-000); } + +.icon-play-next-white, +.icon-play-next.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-next-fff: url("../../svg/core/actions/play-next?color=#fff&v=1"); + background-image: var(--icon-play-next-fff); } + +.icon-play-previous { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-previous-000: url("../../svg/core/actions/play-previous?color=#000&v=1"); + background-image: var(--icon-play-previous-000); } + +.icon-play-previous-white, +.icon-play-previous.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-play-previous-fff: url("../../svg/core/actions/play-previous?color=#fff&v=1"); + background-image: var(--icon-play-previous-fff); } + +.icon-projects { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-projects-000: url("../../svg/core/actions/projects?color=#000&v=1"); + background-image: var(--icon-projects-000); } + +.icon-projects-white, +.icon-projects.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-projects-fff: url("../../svg/core/actions/projects?color=#fff&v=1"); + background-image: var(--icon-projects-fff); } + +.icon-public { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-public-000: url("../../svg/core/actions/public?color=#000&v=1"); + background-image: var(--icon-public-000); } + +.icon-public-white, +.icon-public.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-public-fff: url("../../svg/core/actions/public?color=#fff&v=1"); + background-image: var(--icon-public-fff); } + +.icon-quota { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-quota-000: url("../../svg/core/actions/quota?color=#000&v=1"); + background-image: var(--icon-quota-000); } + +.icon-quota-white, +.icon-quota.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-quota-fff: url("../../svg/core/actions/quota?color=#fff&v=1"); + background-image: var(--icon-quota-fff); } + +.icon-rename { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-rename-000: url("../../svg/core/actions/rename?color=#000&v=1"); + background-image: var(--icon-rename-000); } + +.icon-rename-white, +.icon-rename.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-rename-fff: url("../../svg/core/actions/rename?color=#fff&v=1"); + background-image: var(--icon-rename-fff); } + +.icon-screen { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-screen-000: url("../../svg/core/actions/screen?color=#000&v=1"); + background-image: var(--icon-screen-000); } + +.icon-screen-white, +.icon-screen.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-screen-fff: url("../../svg/core/actions/screen?color=#fff&v=1"); + background-image: var(--icon-screen-fff); } + +.icon-template-add { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-template-add-000: url("../../svg/core/actions/template-add?color=#000&v=1"); + background-image: var(--icon-template-add-000); } + +.icon-template-add-white, +.icon-template-add.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-template-add-fff: url("../../svg/core/actions/template-add?color=#fff&v=1"); + background-image: var(--icon-template-add-fff); } + +.icon-screen-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-screen-off { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-screen-off-000: url("../../svg/core/actions/screen-off?color=#000&v=1"); + background-image: var(--icon-screen-off-000); } + +.icon-screen-off-white, +.icon-screen-off.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-screen-off-fff: url("../../svg/core/actions/screen-off?color=#fff&v=1"); + background-image: var(--icon-screen-off-fff); } + +.icon-screen-off-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-search { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-search-000: url("../../svg/core/actions/search?color=#000&v=1"); + background-image: var(--icon-search-000); } + +.icon-search-white, +.icon-search.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-search-fff: url("../../svg/core/actions/search?color=#fff&v=1"); + background-image: var(--icon-search-fff); } + +/* default icon have a .5 opacity */ +.icon-settings { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-settings-000: url("../../svg/core/actions/settings?color=#000&v=1"); + background-image: var(--icon-settings-000); } + +.icon-settings-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-settings-dark-000: url("../../svg/core/actions/settings-dark?color=#000&v=1"); + background-image: var(--icon-settings-dark-000); } + +.icon-settings-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-settings-dark-fff: url("../../svg/core/actions/settings-dark?color=#fff&v=1"); + background-image: var(--icon-settings-dark-fff); } + +/* always use icon-shared, AdBlock blocks icon-share */ +.icon-shared, +.icon-share { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-share-000: url("../../svg/core/actions/share?color=#000&v=1"); + background-image: var(--icon-share-000); } + .icon-shared.icon-white, + .icon-share.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-share-fff: url("../../svg/core/actions/share?color=#fff&v=1"); + background-image: var(--icon-share-fff); } + +.icon-shared-white, +.icon-share-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-share-fff: url("../../svg/core/actions/share?color=#fff&v=1"); + background-image: var(--icon-share-fff); } + +.icon-sound { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-sound-000: url("../../svg/core/actions/sound?color=#000&v=1"); + background-image: var(--icon-sound-000); } + +.icon-sound-white, +.icon-sound.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-sound-fff: url("../../svg/core/actions/sound?color=#fff&v=1"); + background-image: var(--icon-sound-fff); } + +.icon-sound-off { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-sound-off-000: url("../../svg/core/actions/sound-off?color=#000&v=1"); + background-image: var(--icon-sound-off-000); } + +.icon-sound-off-white, +.icon-sound-off.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-sound-off-fff: url("../../svg/core/actions/sound-off?color=#fff&v=1"); + background-image: var(--icon-sound-off-fff); } + +.icon-favorite { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-dark-000: url("../../svg/core/actions/star-dark?color=#000&v=1"); + background-image: var(--icon-star-dark-000); } + +.icon-star { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-000: url("../../svg/core/actions/star?color=#000&v=1"); + background-image: var(--icon-star-000); } + +.icon-star-white, +.icon-star.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-fff: url("../../svg/core/actions/star?color=#fff&v=1"); + background-image: var(--icon-star-fff); } + +.icon-star-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-000: url("../../svg/core/actions/star?color=#000&v=1"); + background-image: var(--icon-star-000); } + +.icon-starred { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-dark-FC0: url("../../svg/core/actions/star-dark?color=#FC0&v=1"); + background-image: var(--icon-star-dark-FC0); } + .icon-starred:hover, .icon-starred:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-000: url("../../svg/core/actions/star?color=#000&v=1"); + background-image: var(--icon-star-000); } + +.icon-star:hover, .icon-star:focus { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-star-dark-FC0: url("../../svg/core/actions/star-dark?color=#FC0&v=1"); + background-image: var(--icon-star-dark-FC0); } + +.icon-tag { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-tag-000: url("../../svg/core/actions/tag?color=#000&v=2"); + background-image: var(--icon-tag-000); } + +.icon-tag-white, +.icon-tag.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-tag-fff: url("../../svg/core/actions/tag?color=#fff&v=2"); + background-image: var(--icon-tag-fff); } + +.icon-timezone { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-timezone-000: url("../../svg/core/actions/timezone?color=#000&v=1"); + background-image: var(--icon-timezone-000); } + +.icon-timezone-white, +.icon-timezone.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-timezone-fff: url("../../svg/core/actions/timezone?color=#fff&v=1"); + background-image: var(--icon-timezone-fff); } + +.icon-toggle { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-000: url("../../svg/core/actions/toggle?color=#000&v=1"); + background-image: var(--icon-toggle-000); } + +.icon-toggle-white, +.icon-toggle.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-fff: url("../../svg/core/actions/toggle?color=#fff&v=1"); + background-image: var(--icon-toggle-fff); } + +.icon-toggle-background { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-background-000: url("../../svg/core/actions/toggle-background?color=#000&v=1"); + background-image: var(--icon-toggle-background-000); } + +.icon-toggle-background-white, +.icon-toggle-background.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-background-fff: url("../../svg/core/actions/toggle-background?color=#fff&v=1"); + background-image: var(--icon-toggle-background-fff); } + +.icon-toggle-pictures { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-pictures-000: url("../../svg/core/actions/toggle-pictures?color=#000&v=1"); + background-image: var(--icon-toggle-pictures-000); } + +.icon-toggle-pictures-white, +.icon-toggle-pictures.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-pictures-fff: url("../../svg/core/actions/toggle-pictures?color=#fff&v=1"); + background-image: var(--icon-toggle-pictures-fff); } + +.icon-toggle-filelist { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-filelist-000: url("../../svg/core/actions/toggle-filelist?color=#000&v=1"); + background-image: var(--icon-toggle-filelist-000); } + +.icon-toggle-filelist-white, +.icon-toggle-filelist.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-toggle-filelist-fff: url("../../svg/core/actions/toggle-filelist?color=#fff&v=1"); + background-image: var(--icon-toggle-filelist-fff); } + +.icon-triangle-e { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-e-000: url("../../svg/core/actions/triangle-e?color=#000&v=1"); + background-image: var(--icon-triangle-e-000); } + +.icon-triangle-e-white, +.icon-triangle-e.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-e-fff: url("../../svg/core/actions/triangle-e?color=#fff&v=1"); + background-image: var(--icon-triangle-e-fff); } + +.icon-triangle-n { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-n-000: url("../../svg/core/actions/triangle-n?color=#000&v=1"); + background-image: var(--icon-triangle-n-000); } + +.icon-triangle-n-white, +.icon-triangle-n.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-n-fff: url("../../svg/core/actions/triangle-n?color=#fff&v=1"); + background-image: var(--icon-triangle-n-fff); } + +.icon-triangle-s { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-s-000: url("../../svg/core/actions/triangle-s?color=#000&v=1"); + background-image: var(--icon-triangle-s-000); } + +.icon-triangle-s-white, +.icon-triangle-s.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-s-fff: url("../../svg/core/actions/triangle-s?color=#fff&v=1"); + background-image: var(--icon-triangle-s-fff); } + +.icon-upload { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-upload-000: url("../../svg/core/actions/upload?color=#000&v=1"); + background-image: var(--icon-upload-000); } + +.icon-upload-white, +.icon-upload.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-upload-fff: url("../../svg/core/actions/upload?color=#fff&v=1"); + background-image: var(--icon-upload-fff); } + +.icon-user { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-user-000: url("../../svg/core/actions/user?color=#000&v=1"); + background-image: var(--icon-user-000); } + +.icon-user-white, +.icon-user.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-user-fff: url("../../svg/core/actions/user?color=#fff&v=1"); + background-image: var(--icon-user-fff); } + +.icon-group { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-group-000: url("../../svg/core/actions/group?color=#000&v=1"); + background-image: var(--icon-group-000); } + +.icon-group-white, +.icon-group.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-group-fff: url("../../svg/core/actions/group?color=#fff&v=1"); + background-image: var(--icon-group-fff); } + +.icon-filter { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-filter-000: url("../../svg/core/actions/filter?color=#000&v=1"); + background-image: var(--icon-filter-000); } + +.icon-filter-white, +.icon-filter.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-filter-fff: url("../../svg/core/actions/filter?color=#fff&v=1"); + background-image: var(--icon-filter-fff); } + +.icon-video { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-000: url("../../svg/core/actions/video?color=#000&v=2"); + background-image: var(--icon-video-000); } + +.icon-video-white, +.icon-video.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-fff: url("../../svg/core/actions/video?color=#fff&v=2"); + background-image: var(--icon-video-fff); } + +.icon-video-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-video-off { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-off-000: url("../../svg/core/actions/video-off?color=#000&v=1"); + background-image: var(--icon-video-off-000); } + +.icon-video-off-white, +.icon-video-off.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-off-fff: url("../../svg/core/actions/video-off?color=#fff&v=1"); + background-image: var(--icon-video-off-fff); } + +.icon-video-off-white { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } + +.icon-video-switch { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-switch-000: url("../../svg/core/actions/video-switch?color=#000&v=1"); + background-image: var(--icon-video-switch-000); } + +.icon-video-switch-white, +.icon-video-switch.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-video-switch-fff: url("../../svg/core/actions/video-switch?color=#fff&v=1"); + background-image: var(--icon-video-switch-fff); } + +/* SHADOW WHITE ICONS: white version only ----------------------------------- */ +.icon-view-close, +.icon-view-close-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-view-close-fff: url("../../svg/core/actions/view-close?color=#fff&v=1"); + background-image: var(--icon-view-close-fff); } + +.icon-view-download, +.icon-view-download-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-view-download-fff: url("../../svg/core/actions/view-download?color=#fff&v=1"); + background-image: var(--icon-view-download-fff); } + +.icon-view-pause, +.icon-view-pause-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-view-pause-fff: url("../../svg/core/actions/view-pause?color=#fff&v=1"); + background-image: var(--icon-view-pause-fff); } + +.icon-view-play, +.icon-view-play-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-view-play-fff: url("../../svg/core/actions/view-play?color=#fff&v=1"); + background-image: var(--icon-view-play-fff); } + +.icon-view-next { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-arrow-right-000: url("../../svg/core/actions/arrow-right?color=#000&v=1"); + background-image: var(--icon-arrow-right-000); } + .icon-view-next.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-arrow-right-fff: url("../../svg/core/actions/arrow-right?color=#fff&v=1"); + background-image: var(--icon-arrow-right-fff); } + +.icon-view-previous { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-arrow-left-000: url("../../svg/core/actions/arrow-left?color=#000&v=1"); + background-image: var(--icon-arrow-left-000); } + .icon-view-previous.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-arrow-left-fff: url("../../svg/core/actions/arrow-left?color=#fff&v=1"); + background-image: var(--icon-arrow-left-fff); } + +.icon-disabled-user { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-disabled-user-000: url("../../svg/core/actions/disabled-user?color=#000&v=1"); + background-image: var(--icon-disabled-user-000); } + +.icon-disabled-user-white, +.icon-disabled-user.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-disabled-user-fff: url("../../svg/core/actions/disabled-user?color=#fff&v=1"); + background-image: var(--icon-disabled-user-fff); } + +.icon-disabled-users { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-disabled-users-000: url("../../svg/core/actions/disabled-users?color=#000&v=1"); + background-image: var(--icon-disabled-users-000); } + +.icon-disabled-users-white, +.icon-disabled-users.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-disabled-users-fff: url("../../svg/core/actions/disabled-users?color=#fff&v=1"); + background-image: var(--icon-disabled-users-fff); } + +.icon-user-admin { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-user-admin-000: url("../../svg/core/actions/user-admin?color=#000&v=1"); + background-image: var(--icon-user-admin-000); } + +.icon-user-admin-white, +.icon-user-admin.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-user-admin-fff: url("../../svg/core/actions/user-admin?color=#fff&v=1"); + background-image: var(--icon-user-admin-fff); } + +.icon-alert-outline { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-alert-outline-000: url("../../svg/core/actions/alert-outline?color=#000&v=1"); + background-image: var(--icon-alert-outline-000); } + +.icon-alert-outline-white, +.icon-alert-outline.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-alert-outline-fff: url("../../svg/core/actions/alert-outline?color=#fff&v=1"); + background-image: var(--icon-alert-outline-fff); } + +/* PLACES ------------------------------------------------------------------- */ +.icon-calendar { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-calendar-fff: url("../../svg/core/places/calendar?color=#fff&v=1"); + background-image: var(--icon-calendar-fff); } + +.icon-calendar-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-calendar-000: url("../../svg/core/places/calendar?color=#000&v=1"); + background-image: var(--icon-calendar-000); } + +.icon-contacts { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-contacts-fff: url("../../svg/core/places/contacts?color=#fff&v=1"); + background-image: var(--icon-contacts-fff); } + +.icon-contacts-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-contacts-000: url("../../svg/core/places/contacts?color=#000&v=1"); + background-image: var(--icon-contacts-000); } + +.icon-files { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-files-fff: url("../../svg/core/places/files?color=#fff&v=1"); + background-image: var(--icon-files-fff); } + +.icon-files-dark { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-files-000: url("../../svg/core/places/files?color=#000&v=1"); + background-image: var(--icon-files-000); } + +.icon-file, +.icon-filetype-text { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-text-969696: url("../../svg/core/filetypes/text?color=#969696&v=1"); + background-image: var(--icon-text-969696); } + +.icon-filetype-file { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-file-969696: url("../../svg/core/filetypes/file?color=#969696&v=1"); + background-image: var(--icon-file-969696); } + +.icon-folder { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-folder-000: url("../../svg/core/filetypes/folder?color=#000&v=1"); + background-image: var(--icon-folder-000); } + +.icon-folder-white, +.icon-folder.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-folder-fff: url("../../svg/core/filetypes/folder?color=#fff&v=1"); + background-image: var(--icon-folder-fff); } + +.icon-filetype-folder { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-folder-0082c9: url("../../svg/core/filetypes/folder?color=#0082c9&v=1"); + background-image: var(--icon-folder-0082c9); } + +.icon-filetype-folder-drag-accept { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-folder-drag-accept-0082c9: url("../../svg/core/filetypes/folder-drag-accept?color=#0082c9&v=1"); + background-image: var(--icon-folder-drag-accept-0082c9); } + +.icon-home { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-home-000: url("../../svg/core/places/home?color=#000&v=1"); + background-image: var(--icon-home-000); } + +.icon-home-white, +.icon-home.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-home-fff: url("../../svg/core/places/home?color=#fff&v=1"); + background-image: var(--icon-home-fff); } + +.icon-link { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-link-000: url("../../svg/core/places/link?color=#000&v=1"); + background-image: var(--icon-link-000); } + +.icon-link-white, +.icon-link.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-link-fff: url("../../svg/core/places/link?color=#fff&v=1"); + background-image: var(--icon-link-fff); } + +.icon-music { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-music-000: url("../../svg/core/places/music?color=#000&v=1"); + background-image: var(--icon-music-000); } + +.icon-music-white, +.icon-music.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-music-fff: url("../../svg/core/places/music?color=#fff&v=1"); + background-image: var(--icon-music-fff); } + +.icon-picture { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-picture-000: url("../../svg/core/places/picture?color=#000&v=1"); + background-image: var(--icon-picture-000); } + +.icon-picture-white, +.icon-picture.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-picture-fff: url("../../svg/core/places/picture?color=#fff&v=1"); + background-image: var(--icon-picture-fff); } + +/* CLIENTS ------------------------------------------------------------------- */ +.icon-desktop { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-desktop-000: url("../../svg/core/clients/desktop?color=#000&v=1"); + background-image: var(--icon-desktop-000); } + +.icon-desktop-white, +.icon-desktop.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-desktop-fff: url("../../svg/core/clients/desktop?color=#fff&v=1"); + background-image: var(--icon-desktop-fff); } + +.icon-phone { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-phone-000: url("../../svg/core/clients/phone?color=#000&v=1"); + background-image: var(--icon-phone-000); } + +.icon-phone-white, +.icon-phone.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-phone-fff: url("../../svg/core/clients/phone?color=#fff&v=1"); + background-image: var(--icon-phone-fff); } + +.icon-tablet { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-tablet-000: url("../../svg/core/clients/tablet?color=#000&v=1"); + background-image: var(--icon-tablet-000); } + +.icon-tablet-white, +.icon-tablet.icon-white { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-tablet-fff: url("../../svg/core/clients/tablet?color=#fff&v=1"); + background-image: var(--icon-tablet-fff); } + +/* APP CATEGORIES ------------------------------------------------------------------- */ +.icon-category-installed { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-user-000: url("../../svg/core/actions/user?color=#000&v=1"); + background-image: var(--icon-user-000); } + +.icon-category-enabled { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-checkmark-000: url("../../svg/core/actions/checkmark?color=#000&v=1"); + background-image: var(--icon-checkmark-000); } + +.icon-category-disabled { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-close-000: url("../../svg/core/actions/close?color=#000&v=1"); + background-image: var(--icon-close-000); } + +.icon-category-app-bundles { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-bundles-000: url("../../svg/core/categories/bundles?color=#000&v=1"); + background-image: var(--icon-bundles-000); } + +.icon-category-updates { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-download-000: url("../../svg/core/actions/download?color=#000&v=1"); + background-image: var(--icon-download-000); } + +.icon-category-files { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-files-000: url("../../svg/core/categories/files?color=#000&v=1"); + background-image: var(--icon-files-000); } + +.icon-category-social { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-social-000: url("../../svg/core/categories/social?color=#000&v=1"); + background-image: var(--icon-social-000); } + +.icon-category-office { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-office-000: url("../../svg/core/categories/office?color=#000&v=1"); + background-image: var(--icon-office-000); } + +.icon-category-auth { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-auth-000: url("../../svg/core/categories/auth?color=#000&v=1"); + background-image: var(--icon-auth-000); } + +.icon-category-monitoring { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-monitoring-000: url("../../svg/core/categories/monitoring?color=#000&v=1"); + background-image: var(--icon-monitoring-000); } + +.icon-category-multimedia { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-multimedia-000: url("../../svg/core/categories/multimedia?color=#000&v=1"); + background-image: var(--icon-multimedia-000); } + +.icon-category-organization { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-organization-000: url("../../svg/core/categories/organization?color=#000&v=1"); + background-image: var(--icon-organization-000); } + +.icon-category-customization { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-customization-000: url("../../svg/core/categories/customization?color=#000&v=1"); + background-image: var(--icon-customization-000); } + +.icon-category-integration { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-integration-000: url("../../svg/core/categories/integration?color=#000&v=1"); + background-image: var(--icon-integration-000); } + +.icon-category-tools { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-settings-dark-000: url("../../svg/core/actions/settings-dark?color=#000&v=1"); + background-image: var(--icon-settings-dark-000); } + +.icon-category-games { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-games-000: url("../../svg/core/categories/games?color=#000&v=1"); + background-image: var(--icon-games-000); } + +.icon-category-security { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-password-000: url("../../svg/core/actions/password?color=#000&v=1"); + background-image: var(--icon-password-000); } + +.icon-category-search { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-search-000: url("../../svg/core/actions/search?color=#000&v=1"); + background-image: var(--icon-search-000); } + +.icon-category-workflow { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-workflow-000: url("../../svg/core/categories/workflow?color=#000&v=1"); + background-image: var(--icon-workflow-000); } + +.icon-category-dashboard { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-dashboard-000: url("../../svg/core/categories/dashboard?color=#000&v=1"); + background-image: var(--icon-dashboard-000); } + +.icon-talk { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-spreed-app-dark-000: url("../../svg/spreed/app-dark?color=#000&v=1"); + background-image: var(--icon-spreed-app-dark-000); } + +.nav-icon-systemtagsfilter { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-tag-000: url("../../svg/core/actions/tag?color=#000&v=1"); + background-image: var(--icon-tag-000); } + +/** + * @copyright Copyright (c) 2016-2017, John Molakvoæ + * @copyright Copyright (c) 2016, Julius Haertl + * @copyright Copyright (c) 2016, Morris Jobke + * @copyright Copyright (c) 2016, pgys + * @copyright Copyright (c) 2016, Lukas Reschke + * @copyright Copyright (c) 2016, Stefan Weil + * @copyright Copyright (c) 2016, Roeland Jago Douma + * @copyright Copyright (c) 2016, jowi + * @copyright Copyright (c) 2015, Hendrik Leppelsack + * @copyright Copyright (c) 2015, Thomas Müller + * @copyright Copyright (c) 2015, Vincent Petry + * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt + * + * @license GNU AGPL version 3 or any later version + * + */ +/* BASE STYLING ------------------------------------------------------------ */ +h2 { + font-weight: bold; + font-size: 20px; + margin-bottom: 12px; + line-height: 30px; + color: var(--color-text-light); } + +h3 { + font-size: 16px; + margin: 12px 0; + color: var(--color-text-light); } + +h4 { + font-size: 14px; } + +/* do not use italic typeface style, instead lighter color */ +em { + font-style: normal; + color: var(--color-text-lighter); } + +dl { + padding: 12px 0; } + +dt, +dd { + display: inline-block; + padding: 12px; + padding-left: 0; } + +dt { + width: 130px; + white-space: nowrap; + text-align: right; } + +kbd { + padding: 4px 10px; + border: 1px solid #ccc; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + border-radius: var(--border-radius); + display: inline-block; + white-space: nowrap; } + +/* APP STYLING ------------------------------------------------------------ */ +#content[class*='app-'] * { + box-sizing: border-box; } + +/* APP-NAVIGATION ------------------------------------------------------------ */ +/* Navigation: folder like structure */ +#app-navigation:not(.vue) { + width: 300px; + position: fixed; + top: var(--header-height); + left: 0; + z-index: 500; + overflow-y: auto; + overflow-x: hidden; + height: calc(100% - var(--header-height)); + box-sizing: border-box; + background-color: var(--color-main-background); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + /* 'New' button */ + /** + * Button styling for menu, edit and undo + */ + /** + * Collapsible menus + */ + /** + * App navigation utils, buttons and counters for drop down menu + */ + /** + * Editable entries + */ + /** + * Deleted entries with undo button + */ + /** + * Common rules for animation of undo and edit entries + */ + /** + * drag and drop + */ } + #app-navigation:not(.vue) .app-navigation-new { + display: block; + padding: 10px; } + #app-navigation:not(.vue) .app-navigation-new button { + display: inline-block; + width: 100%; + padding: 10px; + padding-left: 34px; + background-position: 10px center; + text-align: left; + margin: 0; } + #app-navigation:not(.vue) li { + position: relative; } + #app-navigation:not(.vue) > ul { + position: relative; + height: 100%; + width: inherit; + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + display: flex; + flex-direction: column; + /* Menu and submenu */ } + #app-navigation:not(.vue) > ul > li { + display: inline-flex; + flex-wrap: wrap; + order: 1; + flex-shrink: 0; + /* Pinned-to-bottom entries */ + /* align loader */ + /* hide deletion/collapse of subitems */ + /* Second level nesting for lists */ } + #app-navigation:not(.vue) > ul > li.pinned { + order: 2; } + #app-navigation:not(.vue) > ul > li.pinned.first-pinned { + margin-top: auto !important; } + #app-navigation:not(.vue) > ul > li > .app-navigation-entry-deleted { + /* Ugly hack for overriding the main entry link */ + padding-left: 44px !important; } + #app-navigation:not(.vue) > ul > li > .app-navigation-entry-edit { + /* Ugly hack for overriding the main entry link */ + /* align the input correctly with the link text + 44px-6px padding for the input */ + padding-left: 38px !important; } + #app-navigation:not(.vue) > ul > li a:hover, + #app-navigation:not(.vue) > ul > li a:hover > a, + #app-navigation:not(.vue) > ul > li a:focus, + #app-navigation:not(.vue) > ul > li a:focus > a { + background-color: var(--color-background-hover); } + #app-navigation:not(.vue) > ul > li.active, + #app-navigation:not(.vue) > ul > li.active > a, + #app-navigation:not(.vue) > ul > li a:active, + #app-navigation:not(.vue) > ul > li a:active > a, + #app-navigation:not(.vue) > ul > li a.selected, + #app-navigation:not(.vue) > ul > li a.selected > a, + #app-navigation:not(.vue) > ul > li a.active, + #app-navigation:not(.vue) > ul > li a.active > a { + background-color: var(--color-primary-light); + color: var(--color-primary-text); } + #app-navigation:not(.vue) > ul > li.icon-loading-small:after { + left: 22px; + top: 22px; } + #app-navigation:not(.vue) > ul > li.deleted > ul, #app-navigation:not(.vue) > ul > li.collapsible:not(.open) > ul { + display: none; } + #app-navigation:not(.vue) > ul > li.app-navigation-caption { + font-weight: bold; + line-height: 44px; + padding: 0 44px; + white-space: nowrap; + text-overflow: ellipsis; + box-shadow: none !important; + user-select: none; + pointer-events: none; } + #app-navigation:not(.vue) > ul > li.app-navigation-caption:not(:first-child) { + margin-top: 22px; } + #app-navigation:not(.vue) > ul > li > ul { + flex: 0 1 auto; + width: 100%; + position: relative; } + #app-navigation:not(.vue) > ul > li > ul > li { + display: inline-flex; + flex-wrap: wrap; + padding-left: 44px; + /* align loader */ } + #app-navigation:not(.vue) > ul > li > ul > li:hover, + #app-navigation:not(.vue) > ul > li > ul > li:hover > a, #app-navigation:not(.vue) > ul > li > ul > li:focus, + #app-navigation:not(.vue) > ul > li > ul > li:focus > a { + background-color: var(--color-background-hover); } + #app-navigation:not(.vue) > ul > li > ul > li.active, + #app-navigation:not(.vue) > ul > li > ul > li.active > a, + #app-navigation:not(.vue) > ul > li > ul > li a.selected, + #app-navigation:not(.vue) > ul > li > ul > li a.selected > a { + background-color: var(--color-primary-light); } + #app-navigation:not(.vue) > ul > li > ul > li.icon-loading-small:after { + left: 22px; + /* 44px / 2 */ } + #app-navigation:not(.vue) > ul > li > ul > li > .app-navigation-entry-deleted { + /* margin to keep active indicator visible */ + margin-left: 4px; + padding-left: 84px; } + #app-navigation:not(.vue) > ul > li > ul > li > .app-navigation-entry-edit { + /* margin to keep active indicator visible */ + margin-left: 4px; + /* align the input correctly with the link text + 44px+44px-4px-6px padding for the input */ + padding-left: 78px !important; } + #app-navigation:not(.vue) > ul > li, + #app-navigation:not(.vue) > ul > li > ul > li { + position: relative; + width: 100%; + box-sizing: border-box; + /* hide icons if loading */ + /* Main entry link */ + /* Bullet icon */ + /* popover fix the flex positionning of the li parent */ + /* show edit/undo field if editing/deleted */ } + #app-navigation:not(.vue) > ul > li.icon-loading-small > a, + #app-navigation:not(.vue) > ul > li.icon-loading-small > .app-navigation-entry-bullet, + #app-navigation:not(.vue) > ul > li > ul > li.icon-loading-small > a, + #app-navigation:not(.vue) > ul > li > ul > li.icon-loading-small > .app-navigation-entry-bullet { + /* hide icon or bullet if loading state*/ + background: transparent !important; } + #app-navigation:not(.vue) > ul > li > a, + #app-navigation:not(.vue) > ul > li > ul > li > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px 0 14px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--color-main-text); + opacity: .8; + flex: 1 1 0px; + z-index: 100; + /* above the bullet to allow click*/ + /* TODO: forbid using img as icon in menu? */ + /* counter can also be inside the link */ } + #app-navigation:not(.vue) > ul > li > a.svg, + #app-navigation:not(.vue) > ul > li > ul > li > a.svg { + padding: 0 12px 0 44px; } + #app-navigation:not(.vue) > ul > li > a:first-child img, + #app-navigation:not(.vue) > ul > li > ul > li > a:first-child img { + margin-right: 11px; + width: 16px; + height: 16px; + filter: var(--background-invert-if-dark); } + #app-navigation:not(.vue) > ul > li > a > .app-navigation-entry-utils, + #app-navigation:not(.vue) > ul > li > ul > li > a > .app-navigation-entry-utils { + display: inline-block; + float: right; } + #app-navigation:not(.vue) > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter, + #app-navigation:not(.vue) > ul > li > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter { + padding-right: 0 !important; } + #app-navigation:not(.vue) > ul > li > .app-navigation-entry-bullet, + #app-navigation:not(.vue) > ul > li > ul > li > .app-navigation-entry-bullet { + position: absolute; + display: block; + margin: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + transition: background 100ms ease-in-out; } + #app-navigation:not(.vue) > ul > li > .app-navigation-entry-bullet + a, + #app-navigation:not(.vue) > ul > li > ul > li > .app-navigation-entry-bullet + a { + /* hide icon if bullet, can't have both */ + background: transparent !important; } + #app-navigation:not(.vue) > ul > li > .app-navigation-entry-menu, + #app-navigation:not(.vue) > ul > li > ul > li > .app-navigation-entry-menu { + top: 44px; } + #app-navigation:not(.vue) > ul > li.editing .app-navigation-entry-edit, + #app-navigation:not(.vue) > ul > li > ul > li.editing .app-navigation-entry-edit { + opacity: 1; + z-index: 250; } + #app-navigation:not(.vue) > ul > li.deleted .app-navigation-entry-deleted, + #app-navigation:not(.vue) > ul > li > ul > li.deleted .app-navigation-entry-deleted { + transform: translateX(0); + z-index: 250; } + #app-navigation:not(.vue).hidden { + display: none; } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + border: 0; + opacity: 0.5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:hover, #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:focus, + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus { + background-color: transparent; + opacity: 1; } + #app-navigation:not(.vue) .collapsible { + /* Fallback for old collapse button. + TODO: to be removed. Leaved here for retro compatibility */ + /* force padding on link no matter if 'a' has an icon class */ } + #app-navigation:not(.vue) .collapsible .collapse { + opacity: 0; + position: absolute; + width: 44px; + height: 44px; + margin: 0; + z-index: 110; + /* Needed for IE11; otherwise the button appears to the right of the + * link. */ + left: 0; } + #app-navigation:not(.vue) .collapsible:before { + position: absolute; + height: 44px; + width: 44px; + margin: 0; + padding: 0; + background: none; + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-triangle-s-000: url("../../svg/core/actions/triangle-s?color=#000&v=1"); + background-image: var(--icon-triangle-s-000); + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + border: none; + border-radius: 0; + outline: none !important; + box-shadow: none; + content: ' '; + opacity: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + z-index: 105; + background-color: var(--color-background-hover); + border-radius: 50%; + transition: opacity 100ms ease-in-out; } + #app-navigation:not(.vue) .collapsible > a:first-child { + padding-left: 44px; } + #app-navigation:not(.vue) .collapsible:hover:before, #app-navigation:not(.vue) .collapsible:focus:before { + opacity: 1; } + #app-navigation:not(.vue) .collapsible:hover > .app-navigation-entry-bullet, #app-navigation:not(.vue) .collapsible:focus > .app-navigation-entry-bullet { + background: transparent !important; } + #app-navigation:not(.vue) .collapsible.open:before { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); } + #app-navigation:not(.vue) .app-navigation-entry-utils { + flex: 0 1 auto; } + #app-navigation:not(.vue) .app-navigation-entry-utils ul { + display: flex !important; + align-items: center; + justify-content: flex-end; } + #app-navigation:not(.vue) .app-navigation-entry-utils li { + width: 44px !important; + height: 44px; } + #app-navigation:not(.vue) .app-navigation-entry-utils button { + height: 100%; + width: 100%; + margin: 0; + box-shadow: none; } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button { + /* Prevent bg img override if an icon class is set */ } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button button:not([class^='icon-']):not([class*=' icon-']) { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-more-000: url("../../svg/core/actions/more?color=#000&v=1"); + background-image: var(--icon-more-000); } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:hover button, + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:focus button { + background-color: transparent; + opacity: 1; } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-counter { + overflow: hidden; + text-align: right; + font-size: 9pt; + line-height: 44px; + padding: 0 12px; + /* Same padding as all li > a in the app-navigation */ } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted { + padding: 0; + text-align: center; } + #app-navigation:not(.vue) .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted span { + padding: 2px 5px; + border-radius: 10px; + background-color: var(--color-primary); + color: var(--color-primary-text); } + #app-navigation:not(.vue) .app-navigation-entry-edit { + padding-left: 5px; + padding-right: 5px; + display: block; + width: calc(100% - 1px); + /* Avoid border overlapping */ + transition: opacity 250ms ease-in-out; + opacity: 0; + position: absolute; + background-color: var(--color-main-background); + z-index: -1; } + #app-navigation:not(.vue) .app-navigation-entry-edit form, + #app-navigation:not(.vue) .app-navigation-entry-edit div { + display: inline-flex; + width: 100%; } + #app-navigation:not(.vue) .app-navigation-entry-edit input { + padding: 5px; + margin-right: 0; + height: 38px; } + #app-navigation:not(.vue) .app-navigation-entry-edit input:hover, #app-navigation:not(.vue) .app-navigation-entry-edit input:focus { + /* overlapp borders */ + z-index: 1; } + #app-navigation:not(.vue) .app-navigation-entry-edit input[type='text'] { + width: 100%; + min-width: 0; + /* firefox hack: override auto */ + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + #app-navigation:not(.vue) .app-navigation-entry-edit button, + #app-navigation:not(.vue) .app-navigation-entry-edit input:not([type='text']) { + width: 36px; + height: 38px; + flex: 0 0 36px; } + #app-navigation:not(.vue) .app-navigation-entry-edit button:not(:last-child), + #app-navigation:not(.vue) .app-navigation-entry-edit input:not([type='text']):not(:last-child) { + border-radius: 0 !important; } + #app-navigation:not(.vue) .app-navigation-entry-edit button:not(:first-child), + #app-navigation:not(.vue) .app-navigation-entry-edit input:not([type='text']):not(:first-child) { + margin-left: -1px; } + #app-navigation:not(.vue) .app-navigation-entry-edit button:last-child, + #app-navigation:not(.vue) .app-navigation-entry-edit input:not([type='text']):last-child { + border-bottom-right-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + #app-navigation:not(.vue) .app-navigation-entry-deleted { + display: inline-flex; + padding-left: 44px; + transform: translateX(300px); } + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-description { + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 0px; + line-height: 44px; } + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + margin: 0; + height: 44px; + width: 44px; + line-height: 44px; } + #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, #app-navigation:not(.vue) .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus { + opacity: 1; } + #app-navigation:not(.vue) .app-navigation-entry-edit, + #app-navigation:not(.vue) .app-navigation-entry-deleted { + width: calc(100% - 1px); + /* Avoid border overlapping */ + transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out; + position: absolute; + left: 0; + background-color: var(--color-main-background); + box-sizing: border-box; } + #app-navigation:not(.vue) .drag-and-drop { + -webkit-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + padding-bottom: 40px; } + #app-navigation:not(.vue) .error { + color: var(--color-error); } + #app-navigation:not(.vue) .app-navigation-entry-utils ul, + #app-navigation:not(.vue) .app-navigation-entry-menu ul { + list-style-type: none; } + +/* CONTENT --------------------------------------------------------- */ +#content { + box-sizing: border-box; + position: relative; + display: flex; + padding-top: var(--header-height); + min-height: 100%; } + +/* APP-CONTENT AND WRAPPER ------------------------------------------ */ +/* Part where the content will be loaded into */ +/** + * !Important. We are defining the minimum requirement we want for flex + * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width + * -> 468px. In that case we want 200px for the list and 268px for the content + */ +#app-content { + z-index: 1000; + background-color: var(--color-main-background); + position: relative; + flex-basis: 100vw; + min-height: 100%; + /* margin if navigation element is here */ + /* no top border for first settings item */ + /* if app-content-list is present */ } + #app-navigation:not(.hidden) + #app-content { + margin-left: 300px; } + #app-content > .section:first-child { + border-top: none; } + #app-content #app-content-wrapper { + display: flex; + position: relative; + align-items: stretch; + /* make sure we have at least full height for loaders or such + no need for list/details since we have a flex stretch */ + min-height: 100%; + /* CONTENT DETAILS AFTER LIST*/ } + #app-content #app-content-wrapper .app-content-details { + /* grow full width */ + flex: 1 1 524px; } + #app-content #app-content-wrapper .app-content-details #app-navigation-toggle-back { + display: none; } + +/* APP-SIDEBAR ------------------------------------------------------------ */ +/* + Sidebar: a sidebar to be used within #content + #app-content will be shrinked properly +*/ +#app-sidebar { + width: 27vw; + min-width: 300px; + max-width: 500px; + display: block; + position: 'sticky'; + top: var(--header-height); + right: 0; + overflow-y: auto; + overflow-x: hidden; + z-index: 1500; + height: calc(100vh - var(--header-height)); + background: var(--color-main-background); + border-left: 1px solid var(--color-border); + flex-shrink: 0; } + #app-sidebar.disappear { + display: none; } + +/* APP-SETTINGS ------------------------------------------------------------ */ +/* settings area */ +#app-settings { + margin-top: auto; } + #app-settings.open #app-settings-content, #app-settings.opened #app-settings-content { + display: block; } + +#app-settings-content { + display: none; + padding: 10px; + background-color: var(--color-main-background); + /* restrict height of settings and make scrollable */ + max-height: 300px; + overflow-y: auto; + box-sizing: border-box; + /* display input fields at full width */ } + #app-settings-content input[type='text'] { + width: 93%; } + #app-settings-content .info-text { + padding: 5px 0 7px 22px; + color: var(--color-text-lighter); } + #app-settings-content input[type='checkbox'].radio + label, #app-settings-content input[type='checkbox'].checkbox + label, #app-settings-content input[type='radio'].radio + label, #app-settings-content input[type='radio'].checkbox + label { + display: inline-block; + width: 100%; + padding: 5px 0; } + +#app-settings-header { + box-sizing: border-box; + background-color: var(--color-main-background); } + +#app-settings-header .settings-button { + display: block; + height: 44px; + width: 100%; + padding: 0; + margin: 0; + background-color: var(--color-main-background); + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-settings-dark-000: url("../../svg/core/actions/settings-dark?color=#000&v=1"); + background-image: var(--icon-settings-dark-000); + background-position: 14px center; + background-repeat: no-repeat; + box-shadow: none; + border: 0; + border-radius: 0; + text-align: left; + padding-left: 44px; + font-weight: normal; + font-size: 100%; + opacity: 0.8; + /* like app-navigation a */ + color: var(--color-main-text); } + #app-settings-header .settings-button.opened { + border-top: solid 1px var(--color-border); + background-color: var(--color-main-background); } + #app-settings-header .settings-button:hover, #app-settings-header .settings-button:focus { + background-color: var(--color-background-hover); } + +/* GENERAL SECTION ------------------------------------------------------------ */ +.section { + display: block; + padding: 30px; + margin-bottom: 24px; + /* slight position correction of checkboxes and radio buttons */ } + .section.hidden { + display: none !important; } + .section input[type='checkbox'], .section input[type='radio'] { + vertical-align: -2px; + margin-right: 4px; } + +.sub-section { + position: relative; + margin-top: 10px; + margin-left: 27px; + margin-bottom: 10px; } + +.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; } + +/* TABS ------------------------------------------------------------ */ +.tabHeaders { + display: flex; + margin-bottom: 16px; } + .tabHeaders .tabHeader { + display: flex; + flex-direction: column; + flex-grow: 1; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + color: var(--color-text-lighter); + margin-bottom: 1px; + padding: 5px; + /* Use same amount as sidebar padding */ } + .tabHeaders .tabHeader.hidden { + display: none; } + .tabHeaders .tabHeader:first-child { + padding-left: 15px; } + .tabHeaders .tabHeader:last-child { + padding-right: 15px; } + .tabHeaders .tabHeader .icon { + display: inline-block; + width: 100%; + height: 16px; + background-size: 16px; + vertical-align: middle; + margin-top: -2px; + margin-right: 3px; + opacity: .7; + cursor: pointer; } + .tabHeaders .tabHeader a { + color: var(--color-text-lighter); + margin-bottom: 1px; + overflow: hidden; + text-overflow: ellipsis; } + .tabHeaders .tabHeader.selected { + font-weight: bold; } + .tabHeaders .tabHeader.selected, .tabHeaders .tabHeader:hover, .tabHeaders .tabHeader:focus { + margin-bottom: 0px; + color: var(--color-main-text); + border-bottom: 1px solid var(--color-text-lighter); } + +.tabsContainer { + clear: left; } + .tabsContainer .tab { + padding: 0 15px 15px; } + +/* POPOVER MENU ------------------------------------------------------------ */ +.ie .bubble, .ie .bubble:after, +.ie .popovermenu, .ie .popovermenu:after, +.ie #app-navigation .app-navigation-entry-menu, +.ie #app-navigation .app-navigation-entry-menu:after, +.edge .bubble, +.edge .bubble:after, +.edge .popovermenu, +.edge .popovermenu:after, +.edge #app-navigation .app-navigation-entry-menu, +.edge #app-navigation .app-navigation-entry-menu:after { + border: 1px solid var(--color-border); } + +.bubble, +.app-navigation-entry-menu, +.popovermenu { + position: absolute; + background-color: var(--color-main-background); + color: var(--color-main-text); + border-radius: var(--border-radius); + z-index: 110; + margin: 5px; + margin-top: -5px; + right: 0; + filter: drop-shadow(0 1px 3px var(--color-box-shadow)); + display: none; + will-change: filter; + /* Center the popover */ + /* Align the popover to the left */ } + .bubble:after, + .app-navigation-entry-menu:after, + .popovermenu:after { + bottom: 100%; + right: 7px; + /* change this to adjust the arrow position */ + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: var(--color-main-background); + border-width: 9px; } + .bubble.menu-center, + .app-navigation-entry-menu.menu-center, + .popovermenu.menu-center { + transform: translateX(50%); + right: 50%; + margin-right: 0; } + .bubble.menu-center:after, + .app-navigation-entry-menu.menu-center:after, + .popovermenu.menu-center:after { + right: 50%; + transform: translateX(50%); } + .bubble.menu-left, + .app-navigation-entry-menu.menu-left, + .popovermenu.menu-left { + right: auto; + left: 0; + margin-right: 0; } + .bubble.menu-left:after, + .app-navigation-entry-menu.menu-left:after, + .popovermenu.menu-left:after { + left: 6px; + right: auto; } + .bubble.open, + .app-navigation-entry-menu.open, + .popovermenu.open { + display: block; } + .bubble.contactsmenu-popover, + .app-navigation-entry-menu.contactsmenu-popover, + .popovermenu.contactsmenu-popover { + margin: 0; } + .bubble ul, + .app-navigation-entry-menu ul, + .popovermenu ul { + /* Overwrite #app-navigation > ul ul */ + display: flex !important; + flex-direction: column; } + .bubble li, + .app-navigation-entry-menu li, + .popovermenu li { + display: flex; + flex: 0 0 auto; + /* css hack, only first not hidden */ } + .bubble li.hidden, + .app-navigation-entry-menu li.hidden, + .popovermenu li.hidden { + display: none; } + .bubble li > button, + .bubble li > a, + .bubble li > .menuitem, + .app-navigation-entry-menu li > button, + .app-navigation-entry-menu li > a, + .app-navigation-entry-menu li > .menuitem, + .popovermenu li > button, + .popovermenu li > a, + .popovermenu li > .menuitem { + cursor: pointer; + line-height: 44px; + border: 0; + border-radius: 0; + background-color: transparent; + display: flex; + align-items: flex-start; + height: auto; + margin: 0; + font-weight: normal; + box-shadow: none; + width: 100%; + color: var(--color-main-text); + white-space: nowrap; + /* prevent .action class to break the design */ + /* Add padding if contains icon+text */ + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ + /* checkbox/radio fixes */ + /* no margin if hidden span before */ + /* Inputs inside popover supports text, submit & reset */ } + .bubble li > button span[class^='icon-'], + .bubble li > button span[class*=' icon-'], .bubble li > button[class^='icon-'], .bubble li > button[class*=' icon-'], + .bubble li > a span[class^='icon-'], + .bubble li > a span[class*=' icon-'], + .bubble li > a[class^='icon-'], + .bubble li > a[class*=' icon-'], + .bubble li > .menuitem span[class^='icon-'], + .bubble li > .menuitem span[class*=' icon-'], + .bubble li > .menuitem[class^='icon-'], + .bubble li > .menuitem[class*=' icon-'], + .app-navigation-entry-menu li > button span[class^='icon-'], + .app-navigation-entry-menu li > button span[class*=' icon-'], + .app-navigation-entry-menu li > button[class^='icon-'], + .app-navigation-entry-menu li > button[class*=' icon-'], + .app-navigation-entry-menu li > a span[class^='icon-'], + .app-navigation-entry-menu li > a span[class*=' icon-'], + .app-navigation-entry-menu li > a[class^='icon-'], + .app-navigation-entry-menu li > a[class*=' icon-'], + .app-navigation-entry-menu li > .menuitem span[class^='icon-'], + .app-navigation-entry-menu li > .menuitem span[class*=' icon-'], + .app-navigation-entry-menu li > .menuitem[class^='icon-'], + .app-navigation-entry-menu li > .menuitem[class*=' icon-'], + .popovermenu li > button span[class^='icon-'], + .popovermenu li > button span[class*=' icon-'], + .popovermenu li > button[class^='icon-'], + .popovermenu li > button[class*=' icon-'], + .popovermenu li > a span[class^='icon-'], + .popovermenu li > a span[class*=' icon-'], + .popovermenu li > a[class^='icon-'], + .popovermenu li > a[class*=' icon-'], + .popovermenu li > .menuitem span[class^='icon-'], + .popovermenu li > .menuitem span[class*=' icon-'], + .popovermenu li > .menuitem[class^='icon-'], + .popovermenu li > .menuitem[class*=' icon-'] { + min-width: 0; + /* Overwrite icons*/ + min-height: 0; + background-position: 14px center; + background-size: 16px; } + .bubble li > button span[class^='icon-'], + .bubble li > button span[class*=' icon-'], + .bubble li > a span[class^='icon-'], + .bubble li > a span[class*=' icon-'], + .bubble li > .menuitem span[class^='icon-'], + .bubble li > .menuitem span[class*=' icon-'], + .app-navigation-entry-menu li > button span[class^='icon-'], + .app-navigation-entry-menu li > button span[class*=' icon-'], + .app-navigation-entry-menu li > a span[class^='icon-'], + .app-navigation-entry-menu li > a span[class*=' icon-'], + .app-navigation-entry-menu li > .menuitem span[class^='icon-'], + .app-navigation-entry-menu li > .menuitem span[class*=' icon-'], + .popovermenu li > button span[class^='icon-'], + .popovermenu li > button span[class*=' icon-'], + .popovermenu li > a span[class^='icon-'], + .popovermenu li > a span[class*=' icon-'], + .popovermenu li > .menuitem span[class^='icon-'], + .popovermenu li > .menuitem span[class*=' icon-'] { + /* Keep padding to define the width to + assure correct position of a possible text */ + padding: 22px 0 22px 44px; } + .bubble li > button:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > button:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > button:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > a:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > a:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > a:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > .menuitem:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > .menuitem:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .bubble li > .menuitem:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > button:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > button:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > button:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > a:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > a:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > a:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .app-navigation-entry-menu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > button:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > button:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > button:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > a:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > a:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > a:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > span:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > input:not([class^='icon-']):not([class*='icon-']):first-child, + .popovermenu li > .menuitem:not([class^='icon-']):not([class*='icon-']) > form:not([class^='icon-']):not([class*='icon-']):first-child { + margin-left: 44px; } + .bubble li > button[class^='icon-'], .bubble li > button[class*=' icon-'], + .bubble li > a[class^='icon-'], + .bubble li > a[class*=' icon-'], + .bubble li > .menuitem[class^='icon-'], + .bubble li > .menuitem[class*=' icon-'], + .app-navigation-entry-menu li > button[class^='icon-'], + .app-navigation-entry-menu li > button[class*=' icon-'], + .app-navigation-entry-menu li > a[class^='icon-'], + .app-navigation-entry-menu li > a[class*=' icon-'], + .app-navigation-entry-menu li > .menuitem[class^='icon-'], + .app-navigation-entry-menu li > .menuitem[class*=' icon-'], + .popovermenu li > button[class^='icon-'], + .popovermenu li > button[class*=' icon-'], + .popovermenu li > a[class^='icon-'], + .popovermenu li > a[class*=' icon-'], + .popovermenu li > .menuitem[class^='icon-'], + .popovermenu li > .menuitem[class*=' icon-'] { + padding: 0 14px 0 44px !important; } + .bubble li > button:hover, .bubble li > button:focus, + .bubble li > a:hover, + .bubble li > a:focus, + .bubble li > .menuitem:hover, + .bubble li > .menuitem:focus, + .app-navigation-entry-menu li > button:hover, + .app-navigation-entry-menu li > button:focus, + .app-navigation-entry-menu li > a:hover, + .app-navigation-entry-menu li > a:focus, + .app-navigation-entry-menu li > .menuitem:hover, + .app-navigation-entry-menu li > .menuitem:focus, + .popovermenu li > button:hover, + .popovermenu li > button:focus, + .popovermenu li > a:hover, + .popovermenu li > a:focus, + .popovermenu li > .menuitem:hover, + .popovermenu li > .menuitem:focus { + background-color: var(--color-background-hover); } + .bubble li > button.active, + .bubble li > a.active, + .bubble li > .menuitem.active, + .app-navigation-entry-menu li > button.active, + .app-navigation-entry-menu li > a.active, + .app-navigation-entry-menu li > .menuitem.active, + .popovermenu li > button.active, + .popovermenu li > a.active, + .popovermenu li > .menuitem.active { + background-color: var(--color-primary-light); } + .bubble li > button.action, + .bubble li > a.action, + .bubble li > .menuitem.action, + .app-navigation-entry-menu li > button.action, + .app-navigation-entry-menu li > a.action, + .app-navigation-entry-menu li > .menuitem.action, + .popovermenu li > button.action, + .popovermenu li > a.action, + .popovermenu li > .menuitem.action { + padding: inherit !important; } + .bubble li > button > span, + .bubble li > a > span, + .bubble li > .menuitem > span, + .app-navigation-entry-menu li > button > span, + .app-navigation-entry-menu li > a > span, + .app-navigation-entry-menu li > .menuitem > span, + .popovermenu li > button > span, + .popovermenu li > a > span, + .popovermenu li > .menuitem > span { + cursor: pointer; + white-space: nowrap; } + .bubble li > button > p, + .bubble li > a > p, + .bubble li > .menuitem > p, + .app-navigation-entry-menu li > button > p, + .app-navigation-entry-menu li > a > p, + .app-navigation-entry-menu li > .menuitem > p, + .popovermenu li > button > p, + .popovermenu li > a > p, + .popovermenu li > .menuitem > p { + width: 150px; + line-height: 1.6em; + padding: 8px 0; + white-space: normal; } + .bubble li > button > select, + .bubble li > a > select, + .bubble li > .menuitem > select, + .app-navigation-entry-menu li > button > select, + .app-navigation-entry-menu li > a > select, + .app-navigation-entry-menu li > .menuitem > select, + .popovermenu li > button > select, + .popovermenu li > a > select, + .popovermenu li > .menuitem > select { + margin: 0; + margin-left: 6px; } + .bubble li > button:not(:empty), + .bubble li > a:not(:empty), + .bubble li > .menuitem:not(:empty), + .app-navigation-entry-menu li > button:not(:empty), + .app-navigation-entry-menu li > a:not(:empty), + .app-navigation-entry-menu li > .menuitem:not(:empty), + .popovermenu li > button:not(:empty), + .popovermenu li > a:not(:empty), + .popovermenu li > .menuitem:not(:empty) { + padding-right: 14px !important; } + .bubble li > button > img, + .bubble li > a > img, + .bubble li > .menuitem > img, + .app-navigation-entry-menu li > button > img, + .app-navigation-entry-menu li > a > img, + .app-navigation-entry-menu li > .menuitem > img, + .popovermenu li > button > img, + .popovermenu li > a > img, + .popovermenu li > .menuitem > img { + width: 16px; + padding: 14px; } + .bubble li > button > input.radio + label, + .bubble li > button > input.checkbox + label, + .bubble li > a > input.radio + label, + .bubble li > a > input.checkbox + label, + .bubble li > .menuitem > input.radio + label, + .bubble li > .menuitem > input.checkbox + label, + .app-navigation-entry-menu li > button > input.radio + label, + .app-navigation-entry-menu li > button > input.checkbox + label, + .app-navigation-entry-menu li > a > input.radio + label, + .app-navigation-entry-menu li > a > input.checkbox + label, + .app-navigation-entry-menu li > .menuitem > input.radio + label, + .app-navigation-entry-menu li > .menuitem > input.checkbox + label, + .popovermenu li > button > input.radio + label, + .popovermenu li > button > input.checkbox + label, + .popovermenu li > a > input.radio + label, + .popovermenu li > a > input.checkbox + label, + .popovermenu li > .menuitem > input.radio + label, + .popovermenu li > .menuitem > input.checkbox + label { + padding: 0 !important; + width: 100%; } + .bubble li > button > input.checkbox + label::before, + .bubble li > a > input.checkbox + label::before, + .bubble li > .menuitem > input.checkbox + label::before, + .app-navigation-entry-menu li > button > input.checkbox + label::before, + .app-navigation-entry-menu li > a > input.checkbox + label::before, + .app-navigation-entry-menu li > .menuitem > input.checkbox + label::before, + .popovermenu li > button > input.checkbox + label::before, + .popovermenu li > a > input.checkbox + label::before, + .popovermenu li > .menuitem > input.checkbox + label::before { + margin: -2px 13px 0; } + .bubble li > button > input.radio + label::before, + .bubble li > a > input.radio + label::before, + .bubble li > .menuitem > input.radio + label::before, + .app-navigation-entry-menu li > button > input.radio + label::before, + .app-navigation-entry-menu li > a > input.radio + label::before, + .app-navigation-entry-menu li > .menuitem > input.radio + label::before, + .popovermenu li > button > input.radio + label::before, + .popovermenu li > a > input.radio + label::before, + .popovermenu li > .menuitem > input.radio + label::before { + margin: -2px 12px 0; } + .bubble li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .bubble li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .bubble li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .app-navigation-entry-menu li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .app-navigation-entry-menu li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .app-navigation-entry-menu li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .popovermenu li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .popovermenu li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), + .popovermenu li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]) { + width: 150px; } + .bubble li > button form, + .bubble li > a form, + .bubble li > .menuitem form, + .app-navigation-entry-menu li > button form, + .app-navigation-entry-menu li > a form, + .app-navigation-entry-menu li > .menuitem form, + .popovermenu li > button form, + .popovermenu li > a form, + .popovermenu li > .menuitem form { + display: flex; + flex: 1 1 auto; + /* put a small space between text and form + if there is an element before */ } + .bubble li > button form:not(:first-child), + .bubble li > a form:not(:first-child), + .bubble li > .menuitem form:not(:first-child), + .app-navigation-entry-menu li > button form:not(:first-child), + .app-navigation-entry-menu li > a form:not(:first-child), + .app-navigation-entry-menu li > .menuitem form:not(:first-child), + .popovermenu li > button form:not(:first-child), + .popovermenu li > a form:not(:first-child), + .popovermenu li > .menuitem form:not(:first-child) { + margin-left: 5px; } + .bubble li > button > span.hidden + form, + .bubble li > button > span[style*='display:none'] + form, + .bubble li > a > span.hidden + form, + .bubble li > a > span[style*='display:none'] + form, + .bubble li > .menuitem > span.hidden + form, + .bubble li > .menuitem > span[style*='display:none'] + form, + .app-navigation-entry-menu li > button > span.hidden + form, + .app-navigation-entry-menu li > button > span[style*='display:none'] + form, + .app-navigation-entry-menu li > a > span.hidden + form, + .app-navigation-entry-menu li > a > span[style*='display:none'] + form, + .app-navigation-entry-menu li > .menuitem > span.hidden + form, + .app-navigation-entry-menu li > .menuitem > span[style*='display:none'] + form, + .popovermenu li > button > span.hidden + form, + .popovermenu li > button > span[style*='display:none'] + form, + .popovermenu li > a > span.hidden + form, + .popovermenu li > a > span[style*='display:none'] + form, + .popovermenu li > .menuitem > span.hidden + form, + .popovermenu li > .menuitem > span[style*='display:none'] + form { + margin-left: 0; } + .bubble li > button input, + .bubble li > a input, + .bubble li > .menuitem input, + .app-navigation-entry-menu li > button input, + .app-navigation-entry-menu li > a input, + .app-navigation-entry-menu li > .menuitem input, + .popovermenu li > button input, + .popovermenu li > a input, + .popovermenu li > .menuitem input { + min-width: 44px; + max-height: 40px; + /* twice the element margin-y */ + margin: 2px 0; + flex: 1 1 auto; } + .bubble li > button input:not(:first-child), + .bubble li > a input:not(:first-child), + .bubble li > .menuitem input:not(:first-child), + .app-navigation-entry-menu li > button input:not(:first-child), + .app-navigation-entry-menu li > a input:not(:first-child), + .app-navigation-entry-menu li > .menuitem input:not(:first-child), + .popovermenu li > button input:not(:first-child), + .popovermenu li > a input:not(:first-child), + .popovermenu li > .menuitem input:not(:first-child) { + margin-left: 5px; } + .bubble li:not(.hidden):not([style*='display:none']):first-of-type > button > form, .bubble li:not(.hidden):not([style*='display:none']):first-of-type > button > input, .bubble li:not(.hidden):not([style*='display:none']):first-of-type > a > form, .bubble li:not(.hidden):not([style*='display:none']):first-of-type > a > input, .bubble li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > form, .bubble li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > button > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > button > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > a > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > a > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > input, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > button > form, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > button > input, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > a > form, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > a > input, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > form, + .popovermenu li:not(.hidden):not([style*='display:none']):first-of-type > .menuitem > input { + margin-top: 12px; } + .bubble li:not(.hidden):not([style*='display:none']):last-of-type > button > form, .bubble li:not(.hidden):not([style*='display:none']):last-of-type > button > input, .bubble li:not(.hidden):not([style*='display:none']):last-of-type > a > form, .bubble li:not(.hidden):not([style*='display:none']):last-of-type > a > input, .bubble li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > form, .bubble li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > button > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > button > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > a > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > a > input, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > form, + .app-navigation-entry-menu li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > input, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > button > form, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > button > input, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > a > form, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > a > input, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > form, + .popovermenu li:not(.hidden):not([style*='display:none']):last-of-type > .menuitem > input { + margin-bottom: 12px; } + .bubble li > button, + .app-navigation-entry-menu li > button, + .popovermenu li > button { + padding: 0; } + .bubble li > button span, + .app-navigation-entry-menu li > button span, + .popovermenu li > button span { + opacity: 1; } + +/* "app-*" descendants use border-box sizing, so the height of the icon must be + * set to the height of the item (as well as its width to make it squared). */ +#content[class*='app-'] .bubble li > button, +#content[class*='app-'] .bubble li > a, +#content[class*='app-'] .bubble li > .menuitem, +#content[class*='app-'] .app-navigation-entry-menu li > button, +#content[class*='app-'] .app-navigation-entry-menu li > a, +#content[class*='app-'] .app-navigation-entry-menu li > .menuitem, +#content[class*='app-'] .popovermenu li > button, +#content[class*='app-'] .popovermenu li > a, +#content[class*='app-'] .popovermenu li > .menuitem { + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ } + #content[class*='app-'] .bubble li > button > img, + #content[class*='app-'] .bubble li > a > img, + #content[class*='app-'] .bubble li > .menuitem > img, + #content[class*='app-'] .app-navigation-entry-menu li > button > img, + #content[class*='app-'] .app-navigation-entry-menu li > a > img, + #content[class*='app-'] .app-navigation-entry-menu li > .menuitem > img, + #content[class*='app-'] .popovermenu li > button > img, + #content[class*='app-'] .popovermenu li > a > img, + #content[class*='app-'] .popovermenu li > .menuitem > img { + width: 44px; + height: 44px; } + +/* CONTENT LIST ------------------------------------------------------------ */ +.app-content-list { + position: 'sticky'; + top: var(--header-height); + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + transition: transform 250ms ease-in-out; + min-height: calc(100vh - var(--header-height)); + max-height: calc(100vh - var(--header-height)); + overflow-y: auto; + overflow-x: hidden; + flex: 1 1 200px; + min-width: 200px; + max-width: 300px; + /* Default item */ } + .app-content-list .app-content-list-item { + position: relative; + height: 68px; + cursor: pointer; + padding: 10px 7px; + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 0 0 auto; + /* Icon fixes */ } + .app-content-list .app-content-list-item > [class^='icon-'], + .app-content-list .app-content-list-item > [class*=' icon-'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'] { + order: 4; + width: 24px; + height: 24px; + margin: -7px; + padding: 22px; + opacity: .3; + cursor: pointer; } + .app-content-list .app-content-list-item > [class^='icon-']:hover, .app-content-list .app-content-list-item > [class^='icon-']:focus, + .app-content-list .app-content-list-item > [class*=' icon-']:hover, + .app-content-list .app-content-list-item > [class*=' icon-']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-']:focus { + opacity: .7; } + .app-content-list .app-content-list-item > [class^='icon-'][class^='icon-star'], .app-content-list .app-content-list-item > [class^='icon-'][class*=' icon-star'], + .app-content-list .app-content-list-item > [class*=' icon-'][class^='icon-star'], + .app-content-list .app-content-list-item > [class*=' icon-'][class*=' icon-star'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class^='icon-star'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class*=' icon-star'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class^='icon-star'], + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class*=' icon-star'] { + opacity: .7; } + .app-content-list .app-content-list-item > [class^='icon-'][class^='icon-star']:hover, .app-content-list .app-content-list-item > [class^='icon-'][class^='icon-star']:focus, .app-content-list .app-content-list-item > [class^='icon-'][class*=' icon-star']:hover, .app-content-list .app-content-list-item > [class^='icon-'][class*=' icon-star']:focus, + .app-content-list .app-content-list-item > [class*=' icon-'][class^='icon-star']:hover, + .app-content-list .app-content-list-item > [class*=' icon-'][class^='icon-star']:focus, + .app-content-list .app-content-list-item > [class*=' icon-'][class*=' icon-star']:hover, + .app-content-list .app-content-list-item > [class*=' icon-'][class*=' icon-star']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class^='icon-star']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class^='icon-star']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class*=' icon-star']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'][class*=' icon-star']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class^='icon-star']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class^='icon-star']:focus, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class*=' icon-star']:hover, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'][class*=' icon-star']:focus { + opacity: 1; } + .app-content-list .app-content-list-item > [class^='icon-'].icon-starred, + .app-content-list .app-content-list-item > [class*=' icon-'].icon-starred, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class^='icon-'].icon-starred, + .app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=' icon-'].icon-starred { + opacity: 1; } + .app-content-list .app-content-list-item:hover, .app-content-list .app-content-list-item:focus, .app-content-list .app-content-list-item.active { + background-color: var(--color-background-dark); } + .app-content-list .app-content-list-item:hover .app-content-list-item-checkbox.checkbox + label, .app-content-list .app-content-list-item:focus .app-content-list-item-checkbox.checkbox + label, .app-content-list .app-content-list-item.active .app-content-list-item-checkbox.checkbox + label { + display: flex; } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label, + .app-content-list .app-content-list-item .app-content-list-item-star { + position: absolute; + height: 40px; + width: 40px; + z-index: 50; } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active + label { + display: flex; } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active + label + .app-content-list-item-icon { + opacity: .7; } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label { + top: 14px; + left: 7px; + display: none; + /* Hide the star, priority to the checkbox */ } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label::before { + margin: 0; } + .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label ~ .app-content-list-item-star { + display: none; } + .app-content-list .app-content-list-item .app-content-list-item-star { + display: flex; + top: 10px; + left: 32px; + background-size: 16px; + height: 20px; + width: 20px; + margin: 0; + padding: 0; } + .app-content-list .app-content-list-item .app-content-list-item-icon { + position: absolute; + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: #fff; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; + user-select: none; + cursor: pointer; + top: 50%; + margin-top: -20px; } + .app-content-list .app-content-list-item .app-content-list-item-line-one, + .app-content-list .app-content-list-item .app-content-list-item-line-two { + display: block; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + order: 1; + flex: 1 1 0px; + padding-right: 10px; + cursor: pointer; } + .app-content-list .app-content-list-item .app-content-list-item-line-two { + opacity: .5; + order: 3; + flex: 1 0; + flex-basis: calc(100% - 44px); } + .app-content-list .app-content-list-item .app-content-list-item-details { + order: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + opacity: .5; + font-size: 80%; + user-select: none; } + .app-content-list .app-content-list-item .app-content-list-item-menu { + order: 4; + position: relative; } + .app-content-list .app-content-list-item .app-content-list-item-menu .popovermenu { + margin: 0; + right: -2px; } + .app-content-list.selection .app-content-list-item-checkbox.checkbox + label { + display: flex; } + +/* Copyright (c) 2015, Raghu Nayyar, http://raghunayyar.com + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ +/* Global Components */ +.pull-left { + float: left; } + +.pull-right { + float: right; } + +.clear-left { + clear: left; } + +.clear-right { + clear: right; } + +.clear-both { + clear: both; } + +.hidden { + display: none; } + +.hidden-visually { + position: absolute; + left: -10000px; + top: -10000px; + width: 1px; + height: 1px; + overflow: hidden; } + +.bold { + font-weight: 600; } + +.center { + text-align: center; } + +.inlineblock { + display: inline-block; } + +/* ---- BROWSER-SPECIFIC FIXES ---- */ +/* remove dotted outlines in Firefox */ +::-moz-focus-inner { + border: 0; } + +@media only screen and (max-width: 1024px) { + /* position share dropdown */ + #dropdown { + margin-right: 10% !important; + width: 80% !important; } + /* fix name autocomplete not showing on mobile */ + .ui-autocomplete { + z-index: 1000 !important; } + /* fix error display on smaller screens */ + .error-wide { + width: 100%; + margin-left: 0 !important; + box-sizing: border-box; } + /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ + #app-navigation { + transform: translateX(-300px); } + .snapjs-left #app-navigation { + transform: translateX(0); } + #app-navigation:not(.hidden) + #app-content { + margin-left: 0; } + .skip-navigation.skip-content { + left: 3px; + margin-left: 0; } + /* full width for message list on mobile */ + .app-content-list { + background: var(--color-main-background); + flex: 1 1 100%; + max-height: unset; + max-width: 100%; } + .app-content-list + .app-content-details { + display: none; } + .app-content-list.showdetails { + display: none; } + .app-content-list.showdetails + .app-content-details { + display: initial; } + /* Show app details page */ + #app-content.showdetails #app-navigation-toggle { + transform: translateX(-44px); } + #app-content.showdetails #app-navigation-toggle-back { + position: fixed; + display: inline-block !important; + top: var(--header-height); + left: 0; + width: 44px; + height: 44px; + z-index: 1050; + background-color: rgba(255, 255, 255, 0.7); + cursor: pointer; + opacity: .6; + transform: rotate(90deg); } + #app-content.showdetails .app-content-list { + transform: translateX(-100%); } + #app-navigation-toggle { + position: fixed; + display: inline-block !important; + left: 0; + width: 44px; + height: 44px; + z-index: 1050; + cursor: pointer; + opacity: 0.6; } + #app-navigation-toggle:hover, + #app-navigation-toggle:focus { + opacity: 1; } + /* position controls for apps with app-navigation */ + #app-navigation + #app-content #controls { + padding-left: 44px; } + /* .viewer-mode is when text editor, PDF viewer, etc is open */ + #body-user .app-files.viewer-mode #controls { + padding-left: 0 !important; } + .app-files.viewer-mode #app-navigation-toggle { + display: none !important; } + table.multiselect thead { + left: 0 !important; } + /* prevent overflow in user management controls bar */ + #usersearchform { + display: none; } + #body-settings #controls { + min-width: 1024px !important; } + /* do not show dates in filepicker */ + #oc-dialog-filepicker-content .filelist #headerSize, + #oc-dialog-filepicker-content .filelist #headerDate, + #oc-dialog-filepicker-content .filelist .filesize, + #oc-dialog-filepicker-content .filelist .date { + display: none; } + #oc-dialog-filepicker-content .filelist .filename { + max-width: 100%; } + .snapjs-left table.multiselect thead { + top: 44px; } + /* end of media query */ } + +@media only screen and (max-width: 480px) { + #header .header-right > div > .menu { + max-width: calc(100vw - 10px); + position: fixed; } + #header .header-right > div > .menu::after { + display: none !important; } + /* Arrow directly child of menutoggle */ + #header .header-right > div { + /* settings need a different offset, since they have a right padding */ } + #header .header-right > div.openedMenu::after { + display: block; } + #header .header-right > div::after { + border: 10px solid transparent; + border-bottom-color: var(--color-main-background); + bottom: 0; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + right: 15px; + z-index: 2001; + display: none; } + #header .header-right > div#settings::after { + right: 27px; } + #notification-container { + max-width: 100%; + width: 100%; } } + +/** + * @copyright Copyright (c) 2016, John Molakvoæ + * @copyright Copyright (c) 2016, Robin Appelman + * @copyright Copyright (c) 2016, Jan-Christoph Borchardt + * @copyright Copyright (c) 2016, Erik Pellikka + * @copyright Copyright (c) 2015, Vincent Petry + * + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +.tooltip { + position: absolute; + display: block; + font-family: var(--font-face); + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.6; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + z-index: 100000; + /* default to top */ + margin-top: -3px; + padding: 10px 0; + filter: drop-shadow(0 1px 10px var(--color-box-shadow)); + /* TOP */ + /* BOTTOM */ } + .tooltip.in, .tooltip.show, .tooltip.tooltip[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; } + .tooltip.top .tooltip-arrow, .tooltip[x-placement^='top'] { + left: 50%; + margin-left: -10px; } + .tooltip.bottom, .tooltip[x-placement^='bottom'] { + margin-top: 3px; + padding: 10px 0; } + .tooltip.right, .tooltip[x-placement^='right'] { + margin-left: 3px; + padding: 0 10px; } + .tooltip.right .tooltip-arrow, .tooltip[x-placement^='right'] .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -10px; + border-width: 10px 10px 10px 0; + border-right-color: var(--color-main-background); } + .tooltip.left, .tooltip[x-placement^='left'] { + margin-left: -3px; + padding: 0 5px; } + .tooltip.left .tooltip-arrow, .tooltip[x-placement^='left'] .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -10px; + border-width: 10px 0 10px 10px; + border-left-color: var(--color-main-background); } + .tooltip.top .tooltip-arrow, .tooltip.top .arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-left .arrow, .tooltip[x-placement^='top'] .tooltip-arrow, .tooltip[x-placement^='top'] .arrow, .tooltip.top-right .tooltip-arrow, .tooltip.top-right .arrow { + bottom: 0; + border-width: 10px 10px 0; + border-top-color: var(--color-main-background); } + .tooltip.top-left .tooltip-arrow { + right: 10px; + margin-bottom: -10px; } + .tooltip.top-right .tooltip-arrow { + left: 10px; + margin-bottom: -10px; } + .tooltip.bottom .tooltip-arrow, .tooltip.bottom .arrow, .tooltip[x-placement^='bottom'] .tooltip-arrow, .tooltip[x-placement^='bottom'] .arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-left .arrow, .tooltip.bottom-right .tooltip-arrow, .tooltip.bottom-right .arrow { + top: 0; + border-width: 0 10px 10px; + border-bottom-color: var(--color-main-background); } + .tooltip[x-placement^='bottom'] .tooltip-arrow, + .tooltip.bottom .tooltip-arrow { + left: 50%; + margin-left: -10px; } + .tooltip.bottom-left .tooltip-arrow { + right: 10px; + margin-top: -10px; } + .tooltip.bottom-right .tooltip-arrow { + left: 10px; + margin-top: -10px; } + +.tooltip-inner { + max-width: 350px; + padding: 5px 8px; + background-color: var(--color-main-background); + color: var(--color-main-text); + text-align: center; + border-radius: var(--border-radius); } + +.tooltip-arrow, .tooltip .arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } + +.toastify.toast { + min-width: 200px; + background: none; + background-color: var(--color-main-background); + color: var(--color-main-text); + box-shadow: 0 0 6px 0 var(--color-box-shadow); + padding: 12px; + padding-right: 34px; + margin-top: 45px; + position: fixed; + z-index: 9000; + border-radius: var(--border-radius); } + .toastify.toast .toast-close { + position: absolute; + top: 0; + right: 0; + width: 38px; + opacity: 0.4; + padding: 12px; + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + --icon-close-000: url("../../svg/core/actions/close?color=#000&v=2"); + background-image: var(--icon-close-000); + background-position: center; + background-repeat: no-repeat; + text-indent: 200%; + white-space: nowrap; + overflow: hidden; } + .toastify.toast .toast-close:hover, .toastify.toast .toast-close:focus, .toastify.toast .toast-close:active { + cursor: pointer; + opacity: 1; } + +.toastify.toastify-top { + right: 10px; } + +.toast-error { + border-left: 3px solid var(--color-error); } + +.toast-info { + border-left: 3px solid var(--color-primary); } + +.toast-warning { + border-left: 3px solid var(--color-warning); } + +.toast-success { + border-left: 3px solid var(--color-success); } + +#body-public { + /** don't apply content header padding on the base layout */ + /* force layout to make sure the content element's height matches its contents' height */ + /* public footer */ } + #body-public .header-right #header-primary-action a { + color: var(--color-primary-text); } + #body-public .header-right #header-secondary-action ul li { + min-width: 270px; } + #body-public .header-right #header-secondary-action #header-actions-toggle { + background-color: transparent; + border-color: transparent; } + #body-public .header-right #header-secondary-action #header-actions-toggle:hover, #body-public .header-right #header-secondary-action #header-actions-toggle:focus, #body-public .header-right #header-secondary-action #header-actions-toggle:active { + opacity: 1; } + #body-public .header-right #header-secondary-action #external-share-menu-item form { + display: flex; } + #body-public .header-right #header-secondary-action #external-share-menu-item .hidden { + display: none; } + #body-public .header-right #header-secondary-action #external-share-menu-item #save-button-confirm { + flex-grow: 0; } + #body-public #content { + min-height: calc(100% - 65px); } + #body-public.layout-base #content { + padding-top: 0; } + #body-public .ie #content { + display: inline-block; } + #body-public p.info { + margin: 20px auto; + text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + #body-public p.info, #body-public form fieldset legend, + #body-public #datadirContent label, + #body-public form fieldset .warning-info, + #body-public form input[type='checkbox'] + label { + text-align: center; } + #body-public footer { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 65px; + flex-direction: column; } + #body-public footer p { + text-align: center; + color: var(--color-text-lighter); } + #body-public footer p a { + color: var(--color-text-lighter); + font-weight: bold; + white-space: nowrap; + /* increasing clickability to more than the text height */ + padding: 10px; + margin: -10px; + line-height: 200%; } diff --git a/dist/settings-setting-settingss.css b/dist/settings-setting-settingss.css new file mode 100644 index 0000000000000..d29fae546f6e8 --- /dev/null +++ b/dist/settings-setting-settingss.css @@ -0,0 +1,1252 @@ +@charset "UTF-8"; +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ +input#openid, input#webdav { + width: 20em; } + +/* PERSONAL */ +.clear { + clear: both; } + +/* icons for sidebar */ +#avatarform .avatardiv { + margin: 10px auto; } + +#avatarform .warning { + width: 100%; } + +#avatarform .jcrop-keymgr { + display: none !important; } + +#displayavatar { + text-align: center; } + +#uploadavatarbutton, #selectavatar, #removeavatar { + padding: 21px; } + +#selectavatar, #removeavatar { + vertical-align: top; } + +.jcrop-holder { + z-index: 500; } + +#cropper { + float: left; + z-index: 500; + /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ + position: fixed; + background-color: rgba(0, 0, 0, 0.2); + box-sizing: border-box; + top: 45px; + left: 0; + width: 100%; + height: calc(100% - 45px); } + #cropper .inner-container { + z-index: 2001; + /* above the top bar if needed */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + color: #333; + border-radius: var(--border-radius-large); + box-shadow: 0 0 10px var(--color-box-shadow); + padding: 15px; } + #cropper .inner-container .jcrop-holder, + #cropper .inner-container .jcrop-holder img, + #cropper .inner-container img.jcrop-preview { + border-radius: var(--border-radius); } + #cropper .inner-container .button { + margin-top: 15px; } + #cropper .inner-container .primary { + float: right; } + +#personal-settings-avatar-container { + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 2fr 1fr 2fr; + vertical-align: top; } + +.profile-settings-container { + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 2fr; } + .profile-settings-container #locale h3 { + height: 32px; } + +.personal-show-container { + width: 100%; } + +.personal-settings-setting-box .section { + padding: 10px 30px; } + .personal-settings-setting-box .section h3 { + margin-bottom: 0; } + .personal-settings-setting-box .section input[type='text'], .personal-settings-setting-box .section input[type='email'], .personal-settings-setting-box .section input[type='tel'], .personal-settings-setting-box .section input[type='url'] { + width: 100%; } + +select#timezone, select#languageinput, select#localeinput { + width: 100%; } + +#personal-settings { + display: grid; + padding: 20px; + max-width: 1500px; + grid-template-columns: 1fr 2fr 1fr; } + #personal-settings .section { + padding: 10px 10px; + border: 0; } + #personal-settings .section h2 { + margin-bottom: 12px; } + #personal-settings .personal-info { + margin-right: 10%; + margin-bottom: 12px; + margin-top: 12px; } + #personal-settings .personal-info[class^='icon-'], #personal-settings .personal-info[class*=' icon-'] { + background-position: 0px 2px; + padding-left: 30px; + opacity: 0.7; } + +.development-notice { + text-align: center; } + +.link-button { + display: inline-block; + margin: 16px; + padding: 14px 20px; + background-color: var(--color-primary); + color: #fff; + border-radius: var(--border-radius-pill); + border: 1px solid var(--color-primary); + box-shadow: 0 2px 9px var(--color-box-shadow); } + .link-button:active, .link-button:hover, .link-button:focus { + color: var(--color-primary); + background-color: var(--color-primary-text); + border-color: var(--color-primary) !important; } + .link-button.icon-file { + padding-left: 48px; + background-position: 24px; } + +@media (min-width: 1200px) and (max-width: 1400px) { + #personal-settings { + display: grid; + grid-template-columns: 1fr 2fr; } + #personal-settings #personal-settings-avatar-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr; } + #personal-settings .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; } + #personal-settings .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-column: 2; } } + +@media (max-width: 1200px) { + #personal-settings { + display: grid; + grid-template-columns: 1fr; } + #personal-settings #personal-settings-avatar-container { + grid-template-rows: 1fr; } + #personal-settings .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; } + #personal-settings .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; } } + +@media (max-width: 560px) { + #personal-settings { + display: grid; + grid-template-columns: 1fr; } + #personal-settings #personal-settings-avatar-container { + grid-template-rows: 1fr; } + #personal-settings .personal-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; } + #personal-settings .profile-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; } } + +.personal-settings-container { + display: inline-grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; } + .personal-settings-container:after { + clear: both; } + .personal-settings-container > div h3 { + position: relative; + display: inline-flex; + flex-wrap: nowrap; + justify-content: flex-start; + width: 100%; } + .personal-settings-container > div h3 > label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } + .personal-settings-container > div > form span[class^='icon-checkmark'], .personal-settings-container > div > form span[class^='icon-error'] { + position: relative; + right: 8px; + top: -28px; + pointer-events: none; + float: right; } + .personal-settings-container .verify { + position: relative; + left: 100%; + top: 0; + height: 0; } + .personal-settings-container .verify img { + padding: 12px 7px 6px; } + .personal-settings-container .verify-action { + cursor: pointer; } + .personal-settings-container input:disabled { + background-color: white; + color: black; + border: none; + opacity: 100; } + +#body-settings #quota { + cursor: default; + position: relative; } + #body-settings #quota progress { + height: 6px; } + #body-settings #quota progress::-moz-progress-bar { + border-radius: 3px 0 0 3px; } + #body-settings #quota progress::-webkit-progress-value { + border-radius: 3px 0 0 3px; } + #body-settings #quota div { + font-weight: normal; + white-space: nowrap; } + +/* verify accounts */ +/* only show pointer cursor when popup will be there */ +.verification-dialog { + display: none; + right: -9px; + top: 40px; + width: 275px; } + .verification-dialog p { + padding: 10px; } + .verification-dialog .verificationCode { + font-family: monospace; + display: block; + overflow-wrap: break-word; } + +.federation-menu { + position: relative; + cursor: pointer; + width: 44px; + height: 44px; + padding: 10px; + margin: -12px 0 0 8px; + background: none; + border: none; } + .federation-menu:hover, .federation-menu:focus { + background-color: var(--color-background-hover); + border-radius: var(--border-radius-pill); } + .federation-menu:hover .icon-federation-menu, .federation-menu:focus .icon-federation-menu { + opacity: 0.8; } + .federation-menu .icon-federation-menu { + padding-left: 16px; + background-size: 16px; + background-position: left center; + opacity: .3; + cursor: inherit; } + .federation-menu .icon-federation-menu .icon-triangle-s { + display: inline-block; + vertical-align: middle; + cursor: inherit; } + .federation-menu .federationScopeMenu { + top: 44px; } + .federation-menu .federationScopeMenu.popovermenu .menuitem { + font-size: 12.8px; + line-height: 1.6em; } + .federation-menu .federationScopeMenu.popovermenu .menuitem .menuitem-text-detail { + opacity: .75; } + .federation-menu .federationScopeMenu.popovermenu .menuitem.active { + box-shadow: inset 2px 0 var(--color-primary); } + .federation-menu .federationScopeMenu.popovermenu .menuitem.active .menuitem-text { + font-weight: bold; } + .federation-menu .federationScopeMenu.popovermenu .menuitem.disabled { + opacity: .5; + cursor: default; } + .federation-menu .federationScopeMenu.popovermenu .menuitem.disabled * { + cursor: default; } + +#groups-groups { + padding-top: 5px; } + +.clientsbox img { + height: 60px; } + +#sslCertificate tr.expired { + background-color: rgba(255, 0, 0, 0.5); } + +#sslCertificate td { + padding: 5px; } + +#displaynameerror, +#displaynamechanged { + display: none; } + +input#identity { + width: 20em; } + +#showWizard { + display: inline-block; } + +.msg.success { + color: #fff; + background-color: #47a447; + padding: 3px; } + +.msg.error { + color: #fff; + background-color: #d2322d; + padding: 3px; } + +table.nostyle label { + margin-right: 2em; } + +table.nostyle td { + padding: 0.2em 0; } + +#security-password #passwordform { + display: flex; + flex-wrap: wrap; } + #security-password #passwordform #pass1, #security-password #passwordform .personal-show-container, #security-password #passwordform #passwordbutton { + flex-shrink: 1; + width: 200px; + min-width: 150px; } + #security-password #passwordform #pass2 { + width: 100%; } + #security-password #passwordform .password-state { + display: inline-block; } + #security-password #passwordform .strengthify-wrapper { + position: absolute; + left: 0; + width: 100%; + border-radius: 0 0 2px 2px; + margin-top: -6px; + overflow: hidden; + height: 3px; } + +/* Two-Factor Authentication (2FA) */ +#two-factor-auth h3 { + margin-top: 24px; } + +#two-factor-auth li > div { + margin-left: 20px; } + +#two-factor-auth .two-factor-provider-settings-icon { + width: 16px; + height: 16px; + vertical-align: sub; } + +.social-button { + padding-left: 0 !important; + margin-left: -10px; } + .social-button img { + padding: 10px; } + +/* USERS */ +.isgroup .groupname { + width: 85%; + display: block; + overflow: hidden; + text-overflow: ellipsis; } + +.isgroup.active .groupname { + width: 65%; } + +li.active .delete, +li.active .rename { + display: block; } + +.app-navigation-entry-utils .delete, +.app-navigation-entry-utils .rename { + display: none; } + +#usersearchform { + position: absolute; + top: 2px; + right: 0; } + #usersearchform input { + width: 150px; } + #usersearchform label { + font-weight: bold; } + +/* display table at full width */ +table.grid { + width: 100%; } + table.grid th { + height: 2em; + color: #999; + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; } + table.grid td { + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; } + +td.name, th.name { + padding-left: .8em; + min-width: 5em; + max-width: 12em; + text-overflow: ellipsis; + overflow: hidden; } + +td.password, th.password { + padding-left: .8em; } + td.password > img, th.password > img { + visibility: hidden; } + +td.displayName > img, th.displayName > img { + visibility: hidden; } + +td.password, td.mailAddress, th.password, th.mailAddress { + min-width: 5em; + max-width: 12em; + cursor: pointer; } + td.password span, td.mailAddress span, th.password span, th.mailAddress span { + width: 90%; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; } + +td.mailAddress, th.mailAddress { + cursor: pointer; } + +td.password > span, th.password > span { + margin-right: 1.2em; + color: #C7C7C7; } + +span.usersLastLoginTooltip { + white-space: nowrap; } + +/* APPS */ +#app-content > svg.app-filter { + float: left; + height: 0; + width: 0; } + +#app-category-app-bundles { + margin-bottom: 20px; } + +.appinfo { + margin: 1em 40px; } + +#app-navigation { + /* Navigation icons */ } + #app-navigation img { + margin-bottom: -3px; + margin-right: 6px; + width: 16px; } + #app-navigation li span.no-icon { + padding-left: 32px; } + #app-navigation ul li.active > span.utils .delete, #app-navigation ul li.active > span.utils .rename { + display: block; } + #app-navigation .appwarning { + background: #fcc; } + #app-navigation.appwarning:hover { + background: #fbb; } + #app-navigation .app-external { + color: var(--color-text-maxcontrast); } + +span.version { + margin-left: 1em; + margin-right: 1em; + color: var(--color-text-maxcontrast); } + +.app-version { + color: var(--color-text-maxcontrast); } + +.app-level span { + color: var(--color-text-maxcontrast); + background-color: transparent; + border: 1px solid var(--color-text-maxcontrast); + border-radius: var(--border-radius); + padding: 3px 6px; } + +.app-level a { + padding: 10px; + margin: -6px; + white-space: nowrap; } + +.app-level .official { + background-position: left center; + background-position: 5px center; + padding-left: 25px; } + +.app-level .supported { + border-color: var(--color-success); + background-position: left center; + background-position: 5px center; + padding-left: 25px; + color: var(--color-success); } + +.app-score { + position: relative; + top: 4px; + opacity: .5; } + +.app-settings-content #searchresults { + display: none; } + +#apps-list.store .section { + border: 0; } + +#apps-list.store .app-name { + display: block; + margin: 5px 0; } + +#apps-list.store .app-name, #apps-list.store .app-image * { + cursor: pointer; } + +#apps-list.store .app-summary { + opacity: .7; } + +#apps-list.store .app-image-icon .icon-settings-dark { + width: 100%; + height: 150px; + background-size: 45px; + opacity: 0.5; } + +#apps-list.store .app-score-image { + height: 14px; } + +#apps-list.store .actions { + margin-top: 10px; } + +#app-sidebar #app-details-view h2 .icon-settings-dark, +#app-sidebar #app-details-view h2 svg { + display: inline-block; + width: 16px; + height: 16px; + margin-right: 10px; + opacity: .7; } + +#app-sidebar #app-details-view .app-level { + clear: right; + width: 100%; } + #app-sidebar #app-details-view .app-level .supported, + #app-sidebar #app-details-view .app-level .official { + vertical-align: top; } + #app-sidebar #app-details-view .app-level .app-score-image { + float: right; } + +#app-sidebar #app-details-view .app-author, #app-sidebar #app-details-view .app-licence { + color: var(--color-text-maxcontrast); } + +#app-sidebar #app-details-view .app-dependencies { + margin: 10px 0; } + +#app-sidebar #app-details-view .app-description p { + margin: 10px 0; } + +#app-sidebar #app-details-view .close { + position: absolute; + top: 0; + right: 0; + padding: 14px; + opacity: 0.5; + z-index: 1; + width: 44px; + height: 44px; } + +#app-sidebar #app-details-view .actions { + display: flex; + align-items: center; } + #app-sidebar #app-details-view .actions .app-groups { + padding: 5px; } + +#app-sidebar #app-details-view .appslink { + text-decoration: underline; + margin-right: 5px; } + +#app-sidebar #app-details-view .app-level, +#app-sidebar #app-details-view .actions, +#app-sidebar #app-details-view .documentation, +#app-sidebar #app-details-view .app-dependencies, +#app-sidebar #app-details-view .app-description { + margin: 20px 0; } + +@media only screen and (min-width: 1601px) { + .store .section { + width: 25%; } + .with-app-sidebar .store .section { + width: 33%; } } + +@media only screen and (max-width: 1600px) { + .store .section { + width: 25%; } + .with-app-sidebar .store .section { + width: 33%; } } + +@media only screen and (max-width: 1400px) { + .store .section { + width: 33%; } + .with-app-sidebar .store .section { + width: 50%; } } + +@media only screen and (max-width: 900px) { + .store .section { + width: 50%; } + .with-app-sidebar .store .section { + width: 100%; } } + +@media only screen and (max-width: var(--breakpoint-mobile)) { + .store .section { + width: 50%; } } + +@media only screen and (max-width: 480px) { + .store .section { + width: 100%; } } + +/* hide app version and level on narrower screens */ +@media only screen and (max-width: 900px) { + .apps-list.installed .app-version, .apps-list.installed .app-level { + display: none !important; } } + +@media only screen and (max-width: 500px) { + .apps-list.installed .app-groups { + display: none !important; } } + +#version.section { + border-bottom: none; } + +.section { + margin-bottom: 0; + /* section divider lines, none needed for last one */ + /* correctly display help icons next to headings */ } + .section:not(:last-child) { + border-bottom: 1px solid var(--color-border); } + .section h2 { + margin-bottom: 22px; } + .section h2 .icon-info { + padding: 6px 20px; + vertical-align: text-bottom; + display: inline-block; } + +.followupsection { + display: block; + padding: 0 30px 30px 30px; + color: #555; } + +.app-image { + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; } + +.app-name, .app-version, .app-score, .app-level { + display: inline-block; } + +.app-description-toggle-show, .app-description-toggle-hide { + clear: both; + padding: 7px 0; + cursor: pointer; + opacity: .5; } + +.app-description-container { + clear: both; + position: relative; + top: 7px; } + +.app-description { + clear: both; } + +#app-category-1 { + margin-bottom: 18px; } + +/* capitalize 'Other' category */ +#app-category-925 { + text-transform: capitalize; } + +.app-dependencies { + color: #ce3702; } + +.missing-dependencies { + list-style: initial; + list-style-type: initial; + list-style-position: inside; } + +.apps-list { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + /* Bundle header */ } + .apps-list .section { + cursor: pointer; } + .apps-list .app-list-move { + transition: transform 1s; } + .apps-list #app-list-update-all { + margin-left: 10px; } + .apps-list .toolbar { + height: 60px; + padding: 8px; + padding-left: 60px; + width: 100%; + background-color: var(--color-main-background); + position: fixed; + z-index: 1; + display: flex; + align-items: center; } + .apps-list .counter { + padding-left: calc(var(--header-height) - 10px); + margin: 10px; } + .apps-list.installed { + margin-bottom: 100px; } + .apps-list.installed .apps-list-container { + display: table; + width: 100%; + height: auto; + margin-top: 60px; } + .apps-list.installed .section { + display: table-row; + padding: 0; + margin: 0; } + .apps-list.installed .section > * { + display: table-cell; + height: initial; + vertical-align: middle; + float: none; + border-bottom: 1px solid var(--color-border); + padding: 6px; + box-sizing: border-box; } + .apps-list.installed .section.selected { + background-color: var(--color-background-dark); } + .apps-list.installed .groups-enable { + margin-top: 0; } + .apps-list.installed .groups-enable label { + margin-right: 3px; } + .apps-list.installed .app-image { + width: 44px; + height: auto; + text-align: right; } + .apps-list.installed .app-image-icon svg, + .apps-list.installed .app-image-icon .icon-settings-dark { + margin-top: 5px; + width: 20px; + height: 20px; + opacity: .5; + background-size: cover; + display: inline-block; } + .apps-list.installed .actions { + text-align: right; } + .apps-list.installed .actions .icon-loading-small { + display: inline-block; + top: 4px; + margin-right: 10px; } + .apps-list:not(.installed) .app-image-icon svg { + position: absolute; + bottom: 43px; + /* position halfway vertically */ + width: 64px; + height: 64px; + opacity: .1; } + .apps-list.hidden { + display: none; } + .apps-list .section { + position: relative; + flex: 0 0 auto; } + .apps-list .section h2.app-name { + display: block; + margin: 8px 0; } + .apps-list .section:hover { + background-color: var(--color-background-dark); } + .apps-list .app-description p { + margin: 10px 0; } + .apps-list .app-description ul { + list-style: disc; } + .apps-list .app-description ol { + list-style: decimal; } + .apps-list .app-description ol ol, .apps-list .app-description ol ul { + padding-left: 15px; } + .apps-list .app-description > ul, .apps-list .app-description > ol { + margin-left: 19px; } + .apps-list .app-description ul ol, .apps-list .app-description ul ul { + padding-left: 15px; } + .apps-list .apps-header { + display: table-row; + position: relative; } + .apps-list .apps-header div { + display: table-cell; + height: 70px; } + .apps-list .apps-header h2 { + display: table-cell; + position: absolute; + padding-left: 6px; + padding-top: 15px; } + .apps-list .apps-header h2 .enable { + position: relative; + top: -1px; + margin-left: 12px; } + .apps-list .apps-header h2 + .section { + margin-top: 50px; } + +#apps-list-search .section h2 { + margin-bottom: 0; } + +/* LOG */ +#log { + white-space: normal; + margin-bottom: 14px; } + +#lessLog { + display: none; } + +table.grid td.date { + white-space: nowrap; } + +#log-section p { + margin-top: 20px; } + +#security-warning-state-ok span, +#security-warning-state-warning span, +#security-warning-state-failure span, +#security-warning-state-loading span { + vertical-align: middle; } + #security-warning-state-ok span.message, + #security-warning-state-warning span.message, + #security-warning-state-failure span.message, + #security-warning-state-loading span.message { + padding: 12px; } + #security-warning-state-ok span.icon, + #security-warning-state-warning span.icon, + #security-warning-state-failure span.icon, + #security-warning-state-loading span.icon { + width: 32px; + height: 32px; + background-position: center center; + display: inline-block; + border-radius: 50%; } + #security-warning-state-ok span.icon-checkmark-white, + #security-warning-state-warning span.icon-checkmark-white, + #security-warning-state-failure span.icon-checkmark-white, + #security-warning-state-loading span.icon-checkmark-white { + background-color: var(--color-success); } + #security-warning-state-ok span.icon-error-white, + #security-warning-state-warning span.icon-error-white, + #security-warning-state-failure span.icon-error-white, + #security-warning-state-loading span.icon-error-white { + background-color: var(--color-warning); } + #security-warning-state-ok span.icon-close-white, + #security-warning-state-warning span.icon-close-white, + #security-warning-state-failure span.icon-close-white, + #security-warning-state-loading span.icon-close-white { + background-color: var(--color-error); } + +#shareAPI p { + padding-bottom: 0.8em; } + +#shareAPI input#shareapiExpireAfterNDays { + width: 40px; } + +#shareAPI .indent { + padding-left: 28px; } + +#shareAPI .double-indent { + padding-left: 56px; } + +#shareAPI .nocheckbox { + padding-left: 20px; } + +#shareApiDefaultPermissionsSection label { + margin-right: 20px; } + +#fileSharingSettings h3 { + display: inline-block; } + +#publicShareDisclaimerText { + width: calc(100% - 23px); + /* 20 px left margin, 3 px right margin */ + max-width: 600px; + height: 150px; + margin-left: 20px; + box-sizing: border-box; } + +/* correctly display help icons next to headings */ +.icon-info { + padding: 11px 20px; + vertical-align: text-bottom; + opacity: .5; } + +#two-factor-auth h2, +#shareAPI h2, +#encryptionAPI h2, +#mail_general_settings h2 { + display: inline-block; } + +#encryptionAPI li { + list-style-type: initial; + margin-left: 20px; + padding: 5px 0; } + +.mail_settings p label:first-child { + display: inline-block; + width: 300px; + text-align: right; } + +.mail_settings p select:nth-child(2), +.mail_settings p input:not([type='button']) { + width: 143px; } + +#mail_smtpport { + width: 40px; } + +.cronlog { + margin-left: 10px; } + +.status { + display: inline-block; + height: 16px; + width: 16px; + vertical-align: text-bottom; } + .status.success { + border-radius: 50%; } + +#selectGroups select { + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; } + +#log .log-message { + word-break: break-all; + min-width: 180px; } + +span.success { + background-color: var(--color-success); + border-radius: var(--border-radius); } + +span.error { + background-color: var(--color-error); } + +span.indeterminate { + background-color: var(--color-warning); + border-radius: 40% 0; } + +/* OPERA hack for strengthify*/ +doesnotexist:-o-prefocus, .strengthify-wrapper { + left: 185px; + width: 129px; } + +.trusted-domain-warning { + color: #fff; + padding: 5px; + background: #ce3702; + border-radius: 5px; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; } + +#postsetupchecks ul { + margin-left: 44px; + list-style: disc; } + #postsetupchecks ul li { + margin: 10px 0; } + #postsetupchecks ul ul { + list-style: circle; } + +#postsetupchecks .loading { + height: 50px; + background-position: left center; } + +#postsetupchecks .errors, #postsetupchecks .errors a { + color: var(--color-error); } + +#postsetupchecks .warnings, #postsetupchecks .warnings a { + color: var(--color-warning); } + +#postsetupchecks .hint { + margin: 20px 0; } + +#security-warning a { + text-decoration: underline; } + +#security-warning .extra-top-margin { + margin-top: 12px; } + +#admin-tips li { + list-style: initial; } + #admin-tips li a { + display: inline-block; + padding: 3px 0; } + +#selectEncryptionModules { + margin-left: 30px; + padding: 10px; } + +#encryptionModules { + padding: 10px; } + +#warning { + color: red; } + +.settings-hint { + margin-top: -12px; + margin-bottom: 12px; + opacity: .7; } + +/* USERS LIST -------------------------------------------------------------- */ +#body-settings { + overflow-x: scroll; + min-height: 100%; + height: auto; } + #body-settings #app-content.user-list-grid { + display: grid; + grid-column-gap: 20px; + grid-auto-rows: minmax(60px, max-content); } + #body-settings #app-content.user-list-grid .row { + display: flex; + display: grid; + min-height: 60px; + grid-row-start: span 1; + grid-gap: 3px; + align-items: center; + /* let's define the column until storage path, + what follows will be manually defined */ + grid-template-columns: 44px minmax(190px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(240px, 1fr) minmax(240px, 1fr) repeat(auto-fit, minmax(160px, 1fr)); + border-bottom: var(--color-border) 1px solid; + /* grid col width */ + /* various */ } + #body-settings #app-content.user-list-grid .row.disabled { + opacity: .5; } + #body-settings #app-content.user-list-grid .row .name, + #body-settings #app-content.user-list-grid .row .password, + #body-settings #app-content.user-list-grid .row .mailAddress, + #body-settings #app-content.user-list-grid .row .languages, + #body-settings #app-content.user-list-grid .row .storageLocation, + #body-settings #app-content.user-list-grid .row .userBackend, + #body-settings #app-content.user-list-grid .row .lastLogin { + min-width: 160px; } + #body-settings #app-content.user-list-grid .row .name doesnotexist:-o-prefocus, #body-settings #app-content.user-list-grid .row .name .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .password doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .password .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .mailAddress doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .mailAddress .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .languages doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .languages .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .storageLocation doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .storageLocation .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .userBackend doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .userBackend .strengthify-wrapper, + #body-settings #app-content.user-list-grid .row .lastLogin doesnotexist:-o-prefocus, + #body-settings #app-content.user-list-grid .row .lastLogin .strengthify-wrapper { + color: var(--color-text-dark); + vertical-align: baseline; + text-overflow: ellipsis; } + #body-settings #app-content.user-list-grid .row:not(.row--editable).name, #body-settings #app-content.user-list-grid .row:not(.row--editable).password, #body-settings #app-content.user-list-grid .row:not(.row--editable).displayName, #body-settings #app-content.user-list-grid .row:not(.row--editable).mailAddress, #body-settings #app-content.user-list-grid .row:not(.row--editable).userBackend, #body-settings #app-content.user-list-grid .row:not(.row--editable).languages { + overflow: hidden; } + #body-settings #app-content.user-list-grid .row .groups, + #body-settings #app-content.user-list-grid .row .subadmins, + #body-settings #app-content.user-list-grid .row .quota { + min-width: 160px; } + #body-settings #app-content.user-list-grid .row .groups .multiselect, + #body-settings #app-content.user-list-grid .row .subadmins .multiselect, + #body-settings #app-content.user-list-grid .row .quota .multiselect { + width: 100%; + color: var(--color-text-dark); + vertical-align: baseline; } + #body-settings #app-content.user-list-grid .row .obfuscated { + width: 400px; + opacity: .7; } + #body-settings #app-content.user-list-grid .row .userActions { + display: flex; + justify-content: flex-end; + position: sticky; + right: 0px; + min-width: 88px; + background-color: var(--color-main-background); } + #body-settings #app-content.user-list-grid .row .subtitle { + color: var(--color-text-maxcontrast); + vertical-align: baseline; } + #body-settings #app-content.user-list-grid .row#grid-header { + position: sticky; + align-self: normal; + background-color: var(--color-main-background); + z-index: 100; + /* above multiselect */ + top: var(--header-height); } + #body-settings #app-content.user-list-grid .row#grid-header.sticky { + box-shadow: 0 -2px 10px 1px var(--color-box-shadow); } + #body-settings #app-content.user-list-grid .row#grid-header { + color: var(--color-text-maxcontrast); + border-bottom-width: thin; } + #body-settings #app-content.user-list-grid .row#grid-header #headerDisplayName, + #body-settings #app-content.user-list-grid .row#grid-header #headerPassword, + #body-settings #app-content.user-list-grid .row#grid-header #headerAddress, + #body-settings #app-content.user-list-grid .row#grid-header #headerGroups, + #body-settings #app-content.user-list-grid .row#grid-header #headerSubAdmins, + #body-settings #app-content.user-list-grid .row#grid-header #theHeaderUserBackend, + #body-settings #app-content.user-list-grid .row#grid-header #theHeaderLastLogin, + #body-settings #app-content.user-list-grid .row#grid-header #headerQuota, + #body-settings #app-content.user-list-grid .row#grid-header #theHeaderStorageLocation, + #body-settings #app-content.user-list-grid .row#grid-header #headerLanguages { + /* Line up header text with column content for when there’s inputs */ + padding-left: 7px; + text-transform: none; + color: var(--color-text-maxcontrast); + vertical-align: baseline; } + #body-settings #app-content.user-list-grid .row:hover input:not([type='submit']):not(:focus):not(:active) { + border-color: var(--color-border) !important; } + #body-settings #app-content.user-list-grid .row:hover:not(#grid-header) { + box-shadow: 5px 0 0 var(--color-primary-element) inset; } + #body-settings #app-content.user-list-grid .row > form { + width: 100%; } + #body-settings #app-content.user-list-grid .row > div, + #body-settings #app-content.user-list-grid .row > .displayName > form, + #body-settings #app-content.user-list-grid .row > form { + grid-row: 1; + display: inline-flex; + color: var(--color-text-lighter); + flex-grow: 1; + /* inputs like mail, username, password */ + /* Fill the grid cell */ } + #body-settings #app-content.user-list-grid .row > div > input:not(:focus):not(:active), + #body-settings #app-content.user-list-grid .row > .displayName > form > input:not(:focus):not(:active), + #body-settings #app-content.user-list-grid .row > form > input:not(:focus):not(:active) { + border-color: transparent; + cursor: pointer; } + #body-settings #app-content.user-list-grid .row > div > input:focus + .icon-confirm, #body-settings #app-content.user-list-grid .row > div > input:active + .icon-confirm, + #body-settings #app-content.user-list-grid .row > .displayName > form > input:focus + .icon-confirm, + #body-settings #app-content.user-list-grid .row > .displayName > form > input:active + .icon-confirm, + #body-settings #app-content.user-list-grid .row > form > input:focus + .icon-confirm, + #body-settings #app-content.user-list-grid .row > form > input:active + .icon-confirm { + display: block !important; } + #body-settings #app-content.user-list-grid .row > div:not(.userActions) > input:not([type='submit']), + #body-settings #app-content.user-list-grid .row > .displayName > form:not(.userActions) > input:not([type='submit']), + #body-settings #app-content.user-list-grid .row > form:not(.userActions) > input:not([type='submit']) { + width: 100%; + min-width: 0; } + #body-settings #app-content.user-list-grid .row > div.name, + #body-settings #app-content.user-list-grid .row > .displayName > form.name, + #body-settings #app-content.user-list-grid .row > form.name { + word-break: break-all; } + #body-settings #app-content.user-list-grid .row > div.displayName > input, #body-settings #app-content.user-list-grid .row > div.mailAddress > input, + #body-settings #app-content.user-list-grid .row > .displayName > form.displayName > input, + #body-settings #app-content.user-list-grid .row > .displayName > form.mailAddress > input, + #body-settings #app-content.user-list-grid .row > form.displayName > input, + #body-settings #app-content.user-list-grid .row > form.mailAddress > input { + text-overflow: ellipsis; + flex-grow: 1; } + #body-settings #app-content.user-list-grid .row > div.name, #body-settings #app-content.user-list-grid .row > div.userBackend, + #body-settings #app-content.user-list-grid .row > .displayName > form.name, + #body-settings #app-content.user-list-grid .row > .displayName > form.userBackend, + #body-settings #app-content.user-list-grid .row > form.name, + #body-settings #app-content.user-list-grid .row > form.userBackend { + /* better multi-line visual */ + line-height: 1.3em; + max-height: 100%; + overflow: hidden; + /* not supported by all browsers + so we keep the overflow hidden + as a fallback */ + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } + #body-settings #app-content.user-list-grid .row > div.quota, + #body-settings #app-content.user-list-grid .row > .displayName > form.quota, + #body-settings #app-content.user-list-grid .row > form.quota { + display: flex; + justify-content: left; + white-space: nowrap; + position: relative; } + #body-settings #app-content.user-list-grid .row > div.quota progress, + #body-settings #app-content.user-list-grid .row > .displayName > form.quota progress, + #body-settings #app-content.user-list-grid .row > form.quota progress { + width: 150px; + margin-top: 35px; + height: 3px; } + #body-settings #app-content.user-list-grid .row > div .icon-confirm, + #body-settings #app-content.user-list-grid .row > .displayName > form .icon-confirm, + #body-settings #app-content.user-list-grid .row > form .icon-confirm { + flex: 0 0 auto; + cursor: pointer; } + #body-settings #app-content.user-list-grid .row > div .icon-confirm:not(:active), + #body-settings #app-content.user-list-grid .row > .displayName > form .icon-confirm:not(:active), + #body-settings #app-content.user-list-grid .row > form .icon-confirm:not(:active) { + display: none; } + #body-settings #app-content.user-list-grid .row > div.avatar, + #body-settings #app-content.user-list-grid .row > .displayName > form.avatar, + #body-settings #app-content.user-list-grid .row > form.avatar { + height: 32px; + width: 32px; + margin: 6px; } + #body-settings #app-content.user-list-grid .row > div.avatar img, + #body-settings #app-content.user-list-grid .row > .displayName > form.avatar img, + #body-settings #app-content.user-list-grid .row > form.avatar img { + display: block; } + #body-settings #app-content.user-list-grid .row > div.userActions, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions, + #body-settings #app-content.user-list-grid .row > form.userActions { + display: flex; + justify-content: flex-end; } + #body-settings #app-content.user-list-grid .row > div.userActions #newsubmit, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions #newsubmit, + #body-settings #app-content.user-list-grid .row > form.userActions #newsubmit { + width: 100%; } + #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions, + #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions { + position: relative; + display: flex; + align-items: center; + background-color: var(--color-main-background); } + #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more, + #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more { + width: 44px; + height: 44px; + opacity: .5; + cursor: pointer; } + #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:focus, #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:hover, #body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions .icon-more:active, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:focus, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:hover, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .toggleUserActions .icon-more:active, + #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:focus, + #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:hover, + #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions .icon-more:active { + opacity: .7; + background-color: var(--color-background-dark); } + #body-settings #app-content.user-list-grid .row > div.userActions .feedback, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .feedback, + #body-settings #app-content.user-list-grid .row > form.userActions .feedback { + display: flex; + align-items: center; + white-space: nowrap; + transition: opacity 200ms ease-in-out; } + #body-settings #app-content.user-list-grid .row > div.userActions .feedback .icon-checkmark, + #body-settings #app-content.user-list-grid .row > .displayName > form.userActions .feedback .icon-checkmark, + #body-settings #app-content.user-list-grid .row > form.userActions .feedback .icon-checkmark { + opacity: .5; + margin-right: 5px; } + #body-settings #app-content.user-list-grid .row > div .multiselect.multiselect-vue, + #body-settings #app-content.user-list-grid .row > .displayName > form .multiselect.multiselect-vue, + #body-settings #app-content.user-list-grid .row > form .multiselect.multiselect-vue { + width: 100%; } + #body-settings #app-content.user-list-grid .infinite-loading-container { + display: flex; + align-items: center; + justify-content: center; + grid-row-start: span 4; } + #body-settings #app-content.user-list-grid .users-list-end { + opacity: .5; + user-select: none; } + +.animated { + animation: blink-animation 1s steps(5, start) 4; } + +@keyframes blink-animation { + to { + opacity: 0.6; } } + +@-webkit-keyframes blink-animation { + to { + opacity: 1; } } diff --git a/dist/settings-vue-settings-personal-info.js b/dist/settings-vue-settings-personal-info.js index 149159ff38e13..85bd13cecdf7f 100644 --- a/dist/settings-vue-settings-personal-info.js +++ b/dist/settings-vue-settings-personal-info.js @@ -1,3 +1,3 @@ /*! For license information please see settings-vue-settings-personal-info.js.LICENSE.txt */ -!function(){"use strict";var n,e={40566:function(n,e,a){var r,i,o,s=a(20144),l=a(22200),c=a(16453),d=a(9944),u=(a(73317),(0,a(17499).IY)().setApp("settings").detectUser().build()),p=a(26932),A=a(74854),m=a(20296),f=a.n(m);function h(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}var v=Object.freeze({ADDRESS:"address",AVATAR:"avatar",BIOGRAPHY:"biography",DISPLAYNAME:"displayname",EMAIL_COLLECTION:"additional_mail",EMAIL:"email",HEADLINE:"headline",NOTIFICATION_EMAIL:"notify_email",ORGANISATION:"organisation",PHONE:"phone",PROFILE_ENABLED:"profile_enabled",ROLE:"role",TWITTER:"twitter",WEBSITE:"website"}),g=Object.freeze({ADDRESS:(0,d.translate)("settings","Address"),AVATAR:(0,d.translate)("settings","Avatar"),BIOGRAPHY:(0,d.translate)("settings","About"),DISPLAYNAME:(0,d.translate)("settings","Full name"),EMAIL_COLLECTION:(0,d.translate)("settings","Additional email"),EMAIL:(0,d.translate)("settings","Email"),HEADLINE:(0,d.translate)("settings","Headline"),ORGANISATION:(0,d.translate)("settings","Organisation"),PHONE:(0,d.translate)("settings","Phone number"),PROFILE_ENABLED:(0,d.translate)("settings","Profile"),ROLE:(0,d.translate)("settings","Role"),TWITTER:(0,d.translate)("settings","Twitter"),WEBSITE:(0,d.translate)("settings","Website")}),C=Object.freeze({PROFILE_VISIBILITY:(0,d.translate)("settings","Profile visibility")}),y=Object.freeze((h(r={},g.ADDRESS,v.ADDRESS),h(r,g.AVATAR,v.AVATAR),h(r,g.BIOGRAPHY,v.BIOGRAPHY),h(r,g.DISPLAYNAME,v.DISPLAYNAME),h(r,g.EMAIL_COLLECTION,v.EMAIL_COLLECTION),h(r,g.EMAIL,v.EMAIL),h(r,g.HEADLINE,v.HEADLINE),h(r,g.ORGANISATION,v.ORGANISATION),h(r,g.PHONE,v.PHONE),h(r,g.PROFILE_ENABLED,v.PROFILE_ENABLED),h(r,g.ROLE,v.ROLE),h(r,g.TWITTER,v.TWITTER),h(r,g.WEBSITE,v.WEBSITE),r)),b=Object.freeze({LANGUAGE:"language"}),x=Object.freeze({LANGUAGE:(0,d.translate)("settings","Language")}),E=Object.freeze({PRIVATE:"v2-private",LOCAL:"v2-local",FEDERATED:"v2-federated",PUBLISHED:"v2-published"}),w=Object.freeze((h(i={},g.ADDRESS,[E.LOCAL,E.PRIVATE]),h(i,g.AVATAR,[E.LOCAL,E.PRIVATE]),h(i,g.BIOGRAPHY,[E.LOCAL,E.PRIVATE]),h(i,g.DISPLAYNAME,[E.LOCAL]),h(i,g.EMAIL_COLLECTION,[E.LOCAL]),h(i,g.EMAIL,[E.LOCAL]),h(i,g.HEADLINE,[E.LOCAL,E.PRIVATE]),h(i,g.ORGANISATION,[E.LOCAL,E.PRIVATE]),h(i,g.PHONE,[E.LOCAL,E.PRIVATE]),h(i,g.PROFILE_ENABLED,[E.LOCAL,E.PRIVATE]),h(i,g.ROLE,[E.LOCAL,E.PRIVATE]),h(i,g.TWITTER,[E.LOCAL,E.PRIVATE]),h(i,g.WEBSITE,[E.LOCAL,E.PRIVATE]),i)),k=Object.freeze([g.BIOGRAPHY,g.HEADLINE,g.ORGANISATION,g.ROLE]),I="Scope",_=Object.freeze((h(o={},E.PRIVATE,{name:E.PRIVATE,displayName:(0,d.translate)("settings","Private"),tooltip:(0,d.translate)("settings","Only visible to people matched via phone number integration through Talk on mobile"),tooltipDisabled:(0,d.translate)("settings","Not available as this property is required for core functionality including file sharing and calendar invitations"),iconClass:"icon-phone"}),h(o,E.LOCAL,{name:E.LOCAL,displayName:(0,d.translate)("settings","Local"),tooltip:(0,d.translate)("settings","Only visible to people on this instance and guests"),iconClass:"icon-password"}),h(o,E.FEDERATED,{name:E.FEDERATED,displayName:(0,d.translate)("settings","Federated"),tooltip:(0,d.translate)("settings","Only synchronize to trusted servers"),tooltipDisabled:(0,d.translate)("settings","Not available as publishing user specific data to the lookup server is not allowed, contact your system administrator if you have any questions"),iconClass:"icon-contacts-dark"}),h(o,E.PUBLISHED,{name:E.PUBLISHED,displayName:(0,d.translate)("settings","Published"),tooltip:(0,d.translate)("settings","Synchronize to trusted servers and the global and public address book"),tooltipDisabled:(0,d.translate)("settings","Not available as publishing user specific data to the lookup server is not allowed, contact your system administrator if you have any questions"),iconClass:"icon-link"}),o)),P=E.LOCAL,S=Object.freeze({NOT_VERIFIED:0,VERIFICATION_IN_PROGRESS:1,VERIFIED:2}),B=/^(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){255,})(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){65,}@)(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22))(?:\.(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-+[a-z0-9]+)*\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-+[a-z0-9]+)*)|(?:\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\]))$/i,R=a(4820),O=a(79753),D=a(10128),L=a.n(D);function N(n,t,e,a,r,i,o){try{var s=n[i](o),l=s.value}catch(n){return void e(n)}s.done?t(l):Promise.resolve(l).then(a,r)}function T(n){return function(){var t=this,e=arguments;return new Promise((function(a,r){var i=n.apply(t,e);function o(n){N(i,a,r,o,s,"next",n)}function s(n){N(i,a,r,o,s,"throw",n)}o(void 0)}))}}var Z=function(){var n=T(regeneratorRuntime.mark((function n(t,e){var a,r,i;return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return"boolean"==typeof e&&(e=e?"1":"0"),a=(0,l.getCurrentUser)().uid,r=(0,O.generateOcsUrl)("cloud/users/{userId}",{userId:a}),n.next=5,L()();case 5:return n.next=7,R.default.put(r,{key:t,value:e});case 7:return i=n.sent,n.abrupt("return",i.data);case 9:case"end":return n.stop()}}),n)})));return function(t,e){return n.apply(this,arguments)}}(),H=function(){var n=T(regeneratorRuntime.mark((function n(t,e){var a,r,i;return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return a=(0,l.getCurrentUser)().uid,r=(0,O.generateOcsUrl)("cloud/users/{userId}",{userId:a}),n.next=4,L()();case 4:return n.next=6,R.default.put(r,{key:"".concat(t).concat(I),value:e});case 6:return i=n.sent,n.abrupt("return",i.data);case 8:case"end":return n.stop()}}),n)})));return function(t,e){return n.apply(this,arguments)}}();function U(n){return""!==n}function $(n){return"string"==typeof n&&B.test(n)&&"\n"!==n.slice(-1)&&n.length<=320&&encodeURIComponent(n).replace(/%../g,"x").length<=320}function M(n,t,e,a,r,i,o){try{var s=n[i](o),l=s.value}catch(n){return void e(n)}s.done?t(l):Promise.resolve(l).then(a,r)}function F(n){return function(){var t=this,e=arguments;return new Promise((function(a,r){var i=n.apply(t,e);function o(n){M(i,a,r,o,s,"next",n)}function s(n){M(i,a,r,o,s,"throw",n)}o(void 0)}))}}var j={name:"DisplayName",props:{displayName:{type:String,required:!0},scope:{type:String,required:!0}},data:function(){return{initialDisplayName:this.displayName,localScope:this.scope,showCheckmarkIcon:!1,showErrorIcon:!1}},methods:{onDisplayNameChange:function(n){this.$emit("update:display-name",n.target.value),this.debounceDisplayNameChange(n.target.value.trim())},debounceDisplayNameChange:f()(function(){var n=F(regeneratorRuntime.mark((function n(t){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(!U(t)){n.next=3;break}return n.next=3,this.updatePrimaryDisplayName(t);case 3:case"end":return n.stop()}}),n,this)})));return function(t){return n.apply(this,arguments)}}(),500),updatePrimaryDisplayName:function(n){var e=this;return F(regeneratorRuntime.mark((function a(){var r,i,o;return regeneratorRuntime.wrap((function(a){for(;;)switch(a.prev=a.next){case 0:return a.prev=0,a.next=3,Z(v.DISPLAYNAME,n);case 3:o=a.sent,e.handleResponse({displayName:n,status:null===(r=o.ocs)||void 0===r||null===(i=r.meta)||void 0===i?void 0:i.status}),a.next=10;break;case 7:a.prev=7,a.t0=a.catch(0),e.handleResponse({errorMessage:t("settings","Unable to update full name"),error:a.t0});case 10:case"end":return a.stop()}}),a,null,[[0,7]])})))()},handleResponse:function(n){var t=this,e=n.displayName,a=n.status,r=n.errorMessage,i=n.error;"ok"===a?(this.initialDisplayName=e,(0,A.emit)("settings:display-name:updated",e),this.showCheckmarkIcon=!0,setTimeout((function(){t.showCheckmarkIcon=!1}),2e3)):((0,p.x2)(r),this.logger.error(r,i),this.showErrorIcon=!0,setTimeout((function(){t.showErrorIcon=!1}),2e3))},onScopeChange:function(n){this.$emit("update:scope",n)}}},q=j,G=a(93379),V=a.n(G),W=a(7795),Y=a.n(W),z=a(90569),K=a.n(z),J=a(3565),Q=a.n(J),X=a(19216),nn=a.n(X),tn=a(44589),en=a.n(tn),an=a(74539),rn={};rn.styleTagTransform=en(),rn.setAttributes=Q(),rn.insert=K().bind(null,"head"),rn.domAPI=Y(),rn.insertStyleElement=nn(),V()(an.Z,rn),an.Z&&an.Z.locals&&an.Z.locals;var on=a(51900),sn=(0,on.Z)(q,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"displayname"},[e("input",{attrs:{id:"displayname",type:"text",placeholder:n.t("settings","Your full name"),autocapitalize:"none",autocomplete:"on",autocorrect:"off"},domProps:{value:n.displayName},on:{input:n.onDisplayNameChange}}),n._v(" "),e("div",{staticClass:"displayname__actions-container"},[e("transition",{attrs:{name:"fade"}},[n.showCheckmarkIcon?e("span",{staticClass:"icon-checkmark"}):n.showErrorIcon?e("span",{staticClass:"icon-error"}):n._e()])],1)])}),[],!1,null,"3418897a",null).exports,ln=a(79440),cn=a.n(ln),dn=a(56286),un=a.n(dn),pn={name:"FederationControlAction",components:{ActionButton:un()},props:{activeScope:{type:String,required:!0},displayName:{type:String,required:!0},handleScopeChange:{type:Function,default:function(){}},iconClass:{type:String,required:!0},isSupportedScope:{type:Boolean,required:!0},name:{type:String,required:!0},tooltipDisabled:{type:String,default:""},tooltip:{type:String,required:!0}},methods:{updateScope:function(){this.handleScopeChange(this.name)}}},An=a(12461),mn={};mn.styleTagTransform=en(),mn.setAttributes=Q(),mn.insert=K().bind(null,"head"),mn.domAPI=Y(),mn.insertStyleElement=nn(),V()(An.Z,mn),An.Z&&An.Z.locals&&An.Z.locals;var fn=(0,on.Z)(pn,(function(){var n=this,t=n.$createElement;return(n._self._c||t)("ActionButton",{staticClass:"federation-actions__btn",class:{"federation-actions__btn--active":n.activeScope===n.name},attrs:{"aria-label":n.isSupportedScope?n.tooltip:n.tooltipDisabled,"close-after-click":!0,disabled:!n.isSupportedScope,icon:n.iconClass,title:n.displayName},on:{click:function(t){return t.stopPropagation(),t.preventDefault(),n.updateScope.apply(null,arguments)}}},[n._v("\n\t"+n._s(n.isSupportedScope?n.tooltip:n.tooltipDisabled)+"\n")])}),[],!1,null,"d2e8b360",null),hn=fn.exports;function vn(n,t,e,a,r,i,o){try{var s=n[i](o),l=s.value}catch(n){return void e(n)}s.done?t(l):Promise.resolve(l).then(a,r)}function gn(n){return function(){var t=this,e=arguments;return new Promise((function(a,r){var i=n.apply(t,e);function o(n){vn(i,a,r,o,s,"next",n)}function s(n){vn(i,a,r,o,s,"throw",n)}o(void 0)}))}}function Cn(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,a=new Array(t);en.length)&&(t=n.length);for(var e=0,a=new Array(t);en.length)&&(t=n.length);for(var e=0,a=new Array(t);e=i)&&Object.keys(r.O).every((function(n){return r.O[n](e[l])}))?e.splice(l--,1):(s=!1,i0&&n[d-1][2]>i;d--)n[d]=n[d-1];n[d]=[e,a,i]},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,{a:t}),t},r.d=function(n,t){for(var e in t)r.o(t,e)&&!r.o(n,e)&&Object.defineProperty(n,e,{enumerable:!0,get:t[e]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),r.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},r.j=858,function(){r.b=document.baseURI||self.location.href;var n={858:0};r.O.j=function(t){return 0===n[t]};var t=function(t,e){var a,i,o=e[0],s=e[1],l=e[2],c=0;if(o.some((function(t){return 0!==n[t]}))){for(a in s)r.o(s,a)&&(r.m[a]=s[a]);if(l)var d=l(r)}for(t&&t(e);cn.length)&&(t=n.length);for(var e=0,a=new Array(t);en.length)&&(t=n.length);for(var e=0,a=new Array(t);en.length)&&(t=n.length);for(var e=0,a=new Array(t);e=i)&&Object.keys(r.O).every((function(n){return r.O[n](e[l])}))?e.splice(l--,1):(s=!1,i0&&n[d-1][2]>i;d--)n[d]=n[d-1];n[d]=[e,a,i]},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,{a:t}),t},r.d=function(n,t){for(var e in t)r.o(t,e)&&!r.o(n,e)&&Object.defineProperty(n,e,{enumerable:!0,get:t[e]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),r.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},r.j=858,function(){r.b=document.baseURI||self.location.href;var n={858:0};r.O.j=function(t){return 0===n[t]};var t=function(t,e){var a,i,o=e[0],s=e[1],l=e[2],c=0;if(o.some((function(t){return 0!==n[t]}))){for(a in s)r.o(s,a)&&(r.m[a]=s[a]);if(l)var d=l(r)}for(t&&t(e);c 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","/**\n * @copyright 2020 Christoph Wurst \n *\n * @author Roeland Jago Douma \n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see .\n *\n */\n\nimport { getLoggerBuilder } from '@nextcloud/logger'\n\nexport default getLoggerBuilder()\n\t.setApp('settings')\n\t.detectUser()\n\t.build()\n","/**\n * @copyright 2021, Christopher Ng \n *\n * @author Christopher Ng \n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see .\n *\n */\n\n/*\n * SYNC to be kept in sync with `lib/public/Accounts/IAccountManager.php`\n */\n\nimport { translate as t } from '@nextcloud/l10n'\n\n/** Enum of account properties */\nexport const ACCOUNT_PROPERTY_ENUM = Object.freeze({\n\tADDRESS: 'address',\n\tAVATAR: 'avatar',\n\tBIOGRAPHY: 'biography',\n\tDISPLAYNAME: 'displayname',\n\tEMAIL_COLLECTION: 'additional_mail',\n\tEMAIL: 'email',\n\tHEADLINE: 'headline',\n\tNOTIFICATION_EMAIL: 'notify_email',\n\tORGANISATION: 'organisation',\n\tPHONE: 'phone',\n\tPROFILE_ENABLED: 'profile_enabled',\n\tROLE: 'role',\n\tTWITTER: 'twitter',\n\tWEBSITE: 'website',\n})\n\n/** Enum of account properties to human readable account property names */\nexport const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({\n\tADDRESS: t('settings', 'Address'),\n\tAVATAR: t('settings', 'Avatar'),\n\tBIOGRAPHY: t('settings', 'About'),\n\tDISPLAYNAME: t('settings', 'Full name'),\n\tEMAIL_COLLECTION: t('settings', 'Additional email'),\n\tEMAIL: t('settings', 'Email'),\n\tHEADLINE: t('settings', 'Headline'),\n\tORGANISATION: t('settings', 'Organisation'),\n\tPHONE: t('settings', 'Phone number'),\n\tPROFILE_ENABLED: t('settings', 'Profile'),\n\tROLE: t('settings', 'Role'),\n\tTWITTER: t('settings', 'Twitter'),\n\tWEBSITE: t('settings', 'Website'),\n})\n\n/** Enum of profile specific sections to human readable names */\nexport const PROFILE_READABLE_ENUM = Object.freeze({\n\tPROFILE_VISIBILITY: t('settings', 'Profile visibility'),\n})\n\n/** Enum of readable account properties to account property keys used by the server */\nexport const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS]: ACCOUNT_PROPERTY_ENUM.ADDRESS,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR]: ACCOUNT_PROPERTY_ENUM.AVATAR,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY]: ACCOUNT_PROPERTY_ENUM.BIOGRAPHY,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME]: ACCOUNT_PROPERTY_ENUM.DISPLAYNAME,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION]: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL]: ACCOUNT_PROPERTY_ENUM.EMAIL,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE]: ACCOUNT_PROPERTY_ENUM.HEADLINE,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION]: ACCOUNT_PROPERTY_ENUM.ORGANISATION,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.PHONE]: ACCOUNT_PROPERTY_ENUM.PHONE,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: ACCOUNT_PROPERTY_ENUM.ROLE,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: ACCOUNT_PROPERTY_ENUM.TWITTER,\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: ACCOUNT_PROPERTY_ENUM.WEBSITE,\n})\n\n/**\n * Enum of account setting properties\n *\n * Account setting properties unlike account properties do not support scopes*\n */\nexport const ACCOUNT_SETTING_PROPERTY_ENUM = Object.freeze({\n\tLANGUAGE: 'language',\n})\n\n/** Enum of account setting properties to human readable setting properties */\nexport const ACCOUNT_SETTING_PROPERTY_READABLE_ENUM = Object.freeze({\n\tLANGUAGE: t('settings', 'Language'),\n})\n\n/** Enum of scopes */\nexport const SCOPE_ENUM = Object.freeze({\n\tPRIVATE: 'v2-private',\n\tLOCAL: 'v2-local',\n\tFEDERATED: 'v2-federated',\n\tPUBLISHED: 'v2-published',\n})\n\n/** Enum of readable account properties to supported scopes */\nexport const PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM = Object.freeze({\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME]: [SCOPE_ENUM.LOCAL],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION]: [SCOPE_ENUM.LOCAL],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL]: [SCOPE_ENUM.LOCAL],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.PHONE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n\t[ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],\n})\n\n/** List of readable account properties which aren't published to the lookup server */\nexport const UNPUBLISHED_READABLE_PROPERTIES = Object.freeze([\n\tACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,\n\tACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE,\n\tACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION,\n\tACCOUNT_PROPERTY_READABLE_ENUM.ROLE,\n])\n\n/** Scope suffix */\nexport const SCOPE_SUFFIX = 'Scope'\n\n/**\n * Enum of scope names to properties\n *\n * Used for federation control*\n */\nexport const SCOPE_PROPERTY_ENUM = Object.freeze({\n\t[SCOPE_ENUM.PRIVATE]: {\n\t\tname: SCOPE_ENUM.PRIVATE,\n\t\tdisplayName: t('settings', 'Private'),\n\t\ttooltip: t('settings', 'Only visible to people matched via phone number integration through Talk on mobile'),\n\t\ttooltipDisabled: t('settings', 'Not available as this property is required for core functionality including file sharing and calendar invitations'),\n\t\ticonClass: 'icon-phone',\n\t},\n\t[SCOPE_ENUM.LOCAL]: {\n\t\tname: SCOPE_ENUM.LOCAL,\n\t\tdisplayName: t('settings', 'Local'),\n\t\ttooltip: t('settings', 'Only visible to people on this instance and guests'),\n\t\t// tooltipDisabled is not required here as this scope is supported by all account properties\n\t\ticonClass: 'icon-password',\n\t},\n\t[SCOPE_ENUM.FEDERATED]: {\n\t\tname: SCOPE_ENUM.FEDERATED,\n\t\tdisplayName: t('settings', 'Federated'),\n\t\ttooltip: t('settings', 'Only synchronize to trusted servers'),\n\t\ttooltipDisabled: t('settings', 'Not available as publishing user specific data to the lookup server is not allowed, contact your system administrator if you have any questions'),\n\t\ticonClass: 'icon-contacts-dark',\n\t},\n\t[SCOPE_ENUM.PUBLISHED]: {\n\t\tname: SCOPE_ENUM.PUBLISHED,\n\t\tdisplayName: t('settings', 'Published'),\n\t\ttooltip: t('settings', 'Synchronize to trusted servers and the global and public address book'),\n\t\ttooltipDisabled: t('settings', 'Not available as publishing user specific data to the lookup server is not allowed, contact your system administrator if you have any questions'),\n\t\ticonClass: 'icon-link',\n\t},\n})\n\n/** Default additional email scope */\nexport const DEFAULT_ADDITIONAL_EMAIL_SCOPE = SCOPE_ENUM.LOCAL\n\n/** Enum of verification constants, according to IAccountManager */\nexport const VERIFICATION_ENUM = Object.freeze({\n\tNOT_VERIFIED: 0,\n\tVERIFICATION_IN_PROGRESS: 1,\n\tVERIFIED: 2,\n})\n\n/**\n * Email validation regex\n *\n * Sourced from https://github.com/mpyw/FILTER_VALIDATE_EMAIL.js/blob/71e62ca48841d2246a1b531e7e84f5a01f15e615/src/regexp/ascii.ts*\n */\n// eslint-disable-next-line no-control-regex\nexport const VALIDATE_EMAIL_REGEX = /^(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}@)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-+[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-+[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))$/i\n","/**\n * @copyright 2021, Christopher Ng \n *\n * @author Christopher Ng \n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see .\n *\n */\n\nimport axios from '@nextcloud/axios'\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport confirmPassword from '@nextcloud/password-confirmation'\n\nimport { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants'\n\n/**\n * Save the primary account property value for the user\n *\n * @param {string} accountProperty the account property\n * @param {string|boolean} value the primary value\n * @return {object}\n */\nexport const savePrimaryAccountProperty = async (accountProperty, value) => {\n\t// TODO allow boolean values on backend route handler\n\t// Convert boolean to string for compatibility\n\tif (typeof value === 'boolean') {\n\t\tvalue = value ? '1' : '0'\n\t}\n\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: accountProperty,\n\t\tvalue,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Save the federation scope of the primary account property for the user\n *\n * @param {string} accountProperty the account property\n * @param {string} scope the federation scope\n * @return {object}\n */\nexport const savePrimaryAccountPropertyScope = async (accountProperty, scope) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: `${accountProperty}${SCOPE_SUFFIX}`,\n\t\tvalue: scope,\n\t})\n\n\treturn res.data\n}\n","/**\n * @copyright 2021, Christopher Ng \n *\n * @author Christopher Ng \n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see .\n *\n */\n\n/*\n * Frontend validators, less strict than backend validators\n *\n * TODO add nice validation errors for Profile page settings modal\n */\n\nimport { VALIDATE_EMAIL_REGEX } from '../constants/AccountPropertyConstants'\n\n/**\n * Validate the string input\n *\n * Generic validator just to check that input is not an empty string*\n *\n * @param {string} input the input\n * @return {boolean}\n */\nexport function validateStringInput(input) {\n\treturn input !== ''\n}\n\n/**\n * Validate the email input\n *\n * Compliant with PHP core FILTER_VALIDATE_EMAIL validator*\n *\n * Reference implementation https://github.com/mpyw/FILTER_VALIDATE_EMAIL.js/blob/71e62ca48841d2246a1b531e7e84f5a01f15e615/src/index.ts*\n *\n * @param {string} input the input\n * @return {boolean}\n */\nexport function validateEmail(input) {\n\treturn typeof input === 'string'\n\t\t&& VALIDATE_EMAIL_REGEX.test(input)\n\t\t&& input.slice(-1) !== '\\n'\n\t\t&& input.length <= 320\n\t\t&& encodeURIComponent(input).replace(/%../g, 'x').length <= 320\n}\n\n/**\n * Validate the language input\n *\n * @param {object} input the input\n * @return {boolean}\n */\nexport function validateLanguage(input) {\n\treturn input.code !== ''\n\t\t&& input.name !== ''\n\t\t&& input.name !== undefined\n}\n\n/**\n * Validate boolean input\n *\n * @param {boolean} input the input\n * @return {boolean}\n */\nexport function validateBoolean(input) {\n\treturn typeof input === 'boolean'\n}\n","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayName.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayName.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayName.vue?vue&type=style&index=0&id=3418897a&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayName.vue?vue&type=style&index=0&id=3418897a&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./DisplayName.vue?vue&type=template&id=3418897a&scoped=true&\"\nimport script from \"./DisplayName.vue?vue&type=script&lang=js&\"\nexport * from \"./DisplayName.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DisplayName.vue?vue&type=style&index=0&id=3418897a&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"3418897a\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"displayname\"},[_c('input',{attrs:{\"id\":\"displayname\",\"type\":\"text\",\"placeholder\":_vm.t('settings', 'Your full name'),\"autocapitalize\":\"none\",\"autocomplete\":\"on\",\"autocorrect\":\"off\"},domProps:{\"value\":_vm.displayName},on:{\"input\":_vm.onDisplayNameChange}}),_vm._v(\" \"),_c('div',{staticClass:\"displayname__actions-container\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.showCheckmarkIcon)?_c('span',{staticClass:\"icon-checkmark\"}):(_vm.showErrorIcon)?_c('span',{staticClass:\"icon-error\"}):_vm._e()])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControlAction.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControlAction.vue?vue&type=script&lang=js&\"","\n\n\n\n\n\n\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControlAction.vue?vue&type=style&index=0&id=d2e8b360&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControlAction.vue?vue&type=style&index=0&id=d2e8b360&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./FederationControlAction.vue?vue&type=template&id=d2e8b360&scoped=true&\"\nimport script from \"./FederationControlAction.vue?vue&type=script&lang=js&\"\nexport * from \"./FederationControlAction.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FederationControlAction.vue?vue&type=style&index=0&id=d2e8b360&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"d2e8b360\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ActionButton',{staticClass:\"federation-actions__btn\",class:{ 'federation-actions__btn--active': _vm.activeScope === _vm.name },attrs:{\"aria-label\":_vm.isSupportedScope ? _vm.tooltip : _vm.tooltipDisabled,\"close-after-click\":true,\"disabled\":!_vm.isSupportedScope,\"icon\":_vm.iconClass,\"title\":_vm.displayName},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.updateScope.apply(null, arguments)}}},[_vm._v(\"\\n\\t\"+_vm._s(_vm.isSupportedScope ? _vm.tooltip : _vm.tooltipDisabled)+\"\\n\")])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControl.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControl.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControl.vue?vue&type=style&index=0&id=b51d8bee&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FederationControl.vue?vue&type=style&index=0&id=b51d8bee&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./FederationControl.vue?vue&type=template&id=b51d8bee&scoped=true&\"\nimport script from \"./FederationControl.vue?vue&type=script&lang=js&\"\nexport * from \"./FederationControl.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FederationControl.vue?vue&type=style&index=0&id=b51d8bee&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"b51d8bee\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Actions',{class:{ 'federation-actions': !_vm.additional, 'federation-actions--additional': _vm.additional },attrs:{\"aria-label\":_vm.ariaLabel,\"default-icon\":_vm.scopeIcon,\"disabled\":_vm.disabled}},_vm._l((_vm.federationScopes),function(federationScope){return _c('FederationControlAction',{key:federationScope.name,attrs:{\"active-scope\":_vm.scope,\"display-name\":federationScope.displayName,\"handle-scope-change\":_vm.changeScope,\"icon-class\":federationScope.iconClass,\"is-supported-scope\":_vm.supportedScopes.includes(federationScope.name),\"name\":federationScope.name,\"tooltip-disabled\":federationScope.tooltipDisabled,\"tooltip\":federationScope.tooltip}})}),1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeaderBar.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeaderBar.vue?vue&type=script&lang=js&\"","\n\n\n\n\n\n\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeaderBar.vue?vue&type=style&index=0&id=19038f0c&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeaderBar.vue?vue&type=style&index=0&id=19038f0c&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./HeaderBar.vue?vue&type=template&id=19038f0c&scoped=true&\"\nimport script from \"./HeaderBar.vue?vue&type=script&lang=js&\"\nexport * from \"./HeaderBar.vue?vue&type=script&lang=js&\"\nimport style0 from \"./HeaderBar.vue?vue&type=style&index=0&id=19038f0c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"19038f0c\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h3',{class:{ 'setting-property': _vm.isSettingProperty, 'profile-property': _vm.isProfileProperty }},[_c('label',{attrs:{\"for\":_vm.labelFor}},[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.accountProperty)+\"\\n\\t\")]),_vm._v(\" \"),(_vm.scope)?[_c('FederationControl',{staticClass:\"federation-control\",attrs:{\"account-property\":_vm.accountProperty,\"scope\":_vm.localScope},on:{\"update:scope\":[function($event){_vm.localScope=$event},_vm.onScopeChange]}})]:_vm._e(),_vm._v(\" \"),(_vm.isEditable && _vm.isMultiValueSupported)?[_c('Button',{attrs:{\"type\":\"tertiary\",\"disabled\":!_vm.isValidSection,\"aria-label\":_vm.t('settings', 'Add additional email')},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.onAddAdditional.apply(null, arguments)}},scopedSlots:_vm._u([{key:\"icon\",fn:function(){return [_c('Plus',{attrs:{\"size\":20}})]},proxy:true}],null,false,32235154)},[_vm._v(\"\\n\\t\\t\\t\"+_vm._s(_vm.t('settings', 'Add'))+\"\\n\\t\\t\")])]:_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayNameSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayNameSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayNameSection.vue?vue&type=style&index=0&id=b8a748f4&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DisplayNameSection.vue?vue&type=style&index=0&id=b8a748f4&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./DisplayNameSection.vue?vue&type=template&id=b8a748f4&scoped=true&\"\nimport script from \"./DisplayNameSection.vue?vue&type=script&lang=js&\"\nexport * from \"./DisplayNameSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DisplayNameSection.vue?vue&type=style&index=0&id=b8a748f4&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"b8a748f4\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"displayname\",\"is-editable\":_vm.displayNameChangeSupported,\"is-valid-section\":_vm.isValidSection,\"scope\":_vm.primaryDisplayName.scope},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryDisplayName, \"scope\", $event)}}}),_vm._v(\" \"),(_vm.displayNameChangeSupported)?[_c('DisplayName',{attrs:{\"display-name\":_vm.primaryDisplayName.value,\"scope\":_vm.primaryDisplayName.scope},on:{\"update:displayName\":function($event){return _vm.$set(_vm.primaryDisplayName, \"value\", $event)},\"update:display-name\":function($event){return _vm.$set(_vm.primaryDisplayName, \"value\", $event)},\"update:scope\":function($event){return _vm.$set(_vm.primaryDisplayName, \"scope\", $event)}}})]:_c('span',[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.primaryDisplayName.value || _vm.t('settings', 'No full name set'))+\"\\n\\t\")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","/**\n * @copyright 2021, Christopher Ng \n *\n * @author Christopher Ng \n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see .\n *\n */\n\nimport axios from '@nextcloud/axios'\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport confirmPassword from '@nextcloud/password-confirmation'\n\nimport { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants'\n\n/**\n * Save the primary email of the user\n *\n * @param {string} email the primary email\n * @return {object}\n */\nexport const savePrimaryEmail = async (email) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: ACCOUNT_PROPERTY_ENUM.EMAIL,\n\t\tvalue: email,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Save an additional email of the user\n *\n * Will be appended to the user's additional emails*\n *\n * @param {string} email the additional email\n * @return {object}\n */\nexport const saveAdditionalEmail = async (email) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION,\n\t\tvalue: email,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Save the notification email of the user\n *\n * @param {string} email the notification email\n * @return {object}\n */\nexport const saveNotificationEmail = async (email) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: ACCOUNT_PROPERTY_ENUM.NOTIFICATION_EMAIL,\n\t\tvalue: email,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Remove an additional email of the user\n *\n * @param {string} email the additional email\n * @return {object}\n */\nexport const removeAdditionalEmail = async (email) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}/{collection}', { userId, collection: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: email,\n\t\tvalue: '',\n\t})\n\n\treturn res.data\n}\n\n/**\n * Update an additional email of the user\n *\n * @param {string} prevEmail the additional email to be updated\n * @param {string} newEmail the new additional email\n * @return {object}\n */\nexport const updateAdditionalEmail = async (prevEmail, newEmail) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}/{collection}', { userId, collection: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: prevEmail,\n\t\tvalue: newEmail,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Save the federation scope for the primary email of the user\n *\n * @param {string} scope the federation scope\n * @return {object}\n */\nexport const savePrimaryEmailScope = async (scope) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}', { userId })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: `${ACCOUNT_PROPERTY_ENUM.EMAIL}${SCOPE_SUFFIX}`,\n\t\tvalue: scope,\n\t})\n\n\treturn res.data\n}\n\n/**\n * Save the federation scope for the additional email of the user\n *\n * @param {string} email the additional email\n * @param {string} scope the federation scope\n * @return {object}\n */\nexport const saveAdditionalEmailScope = async (email, scope) => {\n\tconst userId = getCurrentUser().uid\n\tconst url = generateOcsUrl('cloud/users/{userId}/{collectionScope}', { userId, collectionScope: `${ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION}${SCOPE_SUFFIX}` })\n\n\tawait confirmPassword()\n\n\tconst res = await axios.put(url, {\n\t\tkey: email,\n\t\tvalue: scope,\n\t})\n\n\treturn res.data\n}\n","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Email.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Email.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Email.vue?vue&type=style&index=0&id=2c097054&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Email.vue?vue&type=style&index=0&id=2c097054&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./Email.vue?vue&type=template&id=2c097054&scoped=true&\"\nimport script from \"./Email.vue?vue&type=script&lang=js&\"\nexport * from \"./Email.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Email.vue?vue&type=style&index=0&id=2c097054&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"2c097054\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"email\"},[_c('input',{ref:\"email\",attrs:{\"id\":_vm.inputId,\"type\":\"email\",\"placeholder\":_vm.inputPlaceholder,\"autocapitalize\":\"none\",\"autocomplete\":\"on\",\"autocorrect\":\"off\"},domProps:{\"value\":_vm.email},on:{\"input\":_vm.onEmailChange}}),_vm._v(\" \"),_c('div',{staticClass:\"email__actions-container\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.showCheckmarkIcon)?_c('span',{staticClass:\"icon-checkmark\"}):(_vm.showErrorIcon)?_c('span',{staticClass:\"icon-error\"}):_vm._e()]),_vm._v(\" \"),(!_vm.primary)?[_c('FederationControl',{attrs:{\"account-property\":_vm.accountProperty,\"additional\":true,\"additional-value\":_vm.email,\"disabled\":_vm.federationDisabled,\"handle-additional-scope-change\":_vm.saveAdditionalEmailScope,\"scope\":_vm.localScope},on:{\"update:scope\":[function($event){_vm.localScope=$event},_vm.onScopeChange]}})]:_vm._e(),_vm._v(\" \"),_c('Actions',{staticClass:\"email__actions\",attrs:{\"aria-label\":_vm.t('settings', 'Email options'),\"disabled\":_vm.deleteDisabled,\"force-menu\":true}},[_c('ActionButton',{attrs:{\"aria-label\":_vm.deleteEmailLabel,\"close-after-click\":true,\"disabled\":_vm.deleteDisabled,\"icon\":\"icon-delete\"},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.deleteEmail.apply(null, arguments)}}},[_vm._v(\"\\n\\t\\t\\t\\t\\t\"+_vm._s(_vm.deleteEmailLabel)+\"\\n\\t\\t\\t\\t\")]),_vm._v(\" \"),(!_vm.primary || !_vm.isNotificationEmail)?_c('ActionButton',{attrs:{\"aria-label\":_vm.setNotificationMailLabel,\"close-after-click\":true,\"disabled\":_vm.setNotificationMailDisabled,\"icon\":\"icon-favorite\"},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.setNotificationMail.apply(null, arguments)}}},[_vm._v(\"\\n\\t\\t\\t\\t\\t\"+_vm._s(_vm.setNotificationMailLabel)+\"\\n\\t\\t\\t\\t\")]):_vm._e()],1)],2)]),_vm._v(\" \"),(_vm.isNotificationEmail)?_c('em',[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.t('settings', 'Primary email for password reset and notifications'))+\"\\n\\t\")]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EmailSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EmailSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EmailSection.vue?vue&type=style&index=0&id=845b669e&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EmailSection.vue?vue&type=style&index=0&id=845b669e&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./EmailSection.vue?vue&type=template&id=845b669e&scoped=true&\"\nimport script from \"./EmailSection.vue?vue&type=script&lang=js&\"\nexport * from \"./EmailSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./EmailSection.vue?vue&type=style&index=0&id=845b669e&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"845b669e\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"email\",\"handle-scope-change\":_vm.savePrimaryEmailScope,\"is-editable\":true,\"is-multi-value-supported\":true,\"is-valid-section\":_vm.isValidSection,\"scope\":_vm.primaryEmail.scope},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryEmail, \"scope\", $event)},\"add-additional\":_vm.onAddAdditionalEmail}}),_vm._v(\" \"),(_vm.displayNameChangeSupported)?[_c('Email',{attrs:{\"primary\":true,\"scope\":_vm.primaryEmail.scope,\"email\":_vm.primaryEmail.value,\"active-notification-email\":_vm.notificationEmail},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryEmail, \"scope\", $event)},\"update:email\":[function($event){return _vm.$set(_vm.primaryEmail, \"value\", $event)},_vm.onUpdateEmail],\"update:activeNotificationEmail\":function($event){_vm.notificationEmail=$event},\"update:active-notification-email\":function($event){_vm.notificationEmail=$event},\"update:notification-email\":_vm.onUpdateNotificationEmail}})]:_c('span',[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.primaryEmail.value || _vm.t('settings', 'No email address set'))+\"\\n\\t\")]),_vm._v(\" \"),(_vm.additionalEmails.length)?[_c('em',{staticClass:\"additional-emails-label\"},[_vm._v(_vm._s(_vm.t('settings', 'Additional emails')))]),_vm._v(\" \"),_vm._l((_vm.additionalEmails),function(additionalEmail,index){return _c('Email',{key:index,attrs:{\"index\":index,\"scope\":additionalEmail.scope,\"email\":additionalEmail.value,\"local-verification-state\":parseInt(additionalEmail.locallyVerified, 10),\"active-notification-email\":_vm.notificationEmail},on:{\"update:scope\":function($event){return _vm.$set(additionalEmail, \"scope\", $event)},\"update:email\":[function($event){return _vm.$set(additionalEmail, \"value\", $event)},_vm.onUpdateEmail],\"update:activeNotificationEmail\":function($event){_vm.notificationEmail=$event},\"update:active-notification-email\":function($event){_vm.notificationEmail=$event},\"update:notification-email\":_vm.onUpdateNotificationEmail,\"delete-additional-email\":function($event){return _vm.onDeleteAdditionalEmail(index)}}})})]:_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Language.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Language.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Language.vue?vue&type=style&index=0&id=5396d706&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Language.vue?vue&type=style&index=0&id=5396d706&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./Language.vue?vue&type=template&id=5396d706&scoped=true&\"\nimport script from \"./Language.vue?vue&type=script&lang=js&\"\nexport * from \"./Language.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Language.vue?vue&type=style&index=0&id=5396d706&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"5396d706\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"language\"},[_c('select',{attrs:{\"id\":\"language\",\"placeholder\":_vm.t('settings', 'Language')},on:{\"change\":_vm.onLanguageChange}},[_vm._l((_vm.commonLanguages),function(commonLanguage){return _c('option',{key:commonLanguage.code,domProps:{\"selected\":_vm.language.code === commonLanguage.code,\"value\":commonLanguage.code}},[_vm._v(\"\\n\\t\\t\\t\"+_vm._s(commonLanguage.name)+\"\\n\\t\\t\")])}),_vm._v(\" \"),_c('option',{attrs:{\"disabled\":\"\"}},[_vm._v(\"\\n\\t\\t\\t──────────\\n\\t\\t\")]),_vm._v(\" \"),_vm._l((_vm.otherLanguages),function(otherLanguage){return _c('option',{key:otherLanguage.code,domProps:{\"selected\":_vm.language.code === otherLanguage.code,\"value\":otherLanguage.code}},[_vm._v(\"\\n\\t\\t\\t\"+_vm._s(otherLanguage.name)+\"\\n\\t\\t\")])})],2),_vm._v(\" \"),_c('a',{attrs:{\"href\":\"https://www.transifex.com/nextcloud/nextcloud/\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\"}},[_c('em',[_vm._v(_vm._s(_vm.t('settings', 'Help translate')))])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LanguageSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LanguageSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LanguageSection.vue?vue&type=style&index=0&id=16883898&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LanguageSection.vue?vue&type=style&index=0&id=16883898&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./LanguageSection.vue?vue&type=template&id=16883898&scoped=true&\"\nimport script from \"./LanguageSection.vue?vue&type=script&lang=js&\"\nexport * from \"./LanguageSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./LanguageSection.vue?vue&type=style&index=0&id=16883898&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"16883898\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"language\"}}),_vm._v(\" \"),(_vm.isEditable)?[_c('Language',{attrs:{\"common-languages\":_vm.commonLanguages,\"other-languages\":_vm.otherLanguages,\"language\":_vm.language},on:{\"update:language\":function($event){_vm.language=$event}}})]:_c('span',[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.t('settings', 'No language set'))+\"\\n\\t\")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=script&lang=js&\"","\n\n\n\n\n\n\n\n\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=style&index=0&lang=scss&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=style&index=0&lang=scss&\";\n export default content && content.locals ? content.locals : undefined;\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=style&index=1&id=73817e9f&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./EditProfileAnchorLink.vue?vue&type=style&index=1&id=73817e9f&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./EditProfileAnchorLink.vue?vue&type=template&id=73817e9f&scoped=true&\"\nimport script from \"./EditProfileAnchorLink.vue?vue&type=script&lang=js&\"\nexport * from \"./EditProfileAnchorLink.vue?vue&type=script&lang=js&\"\nimport style0 from \"./EditProfileAnchorLink.vue?vue&type=style&index=0&lang=scss&\"\nimport style1 from \"./EditProfileAnchorLink.vue?vue&type=style&index=1&id=73817e9f&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"73817e9f\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',_vm._g({class:{ disabled: _vm.disabled },attrs:{\"href\":\"#profile-visibility\"}},_vm.$listeners),[_c('ChevronDownIcon',{staticClass:\"anchor-icon\",attrs:{\"decorative\":\"\",\"title\":\"\",\"size\":22}}),_vm._v(\"\\n\\t\"+_vm._s(_vm.t('settings', 'Edit your Profile visibility'))+\"\\n\")],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileCheckbox.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileCheckbox.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProfileCheckbox.vue?vue&type=template&id=b6898860&scoped=true&\"\nimport script from \"./ProfileCheckbox.vue?vue&type=script&lang=js&\"\nexport * from \"./ProfileCheckbox.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"b6898860\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"checkbox-container\"},[_c('input',{staticClass:\"checkbox\",attrs:{\"id\":\"enable-profile\",\"type\":\"checkbox\"},domProps:{\"checked\":_vm.profileEnabled},on:{\"change\":_vm.onEnableProfileChange}}),_vm._v(\" \"),_c('label',{attrs:{\"for\":\"enable-profile\"}},[_vm._v(\"\\n\\t\\t\"+_vm._s(_vm.t('settings', 'Enable Profile'))+\"\\n\\t\")])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfilePreviewCard.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfilePreviewCard.vue?vue&type=script&lang=js&\"","\n\n\n\n\n\n\n","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfilePreviewCard.vue?vue&type=style&index=0&id=434179e3&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfilePreviewCard.vue?vue&type=style&index=0&id=434179e3&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./ProfilePreviewCard.vue?vue&type=template&id=434179e3&scoped=true&\"\nimport script from \"./ProfilePreviewCard.vue?vue&type=script&lang=js&\"\nexport * from \"./ProfilePreviewCard.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProfilePreviewCard.vue?vue&type=style&index=0&id=434179e3&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"434179e3\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',{staticClass:\"preview-card\",class:{ disabled: _vm.disabled },attrs:{\"href\":_vm.profilePageLink}},[_c('Avatar',{staticClass:\"preview-card__avatar\",attrs:{\"user\":_vm.userId,\"size\":48,\"show-user-status\":true,\"show-user-status-compact\":false,\"disable-menu\":true,\"disable-tooltip\":true}}),_vm._v(\" \"),_c('div',{staticClass:\"preview-card__header\"},[_c('span',[_vm._v(_vm._s(_vm.displayName))])]),_vm._v(\" \"),_c('div',{staticClass:\"preview-card__footer\"},[_c('span',[_vm._v(_vm._s(_vm.organisation))])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileSection.vue?vue&type=style&index=0&id=252753e6&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProfileSection.vue?vue&type=style&index=0&id=252753e6&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./ProfileSection.vue?vue&type=template&id=252753e6&scoped=true&\"\nimport script from \"./ProfileSection.vue?vue&type=script&lang=js&\"\nexport * from \"./ProfileSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProfileSection.vue?vue&type=style&index=0&id=252753e6&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"252753e6\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty}}),_vm._v(\" \"),_c('ProfileCheckbox',{attrs:{\"profile-enabled\":_vm.profileEnabled},on:{\"update:profileEnabled\":function($event){_vm.profileEnabled=$event},\"update:profile-enabled\":function($event){_vm.profileEnabled=$event}}}),_vm._v(\" \"),_c('ProfilePreviewCard',{attrs:{\"organisation\":_vm.organisation,\"display-name\":_vm.displayName,\"profile-enabled\":_vm.profileEnabled,\"user-id\":_vm.userId}}),_vm._v(\" \"),_c('EditProfileAnchorLink',{attrs:{\"profile-enabled\":_vm.profileEnabled}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Organisation.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Organisation.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Organisation.vue?vue&type=style&index=0&id=591cd6b6&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Organisation.vue?vue&type=style&index=0&id=591cd6b6&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./Organisation.vue?vue&type=template&id=591cd6b6&scoped=true&\"\nimport script from \"./Organisation.vue?vue&type=script&lang=js&\"\nexport * from \"./Organisation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Organisation.vue?vue&type=style&index=0&id=591cd6b6&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"591cd6b6\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"organisation\"},[_c('input',{attrs:{\"id\":\"organisation\",\"type\":\"text\",\"placeholder\":_vm.t('settings', 'Your organisation'),\"autocapitalize\":\"none\",\"autocomplete\":\"on\",\"autocorrect\":\"off\"},domProps:{\"value\":_vm.organisation},on:{\"input\":_vm.onOrganisationChange}}),_vm._v(\" \"),_c('div',{staticClass:\"organisation__actions-container\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.showCheckmarkIcon)?_c('span',{staticClass:\"icon-checkmark\"}):(_vm.showErrorIcon)?_c('span',{staticClass:\"icon-error\"}):_vm._e()])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OrganisationSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OrganisationSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OrganisationSection.vue?vue&type=style&index=0&id=43146ff7&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OrganisationSection.vue?vue&type=style&index=0&id=43146ff7&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./OrganisationSection.vue?vue&type=template&id=43146ff7&scoped=true&\"\nimport script from \"./OrganisationSection.vue?vue&type=script&lang=js&\"\nexport * from \"./OrganisationSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./OrganisationSection.vue?vue&type=style&index=0&id=43146ff7&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"43146ff7\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"organisation\",\"scope\":_vm.primaryOrganisation.scope},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryOrganisation, \"scope\", $event)}}}),_vm._v(\" \"),_c('Organisation',{attrs:{\"organisation\":_vm.primaryOrganisation.value,\"scope\":_vm.primaryOrganisation.scope},on:{\"update:organisation\":function($event){return _vm.$set(_vm.primaryOrganisation, \"value\", $event)},\"update:scope\":function($event){return _vm.$set(_vm.primaryOrganisation, \"scope\", $event)}}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Role.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Role.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Role.vue?vue&type=style&index=0&id=aac18396&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Role.vue?vue&type=style&index=0&id=aac18396&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./Role.vue?vue&type=template&id=aac18396&scoped=true&\"\nimport script from \"./Role.vue?vue&type=script&lang=js&\"\nexport * from \"./Role.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Role.vue?vue&type=style&index=0&id=aac18396&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"aac18396\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"role\"},[_c('input',{attrs:{\"id\":\"role\",\"type\":\"text\",\"placeholder\":_vm.t('settings', 'Your role'),\"autocapitalize\":\"none\",\"autocomplete\":\"on\",\"autocorrect\":\"off\"},domProps:{\"value\":_vm.role},on:{\"input\":_vm.onRoleChange}}),_vm._v(\" \"),_c('div',{staticClass:\"role__actions-container\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.showCheckmarkIcon)?_c('span',{staticClass:\"icon-checkmark\"}):(_vm.showErrorIcon)?_c('span',{staticClass:\"icon-error\"}):_vm._e()])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RoleSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RoleSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RoleSection.vue?vue&type=style&index=0&id=f3d959c2&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RoleSection.vue?vue&type=style&index=0&id=f3d959c2&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./RoleSection.vue?vue&type=template&id=f3d959c2&scoped=true&\"\nimport script from \"./RoleSection.vue?vue&type=script&lang=js&\"\nexport * from \"./RoleSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./RoleSection.vue?vue&type=style&index=0&id=f3d959c2&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"f3d959c2\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"role\",\"scope\":_vm.primaryRole.scope},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryRole, \"scope\", $event)}}}),_vm._v(\" \"),_c('Role',{attrs:{\"role\":_vm.primaryRole.value,\"scope\":_vm.primaryRole.scope},on:{\"update:role\":function($event){return _vm.$set(_vm.primaryRole, \"value\", $event)},\"update:scope\":function($event){return _vm.$set(_vm.primaryRole, \"scope\", $event)}}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Headline.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Headline.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Headline.vue?vue&type=style&index=0&id=64e0e0bd&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Headline.vue?vue&type=style&index=0&id=64e0e0bd&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./Headline.vue?vue&type=template&id=64e0e0bd&scoped=true&\"\nimport script from \"./Headline.vue?vue&type=script&lang=js&\"\nexport * from \"./Headline.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Headline.vue?vue&type=style&index=0&id=64e0e0bd&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"64e0e0bd\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"headline\"},[_c('input',{attrs:{\"id\":\"headline\",\"type\":\"text\",\"placeholder\":_vm.t('settings', 'Your headline'),\"autocapitalize\":\"none\",\"autocomplete\":\"on\",\"autocorrect\":\"off\"},domProps:{\"value\":_vm.headline},on:{\"input\":_vm.onHeadlineChange}}),_vm._v(\" \"),_c('div',{staticClass:\"headline__actions-container\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.showCheckmarkIcon)?_c('span',{staticClass:\"icon-checkmark\"}):(_vm.showErrorIcon)?_c('span',{staticClass:\"icon-error\"}):_vm._e()])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeadlineSection.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeadlineSection.vue?vue&type=script&lang=js&\"","\n import API from \"!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeadlineSection.vue?vue&type=style&index=0&id=187bb5da&lang=scss&scoped=true&\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/sass-loader/dist/cjs.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeadlineSection.vue?vue&type=style&index=0&id=187bb5da&lang=scss&scoped=true&\";\n export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./HeadlineSection.vue?vue&type=template&id=187bb5da&scoped=true&\"\nimport script from \"./HeadlineSection.vue?vue&type=script&lang=js&\"\nexport * from \"./HeadlineSection.vue?vue&type=script&lang=js&\"\nimport style0 from \"./HeadlineSection.vue?vue&type=style&index=0&id=187bb5da&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"187bb5da\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('HeaderBar',{attrs:{\"account-property\":_vm.accountProperty,\"label-for\":\"headline\",\"scope\":_vm.primaryHeadline.scope},on:{\"update:scope\":function($event){return _vm.$set(_vm.primaryHeadline, \"scope\", $event)}}}),_vm._v(\" \"),_c('Headline',{attrs:{\"headline\":_vm.primaryHeadline.value,\"scope\":_vm.primaryHeadline.scope},on:{\"update:headline\":function($event){return _vm.$set(_vm.primaryHeadline, \"value\", $event)},\"update:scope\":function($event){return _vm.$set(_vm.primaryHeadline, \"scope\", $event)}}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n