From caac024ae6249e97f477b5b96469093b6e62809e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 3 Jul 2024 12:13:05 +0200 Subject: [PATCH] MOBILE-4594 styles: Change html to :root as it has more specificity --- src/addons/calendar/components/calendar/calendar.scss | 2 +- src/addons/mod/assign/components/submission/submission.scss | 2 +- src/addons/mod/bigbluebuttonbn/components/index/index.scss | 2 +- .../h5pactivity/pages/attempt-results/attempt-results.scss | 2 +- src/addons/mod/lesson/pages/player/player.scss | 2 +- src/addons/mod/survey/components/index/index.scss | 2 +- src/addons/mod/wiki/components/index/index.scss | 2 +- src/core/components/empty-box/empty-box.scss | 2 +- src/core/components/mod-icon/mod-icon.scss | 2 +- .../components/module-navigation/module-navigation.scss | 2 +- src/core/features/course/components/module/module.scss | 2 +- .../components/course-list-item/course-list-item.scss | 2 +- .../components/rich-text-editor/rich-text-editor.scss | 2 +- src/core/features/grades/pages/course/course.scss | 2 +- src/core/features/login/login.scss | 2 +- .../global-search-filters/global-search-filters.scss | 2 +- .../global-search-result/global-search-result.scss | 2 +- .../features/usertours/components/user-tour/user-tour.scss | 2 +- src/theme/components/error-accordion.scss | 2 +- src/theme/components/format-text.scss | 6 +++--- src/theme/helpers/custom.mixins.scss | 2 +- src/theme/theme.base.scss | 6 +++--- src/theme/theme.custom.scss | 4 ++-- src/theme/theme.dark.scss | 2 +- src/theme/theme.design-system.scss | 6 +++--- src/theme/theme.light.scss | 2 +- src/theme/theme.scss | 2 +- 27 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss index 1bdc04ba7..076847ba3 100644 --- a/src/addons/calendar/components/calendar/calendar.scss +++ b/src/addons/calendar/components/calendar/calendar.scss @@ -150,6 +150,6 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { --addon-calendar-blank-day-background-color: var(--gray-900); } diff --git a/src/addons/mod/assign/components/submission/submission.scss b/src/addons/mod/assign/components/submission/submission.scss index ba7e1b126..d2642ed7f 100644 --- a/src/addons/mod/assign/components/submission/submission.scss +++ b/src/addons/mod/assign/components/submission/submission.scss @@ -40,7 +40,7 @@ } } -:host-context(html.dark) ::ng-deep { +:host-context(:root.dark) ::ng-deep { ion-item.submissioneditable p { color: var(--danger-tint); } diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.scss b/src/addons/mod/bigbluebuttonbn/components/index/index.scss index 1aac75966..b586d6845 100644 --- a/src/addons/mod/bigbluebuttonbn/components/index/index.scss +++ b/src/addons/mod/bigbluebuttonbn/components/index/index.scss @@ -24,7 +24,7 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { --recording-details-background: var(--gray-800); --recording-details-border: var(--gray-500); } diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss index a9021111d..e8045e634 100644 --- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss +++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss @@ -35,7 +35,7 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { .addon-mod_h5pactivity-result-table-row.item:nth-child(even) { --background: var(--gray-900); } diff --git a/src/addons/mod/lesson/pages/player/player.scss b/src/addons/mod/lesson/pages/player/player.scss index 2090c01ed..4afb34c08 100644 --- a/src/addons/mod/lesson/pages/player/player.scss +++ b/src/addons/mod/lesson/pages/player/player.scss @@ -2,7 +2,7 @@ --background-odd: var(--light); } -:host-context(html.dark) { +:host-context(:root.dark) { --background-odd: var(--medium); } diff --git a/src/addons/mod/survey/components/index/index.scss b/src/addons/mod/survey/components/index/index.scss index 42e6f410c..9782bbfa1 100644 --- a/src/addons/mod/survey/components/index/index.scss +++ b/src/addons/mod/survey/components/index/index.scss @@ -25,7 +25,7 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { --grid-background: var(--gray-900); --even-background: var(--medium); } diff --git a/src/addons/mod/wiki/components/index/index.scss b/src/addons/mod/wiki/components/index/index.scss index e2a7ffaac..7ae6942ed 100644 --- a/src/addons/mod/wiki/components/index/index.scss +++ b/src/addons/mod/wiki/components/index/index.scss @@ -56,7 +56,7 @@ $addon-mod-wiki-toc-level-padding: 12px !default; } } -:host-context(html.dark) { +:host-context(:root.dark) { --addon-mod-wiki-newentry-link-color: var(--danger-tint); --addon-mod-wiki-toc-background-color: var(--medium); } diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss index b79b0305d..e87befd6e 100644 --- a/src/core/components/empty-box/empty-box.scss +++ b/src/core/components/empty-box/empty-box.scss @@ -38,7 +38,7 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { &.dimmed { --text-color: var(--gray-300); } diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index fb23300c9..24bfad6fe 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -78,7 +78,7 @@ --margin-end: 12px; } -:host-context(html.dark) { +:host-context(:root.dark) { &.version_40:not(.colorize), &.version_current { background-color: var(--white); diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss index c43abc36f..71e9200c8 100644 --- a/src/core/features/course/components/module-navigation/module-navigation.scss +++ b/src/core/features/course/components/module-navigation/module-navigation.scss @@ -50,6 +50,6 @@ height: 0 !important; } -:host-context(html.dark) { +:host-context(:root.dark) { --button-color: var(--gray-100); } diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index be33f3f6e..19f40ee3c 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -198,7 +198,7 @@ } -:host-context(html.dark) { +:host-context(:root.dark) { .activity-description-availabilityinfo { .core-module-availabilityinfo { background: var(--gray-800); diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss index c11f469ad..0f8ab669e 100644 --- a/src/core/features/courses/components/course-list-item/course-list-item.scss +++ b/src/core/features/courses/components/course-list-item/course-list-item.scss @@ -29,7 +29,7 @@ } -:host-context(html.dark) { +:host-context(:root.dark) { --button-background: rgb(0 0 0 / 30%); } diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index adc88eec5..5930d15d2 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -6,7 +6,7 @@ --background: var(--rte-editor-background); } -:host-context(html.dark) { +:host-context(:root.dark) { --color: var(--white); --button-color: var(--gray-200); --button-active-color: var(--gray-500); diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss index a6bc87e94..880c195d9 100644 --- a/src/core/features/grades/pages/course/course.scss +++ b/src/core/features/grades/pages/course/course.scss @@ -5,7 +5,7 @@ --core-table-border-color: var(--stroke); } -:host-context(html.dark) { +:host-context(:root.dark) { --icon-color: var(--gray-200); } diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss index cd22bfad5..e02eaea05 100644 --- a/src/core/features/login/login.scss +++ b/src/core/features/login/login.scss @@ -166,7 +166,7 @@ } -:host-context(html.dark) { +:host-context(:root.dark) { @if ($core-login-button-outline-dark) { form ion-button { --background: white; diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.scss b/src/core/features/search/components/global-search-filters/global-search-filters.scss index e7678a15c..d40b02857 100644 --- a/src/core/features/search/components/global-search-filters/global-search-filters.scss +++ b/src/core/features/search/components/global-search-filters/global-search-filters.scss @@ -11,6 +11,6 @@ } } -:host-context(html.dark) { +:host-context(:root.dark) { --heading-text-color: var(--gray-400); } diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss index 6b1464abe..7289a9ae4 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.scss +++ b/src/core/features/search/components/global-search-result/global-search-result.scss @@ -91,7 +91,7 @@ } -:host-context(html.dark) ion-item { +:host-context(:root.dark) ion-item { --core-global-search-result-content-color: var(--gray-400); --core-global-search-result-context-color: var(--gray-500); } diff --git a/src/core/features/usertours/components/user-tour/user-tour.scss b/src/core/features/usertours/components/user-tour/user-tour.scss index 175b55d90..91c276a7e 100644 --- a/src/core/features/usertours/components/user-tour/user-tour.scss +++ b/src/core/features/usertours/components/user-tour/user-tour.scss @@ -61,6 +61,6 @@ } -:host-context(html.dark) { +:host-context(:root.dark) { --popover-background: var(--gray-700); } diff --git a/src/theme/components/error-accordion.scss b/src/theme/components/error-accordion.scss index 26267c72f..c3691243b 100644 --- a/src/theme/components/error-accordion.scss +++ b/src/theme/components/error-accordion.scss @@ -143,6 +143,6 @@ } -html.dark .core-error-accordion { +:root.dark .core-error-accordion { --background-color: var(--gray-700); } diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 944b205b5..a4740ee59 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -8,7 +8,7 @@ core-format-text { --core-format-text-viewer-icon-background: rgb(255 255 255 / 50%); } -html.dark core-format-text { +:root.dark core-format-text { --core-format-text-viewer-icon-background: rgb(0 0 0 / 50%); } @@ -378,7 +378,7 @@ ion-header.ios h1 core-format-text { } } -html.dark core-format-text select, -html.dark core-rich-text-editor .core-rte-editor select { +:root.dark core-format-text select, +:root.dark core-rich-text-editor .core-rte-editor select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); } diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index e15794e90..a14d152f8 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -297,7 +297,7 @@ @mixin darkmode() { $root: #{&}; - @at-root #{add-root-selector($root, "html.dark")} { + @at-root #{add-root-selector($root, ":root.dark")} { @content; } } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index a0f0d9694..4e85f1003 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1,13 +1,13 @@ @import "./globals.scss"; -html.force-safe-area-margins { +:root.force-safe-area-margins { --ion-safe-area-left: 40px; --ion-safe-area-right: 40px; --ion-safe-area-top: 40px; --ion-safe-area-bottom: 40px; } -html { +:root { --zoom-level: 100%; zoom: var(--zoom-level); @@ -21,7 +21,7 @@ a { cursor: pointer; } -html[dir=rtl] { +:root[dir=rtl] { --rotate-expandable: rotate(-90deg); } diff --git a/src/theme/theme.custom.scss b/src/theme/theme.custom.scss index 282ff6aaf..77c14d33e 100644 --- a/src/theme/theme.custom.scss +++ b/src/theme/theme.custom.scss @@ -8,7 +8,7 @@ * Light Theme * ------------------------------------------- */ -html { +:root { } @@ -16,6 +16,6 @@ html { * Dark Theme * ------------------------------------------- */ -html.dark { +:root.dark { } diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index f2836b6b9..57bd18bf9 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -5,7 +5,7 @@ * http://ionicframework.com/docs/theming/ */ -html.dark { +:root.dark { // Ionic shades, defined for ionic internal use. --ion-color-step-0: var(--black); diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index f57935c52..ba3453db4 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -2,7 +2,7 @@ @import "theme.light.scss"; @import "theme.dark.scss"; -html { +:root { // Add serif fallback font for km language in some devices. --ion-font-family: var(--ion-default-font), serif; @@ -243,7 +243,7 @@ html { } /** @deprecated since 4.3 **/ -html { +:root { --small-radius: var(--mdl-shape-borderRadius-xs); --medium-radius: var(--mdl-shape-borderRadius-sm); --big-radius: var(--mdl-shape-borderRadius-lg); @@ -251,7 +251,7 @@ html { } /** @deprecated since 4.4 **/ -html { +:root { --font-size-normal: var(--mdl-typography-fontSize-md); --a11y-min-target-size: var(--a11y-sizing-minTargetSize); --a11y-focus-width: var(--a11y-shadow-focus-boxShadowSpread); diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 919eb588d..e2508ea51 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -5,7 +5,7 @@ * http://ionicframework.com/docs/theming/ */ -html { +:root { // Color palette --black: #{$black}; diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 317f977d9..68ebd08b9 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -29,7 +29,7 @@ @import "components/videojs.scss"; /* Ionic components overrides */ -html { +:root { @import "components/ion-accordion.scss"; @import "components/ion-action-sheet.scss"; @import "components/ion-alert.scss";