Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/34696/head
John Molakvoæ
3 years ago
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 |
||||
|
Before Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 76 KiB |
Loading…
Reference in new issue