upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-22 14:50:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 53

Merge pull request #32261 from nextcloud/feat/remove-scss-support

Browse source
This commit is contained in:
John Molakvoæ 2022-05-13 17:28:40 +02:00 committed by GitHub
commit aff37408a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
131 changed files with 17598 additions and 1876 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.github/workflows/node.yml vendored
View file

@ -42,6 +42,9 @@ jobs:
npm ci
npm run build --if-present
- name: Build css
run: npm run sass
- name: Build icons css
run: npm run sass:icons

48
apps/dashboard/css/dashboard.css Normal file
View file

@ -0,0 +1,48 @@
.skip-navigation:not(.skip-content) {
display: none;
}
.skip-navigation.skip-content {
left: 3px;
}
#header {
background: transparent !important;
--color-header: rgba(24, 24, 24, 1);
}
#body-user.dashboard--dark #header {
--color-header: rgba(255, 255, 255, 1);
}
#header:before {
content: " ";
display: block;
position: absolute;
background-image: linear-gradient(180deg, var(--color-header) 0%, transparent 100%);
width: 100%;
height: 70px;
top: 0;
margin-top: -70px;
transition: margin-top var(--animation-slow);
}
#body-user.dashboard--scrolled #header:before {
margin-top: 0;
}
#body-user.theme--highcontrast #header {
background-color: var(--color-header) !important;
}
#body-user.theme--highcontrast #header:before {
display: none;
}
#content {
padding-top: 0 !important;
}
#appmenu li a.active::before,
#appmenu li:hover a::before,
#appmenu li:hover a.active::before,
#appmenu li a:focus::before {
display: none !important;
}
/*# sourceMappingURL=dashboard.css.map */

1
apps/dashboard/css/dashboard.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["dashboard.scss"],"names":[],"mappings":"AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAKF;EACC;;AAEA;EACC;;;AAMH;EACC;;;AAID;AAAA;AAAA;AAAA;EAIC","file":"dashboard.css"}

2
apps/dashboard/src/components/BackgroundSettings.vue
View file

@ -174,7 +174,7 @@ export default {
}
&.active:not(.icon-loading):after {
background-image: var(--icon-checkmark-fff);
background-image: var(--icon-checkmark-white);
background-repeat: no-repeat;
background-position: center;
background-size: 44px;

16
apps/encryption/css/settings-personal.css Normal file
View file

@ -0,0 +1,16 @@
/* Copyright (c) 2013, Sam Tuke, <samtuke@owncloud.com>
This file is licensed under the Affero General Public License version 3 or later.
See the COPYING-README file. */
#encryptAllError,
#encryptAllSuccess,
#recoveryEnabledError,
#recoveryEnabledSuccess {
display: none;
}
/* icons for sidebar */
.nav-icon-basic-encryption-module {
background-image: var(--icon-encryption-dark);
}
/*# sourceMappingURL=settings-personal.css.map */

1
apps/encryption/css/settings-personal.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["settings-personal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIC;;;AAGD;AACA;EACC","file":"settings-personal.css"}

2
apps/encryption/css/settings-personal.scss
View file

@ -12,4 +12,4 @@
/* icons for sidebar */
.nav-icon-basic-encryption-module {
background-image: var(--icon-encryption-dark);
}
}

5
apps/federatedfilesharing/css/settings-admin.css Normal file
View file

@ -0,0 +1,5 @@
#fileSharingSettings h2 {
display: inline-block;
}
/*# sourceMappingURL=settings-admin.css.map */

1
apps/federatedfilesharing/css/settings-admin.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["settings-admin.scss"],"names":[],"mappings":"AAAA;EACC","file":"settings-admin.css"}

107
apps/federatedfilesharing/css/settings-personal.css Normal file
View file

@ -0,0 +1,107 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
#fileSharingSettings h2 {
display: inline-block;
}
#fileSharingSettings img {
cursor: pointer;
}
#fileSharingSettings xmp {
margin-top: 0;
white-space: pre-wrap;
}
#fileSharingSettings .icon {
background-size: 16px 16px;
display: inline-block;
position: relative;
top: 3px;
margin-left: 5px;
}
[class^=social-], [class*=" social-"] {
background-repeat: no-repeat;
background-position: 8px;
min-width: 16px;
min-height: 16px;
padding-left: 28px;
background-size: 16px;
}
.social-diaspora {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-social-diaspora-dark);
}
.social-twitter {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-social-twitter-dark);
}
.social-facebook {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-social-facebook-dark);
}
.social_sharing_buttons {
padding-left: 30px !important;
}
/*# sourceMappingURL=settings-personal.css.map */

1
apps/federatedfilesharing/css/settings-personal.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","../../../core/css/functions.scss","settings-personal.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AD8BC;EAEA;;;AC7BD;AD2BC;EAEA;;;AC1BD;ADwBC;EAEA;;;ACtBD;EACC","file":"settings-personal.css"}

9
apps/federatedfilesharing/css/settings-personal.scss
View file

@ -1,3 +1,6 @@
@use 'variables';
@import 'functions';
#fileSharingSettings h2 {
display: inline-block;
}
@ -29,13 +32,13 @@
}
.social-diaspora {
@include icon-color('social-diaspora', 'federatedfilesharing', $color-black);
@include icon-color('social-diaspora', 'federatedfilesharing', variables.$color-black);
}
.social-twitter {
@include icon-color('social-twitter', 'federatedfilesharing', $color-black);
@include icon-color('social-twitter', 'federatedfilesharing', variables.$color-black);
}
.social-facebook {
@include icon-color('social-facebook', 'federatedfilesharing', $color-black);
@include icon-color('social-facebook', 'federatedfilesharing', variables.$color-black);
}
.social_sharing_buttons {

133
apps/files/css/detailsView.css Normal file
View file

@ -0,0 +1,133 @@
.app-sidebar .detailFileInfoContainer {
min-height: 50px;
padding: 15px;
}
.app-sidebar .detailFileInfoContainer > div {
clear: both;
}
.app-sidebar .mainFileInfoView .icon {
display: inline-block;
background-size: 16px 16px;
}
.app-sidebar .mainFileInfoView .permalink {
padding: 6px 10px;
vertical-align: top;
opacity: 0.6;
}
.app-sidebar .mainFileInfoView .permalink:hover, .app-sidebar .mainFileInfoView .permalink:focus {
opacity: 1;
}
.app-sidebar .mainFileInfoView .permalink-field > input {
clear: both;
width: 90%;
}
.app-sidebar .thumbnailContainer.large {
margin-left: -15px;
margin-right: -35px;
/* 15 + 20 for the close button */
margin-top: -15px;
}
.app-sidebar .thumbnailContainer.large.portrait {
margin: 0;
/* if we don't fit the image anyway we give it back the margin */
}
.app-sidebar .large .thumbnail {
width: 100%;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
float: none;
margin: 0;
height: auto;
}
.app-sidebar .large .thumbnail .stretcher {
content: "";
display: block;
padding-bottom: 56.25%;
/* sets height of .thumbnail to 9/16 of the width */
}
.app-sidebar .large.portrait .thumbnail {
background-position: 50% top;
}
.app-sidebar .large.portrait .thumbnail {
background-size: contain;
}
.app-sidebar .large.text {
overflow-y: scroll;
overflow-x: hidden;
padding-top: 14px;
font-size: 80%;
margin-left: 0;
}
.app-sidebar .thumbnail {
width: 100%;
min-height: 75px;
display: inline-block;
float: left;
margin-right: 10px;
background-size: contain;
background-repeat: no-repeat;
}
.app-sidebar .ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.app-sidebar .fileName {
font-size: 16px;
padding-top: 13px;
padding-bottom: 3px;
}
.app-sidebar .fileName h3 {
width: calc(100% - 42px);
/* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
display: inline-block;
padding: 5px 0;
margin: -5px 0;
}
.app-sidebar .file-details {
color: var(--color-text-maxcontrast);
}
.app-sidebar .action-favorite {
vertical-align: sub;
padding: 10px;
margin: -10px;
}
.app-sidebar .action-favorite > span {
opacity: 0.7 !important;
}
.app-sidebar .detailList {
float: left;
}
.app-sidebar .close {
position: absolute;
top: 0;
right: 0;
opacity: 0.5;
z-index: 1;
width: 44px;
height: 44px;
}
/*# sourceMappingURL=detailsView.css.map */

1
apps/files/css/detailsView.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["detailsView.scss"],"names":[],"mappings":"AAAA;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EAEC;;;AAGF;EACC;EACA;;;AAGD;EACC;EACA;AAAqB;EACrB;;;AAGD;EACC;AAAW;;;AAGZ;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;AAAwB;;;AAGzB;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;AAA0B;EAC1B;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA","file":"detailsView.css"}

1297
apps/files/css/files.css Normal file
View file

File diff suppressed because it is too large Load diff

1
apps/files/css/files.css.map Normal file
View file

File diff suppressed because one or more lines are too long

29
apps/files/css/files.scss
View file

@ -5,6 +5,8 @@
* This file is licensed under the Affero General Public License version 3 or later.
* See the COPYING-README file.
*/
@use 'variables';
@import 'functions';
/* FILE MENU */
.actions {
@ -66,9 +68,8 @@
thead {
position: -webkit-sticky;
position: sticky;
@include position('sticky');
// header + breadcrumbs
top: $header-height;
top: variables.$header-height;
// under breadcrumbs, over file list
z-index: 60;
display: block;
@ -127,37 +128,37 @@
/* icons for sidebar */
.nav-icon-files {
@include icon-color('folder', 'files', $color-black);
@include icon-color('folder', 'files', variables.$color-black);
}
.nav-icon-recent {
@include icon-color('recent', 'files', $color-black);
@include icon-color('recent', 'files', variables.$color-black);
}
.nav-icon-favorites {
@include icon-color('starred', 'actions', $color-black, 2, true);
@include icon-color('starred', 'actions', variables.$color-black, 2, true);
}
.nav-icon-sharingin,
.nav-icon-sharingout,
.nav-icon-pendingshares,
.nav-icon-shareoverview {
@include icon-color('share', 'files', $color-black);
@include icon-color('share', 'files', variables.$color-black);
}
.nav-icon-sharinglinks {
@include icon-color('public', 'files', $color-black);
@include icon-color('public', 'files', variables.$color-black);
}
.nav-icon-extstoragemounts {
@include icon-color('external', 'files', $color-black);
@include icon-color('external', 'files', variables.$color-black);
}
.nav-icon-trashbin {
@include icon-color('delete', 'files', $color-black);
@include icon-color('delete', 'files', variables.$color-black);
}
.nav-icon-trashbin-starred {
@include icon-color('delete', 'files', #ff0000);
}
.nav-icon-deletedshares {
@include icon-color('unshare', 'files', $color-black);
@include icon-color('unshare', 'files', variables.$color-black);
}
.nav-icon-favorites-starred {
@include icon-color('starred', 'actions', $color-yellow, 2, true);
@include icon-color('starred', 'actions', variables.$color-yellow, 2, true);
}
#app-navigation .nav-files a.nav-icon-files {
@ -823,7 +824,7 @@ table.dragshadow td.size {
background-image: none;
}
& .icon-starred {
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
@include icon-color('star-dark', 'actions', variables.$color-yellow, 1, true);
}
}
@ -846,10 +847,10 @@ table.dragshadow td.size {
.breadcrumb .canDrop > a,
#filestable tbody tr.canDrop {
background-color: rgba( $color-primary, .3 );
background-color: rgba( variables.$color-primary, .3 );
}
.dropzone-background {
background-color: rgba( $color-primary, .3 );
background-color: rgba( variables.$color-primary, .3 );
:hover{
box-shadow: none !important;
}

1831
apps/files/css/merged.css Normal file
View file

File diff suppressed because it is too large Load diff

1
apps/files/css/merged.css.map Normal file
View file

File diff suppressed because one or more lines are too long

112
apps/files/css/mobile.css Normal file
View file

@ -0,0 +1,112 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/* 938 = table min-width(688) + app-navigation width: 250\
$breakpoint-mobile +1 = size where app-navigation is hidden +1
688 = table min-width */
@media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px) {
.app-files #app-content.dir-drop {
background-color: rgb(255, 255, 255) !important;
}
table th#headerSize,
table td.filesize,
table th#headerDate,
table td.date {
display: none;
}
/* remove padding to let border bottom fill the whole width*/
table td {
padding: 0;
}
/* remove shift for multiselect bar to account for missing navigation */
table.multiselect thead {
padding-left: 0;
}
#fileList a.action.action-menu img {
padding-left: 0;
}
#fileList .fileActionsMenu {
margin-right: 6px;
}
/* hide text of the share action on mobile */
/* .hidden-visually for accessbility */
#fileList a.action-share span:not(.icon):not(.avatar) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* proper notification area for multi line messages */
#notification-container {
display: flex;
}
/* shorten elements for mobile */
#uploadprogressbar, #uploadprogressbar .label.inner {
width: 50px;
}
/* hide desktop-only parts */
#uploadprogressbar .desktop {
display: none !important;
}
#uploadprogressbar .mobile {
display: block !important;
}
/* ensure that it is visible over #app-content */
table.dragshadow {
z-index: 1000;
}
}
@media only screen and (max-width: 480px) {
/* Only show icons */
table th .selectedActions {
float: right;
}
table th .selectedActions > a span:not(.icon) {
display: none;
}
/* Increase touch area for the icons */
table th .selectedActions a {
padding: 17px 14px;
}
/* Remove the margin to reduce the overlap between the name and the icons */
table.multiselect th .columntitle.name {
margin-left: 0;
}
}
/*# sourceMappingURL=mobile.css.map */

1
apps/files/css/mobile.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAAA;AAAA;AAIA;EAEA;IACC;;;EAGD;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;;;EAGD;IACC;;;EAGD;IACC;;;AAED;AACA;EACA;IACC;IACA;IACA;IACA;IACA;IACA;;;AAID;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAID;AACC;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC","file":"mobile.css"}

4
apps/files/css/mobile.scss
View file

@ -1,8 +1,10 @@
@use 'variables';
/* 938 = table min-width(688) + app-navigation width: 250\
$breakpoint-mobile +1 = size where app-navigation is hidden +1
688 = table min-width */
$min-table-width: 688px;
@media only screen and (max-width: $min-table-width + $navigation-width) and (min-width: $breakpoint-mobile + 1), only screen and (max-width: $min-table-width) {
@media only screen and (max-width: $min-table-width + variables.$navigation-width) and (min-width: variables.$breakpoint-mobile + 1), only screen and (max-width: $min-table-width) {
.app-files #app-content.dir-drop{
background-color: rgba(255, 255, 255, 1)!important;

264
apps/files/css/upload.css Normal file
View file

@ -0,0 +1,264 @@
#upload {
box-sizing: border-box;
height: 36px;
width: 39px;
padding: 0 !important;
/* override default control bar button padding */
margin-left: 3px;
overflow: hidden;
vertical-align: top;
position: relative;
z-index: -20;
}
#upload .icon-upload {
position: relative;
display: block;
width: 100%;
height: 44px;
width: 44px;
margin: -5px -3px;
cursor: pointer;
z-index: 10;
opacity: 0.65;
}
.file_upload_target {
display: none;
}
.file_upload_form {
display: inline;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
overflow: visible;
}
#uploadprogresswrapper, #uploadprogresswrapper * {
box-sizing: border-box;
}
#uploadprogresswrapper {
display: inline-block;
vertical-align: top;
height: 36px;
margin-left: 3px;
}
#uploadprogresswrapper > input[type=button] {
height: 36px;
margin-left: 3px;
}
#uploadprogressbar {
border-color: var(--color-border-dark);
border-radius: 18px 0 0 18px;
border-right: 0;
position: relative;
float: left;
width: 200px;
height: 36px;
display: inline-block;
text-align: center;
}
#uploadprogressbar .ui-progressbar-value {
margin: 0;
}
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
height: calc(100% + 2px);
top: -1px;
left: -1px;
position: absolute;
overflow: hidden;
background-color: var(--color-primary);
}
#uploadprogressbar .label {
top: 8px;
opacity: 1;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
}
#uploadprogressbar .label.inner {
color: var(--color-primary-text);
position: absolute;
display: block;
width: 200px;
}
#uploadprogressbar .label.outer {
position: relative;
color: var(--color-main-text);
}
#uploadprogressbar .desktop {
display: block;
}
#uploadprogressbar .mobile {
display: none;
}
#uploadprogressbar + .stop {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.oc-dialog .fileexists {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: 30px;
}
.oc-dialog .fileexists .conflict .filename,
.oc-dialog .fileexists .conflict .mtime,
.oc-dialog .fileexists .conflict .size {
-webkit-touch-callout: initial;
-webkit-user-select: initial;
-khtml-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
}
.oc-dialog .fileexists .conflict .message {
color: #e9322d;
}
.oc-dialog .fileexists table {
width: 100%;
}
.oc-dialog .fileexists th {
padding-left: 0;
padding-right: 0;
}
.oc-dialog .fileexists th input[type=checkbox] {
margin-right: 3px;
}
.oc-dialog .fileexists th:first-child {
width: 225px;
}
.oc-dialog .fileexists th label {
font-weight: normal;
color: var(--color-main-text);
}
.oc-dialog .fileexists th .count {
margin-left: 3px;
}
.oc-dialog .fileexists .conflicts .template {
display: none;
}
.oc-dialog .fileexists .conflict {
width: 100%;
height: 85px;
}
.oc-dialog .fileexists .conflict .filename {
color: #777;
word-break: break-all;
clear: left;
}
.oc-dialog .fileexists .icon {
width: 64px;
height: 64px;
margin: 0px 5px 5px 5px;
background-repeat: no-repeat;
background-size: 64px 64px;
float: left;
}
.oc-dialog .fileexists .original,
.oc-dialog .fileexists .replacement {
float: left;
width: 225px;
}
.oc-dialog .fileexists .conflicts {
overflow-y: auto;
max-height: 225px;
}
.oc-dialog .fileexists .conflict input[type=checkbox] {
float: left;
}
.oc-dialog .fileexists #allfileslabel {
float: right;
}
.oc-dialog .fileexists #allfiles {
vertical-align: bottom;
position: relative;
top: -3px;
}
.oc-dialog .fileexists #allfiles + span {
vertical-align: bottom;
}
.oc-dialog .oc-dialog-buttonrow {
width: 100%;
text-align: right;
}
.oc-dialog .oc-dialog-buttonrow .cancel {
float: left;
}
.highlightUploaded {
-webkit-animation: highlightAnimation 2s 1;
-moz-animation: highlightAnimation 2s 1;
-o-animation: highlightAnimation 2s 1;
animation: highlightAnimation 2s 1;
}
@-webkit-keyframes highlightAnimation {
0% {
background-color: rgb(255, 255, 140);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}
@-moz-keyframes highlightAnimation {
0% {
background-color: rgb(255, 255, 140);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}
@-o-keyframes highlightAnimation {
0% {
background-color: rgb(255, 255, 140);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes highlightAnimation {
0% {
background-color: rgb(255, 255, 140);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}
/*# sourceMappingURL=upload.css.map */

1
apps/files/css/upload.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["upload.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;AAAuB;EACvB;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EAAsB;;;AACtB;EAAoB;EAAgB;EAAY;EAAU;EAAW;EAAgB;;;AAErF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO;;;AAET;EACE;IAAK;;EACL;IAAO","file":"upload.css"}

177
apps/files_external/css/settings.css Normal file
View file

@ -0,0 +1,177 @@
#files_external {
margin-bottom: 0px;
}
#externalStorage {
margin: 15px 0 20px 0;
}
#externalStorage tr.externalStorageLoading > td {
text-align: center;
}
#externalStorage td > input, #externalStorage td > select {
width: 100%;
}
#externalStorage td.status {
/* overwrite conflicting core styles */
display: table-cell;
vertical-align: middle;
}
#externalStorage td.status > span {
display: inline-block;
height: 28px;
width: 28px;
vertical-align: text-bottom;
border-radius: 50%;
cursor: pointer;
}
#externalStorage td.mountPoint, #externalStorage td.backend, #externalStorage td.authentication, #externalStorage td.configuration {
min-width: 160px;
width: 15%;
}
#externalStorage td > img {
padding-top: 7px;
opacity: 0.5;
}
#externalStorage td > img:hover {
padding-top: 7px;
cursor: pointer;
opacity: 1;
}
#addMountPoint > td {
border: none;
}
#addMountPoint > td.applicable {
visibility: hidden;
}
#addMountPoint > td.hidden {
visibility: hidden;
}
#externalStorage td {
height: 50px;
}
#externalStorage td.mountOptionsToggle, #externalStorage td.remove, #externalStorage td.save {
position: relative;
padding: 0 !important;
width: 44px;
}
#externalStorage td.mountOptionsToggle [class^=icon-],
#externalStorage td.mountOptionsToggle [class*=" icon-"], #externalStorage td.remove [class^=icon-],
#externalStorage td.remove [class*=" icon-"], #externalStorage td.save [class^=icon-],
#externalStorage td.save [class*=" icon-"] {
opacity: 0.5;
padding: 14px;
vertical-align: text-bottom;
cursor: pointer;
}
#externalStorage td.mountOptionsToggle [class^=icon-]:hover,
#externalStorage td.mountOptionsToggle [class*=" icon-"]:hover, #externalStorage td.remove [class^=icon-]:hover,
#externalStorage td.remove [class*=" icon-"]:hover, #externalStorage td.save [class^=icon-]:hover,
#externalStorage td.save [class*=" icon-"]:hover {
opacity: 1;
}
#selectBackend {
margin-left: -10px;
width: 150px;
}
#externalStorage td.configuration,
#externalStorage td.backend {
white-space: normal;
}
#externalStorage td.configuration > * {
white-space: nowrap;
}
#externalStorage td.configuration input.added {
margin-right: 6px;
}
#externalStorage label > input[type=checkbox] {
margin-right: 3px;
}
#externalStorage td.configuration label {
width: 100%;
display: inline-flex;
align-items: center;
}
#externalStorage td.configuration input.disabled-success {
background-color: rgba(134, 255, 110, 0.9);
}
#externalStorage td.applicable div.chzn-container {
position: relative;
top: 3px;
}
#externalStorage .select2-container.applicableUsers {
width: 100% !important;
}
#userMountingBackends {
padding-left: 25px;
}
.files-external-select2 .select2-results .select2-result-label {
height: 32px;
padding: 3px;
}
.files-external-select2 .select2-results .select2-result-label > span {
display: block;
position: relative;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv {
display: inline-block;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
position: absolute;
top: 5px;
margin-left: 10px;
}
.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type=group] + span {
vertical-align: top;
top: 6px;
position: absolute;
max-width: 80%;
left: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#externalStorage .select2-container .select2-search-choice {
display: flex;
}
#externalStorage .select2-container .select2-search-choice .select2-search-choice-close {
display: block;
left: auto;
position: relative;
width: 20px;
}
#externalStorage .mountOptionsToggle .dropdown {
width: auto;
}
.nav-icon-external-storage {
background-image: var(--icon-external-dark);
}
/*# sourceMappingURL=settings.css.map */

1
apps/files_external/css/settings.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;AAEA;EACC;;;AAKD;EACC;;;AAIF;AACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACC;EACA;;;AAGF;EAA0B;EAAiB;;;AAC3C;EAAgC;EAAiB;EAAgB;;;AACjE;EAAoB;;;AACpB;EAA+B;;;AAC/B;EAA2B;;;AAE3B;EACC;;AACA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;;;AAMJ;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;;;AAIF;EACC;;;AAGD;EACC","file":"settings.css"}

94
apps/files_sharing/css/icons.css Normal file
View file

@ -0,0 +1,94 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
*
* @author John Molakvoæ <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
.icon-room {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-app-dark);
}
.icon-circle {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-circles-dark);
}
.icon-guests {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-app-dark);
}
/*# sourceMappingURL=icons.css.map */

1
apps/files_sharing/css/icons.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","icons.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADzBA;ACsCC;EAEA;;;ADrCD;ACmCC;EAEA;;;ADlCD;ACgCC;EAEA","file":"icons.css"}

8
apps/files_sharing/css/icons.scss
View file

@ -19,14 +19,16 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@use 'variables';
@import 'functions';
// This is the icons used in the sharing ui (multiselect)
.icon-room {
@include icon-color('app', 'spreed', $color-black);
@include icon-color('app', 'spreed', variables.$color-black);
}
.icon-circle {
@include icon-color('circles', 'circles', $color-black, 3, false);
@include icon-color('circles', 'circles', variables.$color-black, 3, false);
}
.icon-guests {
@include icon-color('app', 'guests', $color-black);
@include icon-color('app', 'guests', variables.$color-black);
}

86
apps/files_sharing/css/mobile.css Normal file
View file

@ -0,0 +1,86 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@media only screen and (max-width: 1024px) {
/* make header scroll up for single shares, more view of content on small screens */
#header.share-file {
position: absolute !important;
}
/* hide size and date columns */
table th#headerSize,
table td.filesize,
table th#headerDate,
table td.date {
display: none;
}
/* restrict length of displayed filename to prevent overflow */
table td.filename .nametext {
max-width: 75% !important;
}
/* on mobile, show single shared image at full width without margin */
#imgframe {
width: 100%;
padding: 0;
margin-bottom: 35px;
}
/* some margin for the file type icon */
#imgframe .publicpreview {
margin-top: 32px;
}
/* some padding for better clickability */
#fileList a.action img {
padding: 0 6px 0 12px;
}
/* hide text of the actions on mobile */
#fileList a.action:not(.menuitem) span {
display: none;
}
/* ellipsis on file names */
.nametext {
width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#header .menutoggle {
padding-right: 14px;
background-position: center;
}
.note {
padding: 0 20px;
}
#emptycontent {
margin-top: 10vh;
}
}
/*# sourceMappingURL=mobile.css.map */

1
apps/files_sharing/css/mobile.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"mobile.css"}

4
apps/files_sharing/css/mobile.scss
View file

@ -1,4 +1,6 @@
@media only screen and (max-width: $breakpoint-mobile) {
@use 'variables';
@media only screen and (max-width: variables.$breakpoint-mobile) {
/* make header scroll up for single shares, more view of content on small screens */
#header.share-file {

237
apps/files_sharing/css/public.css Normal file
View file

@ -0,0 +1,237 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#preview {
text-align: center;
}
#preview .notCreatable {
display: none;
}
#noPreview {
display: none;
padding-top: 80px;
}
#imgframe {
height: 75%;
padding-bottom: 32px;
padding-top: 32px;
width: 80%;
margin: 0 auto;
}
#imgframe img {
max-height: 100% !important;
max-width: 100% !important;
}
#imgframe audio {
display: block;
margin-left: auto;
margin-right: auto;
}
#imgframe .text-preview {
display: inline-block;
position: relative;
text-align: left;
white-space: pre-wrap;
overflow-y: hidden;
height: auto;
min-height: 200px;
max-height: 800px;
}
#imgframe .ellipsis {
font-size: 1.2em;
}
/* fix multiselect bar offset on shared page */
thead {
left: 0 !important;
}
#data-upload-form {
position: relative;
right: 0;
height: 32px;
overflow: hidden;
padding: 0;
float: right;
display: inline;
margin: 0;
}
/* keep long file names in one line to not overflow download button on mobile */
.directDownload #downloadFile {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
}
.download-size {
opacity: 0.5;
}
/* header buttons */
#details {
display: inline-flex;
}
#details button,
#details input,
#details .button {
margin: 0 5px;
line-height: normal;
}
#details button:hover,
#details input:hover,
#details .button:hover {
/* No */
border-color: rgba(0, 0, 0, 0.3) !important;
}
#public-upload .avatardiv {
margin: 0 auto;
}
#emptycontent.has-note {
margin-top: 5vh;
}
#public-upload #emptycontent h2 {
margin: 10px 0 5px 0;
}
#public-upload #emptycontent h2 + p {
margin-bottom: 30px;
}
#public-upload #emptycontent .icon-folder {
height: 16px;
width: 16px;
background-size: 16px;
display: inline-block;
vertical-align: text-top;
margin-bottom: 0;
margin-right: 5px;
opacity: 1;
}
#public-upload #emptycontent #displayavatar .icon-folder {
height: 48px;
width: 48px;
background-size: 48px;
}
#public-upload #emptycontent .button {
display: inline-block;
height: auto;
width: auto;
background-size: 16px;
background-position: 16px;
opacity: 0.7;
font-size: 20px;
line-height: initial;
margin: 20px;
padding: 10px 20px;
padding-left: 42px;
}
#public-upload #emptycontent ul {
width: 230px;
margin: 5px auto 5vh;
text-align: left;
}
#public-upload #emptycontent li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 0;
}
#public-upload #emptycontent li img {
margin-right: 5px;
position: relative;
top: 2px;
}
#drop-upload-progress-indicator span.icon-loading-small {
padding-left: 18px;
margin-right: 7px;
}
#drop-uploaded-files li #drop-upload-name {
float: left;
max-width: 180px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#drop-uploaded-files li #drop-upload-status {
float: right;
}
.disclaimer,
.note {
margin: 0 auto 30px;
max-width: 400px;
text-align: left;
}
#note-content {
padding: 5px;
display: inline-block;
width: 350px;
}
#note-content .content {
overflow: auto;
max-height: 200px;
}
#show-terms-dialog {
cursor: pointer;
font-weight: bold;
}
@media only screen and (min-width: 1025px) {
#body-public .header-right #header-actions-menu > ul > li#download {
display: none;
}
}
@media only screen and (max-width: 1024px) {
#body-public .header-right #header-primary-action {
display: none;
}
}
/*# sourceMappingURL=public.css.map */

1
apps/files_sharing/css/public.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC","file":"public.css"}

6
apps/files_sharing/css/public.scss
View file

@ -1,3 +1,5 @@
@use 'variables';
#preview {
text-align: center;
}
@ -204,7 +206,7 @@ thead {
// hide the download entry on the menu
// on public share when NOT on mobile
@media only screen and (min-width: $breakpoint-mobile + 1) {
@media only screen and (min-width: variables.$breakpoint-mobile + 1) {
#body-public {
.header-right {
#header-actions-menu {
@ -217,7 +219,7 @@ thead {
}
// hide the primary on public share on mobile
@media only screen and (max-width: $breakpoint-mobile) {
@media only screen and (max-width: variables.$breakpoint-mobile) {
#body-public {
.header-right {
#header-primary-action {

320
apps/files_sharing/css/publicView.css Normal file
View file

@ -0,0 +1,320 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#preview {
text-align: center;
}
#preview .notCreatable {
display: none;
}
#noPreview {
display: none;
padding-top: 80px;
}
#imgframe {
height: 75%;
padding-bottom: 32px;
padding-top: 32px;
width: 80%;
margin: 0 auto;
}
#imgframe img {
max-height: 100% !important;
max-width: 100% !important;
}
#imgframe audio {
display: block;
margin-left: auto;
margin-right: auto;
}
#imgframe .text-preview {
display: inline-block;
position: relative;
text-align: left;
white-space: pre-wrap;
overflow-y: hidden;
height: auto;
min-height: 200px;
max-height: 800px;
}
#imgframe .ellipsis {
font-size: 1.2em;
}
/* fix multiselect bar offset on shared page */
thead {
left: 0 !important;
}
#data-upload-form {
position: relative;
right: 0;
height: 32px;
overflow: hidden;
padding: 0;
float: right;
display: inline;
margin: 0;
}
/* keep long file names in one line to not overflow download button on mobile */
.directDownload #downloadFile {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
}
.download-size {
opacity: 0.5;
}
/* header buttons */
#details {
display: inline-flex;
}
#details button,
#details input,
#details .button {
margin: 0 5px;
line-height: normal;
}
#details button:hover,
#details input:hover,
#details .button:hover {
/* No */
border-color: rgba(0, 0, 0, 0.3) !important;
}
#public-upload .avatardiv {
margin: 0 auto;
}
#emptycontent.has-note {
margin-top: 5vh;
}
#public-upload #emptycontent h2 {
margin: 10px 0 5px 0;
}
#public-upload #emptycontent h2 + p {
margin-bottom: 30px;
}
#public-upload #emptycontent .icon-folder {
height: 16px;
width: 16px;
background-size: 16px;
display: inline-block;
vertical-align: text-top;
margin-bottom: 0;
margin-right: 5px;
opacity: 1;
}
#public-upload #emptycontent #displayavatar .icon-folder {
height: 48px;
width: 48px;
background-size: 48px;
}
#public-upload #emptycontent .button {
display: inline-block;
height: auto;
width: auto;
background-size: 16px;
background-position: 16px;
opacity: 0.7;
font-size: 20px;
line-height: initial;
margin: 20px;
padding: 10px 20px;
padding-left: 42px;
}
#public-upload #emptycontent ul {
width: 230px;
margin: 5px auto 5vh;
text-align: left;
}
#public-upload #emptycontent li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 0;
}
#public-upload #emptycontent li img {
margin-right: 5px;
position: relative;
top: 2px;
}
#drop-upload-progress-indicator span.icon-loading-small {
padding-left: 18px;
margin-right: 7px;
}
#drop-uploaded-files li #drop-upload-name {
float: left;
max-width: 180px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#drop-uploaded-files li #drop-upload-status {
float: right;
}
.disclaimer,
.note {
margin: 0 auto 30px;
max-width: 400px;
text-align: left;
}
#note-content {
padding: 5px;
display: inline-block;
width: 350px;
}
#note-content .content {
overflow: auto;
max-height: 200px;
}
#show-terms-dialog {
cursor: pointer;
font-weight: bold;
}
@media only screen and (min-width: 1025px) {
#body-public .header-right #header-actions-menu > ul > li#download {
display: none;
}
}
@media only screen and (max-width: 1024px) {
#body-public .header-right #header-primary-action {
display: none;
}
}
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@media only screen and (max-width: 1024px) {
/* make header scroll up for single shares, more view of content on small screens */
#header.share-file {
position: absolute !important;
}
/* hide size and date columns */
table th#headerSize,
table td.filesize,
table th#headerDate,
table td.date {
display: none;
}
/* restrict length of displayed filename to prevent overflow */
table td.filename .nametext {
max-width: 75% !important;
}
/* on mobile, show single shared image at full width without margin */
#imgframe {
width: 100%;
padding: 0;
margin-bottom: 35px;
}
/* some margin for the file type icon */
#imgframe .publicpreview {
margin-top: 32px;
}
/* some padding for better clickability */
#fileList a.action img {
padding: 0 6px 0 12px;
}
/* hide text of the actions on mobile */
#fileList a.action:not(.menuitem) span {
display: none;
}
/* ellipsis on file names */
.nametext {
width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#header .menutoggle {
padding-right: 14px;
background-position: center;
}
.note {
padding: 0 20px;
}
#emptycontent {
margin-top: 10vh;
}
}
/*# sourceMappingURL=publicView.css.map */

1
apps/files_sharing/css/publicView.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC;;;ADjOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AEEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"publicView.css"}

2
apps/files_sharing/src/components/SharingInput.vue
View file

@ -528,7 +528,7 @@ export default {
.multiselect__option {
span[lookup] {
.avatardiv {
background-image: var(--icon-search-fff);
background-image: var(--icon-search-white);
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-text-maxcontrast) !important;

1598
apps/settings/css/settings.css Normal file
View file

File diff suppressed because it is too large Load diff

1
apps/settings/css/settings.css.map Normal file
View file

File diff suppressed because one or more lines are too long

16
apps/settings/css/settings.scss
View file

@ -1,6 +1,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. */
@use 'variables';
@import 'functions';
input {
&#openid, &#webdav {
@ -15,23 +17,23 @@ input {
/* icons for sidebar */
.nav-icon-personal-settings {
@include icon-color('personal', 'settings', $color-black);
@include icon-color('personal', 'settings', variables.$color-black);
}
.nav-icon-security {
@include icon-color('toggle-filelist', 'settings', $color-black);
@include icon-color('toggle-filelist', 'settings', variables.$color-black);
}
.nav-icon-clientsbox {
@include icon-color('change', 'settings', $color-black);
@include icon-color('change', 'settings', variables.$color-black);
}
.nav-icon-federated-cloud {
@include icon-color('share', 'settings', $color-black);
@include icon-color('share', 'settings', variables.$color-black);
}
.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
@include icon-color('password', 'settings', $color-black);
@include icon-color('password', 'settings', variables.$color-black);
}
#avatarform {
@ -916,7 +918,7 @@ span.version {
}
}
@media only screen and (max-width: $breakpoint-mobile) {
@media only screen and (max-width: variables.$breakpoint-mobile) {
.store .section {
width: 50%;
}
@ -1572,7 +1574,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
align-self: normal;
background-color: var(--color-main-background);
z-index: 100; /* above multiselect */
top: $header-height;
top: variables.$header-height;
&.sticky {
box-shadow: 0 -2px 10px 1px var(--color-box-shadow);

2
apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
View file

@ -152,7 +152,7 @@ export default {
color: var(--color-main-text);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius);
background: var(--icon-triangle-s-000) no-repeat right 4px center;
background: var(--icon-triangle-s-dark) no-repeat right 4px center;
font-family: var(--font-face);
appearance: none;
cursor: pointer;

2
apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
View file

@ -162,7 +162,7 @@ export default {
height: 70px;
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
background-color: var(--color-primary);
background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
background-image: var(--gradient-primary-background);
span {
bottom: 0;

3
apps/theming/css/default.css
View file

@ -13,12 +13,13 @@
--color-primary-hover: #329bd3;
--color-primary-light: #e5f2f9;
--color-primary-light-text: #0082c9;
--color-primary-light-hover: #1e2b32;
--color-primary-light-hover: #dbe7ee;
--color-primary-text-dark: #ededed;
--color-primary-element: #0082c9;
--color-primary-element-hover: #198ece;
--color-primary-element-light: #17adff;
--color-primary-element-lighter: #d8ecf6;
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
--color-main-text: #222222;
--color-text-maxcontrast: #767676;
--color-text-light: #222222;

132
apps/theming/css/settings-admin.css Normal file
View file

@ -0,0 +1,132 @@
#theming input {
width: 230px;
}
#theming input:focus,
#theming input:active {
padding-right: 30px;
}
#theming .fileupload {
display: none;
}
#theming div > label {
position: relative;
}
#theming .theme-undo {
position: absolute;
top: -7px;
right: 4px;
cursor: pointer;
opacity: 0.3;
padding: 7px;
vertical-align: top;
display: inline-block;
visibility: hidden;
height: 32px;
width: 32px;
}
#theming form.uploadButton {
width: 411px;
}
#theming form .theme-undo,
#theming .theme-remove-bg {
cursor: pointer;
opacity: 0.3;
padding: 7px;
vertical-align: top;
display: inline-block;
float: right;
position: relative;
top: 4px;
right: 0px;
visibility: visible;
height: 32px;
width: 32px;
}
#theming input[type=text]:hover + .theme-undo,
#theming input[type=text] + .theme-undo:hover,
#theming input[type=text]:focus + .theme-undo,
#theming input[type=text]:active + .theme-undo,
#theming input[type=url]:hover + .theme-undo,
#theming input[type=url] + .theme-undo:hover,
#theming input[type=url]:focus + .theme-undo,
#theming input[type=url]:active + .theme-undo {
visibility: visible;
}
#theming label span {
display: inline-block;
min-width: 175px;
padding: 8px 0px;
vertical-align: top;
}
#theming .icon-upload,
#theming .uploadButton .icon-loading-small {
padding: 8px 20px;
width: 20px;
margin: 2px 0px;
min-height: 32px;
display: inline-block;
}
#theming #theming_settings_status {
height: 26px;
margin: 10px;
}
#theming #theming_settings_loading {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
#theming #theming_settings_msg {
vertical-align: middle;
border-radius: 3px;
}
#theming #theming-preview {
width: 230px;
height: 140px;
background-size: cover;
background-position: center center;
text-align: center;
margin-left: 178px;
margin-top: 10px;
margin-bottom: 20px;
cursor: pointer;
background-color: var(--color-primary);
background-image: var(--image-background, var(--image-background-plain, url("../../../core/img/background.svg"), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
}
#theming #theming-preview #theming-preview-logo {
cursor: pointer;
width: 20%;
height: 20%;
margin-top: 20px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: var(--image-logo, url("../../../core/img/logo/logo.svg"));
}
#theming .theming-hints {
margin-top: 20px;
}
#theming .image-preview {
display: inline-block;
width: 80px;
height: 36px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#theming #theming-preview-logoheader {
background-image: var(--image-logoheader);
}
#theming #theming-preview-favicon {
background-image: var(--image-favicon);
}
/* transition effects for theming value changes */
#header {
transition: background-color 500ms linear;
}
#header svg, #header img {
transition: 500ms filter linear;
}
/*# sourceMappingURL=settings-admin.css.map */

1
apps/theming/css/settings-admin.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["settings-admin.scss"],"names":[],"mappings":"AACI;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGP;EAEO;;AAGP;EACO;;;AAIR;AACA;EACI;;AACA;EACI","file":"settings-admin.css"}

17
apps/theming/css/theming.css Normal file
View file

@ -0,0 +1,17 @@
/* Error: Undefined variable.
* ,
* 38 | $invert: luma($color-primary) > 0.6;
* | ^^^^^^^^^^^^^^
* '
* apps/theming/css/theming.scss 38:15 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined variable.\a \2577 \a 38 \2502 $invert: luma($color-primary) > 0.6;\a \2502 ^^^^^^^^^^^^^^\a \2575 \a apps/theming/css/theming.scss 38:15 root stylesheet";
}

285
apps/theming/css/theming.scss
View file

@ -1,285 +0,0 @@
/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */
@function luma($c) {
$-local-red: red(rgba($c, 1.0));
$-local-green: green(rgba($c, 1.0));
$-local-blue: blue(rgba($c, 1.0));
@return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
}
@mixin faded-background {
background-color: $color-primary;
@if ($color-primary == #0082C9) {
background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
} @else {
/** This will be overwritten by the faded-background-image mixin if needed */
background-image: none;
}
}
@mixin faded-background-image {
@include faded-background;
background-size: contain;
@if ($color-primary == #0082C9) {
background-image: $image-login-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
}
@if($has-custom-background == true) {
background-size: cover;
background-repeat: no-repeat;
background-image: $image-login-background;
}
}
$has-custom-background: variable_exists('theming-background-mime') and $theming-background-mime != '';
$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
$invert: luma($color-primary) > 0.6;
@if ($has-custom-logo == false) {
@if ($invert) {
$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
} @else {
$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
}
}
@if ($invert) {
// too bright, use dark text to mix the primary
$color-primary-light: mix($color-primary, $color-main-text, 10%);
#appmenu:not(.inverted) svg {
filter: invert(1);
}
#appmenu.inverted svg {
filter: none;
}
.searchbox input[type="search"] {
background-repeat: no-repeat;
background-position: 6px center;
background-color: transparent;
@include icon-color('search', 'actions', $color-black, 1, true);
}
#contactsmenu .icon-contacts {
@include icon-color('contacts', 'places', $color-black, 1, true);
}
#settings .icon-settings-white {
@include icon-color('settings', 'actions', $color-black, 1, true);
}
#appmenu .icon-more-white {
@include icon-color('more', 'actions', $color-black, 1, true);
}
} @else {
#appmenu:not(.inverted) svg {
filter: none;
}
#appmenu.inverted svg {
filter: invert(1);
}
}
/* Colorized svg images */
.icon-file, .icon-filetype-text {
background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster});
}
.icon-folder, .icon-filetype-folder {
background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
}
.icon-filetype-folder-drag-accept {
background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
}
#theming-preview-logo,
#header .logo {
background-image: $image-logo;
}
#body-user,
#body-settings,
#body-public {
#header,
.profile__header,
.preview-card__header {
@include faded-background;
}
}
#body-login,
#firstrunwizard .firstrunwizard-header,
#theming-preview {
@include faded-background-image;
}
/* override styles for login screen in guest.css */
@if ($has-custom-logo) {
// custom logo
#theming-preview-logo,
#header .logo {
background-size: contain;
}
#body-login #header .logo {
margin-bottom: 22px;
}
} @else {
// default logo
@if ($invert) {
#theming-preview-logo,
#header .logo {
opacity: .6;
}
}
}
@if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' {
#theming .advanced-option-logoheader .image-preview,
body:not(#body-login) #header .logo {
background-image: $image-logoheader;
}
} @else {
#theming .advanced-option-favicon .image-preview {
background-image: none;
}
}
input.primary {
background-color: $color-primary-element;
border: 1px solid $color-primary-text;
color: $color-primary-text;
}
#body-login {
input.primary:enabled:hover,
input.primary:enabled:focus,
button.primary:enabled:hover,
button.primary:enabled:focus,
a.primary:enabled:hover,
a.primary:enabled:focus {
color: $color-primary-text;
background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
}
}
@if ($invert) {
#body-login {
.body-login-container {
background-color: transparentize(nc-lighten($color-primary, 30%), 0.2);
color: $color-primary-text !important;
h2 {
color: $color-primary-text;
}
.icon-search.icon-white {
// CSS variable is not used here since it is on the public page layout,
// where the dark theme doesn't apply at the moment
background-image: url('../../../core/img/actions/search.svg');
}
}
input {
border: 1px solid nc-lighten($color-primary-text, 50%);
}
input.primary,
button.primary {
background-color: $color-primary;
color: $color-primary-text;
}
:not(div.alternative-logins) > a,
label,
footer p,
.alternative-logins legend,
.lost-password-container #lost-password,
.warning, .update, .error {
color: $color-primary-text !important;
}
input[type='checkbox'].checkbox--white + label:before {
border-color: nc-darken($color-primary-element, 40%) !important;
}
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
input[type='checkbox'].checkbox--white:focus + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
}
input[type='checkbox'].checkbox--white:checked + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
background-color: nc-darken($color-primary-element, 30%) !important;
@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
}
#submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}
.two-factor-provider {
&:hover, &:focus {
border-color: $color-primary-text;
}
img {
filter: invert(1);
}
}
}
#body-public #header .icon-more-white {
background-image: var(--icon-more-000);
}
}
// plain background color for login page
@if $image-login-plain == 'true' {
#body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
background-image: none !important;
}
#body-login {
:not(.alternative-logins) a, label, p {
color: $color-primary-text;
}
}
}
/** Handle primary buttons for bright colors */
@if (luma($color-primary) > 0.8) {
:root {
--color-primary-light-text: var(--color-primary-text);
}
select,
button, .button,
input:not([type='range']),
textarea,
div[contenteditable=true],
.pager li a {
&.primary:not(:disabled) {
background-color: var(--color-background-dark);
color: var(--color-main-text);
border-color: var(--color-text-lighter);
&:hover, &:focus, &:active {
background-color: var(--color-background-darker);
color: var(--color-main-text);
border-color: var(--color-text);
}
}
}
}
@if ($color-primary == #ffffff) {
/* show grey border below header */
#body-user #header,
#body-settings #header,
#body-public #header {
border-bottom: 1px solid #ebebeb;
}
/* show triangle in header in grey */
#appmenu li a.active:before,
.header-right #settings #expand:before {
border-bottom-color:#ebebeb;
}
/* show border around quota bar in files app */
.app-files #quota .quota-container {
border: 1px solid #ebebeb;
}
}

7
apps/theming/lib/Themes/DefaultTheme.php
View file

@ -88,6 +88,7 @@ class DefaultTheme implements ITheme {
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
@ -111,15 +112,17 @@ class DefaultTheme implements ITheme {
'--color-primary' => $this->primaryColor,
'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
'--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80),
'--color-primary-light' => $colorPrimaryLight,
'--color-primary-light-text' => $this->primaryColor,
'--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, -80),
'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
// used for buttons, inputs...
'--color-primary-element' => $this->util->elementColor($this->primaryColor),
'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80),
'--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15),
'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70),
// to use like this: background-image: var(--gradient-primary-background);
'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%)',
// max contrast for WCAG compliance
'--color-main-text' => $colorMainText,

2
apps/updatenotification/src/components/UpdateNotification.vue
View file

@ -539,7 +539,7 @@ export default {
/* override needed to replace yellow hover state with a dark one */
#updatenotification .update-menu .icon-star:hover,
#updatenotification .update-menu .icon-star:focus {
background-image: var(--icon-star-000);
background-image: var(--icon-starred);
}
#updatenotification .topMargin {
margin-top: 15px;

101
apps/user_status/css/user-status-menu.css Normal file
View file

@ -0,0 +1,101 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2020 Georg Ehrke
*
* @author Georg Ehrke <oc.list@georgehrke.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
.icon-user-status {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-app-dark);
}
.icon-user-status-online {
background-image: url("../img/user-status-online.svg");
}
.icon-user-status-away {
background-image: url("../img/user-status-away.svg");
}
.icon-user-status-dnd {
background-image: url("../img/user-status-dnd.svg");
}
.icon-user-status-invisible {
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
background-image: var(--icon-user-status-invisible-dark);
}
/*# sourceMappingURL=user-status-menu.css.map */

1
apps/user_status/css/user-status-menu.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;ACsBC;EAEA","file":"user-status-menu.css"}

6
apps/user_status/css/user-status-menu.scss
View file

@ -19,9 +19,11 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@use 'variables';
@import 'functions';
.icon-user-status {
@include icon-color('app', 'user_status', $color-black, 1);
@include icon-color('app', 'user_status', variables.$color-black, 1);
}
.icon-user-status-online {
@ -38,5 +40,5 @@
// TODO: debug why icon-black-white does not work here
.icon-user-status-invisible {
@include icon-color('user-status-invisible', 'user_status', $color-black, 1);
@include icon-color('user-status-invisible', 'user_status', variables.$color-black, 1);
}

2
apps/workflowengine/src/components/Event.vue
View file

@ -111,7 +111,7 @@ export default {
}
.multiselect:not(.multiselect--disabled)::v-deep .multiselect__tags .multiselect__single {
background-image: var(--icon-triangle-s-000);
background-image: var(--icon-triangle-s-dark);
background-repeat: no-repeat;
background-position: right center;
}

9
autotest-js.sh
View file

@ -10,13 +10,4 @@
set -euo pipefail
# create scss test
# We use the deprecated node-sass module for that as the compilation fails with modern modules. See "DEPRECATION WARNING" during execution of this script.
mkdir -p tests/css
for SCSSFILE in core/css/*.scss
do
FILE=$(basename $SCSSFILE)
printf "\$webroot:''; @import 'functions.scss'; @import 'variables.scss'; @import '${FILE}';" | ./node_modules/.bin/node-sass --include-path core/css/ > tests/css/${FILE}.css
done
npm run test:jsunit

54
build/vue-builds.sh
View file

@ -1,54 +0,0 @@
#!/bin/bash
root=$(pwd)
entryFile=$1
if [ ! -f "$entryFile" ]
then
echo "The build file $entryFile does not exists"
exit 2
else
path=$(dirname "$entryFile")
file=$(basename $entryFile)
set -e
cd $path
echo "Entering $path"
# support for multiple chunks
for chunk in *$file; do
# Backup original file
backupFile="$chunk.orig"
echo "Backing up $chunk to $backupFile"
cp $chunk $backupFile
done
# Make the app
echo "Making $file"
cd ../
npm --silent install
npm run --silent build
# Reset
cd $root
cd $path
# support for multiple chunks
for chunk in *$file; do
# Compare build files
echo "Comparing $chunk to the original"
backupFile="$chunk.orig"
if ! diff -q $chunk $backupFile &>/dev/null
then
echo "$chunk build is NOT up-to-date! Please send the proper production build within the pull request"
cat $HOME/.npm/_logs/*.log
exit 2
else
echo "$chunk build is up-to-date"
fi
done
fi

1575
core/css/apps.css Normal file
View file

File diff suppressed because it is too large Load diff

1
core/css/apps.css.map Normal file
View file

File diff suppressed because one or more lines are too long

62
core/css/apps.scss
View file

@ -15,6 +15,9 @@
* @license GNU AGPL version 3 or any later version
*
*/
@use 'variables';
@use 'sass:math';
@import 'functions';
/* BASE STYLING ------------------------------------------------------------ */
// no h1 allowed since h1 = logo
@ -78,16 +81,16 @@ kbd {
/* APP-NAVIGATION ------------------------------------------------------------ */
/* Navigation: folder like structure */
#app-navigation:not(.vue) {
width: $navigation-width;
width: variables.$navigation-width;
position: fixed;
top: $header-height;
top: variables.$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% - #{variables.$header-height});
box-sizing: border-box;
background-color: var(--color-main-background);
-webkit-user-select: none;
@ -378,7 +381,7 @@ kbd {
margin: 0;
padding: 0;
background: none;
@include icon-color('triangle-s', 'actions', $color-black, 1, true);
@include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
@ -394,7 +397,7 @@ kbd {
z-index: 105; // above a, under button
background-color: var(--color-background-hover);
border-radius: 50%;
transition: opacity $animation-quick ease-in-out;
transition: opacity variables.$animation-quick ease-in-out;
}
/* force padding on link no matter if 'a' has an icon class */
@ -442,7 +445,7 @@ kbd {
.app-navigation-entry-utils-menu-button {
/* Prevent bg img override if an icon class is set */
button:not([class^='icon-']):not([class*=' icon-']) {
@include icon-color('more', 'actions', $color-black, 1, true);
@include icon-color('more', 'actions', variables.$color-black, 1, true);
}
&:hover button,
&:focus button {
@ -530,7 +533,7 @@ kbd {
.app-navigation-entry-deleted {
display: inline-flex;
padding-left: 44px;
transform: translateX(#{$navigation-width});
transform: translateX(#{variables.$navigation-width});
.app-navigation-entry-deleted-description {
position: relative;
white-space: nowrap;
@ -592,7 +595,7 @@ kbd {
position: relative;
display: flex;
// padding is included in height
padding-top: $header-height;
padding-top: variables.$header-height;
min-height: 100%;
}
@ -601,10 +604,10 @@ kbd {
/**
* !Important. We are defining the minimum requirement we want for flex
* Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width
* Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width
* -> 468px. In that case we want 200px for the list and 268px for the content
*/
$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
#app-content {
z-index: 1000;
@ -614,7 +617,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
min-height: 100%;
/* margin if navigation element is here */
#app-navigation:not(.hidden) + & {
margin-left: $navigation-width;
margin-left: variables.$navigation-width;
}
/* no top border for first settings item */
> .section:first-child {
@ -648,16 +651,17 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
*/
#app-sidebar {
width: 27vw;
min-width: $sidebar-min-width;
max-width: $sidebar-max-width;
min-width: variables.$sidebar-min-width;
max-width: variables.$sidebar-max-width;
display: block;
@include position('sticky');
top: $header-height;
position: -webkit-sticky;
position: sticky;
top: variables.$header-height;
right:0;
overflow-y: auto;
overflow-x: hidden;
z-index: 1500;
height: calc(100vh - #{$header-height});
height: calc(100vh - #{variables.$header-height});
background: var(--color-main-background);
border-left: 1px solid var(--color-border);
flex-shrink: 0;
@ -727,6 +731,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
width: 100%;
padding: 0;
margin: 0;
background-color: var(--color-main-background);
box-shadow: none;
border: 0;
border-radius: 0;
@ -867,7 +872,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
/* POPOVER MENU ------------------------------------------------------------ */
$popoveritem-height: 44px;
$popovericon-size: 16px;
$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
.ie,
.edge {
@ -977,14 +982,14 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
&[class*=' icon-'] {
min-width: 0; /* Overwrite icons*/
min-height: 0;
background-position: #{($popoveritem-height - $popovericon-size) / 2} center;
background-position: #{math.div($popoveritem-height - $popovericon-size, 2)} center;
background-size: $popovericon-size;
}
span[class^='icon-'],
span[class*=' icon-'] {
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height;
padding: #{math.div($popoveritem-height, 2)} 0 #{math.div($popoveritem-height, 2)} $popoveritem-height;
}
// If no icons set, force left margin to align
&:not([class^='icon-']):not([class*='icon-']) {
@ -998,7 +1003,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
}
&[class^='icon-'],
&[class*=' icon-'] {
padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
padding: 0 #{math.div($popoveritem-height - $popovericon-size, 2)} 0 $popoveritem-height !important;
}
&:hover,
&:focus {
@ -1033,7 +1038,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
* TODO: to remove */
> img {
width: $popovericon-size;
padding: #{($popoveritem-height - $popovericon-size) / 2};
padding: #{math.div($popoveritem-height - $popovericon-size, 2)};
}
/* checkbox/radio fixes */
> input.radio + label,
@ -1126,19 +1131,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
/* CONTENT LIST ------------------------------------------------------------ */
.app-content-list {
@include position('sticky');
top: $header-height;
position: -webkit-sticky;
position: sticky;
top: variables.$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 - #{variables.$header-height});
max-height: calc(100vh - #{variables.$header-height});
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 $list-min-width;
min-width: $list-min-width;
max-width: $list-max-width;
flex: 1 1 variables.$list-min-width;
min-width: variables.$list-min-width;
max-width: variables.$list-max-width;
/* Default item */
.app-content-list-item {

70
core/css/css-variables.scss
View file

@ -1,70 +0,0 @@
// CSS4 Variables
// Remember, you cannot use scss functions with css4 variables
// All css4 variables must be fixed! Scss is a PRE processor
// css4 variables are processed after scss!
:root {
--color-main-text: #{$color-main-text};
--color-main-background: #{$color-main-background};
--color-main-background-translucent: #{$color-main-background-translucent};
// To use like this: background-image: linear-gradient(0, var(--gradient-main-background));
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
--color-background-hover: #{$color-background-hover};
--color-background-dark: #{$color-background-dark};
--color-background-darker: #{$color-background-darker};
--color-placeholder-light: #{$color-placeholder-light};
--color-placeholder-dark: #{$color-placeholder-dark};
--color-primary: #{$color-primary};
--color-primary-hover: #{$color-primary-hover};
--color-primary-light: #{$color-primary-light};
--color-primary-light-hover: #{$color-primary-light-hover};
--color-primary-text: #{$color-primary-text};
--color-primary-light-text: #{$color-primary-light-text};
--color-primary-text-dark: #{$color-primary-text-dark};
--color-primary-element: #{$color-primary-element};
--color-primary-element-hover: #{$color-primary-element-hover};
--color-primary-element-light: #{$color-primary-element-light};
--color-primary-element-lighter: #{$color-primary-element-lighter};
--color-error: #{$color-error};
--color-error-hover: #{$color-error-hover};
--color-warning: #{$color-warning};
--color-warning-hover: #{$color-warning-hover};
--color-success: #{$color-success};
--color-success-hover: #{$color-success-hover};
--color-text-maxcontrast: #{$color-text-maxcontrast};
--color-text-light: #{$color-main-text};
--color-text-lighter: #{$color-text-maxcontrast};
--image-logo: #{$image-logo};
--image-login-background: #{$image-login-background};
--image-logoheader: #{$image-logoheader};
--image-favicon: #{$image-favicon};
--color-loading-light: #{$color-loading-light};
--color-loading-dark: #{$color-loading-dark};
--color-box-shadow: #{$color-box-shadow};
--color-border: #{$color-border};
--color-border-dark: #{$color-border-dark};
--border-radius: #{$border-radius};
--border-radius-large: #{$border-radius-large};
--border-radius-pill: #{$border-radius-pill};
--font-face: #{$font-face};
--default-font-size: #{$default-font-size};
--default-line-height: #{$default-line-height};
--animation-quick: #{$animation-quick};
--animation-slow: #{$animation-slow};
--header-height: #{$header-height};
}

7
core/css/fixes.css Normal file
View file

@ -0,0 +1,7 @@
/* ---- BROWSER-SPECIFIC FIXES ---- */
/* remove dotted outlines in Firefox */
::-moz-focus-inner {
border: 0;
}
/*# sourceMappingURL=fixes.css.map */

1
core/css/fixes.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["fixes.scss"],"names":[],"mappings":"AAAA;AAEA;AACA;EACC","file":"fixes.css"}

38
core/css/functions.css Normal file
View file

@ -0,0 +1,38 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
/*# sourceMappingURL=functions.css.map */

1
core/css/functions.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"functions.css"}

24
core/css/functions.scss
View file

@ -20,21 +20,6 @@
*
*/
/**
* Removes the "#" from a color.
*
* @param string $color The color
* @return string The color without #
*/
@function remove-hash-from-color($color) {
$color: unquote($color);
$index: str-index(inspect($color), '#');
@if $index {
$color: str-slice(inspect($color), 2);
}
@return $color;
}
/**
* @see core/src/icons.js
*/
@ -80,12 +65,3 @@
$varName: "--icon-#{$icon}-#{$color}";
background-image: var(#{$varName});
}
@mixin position($value) {
@if $value == 'sticky' {
position: -webkit-sticky; // Safari support
position: sticky;
} @else {
position: $value;
}
}

50
core/css/global.css Normal file
View file

@ -0,0 +1,50 @@
/* 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;
}
/*# sourceMappingURL=global.css.map */

1
core/css/global.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC","file":"global.css"}

644
core/css/header.css Normal file
View file

@ -0,0 +1,644 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
* @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
* @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
* @copyright Copyright (c) 2016, Jos Poortvliet <jos@opensuse.org>
* @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
* @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
* @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
* @copyright Copyright (c) 2015, Volker E <volker.e@temporaer.net>
* @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
*
* @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: 50px;
background-color: var(--color-primary);
background-image: var(--gradient-primary-background);
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: 0.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: 66px;
max-height: calc(100vh - 50px * 4);
right: 5px;
top: 50px;
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: 66px;
max-height: calc(100vh - 50px * 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: 0.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;
filter: var(--image-logoheader-custom, var(--primary-invert-if-bright));
}
#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: 50px;
height: 100%;
cursor: pointer;
opacity: 0.6;
padding: 0;
margin: 0;
}
/* hover effect for app switcher label */
.header-appname-container .header-appname {
opacity: 0.75;
}
.menutoggle .icon-caret {
opacity: 0.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: 50px;
height: 50px;
margin-left: -50px;
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: 0.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: 50px;
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: 50px;
width: 50px;
align-items: center;
justify-content: center;
opacity: 0.6;
letter-spacing: -0.5px;
font-size: 12px;
}
#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;
filter: var(--primary-invert-if-bright);
}
#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: 0.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: 50px;
}
/* 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;
}
/*# sourceMappingURL=header.css.map */

1
core/css/header.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;AAAA;EAGC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDwDe;ECvDf;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;;AASF;AACC;AA6GA;AA4BA;;AAtIA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAhBD;EACA;EAiBC;EACA,KDQc;ECPd;AAMA;AAqBA;;AAzBA;AAAA;EACC;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EAGC;EACA;EA3CF;EACA;;AAkDG;AAAA;AAAA;EACC;EACA;EACA,QAhDuB;EAiDvB;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,OD7HY;EC8HZ;EACA;EACA;EACA;EACA;;;AAMJ;AAEA;EACC;;;AAIA;EACC;;AAGA;EACC;;AAID;EACC;;AAID;EACC;;;AAKH;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;AACA;EACC;EACA,ODpMe;ECqMf,QDrMe;ECsMf;EACA;;;AAGD;EACC;EACA;AAAY;EACZ;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;AACA;AAAA;AAAA;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAoB;;;AAItB;EACC;;AACA;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA,WDhUe;ECiUf;AAwFA;AAiCA;AAwBA;AAgBA;;AA/JA;EACC;EACA;EACA;EACA;EACA;AAgBA;AA4BA;AAQA;AAcA;AACA;AAQA;;AAzEA;EACC;EACA;EACA;EACA,QD9Ua;EC+Ub,OD/Ua;ECgVb;EACA;EACA;EAEA;EACA;;AAID;AAAA;AAAA;EAGC;EACA;;AAID;AAAA;EAEC;;AAGD;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;EAEC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EAEC;EAEA;;AAID;EACC;;AAMD;AACC;AASA;AAOA;AAOA;;AAtBA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;EACC;EACA;EACA;AAAa;;AAId;AAAA;EAGC;;AAID;EACC;;AAMH;AACC;AASA;AAOA;;AAfA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;AAAA;EAEC;EACA;;AAID;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;AAAA;AAAA;EAIC;;AAED;EACC;;AAED;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC;;;AAKA;AAAA;EACC;;AAED;AAAA;EACC;;;AAKF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AACA;EACA;;AAEA;EACC,MDzhBiB;EC0hBjB;;AAGD;EAEC,KDhiBc;;;ACqiBhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}

27
core/css/header.scss
View file

@ -12,6 +12,7 @@
* @license GNU AGPL version 3 or any later version
*
*/
@use 'variables';
/* prevent ugly selection effect on accidental selection */
#header,
@ -48,9 +49,9 @@
top: 0;
width: 100%;
z-index: 2000;
height: $header-height;
height: variables.$header-height;
background-color: var(--color-primary);
background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
background-image: var(--gradient-primary-background);
box-sizing: border-box;
justify-content: space-between;
}
@ -78,7 +79,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 - #{variables.$header-height} * 4);
}
#header {
@ -96,7 +97,7 @@
max-width: 350px;
@include header-menu-height();
right: 5px; // relative to parent
top: $header-height;
top: variables.$header-height;
margin: 0;
&:not(.popovermenu) {
@ -229,7 +230,7 @@
display: flex;
justify-content: center;
align-items: center;
width: $header-height;
width: variables.$header-height;
height: 100%;
cursor: pointer;
opacity: 0.6;
@ -300,9 +301,9 @@
/* NAVIGATION --------------------------------------------------------------- */
nav[role='navigation'] {
display: inline-block;
width: $header-height;
height: $header-height;
margin-left: -$header-height;
width: variables.$header-height;
height: variables.$header-height;
margin-left: -#{variables.$header-height};
position: relative;
}
@ -424,7 +425,7 @@ nav[role='navigation'] {
/* Apps menu */
#appmenu {
display: inline-flex;
min-width: $header-height;
min-width: variables.$header-height;
z-index: 2;
li {
@ -438,8 +439,8 @@ nav[role='navigation'] {
position: relative;
display: flex;
margin: 0;
height: $header-height;
width: $header-height;
height: variables.$header-height;
width: variables.$header-height;
align-items: center;
justify-content: center;
opacity: .6;
@ -642,13 +643,13 @@ nav[role='navigation'] {
background: var(--color-primary) !important;
&.skip-content {
left: $navigation-width;
left: variables.$navigation-width;
margin-left: 3px;
}
&:focus,
&:active {
top: $header-height;
top: variables.$header-height;
}
}

206
core/css/icons.css Normal file
View file

@ -0,0 +1,206 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
* @author Joas Schilling <coding@schilljs.com>
* @author Lukas Reschke <lukas@statuscode.ch>
* @author Roeland Jago Douma <roeland@famdouma.nl>
* @author Vincent Chan <plus.vincchan@gmail.com>
* @author Thomas Müller <thomas.mueller@tmit.eu>
* @author Hendrik Leppelsack <hendrik@leppelsack.de>
* @author Jan-Christoph Borchardt <hey@jancborchardt.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
/* GLOBAL ------------------------------------------------------------------- */
@import url("../../dist/icons.css");
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
[class^=icon-], [class*=" icon-"] {
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
min-height: 16px;
}
.icon-breadcrumb {
background-image: url("../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 0.8s infinite linear;
animation: rotate 0.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,
.icon-audio-white,
.icon-audio-off-white,
.icon-fullscreen-white,
.icon-screen-white,
.icon-screen-off-white,
.icon-video-white,
.icon-video-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
/* ICONS -------------------------------------------------------------------
* These icon classes are generated automatically with the following pattern
* .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
*/
/*# sourceMappingURL=icons.css.map */

1
core/css/icons.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["icons.scss","functions.scss","variables.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADnBA;AA+GQ;AE9IR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AFgCA;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;;;AAKH;AAAA;EAEC;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;AAEC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;;AAIF;EACC;IACC;;EAED;IACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"icons.css"}

39
core/css/icons.scss
View file

@ -26,6 +26,8 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@use 'variables';
@import 'functions';
/* GLOBAL ------------------------------------------------------------------- */
[class^='icon-'], [class*=' icon-'] {
@ -117,36 +119,13 @@ audio, canvas, embed, iframe, img, input, object, video {
background-size: 32px !important;
}
.icon-white {
&.icon-shadow {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
}
.icon-audio-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-audio-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-fullscreen-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-screen-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-screen-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-video-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-white.icon-shadow,
.icon-audio-white,
.icon-audio-off-white,
.icon-fullscreen-white,
.icon-screen-white,
.icon-screen-off-white,
.icon-video-white,
.icon-video-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}

1039
core/css/inputs.css Normal file
View file

File diff suppressed because it is too large Load diff

1
core/css/inputs.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA4BA;;AA1BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QAvHe;;AAyHhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YA1JgB;EA2JhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QA9OgB;;;AAiPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QA9Pc;EA+Pd,OA/Pc;EAgQd;EACA;EACA;;AACA;EACC;AC7NH;EAEA;;ADmOG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QA1rBe;AA2rBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}

28
core/css/inputs.scss
View file

@ -11,6 +11,8 @@
* @license GNU AGPL version 3 or any later version
*
*/
@use 'variables';
@import 'functions';
/* Specifically override browser styles */
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
@ -253,7 +255,7 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--icon-triangle-s-000) no-repeat right 4px center;
background: var(--icon-triangle-s-dark) no-repeat right 4px center;
background-color: inherit;
outline: 0;
padding-right: 24px !important;
@ -281,7 +283,7 @@ input {
margin-right: 0;
&:disabled {
cursor: default;
@include icon-color('confirm-fade', 'actions', $color-black, 2, true);
@include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
}
}
@ -330,8 +332,6 @@ select,
/* Radio & Checkboxes */
$checkbox-radio-size: 14px;
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
$color-checkbox-radio-white: #fff;
input {
@ -360,7 +360,7 @@ input {
vertical-align: middle;
border-radius: 50%;
margin: 0 6px 3px 3px;
border: 1px solid $color-checkbox-radio-border;
border: 1px solid var(--color-text-lighter);
}
&:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before {
@ -381,11 +381,11 @@ input {
border-color: var(--color-primary-element);
}
&:disabled + label:before {
border: 1px solid $color-checkbox-radio-border;
background-color: $color-checkbox-radio-disabled !important; /* override other status */
border: 1px solid var(--color-text-lighter);
background-color: var(--color-text-maxcontrast) !important; /* override other status */
}
&:checked:disabled + label:before {
background-color: $color-checkbox-radio-disabled;
background-color: var(--color-text-maxcontrast);
}
// Detail description below label of checkbox or radio button
@ -413,7 +413,7 @@ input {
}
}
/* We do not use the nc-darken function as this is not supposed to be changed */
/* We do not use the variables as we keep the colours as white for this variant */
&.radio--white,
&.checkbox--white {
+ label:before,
@ -472,7 +472,7 @@ div.select2-drop {
}
.select2-search input {
min-height: auto;
background: var(--icon-search-000) no-repeat right center !important;
background: var(--icon-search-dark) no-repeat right center !important;
background-origin: content-box !important;
}
.select2-results {
@ -599,7 +599,7 @@ div.select2-container {
border-radius: 0;
border: none;
b {
background: var(--icon-triangle-s-000) no-repeat center !important;
background: var(--icon-triangle-s-dark) no-repeat center !important;
opacity: .5;
}
}
@ -664,7 +664,7 @@ div.select2-container {
color: inherit !important;
&::before {
content: ' ';
background-image: var(--icon-checkmark-000);
background-image: var(--icon-checkmark-dark);
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
@ -854,7 +854,7 @@ div.select2-container {
/* selected checkmark icon */
&::before {
content: ' ';
background-image: var(--icon-checkmark-000);
background-image: var(--icon-checkmark-dark);
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
@ -873,7 +873,7 @@ div.select2-container {
*/
&[data-select='create'] {
&::before {
background-image: var(--icon-add-000);
background-image: var(--icon-add-dark);
visibility: visible;
}
}

198
core/css/mobile.css Normal file
View file

@ -0,0 +1,198 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
@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: 50px;
left: 0;
width: 44px;
height: 44px;
z-index: 1050;
background-color: rgba(255, 255, 255, 0.7);
cursor: pointer;
opacity: 0.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%;
}
}
/*# sourceMappingURL=mobile.css.map */

1
core/css/mobile.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAEC;EACA;IACC;IACA;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAGD;EACA;IACC;;;EAGA;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;;;AAGD;EACA;IACC;IACA;IAEA;IAEA;;EACA;IACC;;EAED;IACC;;EACA;IACC;;;AAKH;EAEC;IACC;;EAED;IACC;IACA;IACA,KDuCa;ICtCb;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAED;IACC;;;EAKF;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAED;AAAA;IAEC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;;;EAED;IACC;;;EAGD;IACC;;;AAGD;EACA;IACC;;;EAED;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;EAED;IACC;;;EAGD;IACC;;;AAGD;;AAGD;EACC;IACC;IACA;;EACA;IACC;;;AAGF;EACA;AAoBC;;EAlBC;IACC;;EAGF;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAID;IACC;;;EAIF;IACC;IACA","file":"mobile.css"}

10
core/css/mobile.scss
View file

@ -1,4 +1,6 @@
@media only screen and (max-width: $breakpoint-mobile) {
@use 'variables';
@media only screen and (max-width: variables.$breakpoint-mobile) {
/* position share dropdown */
#dropdown {
@ -20,7 +22,7 @@
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
#app-navigation {
transform: translateX(-#{$navigation-width});
transform: translateX(-#{variables.$navigation-width});
}
.snapjs-left {
#app-navigation {
@ -64,7 +66,7 @@
#app-navigation-toggle-back {
position: fixed;
display: inline-block !important;
top: $header-height;
top: variables.$header-height;
left: 0;
width: 44px;
height: 44px;
@ -117,7 +119,7 @@
display: none;
}
#body-settings #controls {
min-width: $breakpoint-mobile !important;
min-width: variables.$breakpoint-mobile !important;
}
/* do not show dates in filepicker */

72
core/css/public.css Normal file
View file

@ -0,0 +1,72 @@
#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%;
}
/*# sourceMappingURL=public.css.map */

1
core/css/public.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAEA;AAyCC;AAKA;AAoBA;;AA/DC;EACC;;AAIA;EACC;;AAED;EACC;EACA;;AAEA;EAGC;;AAID;EACC;;AAED;EACC;;AAED;EACC;;AAMJ;EAEC;;AAKD;EACC;;AAID;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;EAIC;;AAID;EACC;EACA;EACA;EACA;EACA,QA1Ec;EA2Ed;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;AACA;EACA;EACA;EACA","file":"public.css"}

5178
core/css/server.css Normal file
View file

File diff suppressed because it is too large Load diff

1
core/css/server.css.map Normal file
View file

File diff suppressed because one or more lines are too long

1181
core/css/styles.css Normal file
View file

File diff suppressed because it is too large Load diff

1
core/css/styles.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAa;EACb;EACA;EACA;EACA;EACA;EACA,KDxFe;;;AC2FhB;AAEA;EACC;;;AAGD;EACC;;;AAMC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;;AAKH;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;;AANA;EACC;EACA;;AAKD;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;;AAKH;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;AA0BA;;AAxBA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;;AAKF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;EACA;EACA;EAEA;EACA;;AAEA;EAGC;;;AAKH;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;AA6CA;;AA3CA;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}

15
core/css/styles.scss
View file

@ -13,6 +13,8 @@
* @license GNU AGPL version 3 or any later version
*
*/
@use 'sass:math';
@use 'variables';
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;
@ -179,7 +181,8 @@ body {
#controls {
box-sizing: border-box;
@include position('sticky');
position: -webkit-sticky;
position: sticky;
height: 44px;
padding: 0;
margin: 0;
@ -190,7 +193,7 @@ body {
-ms-user-select: none;
user-select: none;
display: flex;
top: $header-height;
top: variables.$header-height;
}
/* position controls for apps with app-navigation */
@ -296,7 +299,7 @@ body {
position: absolute !important;
height: 20px;
width: 24px;
background-image: var(--icon-toggle-000);
background-image: var(--icon-toggle-dark);
background-repeat: no-repeat;
background-position: center;
opacity: .3;
@ -718,7 +721,7 @@ code {
padding-right: 140px;
div:first-child a {
background-image: var(--icon-home-000);
background-image: var(--icon-home-dark);
background-repeat: no-repeat;
background-position: left center;
}
@ -775,7 +778,7 @@ code {
order:1;
.icon.icon-add{
background-image: var(--icon-add-000);
background-image: var(--icon-add-dark);
background-size: 16px 16px;
width: 34px;
height: 34px;
@ -943,7 +946,7 @@ code {
}
}
&.filesize {
line-height: $name-height / 3;
line-height: math.div($name-height, 3);
width: 100%;
}
&.date {

86
core/css/systemtags.css Normal file
View file

@ -0,0 +1,86 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
* @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
* @copyright Copyright (c) 2016, Jan-Christoph Borchardt <hey@jancborchardt.net>
* @copyright Copyright (c) 2016, Vincent Petry <pvince81@owncloud.com>
* @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
* @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
*
* @license GNU AGPL version 3 or any later version
*
*/
.systemtags-select2-dropdown .select2-result-label .checkmark {
visibility: hidden;
margin-left: -5px;
margin-right: 5px;
padding: 4px;
}
.systemtags-select2-dropdown .select2-result-label .new-item .systemtags-actions {
display: none;
}
.systemtags-select2-dropdown .select2-selected .select2-result-label .checkmark {
visibility: visible;
}
.systemtags-select2-dropdown .select2-result-label .icon {
display: inline-block;
opacity: 0.5;
}
.systemtags-select2-dropdown .select2-result-label .icon.rename {
padding: 4px;
}
.systemtags-select2-dropdown .systemtags-actions {
position: absolute;
right: 5px;
}
.systemtags-select2-dropdown .systemtags-rename-form {
display: inline-block;
width: calc(100% - 20px);
top: -6px;
position: relative;
}
.systemtags-select2-dropdown .systemtags-rename-form input {
display: inline-block;
height: 30px;
width: calc(100% - 40px);
}
.systemtags-select2-dropdown .label {
width: 85%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.systemtags-select2-dropdown .label.hidden {
display: none;
}
.systemtags-select2-dropdown span {
line-height: 25px;
}
.systemtags-select2-dropdown .systemtags-item {
display: inline-block;
height: 25px;
width: 100%;
}
.systemtags-select2-dropdown .select2-result-label {
height: 25px;
}
.systemTagsInfoView,
.systemtags-select2-container {
width: 100%;
}
.systemTagsInfoView .select2-choices,
.systemtags-select2-container .select2-choices {
flex-wrap: nowrap !important;
max-height: 44px;
}
.systemTagsInfoView .select2-choices .select2-search-choice.select2-locked .label,
.systemtags-select2-container .select2-choices .select2-search-choice.select2-locked .label {
opacity: 0.5;
}
#select2-drop.systemtags-select2-dropdown .select2-results li.select2-result {
padding: 5px;
}
/*# sourceMappingURL=systemtags.css.map */

1
core/css/systemtags.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["systemtags.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;EACC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;;;AAIF;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;;AAGD;AAAA;EACC;;;AAIF;EACC","file":"systemtags.css"}

111
core/css/toast.css Normal file
View file

@ -0,0 +1,111 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/**
* @see core/src/icons.js
*/
/**
* 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.
*/
.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 */
background-image: var(--icon-close-dark);
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);
}
/*# sourceMappingURL=toast.css.map */

1
core/css/toast.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","functions.scss","toast.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;ADyCD;EAEA;ECzCC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIH;EACC;;;AAGD;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC","file":"toast.css"}

52
core/css/toast.scss Normal file
View file

@ -0,0 +1,52 @@
@use 'variables';
@import 'functions';
.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);
.toast-close {
position: absolute;
top: 0;
right: 0;
width: 38px;
opacity: 0.4;
padding: 12px;
@include icon-color('close', 'actions', variables.$color-black, 2, true);
background-position: center;
background-repeat: no-repeat;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
&:hover, &:focus, &: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);
}

125
core/css/tooltip.css Normal file
View file

@ -0,0 +1,125 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
* @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
* @copyright Copyright (c) 2016, Jan-Christoph Borchardt <hey@jancborchardt.net>
* @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
* @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
*
* 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;
overflow-wrap: anywhere;
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 0.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;
}
/*# sourceMappingURL=tooltip.css.map */

1
core/css/tooltip.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["tooltip.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AA0CA;AAmBA;;AA5DA;EAGI;EACA;EACA;;AAEJ;EAEI;EACA;;AAEJ;EAEI;EACA;;AAEJ;EAEI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAGR;EAEI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAQJ;EACI;EACA;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAOA;EACI;EACA;EACA;;AAGR;EAEI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"tooltip.css"}

24
core/css/variables.css Normal file
View file

@ -0,0 +1,24 @@
@charset "UTF-8";
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/*# sourceMappingURL=variables.css.map */

1
core/css/variables.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"variables.css"}

4
core/css/variables.scss
View file

@ -19,8 +19,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
// SCSS darken/lighten function override
// SCSS darken/lighten function override
@function nc-darken($color, $value) {
@return darken($color, $value);
}
@ -117,3 +116,4 @@ $header-menu-profile-item-height: 66px;
// mobile. Keep in sync with core/js/js.js
$breakpoint-mobile: 1024px;

32
core/css/whatsnew.css Normal file
View file

@ -0,0 +1,32 @@
/**
* @copyright Copyright (c) 2018, Arthur Schiwon <blizzz@arthur-schiwon.de>
*
* @license GNU AGPL version 3 or any later version
*
*/
.whatsNewPopover {
bottom: 35px !important;
left: 15px !important;
width: 270px;
z-index: 700;
}
.whatsNewPopover p {
width: auto !important;
}
.whatsNewPopover .caption {
font-weight: bold;
cursor: auto !important;
}
.whatsNewPopover .icon-close {
position: absolute;
right: 0;
}
.whatsNewPopover::after {
content: none;
}
/*# sourceMappingURL=whatsnew.css.map */

1
core/css/whatsnew.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["whatsnew.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"whatsnew.css"}

1
core/src/icons.js
View file

@ -204,6 +204,7 @@ const iconsAliases = {
'icon-category-search': 'icon-search-dark',
'icon-category-tools': 'icon-settings-dark',
'icon-filetype-text': 'icon-file-grey',
'nav-icon-systemtagsfilter': 'icon-tag-dark',
}
const colorSvg = function(svg = '', color = '000') {

5
core/src/views/Profile.vue
View file

@ -312,6 +312,8 @@ $content-max-width: 640px;
position: sticky;
height: 190px;
top: -40px;
background-color: var(--color-primary);
background-image: var(--gradient-primary-background);
&__container {
align-self: flex-end;
@ -576,6 +578,9 @@ $content-max-width: 640px;
display: flex;
justify-content: center;
gap: 0 4px;
a {
filter: var(--background-invert-if-dark);
}
}
}

Some files were not shown because too many files have changed in this diff Show more