Merge pull request #12208 from rtibbles/background_check

Update background

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]`);

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",
                 },

kolibri/plugins/user_auth/assets/src/views/AuthBase.vue

@@ -2,7 +2,7 @@
 
   <div class="fh">
     <div class="wrapper-table">
-      <div class="main-row table-row" :style="backgroundImageStyle">
+      <div class="main-row table-row">
         <div class="main-cell table-cell">
           <!-- remote access disabled -->
           <div
@@ -92,6 +92,7 @@
               />
             </p>
           </div>
+          <div class="background" :style="backgroundImageStyle" aria-hidden="true"></div>
         </div>
       </div>
       <div class="table-row">
@@ -113,9 +114,11 @@
             />
             <template v-if="themeConfig.signIn.backgroundImgCredit">
               <span> • </span>
-              {{ $tr('photoCreditLabel', {
-                photoCredit: themeConfig.signIn.backgroundImgCredit
-              }) }}
+              <span>
+                {{ $tr('photoCreditLabel', {
+                  photoCredit: themeConfig.signIn.backgroundImgCredit
+                }) }}
+              </span>
             </template>
           </div>
         </div>
@@ -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;