mirror of https://github.com/nextcloud/server.git
Allow to remove the background and select a custom colour
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/34696/head
parent
a884f311b7
commit
cedae7c6d7
@ -0,0 +1,148 @@
|
||||
#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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#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;
|
||||
margin-left: auto;
|
||||
}
|
||||
#theming form .theme-undo:not([style*="display:"]) ~ .theme-remove-bg {
|
||||
margin-left: 0;
|
||||
}
|
||||
#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;
|
||||
max-width: 175px;
|
||||
white-space: wrap;
|
||||
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-default);
|
||||
background-image: var(--image-background-default, var(--image-background-plain, 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);
|
||||
}
|
||||
#theming #user-theming {
|
||||
margin-top: 44px;
|
||||
display: flex;
|
||||
}
|
||||
#theming #user-theming > div {
|
||||
max-width: 400px;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
/* 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 */
|
@ -0,0 +1,168 @@
|
||||
#theming {
|
||||
input {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
input:active {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.fileupload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div > label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-undo {
|
||||
position: absolute;
|
||||
top: -7px; // input padding
|
||||
right: 4px; // input right margin + border
|
||||
cursor: pointer;
|
||||
opacity: .3;
|
||||
padding: 7px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
height: 32px; // height of input
|
||||
width: 32px; // height of input
|
||||
}
|
||||
form.uploadButton {
|
||||
width: 411px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
form .theme-undo,
|
||||
.theme-remove-bg {
|
||||
cursor: pointer;
|
||||
opacity: .3;
|
||||
padding: 7px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
right: 0px;
|
||||
visibility: visible;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
// right align
|
||||
margin-left: auto;
|
||||
}
|
||||
form .theme-undo:not([style*="display:"]) ~ .theme-remove-bg {
|
||||
// Only align the undo button if both are shown
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input[type='text']:hover + .theme-undo,
|
||||
input[type='text'] + .theme-undo:hover,
|
||||
input[type='text']:focus + .theme-undo,
|
||||
input[type='text']:active + .theme-undo,
|
||||
input[type='url']:hover + .theme-undo,
|
||||
input[type='url'] + .theme-undo:hover,
|
||||
input[type='url']:focus + .theme-undo,
|
||||
input[type='url']:active + .theme-undo{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
label span {
|
||||
display: inline-block;
|
||||
min-width: 175px;
|
||||
max-width: 175px;
|
||||
white-space: wrap;
|
||||
padding: 8px 0px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.icon-upload,
|
||||
.uploadButton .icon-loading-small {
|
||||
padding: 8px 20px;
|
||||
width: 20px;
|
||||
margin: 2px 0px;
|
||||
min-height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#theming_settings_status {
|
||||
height: 26px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#theming_settings_loading {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#theming_settings_msg {
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#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-default);
|
||||
background-image: var(--image-background-default, var(--image-background-plain, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)));
|
||||
|
||||
#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-hints {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#theming-preview-logoheader {
|
||||
// Only using --image-logoheader to show the custom value only
|
||||
background-image: var(--image-logoheader);
|
||||
}
|
||||
|
||||
#theming-preview-favicon {
|
||||
background-image: var(--image-favicon);
|
||||
}
|
||||
|
||||
#user-theming {
|
||||
margin-top: 44px;
|
||||
display: flex;
|
||||
& > div {
|
||||
max-width: 400px;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* transition effects for theming value changes */
|
||||
#header {
|
||||
transition: background-color 500ms linear;
|
||||
svg, img {
|
||||
transition: 500ms filter linear;
|
||||
}
|
||||
}
|
@ -1,49 +0,0 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @author Avior <florian.bouillon@delta-wings.net>
|
||||
* @author Julien Veyssier <eneiluj@posteo.net>
|
||||
* @author Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* 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/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { prefixWithBaseUrl } from './prefixWithBaseUrl.js'
|
||||
|
||||
export const getBackgroundUrl = (background, time = 0, themingDefaultBackground = '') => {
|
||||
const enabledThemes = window.OCA?.Theming?.enabledThemes || []
|
||||
const isDarkTheme = (enabledThemes.length === 0 || enabledThemes[0] === 'default')
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
: enabledThemes.join('').indexOf('dark') !== -1
|
||||
|
||||
if (background === 'default') {
|
||||
if (themingDefaultBackground && themingDefaultBackground !== 'backgroundColor') {
|
||||
return generateUrl('/apps/theming/image/background') + '?v=' + window.OCA.Theming.cacheBuster
|
||||
}
|
||||
|
||||
if (isDarkTheme) {
|
||||
return prefixWithBaseUrl('eduardo-neves-pedra-azul.jpg')
|
||||
}
|
||||
|
||||
return prefixWithBaseUrl('kamil-porembinski-clouds.jpg')
|
||||
} else if (background === 'custom') {
|
||||
return generateUrl('/apps/theming/background') + '?v=' + time
|
||||
}
|
||||
|
||||
return prefixWithBaseUrl(background)
|
||||
}
|
@ -1,25 +0,0 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @author Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* 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/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import { generateFilePath } from '@nextcloud/router'
|
||||
|
||||
export const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url
|
Binary file not shown.
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
Before Width: | Height: | Size: 9.4 KiB |
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 76 KiB |
Loading…
Reference in New Issue