| 1 |
- {"version":3,"sources":["webpack://_N_E/src/components/QuranReader/ReadingView/Line.module.scss","webpack://_N_E/src/styles/_breakpoints.scss","webpack://_N_E/src/components/QuranReader/ReadingView/PageFooter.module.scss","webpack://_N_E/src/styles/_utility.scss","webpack://_N_E/src/components/QuranReader/ReadingView/Page.module.scss","webpack://_N_E/src/styles/_constants.scss","webpack://_N_E/src/components/QuranReader/ReadingView/ReadingViewSkeleton.module.scss","webpack://_N_E/src/components/QuranReader/ReadingView/PageNavigationButtons/PageNavigationButtons.module.scss","webpack://_N_E/src/components/QuranReader/ReadingView/ReadingView.module.scss"],"names":[],"mappings":"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","file":"static/css/ad32d4c7ba987be6.css","sourcesContent":["@use \"src/styles/breakpoints\";\n@use \"src/styles/utility\";\n\n.line {\n text-align: center;\n margin-inline: auto;\n}\n\n.container {\n direction: rtl;\n}\n\n.mobileInline {\n display: inline;\n @include breakpoints.tablet {\n display: block;\n }\n}\n\n.fixedWidth {\n width: var(--line-width, auto);\n}\n","// For usage see: https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2\n$breakpoints-mobileS: 320px;\n$breakpoints-mobileM: 375px;\n$breakpoints-mobileL: 425px;\n$breakpoints-tablet: 768px;\n$breakpoints-desktop: 1024px;\n\n@mixin mobileS {\n @media only screen and (min-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin smallerThanMobileS {\n @media only screen and (max-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin mobileM {\n @media only screen and (min-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin smallerThanMobileM {\n @media only screen and (max-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin mobileL {\n @media only screen and (min-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin smallerThanMobileL {\n @media only screen and (max-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin tablet {\n @media only screen and (min-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin smallerThanTablet {\n @media only screen and (max-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin desktop {\n @media only screen and (min-width: $breakpoints-desktop) {\n @content;\n }\n}\n\n@mixin smallerThanDesktop {\n @media only screen and (max-width: $breakpoints-desktop) {\n @content;\n }\n}\n",".pageText {\n text-align: center;\n padding-block-start: var(--spacing-xxsmall);\n padding-block-end: var(--spacing-medium);\n width: fit-content;\n font-size: 1.6vh;\n margin-inline-start: auto;\n margin-inline-end: auto;\n color: var(--color-text-faded);\n}\n\n.pageLink {\n &:hover {\n cursor: pointer;\n }\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n@use \"sass:map\";\n\n@mixin center-horizontally {\n display: inline-block;\n margin-block-start: auto;\n margin-inline-end: auto;\n margin-block-end: auto;\n margin-inline-start: auto;\n}\n\n@mixin center-vertically {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@mixin lighten-background-color {\n background-image: linear-gradient(\n to right,\n var(--color-background-lighten),\n var(--color-background-lighten)\n );\n}\n\n// On mobile, font size 1-3 will try to preserve the line, using flex\n// font 4-5 no longer using the flex. And not preserving the line\n\n// If you're updating font size, double check on font size 3.\n// make sure it will not break the layout\n\n$line-heights-map: (\n tajweed: (\n tablet: (),\n ),\n fallback_qpc_uthmani_hafs: (\n tablet: (\n 1: 6vh,\n 2: 6vh,\n 3: 6.1vh,\n 4: 6vh,\n 5: 5.68vh,\n 6: 8.14vh,\n 7: 10.61vh,\n 8: 13.07vh,\n 9: 15.54vh,\n 10: 18vh,\n ),\n ),\n qpc_uthmani_hafs: (\n tablet: (\n 1: 6vh,\n 2: 6vh,\n 3: 6.1vh,\n 4: 6vh,\n 5: 5.68vh,\n 6: 8.14vh,\n 7: 10.61vh,\n 8: 13.07vh,\n 9: 15.54vh,\n 10: 18vh,\n ),\n ),\n text_indopak_15_lines: (\n tablet: (\n 1: 6vh,\n 2: 6vh,\n 3: 6.1vh,\n 4: 6vh,\n 5: 5.68vh,\n 6: 8.34vh,\n 7: 11.01vh,\n 8: 13.67vh,\n 9: 16.34vh,\n 10: 19vh,\n ),\n ),\n text_indopak_16_lines: (\n tablet: (\n 1: 5.7vh,\n 2: 5.7vh,\n 3: 5.7vh,\n 4: 5.6vh,\n 5: 5.6vh,\n 6: 7.36vh,\n 7: 9.12vh,\n 8: 10.88vh,\n 9: 12.64vh,\n 10: 14.4vh,\n ),\n ),\n code_v2: (\n tablet: (\n 1: 6.1vh,\n 2: 6.1vh,\n 3: 6.1vh,\n 4: 6.1vh,\n 5: 6.1vh,\n 6: 9.28vh,\n 7: 12.46vh,\n 8: 15.64vh,\n 9: 18.82vh,\n 10: 22vh,\n ),\n ),\n code_v1: (\n tablet: (\n 1: 6.1vh,\n 2: 6vh,\n 3: 5.8vh,\n 4: 5.4vh,\n 5: 5vh,\n 6: 8vh,\n 7: 11vh,\n 8: 14vh,\n 9: 17vh,\n 10: 20vh,\n ),\n ),\n translation: (\n tablet: (\n 1: 3.2vh,\n 2: 3.5vh,\n 3: 4vh,\n 4: 4.2vh,\n 5: 4.3vh,\n ),\n ),\n tafsir: (\n tablet: (\n 1: 3.2vh,\n 2: 3.5vh,\n 3: 4vh,\n 4: 4.2vh,\n 5: 4.3vh,\n ),\n ),\n);\n\n// TODO: rename to $font-size-scales-map\n$scales-map: (\n fallback_qpc_uthmani_hafs: (\n tablet: (\n 1: 3.19vh,\n 2: 3.2vh,\n 3: 3.39vh,\n 4: 3.6vh,\n 5: 4.4vh,\n 6: 5.55vh,\n 7: 6.7vh,\n 8: 7.85vh,\n 9: 9vh,\n 10: 10.15vh,\n ),\n mobile: (\n 1: 4vw,\n 2: 4.5vw,\n 3: 5vw,\n 4: 8.9vw,\n 5: 11vw,\n 6: 12vw,\n 7: 13vw,\n 8: 14vw,\n 9: 15vw,\n 10: 16vw,\n ),\n ),\n //TODO: rename qpc_uthmani_hafs to text_qpc_hafs\n qpc_uthmani_hafs:\n (\n tablet: (\n 1: 3.2vh,\n 2: 3.5vh,\n 3: 4vh,\n 4: 4vh,\n 5: 4.4vh,\n 6: 5.56vh,\n 7: 6.72vh,\n 8: 7.88vh,\n 9: 9.04vh,\n 10: 10.27vh,\n ),\n mobile: (\n 1: 4vw,\n 2: 4.5vw,\n 3: 4.6vw,\n 4: 8.9vw,\n 5: 11vw,\n 6: 12vw,\n 7: 13vw,\n 8: 14vw,\n 9: 15vw,\n 10: 16vw,\n ),\n ),\n text_indopak_15_lines: (\n tablet: (\n 1: 3.2vh,\n 2: 3.5vh,\n 3: 4vh,\n 4: 4.2vh,\n 5: 4.3vh,\n 6: 5.64vh,\n 7: 6.98vh,\n 8: 8.32vh,\n 9: 9.66vh,\n 10: 11vh,\n ),\n mobile: (\n 1: 4.4vw,\n 2: 4.8vw,\n 3: 5.1vw,\n 4: 6vw,\n 5: 9.3vw,\n 6: 9.8vw,\n 7: 10.2vw,\n 8: 11vw,\n 9: 12vw,\n 10: 13vw,\n ),\n ),\n text_indopak_16_lines: (\n tablet: (\n 1: 3.1vh,\n 2: 3.2vh,\n 3: 3.4vh,\n 4: 3.7vh,\n 5: 3.95vh,\n 6: 5.08vh,\n 7: 6.21vh,\n 8: 7.34vh,\n 9: 8.47vh,\n 10: 9.6vh,\n ),\n mobile: (\n 1: 4.4vw,\n 2: 4.8vw,\n 3: 5.1vw,\n 4: 6vw,\n 5: 9.3vw,\n 6: 9.8vw,\n 7: 10.2vw,\n 8: 11vw,\n 9: 12vw,\n 10: 13vw,\n ),\n ),\n code_v2: (\n tablet: (\n 1: 2.9vh,\n 2: 3vh,\n 3: 3.2vh,\n 4: 3.5vh,\n 5: 3.7vh,\n 6: 5.16vh,\n 7: 6.62vh,\n 8: 8.08vh,\n 9: 9.54vh,\n 10: 11vh,\n ),\n mobile: (\n 1: 4vw,\n 2: 5vw,\n 3: 5.3vw,\n 4: 8.4vw,\n 5: 10vw,\n 6: 11vw,\n 7: 12vw,\n 8: 13vw,\n 9: 14vw,\n 10: 15vw,\n ),\n ),\n code_v1: (\n tablet: (\n 1: 3.5vh,\n 2: 3.8vh,\n 3: 4vh,\n 4: 4.3vh,\n 5: 4.5vh,\n 6: 6.14vh,\n 7: 7.77vh,\n 8: 9.42vh,\n 9: 11.05vh,\n 10: 12.7vh,\n ),\n mobile: (\n 1: 4vw,\n 2: 5vw,\n 3: 5.9vw,\n 4: 10vw,\n 5: 12vw,\n 6: 13vw,\n 7: 14vw,\n 8: 15vw,\n 9: 16vw,\n 10: 17vw,\n ),\n ),\n translation: (\n tablet: (\n 1: 0.85rem,\n 2: 1rem,\n 3: 1.18rem,\n 4: 1.4rem,\n 5: 2rem,\n 6: 2.3rem,\n 7: 2.7rem,\n 8: 3rem,\n 9: 3.5rem,\n 10: 4rem,\n ),\n mobile: (\n 1: 0.85rem,\n 2: 0.95rem,\n 3: 1.05rem,\n 4: 1.2rem,\n 5: 1.5rem,\n 6: 1.8rem,\n 7: 2.1rem,\n 8: 2.4rem,\n 9: 2.75rem,\n 10: 3rem,\n ),\n ),\n tafsir: (\n tablet: (\n 1: 0.85rem,\n 2: 1.1rem,\n 3: 1.2rem,\n 4: 1.4rem,\n 5: 2rem,\n 6: 2.3rem,\n 7: 2.7rem,\n 8: 3rem,\n 9: 3.5rem,\n 10: 4rem,\n ),\n mobile: (\n 1: 0.85rem,\n 2: 0.95rem,\n 3: 1.1rem,\n 4: 1.2rem,\n 5: 1.4rem,\n 6: 1.8rem,\n 7: 2.1rem,\n 8: 2.4rem,\n 9: 2.75rem,\n 10: 3rem,\n ),\n ),\n tajweed: (\n tablet: (),\n mobile: (),\n ),\n);\n\n$skeleton-height-map: (\n tajweed: (\n desktop: (\n 1: 2.52rem,\n 2: 3.47rem,\n 3: 4.08rem,\n 4: 5.03rem,\n 5: 5.15rem,\n 6: 5.65rem,\n 7: 5.8rem,\n 8: 5.9rem,\n 9: 6.05rem,\n 10: 6.15rem,\n ),\n mobile: (\n 1: 1.9rem,\n 2: 3.4rem,\n 3: 4.1rem,\n 4: 5.03rem,\n 5: 7.24rem,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n qpc_uthmani_hafs: (\n desktop: (\n 1: 4.57vh,\n 2: 4.57vh,\n 3: 4.65vh,\n 4: 4.56vh,\n 5: 4.63vh,\n 6: 6.79vh,\n 7: 9.2vh,\n 8: 11.72vh,\n 9: 14.21vh,\n 10: 16.6vh,\n ),\n mobile: (\n 1: 4.55vw,\n 2: 5.5vw,\n 3: 5.5vw,\n 4: 8.9vw,\n 5: 11vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n text_indopak_15_lines: (\n desktop: (\n 1: 4.56vh,\n 2: 4.56vh,\n 3: 4.66vh,\n 4: 4.65vh,\n 5: 4.56vh,\n 6: 6.96vh,\n 7: 9.66vh,\n 8: 12.38vh,\n 9: 15.03vh,\n 10: 17.65vh,\n ),\n mobile: (\n 1: 6.8vw,\n 2: 7.6vw,\n 3: 8.26vw,\n 4: 6vw,\n 5: 9.3vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n text_indopak_16_lines: (\n desktop: (\n 1: 4.24vh,\n 2: 4.24vh,\n 3: 4.24vh,\n 4: 4.13vh,\n 5: 4.32vh,\n 6: 5.96vh,\n 7: 7.64vh,\n 8: 9.44vh,\n 9: 11.15vh,\n 10: 12.86vh,\n ),\n mobile: (\n 1: 6.8vw,\n 2: 7.6vw,\n 3: 8.26vw,\n 4: 6vw,\n 5: 9.3vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n code_v2: (\n desktop: (\n 1: 4.65vh,\n 2: 4.65vh,\n 3: 4.65vh,\n 4: 4.65vh,\n 5: 4.65vh,\n 6: 7.84vh,\n 7: 11.03vh,\n 8: 14.22vh,\n 9: 17.41vh,\n 10: 20.6vh,\n ),\n mobile: (\n 1: 4.17vw,\n 2: 6.54vw,\n 3: 7.1vw,\n 4: 8.4vw,\n 5: 10vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n code_v1: (\n desktop: (\n 1: 4.62vh,\n 2: 4.55vh,\n 3: 4.5vh,\n 4: 4.45vh,\n 5: 4.65vh,\n 6: 7.16vh,\n 7: 9.94vh,\n 8: 12.63vh,\n 9: 15.55vh,\n 10: 18.6vh,\n ),\n mobile: (\n 1: 5.08vw,\n 2: 7.05vw,\n 3: 8.78vw,\n 4: 10vw,\n 5: 12vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n default: (\n desktop: (\n 1: 4.57vh,\n 2: 4.57vh,\n 3: 4.65vh,\n 4: 4.56vh,\n 5: 4.63vh,\n 6: 6.79vh,\n 7: 9.2vh,\n 8: 11.72vh,\n 9: 14.21vh,\n 10: 16.6vh,\n ),\n mobile: (\n 1: 4vw,\n 2: 5vw,\n 3: 5.4vw,\n 4: 8.9vw,\n 5: 11vw,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n ),\n);\n\n// for now, we're only doing fixed witdth for tablet & desktop.\n// because mobile is relatively more stable compared to desktop\n// TODO: implement fixed on mobile as well\n$line-width-map: (\n tajweed: (\n tablet: (\n 1: calc(12.5 * var(--spacing-mega)),\n 2: calc(16.5 * var(--spacing-mega)),\n 3: calc(18.8 * var(--spacing-mega)),\n 4: calc(22.5 * var(--spacing-mega)),\n 5: calc(23.2 * var(--spacing-mega)),\n 6: calc(25.2 * var(--spacing-mega)),\n 7: calc(25.6 * var(--spacing-mega)),\n 8: calc(26.2 * var(--spacing-mega)),\n 9: calc(27 * var(--spacing-mega)),\n 10: calc(27.3 * var(--spacing-mega)),\n ),\n ),\n fallback_qpc_uthmani_hafs: (\n tablet: (\n 1: 55vh,\n 2: 59vh,\n 3: 63.8vh,\n 4: 65vh,\n 5: 66vh,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n desktop: (\n 1: 56vh,\n 2: 56.2vh,\n 3: 60vh,\n 4: 63vh,\n 5: 81vh,\n 6: 102.6vh,\n 7: 124.3vh,\n 8: 146.2vh,\n 9: 168vh,\n 10: 190vh,\n ),\n ),\n qpc_uthmani_hafs: (\n tablet: (\n 1: 55vh,\n 2: 59vh,\n 3: 63.8vh,\n 4: 65vh,\n 5: 66vh,\n 6: 1rem,\n 7: 1rem,\n 8: 1rem,\n 9: 1rem,\n 10: 1rem,\n ),\n desktop: (\n 1: 60vh,\n 2: 65vh,\n 3: 73.5vh,\n 4: 74vh,\n 5: 81vh,\n 6: 102.8vh,\n 7: 124.6vh,\n 8: 146.4vh,\n 9: 168.2vh,\n 10: 190vh,\n ),\n ),\n text_indopak_15_lines: (\n tablet: (\n 1: 58vh,\n 2: 64vh,\n 3: 76vh,\n 4: 75vh,\n 5: 76vh,\n 6: 98.6vh,\n 7: 121.2vh,\n 8: 143.8vh,\n 9: 166.4vh,\n 10: 189vh,\n ),\n ),\n text_indopak_16_lines: (\n tablet: (\n 1: 55vh,\n 2: 61vh,\n 3: 63vh,\n 4: 65vh,\n 5: 69vh,\n 6: 93.2vh,\n 7: 117.4vh,\n 8: 141.6vh,\n 9: 165.8vh,\n 10: 190vh,\n ),\n ),\n code_v2: (\n tablet: (\n 1: 52vh,\n 2: 54vh,\n 3: 56vh,\n 4: 61vh,\n 5: 64.5vh,\n 6: 90.4vh,\n 7: 116.3vh,\n 8: 142.2vh,\n 9: 168.1vh,\n 10: 194vh,\n ),\n ),\n code_v1: (\n tablet: (\n 1: 54vh,\n 2: 56.5vh,\n 3: 59.5vh,\n 4: 63vh,\n 5: 67vh,\n 6: 91.6vh,\n 7: 116.2vh,\n 8: 140.8vh,\n 9: 165.4vh,\n 10: 190vh,\n ),\n ),\n);\n\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map-get($map, $key);\n }\n @return $map;\n}\n\n@function get-scales($name, $device-type, $map) {\n @return map-deep-get($map, $name, $device-type);\n}\n\n// generate line-width based on font type, font-scale, and screen width;\n@mixin generate-line-width-scales($name) {\n $mobile-scales: get-scales($name, \"mobile\", $line-width-map);\n $tablet-scales: get-scales($name, \"tablet\", $line-width-map);\n $desktop-scales: get-scales($name, \"desktop\", $line-width-map);\n\n @for $i from 1 through constants.$maximum-font-step {\n .#{$name}-line-width-#{$i} {\n @if $mobile-scales != null and map.has-key($tablet-scales, $i) {\n --line-width: #{map.get($mobile-scales, $i)};\n }\n\n @if $tablet-scales != null and map.has-key($tablet-scales, $i) {\n @include breakpoints.tablet {\n --line-width: #{map.get($tablet-scales, $i)};\n }\n }\n\n @if $desktop-scales != null and map.has-key($desktop-scales, $i) {\n @include breakpoints.desktop {\n --line-width: #{map.get($desktop-scales, $i)};\n }\n }\n }\n }\n}\n\n@mixin generate-font-scales($name) {\n $mobile-scales: null;\n $tablet-scales: null;\n $tablet-line-height-scales: null;\n $desktop-skeleton-height-scales: null;\n $mobile-skeleton-height-scales: null;\n\n // reading view skeletons mapping\n @if map.has-key($skeleton-height-map, $name) {\n $desktop-skeleton-height-scales: get-scales(\n $name,\n \"desktop\",\n $skeleton-height-map\n );\n $mobile-skeleton-height-scales: get-scales(\n $name,\n \"mobile\",\n $skeleton-height-map\n );\n } @else {\n $desktop-skeleton-height-scales: get-scales(\n \"default\",\n \"desktop\",\n $skeleton-height-map\n );\n $mobile-skeleton-height-scales: get-scales(\n \"default\",\n \"mobile\",\n $skeleton-height-map\n );\n }\n\n // line heights mapping\n @if map.has-key($line-heights-map, $name) {\n $tablet-line-height-scales: get-scales($name, \"tablet\", $line-heights-map);\n } @else {\n $tablet-line-height-scales: get-scales(\n \"default\",\n \"tablet\",\n $line-heights-map\n );\n }\n\n // font scales mapping\n @if map.has-key($scales-map, $name) {\n $mobile-scales: get-scales($name, \"mobile\", $scales-map);\n $tablet-scales: get-scales($name, \"tablet\", $scales-map);\n } @else {\n $mobile-scales: get-scales(\"default\", \"mobile\", $scales-map);\n $tablet-scales: get-scales(\"default\", \"tablet\", $scales-map);\n }\n\n @for $i from 1 through constants.$maximum-font-step {\n .#{$name}-font-size-#{$i} {\n --skeleton-height: #{map.get($mobile-skeleton-height-scales, $i)};\n --font-size: #{map.get($mobile-scales, $i)};\n --line-height: normal;\n @include breakpoints.tablet {\n --font-size: #{map.get($tablet-scales, $i)};\n --line-height: #{map.get($tablet-line-height-scales, $i)};\n --skeleton-height: #{map.get($desktop-skeleton-height-scales, $i)};\n }\n font-size: var(--font-size);\n }\n }\n}\n\n// Sets a max-width based on the device width. Inspired by the bootstrap container (https://getbootstrap.com/docs/5.0/layout/containers/).\n$large-device-width-ratio: 95%;\n$quran-max-container-width: 112rem;\n@mixin quranContainer() {\n width: 95%;\n\n @include breakpoints.tablet {\n width: $large-device-width-ratio;\n max-width: $quran-max-container-width;\n }\n}\n\n$page-container-max-width: 80rem;\n@mixin pageContainer {\n max-width: $page-container-max-width;\n @include breakpoints.tablet {\n width: 80%;\n }\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/constants\";\n@use \"src/styles/utility\";\n\n@include utility.generate-line-width-scales(\n \"fallback_qpc_uthmani_hafs\"\n); // fallback font's line-width\n\n.container {\n border-block-end: 1px var(--color-borders-hairline) solid;\n margin-block-start: constants.$reading-view-container-top-margin;\n margin-block-end: var(--spacing-mega);\n max-width: 100%;\n}\n\n.mobileCenterText {\n text-align: center;\n direction: rtl;\n @include breakpoints.tablet {\n text-align: start;\n }\n}\n","// TODO: use css variables instead of hardcoded values. See global.scss\n$side-menu-desktop-width: 24rem;\n\n$notes-side-bar-desktop-width: 26rem;\n\n$audio-player-minimized-height: 2rem;\n\n$audio-player-default-height: 3.5rem;\n\n$audio-player-default-desktop-height: 3rem;\n\n$maximum-font-step: 10;\n\n$reading-view-page-min-width: calc(9.5 * var(--spacing-mega));\n\n$reading-view-container-top-margin: 1.5vh;\n","@use \"src/styles/utility\";\n@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n\n.skeletonContainer {\n // the page's bottom margin + the height of the page footer\n margin-block-end: calc(var(--spacing-mega) + var(--spacing-large));\n}\n\n.skeleton {\n margin-inline: auto;\n @include breakpoints.tablet {\n margin-block-start: constants.$reading-view-container-top-margin;\n }\n margin-block-start: var(--spacing-xsmall);\n height: var(--skeleton-height);\n}\n\n.fixedWidth {\n width: var(--line-width, auto);\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/constants\";\n\n.buttonsContainer {\n // disable navigation buttons on mobile\n display: none;\n\n @include breakpoints.tablet {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: fixed;\n inset-block-end: var(--spacing-mega);\n transition: var(--transition-regular);\n z-index: var(--z-index-sticky);\n inset-inline-end: var(--spacing-large);\n }\n}\n\n.prevButton {\n margin-block-end: var(--spacing-micro);\n & svg {\n transform: rotate(180deg);\n }\n}\n\n.audioPlayerOpen {\n margin-block-end: constants.$audio-player-default-height;\n @include breakpoints.tablet {\n margin-block-end: constants.$audio-player-default-desktop-height;\n }\n inset-block-end: var(--spacing-medium);\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/utility\";\n\n@include utility.generate-line-width-scales(\"code_v1\");\n@include utility.generate-line-width-scales(\"code_v2\");\n@include utility.generate-line-width-scales(\"text_indopak_15_lines\");\n@include utility.generate-line-width-scales(\"text_indopak_16_lines\");\n@include utility.generate-line-width-scales(\"qpc_uthmani_hafs\");\n@include utility.generate-line-width-scales(\"tajweed\");\n\n.container {\n max-width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n align-content: center;\n}\n\n.virtuosoScroller {\n & [data-viewport-type=\"window\"] {\n // virtuoso adds position: absolute by default so we need to over-ride it\n position: unset !important;\n }\n}\n"],"sourceRoot":""}
|
