EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2787 from crazyserver/MOBILE-3320 

Mobile 3320
main
Dani Palou 2021-05-21 15:52:38 +02:00 committed by GitHub
parent aa889a4d97 d23ff1aba7
commit 86a279c72f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 195 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/testing.yml vendored
View File

@ -24,7 +24,7 @@ jobs:
fi
gulp
langcount=`jq -r '. | length' src/assets/lang/en.json`
freemiumcount=`jq 'keys' src/assets/lang/en.json | grep "freemium." | wc -l | xargs`
freemiumcount=`jq 'keys' src/assets/lang/en.json | grep "freemium\." | wc -l | xargs`
allcount=$(($langcount - $freemiumcount))
langindexcount=`jq -r '. | length' scripts/langindex.json`
if [ $allcount -ne $langindexcount ]; then
@ -32,7 +32,7 @@ jobs:
exit 1
fi
langkeys=`jq -r 'keys[]' src/assets/lang/en.json`
langkeys=`jq -r 'keys[]' src/assets/lang/en.json | grep -v "freemium\."`
langindex=`jq -r 'keys[]' scripts/langindex.json`
found=0
for i in $langkeys; do

39
src/addons/messages/pages/discussion/discussion.html
View File

@ -4,22 +4,20 @@
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<h1>
<div class="addon-messages-discussion-title">
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
[siteId]="siteId || null">
<core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
[linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()">
</core-user-avatar>
<core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"
(click)="showInfo && !isGroup && viewInfo()"></core-format-text>
<ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
[attr.aria-label]="'core.favourites' | translate">
</ion-icon>
<ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
[attr.aria-label]="'addon.messages.mutedconversation' | translate">
</ion-icon>
</div>
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
[siteId]="siteId || null">
<core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
[linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()">
</core-user-avatar>
<core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"
(click)="showInfo && !isGroup && viewInfo()"></core-format-text>
<ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
[attr.aria-label]="'core.favourites' | translate">
</ion-icon>
<ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
[attr.aria-label]="'addon.messages.mutedconversation' | translate">
</ion-icon>
</h1>
<ion-buttons slot="end"></ion-buttons>
</ion-toolbar>
@ -101,11 +99,6 @@
*ngIf="message.showUserData"></core-user-avatar>
<div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
<ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending">
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
</ion-note>
</div>
<!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
@ -114,6 +107,10 @@
[contextInstanceId]="0"></core-format-text>
</p>
</ion-label>
<ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending" slot="end">
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
</ion-note>
<ion-button fill="clear" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)"
class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'"
[attr.aria-label]=" 'addon.messages.deletemessage' | translate" slot="end">

126
src/addons/messages/pages/discussion/discussion.scss
View File

@ -1,6 +1,8 @@
@import "~theme/globals.scss";
:host {
ion-content {
--background: var(--background-lighter);
--background: var(--background-alternative);
&::part(scroll) {
padding-bottom: 0 !important;
@ -11,7 +13,7 @@
display: flex;
flex-direction: column;
padding-bottom: 15px;
background: var(--background-lighter);
background: var(--background-alternative);
}
.addon-messages-date {
@ -35,17 +37,16 @@
ion-item.addon-message {
border: 0;
border-radius: 4px;
padding: 8px;
margin: 8px 8px 0 8px;
padding: 0 8px 0 8px;
margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg);
background: var(--background);
align-self: flex-start;
width: 90%;
max-width: 90%;
min-height: 0;
--min-height: var(--a11y-min-target-size);
position: relative;
-webkit-transition: width 500ms ease-in-out;
transition: width 500ms ease-in-out;
@include core-transition(width);
// This is needed to display bubble tails.
overflow: visible;
@ -78,22 +79,19 @@
div {
font-weight: 500;
flex-grow: 1;
padding-right: .5rem;
padding-left: .5rem;
@include padding-horizontal(.5rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ion-note {
text-align: end;;
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
}
}
&.addon-message-no-user .addon-message-user ion-note {
width: 100%;
ion-note {
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
margin: 0;
padding: 0 0 8px 0;
align-self: flex-end;
}
&:active {
@ -102,7 +100,7 @@
ion-label {
margin: 0;
padding: 0;
padding: 8px 0;
}
.addon-message-text {
@ -115,12 +113,9 @@
.addon-messages-delete-button {
min-height: initial;
line-height: initial;
margin: 0 0 0 10px;
height: 1.6em !important;
-webkit-align-self: flex-end;
@include margin(0, null, 0, null);
height: var(--a11y-min-target-size) !important;
align-self: flex-end;
vertical-align: middle;
float: inline-end;
ion-icon {
font-size: 1.4em;
@ -136,6 +131,7 @@
border: 0.5rem solid transparent;
position: absolute;
touch-action: none;
bottom: 0;
}
// Defines when an item-message is the user's.
@ -148,19 +144,18 @@
}
.spinner {
float: inline-end;
margin: 2px, -3px, -2px, 5px;
@include float(end);
@include margin(2px, -3px, -2px, 5px);
svg {
width: 16px;
height: 16px;
width: 16px;
height: 16px;
}
}
.tail {
right: -8px;
bottom: -8px;
margin-right: -0.5rem;
@include position(null, -8px, null, null);
@include margin-horizontal(null, -0.5rem);
border-bottom-color: var(--addon-messages-message-mine-bg);
}
@ -171,9 +166,8 @@
&.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg);
bottom: -8px;
left: -8px;
margin-left: -0.5rem;
@include position(null, null, null, -8px);
@include margin-horizontal(-0.5rem, null);
}
&.addon-message-not-mine.activated .tail {
@ -186,10 +180,7 @@
.item-heading {
margin-bottom: 0;
}
margin-top: -8px;
padding-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.has-fab .scroll-content {
@ -211,19 +202,17 @@
line-height: 20px;
height: 20px;
width: 20px;
right: -6px;
top: -6px;
@include position(-6px, -6px, null, null);
}
}
ion-header ion-toolbar .addon-messages-discussion-title {
ion-header ion-toolbar h1 {
display: flex;
align-items: center;
padding: 0;
.core-bar-button-image {
margin-right: 6px;
@include margin-horizontal(null, 6px);
}
core-format-text {
@ -234,64 +223,13 @@
}
ion-icon {
margin-left: 6px;
}
}
}
:host-context([dir=rtl]) {
ion-header ion-toolbar .addon-messages-discussion-title {
.core-bar-button-image {
margin-left: 6px;
margin-right: 0;
}
ion-icon {
margin-right: 6px;
margin-left: 0;
}
}
// Message item.
ion-item.addon-message {
.addon-messages-delete-button {
margin-right: 10px;
margin-left: 0;
}
&.addon-message-mine {
.spinner {
margin-right: 5px;
margin-left: -3px;
}
.tail {
right: unset;
left: -8px;
margin-right: unset;
margin-left: 0;
}
}
&.addon-message-not-mine .tail {
right: -8px;
margin-right: -0.5rem;
left: unset;
margin-left: 0;
}
}
ion-fab button {
.core-discussion-messages-badge {
left: -6px;
right: unset;
@include margin-horizontal(6px, null);
}
}
}
:host-context(.ios) {
ion-header ion-toolbar .addon-messages-discussion-title {
ion-header ion-toolbar h1 {
justify-content: center;
}

10
src/core/components/tabs/tabs.scss
View File

@ -1,6 +1,7 @@
:host {
--tabs-background: var(--core-tabs-background);
--tabs-color: var(--color);
--height: 56px;
height: 100%;
display: block;
@ -12,8 +13,8 @@
ion-tab-bar.core-tabs-bar {
position: relative;
width: 100%;
height: auto;
background: var(--tabs-background);
height: var(--height);
color: var(--tabs-color);
-webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
@ -26,7 +27,7 @@
.tab-slide {
border-bottom: 2px solid transparent;
min-width: 100px;
min-height: 56px;
min-height: var(--height);
cursor: pointer;
overflow: hidden;
@ -95,3 +96,8 @@
}
}
}
:host-context(.ios) {
--height: 53px;
}

13
src/core/directives/format-text.ts
View File

@ -206,20 +206,21 @@ export class CoreFormatTextDirective implements OnChanges {
const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
const label = Translate.instant('core.openfullimage');
const anchor = document.createElement('a');
const button = document.createElement('button');
anchor.classList.add('core-image-viewer-icon');
anchor.setAttribute('aria-label', label);
button.classList.add('core-image-viewer-icon');
button.setAttribute('aria-label', label);
// Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>';
button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
</ion-icon>';
anchor.addEventListener('click', (e: Event) => {
button.addEventListener('click', (e: Event) => {
e.preventDefault();
e.stopPropagation();
CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId, true);
});
img.parentNode?.appendChild(anchor);
img.parentNode?.appendChild(button);
});
}

50
src/theme/components/format-text.scss
View File

@ -2,6 +2,18 @@
/** Styles of elements inside the directive should be placed in format-text.scss */
@import "~theme/globals";
:root {
--background: var(--background, #{$ion-item-background});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
--viewer-icon-background: rgba(255, 255, 255, .5);
}
:root body.dark {
--background: var(--background, #{$ion-item-background-dark});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
--viewer-icon-background: rgba(0, 0, 0, .5);
}
core-format-text {
user-select: text;
word-break: break-word;
@ -47,20 +59,19 @@ core-format-text {
z-index: 7;
background-color: var(--background);
color: var(--text-color);
padding-left: 10px; // RTL
@include padding(null, null, null, 10px);
margin: 0;
}
&:before {
content: '';
height: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(0, 0, 0, 0)), color-stop(calc(100% - 15px), var(--background)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
@include position(null, 0, 0, 0);
background: -moz-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(var(--background-gradient-rgb), 0)), color-stop(calc(100% - 15px), rgba(var(--background-gradient-rgb), 1)));
background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
z-index: 6;
}
}
@ -70,7 +81,7 @@ core-format-text {
.core-show-more {
@include push-arrow-color(626262, true);
@include padding-horizontal(null, 5px);
@include background-position(end, 0, center);
@include background-position(end, 5px, center);
background-repeat: no-repeat;
background-size: 14px 14px;
@ -93,18 +104,17 @@ core-format-text {
@include position(null, 10px, 10px, null);
color: var(--black);
border-radius: 5px;
background-color: rgba(255, 255, 255, .5);
text-align: center;
cursor: pointer;
background-color: var(--viewer-icon-background);
display: flex;
width: 32px;
height: 32px;
max-width: 32px;
line-height: 32px;
width: var(--a11y-min-target-size);
height: var(--a11y-min-target-size);
max-width: var(--a11y-min-target-size);
font-size: 24px;
ion-icon {
margin-top: 3px;
flex: 1;
align-self: center;
}
&:hover {
@ -112,9 +122,3 @@ core-format-text {
}
}
}
body.dark {
core-format-text .core-image-viewer-icon {
background-color: rgba(0, 0, 0, .5);
}
}

69
src/theme/globals.variables.scss
View File

@ -7,27 +7,27 @@
/*
* App colors
*/
$shade-0: #000000 !default;
$shade-100: #ffffff !default;
$shade-5: mix($shade-100, $shade-0, 5%) !default; // #0d0d0d
$shade-10: mix($shade-100, $shade-0, 10%) !default; // #1a1a1a
$shade-15: mix($shade-100, $shade-0, 15%) !default; // #262626
$shade-20: mix($shade-100, $shade-0, 20%) !default; // #333333
$shade-25: mix($shade-100, $shade-0, 25%) !default; // #404040
$shade-30: mix($shade-100, $shade-0, 30%) !default; // #4d4d4d
$shade-35: mix($shade-100, $shade-0, 35%) !default; // #595959
$shade-40: mix($shade-100, $shade-0, 40%) !default; // #666666
$shade-45: mix($shade-100, $shade-0, 45%) !default; // #737373
$shade-0: #ffffff !default;
$shade-100: #000000 !default;
$shade-5: mix($shade-100, $shade-0, 5%) !default; // #f2f2f2
$shade-10: mix($shade-100, $shade-0, 10%) !default; // #e6e6e6
$shade-15: mix($shade-100, $shade-0, 15%) !default; // #d9d9d9
$shade-20: mix($shade-100, $shade-0, 20%) !default; // #cccccc
$shade-25: mix($shade-100, $shade-0, 25%) !default; // #bfbfbf
$shade-30: mix($shade-100, $shade-0, 30%) !default; // #b3b3b3
$shade-35: mix($shade-100, $shade-0, 35%) !default; // #a6a6a6
$shade-40: mix($shade-100, $shade-0, 40%) !default; // #999999
$shade-45: mix($shade-100, $shade-0, 45%) !default; // #8c8c8c
$shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080
$shade-55: mix($shade-100, $shade-0, 55%) !default; // #8c8c8c
$shade-60: mix($shade-100, $shade-0, 60%) !default; // #999999
$shade-65: mix($shade-100, $shade-0, 65%) !default; // #a6a6a6
$shade-70: mix($shade-100, $shade-0, 70%) !default; // #b3b3b3
$shade-75: mix($shade-100, $shade-0, 75%) !default; // #bfbfbf
$shade-80: mix($shade-100, $shade-0, 80%) !default; // #cccccc
$shade-85: mix($shade-100, $shade-0, 85%) !default; // #d9d9d9
$shade-90: mix($shade-100, $shade-0, 90%) !default; // #e6e6e6
$shade-95: mix($shade-100, $shade-0, 95%) !default; // #f2f2f2
$shade-55: mix($shade-100, $shade-0, 55%) !default; // #737373
$shade-60: mix($shade-100, $shade-0, 60%) !default; // #666666
$shade-65: mix($shade-100, $shade-0, 65%) !default; // #595959
$shade-70: mix($shade-100, $shade-0, 70%) !default; // #4d4d4d
$shade-75: mix($shade-100, $shade-0, 75%) !default; // #404040
$shade-80: mix($shade-100, $shade-0, 80%) !default; // #333333
$shade-85: mix($shade-100, $shade-0, 85%) !default; // #262626
$shade-90: mix($shade-100, $shade-0, 90%) !default; // #1a1a1a
$shade-95: mix($shade-100, $shade-0, 95%) !default; // #0d0d0d
$black: #282828 !default; // Headings, standard text.
$gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background.
@ -35,7 +35,7 @@ $gray-dark: #9e9e9e !default; // Borders (never text).
$gray: #dddddd !default;
$gray-light: #e9e9e9 !default; // Background.
$gray-lighter: #f5f5f5 !default;
$white: $shade-100 !default; // Background, reversed text.
$white: $shade-0 !default; // Background, reversed text.
$blue: #0064d2 !default; // Link, background.
@ -72,15 +72,17 @@ $text-color-dark: $white !default;
$link-color: $blue !default;
$link-color-dark: $blue-light !default;
$background-color: $gray-light !default;
$background-color-dark: #{$shade-10} !default;
$background-color-dark: $shade-90 !default;
$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;
$ion-item-background-dark: $shade-80 !default;
$ion-item-divider-background: $gray-lighter !default;
$ion-item-divider-color: $text-color !default;
$core-spacer-background: $ion-item-divider-background !default;
$ion-item-divider-background-dark: $shade-75 !default;
$ion-item-divider-color-dark: $text-color-dark !default;
$core-spacer-background-dark: $shade-100 !default;
$core-online-color: #5cb85c !default;
@ -274,7 +276,7 @@ $toolbar-height-ios: 54px !default;
// Bottom tab bar.
$bottom-tabs-background: $white !default;
$bottom-tabs-background-dark: $shade-15 !default;
$bottom-tabs-background-dark: $shade-85 !default;
$bottom-tabs-color: $gray-darker !default;
$bottom-tabs-color-dark: $white !default;
$bottom-tabs-color-selected: $primary !default;
@ -296,7 +298,7 @@ $core-tab-border-color: $gray !default;
$core-tab-color-active: $primary !default;
$core-tab-color-active-dark: $primary-dark !default;
$core-tabs-background-dark: $shade-25 !default;
$core-tabs-background-dark: $shade-75 !default;
$core-tab-background-dark: $core-tabs-background-dark !default;
$core-tab-color-dark: $white !default;
$core-tab-border-color-dark: $gray-light !default;
@ -363,11 +365,12 @@ $addon-messages-avatar-size: 30px !default;
$addon-messages-discussion-badge: $primary !default;
$addon-messages-discussion-badge-text: $white !default;
$addon-messages-message-bg-dark: $black !default;
$addon-messages-message-activated-bg-dark: $gray-dark !default;
$addon-messages-message-bg-dark: $shade-75 !default;
$addon-messages-message-activated-bg-dark: $shade-65 !default;
$addon-messages-message-note-text-dark: $gray-light !default;
$addon-messages-message-mine-bg-dark: $shade-0 !default;
$addon-messages-message-mine-activated-bg-dark: $gray !default;
$addon-messages-message-mine-bg-dark: $shade-60 !default;
$addon-messages-message-mine-activated-bg-dark: $shade-50 !default;
$addon-messages-discussion-badge-dark: $primary-dark !default;
$addon-messages-discussion-badge-text-dark: $black !default;

63
src/theme/theme.base.scss
View File

@ -50,16 +50,54 @@
.font-sm { font-size: 1.2rem; }
// Headings.
.item-heading {
font-size: 16px !important;
color: initial !important;
// Some styles taken from ion-label
ion-label .item-heading {
text-overflow: inherit;
overflow: inherit;
--color: initial;
color: var(--color);
line-height: 20px;
}
.md ion-label .item-heading {
@include margin(2px, 0);
font-size: 16px;
font-weight: normal;
&.item-heading-secondary {
@include margin(2px, 0);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
.ios ion-label .item-heading {
@include margin(0, 0, 2px);
font-size: 17px;
font-weight: normal;
&.item-heading-secondary {
@include margin(0, 0, 3px);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
// Some styles taken from ion-title
ion-header h1,
ion-header h2 {
display: block;
transform: translateZ(0);
color: initial;
--color: initial;
color: var(--color);
margin: 0;
width: 100%;
text-overflow: ellipsis;
@ -70,7 +108,7 @@ ion-header h2 {
ion-app.md ion-header h1,
ion-app.md ion-header h2 {
padding-inline: 20px;
@include padding(0, 20px);
font-size: 20px;
font-weight: 500;
letter-spacing: .0125em;
@ -78,14 +116,11 @@ ion-app.md ion-header h2 {
ion-app.ios ion-header h1,
ion-app.ios ion-header h2 {
top: 0;
left: 0;
padding-inline: 90px;
@include position(0, null, null, 0);
@include padding(0, 90px, 0);
position: absolute;
display: block;
text-align: center;
width: 100%;
transform: translateZ(0);
font-size: 17px;
font-weight: 600;
line-height: #{$toolbar-height-ios};
@ -429,6 +464,12 @@ ion-item img.core-module-icon[slot="start"] {
margin-right: 32px;
}
ion-card ion-item img.core-module-icon[slot="start"] {
margin-top: 12px;
margin-bottom: 12px;
margin-right: 12px;
}
[dir=rtl] ion-item img.core-module-icon[slot="start"] {
margin-right: unset;
margin-left: 32px;

9
src/theme/theme.dark.scss
View File

@ -7,10 +7,10 @@
:root body.dark {
--ion-background-color: #{$background-color-dark};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)};
--ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color));
--ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
// Enlighten the ionic shades.
--ion-color-step-50: #1e1e1e;
@ -48,14 +48,14 @@
@include generate-color($color-name, $colors-dark);
}
--ion-border-color: #{$shade-15};
--ion-border-color: #{$shade-85};
--ion-card-color: #{$text-color-dark};
--ion-card-background: #{$ion-item-background-dark};
ion-content {
--background: var(--ion-background-color);
--background-lighter: var(--gray-darker);
--background-alternative: var(--black);
--contrast-background: var(--ion-background-color);
}
@ -88,6 +88,7 @@
--ion-item-detail-icon-color: var(--white);
--item-divider-background: #{$ion-item-divider-background-dark};
--item-divider-color: #{$ion-item-divider-color-dark};
--spacer-background: #{$core-spacer-background-dark};
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color-dark};

10
src/theme/theme.light.scss
View File

@ -70,7 +70,7 @@
--module-icon-size: 24px;
--ion-background-color: #{$background-color};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;
@ -80,7 +80,7 @@
ion-content {
--background: var(--ion-background-color);
--background-lighter: var(--gray-lighter);
--background-alternative: var(--gray-lighter);
--contrast-background: var(--white);
}
@ -193,6 +193,12 @@
min-height: var(--min-height);
}
--spacer-background: #{$core-spacer-background};
core-spacer {
--item-divider-background: var(--spacer-background);
}
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color};