MOBILE-4594 styles: Change html to :root as it has more specificity

2024-07-03 12:13:05 +02:00 · 2024-07-03 12:13:05 +02:00 · caac024ae6
parent aadb6f0a24
commit caac024ae6
27 changed files with 34 additions and 34 deletions
--- 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);
 }
--- 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);
    }
--- 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);
 }
--- 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);
    }
--- 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);
 }

--- 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);
 }
--- 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);
 }
--- 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);
    }
--- 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);
--- 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);
 }
--- 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);
--- 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%);
 }

--- 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);
--- 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);
 }

--- 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;
--- 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);
 }
--- 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);
 }
--- 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);
 }
--- 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);
 }
--- 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');
 }
--- 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;
    }
 }
--- 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);
 }

--- 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 {

 }
--- 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);
--- 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);
--- 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};
--- 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";