| 1 |
- {"version":3,"sources":["webpack://_N_E/src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreference.module.scss","webpack://_N_E/src/styles/_breakpoints.scss","webpack://_N_E/src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreferenceSwitcher.module.scss","webpack://_N_E/src/components/QuranReader/ContextMenu.module.scss","webpack://_N_E/src/styles/_constants.scss","webpack://_N_E/src/components/QuranReader/DebuggingObserverWindow/ObserverWindow.module.scss","webpack://_N_E/src/components/QuranReader/Notes/Notes.module.scss","webpack://_N_E/src/components/QuranReader/QueryParamMessage/QueryParamMessage.module.scss","webpack://_N_E/src/components/dls/Collapsible/Collapsible.module.scss","webpack://_N_E/src/components/Notes/NoteModal/PublicReflectionCheckboxDescription/PublicReflectionCheckboxDescription.module.scss","webpack://_N_E/src/components/dls/Forms/Checkbox/Checkbox.module.scss","webpack://_N_E/src/components/dls/Forms/Input/Input.module.scss","webpack://_N_E/src/components/dls/Forms/StarRating/Root.module.scss","webpack://_N_E/src/components/dls/Forms/StarRating/Star.module.scss","webpack://_N_E/src/components/dls/Forms/TextArea/TextArea.module.scss","webpack://_N_E/src/components/FormBuilder/FormBuilder.module.scss","webpack://_N_E/src/components/Notes/NoteModal/ReflectionIntro/ReflectionIntro.module.scss","webpack://_N_E/src/components/dls/HelperTooltip/HelperTooltip.module.scss","webpack://_N_E/src/components/Notes/NoteModal/ShareToQrCheckboxLabel/ShareToQrCheckboxLabel.module.scss","webpack://_N_E/src/components/Notes/NoteModal/NoteModal.module.scss","webpack://_N_E/src/components/Notes/NoteModal/EditNoteMode/EditNoteListItem/NoteListItem.module.scss","webpack://_N_E/src/components/Notes/NoteModal/NoteRangesIndicator/NoteRangesIndicator.module.scss","webpack://_N_E/src/components/Notes/NoteModal/EditNoteMode/NoteRanges/NoteRanges.module.scss","webpack://_N_E/src/components/Notes/NoteModal/EditNoteMode/EditNoteMode.module.scss","webpack://_N_E/src/components/dls/Badge/Badge.module.scss","webpack://_N_E/src/components/dls/Badge/NewLabel/NewLabel.module.scss","webpack://_N_E/src/components/Verse/Notes/Notes.module.scss","webpack://_N_E/src/components/Verse/VerseLink/VerseLink.module.scss","webpack://_N_E/src/components/chapters/ChapterIcon/ChapterIconContainer.module.scss","webpack://_N_E/src/components/QuranReader/PlayButton.module.scss","webpack://_N_E/src/components/chapters/ChapterHeader/ChapterHeader.module.scss","webpack://_N_E/src/components/QuranReader/TranslationView/TranslationView.module.scss","webpack://_N_E/src/components/QuranReader/SidebarNavigation/SidebarSelectionSkeleton.module.scss","webpack://_N_E/src/components/QuranReader/RevelationOrderNavigationNotice.module.scss","webpack://_N_E/src/components/dls/KeyboardInput/KeyboardInput.module.scss","webpack://_N_E/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss","webpack://_N_E/src/components/QuranReader/QuranReader.module.scss","webpack://_N_E/src/styles/_utility.scss","webpack://_N_E/src/pages/_error.module.scss"],"names":[],"mappings":"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","file":"static/css/b2cadf1fe6dd80f5.css","sourcesContent":["@use \"src/styles/breakpoints\";\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n\n.spinner {\n margin-inline-end: var(--spacing-xsmall);\n}\n\n.preferenceTextContainer {\n padding-inline-start: var(--spacing-xsmall);\n}\n\n.iconContainer {\n & > svg {\n width: 15px;\n display: block;\n margin: auto;\n }\n\n @include breakpoints.smallerThanTablet {\n & > svg {\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n }\n }\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","$readingPreferenceMaxWidth: calc(20 * var(--spacing-large));\n$contextMenuReadingPreferenceMaxWidth: calc(10 * var(--spacing-large));\n.container {\n max-width: $readingPreferenceMaxWidth;\n margin-inline-start: auto;\n margin-inline-end: auto;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: var(--spacing-small);\n padding-inline-end: var(--spacing-small);\n}\n\n.surahHeaderContainer {\n margin-block-start: var(--spacing-small);\n margin-block-end: var(--spacing-xxsmall);\n}\n\n.contextMenuContainer {\n max-width: $contextMenuReadingPreferenceMaxWidth;\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n\n.container {\n background: var(--color-background-default);\n background: var(--color-background-elevated);\n box-shadow: var(--shadow-small);\n color: var(--color-text-default);\n text-align: center;\n position: fixed;\n z-index: var(--z-index-sticky);\n transition: transform var(--transition-regular);\n width: 100%;\n inset-block-start: -1px;\n min-height: var(--spacing-medium);\n will-change: transform;\n &:after {\n display: block;\n content: \"\";\n width: var(--progress);\n transition: var(--transition-fast);\n transition-timing-function: linear;\n height: var(--spacing-micro);\n background: var(--color-success-deep);\n position: absolute;\n inset-block-end: calc(-1 * var(--spacing-micro));\n }\n}\n\n.hide {\n display: none;\n height: 0;\n visibility: hidden;\n}\n\n.visibleContainer {\n transform: translate3d(0, var(--navbar-container-height), 0);\n // https://ptgamr.github.io/2014-09-13-translate3d-vs-translate-performance/\n}\n\n.withVisibleBanner {\n transform: translate3d(0, var(--navbar-container-height) 0);\n}\n\n.expandedContainer {\n min-height: var(--spacing-mega);\n}\n\n.withVisibleSideBar {\n @include breakpoints.tablet {\n margin-inline-end: constants.$notes-side-bar-desktop-width;\n width: calc(100% - #{constants.$notes-side-bar-desktop-width});\n }\n}\n\n.chapter {\n font-size: var(--font-size-large);\n margin-inline: var(--spacing-large);\n}\n\n.bold {\n font-weight: var(--font-weight-bold);\n}\n\n.sectionsContainer {\n width: 100%;\n padding-block-start: var(--spacing-micro);\n padding-block-end: var(--spacing-micro);\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding-inline: calc(1.3 * var(--spacing-large));\n @include breakpoints.tablet {\n padding-inline: calc(1.2 * var(--spacing-mega));\n }\n}\n\n.halfSection {\n width: 50%; // when reading preference toggle is hidden\n}\n\n.section {\n width: calc(100% / 3);\n @include breakpoints.smallerThanTablet {\n width: 50%;\n }\n}\n\n.alignStart {\n text-align: start;\n}\n\n.alignEnd {\n text-align: end;\n}\n\n.row {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 100%;\n}\n\n.primaryInfo {\n font-weight: var(--font-weight-semibold);\n}\n.secondaryInfo {\n font-weight: lighter;\n}\n\n.surahName {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.chevronIconContainer {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-inline-start: var(--spacing-xxsmall);\n box-sizing: border-box;\n}\n\n.rotate180 {\n transition: var(--transition-fast);\n transform: rotate(180deg);\n}\n\n.rotateAuto {\n transition: var(--transition-fast);\n transform: rotate(0);\n @include breakpoints.tablet {\n transition: var(--transition-fast);\n transform: rotate(180deg);\n }\n}\n\n.disabledOnMobile {\n pointer-events: none;\n @include breakpoints.tablet {\n pointer-events: inherit;\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","$default-mode-top: 131.6px;\n$default-mode-bottom: 68vh;\n$reading-mode-top: 115.6px;\n$reading-mode-bottom: 70vh;\n\n.container {\n position: fixed;\n inset-block: $default-mode-top $default-mode-bottom;\n z-index: var(--z-index-sticky);\n width: 100%;\n border: 1px solid var(--color-background-inverse);\n}\n\n.readingMode {\n inset-block: $reading-mode-top $reading-mode-bottom;\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n\n.container {\n height: 100%;\n position: fixed;\n inset-block-start: 0;\n inset-inline-end: 0;\n background-color: #2e75ff;\n overflow-x: hidden;\n padding-block-start: var(--navbar-container-height);\n z-index: var(--z-index-default);\n transition: var(--transition-regular);\n width: 0;\n}\n\n.visibleContainer {\n width: calc(100% - (2 * var(--spacing-mega)));\n @include breakpoints.tablet {\n width: constants.$notes-side-bar-desktop-width;\n }\n}\n",".container {\n position: relative;\n padding: var(--spacing-medium);\n margin-inline: var(--spacing-xxsmall);\n background: var(--color-success-faded);\n border-radius: var(--border-radius-default);\n border: 1px solid var(--color-success-faint);\n\n text-align: start;\n [dir=\"rtl\"] & {\n direction: rtl;\n }\n}\n\n.link {\n cursor: pointer;\n color: var(--color-text-link);\n &:hover {\n text-decoration: underline;\n }\n}\n",".header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n}\n\n.headerLeft {\n display: flex;\n}\n\n.prefixContainer {\n display: flex;\n align-items: center;\n margin-inline-end: var(--spacing-xxsmall);\n}\n\n.prefixRotated {\n transform: rotate(180deg);\n}\n\n.suffixContainer {\n display: flex;\n align-items: center;\n margin-inline-end: var(--spacing-xxsmall);\n}\n",".container {\n border: 1px var(--color-borders-hairline) solid;\n border-radius: var(--border-radius-default);\n padding: var(--spacing-xsmall);\n margin-block: var(--spacing-xxsmall);\n}\n\n.title {\n font-weight: var(--font-weight-semibold);\n}\n\n.contentContainer {\n margin-block-start: var(--spacing-small);\n}\n\n.checkboxTitle {\n font-weight: var(--font-weight-semibold);\n margin-block: var(--spacing-small);\n text-decoration: underline;\n}\n",".container {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-block-start: var(--spacing-micro);\n margin-inline-end: var(--spacing-micro);\n margin-block-end: var(--spacing-micro);\n margin-inline-start: var(--spacing-micro);\n}\n\n.checkbox {\n all: unset;\n background-color: var(--color-background-alternative-faint);\n border-radius: var(--border-radius-default);\n border: 1px solid var(--color-secondary-medium);\n width: var(--spacing-medium);\n height: var(--spacing-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n &:hover {\n border: 1px solid var(--color-primary-medium);\n }\n}\n\n.checkbox[data-focus-visible-added] {\n &:focus {\n box-shadow: var(--shadow-small);\n }\n}\n\n.checkbox[data-state=\"checked\"],\n.checkbox[data-state=\"indeterminate\"] {\n border: 1px solid var(--color-borders-hairline);\n}\n.checkbox[disabled] {\n background-color: var(--color-secondary-medium);\n}\n\n.label {\n padding-inline-start: var(--spacing-xsmall);\n font-size: var(--font-size-normal);\n line-height: var(--line-height-normal);\n user-select: none;\n}\n\n.disabled {\n color: var(--color-secondary-medium);\n}\n\n.indicator {\n background: var(--color-primary-medium);\n border-radius: var(--border-radius-default);\n width: 100%;\n height: 100%;\n}\n\n.disabledIndicator {\n background-color: var(--color-secondary-medium);\n}\n","@use \"src/styles/theme\";\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n &.fixedWidth {\n width: calc(8 * var(--spacing-mega));\n }\n &.disabled,\n &.disabled * {\n background: var(--color-background-alternative-medium);\n pointer-events: none;\n cursor: not-allowed;\n }\n border: 1px solid var(--color-borders-hairline);\n &.error {\n border-color: var(--color-error-deep);\n }\n &.success {\n border-color: var(--color-success-medium);\n }\n &.warning {\n border-color: var(--color-warning-medium);\n }\n border-radius: var(--border-radius-rounded);\n padding-inline: var(--spacing-small);\n}\n\n.main {\n padding-inline: var(--spacing-xsmall);\n padding-block: var(--spacing-xsmall);\n\n & .input {\n font-size: var(--font-size-large);\n color: var(--color-text-default);\n font-weight: var(--font-weight-semibold);\n }\n}\n\n.rtlInput {\n [dir=\"rtl\"] & {\n direction: rtl;\n }\n}\n\n.smallContainer {\n height: var(--spacing-mega);\n}\n.mediumContainer {\n height: calc(2 * var(--spacing-large));\n}\n.largeContainer {\n height: calc(3 * var(--spacing-medium));\n}\n\n.label {\n padding-block-start: var(--spacing-micro);\n padding-block-end: var(--spacing-micro);\n padding-inline-start: 0;\n padding-inline-end: 0;\n}\n\n.input {\n padding: 0;\n margin-block-start: var(--spacing-micro);\n margin-inline-end: var(--spacing-micro);\n margin-block-end: var(--spacing-micro);\n margin-inline-start: var(--spacing-micro);\n border: 0;\n height: 80%;\n width: 100%;\n font-size: var(--font-size-normal);\n color: var(--color-text-default);\n background: transparent;\n &:focus {\n outline: none;\n }\n &:disabled {\n background: none;\n }\n &.error {\n color: var(--color-error-deep);\n }\n &.success {\n color: var(--color-success-medium);\n }\n &.warning {\n color: var(--color-warning-medium);\n }\n}\n\n@mixin prefixSuffixContainer {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n}\n\n.clearContainer {\n @include prefixSuffixContainer;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: var(--spacing-micro);\n padding-inline-end: var(--spacing-micro);\n border-start-end-radius: var(--border-radius-default);\n border-end-end-radius: var(--border-radius-default);\n}\n\n.prefixSuffixContainer {\n @include prefixSuffixContainer;\n padding-block-start: 0;\n padding-block-end: 0;\n color: var(--color-text-faded);\n\n > svg {\n width: var(--spacing-large);\n }\n}\n\n.prefix {\n border-start-start-radius: var(--border-radius-default);\n border-end-start-radius: var(--border-radius-default);\n padding-inline-start: var(--spacing-xsmall);\n padding-inline-end: var(--spacing-xxsmall);\n}\n\n.suffix {\n border-inline-start: 1px solid var(--color-background-alternative-deep);\n border-start-end-radius: var(--border-radius-default);\n border-end-end-radius: var(--border-radius-default);\n background: var(--color-background-alternative-medium);\n\n padding-inline-start: var(--spacing-xxsmall);\n padding-inline-end: var(--spacing-xsmall);\n}\n",".container {\n margin-block-start: var(--spacing-micro);\n margin-inline-end: var(--spacing-micro);\n margin-block-end: var(--spacing-micro);\n margin-inline-start: var(--spacing-micro);\n}\n\n.container[data-orientation=\"horizontal\"] {\n align-items: center;\n justify-content: space-between;\n display: flex;\n flex-wrap: wrap;\n}\n",".starButton {\n all: unset;\n width: var(--spacing-mega);\n height: var(--spacing-mega);\n display: inline-grid;\n place-items: center;\n color: hsl(50, 100%, 50%);\n border-radius: var(--border-radius-default);\n\n // if the star is selected but disabled, we still need to show it colorful\n &:disabled.selected {\n color: hsl(50, 100%, 50%);\n }\n // if the star is selected and disabled, we need to show it dimmed\n &:disabled {\n color: var(--color-error-faded);\n }\n}\n\n.starButton:hover {\n // if the star is not disabled, make it colorful\n &:not(:disabled) {\n color: hsl(50, 100%, 45%);\n }\n}\n\n.starButton:focus-visible {\n background-color: hsl(50, 100%, 90%);\n box-shadow: 0 0 0 var(--spacing-micro) hsl(50, 100%, 80%);\n}\n","@use \"src/styles/theme\";\n\n.container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n &.disabled,\n &.disabled * {\n background: var(--color-background-alternative-medium);\n pointer-events: none;\n cursor: not-allowed;\n }\n border: 1px solid var(--color-borders-hairline);\n &.error {\n border-color: var(--color-error-deep);\n }\n &.success {\n border-color: var(--color-success-medium);\n }\n &.warning {\n border-color: var(--color-warning-medium);\n }\n border-radius: var(--border-radius-rounded);\n padding-inline: var(--spacing-small);\n}\n\n.main {\n padding-inline: var(--spacing-xsmall);\n padding-block: var(--spacing-xsmall);\n\n & .input {\n font-size: var(--font-size-large);\n color: var(--color-text-default);\n font-weight: var(--font-weight-semibold);\n }\n}\n\n.label {\n padding-block-start: var(--spacing-micro);\n padding-block-end: var(--spacing-micro);\n padding-inline-start: 0;\n padding-inline-end: 0;\n}\n\n.input {\n padding: 0;\n margin-block-start: var(--spacing-micro);\n margin-inline-end: var(--spacing-micro);\n margin-block-end: var(--spacing-micro);\n margin-inline-start: var(--spacing-micro);\n border: 0;\n height: 80%;\n width: 100%;\n font-size: var(--font-size-normal);\n color: var(--color-text-default);\n background: transparent;\n &:focus {\n outline: none;\n }\n &:disabled {\n background: none;\n }\n &.error {\n color: var(--color-error-deep);\n }\n &.success {\n color: var(--color-success-medium);\n }\n &.warning {\n color: var(--color-warning-medium);\n }\n}\n",".container {\n display: flex;\n flex-direction: column;\n}\n\n.inputContainer {\n margin-block: var(--spacing-xxsmall);\n}\n\n.errorText {\n color: var(--color-error-deep);\n}\n\n.submitButton {\n margin-block-start: var(--spacing-small);\n}\n",".container {\n border: 1px var(--color-borders-hairline) solid;\n border-radius: var(--border-radius-default);\n padding: var(--spacing-xsmall);\n margin-block: var(--spacing-xxsmall);\n}\n\n.title {\n font-weight: var(--font-weight-semibold);\n display: flex;\n align-items: center;\n}\n\n.sectionHeader {\n font-weight: var(--font-weight-bold);\n margin-block-end: var(--spacing-small);\n}\n\n.subSectionHeader {\n margin-block-start: var(--spacing-small);\n}\n\n.sectionContainer {\n margin-block: var(--spacing-small);\n padding-block-end: var(--spacing-small);\n border-bottom: 1px var(--color-borders-hairline) solid;\n}\n","$tooltip-max-width: 200px;\n.questionMarkIconContainer {\n display: flex;\n align-items: center;\n color: var(--color-background-alternative-deep);\n margin-inline: var(--spacing-xsmall);\n & > svg {\n width: var(--spacing-large);\n }\n}\n\n.trigger {\n display: flex;\n}\n\n.content {\n display: flex;\n max-width: $tooltip-max-width;\n}\n",".container {\n display: flex;\n align-items: center;\n}\n\n.bold {\n font-weight: var(--font-weight-bold);\n}\n","@use \"src/styles/breakpoints\";\n\n.buttonContainer {\n display: flex;\n align-items: center;\n flex-direction: column;\n padding-block: var(--spacing-small);\n}\n\n.headerContainer {\n display: flex;\n gap: var(--spacing-small);\n align-items: center;\n\n padding-block: var(--spacing-large);\n @include breakpoints.smallerThanTablet {\n padding-block: var(--spacing-medium);\n }\n}\n\n.titleInput {\n & > div {\n border: none;\n }\n\n input {\n height: 100%;\n font-size: var(--font-size-jumbo);\n font-weight: var(--font-weight-bold);\n }\n}\n\n.bodyInput {\n border: none !important;\n border-radius: 0 !important;\n padding-inline: 0 !important;\n & > div {\n border: none;\n margin-block-start: var(--spacing-large);\n }\n\n textarea {\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-medium);\n\n @include breakpoints.smallerThanTablet {\n min-height: 50vh;\n }\n }\n\n legend {\n color: var(--color-text-inverse);\n font-weight: var(--font-weight-semibold);\n background-color: var(--color-success-medium);\n border-radius: var(--border-radius-rounded);\n padding-inline: var(--spacing-xsmall);\n }\n}\n\n.actionContainer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.editFormButtons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.saveButton {\n margin-inline-end: var(--spacing-small);\n}\n\n.buttonsContainer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-block-start: var(--spacing-small);\n}\n\n.submitContainer {\n display: flex;\n flex-direction: column;\n align-items: end;\n}\n",".container {\n margin-block: var(--spacing-xsmall);\n border: 1px var(--color-borders-hairline) solid;\n padding: var(--spacing-small);\n border-radius: var(--border-radius-rounded);\n box-shadow: var(--shadow-small);\n}\n\n.headerContainer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.noteBody {\n margin-block-end: var(--spacing-small);\n line-break: anywhere;\n white-space: pre-wrap;\n}\n\n.shareButtonContainer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n\n.buttonsContainer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\n",".container {\n border: 1px solid var(--color-primary-medium);\n border-radius: var(--border-radius-rounded);\n background-color: var(--color-background-inverse);\n color: var(--color-text-inverse);\n font-size: var(--font-size-xsmall);\n width: fit-content;\n padding: 0 var(--spacing-micro);\n}\n",".container {\n padding-inline: var(--spacing-small);\n}\n\n.headerContainer {\n padding: var(--spacing-small) 0;\n}\n","@use \"src/styles/breakpoints\";\n\n.container {\n margin-block-end: var(--spacing-large);\n}\n\n.addNoteContainer {\n border: 1px var(--color-borders-hairline) solid;\n padding: var(--spacing-medium);\n margin-block-end: var(--spacing-medium);\n border-radius: var(--border-radius-rounded);\n}\n\n.addNoteContainerHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-block-end: var(--spacing-medium);\n}\n\n.addNoteBtnContainer {\n display: flex;\n align-items: flex-end;\n flex-direction: column;\n margin-block-end: var(--spacing-medium);\n}\n\n.noteDate {\n display: block;\n font-size: var(--font-size-xsmall);\n color: var(--color-text-faded);\n}\n\n.noteHeaderContainer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n",".container {\n position: relative;\n display: inline-block;\n}\n.content {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: var(--color-text-inverse);\n height: var(--spacing-small);\n width: var(--spacing-small);\n background-color: var(--color-success-deep);\n border-radius: var(--border-radius-circle);\n font-size: var(--font-size-xsmall);\n}\n.positionBottomRight {\n inset-block-end: var(--spacing-xxsmall);\n inset-inline-end: var(--spacing-xxsmall);\n}\n",".label {\n margin-inline-start: var(--spacing-xxsmall);\n color: var(--color-success-medium);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-small);\n}\n","@use \"src/styles/breakpoints\";\n\n.container {\n display: flex;\n align-items: center;\n}\n\n.newLabel {\n background-color: unset !important;\n\n @include breakpoints.smallerThanTablet {\n inset-block-end: calc(-1.2 * var(--spacing-small)) !important;\n inset-inline-end: var(--spacing-xxsmall) !important;\n }\n @include breakpoints.tablet {\n inset-block-start: var(--spacing-micro) !important;\n inset-inline-end: calc(-1.2 * var(--spacing-large)) !important;\n }\n}\n\n.newLabelContainer {\n display: flex !important;\n}\n","@use \"src/styles/breakpoints\";\n\n.verseLink {\n opacity: var(--opacity-50);\n text-align: center;\n}\n",".iconContainer {\n span {\n line-height: normal;\n font-family: \"surahnames\";\n font-size: var(--font-size-large);\n }\n}\n\n.iconContainerSmall {\n span {\n font-size: var(--font-size-xsmall);\n }\n}\n\n.iconContainerLarge {\n span {\n font-size: var(--font-size-jumbo);\n }\n}\n\n.iconContainerMega {\n span {\n font-size: calc(1.5 * var(--font-size-jumbo));\n }\n}\n",".container {\n display: flex;\n justify-content: center;\n}\n","@use \"src/styles/breakpoints\";\n.container {\n display: flex;\n justify-content: space-between;\n margin-block-start: var(--spacing-xxsmall);\n margin-block-end: var(--spacing-xxsmall);\n margin-inline-start: 0;\n margin-inline-end: 0;\n padding-block-start: var(--spacing-xxsmall);\n padding-block-end: var(--spacing-xxsmall);\n padding-inline-start: 0;\n padding-inline-end: 0;\n position: relative;\n direction: ltr;\n}\n\n.left {\n display: flex;\n flex-direction: column;\n text-align: start;\n justify-content: space-between;\n}\n\n.right {\n display: flex;\n flex-direction: column;\n text-align: start;\n justify-content: space-between;\n}\n\n.chapterId {\n text-align: end;\n font-size: var(--font-size-large);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-faded);\n z-index: var(--z-index-default);\n}\n\n.bismillahContainer {\n display: flex;\n justify-content: center;\n margin-block-start: var(--spacing-xxsmall);\n margin-block-end: calc(1.5 * var(--spacing-mega));\n}\n.translatedName {\n font-weight: var(--font-weight-bold);\n color: var(--color-text-faded);\n font-size: var(--font-size-xsmall);\n margin-block-end: var(--spacing-xxsmall);\n z-index: var(--z-index-default);\n}\n.arabicSurahNameContainer {\n box-sizing: border-box;\n display: flex;\n justify-content: flex-end;\n padding-block-start: var(--spacing-xsmall);\n margin-block-end: var(--spacing-xxsmall);\n z-index: var(--z-index-default);\n}\n.transliteratedName {\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-large);\n margin-block-end: var(--spacing-xxsmall);\n z-index: var(--z-index-default);\n}\n.actionContainer {\n position: relative;\n z-index: var(--z-index-default);\n}\n\n.translation {\n max-width: calc(5 * var(--spacing-mega));\n @include breakpoints.mobileM {\n max-width: calc(7 * var(--spacing-mega));\n }\n @include breakpoints.tablet {\n max-width: calc(11 * var(--spacing-mega));\n }\n}\n.translationBy {\n color: var(--color-text-faded);\n}\n.changeTranslation {\n color: var(--color-success-medium);\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n}\n.header {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-block-start: var(--spacing-large);\n // setting the value below to avoid the CLS issue when the surahnames font has not loaded yet\n min-height: calc(3.75 * var(--spacing-medium));\n}\n\n.chapterIconContainer {\n // a hack to center the surah name, because the font width is not correct\n // leave a lot of empty space on the left\n /* stylelint-disable-next-line csstools/use-logical */\n margin-right: 0.5em;\n}\n","@use \"src/styles/breakpoints\";\n\n.container {\n max-width: 100%;\n @include breakpoints.tablet {\n max-width: 80%;\n }\n margin-inline-start: auto;\n margin-inline-end: auto;\n}\n\n.wrapper {\n min-height: 100vh;\n}\n",".skeletonContainer {\n display: flex;\n flex-direction: column;\n}\n\n.row {\n width: auto;\n height: calc(2 * var(--spacing-large));\n margin-block-end: var(--spacing-large);\n}\n","@use \"src/styles/breakpoints\";\n\n.sideDrawerViewContainer {\n margin-block-end: var(--spacing-medium);\n padding: var(--spacing-small);\n border: 1px var(--color-borders-hairline) solid;\n border-radius: var(--border-radius-rounded);\n}\n\n.endOfScrollingViewContainer {\n text-align: center;\n\n // Matches the Quran Reader's container width\n max-width: 100%;\n @include breakpoints.tablet {\n max-width: 80%;\n }\n\n margin: var(--spacing-medium) auto;\n}\n\n.link {\n color: var(--color-text-link);\n text-decoration: underline;\n\n &:hover {\n cursor: pointer;\n }\n}\n","@use \"src/styles/breakpoints\";\n\n.container {\n direction: ltr;\n color: var(--color-text-default);\n border: 1px solid var(--color-borders-hairline);\n display: inline-block;\n text-align: center;\n min-width: calc(0.5 * var(--spacing-medium));\n border-radius: var(--border-radius-default);\n font-size: 14px;\n line-height: 28px;\n padding: 0 8px;\n\n > span + span {\n margin-inline-start: 8px;\n }\n @include breakpoints.smallerThanTablet {\n display: none;\n }\n}\n\n.invertedColors {\n color: var(--color-text-inverse);\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n@use \"src/styles/theme\";\n\n@mixin sidebarVisible {\n transform: translateX(0%);\n [dir=\"rtl\"] & {\n transform: translateX(0%); // need to duplicate for specificity\n }\n}\n@mixin sidebarInvisible {\n transform: translateX(-100%);\n [dir=\"rtl\"] & {\n transform: translateX(100%);\n }\n}\n\n.container {\n --sidebar-size: calc(100% - (2 * var(--spacing-mega)));\n @include breakpoints.tablet {\n --sidebar-size: calc(10 * var(--spacing-mega));\n }\n height: 100vh;\n max-height: 100vh;\n position: fixed;\n inset-block-start: 0;\n inset-inline-start: 0;\n padding-block-start: calc(1.5 * var(--spacing-mega));\n background-color: var(--color-background-elevated);\n overflow-x: hidden;\n z-index: var(--z-index-default);\n box-sizing: border-box;\n border-inline-end: 1px solid var(--color-borders-hairline);\n width: var(--sidebar-size);\n padding-inline: var(--spacing-large);\n transition: transform var(--transition-regular);\n display: flex;\n flex-direction: column;\n overflow-y: hidden;\n @include sidebarInvisible();\n}\n\n.visibleContainer {\n @include sidebarVisible();\n}\n.containerAuto {\n @include breakpoints.tablet {\n @include sidebarVisible();\n }\n}\n\n.header {\n display: flex;\n align-items: center;\n}\n.switchContainer {\n flex: 1;\n margin-inline-end: var(--spacing-xxsmall);\n}\n\n.contentContainer {\n margin-block-start: var(--spacing-medium);\n flex: 1;\n display: flex;\n flex-direction: column;\n padding-block-end: var(--spacing-medium);\n}\n.surahBodyContainer {\n display: flex;\n flex: 1;\n & > .verseListContainer {\n margin-inline-start: var(--spacing-xsmall);\n }\n}\n\n.scrollableSectionContainer {\n display: flex;\n flex-direction: column;\n flex: 1;\n position: relative;\n}\n\n.listContainer {\n flex: 1;\n position: relative;\n}\n\n.list {\n position: absolute;\n inset: 0;\n overflow-x: hidden;\n overflow-y: auto;\n padding-block-end: calc(2 * var(--spacing-mega));\n}\n\n.listItem {\n [dir=\"rtl\"] & {\n direction: rtl;\n }\n padding: var(--spacing-xsmall);\n border-radius: var(--border-radius-rounded);\n &:hover {\n background-color: var(--color-background-alternative-faded);\n }\n}\n.selectedItem {\n font-weight: var(--font-weight-bold);\n background-color: var(--color-background-alternative-faded);\n}\n\n.surahListContainer {\n flex: 2;\n display: flex;\n flex-direction: column;\n}\n.verseListContainer {\n padding-inline-start: var(--spacing-xsmall);\n border-inline-start: 1px solid var(--color-borders-hairline);\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.searchInput {\n border: none;\n box-sizing: border-box;\n padding: var(--spacing-xsmall) var(--spacing-xsmall);\n border-radius: var(--border-radius-rounded);\n margin-block-end: var(--spacing-medium);\n width: 100%;\n background-color: var(--color-background-alternative-faded);\n color: var(--color-text-default);\n &::placeholder {\n color: var(--color-text-default);\n opacity: var(--opacity-50);\n }\n}\n\n.spaceOnTop {\n padding-block-start: calc(3.5 * var(--spacing-mega));\n}\n\n.chapterNumber {\n display: inline-block;\n width: calc(2 * var(--spacing-medium));\n}\n\n.tip {\n margin-block: var(--spacing-medium);\n display: none;\n @include breakpoints.tablet {\n display: block;\n }\n & > span {\n font-style: italic;\n color: var(--color-text-default);\n opacity: var(--opacity-50);\n margin-inline-end: var(--spacing-xsmall);\n }\n}\n\n.revelationOrderHeader {\n display: flex;\n flex-direction: row-reverse;\n margin-block-end: var(--spacing-micro);\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n@use \"src/styles/utility\";\n\n$quran-reader-padding: 3rem;\n$virtual-scrolling-height-bandage: calc(\n 4 * var(--spacing-mega)\n); // library react-virtuoso's inline `height` is less than the required `height`.\n// so we're adding a little extra padding at the bottom to make sure the other components are visible.\n// for example for EndOfScrollingButton component\n\n.infiniteScroll {\n @include utility.quranContainer;\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: auto;\n margin-inline-end: auto;\n}\n\n.readingView {\n min-height: 100vh;\n @include breakpoints.smallerThanTablet {\n width: 85%;\n }\n}\n\n.loading {\n text-align: center;\n max-width: 80%;\n margin-block-start: var(--spacing-medium);\n margin-block-end: var(--spacing-medium);\n margin-inline-start: auto;\n margin-inline-end: auto;\n}\n\n.container {\n padding-block-start: $quran-reader-padding;\n padding-inline-start: 0;\n padding-inline-end: 0;\n background-color: var(--color-background-default);\n background-image: var(--color-background-lighten);\n padding-block-end: $virtual-scrolling-height-bandage;\n @include breakpoints.tablet {\n transition: var(--transition-regular);\n margin-inline-end: 0;\n }\n}\n\n.withVisibleSideBar {\n @include breakpoints.tablet {\n margin-inline-end: constants.$notes-side-bar-desktop-width;\n }\n}\n\n.withSidebarNavigationOpenOrAuto {\n @include breakpoints.tablet {\n margin-inline-start: calc(10 * var(--spacing-mega));\n }\n}\n\n.playButton {\n display: flex;\n justify-content: center;\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",".container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: var(--spacing-small);\n padding-inline-end: var(--spacing-small);\n box-sizing: border-box;\n}\n\n.withFullWidth {\n width: 100vw;\n}\n\n.title {\n font-size: var(--font-size-jumbo);\n margin-block-end: var(--spacing-medium);\n text-align: center;\n line-height: normal;\n}\n\n.goBack {\n display: flex;\n justify-content: center;\n margin-block-start: var(--spacing-medium);\n}\n\n.reportBug {\n margin-block-start: var(--spacing-mega);\n}\n"],"sourceRoot":""}
|
