Merge pull request #2781 from crazyserver/MOBILE-3320

Mobile 3320

src/core/components/loading/loading.scss

@@ -1,9 +1,18 @@
 @import "~theme/globals";
 
 :host {
+    --loading-background: var(--ion-background-color);
+    --loading-spinner: var(--ion-color-primary);
+    --loading-text-color: var(--ion-text-color);
+
     position: static;
     @include core-transition(height, 200ms);
-    --loading-background: var(--ion-background-color);
+    color: var(--loading-text-color);
+
+    ion-spinner {
+        --color: var(--loading-spinner);
+        color: var(--color);
+    }
 
     > .core-loading-container {
         position: absolute;

src/core/features/login/login.scss

@@ -1,14 +1,39 @@
+@import "~theme/globals";
+
 :host {
-    ion-content {
+    ion-content,
+    ion-list {
         --background: var(--core-login-background);
+        --ion-item-background: var(--core-login-background);
         --color: var(--core-login-text-color);
     }
 
+    ion-item ion-label {
+        --color: var(--core-login-text-color);
+
+        p, h2, h3, .core-oauth-icon {
+            color: var(--core-login-text-color);
+        }
+    }
+    ion-button.core-button-as-link {
+        --color: var(--core-login-text-color);
+        text-decoration-color: var(--core-login-text-color);
+
+        ion-label {
+            color: var(--core-login-text-color);
+        }
+    }
+
     form .item.item-input,
     form .core-username.item {
         margin-bottom: 16px;
     }
 
+    form .item {
+        --background: var(--core-login-input-background);
+        --color: var(--core-login-input-color);
+    }
+
     form .core-username.item p {
         font-size: 16px;
     }
@@ -39,4 +64,44 @@
     .core-login-reconnect-warning {
         font-size: 0.9em;
     }
+
+    @if ($core-fixed-url) {
+        .core-sitename, .core-siteurl {
+            display: none;
+        }
+    }
+
+    @if ($core-login-button-outline) {
+        form ion-button {
+            --background: white;
+            --color: var(--core-login-background);
+        }
+    }
+
+    @if ($core-login-loading-color) {
+        core-loading {
+            --loading-background: var(--core-login-background);
+            --loading-text-color: #{$core-login-loading-color};
+            --loading-spinner: #{$core-login-loading-color};
+        }
+    }
+
+
+}
+
+:host-context(body.dark) {
+    @if ($core-login-button-outline-dark) {
+        form ion-button-dark {
+            --background: white;
+            --color: var(--core-login-background-dark);
+        }
+    }
+
+    @if ($core-login-loading-color-dark) {
+        core-loading {
+            --loading-background: var(--core-login-background-dark);
+            --loading-text-color: #{$core-login-loading-color-dark};
+            --loading-spinner: #{$core-login-loading-color-dark};
+        }
+    }
 }

src/core/features/mainmenu/pages/home/home.html

@@ -6,7 +6,7 @@
 
         <ion-title>
             <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-            <img src="assets/img/login_logo.png" class="core-header-logo" [alt]="siteName">
+            <img src="assets/img/toolbar_logo.png" class="core-header-logo" [alt]="siteName">
         </ion-title>
         <ion-buttons slot="end">
         </ion-buttons>

src/core/features/mainmenu/pages/home/home.scss

@@ -1,6 +1,6 @@
-$core-dashboard-logo: false !default;
+@import "~theme/globals";
 
-@if $core-dashboard-logo {
+@if ($core-dashboard-logo) {
     .toolbar-title-default.md .title-default .core-header-logo {
         max-height: $toolbar-md-height - 24;
     }

src/theme/globals.scss

@@ -4,6 +4,8 @@
  * Place here the different files you should import to use global variables.
  */
 
+$font-path: "../assets/fonts";
+$assets-path: "../assets";
 @import "./globals.mixins.scss";
 @import "./globals.mixins.ionic.scss";
 @import "./globals.custom.scss";

src/theme/globals.variables.scss

@@ -77,7 +77,10 @@ $subdued-text-color:       $gray-darker !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-dark: #{$shade-20} !default;
+$ion-item-divider-background: #{$gray-lighter} !default;
+$ion-item-divider-color: #{$text-color} !default;
 $ion-item-divider-background-dark: #{$shade-25} !default;
+$ion-item-divider-color-dark: #{$text-color-dark} !default;
 
 $core-online-color: #5cb85c !default;
 
@@ -274,6 +277,10 @@ $bottom-tabs-color: $gray-darker !default;
 $bottom-tabs-color-dark: $white !default;
 $bottom-tabs-color-selected: $primary !default;
 $bottom-tabs-color-selected-dark: $primary-dark !default;
+$bottom-tabs-badge-color: $primary !default;
+$bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default;
+$bottom-tabs-badge-color-dark: $primary-dark !default;
+$bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default;
 
 $core-text-hightlight-background-color: lighten($blue, 40%) !default;
 
@@ -297,10 +304,10 @@ $core-tab-border-color-active-dark: $core-tab-color-active-dark !default;
 $core-progressbar-color: $primary !default;
 $core-progressbar-color-dark: $primary !default;
 $core-progressbar-text-color: $gray-darker !default;
+$core-progressbar-text-color-dark: $gray-lighter !default;
 $core-progressbar-background: $gray-lighter !default;
 $core-progressbar-height: 8px !default;
 
-$core-progressbar-text-color-dark: $gray-lighter !default;
 
 $core-side-blocks-max-width: 30% !default;
 $core-side-blocks-min-width: 280px !default;
@@ -314,10 +321,18 @@ $core-selected-item-color-dark: $primary-dark !default;
 $core-selected-item-border-width: 5px !default;
 
 $core-login-background: $white !default;
-$core-login-text-color: $black !default;
-
 $core-login-background-dark: $black !default;
+$core-login-text-color: $black !default;
 $core-login-text-color-dark: $white !default;
+$core-login-input-background: $white !default;
+$core-login-input-background-dark: $core-login-background-dark !default;
+$core-login-input-color: $black !default;
+$core-login-input-color-dark: $core-login-text-color-dark !default;
+
+$core-login-button-outline: false !default;
+$core-login-button-outline-dark: $core-login-button-outline !default;
+$core-login-loading-color: false !default;
+$core-login-loading-color-dark: $text-color-dark !default;
 
 $core-star-color: $brand-color !default;
 
@@ -363,3 +378,5 @@ $addon-forum-highlight-color-dark: $gray-dark !default;
 
 $core-more-icon: null !default;
 $core-more-item-border: null !default;
+$core-fixed-url: false !default;
+$core-dashboard-logo: false !default;

src/theme/theme.base.scss

@@ -194,6 +194,10 @@ ion-alert.core-nohead {
     }
 }
 
+ion-alert .alert-message {
+    user-select: text;
+}
+
 // Ionic list.
 ion-list.list-md {
     padding: 0;

src/theme/theme.dark.scss

@@ -62,6 +62,8 @@
     --core-bottom-tabs-background: #{$bottom-tabs-background-dark};
     --core-bottom-tabs-color: #{$bottom-tabs-color-dark};
     --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected-dark};
+    --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color-dark};
+    --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color-dark};
 
     ion-action-sheet {
         .action-sheet-cancel {
@@ -84,10 +86,8 @@
 
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
-    ion-item-divider, ion-item.divider {
-        --background: #{$ion-item-divider-background-dark};
-        --color: #{$text-color-dark};
-    }
+    --item-divider-background: #{$ion-item-divider-background-dark};
+    --item-divider-color: #{$ion-item-divider-color-dark};
 
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color-dark};
@@ -96,6 +96,8 @@
 
     --core-login-background: #{$core-login-background-dark};
     --core-login-text-color: #{$core-login-text-color-dark};
+    --core-login-input-background: #{$core-login-input-background-dark};
+    --core-login-input-color: #{$core-login-input-color-dark};
 
     --core-question-correct-color: var(--green-light);
     --core-question-correct-color-bg: var(--green-dark);

src/theme/theme.light.scss

@@ -87,10 +87,16 @@
     --core-bottom-tabs-background: #{$bottom-tabs-background};
     --core-bottom-tabs-color: #{$bottom-tabs-color};
     --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
+    --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color};
+    --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color};
     ion-tab-bar {
         --background: var(--core-bottom-tabs-background);
         --color: var(--core-bottom-tabs-color);
         --color-selected: var(--core-bottom-tabs-color-selected);
+        ion-badge {
+            --background: var(--core-bottom-tabs-badge-color);
+            --color: var(--core-bottom-tabs-badge-text-color);
+        }
     }
 
     --core-link-color: #{$link-color};
@@ -110,6 +116,7 @@
         }
 
         ion-spinner {
+            --ion-color-base: var(--core-header-toolbar-color);
             --color: var(--core-header-toolbar-color);
         }
     }
@@ -150,6 +157,7 @@
     }
 
     ion-spinner {
+        --ion-color-base: var(--ion-color-primary);
         --color: var(--ion-color-primary);
     }
 
@@ -176,9 +184,11 @@
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
+    --item-divider-background: #{$ion-item-divider-background};
+    --item-divider-color: #{$ion-item-divider-color};
     ion-item-divider, ion-item.divider {
-        --background: var(--gray-lighter);
-        --color: inherit;
+        --background: var(--item-divider-background);
+        --color: var(--item-divider-color);
         --min-height: var(--item-divider-min-height);
         min-height: var(--min-height);
     }
@@ -191,6 +201,8 @@
 
     --core-login-background: #{$core-login-background};
     --core-login-text-color: #{$core-login-text-color};
+    --core-login-input-background: #{$core-login-input-background};
+    --core-login-input-color: #{$core-login-input-color};
 
     --core-star-color: #{$core-star-color};