Extract colour from custom background

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

3 files changed, 2 insertions, 319 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index d028364ec7b..7b62656c4f9 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -54,9 +54,6 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
-  --image-background: url('/core/img/app-background.jpg');
-  --image-background-default: url('/core/img/app-background.jpg');
-  --color-background-plain: #0082c9;
   --primary-invert-if-bright: no;
   --color-primary: #006aa3;
   --color-primary-default: #0082c9;
@@ -75,4 +72,6 @@
   --color-primary-element-light-hover: #dbe5ea;
   --color-primary-element-text-dark: #ededed;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  --image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
+  --color-background-plain: #0082c9;
 }
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
deleted file mode 100644
index 1979387c5dd..00000000000
--- a/apps/theming/css/settings-admin.css
+++ /dev/null
@@ -1,148 +0,0 @@
-#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 */
diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss
deleted file mode 100644
index f34dea52698..00000000000
--- a/apps/theming/css/settings-admin.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-#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;
-    }
-}