Cleanup and compile

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

5 files changed, 152 insertions, 286 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index a2b4b4c7b60..e2d641f530e 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -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;
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
new file mode 100644
index 00000000000..96be6dd862b
--- /dev/null
+++ b/apps/theming/css/settings-admin.css
@@ -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 */
diff --git a/apps/theming/css/settings-admin.css.map b/apps/theming/css/settings-admin.css.map
new file mode 100644
index 00000000000..b5e657a4e30
--- /dev/null
+++ b/apps/theming/css/settings-admin.css.map
@@ -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"}
\ No newline at end of file
diff --git a/apps/theming/css/theming.css b/apps/theming/css/theming.css
new file mode 100644
index 00000000000..2d43b528a95
--- /dev/null
+++ b/apps/theming/css/theming.css
@@ -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";
+}
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
deleted file mode 100644
index a5b55a5a738..00000000000
--- a/apps/theming/css/theming.scss
+++ /dev/null
@@ -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;
-	}
-}