Skip to content

Commit e76f0d6

Browse files
crazyservercrazyserver
committed
MOBILE-3523 login: Fix and simplify login style personalization
1 parent 1f1912b commit e76f0d6

File tree

6 files changed

+60
-26
lines changed

6 files changed

+60
-26
lines changed

‎src/core/login/login.scss‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ $core-login-page-background-color: $white !default;
22
$core-login-page-text-color: $text-color !default;
33
$core-login-button-outline: false !default;
44
$core-login-loading-color: false !default;
5-
$core-login-item-inner-background-color: $white !default;
6-
$core-login-item-background-color: $white !default;
5+
$core-login-input-item-background-color: $core-login-page-background-color !default;
6+
$core-login-input-item-text-color: $core-login-page-text-color !default;
77

88
// Dark.
99
$core-dark-login-page-background-color: $black !default;
1010
$core-dark-login-page-text-color: $core-dark-text-color !default;
11-
$core-dark-login-item-inner-background-color: $core-dark-login-page-background-color !default;
12-
$core-dark-login-item-background-color: $core-dark-login-page-background-color !default;
1311
$core-dark-login-button-outline: $core-login-button-outline !default;
1412
$core-dark-login-loading-color: $core-dark-text-color !default;
13+
$core-dark-input-login-item-background-color: $core-dark-login-page-background-color !default;
14+
$core-dark-input-login-item-text-color: $core-dark-login-page-text-color !default;
1515

1616
ion-app.app-root page-core-login-credentials,
1717
ion-app.app-root page-core-login-reconnect,
@@ -26,6 +26,13 @@ ion-app.app-root page-core-login-site {
2626
}
2727
}
2828

29+
.item p, .item h2, .item h3, .list .item.core-oauth-icon .label, .text-input {
30+
color: $core-login-page-text-color;
31+
@include darkmode() {
32+
color: $core-dark-login-page-text-color;
33+
}
34+
}
35+
2936
img {
3037
max-width: 100%;
3138
}
@@ -78,6 +85,22 @@ ion-app.app-root page-core-login-site {
7885
margin-bottom: 20px;
7986
}
8087

88+
89+
.core-login-form .item,
90+
.core-login-form .item-inner {
91+
background-color: $core-login-input-item-background-color;
92+
@include darkmode() {
93+
background-color: $core-dark-input-login-item-background-color;
94+
}
95+
96+
p, input {
97+
color: $core-login-input-item-text-color;
98+
@include darkmode() {
99+
color: $core-dark-input-login-item-text-color;
100+
}
101+
}
102+
}
103+
81104
ion-list.core-login-forgotten-password {
82105
margin-top: 0;
83106
margin-bottom: 0;
@@ -89,6 +112,8 @@ ion-app.app-root page-core-login-site {
89112
@include darkmode() {
90113
background: transparent;
91114
}
115+
116+
color: $core-login-page-text-color;
92117
}
93118
}
94119

‎src/core/login/pages/credentials/credentials.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h3 *ngIf="siteName" padding class="core-sitename"><core-format-text [text]="sit
4747
</form>
4848

4949
<!-- Forgotten password button. -->
50-
<ion-list no-lines *ngIf="showForgottenPassword" class="core-login-forgotten-password">
50+
<ion-list no-lines *ngIf="showForgottenPassword" class="core-login-forgotten-password core-login-link">
5151
<a ion-item text-center text-wrap (click)="forgottenPassword()" detail-none>
5252
{{ 'core.login.forgotten' | translate }}
5353
</a>

‎src/core/login/pages/reconnect/reconnect.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h3 *ngIf="siteName" padding class="core-sitename"><core-format-text [text]="sit
4747
</form>
4848

4949
<!-- Forgotten password button. -->
50-
<ion-list no-lines *ngIf="showForgottenPassword && !isOAuth" class="core-login-forgotten-password">
50+
<ion-list no-lines *ngIf="showForgottenPassword && !isOAuth" class="core-login-forgotten-password core-login-link">
5151
<a ion-item text-center text-wrap (click)="forgottenPassword()" detail-none>
5252
{{ 'core.login.forgotten' | translate }}
5353
</a>

‎src/core/login/pages/reconnect/reconnect.scss‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
1-
ion-app.app-root page-core-login-reconnect {
2-
.box {
3-
.core-login-form .item {
4-
background-color: $core-login-item-background-color;
5-
@include darkmode() {
6-
background-color: $core-dark-login-item-background-color;
7-
}
8-
}
9-
10-
.core-login-form .item-inner {
11-
background-color: $core-login-item-inner-background-color;
12-
@include darkmode() {
13-
background-color: $core-dark-login-item-inner-background-color;
14-
}
15-
}
16-
}
1+
$core-login-reconnect-warning: $red !default;
2+
$core-dark-login-reconnect-warning: mix($red, white, 20%) !default;
173

4+
ion-app.app-root page-core-login-reconnect {
185
form .core-username.item p {
196
@include padding-horizontal(8px);
207
font-size: 16px;
@@ -31,6 +18,10 @@ ion-app.app-root page-core-login-reconnect {
3118
}
3219

3320
.core-login-reconnect-warning {
34-
color: $red;
21+
color: $core-login-reconnect-warning;
22+
23+
@include darkmode() {
24+
background-color: $core-dark-login-reconnect-warning;
25+
}
3526
}
3627
}

‎src/core/login/pages/site/site.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ <h2 *ngIf="site.title" text-wrap>{{site.title}}</h2>
9494
</ng-container>
9595

9696
<!-- Help. -->
97-
<ion-list no-lines margin-top>
98-
<a ion-item text-center text-wrap class="core-login-need-help" (click)="showHelp()" detail-none>
97+
<ion-list no-lines margin-top class="core-login-need-help core-login-link">
98+
<a ion-item text-center text-wrap (click)="showHelp()" detail-none>
9999
{{ 'core.needhelp' | translate }}
100100
</a>
101101
</ion-list>

‎src/core/login/pages/site/site.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ ion-app.app-root page-core-login-site {
1212
}
1313

1414
.item.item-block {
15-
&.core-login-need-help.item {
15+
&.core-login-need-help .item {
16+
color: $core-login-page-text-color;
1617
text-decoration: underline;
1718
}
1819
&.core-login-site-qrcode {
@@ -97,6 +98,19 @@ ion-app.app-root page-core-login-site {
9798
text-align: center;
9899
}
99100

101+
.core-login-site-list-loading,
102+
.core-login-site-nolist-loading {
103+
.spinner circle, .spinner line {
104+
stroke: $core-login-loading-color;
105+
}
106+
107+
@include darkmode() {
108+
.spinner circle, .spinner line {
109+
stroke: $core-dark-login-loading-color;
110+
}
111+
}
112+
}
113+
100114
.item.core-login-site-list-title {
101115
ion-label, ion-label h2.item-heading {
102116
margin-top: 0;
@@ -123,6 +137,10 @@ ion-app.app-root page-core-login-site {
123137
ion-thumbnail {
124138
box-shadow: 0 0 4px #ddd;
125139
}
140+
color: $core-login-page-text-color;
141+
@include darkmode() {
142+
color: $core-dark-login-page-text-color;
143+
}
126144
}
127145

128146

0 commit comments

Comments
 (0)