diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js index 768b60b3d97..7e40609cffe 100644 --- a/kolibri/core/assets/src/styles/themeSpec.js +++ b/kolibri/core/assets/src/styles/themeSpec.js @@ -76,7 +76,7 @@ export default { }, scrimOpacity: { type: Number, - default: 0.7, + default: 0.2, validator(opacity) { if (opacity < 0 || opacity > 1) { logging.error(`Scrim opacity '${opacity}' is not in range [0,1]`); diff --git a/kolibri/plugins/default_theme/kolibri_plugin.py b/kolibri/plugins/default_theme/kolibri_plugin.py index 48a1e3c71df..a76827f4c60 100644 --- a/kolibri/plugins/default_theme/kolibri_plugin.py +++ b/kolibri/plugins/default_theme/kolibri_plugin.py @@ -19,20 +19,20 @@ class DefaultThemeHook(theme_hook.ThemeHook): def theme(self): return { "signIn": { - "background": static("background.jpg"), - "backgroundImgCredit": "Thomas Van Den Driessche", + "background": static("assets/default_theme/background.jpg"), + "backgroundImgCredit": "Lewa Wildlife Conservancy", "topLogo": { "style": "padding-left: 64px; padding-right: 64px; margin-bottom: 8px; margin-top: 8px", }, }, "logos": [ { - "src": static("assets/logo.ico"), + "src": static("assets/default_theme/logo.ico"), "content_type": "image/vnd.microsoft.icon", "size": "32x32", }, { - "src": static("assets/kolibri-logo.svg"), + "src": static("assets/default_theme/kolibri-logo.svg"), "content_type": "image/svg+xml", # See https://web.dev/maskable-icon/ for details on what # icons count as maskable. The default Kolibri logo is not, @@ -41,12 +41,12 @@ def theme(self): "size": "any", }, { - "src": static("assets/kolibri-logo-192.png"), + "src": static("assets/default_theme/kolibri-logo-192.png"), "content_type": "image/png", "size": "192x192", }, { - "src": static("assets/kolibri-logo-512.png"), + "src": static("assets/default_theme/kolibri-logo-512.png"), "content_type": "image/png", "size": "512x512", }, diff --git a/kolibri/plugins/default_theme/static/assets/default_theme/background.jpg b/kolibri/plugins/default_theme/static/assets/default_theme/background.jpg new file mode 100644 index 00000000000..9aa4cb780a8 Binary files /dev/null and b/kolibri/plugins/default_theme/static/assets/default_theme/background.jpg differ diff --git a/kolibri/core/static/assets/kolibri-logo-192.png b/kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo-192.png similarity index 100% rename from kolibri/core/static/assets/kolibri-logo-192.png rename to kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo-192.png diff --git a/kolibri/core/static/assets/kolibri-logo-512.png b/kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo-512.png similarity index 100% rename from kolibri/core/static/assets/kolibri-logo-512.png rename to kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo-512.png diff --git a/kolibri/core/static/assets/kolibri-logo.svg b/kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo.svg similarity index 100% rename from kolibri/core/static/assets/kolibri-logo.svg rename to kolibri/plugins/default_theme/static/assets/default_theme/kolibri-logo.svg diff --git a/kolibri/core/static/assets/logo.ico b/kolibri/plugins/default_theme/static/assets/default_theme/logo.ico similarity index 100% rename from kolibri/core/static/assets/logo.ico rename to kolibri/plugins/default_theme/static/assets/default_theme/logo.ico diff --git a/kolibri/plugins/default_theme/static/background.jpg b/kolibri/plugins/default_theme/static/background.jpg deleted file mode 100644 index 9368bfe7bf0..00000000000 Binary files a/kolibri/plugins/default_theme/static/background.jpg and /dev/null differ diff --git a/kolibri/plugins/default_theme/static/kolibri-logo-192.png b/kolibri/plugins/default_theme/static/kolibri-logo-192.png deleted file mode 100644 index 4749af54e42..00000000000 Binary files a/kolibri/plugins/default_theme/static/kolibri-logo-192.png and /dev/null differ diff --git a/kolibri/plugins/default_theme/static/kolibri-logo-512.png b/kolibri/plugins/default_theme/static/kolibri-logo-512.png deleted file mode 100644 index 91e8b65eff4..00000000000 Binary files a/kolibri/plugins/default_theme/static/kolibri-logo-512.png and /dev/null differ diff --git a/kolibri/plugins/default_theme/static/kolibri-logo.svg b/kolibri/plugins/default_theme/static/kolibri-logo.svg deleted file mode 100644 index 4d144c564c1..00000000000 --- a/kolibri/plugins/default_theme/static/kolibri-logo.svg +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue b/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue index 6f23d4a96e8..be9a09d5ad3 100644 --- a/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue +++ b/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue @@ -2,7 +2,7 @@
-
+

+
@@ -113,9 +114,11 @@ />
@@ -197,13 +200,14 @@ ...mapGetters(['facilityConfig']), backgroundImageStyle() { if (this.themeConfig.signIn.background) { - const scrimOpacity = - this.themeConfig.signIn.scrimOpacity !== undefined - ? this.themeConfig.signIn.scrimOpacity - : 0.7; + const scrimOpacity = this.themeConfig.signIn.scrimOpacity; return { backgroundColor: this.$themeTokens.primary, backgroundImage: `linear-gradient(rgba(0, 0, 0, ${scrimOpacity}), rgba(0, 0, 0, ${scrimOpacity})), url(${this.themeConfig.signIn.background})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'cover', + filter: 'blur(2px)', }; } return { backgroundColor: this.$themeBrand.primary.v_800 }; @@ -317,14 +321,13 @@ } .table-row { + position: relative; + z-index: 1; display: table-row; } .main-row { text-align: center; - background-repeat: no-repeat; - background-position: center; - background-size: cover; } .table-cell { @@ -336,9 +339,22 @@ vertical-align: middle; } + .background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; + width: 100%; + height: 100%; + } + .box { @extend %dropshadow-16dp; + position: relative; + z-index: 1; width: 360px; padding: 32px; margin: 16px auto;