From 33d2379eaa98919f6656447c8824f45b6e7ad74e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 21 May 2021 09:24:09 +0200 Subject: [PATCH 1/4] MOBILE-3320 core: Improve heading styles --- src/theme/theme.base.scss | 57 +++++++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 4daacb2f2..fe5513b28 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -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}; From fd6212ac3fd75d1120467f88b0b125c3a0bafc9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 21 May 2021 11:17:27 +0200 Subject: [PATCH 2/4] MOBILE-3320 messages: Do some restyling on discussion page --- .../messages/pages/discussion/discussion.html | 39 +++--- .../messages/pages/discussion/discussion.scss | 126 +++++------------- src/theme/globals.variables.scss | 63 ++++----- src/theme/theme.base.scss | 6 + src/theme/theme.dark.scss | 5 +- src/theme/theme.light.scss | 8 +- 6 files changed, 99 insertions(+), 148 deletions(-) diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html index a6a1c9216..2d0b64d50 100644 --- a/src/addons/messages/pages/discussion/discussion.html +++ b/src/addons/messages/pages/discussion/discussion.html @@ -4,22 +4,20 @@

-
- - - - - - - - -
+ + + + + + + +

@@ -101,11 +99,6 @@ *ngIf="message.showUserData">
{{ members[message.useridfrom].fullname }}
- - {{ message.timecreated | coreFormatDate: "strftimetime" }} - - - @@ -114,6 +107,10 @@ [contextInstanceId]="0">

+ {{ message.timecreated | coreFormatDate: "strftimetime" }} + + + diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss index 5582fd11b..42ff565ed 100644 --- a/src/addons/messages/pages/discussion/discussion.scss +++ b/src/addons/messages/pages/discussion/discussion.scss @@ -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; } diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index f21119486..edfc59a1e 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -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-background-dark: #{$shade-80} !default; $ion-item-divider-background: #{$gray-lighter} !default; $ion-item-divider-color: #{$text-color} !default; -$ion-item-divider-background-dark: #{$shade-25} !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; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index fe5513b28..f2e7f1458 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -464,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; diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index e6a421bbd..10ef3020a 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -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}; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 0d2680d3c..a8e7df89d 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -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}; From eff001f6bcd3dd307e3fb38a3057e7dfd3f4a618 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 21 May 2021 11:27:46 +0200 Subject: [PATCH 3/4] MOBILE-3320 github: Fix lang check on test action --- .github/workflows/testing.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml index a33ba83cd..1534b363c 100644 --- a/.github/workflows/testing.yml +++ b/.github/workflows/testing.yml @@ -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 From d23ff1aba7221f328fc03e4753b3a665898e159b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 21 May 2021 11:43:55 +0200 Subject: [PATCH 4/4] MOBILE-3320 ios: Fixes on tabs and format text styles --- src/core/components/tabs/tabs.scss | 10 ++++-- src/core/directives/format-text.ts | 13 +++---- src/theme/components/format-text.scss | 50 +++++++++++++++------------ src/theme/globals.variables.scss | 16 ++++----- src/theme/theme.dark.scss | 4 +-- src/theme/theme.light.scss | 2 +- 6 files changed, 53 insertions(+), 42 deletions(-) diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index 00952316a..3c4a05405 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -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; +} diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index 7abae64d9..5f73706dc 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -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 = ''; + button.innerHTML = ''; - 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); }); } diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index e453640a6..8531c49c2 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -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); - } -} diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index edfc59a1e..361dbc538 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -72,17 +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-90} !default; +$background-color-dark: $shade-90 !default; $subdued-text-color: $gray-darker !default; $ion-item-background: $white !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; +$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; diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 10ef3020a..f82052ef0 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -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; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index a8e7df89d..d89fb5176 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -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;