| 1 |
- {"version":3,"sources":["webpack://_N_E/src/components/dls/Slider/Slider.module.scss","webpack://_N_E/src/components/AudioPlayer/AudioPlayerSlider.module.scss","webpack://_N_E/src/styles/_breakpoints.scss","webpack://_N_E/src/styles/_constants.scss","webpack://_N_E/src/components/AudioPlayer/Buttons/VolumeControl/VolumeControl.module.scss","webpack://_N_E/src/components/dls/Badge/Badge.module.scss","webpack://_N_E/src/components/AudioPlayer/Buttons/AudioExperienceMenu/AudioExperienceMenu.module.scss","webpack://_N_E/src/components/dls/Forms/Checkbox/Checkbox.module.scss","webpack://_N_E/src/components/dls/Counter/Counter.module.scss","webpack://_N_E/src/components/AudioPlayer/RepeatAudioModal/RepeatSetting.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/ComboboxItem/ComboboxItem.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/ComboboxItems/ComboboxItems.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/CaretInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/ClearInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/SearchInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Tag/Tag.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Combobox.module.scss","webpack://_N_E/src/components/Verse/AdvancedCopy/SelectorContainer.module.scss","webpack://_N_E/src/components/Verse/AdvancedCopy/VersesRangeSelector.module.scss","webpack://_N_E/src/components/AudioPlayer/RepeatAudioModal/RepeatAudioModal.module.scss","webpack://_N_E/src/components/Error/Error.module.scss","webpack://_N_E/src/components/AudioPlayer/Buttons/SelectReciterMenu.module.scss","webpack://_N_E/src/components/AudioPlayer/OverflowAudioPlayActionsMenuBody.module.scss","webpack://_N_E/src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.module.scss","webpack://_N_E/src/components/AudioPlayer/PlaybackControls.module.scss","webpack://_N_E/src/components/AudioPlayer/RadioPlaybackControl.module.scss","webpack://_N_E/src/styles/_utility.scss","webpack://_N_E/src/components/AudioPlayer/AudioPlayerBody/AudioPlayerBody.module.scss"],"names":[],"mappings":"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","file":"static/css/88f495cf693ab091.css","sourcesContent":[".slider {\n position: relative;\n display: flex;\n align-items: center;\n user-select: none;\n touch-action: none;\n\n &[data-orientation=\"horizontal\"] {\n height: var(--spacing-medium);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n width: var(--spacing-medium);\n height: calc(8 * var(--spacing-mega));\n }\n &[data-disabled] {\n cursor: not-allowed;\n }\n}\n\n.track {\n opacity: var(--opacity-25);\n position: relative;\n flex-grow: 1;\n\n &[data-orientation=\"horizontal\"] {\n height: var(--spacing-micro);\n }\n\n &[data-orientation=\"vertical\"] {\n width: var(--spacing-micro);\n }\n}\n\n.trackBackground {\n background-color: var(--color-background-alternative-faint);\n}\n\n.range {\n position: absolute;\n height: 100%;\n}\n\n.primary {\n background-color: var(--color-background-inverse);\n}\n.secondary {\n background-color: var(--color-background-alternative-deep);\n opacity: var(--opacity-30);\n}\n\n.thumb {\n all: unset;\n display: block;\n width: var(--spacing-small);\n height: var(--spacing-small);\n background-color: var(--color-background-inverse);\n box-shadow: var(--shadow-normal);\n border-radius: var(--border-radius-circle);\n &:hover {\n background-color: var(--color-background-alternative-deep);\n }\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/constants\";\n\n.container {\n margin-block: var(--spacing-xxsmall) calc(-1 * var(--spacing-xsmall));\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: var(--color-text-faded);\n font-size: var(--font-size-xsmall);\n min-height: var(\n --font-size-xsmall\n ); // prevents CLS when the current/total time are not loaded yet\n transition: var(--transition-regular);\n @include breakpoints.tablet {\n font-size: var(--font-size-normal);\n min-height: var(\n --font-size-normal\n ); // prevents CLS when the current/total time are not loaded yet\n margin-block: var(--spacing-medium) calc(-2 * var(--spacing-small));\n }\n}\n\n.sliderContainer {\n display: inline-block;\n position: fixed;\n // stylelint-disable-next-line csstools/use-logical\n left: 50%;\n transform: translate(-50%, 0);\n margin: 0;\n width: 100%;\n height: calc(1.25 * var(--spacing-xxsmall));\n transition: var(--transition-regular);\n inset-block-end: constants.$audio-player-default-height;\n @include breakpoints.tablet {\n inset-block-end: constants.$audio-player-default-desktop-height;\n }\n}\n\n.currentTime,\n.remainingTime {\n display: inline-block;\n line-height: var(\n --line-height-normal\n ); // reset line height to normal, otherwise it will push the buttons in the audioplayer to the bottom\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","// 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",".content{\n margin-block-end: var(--spacing-large);\n padding: var(--spacing-medium);\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",".checkboxContainer {\n text-align: start;\n display: flex;\n flex-direction: column;\n & > div {\n margin-inline: var(--spacing-medium);\n margin-block: var(--spacing-xxsmall);\n }\n}\n\n.experienceTipContainer {\n margin-block-start: var(--spacing-medium);\n}\n\n.link {\n color: var(--color-success-medium);\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n}\n\n.bold {\n font-weight: bold;\n}\n\n.helpText {\n opacity: var(--opacity-85);\n font-size: var(--font-size-small);\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",".container {\n display: flex;\n align-items: center;\n}\n.count {\n padding-inline-start: var(--spacing-medium);\n padding-inline-end: var(--spacing-medium);\n font-size: var(--font-size-normal);\n}\n","@use \"src/styles/breakpoints\";\n\n.inputContainer {\n display: flex;\n align-items: center;\n @include breakpoints.smallerThanMobileM {\n justify-content: space-between;\n }\n}\n.inputContainer + .inputContainer {\n margin-block-start: var(--spacing-small);\n}\n\n.label {\n font-weight: var(--font-weight-bold);\n @include breakpoints.tablet {\n min-width: calc(8.5 * var(--spacing-large));\n }\n}\n.input {\n display: flex;\n align-items: center;\n}\n\n.switchContainer {\n margin-block-end: var(--spacing-xsmall);\n}\n",".input {\n display: none;\n}\n\n.itemLabel {\n cursor: pointer;\n}\n\n.itemContainer {\n color: var(--color-text-default);\n padding-block-start: var(--spacing-xsmall);\n padding-block-end: var(--spacing-xsmall);\n padding-inline-start: var(--spacing-small);\n padding-inline-end: var(--spacing-small);\n}\n\n.enabledItem {\n cursor: pointer;\n &:hover {\n background: var(--color-background-alternative-medium);\n }\n}\n.disabledItem {\n color: var(--color-text-faded);\n}\n\n.checkedItem {\n font-weight: var(--font-weight-bold);\n background: var(--color-background-alternative-medium);\n}\n\n.prefix {\n pointer-events: none;\n display: flex;\n align-items: center;\n padding-inline-end: var(--spacing-xsmall);\n > svg {\n width: var(--spacing-small);\n height: var(--spacing-small);\n }\n}\n\n.labelContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.prefixContainer {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n.suffixContainer {\n background: var(--color-primary-medium);\n border-radius: var(--border-radius-pill);\n padding-block-start: var(--spacing-micro);\n padding-block-end: var(--spacing-micro);\n padding-inline-start: var(--spacing-micro);\n padding-inline-end: var(--spacing-micro);\n color: var(--color-primary-deep);\n text-transform: uppercase;\n font-size: var(--font-size-xsmall);\n}\n","$webkit-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);\n\n.comboboxBodyContainer {\n position: absolute;\n inset-inline: 0;\n inset-block-start: 100%;\n margin-block-start: var(--spacing-micro);\n border-radius: var(--border-radius-default);\n box-shadow: var(--shadow-large);\n &.fixedWidth {\n width: calc(8 * var(--spacing-mega));\n }\n z-index: var(--z-index-dropdown);\n transition: var(--transition-fast);\n background-color: var(--color-background-default);\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n font-size: var(--font-size-normal);\n}\n\n.largeComboboxBodyContainer {\n font-size: var(--font-size-large);\n}\n\n.openedComboboxBodyContainer {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n}\n\n.itemsContainer {\n border-radius: var(--border-radius-default);\n overflow: hidden;\n max-height: calc(5 * var(--spacing-mega));\n overflow-y: scroll;\n\n // Hack to show the scrollbar on OSX, otherwise the scrollbar is hidden and the component does not indicate scrollability\n &::-webkit-scrollbar {\n -webkit-appearance: none;\n width: var(--spacing-xxsmall);\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: var(--border-radius-default);\n background-color: var(--color-background-backdrop);\n box-shadow: $webkit-thumb-shadow;\n }\n}\n",".caretIconButton {\n width: var(--spacing-medium);\n height: var(--spacing-medium);\n position: absolute;\n inset-inline-end: var(--spacing-medium);\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: var(--color-background-alternative-deep);\n svg {\n transition: var(--transition-fast);\n }\n cursor: pointer;\n}\n\n.openedCaretIconButton {\n svg {\n transform: rotate(180deg);\n transition: var(--transition-fast);\n }\n}\n",".clearIconContainer {\n user-select: none;\n background: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-small);\n height: var(--spacing-small);\n color: var(--color-background-alternative-deep);\n position: absolute;\n inset-inline-end: var(--spacing-medium);\n inset-block-start: 50%;\n transform: translateY(-50%);\n outline: none;\n margin-block-start: 0;\n margin-inline-end: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: 0;\n padding-inline-end: 0;\n border: 0;\n box-sizing: border-box;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n text-decoration: none;\n cursor: pointer;\n}\n\n.icon svg {\n display: inline-block;\n width: var(--spacing-small);\n height: var(--spacing-small);\n overflow: hidden;\n}\n",".iconContainer {\n position: absolute;\n inset-block-start: 50%;\n transform: translateY(-50%);\n z-index: 1;\n display: inline-block;\n width: var(--spacing-small);\n height: var(--spacing-small);\n color: var(--color-background-alternative-deep);\n user-select: none;\n}\n\n.icon svg {\n display: flex;\n align-items: center;\n width: var(--spacing-small);\n height: var(--spacing-small);\n overflow: hidden;\n}\n\n.selectSearch {\n inset-inline-start: var(--spacing-medium);\n}\n",".item {\n position: relative;\n display: flex;\n flex: none;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n max-width: 100%;\n margin-block-start: var(--spacing-micro);\n margin-block-end: var(--spacing-micro);\n margin-inline-start: 0;\n margin-inline-end: 0;\n background: var(--color-background-alternative-medium);\n border-radius: var(--border-radius-default);\n user-select: none;\n margin-inline-end: var(--spacing-xxsmall);\n padding-inline-end: var(--spacing-xsmall);\n padding-inline-start: var(--spacing-xsmall);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: var(--font-size-normal);\n}\n\n.largeItem {\n font-size: var(--font-size-large);\n}\n\n.itemContent {\n display: inline-block;\n margin-inline-end: var(--spacing-micro);\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n padding-block-start: var(--spacing-xxsmall);\n padding-block-end: var(--spacing-xxsmall);\n padding-inline-start: var(--spacing-xxsmall);\n padding-inline-end: var(--spacing-xxsmall);\n}\n\n.itemRemove {\n cursor: pointer;\n svg {\n width: var(--spacing-xsmall);\n height: var(--spacing-xsmall);\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.disabledSearch,\n.disabledSearch * {\n pointer-events: none;\n cursor: not-allowed;\n}\n\n.comboboxContainer {\n position: relative;\n max-width: 100%;\n &.fixedWidth {\n width: calc(8 * var(--spacing-mega));\n }\n}\n\n.enabled {\n cursor: text;\n}\n\n.select {\n box-sizing: border-box;\n margin-block-start: 0;\n margin-inline-end: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: 0;\n padding-inline-end: 0;\n position: relative;\n display: inline-block;\n width: 100%;\n}\n\n.selector {\n padding-block-start: var(--spacing-micro);\n padding-block-end: var(--spacing-micro);\n padding-inline-start: var(--spacing-xsmall);\n padding-inline-end: var(--spacing-xsmall);\n position: relative;\n background-color: var(--color-background-default);\n border: 1px solid var(--color-borders-hairline);\n border-radius: var(--border-radius-default);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: var(--spacing-mega);\n padding-inline-end: var(--spacing-mega);\n}\n\n.activeSelector {\n border: 1px solid var(--color-primary-medium);\n}\n.selector:not(.disabledSelector):not(.hasError) {\n &:hover {\n border: 1px solid var(--color-primary-medium);\n }\n}\n.hasError {\n border: 1px solid var(--color-error-medium);\n}\n\n.disabledSelector {\n background: var(--color-background-neutral-grey);\n cursor: not-allowed;\n}\n\n.placeholder {\n position: absolute;\n inset-block-start: 50%;\n transform: translateY(-50%);\n flex: 1;\n overflow: hidden;\n color: var(--color-text-faded);\n white-space: nowrap;\n text-overflow: ellipsis;\n pointer-events: none;\n max-width: 80%;\n}\n\n.overflow {\n position: relative;\n display: flex;\n flex: auto;\n flex-wrap: wrap;\n max-width: 100%;\n align-items: center;\n}\n\n.multiSelectSearchInput {\n color: var(--color-text-default);\n margin-block-start: 0;\n margin-inline-end: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n padding-block-start: 0;\n padding-block-end: 0;\n padding-inline-start: 0;\n padding-inline-end: 0;\n background: 0 0;\n border: none;\n outline: none;\n appearance: none;\n width: 100%;\n}\n\n.smallSearchInput {\n height: var(--spacing-mega);\n}\n.mediumSearchInput {\n height: calc(2 * var(--spacing-large));\n}\n.largeSearchInput {\n height: calc(3 * var(--spacing-medium));\n}\n\n.overflowItem {\n flex: none;\n align-self: center;\n max-width: 100%;\n}\n\n.tagContainer {\n max-width: calc(100% - var(--spacing-xxsmall));\n}\n\n.search {\n position: relative;\n max-width: 100%;\n width: var(--spacing-xxsmall);\n}\n\n.fullWidth {\n width: 100%;\n}\n",".comboboxLabel {\n margin-block: var(--spacing-xsmall);\n font-weight: var(--font-weight-bold);\n}\n.selectedContainer {\n flex: 1;\n margin-block: var(--spacing-micro);\n}\n\n.selectedContainer + .selectedContainer {\n margin-inline-start: var(--spacing-xsmall);\n}\n",".rangeSelectorContainer {\n justify-content: space-between;\n flex-wrap: wrap;\n display: flex;\n}\n.selectorsContainerInvisible {\n display: none;\n}\n",".separator {\n margin-block-start: var(--spacing-medium);\n margin-block-end: var(--spacing-medium);\n margin-inline-start: 0;\n margin-inline-end: 0;\n}\n",".container {\n text-align: center;\n padding-block-start: var(--spacing-xsmall);\n padding-block-end: var(--spacing-xsmall);\n padding-inline-start: var(--spacing-xsmall);\n padding-inline-end: var(--spacing-xsmall);\n > button {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: auto;\n margin-inline-end: auto;\n }\n}\n\n.text {\n text-align: center;\n padding-block-end: var(--spacing-xsmall);\n}\n",".reciterStyle {\n padding-inline-start: var(--spacing-micro);\n color: var(--color-text-faded);\n}\n",".menuWithNestedItems {\n display: flex;\n justify-content: space-between;\n flex: 1;\n align-items: center;\n\n [dir=\"rtl\"] & > svg {\n transform: scaleX(-1);\n }\n}\n","// @use \"src/styles/breakpoints\";\n// // This is a hack to use popover menu with a fixed element\n// // Reference: https://github.com/radix-ui/primitives/issues/781\n.overriddenPopoverMenuContentPositioning {\n // position: relative;\n margin-block-end: var(--spacing-large);\n}\n\n// [dir=\"rtl\"].overriddenPopoverMenuContentPositioning [data-radix-popper-content-wrapper] {\n// transform: translate3d(100%, 0, 0) !important;\n// @include breakpoints.tablet {\n// transform: translate3d(50%, 0, 0) !important;\n// }\n// }\n\n// .overriddenPopoverMenuContentPositioning [data-radix-popper-content-wrapper] {\n// inset-block-start: initial !important;\n// inset-block-end: calc(1.5 * var(--spacing-mega)) !important;\n// position: absolute !important;\n// z-index: var(--z-index-max);\n// inset-inline-start: 100% !important;\n// transform: translate3d(-100%, 0, 0) !important;\n\n// @include breakpoints.tablet {\n// inset-inline-start: 50% !important;\n// transform: translate3d(-50%, 0, 0) !important;\n// }\n\n// @include breakpoints.smallerThanTablet {\n// position: fixed !important;\n// }\n// }\n","@use \"src/styles/breakpoints\";\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.actionItem + .actionItem {\n margin-inline-start: var(--spacing-xsmall);\n @include breakpoints.desktop {\n margin-inline-start: var(--spacing-medium);\n }\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/utility\";\n\n.container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n max-width: 100%;\n padding-inline: var(--spacing-medium);\n @include breakpoints.tablet {\n margin-inline: auto;\n }\n @include utility.pageContainer();\n}\n\n.infoContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n}\n\n.title {\n font-weight: var(--font-weight-semibold);\n line-height: normal;\n}\n\n.description {\n text-align: start;\n line-height: normal;\n}\n\n.actions {\n display: flex;\n align-items: 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","@use \"src/styles/utility\";\n\n.innerContainer {\n @include utility.center-horizontally;\n display: flex;\n padding-inline-start: var(--spacing-xsmall);\n padding-inline-end: var(--spacing-xsmall);\n}\n\n.sliderContainer {\n width: 100%;\n}\n"],"sourceRoot":""}
|
