From eefdb6e0ad413592eae3d6816688afe4ede8ea05 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 7 Oct 2020 15:04:44 +0530 Subject: [PATCH 01/74] Latest changes --- components.js | 7162 +++++------ css/main.css | 3648 +++--- css/main.scss | 3732 +++--- index.html | 27856 ++++++++++++++++++++-------------------- qrcode-scanner.min.js | 12 +- 5 files changed, 21205 insertions(+), 21205 deletions(-) diff --git a/components.js b/components.js index be67247..4982964 100644 --- a/components.js +++ b/components.js @@ -1,3582 +1,3582 @@ -//Button -const smButton = document.createElement('template') -smButton.innerHTML = ` - -
- -
`; -customElements.define('sm-button', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smButton.content.cloneNode(true)) - } - - get disabled() { - return this.isDisabled - } - - set disabled(value) { - if (value && !this.isDisabled) { - this.isDisabled = true - this.setAttribute('disabled', '') - this.button.removeAttribute('tabindex') - } else if (!value && this.isDisabled) { - this.isDisabled = false - this.removeAttribute('disabled') - } - } - - dispatch() { - if (this.isDisabled) { - this.dispatchEvent(new CustomEvent('disabled', { - bubbles: true, - composed: true - })) - } else { - this.dispatchEvent(new CustomEvent('clicked', { - bubbles: true, - composed: true - })) - } - } - - connectedCallback() { - this.isDisabled = false - this.button = this.shadowRoot.querySelector('.button') - if (this.hasAttribute('disabled') && !this.isDisabled) - this.isDisabled = true - this.addEventListener('click', (e) => { - this.dispatch() - }) - this.addEventListener('keyup', (e) => { - if (e.code === "Enter" || e.code === "Space") - this.dispatch() - }) - } - }) - -//Input -const smInput = document.createElement('template') -smInput.innerHTML = ` - -
- -
-
-`; -customElements.define('sm-input', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smInput.content.cloneNode(true)) - } - static get observedAttributes() { - return ['placeholder'] - } - - get value() { - return this.shadowRoot.querySelector('input').value - } - - set value(val) { - this.shadowRoot.querySelector('input').value = val; - this.checkInput() - this.fireEvent() - } - - get placeholder() { - return this.getAttribute('placeholder') - } - - set placeholder(val) { - this.setAttribute('placeholder', val) - } - - get type() { - return this.getAttribute('type') - } - - get isValid() { - return this.shadowRoot.querySelector('input').checkValidity() - } - - set disabled(value) { - if (value) - this.shadowRoot.querySelector('.input').classList.add('disabled') - else - this.shadowRoot.querySelector('.input').classList.remove('disabled') - } - set readOnly(value) { - if (value) { - this.shadowRoot.querySelector('input').setAttribute('readonly', '') - this.shadowRoot.querySelector('.input').classList.add('readonly') - } else { - this.shadowRoot.querySelector('input').removeAttribute('readonly') - this.shadowRoot.querySelector('.input').classList.remove('readonly') - } - } - - focusIn = () => { - this.input.focus() - } - - focusOut = () => { - this.input.blur() - } - - fireEvent = () => { - let event = new Event('input', { - bubbles: true, - cancelable: true, - composed: true - }); - this.dispatchEvent(event); - } - - checkInput = (e) => { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; - if (this.input.value !== '') { - if (this.animate) - this.inputParent.classList.add('animate-label') - else - this.label.classList.add('hide') - if (!this.readonly) - this.clearBtn.classList.remove('hide') - } else { - if (this.animate) - this.inputParent.classList.remove('animate-label') - else - this.label.classList.remove('hide') - if (!this.readonly) - this.clearBtn.classList.add('hide') - } - } - - - connectedCallback() { - this.inputParent = this.shadowRoot.querySelector('.input') - this.clearBtn = this.shadowRoot.querySelector('.clear') - this.label = this.shadowRoot.querySelector('.label') - this.helperText = this.shadowRoot.querySelector('.helper-text') - this.valueChanged = false; - this.readonly = false - this.min - this.max - this.animate = this.hasAttribute('animate') - this.input = this.shadowRoot.querySelector('input') - this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') - if (this.hasAttribute('value')) { - this.input.value = this.getAttribute('value') - this.checkInput() - } - if (this.hasAttribute('required')) { - this.input.setAttribute('required', '') - } - if (this.hasAttribute('min')) { - let minValue = this.getAttribute('min') - this.input.setAttribute('min', minValue) - this.min = parseInt(minValue) - } - if (this.hasAttribute('max')) { - let maxValue = this.getAttribute('max') - this.input.setAttribute('max', maxValue) - this.max = parseInt(maxValue) - } - if (this.hasAttribute('minlength')) { - let minValue = this.getAttribute('minlength') - this.input.setAttribute('minlength', minValue) - } - if (this.hasAttribute('maxlength')) { - let maxValue = this.getAttribute('maxlength') - this.input.setAttribute('maxlength', maxValue) - } - if (this.hasAttribute('pattern')) { - this.input.setAttribute('pattern', this.getAttribute('pattern')) - } - if (this.hasAttribute('readonly')) { - this.input.setAttribute('readonly', '') - this.readonly = true - } - if (this.hasAttribute('disabled')) { - this.inputParent.classList.add('disabled') - } - if (this.hasAttribute('helper-text')) { - this.helperText.textContent = this.getAttribute('helper-text') - } - if (this.hasAttribute('type')) { - if (this.getAttribute('type') === 'number') { - this.input.setAttribute('inputmode', 'numeric') - this.input.setAttribute('type', 'number') - } else - this.input.setAttribute('type', this.getAttribute('type')) - } else - this.input.setAttribute('type', 'text') - this.input.addEventListener('input', e => { - this.checkInput() - }) - this.clearBtn.addEventListener('click', e => { - this.value = '' - }) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'placeholder') { - this.shadowRoot.querySelector('.label').textContent = newValue; - this.setAttribute('aria-label', newValue); - } - } - } - }) - -//textarea -const smTextarea = document.createElement('template') -smTextarea.innerHTML = ` - - -`; -customElements.define('sm-textarea', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTextarea.content.cloneNode(true)) - } - static get observedAttributes() { - return ['placeholder'] - } - - get value() { - return this.shadowRoot.querySelector('textarea').value - } - - set value(val) { - this.shadowRoot.querySelector('textarea').value = val; - this.checkInput() - this.fireEvent() - } - - get placeholder() { - return this.getAttribute('placeholder') - } - - set placeholder(val) { - this.setAttribute('placeholder', val) - } - - fireEvent() { - let event = new Event('input', { - bubbles: true, - cancelable: true, - composed: true - }); - this.dispatchEvent(event); - } - - checkInput() { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; - if (this.input.value !== '') { - if (this.animate) - this.inputParent.classList.add('animate-label') - else - this.label.classList.add('hide') - } else { - if (this.animate) - this.inputParent.classList.remove('animate-label') - else - this.label.classList.remove('hide') - } - - this.input.style.height = 'auto' - this.input.style.height = (this.input.scrollHeight) + 'px'; - } - - - connectedCallback() { - this.inputParent = this.shadowRoot.querySelector('.input') - this.clearBtn = this.shadowRoot.querySelector('.clear') - this.label = this.shadowRoot.querySelector('.label') - this.helperText = this.shadowRoot.querySelector('.helper-text') - this.valueChanged = false; - this.animate = this.hasAttribute('animate') - this.input = this.shadowRoot.querySelector('textarea') - this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') - - this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;'); - - if (this.hasAttribute('value')) { - this.input.value = this.getAttribute('value') - this.checkInput() - } - if (this.hasAttribute('required')) { - this.input.setAttribute('required', '') - } - if (this.hasAttribute('readonly')) { - this.input.setAttribute('readonly', '') - } - if (this.hasAttribute('helper-text')) { - this.helperText.textContent = this.getAttribute('helper-text') - } - this.input.addEventListener('input', e => { - this.checkInput() - }) - this.clearBtn.addEventListener('click', e => { - this.value = '' - }) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'placeholder') - this.shadowRoot.querySelector('.label').textContent = newValue; - } - } - }) - -// tab -const smTab = document.createElement('template') -smTab.innerHTML = ` - -
- -
-`; - -customElements.define('sm-tab', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smTab.content.cloneNode(true)) - } -}) - -//chcekbox - -const smCheckbox = document.createElement('template') -smCheckbox.innerHTML = ` - -` -customElements.define('sm-checkbox', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCheckbox.content.cloneNode(true)) - - this.checkbox = this.shadowRoot.querySelector('.checkbox'); - this.input = this.shadowRoot.querySelector('input') - - this.isChecked = false - this.isDisabled = false - } - - static get observedAttributes() { - return ['disabled', 'checked'] - } - - get disabled() { - return this.getAttribute('disabled') - } - - set disabled(val) { - this.setAttribute('disabled', val) - } - - get checked() { - return this.getAttribute('checked') - } - - set checked(value) { - this.setAttribute('checked', value) - } - - dispatch() { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { - this.isChecked = !this.isChecked - this.setAttribute('checked', this.isChecked) - } - }) - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'disabled') { - if (newValue === 'true') { - this.checkbox.classList.add('disabled') - this.isDisabled = true - } else { - this.checkbox.classList.remove('disabled') - this.isDisabled = false - } - } - if (name === 'checked') { - if (newValue == 'true') { - this.isChecked = true - this.input.checked = true - this.dispatch() - } else { - this.isChecked = false - this.input.checked = false - this.dispatch() - } - } - } - } - -}) - -//switch - -const smSwitch = document.createElement('template') -smSwitch.innerHTML = ` - -` - -customElements.define('sm-switch', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSwitch.content.cloneNode(true)) - this.switch = this.shadowRoot.querySelector('.switch'); - this.input = this.shadowRoot.querySelector('input') - this.isChecked = false - this.isDisabled = false - } - - get disabled() { - return this.getAttribute('disabled') - } - - set disabled(val) { - if (val) { - this.disabled = true - this.setAttribute('disabled', '') - this.switch.classList.add('disabled') - } else { - this.disabled = false - this.removeAttribute('disabled') - this.switch.classList.remove('disabled') - - } - } - - get checked() { - return this.isChecked - } - - set checked(value) { - if (value) { - this.setAttribute('checked', '') - this.isChecked = true - this.input.checked = true - } else { - this.removeAttribute('checked') - this.isChecked = false - this.input.checked = false - } - } - - dispatch = () => { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - - connectedCallback() { - if (this.hasAttribute('disabled')) - this.switch.classList.add('disabled') - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { - this.input.click() - } - }) - this.input.addEventListener('click', e => { - if (this.input.checked) - this.checked = true - else - this.checked = false - this.dispatch() - }) - } -}) - -// select -const smSelect = document.createElement('template') -smSelect.innerHTML = ` - -
-
-
- - - -
-
- -
-
`; -customElements.define('sm-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSelect.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - - collapse() { - this.optionList.animate(this.slideUp, this.animationOptions) - this.optionList.classList.add('hide') - this.chevron.classList.remove('rotate') - this.open = false - } - connectedCallback() { - this.availableOptions - this.optionList = this.shadowRoot.querySelector('.options') - this.chevron = this.shadowRoot.querySelector('.toggle') - let slot = this.shadowRoot.querySelector('.options slot'), - selection = this.shadowRoot.querySelector('.selection'), - previousOption - this.open = false; - this.slideDown = [{ - transform: `translateY(-0.5rem)` - }, - { - transform: `translateY(0)` - } - ], - this.slideUp = [{ - transform: `translateY(0)` - }, - { - transform: `translateY(-0.5rem)` - } - ], - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: 'ease' - } - selection.addEventListener('click', e => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - selection.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.addEventListener('optionSelected', e => { - if (previousOption !== e.target) { - this.setAttribute('value', e.detail.value) - this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - if (previousOption) { - previousOption.classList.remove('check-selected') - } - previousOption = e.target; - } - if (!e.detail.switching) - this.collapse() - - e.target.classList.add('check-selected') - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - if (this.availableOptions[0]) { - let firstElement = this.availableOptions[0]; - previousOption = firstElement; - firstElement.classList.add('check-selected') - this.setAttribute('value', firstElement.getAttribute('value')) - this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent - this.availableOptions.forEach((element, index) => { - element.setAttribute('data-rank', index + 1); - element.setAttribute('tabindex', "0"); - }) - } - }); - document.addEventListener('mousedown', e => { - if (!this.contains(e.target) && this.open) { - this.collapse() - } - }) - } -}) - -// option -const smOption = document.createElement('template') -smOption.innerHTML = ` - -
- - - - -
`; -customElements.define('sm-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smOption.content.cloneNode(true)) - } - - sendDetails(switching) { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value'), - switching: switching - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - let validKey = [ - 'ArrowUp', - 'ArrowDown', - 'ArrowLeft', - 'ArrowRight' - ] - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - if (validKey.includes(e.code)) { - e.preventDefault() - this.sendDetails(true) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -// select -const smStripSelect = document.createElement('template') -smStripSelect.innerHTML = ` - -
-
- - Previous - - -
- -
- - Next - - -
-
`; -customElements.define('sm-strip-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripSelect.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - scrollLeft = () => { - this.select.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.select.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) - } - connectedCallback() { - let previousOption, - slot = this.shadowRoot.querySelector('slot'); - this.selectContainer = this.shadowRoot.querySelector('.select-container') - this.select = this.shadowRoot.querySelector('.select') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.nextGradient = this.shadowRoot.querySelector('.right') - this.previousGradient = this.shadowRoot.querySelector('.left') - this.selectOptions - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - const firstElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.previousArrow.classList.add('hide') - this.previousGradient.classList.add('hide') - } else { - this.previousArrow.classList.remove('hide') - this.previousGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - const lastElementObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.nextArrow.classList.add('hide') - this.nextGradient.classList.add('hide') - } else { - this.nextArrow.classList.remove('hide') - this.nextGradient.classList.remove('hide') - } - }, { - root: this.selectContainer, - threshold: 0.95 - }) - - const selectObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.selectContainer.getBoundingClientRect().width - } - }) - - selectObserver.observe(this.selectContainer) - this.addEventListener('optionSelected', e => { - if (previousOption === e.target) return; - if (previousOption) - previousOption.classList.remove('active') - e.target.classList.add('active') - e.target.scrollIntoView({ - behavior: 'smooth', - inline: 'center', - block: 'nearest' - }) - this.setAttribute('value', e.detail.value) - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - previousOption = e.target; - }) - slot.addEventListener('slotchange', e => { - this.selectOptions = slot.assignedElements() - firstElementObserver.observe(this.selectOptions[0]) - lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) - if (this.selectOptions[0]) { - let firstElement = this.selectOptions[0]; - this.setAttribute('value', firstElement.getAttribute('value')) - firstElement.classList.add('active') - previousOption = firstElement; - } - }); - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - } -}) - -// option -const smStripOption = document.createElement('template') -smStripOption.innerHTML = ` - -
- -
`; -customElements.define('sm-strip-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smStripOption.content.cloneNode(true)) - } - sendDetails() { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value') - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -//popup -const smPopup = document.createElement('template') -smPopup.innerHTML = ` - - -`; -customElements.define('sm-popup', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smPopup.content.cloneNode(true)) - - this.allowClosing = false - } - - resumeScrolling = () => { - const scrollY = document.body.style.top; - window.scrollTo(0, parseInt(scrollY || '0') * -1); - setTimeout(() => { - document.body.setAttribute('style', `overflow: auto; top: initial`) - }, 300); - } - - show = (pinned, popupStack) => { - if (popupStack) - this.popupStack = popupStack - if (this.popupStack && !this.hasAttribute('open')) { - this.popupStack.push({ - popup: this, - permission: pinned - }) - if (this.popupStack.items.length > 1) { - this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') - } - this.dispatchEvent( - new CustomEvent("popupopened", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - this.setAttribute('open', '') - this.pinned = pinned - this.popupContainer.classList.remove('hide') - } - this.popup.style.transform = 'translateY(0)'; - document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) - return this.popupStack - } - hide = () => { - if (window.innerWidth < 640) - this.popup.style.transform = 'translateY(100%)'; - else - this.popup.style.transform = 'translateY(1rem)'; - this.popupContainer.classList.add('hide') - this.removeAttribute('open') - if (typeof this.popupStack !== 'undefined') { - this.popupStack.pop() - if (this.popupStack.items.length) { - this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') - } else { - this.resumeScrolling() - } - } else { - this.resumeScrolling() - } - - if (this.inputFields.length) { - setTimeout(() => { - this.inputFields.forEach(field => { - if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') - field.checked = false - if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA') - field.value = '' - }) - }, 300); - } - this.dispatchEvent( - new CustomEvent("popupclosed", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - } - - handleTouchStart = (e) => { - this.touchStartY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.1s' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartY < e.changedTouches[0].clientY) { - this.offset = e.changedTouches[0].clientY - this.touchStartY; - this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) - } - /*else { - this.offset = this.touchStartY - e.changedTouches[0].clientY; - this.popup.style.transform = `translateY(-${this.offset}px)` - }*/ - } - - handleTouchEnd = (e) => { - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.3s' - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndY - this.touchStartY > this.threshold) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } else { - this.show() - } - } else { - if (this.touchEndY > this.touchStartY) - if (this.pinned) { - this.show() - return - } - else - this.hide() - } - } - - movePopup = () => { - this.popup.style.transform = `translateY(${this.offset}px)` - } - - connectedCallback() { - this.pinned = false - this.popupStack - this.popupContainer = this.shadowRoot.querySelector('.popup-container') - this.popup = this.shadowRoot.querySelector('.popup') - this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') - this.offset - this.popupHeader = this.shadowRoot.querySelector('.popup-top') - this.touchStartY = 0 - this.touchEndY = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.popup.getBoundingClientRect().height * 0.3 - this.touchEndAnimataion; - - if (this.hasAttribute('open')) - this.show() - this.popupContainer.addEventListener('mousedown', e => { - if (e.target === this.popupContainer && !this.pinned) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } - }) - - this.popupBodySlot.addEventListener('slotchange', () => { - this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio') - }) - - this.popupHeader.addEventListener('touchstart', (e) => { - this.handleTouchStart(e) - }) - this.popupHeader.addEventListener('touchmove', (e) => { - this.handleTouchMove(e) - }) - this.popupHeader.addEventListener('touchend', (e) => { - this.handleTouchEnd(e) - }) - } - disconnectedCallback() { - this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) - this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) - this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) - } -}) - -//carousel - -const smCarousel = document.createElement('template') -smCarousel.innerHTML = ` - -
- - Previous - - -
- -
- - Next - - -
-
-`; - -customElements.define('sm-carousel', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCarousel.content.cloneNode(true)) - } - - static get observedAttributes() { - return ['indicator'] - } - - scrollLeft = () => { - this.carousel.scrollBy({ - top: 0, - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.carousel.scrollBy({ - top: 0, - left: this.scrollDistance, - behavior: 'smooth' - }) - } - - connectedCallback() { - this.carousel = this.shadowRoot.querySelector('.carousel') - this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') - this.carouselSlot = this.shadowRoot.querySelector('slot') - this.nextArrow = this.shadowRoot.querySelector('.next-item') - this.previousArrow = this.shadowRoot.querySelector('.previous-item') - this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') - this.carouselItems - this.indicators - this.showIndicator = false - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - let frag = document.createDocumentFragment(); - if (this.hasAttribute('indicator')) - this.showIndicator = true - - - let firstVisible = false, - lastVisible = false - const allElementsObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (this.showIndicator) - if (entry.isIntersecting) { - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') - } - else - this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') - if (!entry.target.previousElementSibling) - if (entry.isIntersecting) { - this.previousArrow.classList.remove('expand') - firstVisible = true - } - else { - this.previousArrow.classList.add('expand') - firstVisible = false - } - if (!entry.target.nextElementSibling) - if (entry.isIntersecting) { - this.nextArrow.classList.remove('expand') - lastVisible = true - } - else { - this.nextArrow.classList.add('expand') - - lastVisible = false - } - if (firstVisible && lastVisible) - this.indicatorsContainer.classList.add('hide') - else - this.indicatorsContainer.classList.remove('hide') - }) - }, { - root: this.carouselContainer, - threshold: 0.9 - }) - - const carouselObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - } - }) - - carouselObserver.observe(this.carouselContainer) - - this.carouselSlot.addEventListener('slotchange', e => { - this.carouselItems = this.carouselSlot.assignedElements() - this.carouselItems.forEach(item => allElementsObserver.observe(item)) - if (this.showIndicator) { - this.indicatorsContainer.innerHTML = `` - this.carouselItems.forEach((item, index) => { - let dot = document.createElement('div') - dot.classList.add('dot') - frag.append(dot) - item.setAttribute('rank', index) - }) - this.indicatorsContainer.append(frag) - this.indicators = this.indicatorsContainer.children - } - }) - - this.addEventListener('keyup', e => { - if (e.code === 'ArrowLeft') - this.scrollRight() - else - this.scrollRight() - }) - - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - } - - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'indicator') { - if (this.hasAttribute('indicator')) - this.showIndicator = true - else - this.showIndicator = false - } - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - } -}) - -//notifications - -const smNotifications = document.createElement('template') -smNotifications.innerHTML = ` - -
-
-` - -customElements.define('sm-notifications', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smNotifications.content.cloneNode(true)) - } - - handleTouchStart = (e) => { - this.notification = e.target.closest('.notification') - this.touchStartX = e.changedTouches[0].clientX - this.notification.style.transition = 'initial' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartX < e.changedTouches[0].clientX) { - this.offset = e.changedTouches[0].clientX - this.touchStartX; - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } else { - this.offset = -(this.touchStartX - e.changedTouches[0].clientX); - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } - } - - handleTouchEnd = (e) => { - this.notification.style.transition = 'transform 0.3s, opacity 0.3s' - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndX = e.changedTouches[0].clientX - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndX - this.touchStartX > this.threshold) { - this.removeNotification(this.notification) - } else if (this.touchStartX - this.touchEndX > this.threshold) { - this.removeNotification(this.notification, true) - } else { - this.resetPosition() - } - } else { - if (this.touchEndX > this.touchStartX) { - this.removeNotification(this.notification) - } else { - this.removeNotification(this.notification, true) - } - } - } - - movePopup = () => { - this.notification.style.transform = `translateX(${this.offset}px)` - } - - resetPosition = () => { - this.notification.style.transform = `translateX(0)` - } - - push = (messageBody, type, pinned) => { - let notification = document.createElement('div'), - composition = `` - notification.classList.add('notification') - if (pinned) - notification.classList.add('pinned') - if (type === 'error') { - composition += ` - - - - - ` - } else if (type === 'success') { - composition += ` - - - ` - } - composition += ` -

${messageBody}

- - Close - - - ` - notification.innerHTML = composition - this.notificationPanel.prepend(notification) - if (window.innerWidth > 640) { - notification.animate([{ - transform: `translateX(1rem)`, - opacity: '0' - }, - { - transform: 'translateX(0)', - opacity: '1' - } - ], this.animationOptions).onfinish = () => { - notification.setAttribute('style', `transform: none;`); - } - } else { - notification.setAttribute('style', `transform: translateY(0); opacity: 1`) - } - notification.addEventListener('touchstart', this.handleTouchStart) - notification.addEventListener('touchmove', this.handleTouchMove) - notification.addEventListener('touchend', this.handleTouchEnd) - } - - removeNotification = (notification, toLeft) => { - if (!this.offset) - this.offset = 0; - - if (toLeft) - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(-100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - else { - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - } - } - - clearAll = () => { - Array.from(this.notificationPanel.children).forEach(child => { - this.removeNotification(child) - }) - } - - connectedCallback() { - this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: "ease" - } - this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) - this.notification - this.offset - this.touchStartX = 0 - this.touchEndX = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 - this.touchEndAnimataion; - - this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( - this.removeNotification(e.target.closest('.notification')) - ) - }) - - const observer = new MutationObserver(mutationList => { - mutationList.forEach(mutation => { - if (mutation.type === 'childList') { - if (mutation.addedNodes.length) { - if (!mutation.addedNodes[0].classList.contains('pinned')) - setTimeout(() => { - this.removeNotification(mutation.addedNodes[0]) - }, 5000); - if (window.innerWidth > 640) - this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; - else - this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { - this.notificationPanel.style.padding = 0; - } - } - }) - }) - observer.observe(this.notificationPanel, { - attributes: true, - childList: true, - subtree: true - }) - } -}) - - -// sm-menu -const smMenu = document.createElement('template') -smMenu.innerHTML = ` - -
-
- - options - - - - -
-
- -
-
`; -customElements.define('sm-menu', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenu.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - expand = () => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.classList.add('no-transformations') - this.open = true - this.icon.classList.add('focused') - } - } - collapse() { - if (this.open) { - this.open = false - this.icon.classList.remove('focused') - this.optionList.classList.add('hide') - this.optionList.classList.remove('no-transformations') - } - } - connectedCallback() { - this.availableOptions - this.containerDimensions - this.optionList = this.shadowRoot.querySelector('.options') - let slot = this.shadowRoot.querySelector('.options slot'), - menu = this.shadowRoot.querySelector('.menu') - this.icon = this.shadowRoot.querySelector('.icon') - this.open = false; - menu.addEventListener('click', e => { - if (!this.open) { - this.expand() - } else { - this.collapse() - } - }) - menu.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - if (!this.open) { - this.expand() - } else { - this.collapse() - } - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.optionList.addEventListener('click', e => { - this.collapse() - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - this.containerDimensions = this.optionList.getBoundingClientRect() - this.menuDimensions = menu.getBoundingClientRect() - }); - window.addEventListener('mousedown', e => { - if (!this.contains(e.target) && e.button !== 2) { - this.collapse() - } - }) - if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') { - this.parentNode.setAttribute('oncontextmenu', 'return false') - this.parentNode.addEventListener('mouseup', e => { - if (e.button === 2) { - this.expand() - } - }) - } - } -}) - -// option -const smMenuOption = document.createElement('template') -smMenuOption.innerHTML = ` - -
- -
`; -customElements.define('sm-menu-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenuOption.content.cloneNode(true)) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.click() - } - }) - this.setAttribute('tabindex', '0') - } -}) - -// tab-header - -const smTabHeader = document.createElement('template') -smTabHeader.innerHTML = ` - -
-
- -
-
-
-`; - -customElements.define('sm-tab-header', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTabHeader.content.cloneNode(true)) - - this.indicator = this.shadowRoot.querySelector('.indicator'); - this.tabSlot = this.shadowRoot.querySelector('slot'); - this.tabHeader = this.shadowRoot.querySelector('.tab-header'); - } - - sendDetails(element) { - this.dispatchEvent( - new CustomEvent("switchtab", { - bubbles: true, - detail: { - target: this.target, - rank: parseInt(element.getAttribute('rank')) - } - }) - ) - } - - moveIndiactor(tabDimensions) { - //if(this.isTab) - this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) - //else - //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) - } - - connectedCallback() { - if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; - this.prevTab - this.allTabs - this.activeTab - this.isTab = false - this.target = this.getAttribute('target') - - if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { - this.isTab = true - } - - this.tabSlot.addEventListener('slotchange', () => { - this.tabSlot.assignedElements().forEach((tab, index) => { - tab.setAttribute('rank', index) - }) - }) - this.allTabs = this.tabSlot.assignedElements(); - - this.tabSlot.addEventListener('click', e => { - if (e.target === this.prevTab || !e.target.closest('sm-tab')) - return - if (this.prevTab) - this.prevTab.classList.remove('active') - e.target.classList.add('active') - - e.target.scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - inline: 'center' - }) - this.moveIndiactor(e.target.getBoundingClientRect()) - this.sendDetails(e.target) - this.prevTab = e.target; - this.activeTab = e.target; - }) - let resizeObserver = new ResizeObserver(entries => { - entries.forEach((entry) => { - if (this.prevTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } - }) - }) - resizeObserver.observe(this) - let observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - this.indicator.style.transition = 'none' - if (this.activeTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } else { - this.allTabs[0].classList.add('active') - let tabDimensions = this.allTabs[0].getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - this.sendDetails(this.allTabs[0]) - this.prevTab = this.tabSlot.assignedElements()[0]; - this.activeTab = this.prevTab; - } - } - }) - }, { - threshold: 1.0 - }) - observer.observe(this) - } -}) - -// tab-panels - -const smTabPanels = document.createElement('template') -smTabPanels.innerHTML = ` - -
- Nothing to see here. -
-`; - -customElements.define('sm-tab-panels', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTabPanels.content.cloneNode(true)) - this.panelSlot = this.shadowRoot.querySelector('slot'); - } - connectedCallback() { - - //animations - let flyInLeft = [{ - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [{ - opacity: 0, - transform: 'translateX(1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyOutLeft = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(-1rem)' - } - ], - flyOutRight = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(1rem)' - } - ], - animationOptions = { - duration: 300, - fill: 'forwards', - easing: 'ease' - } - this.prevPanel - this.allPanels - this.previousRank - - this.panelSlot.addEventListener('slotchange', () => { - this.panelSlot.assignedElements().forEach((panel) => { - panel.classList.add('hide-completely') - }) - }) - this.allPanels = this.panelSlot.assignedElements() - this._targetBodyFlyRight = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInRight, animationOptions) - } - this._targetBodyFlyLeft = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInLeft, animationOptions) - } - document.addEventListener('switchtab', e => { - if (e.detail.target !== this.id) - return - - if (this.prevPanel) { - let targetBody = this.allPanels[e.detail.rank], - currentBody = this.prevPanel; - if (this.previousRank < e.detail.rank) { - if (currentBody && !targetBody) - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyRight(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyRight(targetBody) - } - } - } else { - if (currentBody && !targetBody) - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyLeft(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyLeft(targetBody) - } - } - } - } else { - this.allPanels[e.detail.rank].classList.remove('hide-completely') - } - this.previousRank = e.detail.rank - this.prevPanel = this.allPanels[e.detail.rank]; - }) - } -}) - - -const slidingSection = document.createElement('template') -slidingSection.innerHTML = ` - -
- -
-` - -customElements.define('sm-sliding-section', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(slidingSection.content.cloneNode(true)) - } - connectedCallback() { - - } -}) - -const section = document.createElement('template') -section.innerHTML = ` - -
- -
-` - -customElements.define('sm-section', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(section.content.cloneNode(true)) - } +//Button +const smButton = document.createElement('template') +smButton.innerHTML = ` + +
+ +
`; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) + } + + get disabled() { + return this.isDisabled + } + + set disabled(value) { + if (value && !this.isDisabled) { + this.isDisabled = true + this.setAttribute('disabled', '') + this.button.removeAttribute('tabindex') + } else if (!value && this.isDisabled) { + this.isDisabled = false + this.removeAttribute('disabled') + } + } + + dispatch() { + if (this.isDisabled) { + this.dispatchEvent(new CustomEvent('disabled', { + bubbles: true, + composed: true + })) + } else { + this.dispatchEvent(new CustomEvent('clicked', { + bubbles: true, + composed: true + })) + } + } + + connectedCallback() { + this.isDisabled = false + this.button = this.shadowRoot.querySelector('.button') + if (this.hasAttribute('disabled') && !this.isDisabled) + this.isDisabled = true + this.addEventListener('click', (e) => { + this.dispatch() + }) + this.addEventListener('keyup', (e) => { + if (e.code === "Enter" || e.code === "Space") + this.dispatch() + }) + } + }) + +//Input +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
+ +
+
+`; +customElements.define('sm-input', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) + } + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('input').value + } + + set value(val) { + this.shadowRoot.querySelector('input').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + get type() { + return this.getAttribute('type') + } + + get isValid() { + return this.shadowRoot.querySelector('input').checkValidity() + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') + } + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput = (e) => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + if (!this.readonly) + this.clearBtn.classList.remove('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + if (!this.readonly) + this.clearBtn.classList.add('hide') + } + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.helperText = this.shadowRoot.querySelector('.helper-text') + this.valueChanged = false; + this.readonly = false + this.min + this.max + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('input') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + let minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + let maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('helper-text')) { + this.helperText.textContent = this.getAttribute('helper-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + this.input.setAttribute('type', 'number') + } else + this.input.setAttribute('type', this.getAttribute('type')) + } else + this.input.setAttribute('type', 'text') + this.input.addEventListener('input', e => { + this.checkInput() + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') { + this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } + } + } + }) + +//textarea +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + } + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('textarea').value + } + + set value(val) { + this.shadowRoot.querySelector('textarea').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput() { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + } + + this.input.style.height = 'auto' + this.input.style.height = (this.input.scrollHeight) + 'px'; + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.helperText = this.shadowRoot.querySelector('.helper-text') + this.valueChanged = false; + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('textarea') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + + this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;'); + + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + } + if (this.hasAttribute('helper-text')) { + this.helperText.textContent = this.getAttribute('helper-text') + } + this.input.addEventListener('input', e => { + this.checkInput() + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') + this.shadowRoot.querySelector('.label').textContent = newValue; + } + } + }) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +//chcekbox + +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + this.input = this.shadowRoot.querySelector('input') + + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.getAttribute('disabled') + } + + set disabled(val) { + this.setAttribute('disabled', val) + } + + get checked() { + return this.getAttribute('checked') + } + + set checked(value) { + this.setAttribute('checked', value) + } + + dispatch() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + this.isChecked = !this.isChecked + this.setAttribute('checked', this.isChecked) + } + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (newValue === 'true') { + this.checkbox.classList.add('disabled') + this.isDisabled = true + } else { + this.checkbox.classList.remove('disabled') + this.isDisabled = false + } + } + if (name === 'checked') { + if (newValue == 'true') { + this.isChecked = true + this.input.checked = true + this.dispatch() + } else { + this.isChecked = false + this.input.checked = false + this.dispatch() + } + } + } + } + +}) + +//switch + +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + } + + get disabled() { + return this.getAttribute('disabled') + } + + set disabled(val) { + if (val) { + this.disabled = true + this.setAttribute('disabled', '') + this.switch.classList.add('disabled') + } else { + this.disabled = false + this.removeAttribute('disabled') + this.switch.classList.remove('disabled') + + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + this.isChecked = true + this.input.checked = true + } else { + this.removeAttribute('checked') + this.isChecked = false + this.input.checked = false + } + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + + connectedCallback() { + if (this.hasAttribute('disabled')) + this.switch.classList.add('disabled') + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } +}) + +// select +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
+
+
+ + + +
+
+ +
+
`; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + collapse() { + this.optionList.animate(this.slideUp, this.animationOptions) + this.optionList.classList.add('hide') + this.chevron.classList.remove('rotate') + this.open = false + } + connectedCallback() { + this.availableOptions + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + let slot = this.shadowRoot.querySelector('.options slot'), + selection = this.shadowRoot.querySelector('.selection'), + previousOption + this.open = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)` + }, + { + transform: `translateY(0)` + } + ], + this.slideUp = [{ + transform: `translateY(0)` + }, + { + transform: `translateY(-0.5rem)` + } + ], + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + selection.addEventListener('click', e => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + selection.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.addEventListener('optionSelected', e => { + if (previousOption !== e.target) { + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + if (previousOption) { + previousOption.classList.remove('check-selected') + } + previousOption = e.target; + } + if (!e.detail.switching) + this.collapse() + + e.target.classList.add('check-selected') + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + if (this.availableOptions[0]) { + let firstElement = this.availableOptions[0]; + previousOption = firstElement; + firstElement.classList.add('check-selected') + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + this.availableOptions.forEach((element, index) => { + element.setAttribute('data-rank', index + 1); + element.setAttribute('tabindex', "0"); + }) + } + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target) && this.open) { + this.collapse() + } + }) + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
+ + + + +
`; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + sendDetails(switching) { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value'), + switching: switching + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + let validKey = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight' + ] + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + if (validKey.includes(e.code)) { + e.preventDefault() + this.sendDetails(true) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +// select +const smStripSelect = document.createElement('template') +smStripSelect.innerHTML = ` + +
+
+ + Previous + + +
+ +
+ + Next + + +
+
`; +customElements.define('sm-strip-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smStripSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + scrollLeft = () => { + this.select.scrollBy({ + top: 0, + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.select.scrollBy({ + top: 0, + left: this.scrollDistance, + behavior: 'smooth' + }) + } + connectedCallback() { + let previousOption, + slot = this.shadowRoot.querySelector('slot'); + this.selectContainer = this.shadowRoot.querySelector('.select-container') + this.select = this.shadowRoot.querySelector('.select') + this.nextArrow = this.shadowRoot.querySelector('.next-item') + this.previousArrow = this.shadowRoot.querySelector('.previous-item') + this.nextGradient = this.shadowRoot.querySelector('.right') + this.previousGradient = this.shadowRoot.querySelector('.left') + this.selectOptions + this.scrollDistance = this.selectContainer.getBoundingClientRect().width + const firstElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.previousArrow.classList.add('hide') + this.previousGradient.classList.add('hide') + } else { + this.previousArrow.classList.remove('hide') + this.previousGradient.classList.remove('hide') + } + }, { + root: this.selectContainer, + threshold: 0.95 + }) + const lastElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.nextArrow.classList.add('hide') + this.nextGradient.classList.add('hide') + } else { + this.nextArrow.classList.remove('hide') + this.nextGradient.classList.remove('hide') + } + }, { + root: this.selectContainer, + threshold: 0.95 + }) + + const selectObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.selectContainer.getBoundingClientRect().width + } + }) + + selectObserver.observe(this.selectContainer) + this.addEventListener('optionSelected', e => { + if (previousOption === e.target) return; + if (previousOption) + previousOption.classList.remove('active') + e.target.classList.add('active') + e.target.scrollIntoView({ + behavior: 'smooth', + inline: 'center', + block: 'nearest' + }) + this.setAttribute('value', e.detail.value) + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + previousOption = e.target; + }) + slot.addEventListener('slotchange', e => { + this.selectOptions = slot.assignedElements() + firstElementObserver.observe(this.selectOptions[0]) + lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) + if (this.selectOptions[0]) { + let firstElement = this.selectOptions[0]; + this.setAttribute('value', firstElement.getAttribute('value')) + firstElement.classList.add('active') + previousOption = firstElement; + } + }); + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + } +}) + +// option +const smStripOption = document.createElement('template') +smStripOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-strip-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smStripOption.content.cloneNode(true)) + } + sendDetails() { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value') + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +//popup +const smPopup = document.createElement('template') +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false + } + + resumeScrolling = () => { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.setAttribute('style', `overflow: auto; top: initial`) + }, 300); + } + + show = (pinned, popupStack) => { + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + this.popupContainer.classList.remove('hide') + } + this.popup.style.transform = 'translateY(0)'; + document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) + return this.popupStack + } + hide = () => { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(1rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } + } else { + this.resumeScrolling() + } + + if (this.inputFields.length) { + setTimeout(() => { + this.inputFields.forEach(field => { + if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') + field.checked = false + if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA') + field.value = '' + }) + }, 300); + } + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + } + + handleTouchStart = (e) => { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) + } + /*else { + this.offset = this.touchStartY - e.changedTouches[0].clientY; + this.popup.style.transform = `translateY(-${this.offset}px)` + }*/ + } + + handleTouchEnd = (e) => { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() + } + } + + movePopup = () => { + this.popup.style.transform = `translateY(${this.offset}px)` + } + + connectedCallback() { + this.pinned = false + this.popupStack + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.offset + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + this.touchEndAnimataion; + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio') + }) + + this.popupHeader.addEventListener('touchstart', (e) => { + this.handleTouchStart(e) + }) + this.popupHeader.addEventListener('touchmove', (e) => { + this.handleTouchMove(e) + }) + this.popupHeader.addEventListener('touchend', (e) => { + this.handleTouchEnd(e) + }) + } + disconnectedCallback() { + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) + } +}) + +//carousel + +const smCarousel = document.createElement('template') +smCarousel.innerHTML = ` + +
+ + Previous + + +
+ +
+ + Next + + +
+
+`; + +customElements.define('sm-carousel', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) + } + + static get observedAttributes() { + return ['indicator'] + } + + scrollLeft = () => { + this.carousel.scrollBy({ + top: 0, + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.carousel.scrollBy({ + top: 0, + left: this.scrollDistance, + behavior: 'smooth' + }) + } + + connectedCallback() { + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.next-item') + this.previousArrow = this.shadowRoot.querySelector('.previous-item') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') + this.carouselItems + this.indicators + this.showIndicator = false + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + let frag = document.createDocumentFragment(); + if (this.hasAttribute('indicator')) + this.showIndicator = true + + + let firstVisible = false, + lastVisible = false + const allElementsObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (this.showIndicator) + if (entry.isIntersecting) { + this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') + } + else + this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') + if (!entry.target.previousElementSibling) + if (entry.isIntersecting) { + this.previousArrow.classList.remove('expand') + firstVisible = true + } + else { + this.previousArrow.classList.add('expand') + firstVisible = false + } + if (!entry.target.nextElementSibling) + if (entry.isIntersecting) { + this.nextArrow.classList.remove('expand') + lastVisible = true + } + else { + this.nextArrow.classList.add('expand') + + lastVisible = false + } + if (firstVisible && lastVisible) + this.indicatorsContainer.classList.add('hide') + else + this.indicatorsContainer.classList.remove('hide') + }) + }, { + root: this.carouselContainer, + threshold: 0.9 + }) + + const carouselObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + } + }) + + carouselObserver.observe(this.carouselContainer) + + this.carouselSlot.addEventListener('slotchange', e => { + this.carouselItems = this.carouselSlot.assignedElements() + this.carouselItems.forEach(item => allElementsObserver.observe(item)) + if (this.showIndicator) { + this.indicatorsContainer.innerHTML = `` + this.carouselItems.forEach((item, index) => { + let dot = document.createElement('div') + dot.classList.add('dot') + frag.append(dot) + item.setAttribute('rank', index) + }) + this.indicatorsContainer.append(frag) + this.indicators = this.indicatorsContainer.children + } + }) + + this.addEventListener('keyup', e => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'indicator') { + if (this.hasAttribute('indicator')) + this.showIndicator = true + else + this.showIndicator = false + } + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + } +}) + +//notifications + +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
+
+` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + } + + handleTouchStart = (e) => { + this.notification = e.target.closest('.notification') + this.touchStartX = e.changedTouches[0].clientX + this.notification.style.transition = 'initial' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartX < e.changedTouches[0].clientX) { + this.offset = e.changedTouches[0].clientX - this.touchStartX; + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } else { + this.offset = -(this.touchStartX - e.changedTouches[0].clientX); + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } + } + + handleTouchEnd = (e) => { + this.notification.style.transition = 'transform 0.3s, opacity 0.3s' + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndX = e.changedTouches[0].clientX + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndX - this.touchStartX > this.threshold) { + this.removeNotification(this.notification) + } else if (this.touchStartX - this.touchEndX > this.threshold) { + this.removeNotification(this.notification, true) + } else { + this.resetPosition() + } + } else { + if (this.touchEndX > this.touchStartX) { + this.removeNotification(this.notification) + } else { + this.removeNotification(this.notification, true) + } + } + } + + movePopup = () => { + this.notification.style.transform = `translateX(${this.offset}px)` + } + + resetPosition = () => { + this.notification.style.transform = `translateX(0)` + } + + push = (messageBody, type, pinned) => { + let notification = document.createElement('div'), + composition = `` + notification.classList.add('notification') + if (pinned) + notification.classList.add('pinned') + if (type === 'error') { + composition += ` + + + + + ` + } else if (type === 'success') { + composition += ` + + + ` + } + composition += ` +

${messageBody}

+ + Close + + + ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
+
+ + options + + + + +
+
+ +
+
`; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + } + } + collapse() { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + this.menuDimensions = menu.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') { + this.parentNode.setAttribute('oncontextmenu', 'return false') + this.parentNode.addEventListener('mouseup', e => { + if (e.button === 2) { + this.expand() + } + }) + } + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + this.setAttribute('tabindex', '0') + } +}) + +// tab-header + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
+
+ +
+
+
+`; + +customElements.define('sm-tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + } + + sendDetails(element) { + this.dispatchEvent( + new CustomEvent("switchtab", { + bubbles: true, + detail: { + target: this.target, + rank: parseInt(element.getAttribute('rank')) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + //if(this.isTab) + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + //else + //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.prevTab + this.allTabs + this.activeTab + this.isTab = false + this.target = this.getAttribute('target') + + if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { + this.isTab = true + } + + this.tabSlot.addEventListener('slotchange', () => { + this.tabSlot.assignedElements().forEach((tab, index) => { + tab.setAttribute('rank', index) + }) + }) + this.allTabs = this.tabSlot.assignedElements(); + + this.tabSlot.addEventListener('click', e => { + if (e.target === this.prevTab || !e.target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + e.target.classList.add('active') + + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) + this.moveIndiactor(e.target.getBoundingClientRect()) + this.sendDetails(e.target) + this.prevTab = e.target; + this.activeTab = e.target; + }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.sendDetails(this.allTabs[0]) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
+ Nothing to see here. +
+`; + +customElements.define('sm-tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + this.panelSlot = this.shadowRoot.querySelector('slot'); + } + connectedCallback() { + + //animations + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ + opacity: 0, + transform: 'translateX(1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyOutLeft = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(-1rem)' + } + ], + flyOutRight = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(1rem)' + } + ], + animationOptions = { + duration: 300, + fill: 'forwards', + easing: 'ease' + } + this.prevPanel + this.allPanels + this.previousRank + + this.panelSlot.addEventListener('slotchange', () => { + this.panelSlot.assignedElements().forEach((panel) => { + panel.classList.add('hide-completely') + }) + }) + this.allPanels = this.panelSlot.assignedElements() + this._targetBodyFlyRight = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInRight, animationOptions) + } + this._targetBodyFlyLeft = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInLeft, animationOptions) + } + document.addEventListener('switchtab', e => { + if (e.detail.target !== this.id) + return + + if (this.prevPanel) { + let targetBody = this.allPanels[e.detail.rank], + currentBody = this.prevPanel; + if (this.previousRank < e.detail.rank) { + if (currentBody && !targetBody) + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyRight(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyRight(targetBody) + } + } + } else { + if (currentBody && !targetBody) + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyLeft(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyLeft(targetBody) + } + } + } + } else { + this.allPanels[e.detail.rank].classList.remove('hide-completely') + } + this.previousRank = e.detail.rank + this.prevPanel = this.allPanels[e.detail.rank]; + }) + } +}) + + +const slidingSection = document.createElement('template') +slidingSection.innerHTML = ` + +
+ +
+` + +customElements.define('sm-sliding-section', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(slidingSection.content.cloneNode(true)) + } + connectedCallback() { + + } +}) + +const section = document.createElement('template') +section.innerHTML = ` + +
+ +
+` + +customElements.define('sm-section', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(section.content.cloneNode(true)) + } }) \ No newline at end of file diff --git a/css/main.css b/css/main.css index 5941ad4..9c0fd6f 100644 --- a/css/main.css +++ b/css/main.css @@ -1,1825 +1,1825 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: "Roboto", sans-serif; -} - -body { - --accent-color: #4527A0; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --hue: 255; - --saturation: 61%; - --lightness: 39%; - color: rgba(var(--text-color), 1); - font-size: 16px; - background-size: cover; -} - -body[data-theme=dark] { - --accent-color: #a293d0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); -} -body[data-theme=dark] .flo-balance-card { - color: rgba(var(--text-color), 1); -} - -a { - font-weight: 600; - text-decoration: none; - color: var(--accent-color); -} - -.dark-text { - color: #111; -} - -h1 { - font-size: 3.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.8rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: "Poppins", sans-serif; - font-weight: 600; -} - -p { - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} - -strong { - font-weight: 500; -} - -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: "Poppins", sans-serif; -} -button:focus { - outline: thin solid rgba(var(--text-color-light), 0.4); -} -button:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); -} -button:disabled ~ .loader { - opacity: 0; -} - -::-moz-focus-inner { - border: none; -} - -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1em; -} - -.bottom-margin { - margin-bottom: 1.5rem; -} - -.top-margin { - margin-top: 1.5rem; -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; -} - -.align-center { - align-items: center; -} - -.direction-column { - flex-direction: column; -} - -.justify-right { - margin-left: auto; -} - -.space-between { - justify-content: space-between; -} - -.label { - margin-bottom: 0.4rem; -} - -.light-text { - opacity: 0.7; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.breakable { - word-break: break-all; -} - -.separator { - padding: 0.1em; -} - -.no-transformations { - transform: none !important; -} - -.capitalize { - text-transform: capitalize; -} - -sm-button[variant=outlined] { - --accent-color: rgba(var(--text-color), 1); -} - -.loader { - fill: none; - stroke-width: 10; - stroke: var(--accent-color); - height: 2rem; - width: 2rem; - overflow: visible; - stroke-dashoffset: 230; - stroke-dasharray: 230; - padding: 2px; - justify-self: center; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -210; - } -} -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -220; - } -} -.action { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0; - background: none; -} -.action:disabled .primary-btn { - background: none; -} -.action:focus { - outline: none; -} -.action h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; -} -.action .btn { - z-index: 2; -} -.action .loader { - position: absolute; - z-index: 1; - padding: 0.4em; - stroke-dashoffset: 220; - stroke-dasharray: 220; -} -.action .loader:not(.animate-loader) { - opacity: 0; -} -.action .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; -} - -.clip { - clip-path: circle(0) !important; -} - -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; -} - -.expand { - width: 100%; -} - -.fade-left { - animation: fadeleft 0.3s; -} - -.fade-right { - animation: faderight 0.3s; -} - -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1em); - } - to { - opacity: 1; - transform: none; - } -} -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1em); - } - to { - opacity: 1; - transform: none; - } -} -.logo { - display: flex; - align-items: center; -} -.logo h4 { - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); -} -.logo .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; -} - -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.8rem; -} - -*:empty + .empty-state { - display: grid; -} - -.empty-state { - display: none; - place-items: center; - width: 100%; -} -.empty-state svg { - stroke: rgba(var(--text-color), 0.8); - height: 12em; - width: 12em; -} - -.container-header { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; -} -.container-header h2 { - flex: 1; -} -.container-header button { - align-self: center; -} - -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4em 1em; -} - -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; -} - -.card { - border-radius: 0.6rem; - padding: 1.5em; - background: rgba(var(--foreground-color), 1); -} - -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { - flex-direction: column; -} -#confirmation h4, -#prompt h4 { - font-weight: 500; - margin-bottom: 1.5rem; -} -#confirmation .flex sm-button:first-of-type, -#prompt .flex sm-button:first-of-type { - margin-right: 0.6em; - margin-left: auto; -} - -.refresh { - margin-top: 0.6em; - margin-bottom: 1em; -} - -sm-popup .illustration { - position: relative; - height: 4rem; - width: 4rem; - padding: 1rem; - stroke: var(--accent-color); - margin-bottom: 1rem; - border-radius: 5rem; - background: rgba(var(--text-color), 0.06); -} -sm-popup sm-input:not(:last-of-type) { - margin-bottom: 1rem; -} -sm-popup p { - margin-block-end: 1rem; -} -sm-popup .action h4 { - padding: 0.5rem 1rem; - font-weight: 500; -} -sm-popup .message { - margin-bottom: 0.2rem; -} -sm-popup .message + .copy-row { - margin-bottom: 1.5rem; -} -sm-popup h5:not(.tag) { - font-family: "Roboto", sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; -} - -#reader { - overflow: hidden; -} - -.my-qr-code { - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} - -#qr_code_popup::part(popup) { - height: 90vh; -} -#qr_code_popup::part(popup-body) { - padding: 0; -} -#qr_code_popup .popup-header { - padding-bottom: 1.5rem; -} -#qr_code_popup sm-tab-header { - margin: 0 auto; - transform: translateX(-1rem); -} -#qr_code_popup sm-panel { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} -#qr_code_popup video { - width: 100% !important; - object-fit: cover; -} -#qr_code_popup p { - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; -} - -sm-input[type=number] { - font-size: 1.2rem; -} - -.popup-header { - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; - width: 100%; -} -.popup-header .icon { - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; - cursor: pointer; -} -.popup-header button { - width: auto; - margin-left: auto; -} - -details, summary { - margin-bottom: 1rem; -} - -summary { - cursor: pointer; -} - -details h5 { - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; -} -details p { - font-size: 0.9rem; - line-height: 1.4; -} - -#sign_in_popup::part(background) { - background: rgba(var(--foreground-color), 1); -} -#sign_in_popup h3 { - margin-top: 2rem; -} -#sign_in_popup h4 { - font-weight: 500; - margin-bottom: 3rem; -} -#sign_in_popup button { - margin: 1rem 0; -} -#sign_in_popup p { - margin-top: 1rem; - margin-bottom: 0 !important; -} - -.primary-btn { - background: var(--accent-color); - justify-content: center; - color: rgba(var(--foreground-color), 1); -} - -#main_header { - align-items: center; - padding: clamp(1rem, 2vw, 2rem) 1rem; - justify-content: space-between; -} - -.icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; -} - -#navbar { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; -} -#navbar .navbar-item { - position: relative; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.8rem; - border-radius: 0.4em; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.8em; - text-transform: capitalize; - width: 100%; - font-weight: 600; -} -#navbar .navbar-item h5 { - margin-top: 0.4em; -} -#navbar .navbar-item .icon { - stroke: rgba(var(--text-color), 1); -} -#navbar .active { - opacity: 1; -} - -.banking { - stroke-width: 4; -} - -#home_page { - padding: 0 0 4rem 0; -} -#home_page .left { - width: auto; - border-radius: 0.6rem; -} -#home_page .left h3, #home_page .left h4, #home_page .left p { - padding: 0 1.5rem; -} -#home_page .left h3 { - font-size: 2rem; - margin-bottom: 1rem; -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; -} -.user-panel .icon { - stroke: rgba(var(--foreground-color), 1); -} -.user-panel .action { - width: auto; - justify-content: flex-end; -} -.user-panel .action h4 { - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto; -} -.user-panel .action .loader { - align-self: flex-end; -} -.user-panel .action .clip { - clip-path: circle(0 at 100% 0) !important; -} - -#deposit { - padding-top: 1.5rem; -} -#deposit .flex sm-button { - margin-bottom: 1.5rem; -} -#deposit .user-panel { - padding: 0 1rem; -} -#deposit .display-balance { - grid-template-areas: "rupee rupee" "flo flo"; -} - -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: "rupee ." "flo flo"; - gap: 0.8rem; - margin-top: 1rem; -} -.display-balance .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; -} - -.balance { - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; -} -.balance h4 { - font-size: 2rem; - font-family: "Roboto", sans-serif; - font-weight: 500; - text-shadow: 1px 0.1rem 0.2rem #00000040; - word-break: break-all; - flex: 1; -} -.balance h5 { - opacity: 0.8; - margin-bottom: 0.2rem; -} -.balance .tooltip { - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; -} - -.rupee-balance-card { - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; -} -.rupee-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; -} - -.in-process-balance { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; -} -.in-process-balance .tooltip { - box-shadow: 0 0 0 0.4rem #ff4857 inset; -} - -.flo-balance-card { - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; -} -.flo-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem #1b0980 inset; -} - -.tooltip { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; - display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; -} -.tooltip .tt-icon { - display: inline-flex; - width: 3rem; - height: 3rem; - align-items: center; - justify-content: center; - margin-left: auto; - font-weight: 600; -} -.tooltip .tooltip-text { - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; -} -.tooltip:hover { - clip-path: circle(100%); -} - -.user-type { - font-weight: 500; -} - -.options-tab { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} - -.option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.4rem; - width: 5rem; - text-transform: capitalize; - transition: transform 0.3s; - -webkit-tap-highlight-color: transparent; - cursor: pointer; -} -.option .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 2rem; - padding: 0.8rem; - margin-bottom: 0.6rem; -} -.option h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} -.option:active { - transform: scale(0.95); -} - -.request-icon { - transform: rotate(180deg); -} - -.notification-dot::after { - content: ""; - position: absolute; - z-index: 1; - top: 0; - right: 0; - height: 0.6em; - width: 0.6em; - background-color: #E53935; - border-radius: 0.4em; - transition: transform 0.3s; -} - -.shrink.notification-dot::after { - transform: scale(0); -} - -#deposit .container-header, -#withdraw .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); -} - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; -} - -sm-tab { - text-transform: capitalize; -} -sm-tab::part(tab) { - padding: 0.4rem 1.2rem; -} - -sm-panel { - width: 100%; -} - -.request { - display: grid; - gap: 1rem; - padding: 1.5em; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); -} -.request h4 { - font-weight: 400; - font-size: 0.9rem; -} -.request h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; -} -.request .action { - align-self: flex-end; -} -.request .amount { - font-family: "Roboto", sans-serif; -} -.request button { - width: auto; -} -.request .flex { - align-items: center; - justify-content: flex-end; - justify-self: flex-end; -} -.request .flex button { - margin: 0; -} -.request.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; -} -.request.placeholder h4, .request.placeholder h5 { - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); -} -.request.placeholder .btns { - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; -} -.request.placeholder .btns h4 { - width: 6rem; -} -.request.placeholder h5 { - width: 50%; -} -.request.placeholder .time { - width: 3rem; -} -.request.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.request.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.request.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.request.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.request.placeholder:nth-of-type(6) { - animation-delay: 0.5s; -} - -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1em; - width: 100%; -} - -.page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; -} -.page .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: ". ." "search search"; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; - z-index: 2; -} -.page .container-header .search { - grid-area: search; -} -.page .container-header .search input { - padding: 1em; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2em; -} -.page .container-header .search input:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); -} - -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 0.5rem; - width: auto; -} -.copy-row h4 { - margin-bottom: 0; - font-weight: 400; -} -.copy-row .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; -} -.copy-row .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; -} -#profile_page button { - align-self: flex-start; -} - -.complaint { - display: grid; - gap: 1.5rem 0; -} -.complaint .complaint-actions { - align-items: center; - margin: 1.5rem 0 0 0; -} -.complaint .processed { - color: #007732; -} -.complaint .unprocessed { - color: #d43125; -} -.complaint .processed, -.complaint .unprocessed { - margin-bottom: 1.5rem; -} -.complaint button .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; -} - -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page sm-select { - margin-bottom: 1.5rem; -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; -} -.complaint-placeholder h4, -.complaint-placeholder h5 { - border-radius: 0.2rem; -} -.complaint-placeholder h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; -} -.complaint-placeholder h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.8rem 0.8rem; -} -.complaint-placeholder .demo-btn { - padding: 0.8rem 3rem; -} - -@keyframes pulse { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; -} -#main_loader sm-button { - margin-left: 0; - margin-top: 1rem; -} -#main_loader svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; -} -#main_loader h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16em; -} - -#upi_txId_section .copy-row { - margin-bottom: 1.5rem; -} - -@keyframes popup { - 0% { - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); - } - 40% { - transform: translateY(0) scale(0.2); - } - 41% { - transform: translateY(0) scale(0.2); - } - 50% { - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100% { - stroke-dashoffset: 0; - } -} -#transaction_result { - z-index: 12; -} -#transaction_result #transaction_heading { - margin-bottom: 1rem; -} -#transaction_result .copy-row { - grid-template-areas: "label label" ". ."; - margin-top: 1rem; - gap: 0 1rem; -} -#transaction_result .copy-row h4 { - font-weight: 500; -} -#transaction_result h5 { - grid-area: label; - color: rgba(var(--text-color), 0.7); -} -#transaction_result h4, #transaction_result h5, #transaction_result p { - text-align: center; -} -#transaction_result > h4 { - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; -} -#transaction_result sm-button { - align-self: center; - width: auto; -} - -#success_svg, #failure_svg { - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_svg polyline { - fill: none; - stroke: #00C853; -} - -#failure_svg line { - stroke: #EF5350; -} - -.rupee-symbol { - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee .copy-row { - margin-bottom: 1rem; -} - -.activity-container { - display: grid; - gap: 1rem; -} - -.activity { - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: "icon type amount" "icon receiver time"; - align-items: center; - cursor: pointer; - transition: transform 0.3s; -} -.activity:active { - transform: scale(0.95); -} -.activity .icon { - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.8rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; -} -.activity .activity-type { - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.8rem; -} -.activity .activity-receiver { - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.activity .activity-amount { - text-align: right; - grid-area: amount; - font-family: "Roboto", sans-serif; -} -.activity .activity-time { - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; -} -.activity .pending { - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; -} -.activity.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; -} -.activity.placeholder .activity-type, -.activity.placeholder .activity-receiver { - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; -} -.activity.placeholder .activity-type { - width: 50%; -} -.activity.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.activity.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.activity.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.activity.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.activity.placeholder:nth-of-type(6) { - animation-delay: 0.5s; -} -.activity.placeholder:nth-of-type(7) { - animation-delay: 0.6s; -} -.activity.placeholder:nth-of-type(8) { - animation-delay: 0.7s; -} - -.back-arrow { - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} - -.select { - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; -} -.select:first-of-type:not(:last-of-type) { - border-radius: 0.3rem 0.3rem 0 0; -} -.select + .select { - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); -} -.select label { - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.8rem 1rem; -} -.select input[type=radio] { - display: none; -} -.select input:checked ~ .radio .outer-ring { - stroke: var(--accent-color); -} -.select input:checked ~ .radio .inner-disc { - transform: none; -} -.select .radio { - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; -} -.select .radio .outer-ring { - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); -} -.select .radio .inner-disc { - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -.select .remove { - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; -} -.select .tag { - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; -} -.select h4 { - font-weight: 400; -} - -.add-upi { - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page header { - padding: 0.5rem 0; -} -#transaction_page header .back-arrow { - grid-area: back; -} -#transaction_page header h4 { - text-transform: capitalize; -} -#transaction_page h5 { - font-weight: 400; - font-family: "Roboto", sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; -} -#transaction_page p:last-of-type { - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; -} -#transaction_page #transaction_details { - position: relative; - margin: 1.5rem 0; - padding: 1.5rem; - background-color: rgba(var(--text-color), 0.06); - max-width: 50ch; - border-radius: 0.5rem; -} -#transaction_page #transaction_details .icon { - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); -} -#transaction_page #transaction_details .success { - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); -} -#transaction_page #transaction_details .flex { - margin-bottom: 1.5rem; - align-items: baseline; -} -#transaction_page #transaction_details strong { - font-weight: 500; -} -#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { - margin-bottom: 1.5rem; - margin-top: -0.4rem; -} -#transaction_page #transaction_details strong:not(:last-of-type) { - margin-bottom: 1rem; -} -#transaction_page #transaction_details sm-button { - width: max-content; - margin-top: 0.6rem; -} -#transaction_page .transaction-amount { - font-size: 2rem; - font-weight: 400; -} -#transaction_page #transaction_time { - right: 0; - position: absolute; - margin: 1.5rem; -} - -#people_container { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} - -#add_person_btn { - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - text-align: center; - transition: transform 0.3s; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} -#add_person_btn:active { - transform: scale(0.95); -} -#add_person_btn .icon { - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; -} - -.person { - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; -} -.person:active { - transform: scale(0.95); -} - -.person-initials, #person_initials { - display: flex; - justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; - font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; -} - -.person-name { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - text-transform: capitalize; - text-align: center; -} - -#person_popup > .flex:first-of-type { - margin: 1rem 0; -} -#person_popup > .flex:first-of-type .flex { - margin-top: 0.5rem; -} -#person_popup > .flex:first-of-type .flex .icon { - height: 2.6rem; - width: 2.6rem; - padding: 0.8rem; - cursor: pointer; - stroke-width: 8; -} -#person_popup > .flex:first-of-type .flex .icon:hover { - background: rgba(var(--text-color), 0.06); -} -#person_popup h3 { - text-transform: capitalize; -} -#person_popup h5 { - font-weight: 500; - opacity: 0.8; -} -#person_popup .copy-row { - margin-bottom: 1.5rem; -} -#person_popup #show_person_name { - padding: 0.5rem 1rem; - border-radius: 0.4rem; - max-width: 30ch; -} -#person_popup #show_person_name:focus { - outline: none; - background: rgba(var(--text-color), 0.1); -} - -#activity_page .empty-state, -#request_page .empty-state, -#settings_page .empty-state { - justify-content: left; -} - -#settings_page h4 { - margin-top: 2rem; - margin-bottom: 0.6rem; -} -#settings_page .copy-row h4 { - margin: 0; -} -#settings_page p { - color: rgba(var(--text-color), 0.7); -} -#settings_page sm-button { - margin-top: 0.8rem; -} -#settings_page .flex { - max-width: 60ch; -} -#settings_page .my-qr-code { - margin-bottom: 1.5rem; - height: 14rem; -} -#settings_page .my-qr-code img { - height: 100%; -} - -@media only screen and (max-width: 640px) { - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-areas: "." "left"; - grid-template-columns: minmax(0, 1fr); - } - #home_page .left, #deposit .left { - grid-area: left; - } - - sm-select { - width: 100%; - } - - .hide-on-mobile { - display: none !important; - } - - #transaction_page { - padding-top: 0; - } - #transaction_page header { - padding: 1.5rem 0; - } - - #deposit .user-panel { - padding: 0; - } - - video { - height: 100vw; - } -} -@media only screen and (min-width: 640px) { - .hide-on-desktop { - display: none !important; - } - - body { - padding: 0 2rem; - margin-left: 4rem; - } - - sm-popup { - background: rgba(var(--foreground-color), 1); - } - - sm-popup::part(popup) { - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - } - #navbar .navbar-item { - display: flex; - width: auto; - padding: 0.8rem 1.2rem; - } - #navbar .navbar-item .icon { - height: 1.2rem; - width: 1.2rem; - } - #navbar .navbar-item h5 { - display: none; - } - #navbar .navbar-item:hover { - opacity: 1; - } - #navbar .logo { - margin: 1.5rem 1rem; - } - #navbar .logo h4 { - display: none; - } - #navbar .logo .main-logo { - height: 1.2rem; - width: 1.2rem; - } - #navbar .active { - background: rgba(var(--text-color), 0.06); - } - - .page { - padding-bottom: 2rem; - } - - #sign_in_popup { - width: 24rem; - } - - #home_page { - padding-top: 0.5rem; - } - #home_page .left { - margin-top: 1rem; - } - - .options-tab, #people_container { - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.8rem; - } - - .display-balance .balance { - height: 9rem; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; - } - .request .time { - grid-area: time; - margin-bottom: 0 !important; - } - .request button { - width: max-content; - margin-left: auto; - } - .request .breakable { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - #deposit .user-panel { - padding-right: 0; - } - - #settings_page .copy-row { - display: inline-grid; - } -} -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; - } - - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: ". . " "header header"; - } - .complaint .complaint-actions { - grid-area: header; - } - .complaint .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; - } - .complaint .right { - display: flex; - justify-content: center; - flex-direction: column; - } - - #navbar .navbar-item h5 { - font-size: 0.9rem; - margin: 0; - display: block; - } - #navbar .icon { - margin-right: 0.8rem; - } - #navbar .logo h4 { - display: block; - font-size: 1rem; - } - - .user-panel { - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 18rem; - } - #deposit .user-panel { - padding-right: 0; - } - - .activity { - width: 60ch; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; - } -} -@media only screen and (min-width: 1280px) { - .request { - grid-template-areas: "time time time" ". . ."; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 20rem; - } - #deposit .request { - grid-template-areas: "time time time time" ". . . ."; - } -} -@media only screen and (max-width: 320px) { - body { - font-size: 14px; - } -} -@media (any-hover: hover) { - .navbar-item:hover { - background: rgba(var(--text-color), 0.06); - } - - .remove { - opacity: 0.6; - } - - .remove:hover { - opacity: 1; - } +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: "Roboto", sans-serif; +} + +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} + +body[data-theme=dark] { + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); +} +body[data-theme=dark] .flo-balance-card { + color: rgba(var(--text-color), 1); +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: "Poppins", sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} + +strong { + font-weight: 500; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: "Poppins", sans-serif; +} +button:focus { + outline: thin solid rgba(var(--text-color-light), 0.4); +} +button:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); +} +button:disabled ~ .loader { + opacity: 0; +} + +::-moz-focus-inner { + border: none; +} + +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right { + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: 0.1em; +} + +.no-transformations { + transform: none !important; +} + +.capitalize { + text-transform: capitalize; +} + +sm-button[variant=outlined] { + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -220; + } +} +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; +} +.action:disabled .primary-btn { + background: none; +} +.action:focus { + outline: none; +} +.action h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; +} +.action .btn { + z-index: 2; +} +.action .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; +} +.action .loader:not(.animate-loader) { + opacity: 0; +} +.action .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + to { + opacity: 1; + transform: none; + } +} +.logo { + display: flex; + align-items: center; +} +.logo h4 { + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); +} +.logo .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; +} +.empty-state svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; +} +.container-header h2 { + flex: 1; +} +.container-header button { + align-self: center; +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; +} +#confirmation h4, +#prompt h4 { + font-weight: 500; + margin-bottom: 1.5rem; +} +#confirmation .flex sm-button:first-of-type, +#prompt .flex sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup .illustration { + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); +} +sm-popup sm-input:not(:last-of-type) { + margin-bottom: 1rem; +} +sm-popup p { + margin-block-end: 1rem; +} +sm-popup .action h4 { + padding: 0.5rem 1rem; + font-weight: 500; +} +sm-popup .message { + margin-bottom: 0.2rem; +} +sm-popup .message + .copy-row { + margin-bottom: 1.5rem; +} +sm-popup h5:not(.tag) { + font-family: "Roboto", sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; +} + +#reader { + overflow: hidden; +} + +.my-qr-code { + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} + +#qr_code_popup::part(popup) { + height: 90vh; +} +#qr_code_popup::part(popup-body) { + padding: 0; +} +#qr_code_popup .popup-header { + padding-bottom: 1.5rem; +} +#qr_code_popup sm-tab-header { + margin: 0 auto; + transform: translateX(-1rem); +} +#qr_code_popup sm-panel { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +#qr_code_popup video { + width: 100% !important; + object-fit: cover; +} +#qr_code_popup p { + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; +} + +sm-input[type=number] { + font-size: 1.2rem; +} + +.popup-header { + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; +} +.popup-header .icon { + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; +} +.popup-header button { + width: auto; + margin-left: auto; +} + +details, summary { + margin-bottom: 1rem; +} + +summary { + cursor: pointer; +} + +details h5 { + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; +} +details p { + font-size: 0.9rem; + line-height: 1.4; +} + +#sign_in_popup::part(background) { + background: rgba(var(--foreground-color), 1); +} +#sign_in_popup h3 { + margin-top: 2rem; +} +#sign_in_popup h4 { + font-weight: 500; + margin-bottom: 3rem; +} +#sign_in_popup button { + margin: 1rem 0; +} +#sign_in_popup p { + margin-top: 1rem; + margin-bottom: 0 !important; +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; +} +#navbar .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; +} +#navbar .navbar-item h5 { + margin-top: 0.4em; +} +#navbar .navbar-item .icon { + stroke: rgba(var(--text-color), 1); +} +#navbar .active { + opacity: 1; +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; +} +#home_page .left { + width: auto; + border-radius: 0.6rem; +} +#home_page .left h3, #home_page .left h4, #home_page .left p { + padding: 0 1.5rem; +} +#home_page .left h3 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; +} +.user-panel .icon { + stroke: rgba(var(--foreground-color), 1); +} +.user-panel .action { + width: auto; + justify-content: flex-end; +} +.user-panel .action h4 { + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto; +} +.user-panel .action .loader { + align-self: flex-end; +} +.user-panel .action .clip { + clip-path: circle(0 at 100% 0) !important; +} + +#deposit { + padding-top: 1.5rem; +} +#deposit .flex sm-button { + margin-bottom: 1.5rem; +} +#deposit .user-panel { + padding: 0 1rem; +} +#deposit .display-balance { + grid-template-areas: "rupee rupee" "flo flo"; +} + +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: "rupee ." "flo flo"; + gap: 0.8rem; + margin-top: 1rem; +} +.display-balance .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; +} + +.balance { + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; +} +.balance h4 { + font-size: 2rem; + font-family: "Roboto", sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; +} +.balance h5 { + opacity: 0.8; + margin-bottom: 0.2rem; +} +.balance .tooltip { + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; +} + +.rupee-balance-card { + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; +} +.rupee-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; +} + +.in-process-balance { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; +} +.in-process-balance .tooltip { + box-shadow: 0 0 0 0.4rem #ff4857 inset; +} + +.flo-balance-card { + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; +} +.flo-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem #1b0980 inset; +} + +.tooltip { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; +} +.tooltip .tt-icon { + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; +} +.tooltip .tooltip-text { + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; +} +.tooltip:hover { + clip-path: circle(100%); +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; +} +.option .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; +} +.option h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +.option:active { + transform: scale(0.95); +} + +.request-icon { + transform: rotate(180deg); +} + +.notification-dot::after { + content: ""; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit .container-header, +#withdraw .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} + +sm-tab { + text-transform: capitalize; +} +sm-tab::part(tab) { + padding: 0.4rem 1.2rem; +} + +sm-panel { + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); +} +.request h4 { + font-weight: 400; + font-size: 0.9rem; +} +.request h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; +} +.request .action { + align-self: flex-end; +} +.request .amount { + font-family: "Roboto", sans-serif; +} +.request button { + width: auto; +} +.request .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; +} +.request .flex button { + margin: 0; +} +.request.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.request.placeholder h4, .request.placeholder h5 { + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); +} +.request.placeholder .btns { + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; +} +.request.placeholder .btns h4 { + width: 6rem; +} +.request.placeholder h5 { + width: 50%; +} +.request.placeholder .time { + width: 3rem; +} +.request.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.request.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.request.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.request.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.request.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; +} +.page .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: ". ." "search search"; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; +} +.page .container-header .search { + grid-area: search; +} +.page .container-header .search input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; +} +.page .container-header .search input:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; +} +.copy-row h4 { + margin-bottom: 0; + font-weight: 400; +} +.copy-row .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; +} +.copy-row .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; +} +#profile_page button { + align-self: flex-start; +} + +.complaint { + display: grid; + gap: 1.5rem 0; +} +.complaint .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; +} +.complaint .processed { + color: #007732; +} +.complaint .unprocessed { + color: #d43125; +} +.complaint .processed, +.complaint .unprocessed { + margin-bottom: 1.5rem; +} +.complaint button .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page sm-select { + margin-bottom: 1.5rem; +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; +} +.complaint-placeholder h4, +.complaint-placeholder h5 { + border-radius: 0.2rem; +} +.complaint-placeholder h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; +} +.complaint-placeholder h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; +} +.complaint-placeholder .demo-btn { + padding: 0.8rem 3rem; +} + +@keyframes pulse { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; +} +#main_loader sm-button { + margin-left: 0; + margin-top: 1rem; +} +#main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; +} +#main_loader h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; +} + +#upi_txId_section .copy-row { + margin-bottom: 1.5rem; +} + +@keyframes popup { + 0% { + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40% { + transform: translateY(0) scale(0.2); + } + 41% { + transform: translateY(0) scale(0.2); + } + 50% { + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100% { + stroke-dashoffset: 0; + } +} +#transaction_result { + z-index: 12; +} +#transaction_result #transaction_heading { + margin-bottom: 1rem; +} +#transaction_result .copy-row { + grid-template-areas: "label label" ". ."; + margin-top: 1rem; + gap: 0 1rem; +} +#transaction_result .copy-row h4 { + font-weight: 500; +} +#transaction_result h5 { + grid-area: label; + color: rgba(var(--text-color), 0.7); +} +#transaction_result h4, #transaction_result h5, #transaction_result p { + text-align: center; +} +#transaction_result > h4 { + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; +} +#transaction_result sm-button { + align-self: center; + width: auto; +} + +#success_svg, #failure_svg { + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg polyline { + fill: none; + stroke: #00C853; +} + +#failure_svg line { + stroke: #EF5350; +} + +.rupee-symbol { + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee .copy-row { + margin-bottom: 1rem; +} + +.activity-container { + display: grid; + gap: 1rem; +} + +.activity { + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: "icon type amount" "icon receiver time"; + align-items: center; + cursor: pointer; + transition: transform 0.3s; +} +.activity:active { + transform: scale(0.95); +} +.activity .icon { + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; +} +.activity .activity-type { + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; +} +.activity .activity-receiver { + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.activity .activity-amount { + text-align: right; + grid-area: amount; + font-family: "Roboto", sans-serif; +} +.activity .activity-time { + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; +} +.activity .pending { + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; +} +.activity.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.activity.placeholder .activity-type, +.activity.placeholder .activity-receiver { + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; +} +.activity.placeholder .activity-type { + width: 50%; +} +.activity.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.activity.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.activity.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.activity.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.activity.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} +.activity.placeholder:nth-of-type(7) { + animation-delay: 0.6s; +} +.activity.placeholder:nth-of-type(8) { + animation-delay: 0.7s; +} + +.back-arrow { + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} + +.select { + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; +} +.select:first-of-type:not(:last-of-type) { + border-radius: 0.3rem 0.3rem 0 0; +} +.select + .select { + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); +} +.select label { + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; +} +.select input[type=radio] { + display: none; +} +.select input:checked ~ .radio .outer-ring { + stroke: var(--accent-color); +} +.select input:checked ~ .radio .inner-disc { + transform: none; +} +.select .radio { + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; +} +.select .radio .outer-ring { + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); +} +.select .radio .inner-disc { + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +.select .remove { + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; +} +.select .tag { + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; +} +.select h4 { + font-weight: 400; +} + +.add-upi { + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page header { + padding: 0.5rem 0; +} +#transaction_page header .back-arrow { + grid-area: back; +} +#transaction_page header h4 { + text-transform: capitalize; +} +#transaction_page h5 { + font-weight: 400; + font-family: "Roboto", sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; +} +#transaction_page p:last-of-type { + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; +} +#transaction_page #transaction_details { + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; +} +#transaction_page #transaction_details .icon { + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); +} +#transaction_page #transaction_details .success { + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); +} +#transaction_page #transaction_details .flex { + margin-bottom: 1.5rem; + align-items: baseline; +} +#transaction_page #transaction_details strong { + font-weight: 500; +} +#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { + margin-bottom: 1.5rem; + margin-top: -0.4rem; +} +#transaction_page #transaction_details strong:not(:last-of-type) { + margin-bottom: 1rem; +} +#transaction_page #transaction_details sm-button { + width: max-content; + margin-top: 0.6rem; +} +#transaction_page .transaction-amount { + font-size: 2rem; + font-weight: 400; +} +#transaction_page #transaction_time { + right: 0; + position: absolute; + margin: 1.5rem; +} + +#people_container { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +#add_person_btn { + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +#add_person_btn:active { + transform: scale(0.95); +} +#add_person_btn .icon { + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; +} + +.person { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; +} +.person:active { + transform: scale(0.95); +} + +.person-initials, #person_initials { + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; +} + +.person-name { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup > .flex:first-of-type { + margin: 1rem 0; +} +#person_popup > .flex:first-of-type .flex { + margin-top: 0.5rem; +} +#person_popup > .flex:first-of-type .flex .icon { + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; +} +#person_popup > .flex:first-of-type .flex .icon:hover { + background: rgba(var(--text-color), 0.06); +} +#person_popup h3 { + text-transform: capitalize; +} +#person_popup h5 { + font-weight: 500; + opacity: 0.8; +} +#person_popup .copy-row { + margin-bottom: 1.5rem; +} +#person_popup #show_person_name { + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; +} +#person_popup #show_person_name:focus { + outline: none; + background: rgba(var(--text-color), 0.1); +} + +#activity_page .empty-state, +#request_page .empty-state, +#settings_page .empty-state { + justify-content: left; +} + +#settings_page h4 { + margin-top: 2rem; + margin-bottom: 0.6rem; +} +#settings_page .copy-row h4 { + margin: 0; +} +#settings_page p { + color: rgba(var(--text-color), 0.7); +} +#settings_page sm-button { + margin-top: 0.8rem; +} +#settings_page .flex { + max-width: 60ch; +} +#settings_page .my-qr-code { + margin-bottom: 1.5rem; + height: 14rem; +} +#settings_page .my-qr-code img { + height: 100%; +} + +@media only screen and (max-width: 640px) { + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-areas: "." "left"; + grid-template-columns: minmax(0, 1fr); + } + #home_page .left, #deposit .left { + grid-area: left; + } + + sm-select { + width: 100%; + } + + .hide-on-mobile { + display: none !important; + } + + #transaction_page { + padding-top: 0; + } + #transaction_page header { + padding: 1.5rem 0; + } + + #deposit .user-panel { + padding: 0; + } + + video { + height: 100vw; + } +} +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + body { + padding: 0 2rem; + margin-left: 4rem; + } + + sm-popup { + background: rgba(var(--foreground-color), 1); + } + + sm-popup::part(popup) { + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + } + #navbar .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + } + #navbar .navbar-item .icon { + height: 1.2rem; + width: 1.2rem; + } + #navbar .navbar-item h5 { + display: none; + } + #navbar .navbar-item:hover { + opacity: 1; + } + #navbar .logo { + margin: 1.5rem 1rem; + } + #navbar .logo h4 { + display: none; + } + #navbar .logo .main-logo { + height: 1.2rem; + width: 1.2rem; + } + #navbar .active { + background: rgba(var(--text-color), 0.06); + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + + #home_page { + padding-top: 0.5rem; + } + #home_page .left { + margin-top: 1rem; + } + + .options-tab, #people_container { + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + + .display-balance .balance { + height: 9rem; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } + .request .time { + grid-area: time; + margin-bottom: 0 !important; + } + .request button { + width: max-content; + margin-left: auto; + } + .request .breakable { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #deposit .user-panel { + padding-right: 0; + } + + #settings_page .copy-row { + display: inline-grid; + } +} +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: ". . " "header header"; + } + .complaint .complaint-actions { + grid-area: header; + } + .complaint .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + .complaint .right { + display: flex; + justify-content: center; + flex-direction: column; + } + + #navbar .navbar-item h5 { + font-size: 0.9rem; + margin: 0; + display: block; + } + #navbar .icon { + margin-right: 0.8rem; + } + #navbar .logo h4 { + display: block; + font-size: 1rem; + } + + .user-panel { + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 18rem; + } + #deposit .user-panel { + padding-right: 0; + } + + .activity { + width: 60ch; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } +} +@media only screen and (min-width: 1280px) { + .request { + grid-template-areas: "time time time" ". . ."; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 20rem; + } + #deposit .request { + grid-template-areas: "time time time time" ". . . ."; + } +} +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} +@media (any-hover: hover) { + .navbar-item:hover { + background: rgba(var(--text-color), 0.06); + } + + .remove { + opacity: 0.6; + } + + .remove:hover { + opacity: 1; + } } \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 017339e..4368571 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,1866 +1,1866 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: 'Roboto', sans-serif; -} -body { - --accent-color: #4527A0; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --hue: 255; - --saturation: 61%; - --lightness: 39%; - color: rgba(var(--text-color), 1); - font-size: 16px; - background-size: cover; -} -body[data-theme="dark"]{ - --accent-color: #a293d0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); - .flo-balance-card{ - color: rgba(var(--text-color), 1); - } -} - -a { - font-weight: 600; - text-decoration: none; - color: var(--accent-color); -} - -.dark-text { - color: #111; -} - -h1 { - font-size: 3.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.8rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: 'Poppins', sans-serif; - font-weight: 600; -} - -p { - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} -strong{ - font-weight: 500; -} -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: 'Poppins', sans-serif; - - &:focus { - outline: thin solid rgba(var(--text-color-light), .4); - } - - &:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); - } - - &:disabled~.loader { - opacity: 0; - } -} -::-moz-focus-inner { - border: none; -} -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1em; -} - -.bottom-margin { - margin-bottom: 1.5rem; -} - -.top-margin { - margin-top: 1.5rem; -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; -} - -.align-center { - align-items: center; -} - -.direction-column { - flex-direction: column; -} - -.justify-right{ - margin-left: auto; -} - -.space-between { - justify-content: space-between; -} - -.label { - margin-bottom: 0.4rem; -} - -.light-text { - opacity: 0.7; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.breakable { - word-break: break-all; -} - -.separator { - padding: .1em; -} - -.no-transformations { - transform: none !important; -} -.capitalize{ - text-transform: capitalize; -} - -sm-button[variant="outlined"]{ - --accent-color: rgba(var(--text-color), 1); -} - -.loader { - fill: none; - stroke-width: 10; - stroke: var(--accent-color); - height: 2rem; - width: 2rem; - overflow: visible; - stroke-dashoffset: 230; - stroke-dasharray: 230; - padding: 2px; - justify-self: center; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -210; - } -} -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -220; - } -} - -.action { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0; - background: none; - &:disabled{ - .primary-btn { - background: none; - } - } - &:focus{ - outline: none; - } - h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; - } - - .btn { - z-index: 2; - } - - .loader { - position: absolute; - z-index: 1; - padding: 0.4em; - stroke-dashoffset: 220; - stroke-dasharray: 220; - } - .loader:not(.animate-loader){ - opacity: 0; - } - .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; - } - -} - -.clip { - clip-path: circle(0) !important; -} - -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; -} - -.expand { - width: 100%; -} - -.fade-left { - animation: fadeleft 0.3s; -} - -.fade-right { - animation: faderight 0.3s; -} - -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1em); - } - - to { - opacity: 1; - transform: none; - } -} - -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1em); - } - - to { - opacity: 1; - transform: none; - } -} - -.logo { - display: flex; - align-items: center; - h4{ - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); - } - .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; - } -} - -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.8rem; -} - -*:empty + .empty-state { - display: grid; -} - -.empty-state { - display: none; - place-items: center; - width: 100%; - svg { - stroke: rgba(var(--text-color), 0.8); - height: 12em; - width: 12em; - } -} - -.container-header { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; - - h2 { - flex: 1; - } - - button { - align-self: center; - } -} - -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4em 1em; -} - -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; -} - -.card { - border-radius: 0.6rem; - padding: 1.5em; - background: rgba(var(--foreground-color), 1); -} - -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { - flex-direction: column; - h4 { - font-weight: 500; - margin-bottom: 1.5rem; - } - - .flex { - sm-button:first-of-type { - margin-right: 0.6em; - margin-left: auto; - } - } -} - -.refresh { - margin-top: 0.6em; - margin-bottom: 1em; -} - -sm-popup{ - .illustration{ - position: relative; - height: 4rem; - width: 4rem; - padding: 1rem; - stroke: var(--accent-color); - margin-bottom: 1rem; - border-radius: 5rem; - background: rgba(var(--text-color), 0.06); - } - sm-input:not(:last-of-type) { - margin-bottom: 1rem; - } - p{ - margin-block-end: 1rem; - } - .action{ - h4{ - padding: 0.5rem 1rem; - font-weight: 500; - } - } - .message{ - margin-bottom: 0.2rem; - } - .message + .copy-row{ - margin-bottom: 1.5rem; - } - h5:not(.tag){ - font-family: 'Roboto', sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; - } -} - -#reader{ - overflow: hidden; -} -.my-qr-code{ - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} -#qr_code_popup{ - &::part(popup){ - height: 90vh; - } - &::part(popup-body){ - padding: 0; - } - .popup-header{ - padding-bottom: 1.5rem; - } - sm-tab-header{ - margin: 0 auto; - transform: translateX(-1rem); - } - sm-panel{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - } - video{ - width: 100% !important; - object-fit: cover; - } - p{ - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; - } -} -sm-input[type="number"]{ - font-size: 1.2rem; -} - -.popup-header{ - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; - width: 100%; - .icon{ - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; - cursor: pointer; - } - button{ - width: auto; - margin-left: auto; - } -} - -details, summary{ - margin-bottom: 1rem; -} -summary{ - cursor: pointer; -} -details{ - h5{ - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; - } - p{ - font-size: 0.9rem; - line-height: 1.4; - } -} - -#sign_in_popup { - &::part(background){ - background: rgba(var(--foreground-color), 1); - } - h3 { - margin-top: 2rem; - } - - h4 { - font-weight: 500; - margin-bottom: 3rem; - } - - button { - margin: 1rem 0; - } - - p { - margin-top: 1rem; - margin-bottom: 0 !important; - } -} - -.primary-btn { - background: var(--accent-color); - justify-content: center; - color: rgba(var(--foreground-color), 1); -} - -#main_header { - align-items: center; - padding: clamp(1rem, 2vw, 2rem) 1rem; - justify-content: space-between; -} - -.icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; -} - -#navbar { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; - .navbar-item { - position: relative; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.8rem; - border-radius: 0.4em; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.8em; - text-transform: capitalize; - width: 100%; - font-weight: 600; - h5 { - margin-top: 0.4em; - } - .icon{ - stroke: rgba(var(--text-color), 1); - } - } - .active{ - opacity: 1; - } -} - -.banking { - stroke-width: 4; -} - -#home_page { - padding: 0 0 4rem 0; - .left { - width: auto; - border-radius: 0.6rem; - h3, h4, p { - padding: 0 1.5rem; - } - h3{ - font-size: 2rem; - margin-bottom: 1rem; - } - } -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; - .icon{ - stroke: rgba(var(--foreground-color), 1); - } - .action{ - width: auto; - justify-content: flex-end; - h4{ - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto ; - } - .loader{ - align-self: flex-end; - } - .clip{ - clip-path: circle(0 at 100% 0) !important; - } - } -} -#deposit{ - padding-top: 1.5rem; - .flex{ - sm-button{ - margin-bottom: 1.5rem; - } - } - .user-panel{ - padding: 0 1rem; - } - .display-balance { - grid-template-areas: 'rupee rupee' 'flo flo'; - } -} -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: 'rupee .' 'flo flo'; - gap: 0.8rem; - margin-top: 1rem; - .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; - } -} -.balance{ - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; - h4{ - font-size: 2rem; - font-family: 'Roboto', sans-serif; - font-weight: 500; - text-shadow: 1px 0.1rem 0.2rem #00000040; - word-break: break-all; - flex: 1; - } - h5{ - opacity: 0.8; - margin-bottom: 0.2rem; - } - .tooltip{ - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; - } -} -.rupee-balance-card{ - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; - } -} -.in-process-balance{ - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem #ff4857 inset; - } -} -.flo-balance-card{ - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem#1b0980 inset; - } -} - -.tooltip{ - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; - display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; - .tt-icon{ - display: inline-flex; - width: 3rem; - height: 3rem; - align-items: center; - justify-content: center; - margin-left: auto; - font-weight: 600; - } - .tooltip-text{ - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; - } - &:hover{ - clip-path: circle(100%); - } -} - -.user-type { - font-weight: 500; -} - -.options-tab { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -.option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.4rem; - width: 5rem; - text-transform: capitalize; - transition: transform 0.3s; - -webkit-tap-highlight-color: transparent; - cursor: pointer; - .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 2rem; - padding: 0.8rem; - margin-bottom: 0.6rem; - } - - h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - } - - &:active { - transform: scale(0.95); - } -} - -.request-icon{ - transform: rotate(180deg); -} - -.notification-dot::after { - content: ''; - position: absolute; - z-index: 1; - top: 0; - right: 0; - height: 0.6em; - width: 0.6em; - background-color: #E53935; - border-radius: 0.4em; - transition: transform 0.3s; -} - -.shrink.notification-dot::after { - transform: scale(0); -} - -#deposit, -#withdraw { - .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); - } -} - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; -} -sm-tab{ - text-transform: capitalize; - &::part(tab){ - padding: 0.4rem 1.2rem; - } -} -sm-panel{ - width: 100%; -} - -.request { - display: grid; - gap: 1rem; - padding: 1.5em; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); - h4{ - font-weight: 400; - font-size: 0.9rem; - } - h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; - } - .action { - align-self: flex-end; - } - .amount { - font-family: 'Roboto', sans-serif; - } - button { - width: auto; - } - .flex { - align-items: center; - justify-content: flex-end; - justify-self: flex-end; - button { - margin: 0; - } - } - &.placeholder{ - pointer-events: none; - h4, h5{ - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); - } - .btns{ - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; - h4{ - width: 6rem; - } - } - h5{ - width: 50%; - } - .time{ - width: 3rem; - } - animation: pulse infinite 0.6s alternate; - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - } -} - -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1em; - width: 100%; -} - -.page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; - .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: '. .' - 'search search'; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; - z-index: 2; - - .search { - grid-area: search; - - input { - padding: 1em; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2em; - - &:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); - } - } - } - } -} - -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 0.5rem; - width: auto; - h4 { - margin-bottom: 0; - font-weight: 400; - } - - .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; - } - - .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; - - button { - align-self: flex-start; - } -} - -.complaint { - display: grid; - gap: 1.5rem 0; - - .complaint-actions { - align-items: center; - margin: 1.5rem 0 0 0; - } - - .processed { - color: #007732; - } - - .unprocessed { - color: #d43125; - } - - .processed, - .unprocessed { - margin-bottom: 1.5rem; - } - - button { - .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; - } - } -} - -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page { - sm-select { - margin-bottom: 1.5rem; - } -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; - - h4, - h5 { - border-radius: 0.2rem; - } - - h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; - } - - h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.8rem 0.8rem; - } - - .demo-btn { - padding: 0.8rem 3rem; - } -} - -@keyframes pulse { - from { - opacity: 0.4; - } - - to { - opacity: 1; - } -} - - -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; - sm-button { - margin-left: 0; - margin-top: 1rem; - } - - svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; - } - - h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16em; - } -} -#upi_txId_section{ - .copy-row{ - margin-bottom: 1.5rem; - } -} - -@keyframes popup{ - 0%{ - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); - } - 40%{ - transform: translateY(0) scale(0.2); - } - 41%{ - transform: translateY(0) scale(0.2); - } - 50%{ - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100%{ - stroke-dashoffset: 0; - } -} -#transaction_result{ - z-index: 12; - #transaction_heading{ - margin-bottom: 1rem; - } - .copy-row{ - grid-template-areas: 'label label' '. .'; - margin-top: 1rem; - gap: 0 1rem; - h4{ - font-weight: 500; - } - } - h5{ - grid-area: label; - color: rgba(var(--text-color), 0.7); - } - h4, h5, p{ - text-align: center; - } - & > h4{ - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - } - sm-button{ - align-self: center; - width: auto; - } -} -#success_svg, #failure_svg{ - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_svg{ - polyline{ - fill: none; - stroke: #00C853 ; - } -} -#failure_svg{ - line{ - stroke: #EF5350; - } -} - -.rupee-symbol{ - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee{ - .copy-row{ - margin-bottom: 1rem; - } -} -.activity-container{ - display: grid; - gap: 1rem; -} -.activity{ - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: 'icon type amount' 'icon receiver time'; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - &:active{ - transform: scale(0.95); - } - .icon{ - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.8rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; - } - .activity-type{ - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.8rem; - } - .activity-receiver{ - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .activity-amount{ - text-align: right; - grid-area: amount; - font-family: 'Roboto', sans-serif; - } - .activity-time{ - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; - } - .pending{ - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; - } - &.placeholder{ - pointer-events: none; - animation: pulse infinite 0.6s alternate; - .activity-type, - .activity-receiver{ - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; - } - .activity-type{ - width: 50%; - } - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - &:nth-of-type(7){ - animation-delay: 0.6s; - } - &:nth-of-type(8){ - animation-delay: 0.7s; - } - } -} -.back-arrow{ - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} -.select{ - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; - &:first-of-type:not(:last-of-type){ - border-radius: 0.3rem 0.3rem 0 0; - } - & + &{ - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); - } - label{ - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.8rem 1rem; - } - input[type="radio"]{ - display: none; - } - input:checked ~ .radio .outer-ring{ - stroke: var(--accent-color); - } - input:checked ~ .radio .inner-disc{ - transform: none; - } - .radio{ - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; - .outer-ring{ - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); - } - .inner-disc{ - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - } - .remove{ - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; - } - .tag{ - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; - } - h4{ - font-weight: 400; - } -} -.add-upi{ - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page{ - header{ - padding: 0.5rem 0; - .back-arrow{ - grid-area: back; - } - h4{ - text-transform: capitalize; - } - } - h5{ - font-weight: 400; - font-family: 'Roboto', sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; - } - p:last-of-type{ - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; - } - #transaction_details{ - position: relative; - margin: 1.5rem 0; - padding: 1.5rem; - background-color: rgba(var(--text-color), 0.06); - max-width: 50ch; - border-radius: 0.5rem; - .icon{ - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); - } - .success{ - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); - } - .flex{ - margin-bottom: 1.5rem; - align-items: baseline; - } - strong{ - font-weight: 500; - &:not(:last-of-type) + sm-button{ - margin-bottom: 1.5rem; - margin-top: -0.4rem; - } - } - strong:not(:last-of-type){ - margin-bottom: 1rem; - } - sm-button{ - width: max-content; - margin-top: 0.6rem; - } - } - .transaction-amount{ - font-size: 2rem; - font-weight: 400; - } - #transaction_time{ - right: 0; - position: absolute; - margin: 1.5rem; - } -} -#people_container{ - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -#add_person_btn{ - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - text-align: center; - transition: transform 0.3s; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - &:active{ - transform: scale(0.95); - } - .icon{ - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; - } -} -.person{ - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; - &:active{ - transform: scale(0.95); - } -} -.person-initials, #person_initials{ - display: flex; - justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; - font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; -} -.person-name{ - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - text-transform: capitalize; - text-align: center; -} - -#person_popup{ - & > .flex:first-of-type{ - margin: 1rem 0; - .flex{ - margin-top: 0.5rem; - .icon{ - height: 2.6rem; - width: 2.6rem; - padding: 0.8rem; - cursor: pointer; - stroke-width: 8; - &:hover{ - background: rgba(var(--text-color), 0.06); - } - } - } - } - h3{ - text-transform: capitalize; - } - h5{ - font-weight: 500; - opacity: 0.8; - } - .copy-row{ - margin-bottom: 1.5rem; - } - #show_person_name{ - padding: 0.5rem 1rem; - border-radius: 0.4rem; - max-width: 30ch; - &:focus{ - outline: none; - background: rgba(var(--text-color), 0.1); - } - } -} - -#activity_page, -#request_page, -#settings_page{ - .empty-state{ - justify-content: left; - } -} -#settings_page{ - h4{ - margin-top: 2rem; - margin-bottom: 0.6rem; - } - .copy-row h4{ - margin: 0; - } - p{ - color: rgba(var(--text-color), 0.7); - } - sm-button{ - margin-top: 0.8rem; - } - .flex{ - max-width: 60ch; - } - .my-qr-code{ - margin-bottom: 1.5rem; - height: 14rem; - img{ - height: 100%; - } - } -} -@media only screen and (max-width: 640px) { - #home_page, #deposit{ - display: grid; - gap: 1.5rem; - grid-template-areas: '.''left'; - grid-template-columns: minmax(0, 1fr); - .left { - grid-area: left; - } - } - sm-select { - width: 100%; - } - .hide-on-mobile{ - display: none !important; - } - #transaction_page{ - padding-top: 0; - header{ - padding: 1.5rem 0; - } - } - #deposit{ - .user-panel{ - padding: 0; - } - } - video{ - height: 100vw; - } -} - -@media only screen and (min-width: 640px) { - .hide-on-desktop{ - display: none !important; - } - body { - padding: 0 2rem; - margin-left: 4rem; - } - sm-popup{ - background: rgba(var(--foreground-color), 1); - } - sm-popup::part(popup){ - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - .navbar-item { - display: flex; - width: auto; - padding: 0.8rem 1.2rem; - .icon { - height: 1.2rem; - width: 1.2rem; - } - h5{ - display: none; - } - &:hover { - opacity: 1; - } - } - .logo{ - margin: 1.5rem 1rem; - h4{ - display: none; - } - .main-logo{ - height: 1.2rem; - width: 1.2rem; - } - } - .active{ - background: rgba(var(--text-color), 0.06); - } - } - - .page { - padding-bottom: 2rem; - } - - #sign_in_popup { - width: 24rem; - } - #home_page { - padding-top: 0.5rem; - .left { - margin-top: 1rem; - } - } - .options-tab, #people_container{ - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.8rem; - } - .display-balance{ - .balance{ - height: 9rem; - } - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - .time{ - grid-area: time; - margin-bottom: 0 !important; - } - button{ - width: max-content; - margin-left: auto; - } - .breakable{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - #deposit{ - .user-panel{ - padding-right: 0; - } - } - #settings_page{ - .copy-row{ - display: inline-grid; - } - } -} - -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; - } - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: '. . ''header header'; - - .complaint-actions { - grid-area: header; - } - - .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; - } - - .right { - display: flex; - justify-content: center; - flex-direction: column; - } - } - #navbar{ - .navbar-item { - h5{ - font-size: 0.9rem; - margin: 0; - display: block; - } - } - .icon{ - margin-right: 0.8rem; - } - .logo{ - h4{ - display: block; - font-size: 1rem; - } - } - } - .user-panel{ - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 18rem; - .user-panel{ - padding-right: 0; - } - } - .activity{ - width: 60ch; - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - } -} - -@media only screen and (min-width: 1280px) { - .request{ - grid-template-areas: 'time time time' '. . .'; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 20rem; - .request{ - grid-template-areas: 'time time time time' '. . . .'; - } - } -} - -@media only screen and (max-width: 320px) { - body { - font-size: 14px; - } -} - -@media (any-hover: hover) { - .navbar-item:hover{ - background: rgba(var(--text-color), 0.06); - } - .remove{ - opacity: 0.6; - } - .remove:hover{ - opacity: 1; - } -} +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Roboto', sans-serif; +} +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} +body[data-theme="dark"]{ + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); + .flo-balance-card{ + color: rgba(var(--text-color), 1); + } +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} +strong{ + font-weight: 500; +} +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: 'Poppins', sans-serif; + + &:focus { + outline: thin solid rgba(var(--text-color-light), .4); + } + + &:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); + } + + &:disabled~.loader { + opacity: 0; + } +} +::-moz-focus-inner { + border: none; +} +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right{ + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: .1em; +} + +.no-transformations { + transform: none !important; +} +.capitalize{ + text-transform: capitalize; +} + +sm-button[variant="outlined"]{ + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -220; + } +} + +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; + &:disabled{ + .primary-btn { + background: none; + } + } + &:focus{ + outline: none; + } + h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; + } + + .btn { + z-index: 2; + } + + .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; + } + .loader:not(.animate-loader){ + opacity: 0; + } + .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + } + +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + + to { + opacity: 1; + transform: none; + } +} + +.logo { + display: flex; + align-items: center; + h4{ + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); + } + .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; + } +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; + svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; + } +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; + + h2 { + flex: 1; + } + + button { + align-self: center; + } +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 1.5rem; + } + + .flex { + sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; + } + } +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup{ + .illustration{ + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); + } + sm-input:not(:last-of-type) { + margin-bottom: 1rem; + } + p{ + margin-block-end: 1rem; + } + .action{ + h4{ + padding: 0.5rem 1rem; + font-weight: 500; + } + } + .message{ + margin-bottom: 0.2rem; + } + .message + .copy-row{ + margin-bottom: 1.5rem; + } + h5:not(.tag){ + font-family: 'Roboto', sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; + } +} + +#reader{ + overflow: hidden; +} +.my-qr-code{ + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} +#qr_code_popup{ + &::part(popup){ + height: 90vh; + } + &::part(popup-body){ + padding: 0; + } + .popup-header{ + padding-bottom: 1.5rem; + } + sm-tab-header{ + margin: 0 auto; + transform: translateX(-1rem); + } + sm-panel{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + video{ + width: 100% !important; + object-fit: cover; + } + p{ + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; + } +} +sm-input[type="number"]{ + font-size: 1.2rem; +} + +.popup-header{ + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; + .icon{ + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; + } + button{ + width: auto; + margin-left: auto; + } +} + +details, summary{ + margin-bottom: 1rem; +} +summary{ + cursor: pointer; +} +details{ + h5{ + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; + } + p{ + font-size: 0.9rem; + line-height: 1.4; + } +} + +#sign_in_popup { + &::part(background){ + background: rgba(var(--foreground-color), 1); + } + h3 { + margin-top: 2rem; + } + + h4 { + font-weight: 500; + margin-bottom: 3rem; + } + + button { + margin: 1rem 0; + } + + p { + margin-top: 1rem; + margin-bottom: 0 !important; + } +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; + .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; + h5 { + margin-top: 0.4em; + } + .icon{ + stroke: rgba(var(--text-color), 1); + } + } + .active{ + opacity: 1; + } +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; + .left { + width: auto; + border-radius: 0.6rem; + h3, h4, p { + padding: 0 1.5rem; + } + h3{ + font-size: 2rem; + margin-bottom: 1rem; + } + } +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; + .icon{ + stroke: rgba(var(--foreground-color), 1); + } + .action{ + width: auto; + justify-content: flex-end; + h4{ + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto ; + } + .loader{ + align-self: flex-end; + } + .clip{ + clip-path: circle(0 at 100% 0) !important; + } + } +} +#deposit{ + padding-top: 1.5rem; + .flex{ + sm-button{ + margin-bottom: 1.5rem; + } + } + .user-panel{ + padding: 0 1rem; + } + .display-balance { + grid-template-areas: 'rupee rupee' 'flo flo'; + } +} +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: 'rupee .' 'flo flo'; + gap: 0.8rem; + margin-top: 1rem; + .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; + } +} +.balance{ + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; + h4{ + font-size: 2rem; + font-family: 'Roboto', sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; + } + h5{ + opacity: 0.8; + margin-bottom: 0.2rem; + } + .tooltip{ + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; + } +} +.rupee-balance-card{ + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; + } +} +.in-process-balance{ + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem #ff4857 inset; + } +} +.flo-balance-card{ + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem#1b0980 inset; + } +} + +.tooltip{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; + .tt-icon{ + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; + } + .tooltip-text{ + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; + } + &:hover{ + clip-path: circle(100%); + } +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; + .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; + } + + h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + } + + &:active { + transform: scale(0.95); + } +} + +.request-icon{ + transform: rotate(180deg); +} + +.notification-dot::after { + content: ''; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit, +#withdraw { + .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); + } +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} +sm-tab{ + text-transform: capitalize; + &::part(tab){ + padding: 0.4rem 1.2rem; + } +} +sm-panel{ + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); + h4{ + font-weight: 400; + font-size: 0.9rem; + } + h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; + } + .action { + align-self: flex-end; + } + .amount { + font-family: 'Roboto', sans-serif; + } + button { + width: auto; + } + .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; + button { + margin: 0; + } + } + &.placeholder{ + pointer-events: none; + h4, h5{ + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); + } + .btns{ + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; + h4{ + width: 6rem; + } + } + h5{ + width: 50%; + } + .time{ + width: 3rem; + } + animation: pulse infinite 0.6s alternate; + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + } +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; + .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: '. .' + 'search search'; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; + + .search { + grid-area: search; + + input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; + + &:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); + } + } + } + } +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; + h4 { + margin-bottom: 0; + font-weight: 400; + } + + .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; + } + + .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; + + button { + align-self: flex-start; + } +} + +.complaint { + display: grid; + gap: 1.5rem 0; + + .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; + } + + .processed { + color: #007732; + } + + .unprocessed { + color: #d43125; + } + + .processed, + .unprocessed { + margin-bottom: 1.5rem; + } + + button { + .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; + } + } +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page { + sm-select { + margin-bottom: 1.5rem; + } +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; + + h4, + h5 { + border-radius: 0.2rem; + } + + h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; + } + + h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; + } + + .demo-btn { + padding: 0.8rem 3rem; + } +} + +@keyframes pulse { + from { + opacity: 0.4; + } + + to { + opacity: 1; + } +} + + +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; + sm-button { + margin-left: 0; + margin-top: 1rem; + } + + svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; + } + + h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; + } +} +#upi_txId_section{ + .copy-row{ + margin-bottom: 1.5rem; + } +} + +@keyframes popup{ + 0%{ + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40%{ + transform: translateY(0) scale(0.2); + } + 41%{ + transform: translateY(0) scale(0.2); + } + 50%{ + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100%{ + stroke-dashoffset: 0; + } +} +#transaction_result{ + z-index: 12; + #transaction_heading{ + margin-bottom: 1rem; + } + .copy-row{ + grid-template-areas: 'label label' '. .'; + margin-top: 1rem; + gap: 0 1rem; + h4{ + font-weight: 500; + } + } + h5{ + grid-area: label; + color: rgba(var(--text-color), 0.7); + } + h4, h5, p{ + text-align: center; + } + & > h4{ + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; + } + sm-button{ + align-self: center; + width: auto; + } +} +#success_svg, #failure_svg{ + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg{ + polyline{ + fill: none; + stroke: #00C853 ; + } +} +#failure_svg{ + line{ + stroke: #EF5350; + } +} + +.rupee-symbol{ + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee{ + .copy-row{ + margin-bottom: 1rem; + } +} +.activity-container{ + display: grid; + gap: 1rem; +} +.activity{ + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'icon type amount' 'icon receiver time'; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + &:active{ + transform: scale(0.95); + } + .icon{ + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; + } + .activity-type{ + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; + } + .activity-receiver{ + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .activity-amount{ + text-align: right; + grid-area: amount; + font-family: 'Roboto', sans-serif; + } + .activity-time{ + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; + } + .pending{ + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; + } + &.placeholder{ + pointer-events: none; + animation: pulse infinite 0.6s alternate; + .activity-type, + .activity-receiver{ + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; + } + .activity-type{ + width: 50%; + } + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + &:nth-of-type(7){ + animation-delay: 0.6s; + } + &:nth-of-type(8){ + animation-delay: 0.7s; + } + } +} +.back-arrow{ + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} +.select{ + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; + &:first-of-type:not(:last-of-type){ + border-radius: 0.3rem 0.3rem 0 0; + } + & + &{ + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); + } + label{ + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; + } + input[type="radio"]{ + display: none; + } + input:checked ~ .radio .outer-ring{ + stroke: var(--accent-color); + } + input:checked ~ .radio .inner-disc{ + transform: none; + } + .radio{ + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; + .outer-ring{ + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); + } + .inner-disc{ + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + } + .remove{ + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; + } + .tag{ + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; + } + h4{ + font-weight: 400; + } +} +.add-upi{ + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page{ + header{ + padding: 0.5rem 0; + .back-arrow{ + grid-area: back; + } + h4{ + text-transform: capitalize; + } + } + h5{ + font-weight: 400; + font-family: 'Roboto', sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; + } + p:last-of-type{ + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; + } + #transaction_details{ + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; + .icon{ + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); + } + .success{ + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); + } + .flex{ + margin-bottom: 1.5rem; + align-items: baseline; + } + strong{ + font-weight: 500; + &:not(:last-of-type) + sm-button{ + margin-bottom: 1.5rem; + margin-top: -0.4rem; + } + } + strong:not(:last-of-type){ + margin-bottom: 1rem; + } + sm-button{ + width: max-content; + margin-top: 0.6rem; + } + } + .transaction-amount{ + font-size: 2rem; + font-weight: 400; + } + #transaction_time{ + right: 0; + position: absolute; + margin: 1.5rem; + } +} +#people_container{ + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +#add_person_btn{ + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + &:active{ + transform: scale(0.95); + } + .icon{ + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; + } +} +.person{ + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; + &:active{ + transform: scale(0.95); + } +} +.person-initials, #person_initials{ + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; +} +.person-name{ + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup{ + & > .flex:first-of-type{ + margin: 1rem 0; + .flex{ + margin-top: 0.5rem; + .icon{ + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; + &:hover{ + background: rgba(var(--text-color), 0.06); + } + } + } + } + h3{ + text-transform: capitalize; + } + h5{ + font-weight: 500; + opacity: 0.8; + } + .copy-row{ + margin-bottom: 1.5rem; + } + #show_person_name{ + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; + &:focus{ + outline: none; + background: rgba(var(--text-color), 0.1); + } + } +} + +#activity_page, +#request_page, +#settings_page{ + .empty-state{ + justify-content: left; + } +} +#settings_page{ + h4{ + margin-top: 2rem; + margin-bottom: 0.6rem; + } + .copy-row h4{ + margin: 0; + } + p{ + color: rgba(var(--text-color), 0.7); + } + sm-button{ + margin-top: 0.8rem; + } + .flex{ + max-width: 60ch; + } + .my-qr-code{ + margin-bottom: 1.5rem; + height: 14rem; + img{ + height: 100%; + } + } +} +@media only screen and (max-width: 640px) { + #home_page, #deposit{ + display: grid; + gap: 1.5rem; + grid-template-areas: '.''left'; + grid-template-columns: minmax(0, 1fr); + .left { + grid-area: left; + } + } + sm-select { + width: 100%; + } + .hide-on-mobile{ + display: none !important; + } + #transaction_page{ + padding-top: 0; + header{ + padding: 1.5rem 0; + } + } + #deposit{ + .user-panel{ + padding: 0; + } + } + video{ + height: 100vw; + } +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop{ + display: none !important; + } + body { + padding: 0 2rem; + margin-left: 4rem; + } + sm-popup{ + background: rgba(var(--foreground-color), 1); + } + sm-popup::part(popup){ + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + .icon { + height: 1.2rem; + width: 1.2rem; + } + h5{ + display: none; + } + &:hover { + opacity: 1; + } + } + .logo{ + margin: 1.5rem 1rem; + h4{ + display: none; + } + .main-logo{ + height: 1.2rem; + width: 1.2rem; + } + } + .active{ + background: rgba(var(--text-color), 0.06); + } + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + #home_page { + padding-top: 0.5rem; + .left { + margin-top: 1rem; + } + } + .options-tab, #people_container{ + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + .display-balance{ + .balance{ + height: 9rem; + } + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + .time{ + grid-area: time; + margin-bottom: 0 !important; + } + button{ + width: max-content; + margin-left: auto; + } + .breakable{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + #deposit{ + .user-panel{ + padding-right: 0; + } + } + #settings_page{ + .copy-row{ + display: inline-grid; + } + } +} + +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: '. . ''header header'; + + .complaint-actions { + grid-area: header; + } + + .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + + .right { + display: flex; + justify-content: center; + flex-direction: column; + } + } + #navbar{ + .navbar-item { + h5{ + font-size: 0.9rem; + margin: 0; + display: block; + } + } + .icon{ + margin-right: 0.8rem; + } + .logo{ + h4{ + display: block; + font-size: 1rem; + } + } + } + .user-panel{ + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 18rem; + .user-panel{ + padding-right: 0; + } + } + .activity{ + width: 60ch; + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + } +} + +@media only screen and (min-width: 1280px) { + .request{ + grid-template-areas: 'time time time' '. . .'; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 20rem; + .request{ + grid-template-areas: 'time time time time' '. . . .'; + } + } +} + +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} + +@media (any-hover: hover) { + .navbar-item:hover{ + background: rgba(var(--text-color), 0.06); + } + .remove{ + opacity: 0.6; + } + .remove:hover{ + opacity: 1; + } +} diff --git a/index.html b/index.html index 2d71fc0..fbdc2a8 100644 --- a/index.html +++ b/index.html @@ -1,13929 +1,13929 @@ - - - - - - - RanchiMall Pay - - - - - - - -

-
- Cancel - OK -
- - -

Some input required

- -
- - -
- - - -
- - Loader - - -

Loading RanchiMall Pay

- Sign Out -
- - -
-

Sign In

-
-

Welcome to RanchiMall Pay.
Please enter your FLO private key to - continue.

- - - - - -
- - close - - - - - Scan - My QR Code - -
- - -
-

Point your camera towards QR Code.
- *Only works with RanchiMall Pay. -

- - -
-

Show this QR Code to receive money using RanchiMall Pay

- - - - -
- - close - - - -

Send Rupee

- -
-

- Send rupee to any FLO address. -

-
- - How to send rupee? - -
Step 1
-

Enter receiver's FLO address.

-
Step 2
-

Enter the amount you want to send.

-
Step 3
-

Press Send button.

-
- - - rupee-symbol - - - - - - -
- - close - - - -

Deposit

- -
-

- Deposit money through UPI. -

-
- - How to deposit money? - -
Step 1
-

Copy UPI address shown below.

-
Step 2
-

Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)

-
Step 3
-

Copy the UPI transaction ID shown after transaction was successful.

-
Step 4
-

Enter the amount you sent to copied address

-
Step 5
-

Then enter the UPI transaction ID you copied when was transaction completed.

-
Step 6
-

Press Deposit button

-
-

Send money to UPI ID below.

-
-

- - Copy - - - -
- - - rupee-symbol - - - - - - -
- - close - - - -

Withdraw rupee

- -
-

- Withdraw or redeem your rupee to your specified UPI address. -

-
- - How to withdraw rupee? - -
Step 1
-

Enter amount you want to withdraw

-
Step 2
-

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using - 'Add UPI address' button.

-
Step 3
-

Press Withdraw button

-
- - - rupee-symbol - - - - -
Withdraw To
-
- + Add UPI - address - - -
- - close - - - -

Request rupee

- -
-

- Request rupee from other's using FLO address. -

-
- - How to request rupee? - -
Step 1
-

Enter amount you want to request

-
Step 2
-

Enter the FLO address of person you want to request rupee from.

-
Step 3
-

Press Request button

-
- - - rupee-symbol - - - - - - -
- - close - - - -

Pay through cashier

- -
-
- - What is this? - -

- Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be - sent as Rupee. -

-
-
- - How to pay through cashier? - -
Step 1
-

Copy UPI address shown below.

-
Step 2
-

Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)

-
Step 3
-

Enter the amount you sent to copied address

-
Step 4
-

Then enter the FLO address of person you want send rupee to.

-
Step 5
-

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI - address, add one using 'Add UPI address' button.

-
Step 6
-

Press Pay button

-
-

Send money to UPI ID below.

-
-

- - Copy - - - -
- - - rupee-symbol - - - - -
Send from
-
- + Add UPI - address - - -
- - close - - - -
-
- - success - - - -
-
- - failure - - - - -
-

-

-
-
Transaction ID
-

- - Copy - - - -
- Done - - - -
- - close - - - -

Add UPI address

- -
- - - - - - -
- - close - - - -

Add a person

- -
- - - - - - -
- - close - - - -
-
-

-

-
- - - - - remove - - - - -
-
-
FLO ID
-
-

- - Copy - - - -
-
-
- - - -

Send rupee

-
-
- - - -

Request rupee

-
-
- - - - -
- - close - - - -

Report

- -
- - - -
- -
- -
-
-
-

Rupee actions

-
-
- - scanner - - - - - - -

Scan QR

-
-
- - - -

Send

-
-
- - deposit - - - - - - -

deposit

-
-
- - withdraw - - - - - - - -

Withdraw

-
-
- - - -

Request

-
-
- - - - -

pay through cashier

- -
-
-
-

People

-
-
-
-

S

-

Sairaj Mote

-
-
-
-
-
-

My Balances

- -
-
-
-
-
?
-

Your wallet balance

-
-
Rupee
-

0

-
-
-
-
?
-

Money that is in-process after deposit.

-
-
In-process
-

0

-
-
-
-
?
-

Your FLO balance. This is required for every transaction.

-
-
FLO
-

0

-
-
-
-
-
-
-

Requests

- - Deposits - Withdrawals - Pay Through Cashier - - - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No deposit requests.

-
- - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No withdraw requests.

-
- - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No pay requests.

-
- - -
-
-
-

My Balances

- Check Balance -
-
-
-
-
?
-

Your wallet balance

-
-
Rupee
-

0

-
-
-
-
?
-

Your FLO balance. This is required for every transaction.

-
-
FLO
-

0

-
-
-
-
-
-

Payment Requests

- - Pending - Paid - Declined - - - -
-

You don't have any pending requests.

- - - -

No paid requests.

- - -
-

No declined requests.

- - -
-
-

Activity

- - Sent - Received - Deposits - Withdrawals - Paid through cashier - System Notifications - - - -
-

You haven't sent any rupee yet.

- - -
-

You haven't sent any rupee yet.

- - -
-

You haven't deposited rupee yet.

- - -
-

You haven't withdrawn rupee yet.

- - -
-

You haven't paid through cashier yet.

- - -
-

No messages from cashier.

- - -
-
-
-

Complaints

-

-
Select Cashier
- - - Deposit - Withdraw - Pay through cashier - - - -
-

No deposit complaints.

- - -
-

No withdraw complaints.

- - -
-

No pay through cashier complaints.

- - -
-
-

Settings

-
-

My FLO address

-
-

- - Copy - - - -
-
-

Theme

-
-

Toggle dark theme

- -
-
-

My UPIs

-
-

Add UPI address for easier access during various transactions.

- + Add UPI address - -
-

Sign Out

-

Signing out will erase all the data stored in local storage and Indexed DB. This will remove - saved private key, UPI addresses and contacts.

- Sign out -
-
-
- - Go to activity page - - -

-
-
-

- Report -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + RanchiMall Pay + + + + + + + +

+
+ Cancel + OK +
+ + +

Some input required

+ +
+ + +
+ + + +
+ + Loader + + +

Loading RanchiMall Pay

+ Sign Out +
+ + +
+

Sign In

+
+

Welcome to RanchiMall Pay.
Please enter your FLO private key to + continue.

+ + + + + +
+ + close + + + + + Scan + My QR Code + +
+ + +
+

Point your camera towards QR Code.
+ *Only works with RanchiMall Pay. +

+ + +
+

Show this QR Code to receive money using RanchiMall Pay

+ + + + +
+ + close + + + +

Send Rupee

+ +
+

+ Send rupee to any FLO address. +

+
+ + How to send rupee? + +
Step 1
+

Enter receiver's FLO address.

+
Step 2
+

Enter the amount you want to send.

+
Step 3
+

Press Send button.

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Deposit

+ +
+

+ Deposit money through UPI. +

+
+ + How to deposit money? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Copy the UPI transaction ID shown after transaction was successful.

+
Step 4
+

Enter the amount you sent to copied address

+
Step 5
+

Then enter the UPI transaction ID you copied when was transaction completed.

+
Step 6
+

Press Deposit button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Withdraw rupee

+ +
+

+ Withdraw or redeem your rupee to your specified UPI address. +

+
+ + How to withdraw rupee? + +
Step 1
+

Enter amount you want to withdraw

+
Step 2
+

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using + 'Add UPI address' button.

+
Step 3
+

Press Withdraw button

+
+ + + rupee-symbol + + + + +
Withdraw To
+
+ + Add UPI + address + + +
+ + close + + + +

Request rupee

+ +
+

+ Request rupee from other's using FLO address. +

+
+ + How to request rupee? + +
Step 1
+

Enter amount you want to request

+
Step 2
+

Enter the FLO address of person you want to request rupee from.

+
Step 3
+

Press Request button

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Pay through cashier

+ +
+
+ + What is this? + +

+ Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be + sent as Rupee. +

+
+
+ + How to pay through cashier? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Enter the amount you sent to copied address

+
Step 4
+

Then enter the FLO address of person you want send rupee to.

+
Step 5
+

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI + address, add one using 'Add UPI address' button.

+
Step 6
+

Press Pay button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + +
Send from
+
+ + Add UPI + address + + +
+ + close + + + +
+
+ + success + + + +
+
+ + failure + + + + +
+

+

+
+
Transaction ID
+

+ + Copy + + + +
+ Done + + + +
+ + close + + + +

Add UPI address

+ +
+ + + + + + +
+ + close + + + +

Add a person

+ +
+ + + + + + +
+ + close + + + +
+
+

+

+
+ + + + + remove + + + + +
+
+
FLO ID
+
+

+ + Copy + + + +
+
+
+ + + +

Send rupee

+
+
+ + + +

Request rupee

+
+
+ + + + +
+ + close + + + +

Report

+ +
+ + + +
+ +
+ +
+
+
+

Rupee actions

+
+
+ + scanner + + + + + + +

Scan QR

+
+
+ + + +

Send

+
+
+ + deposit + + + + + + +

deposit

+
+
+ + withdraw + + + + + + + +

Withdraw

+
+
+ + + +

Request

+
+
+ + + + +

pay through cashier

+ +
+
+
+

People

+
+
+
+

S

+

Sairaj Mote

+
+
+
+
+
+

My Balances

+ +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Money that is in-process after deposit.

+
+
In-process
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+
+

Requests

+ + Deposits + Withdrawals + Pay Through Cashier + + + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No deposit requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No withdraw requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No pay requests.

+
+ + +
+
+
+

My Balances

+ Check Balance +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+

Payment Requests

+ + Pending + Paid + Declined + + + +
+

You don't have any pending requests.

+ + + +

No paid requests.

+ + +
+

No declined requests.

+ + +
+
+

Activity

+ + Sent + Received + Deposits + Withdrawals + Paid through cashier + System Notifications + + + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't deposited rupee yet.

+ + +
+

You haven't withdrawn rupee yet.

+ + +
+

You haven't paid through cashier yet.

+ + +
+

No messages from cashier.

+ + +
+
+
+

Complaints

+

+
Select Cashier
+ + + Deposit + Withdraw + Pay through cashier + + + +
+

No deposit complaints.

+ + +
+

No withdraw complaints.

+ + +
+

No pay through cashier complaints.

+ + +
+
+

Settings

+
+

My FLO address

+
+

+ + Copy + + + +
+
+

Theme

+
+

Toggle dark theme

+ +
+
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address + +
+

Sign Out

+

Signing out will erase all the data stored in local storage and Indexed DB. This will remove + saved private key, UPI addresses and contacts.

+ Sign out +
+
+
+ + Go to activity page + + +

+
+
+

+ Report +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/qrcode-scanner.min.js b/qrcode-scanner.min.js index b275c07..898fb1a 100644 --- a/qrcode-scanner.min.js +++ b/qrcode-scanner.min.js @@ -1,7 +1,7 @@ -function getLazarSoftScanner(){var e={};function t(e,t){this.count=e,this.dataCodewords=t,this.__defineGetter__("Count",function(){return this.count}),this.__defineGetter__("DataCodewords",function(){return this.dataCodewords})}function n(e,t,n){this.ecCodewordsPerBlock=e,this.ecBlocks=n?new Array(t,n):new Array(t),this.__defineGetter__("ECCodewordsPerBlock",function(){return this.ecCodewordsPerBlock}),this.__defineGetter__("TotalECCodewords",function(){return this.ecCodewordsPerBlock*this.NumBlocks}),this.__defineGetter__("NumBlocks",function(){for(var e=0,t=0;t6&&(t.setRegion(e-11,0,3,6),t.setRegion(0,e-11,6,3)),t},this.getECBlocksForLevel=function(e){return this.ecBlocks[e.ordinal()]}}function i(e,t,n,r,a,o,s,h,w){this.a11=e,this.a12=r,this.a13=s,this.a21=t,this.a22=a,this.a23=h,this.a31=n,this.a32=o,this.a33=w,this.transformPoints1=function(e){for(var t=e.length,n=this.a11,r=this.a12,i=this.a13,a=this.a21,o=this.a22,s=this.a23,h=this.a31,w=this.a32,f=this.a33,u=0;uMath.abs(n-e);if(i){var a=e;e=t,t=a,a=n,n=r,r=a}for(var o=Math.abs(n-e),s=Math.abs(r-t),h=-o>>1,w=t0){if(l==r)break;l+=w,h-=o}}var b=n-e,y=r-t;return Math.sqrt(b*b+y*y)},this.sizeOfBlackWhiteBlackRunBothWays=function(e,t,n,r){var i=this.sizeOfBlackWhiteBlackRun(e,t,n,r),a=1,o=e-(n-e);o<0?(a=e/(e-o),o=0):o>=A.width&&(a=(A.width-1-e)/(o-e),o=A.width-1);var s=Math.floor(t-(r-t)*a);return a=1,s<0?(a=t/(t-s),s=0):s>=A.height&&(a=(A.height-1-t)/(s-t),s=A.height-1),o=Math.floor(e+(o-e)*a),(i+=this.sizeOfBlackWhiteBlackRun(e,t,o,s))-1},this.calculateModuleSizeOneWay=function(e,t){var n=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(e.X),Math.floor(e.Y),Math.floor(t.X),Math.floor(t.Y)),r=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(t.X),Math.floor(t.Y),Math.floor(e.X),Math.floor(e.Y));return isNaN(n)?r/7:isNaN(r)?n/7:(n+r)/14},this.calculateModuleSize=function(e,t,n){return(this.calculateModuleSizeOneWay(e,t)+this.calculateModuleSizeOneWay(e,n))/2},this.distance=function(e,t){var n=e.X-t.X,r=e.Y-t.Y;return Math.sqrt(n*n+r*r)},this.computeDimension=function(e,t,n,r){var i=7+(Math.round(this.distance(e,t)/r)+Math.round(this.distance(e,n)/r)>>1);switch(3&i){case 0:i++;break;case 2:i--;break;case 3:throw"Error"}return i},this.findAlignmentInRegion=function(e,t,n,r){var i=Math.floor(r*e),a=Math.max(0,t-i),o=Math.min(A.width-1,t+i);if(o-a<3*e)throw"Error";var s=Math.max(0,n-i),h=Math.min(A.height-1,n+i);return new F(this.image,a,s,o-a,h-s,e,this.resultPointCallback).find()},this.createTransform=function(e,t,n,r,a){var o,s,h,w,f=a-3.5;return null!=r?(o=r.X,s=r.Y,h=w=f-3):(o=t.X-e.X+n.X,s=t.Y-e.Y+n.Y,h=w=f),i.quadrilateralToQuadrilateral(3.5,3.5,f,3.5,h,w,3.5,f,e.X,e.Y,t.X,t.Y,o,s,n.X,n.Y)},this.sampleGrid=function(t,n,r){return e.sampleGrid3(t,r,n)},this.processFinderPatternInfo=function(e){var t=e.TopLeft,n=e.TopRight,i=e.BottomLeft,o=this.calculateModuleSize(t,n,i);if(o<1)throw"Error";var s=this.computeDimension(t,n,i,o),h=r.getProvisionalVersionForDimension(s),w=h.DimensionForVersion-7,f=null;if(h.AlignmentPatternCenters.length>0)for(var u=n.X-t.X+i.X,d=n.Y-t.Y+i.Y,l=1-3/w,c=Math.floor(t.X+l*(u-t.X)),g=Math.floor(t.Y+l*(d-t.Y)),v=4;v<=16;v<<=1){f=this.findAlignmentInRegion(o,c,g,v);break}var m=this.createTransform(t,n,i,f,s);return new a(this.sampleGrid(this.image,m,s),null==f?new Array(i,t,n):new Array(i,t,n,f))},this.detect=function(){var e=(new D).findFinderPattern(this.image);return this.processFinderPatternInfo(e)}}e.checkAndNudgePoints=function(e,t){for(var n=A.width,r=A.height,i=!0,a=0;an||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}i=!0;for(a=t.length-2;a>=0&&i;a-=2){o=Math.floor(t[a]),s=Math.floor(t[a+1]);if(o<-1||o>n||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}},e.sampleGrid3=function(t,n,r){for(var i=new v(n),a=new Array(n<<1),o=0;o>1),a[w+1]=h;r.transformPoints1(a),e.checkAndNudgePoints(t,a);try{for(w=0;w>1,o)}}catch(e){throw"Error.checkAndNudgePoints"}}return i},e.sampleGridx=function(t,n,r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y){var C=i.quadrilateralToQuadrilateral(r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y);return e.sampleGrid3(t,n,C)},r.VERSION_DECODE_INFO=new Array(31892,34236,39577,42195,48118,51042,55367,58893,63784,68472,70749,76311,79154,84390,87683,92361,96236,102084,102881,110507,110734,117786,119615,126325,127568,133589,136944,141498,145311,150283,152622,158308,161089,167017),r.VERSIONS=new Array(new r(1,new Array,new n(7,new t(1,19)),new n(10,new t(1,16)),new n(13,new t(1,13)),new n(17,new t(1,9))),new r(2,new Array(6,18),new n(10,new t(1,34)),new n(16,new t(1,28)),new n(22,new t(1,22)),new n(28,new t(1,16))),new r(3,new Array(6,22),new n(15,new t(1,55)),new n(26,new t(1,44)),new n(18,new t(2,17)),new n(22,new t(2,13))),new r(4,new Array(6,26),new n(20,new t(1,80)),new n(18,new t(2,32)),new n(26,new t(2,24)),new n(16,new t(4,9))),new r(5,new Array(6,30),new n(26,new t(1,108)),new n(24,new t(2,43)),new n(18,new t(2,15),new t(2,16)),new n(22,new t(2,11),new t(2,12))),new r(6,new Array(6,34),new n(18,new t(2,68)),new n(16,new t(4,27)),new n(24,new t(4,19)),new n(28,new t(4,15))),new r(7,new Array(6,22,38),new n(20,new t(2,78)),new n(18,new t(4,31)),new n(18,new t(2,14),new t(4,15)),new n(26,new t(4,13),new t(1,14))),new r(8,new Array(6,24,42),new n(24,new t(2,97)),new n(22,new t(2,38),new t(2,39)),new n(22,new t(4,18),new t(2,19)),new n(26,new t(4,14),new t(2,15))),new r(9,new Array(6,26,46),new n(30,new t(2,116)),new n(22,new t(3,36),new t(2,37)),new n(20,new t(4,16),new t(4,17)),new n(24,new t(4,12),new t(4,13))),new r(10,new Array(6,28,50),new n(18,new t(2,68),new t(2,69)),new n(26,new t(4,43),new t(1,44)),new n(24,new t(6,19),new t(2,20)),new n(28,new t(6,15),new t(2,16))),new r(11,new Array(6,30,54),new n(20,new t(4,81)),new n(30,new t(1,50),new t(4,51)),new n(28,new t(4,22),new t(4,23)),new n(24,new t(3,12),new t(8,13))),new r(12,new Array(6,32,58),new n(24,new t(2,92),new t(2,93)),new n(22,new t(6,36),new t(2,37)),new n(26,new t(4,20),new t(6,21)),new n(28,new t(7,14),new t(4,15))),new r(13,new Array(6,34,62),new n(26,new t(4,107)),new n(22,new t(8,37),new t(1,38)),new n(24,new t(8,20),new t(4,21)),new n(22,new t(12,11),new t(4,12))),new r(14,new Array(6,26,46,66),new n(30,new t(3,115),new t(1,116)),new n(24,new t(4,40),new t(5,41)),new n(20,new t(11,16),new t(5,17)),new n(24,new t(11,12),new t(5,13))),new r(15,new Array(6,26,48,70),new n(22,new t(5,87),new t(1,88)),new n(24,new t(5,41),new t(5,42)),new n(30,new t(5,24),new t(7,25)),new n(24,new t(11,12),new t(7,13))),new r(16,new Array(6,26,50,74),new n(24,new t(5,98),new t(1,99)),new n(28,new t(7,45),new t(3,46)),new n(24,new t(15,19),new t(2,20)),new n(30,new t(3,15),new t(13,16))),new r(17,new Array(6,30,54,78),new n(28,new t(1,107),new t(5,108)),new n(28,new t(10,46),new t(1,47)),new n(28,new t(1,22),new t(15,23)),new n(28,new t(2,14),new t(17,15))),new r(18,new Array(6,30,56,82),new n(30,new t(5,120),new t(1,121)),new n(26,new t(9,43),new t(4,44)),new n(28,new t(17,22),new t(1,23)),new n(28,new t(2,14),new t(19,15))),new r(19,new Array(6,30,58,86),new n(28,new t(3,113),new t(4,114)),new n(26,new t(3,44),new t(11,45)),new n(26,new t(17,21),new t(4,22)),new n(26,new t(9,13),new t(16,14))),new r(20,new Array(6,34,62,90),new n(28,new t(3,107),new t(5,108)),new n(26,new t(3,41),new t(13,42)),new n(30,new t(15,24),new t(5,25)),new n(28,new t(15,15),new t(10,16))),new r(21,new Array(6,28,50,72,94),new n(28,new t(4,116),new t(4,117)),new n(26,new t(17,42)),new n(28,new t(17,22),new t(6,23)),new n(30,new t(19,16),new t(6,17))),new r(22,new Array(6,26,50,74,98),new n(28,new t(2,111),new t(7,112)),new n(28,new t(17,46)),new n(30,new t(7,24),new t(16,25)),new n(24,new t(34,13))),new r(23,new Array(6,30,54,74,102),new n(30,new t(4,121),new t(5,122)),new n(28,new t(4,47),new t(14,48)),new n(30,new t(11,24),new t(14,25)),new n(30,new t(16,15),new t(14,16))),new r(24,new Array(6,28,54,80,106),new n(30,new t(6,117),new t(4,118)),new n(28,new t(6,45),new t(14,46)),new n(30,new t(11,24),new t(16,25)),new n(30,new t(30,16),new t(2,17))),new r(25,new Array(6,32,58,84,110),new n(26,new t(8,106),new t(4,107)),new n(28,new t(8,47),new t(13,48)),new n(30,new t(7,24),new t(22,25)),new n(30,new t(22,15),new t(13,16))),new r(26,new Array(6,30,58,86,114),new n(28,new t(10,114),new t(2,115)),new n(28,new t(19,46),new t(4,47)),new n(28,new t(28,22),new t(6,23)),new n(30,new t(33,16),new t(4,17))),new r(27,new Array(6,34,62,90,118),new n(30,new t(8,122),new t(4,123)),new n(28,new t(22,45),new t(3,46)),new n(30,new t(8,23),new t(26,24)),new n(30,new t(12,15),new t(28,16))),new r(28,new Array(6,26,50,74,98,122),new n(30,new t(3,117),new t(10,118)),new n(28,new t(3,45),new t(23,46)),new n(30,new t(4,24),new t(31,25)),new n(30,new t(11,15),new t(31,16))),new r(29,new Array(6,30,54,78,102,126),new n(30,new t(7,116),new t(7,117)),new n(28,new t(21,45),new t(7,46)),new n(30,new t(1,23),new t(37,24)),new n(30,new t(19,15),new t(26,16))),new r(30,new Array(6,26,52,78,104,130),new n(30,new t(5,115),new t(10,116)),new n(28,new t(19,47),new t(10,48)),new n(30,new t(15,24),new t(25,25)),new n(30,new t(23,15),new t(25,16))),new r(31,new Array(6,30,56,82,108,134),new n(30,new t(13,115),new t(3,116)),new n(28,new t(2,46),new t(29,47)),new n(30,new t(42,24),new t(1,25)),new n(30,new t(23,15),new t(28,16))),new r(32,new Array(6,34,60,86,112,138),new n(30,new t(17,115)),new n(28,new t(10,46),new t(23,47)),new n(30,new t(10,24),new t(35,25)),new n(30,new t(19,15),new t(35,16))),new r(33,new Array(6,30,58,86,114,142),new n(30,new t(17,115),new t(1,116)),new n(28,new t(14,46),new t(21,47)),new n(30,new t(29,24),new t(19,25)),new n(30,new t(11,15),new t(46,16))),new r(34,new Array(6,34,62,90,118,146),new n(30,new t(13,115),new t(6,116)),new n(28,new t(14,46),new t(23,47)),new n(30,new t(44,24),new t(7,25)),new n(30,new t(59,16),new t(1,17))),new r(35,new Array(6,30,54,78,102,126,150),new n(30,new t(12,121),new t(7,122)),new n(28,new t(12,47),new t(26,48)),new n(30,new t(39,24),new t(14,25)),new n(30,new t(22,15),new t(41,16))),new r(36,new Array(6,24,50,76,102,128,154),new n(30,new t(6,121),new t(14,122)),new n(28,new t(6,47),new t(34,48)),new n(30,new t(46,24),new t(10,25)),new n(30,new t(2,15),new t(64,16))),new r(37,new Array(6,28,54,80,106,132,158),new n(30,new t(17,122),new t(4,123)),new n(28,new t(29,46),new t(14,47)),new n(30,new t(49,24),new t(10,25)),new n(30,new t(24,15),new t(46,16))),new r(38,new Array(6,32,58,84,110,136,162),new n(30,new t(4,122),new t(18,123)),new n(28,new t(13,46),new t(32,47)),new n(30,new t(48,24),new t(14,25)),new n(30,new t(42,15),new t(32,16))),new r(39,new Array(6,26,54,82,110,138,166),new n(30,new t(20,117),new t(4,118)),new n(28,new t(40,47),new t(7,48)),new n(30,new t(43,24),new t(22,25)),new n(30,new t(10,15),new t(67,16))),new r(40,new Array(6,30,58,86,114,142,170),new n(30,new t(19,118),new t(6,119)),new n(28,new t(18,47),new t(31,48)),new n(30,new t(34,24),new t(34,25)),new n(30,new t(20,15),new t(61,16)))),r.getVersionForNumber=function(e){if(e<1||e>40)throw"ArgumentException";return r.VERSIONS[e-1]},r.getProvisionalVersionForDimension=function(e){if(e%4!=1)throw"Error getProvisionalVersionForDimension";try{return r.getVersionForNumber(e-17>>2)}catch(e){throw"Error getVersionForNumber"}},r.decodeVersionInformation=function(e){for(var t=4294967295,n=0,i=0;i>3&3),this.dataMask=7&e,this.__defineGetter__("ErrorCorrectionLevel",function(){return this.errorCorrectionLevel}),this.__defineGetter__("DataMask",function(){return this.dataMask}),this.GetHashCode=function(){return this.errorCorrectionLevel.ordinal()<<3|this.dataMask},this.Equals=function(e){var t=e;return this.errorCorrectionLevel==t.errorCorrectionLevel&&this.dataMask==t.dataMask}}function f(e,t,n){this.ordinal_Renamed_Field=e,this.bits=t,this.name=n,this.__defineGetter__("Bits",function(){return this.bits}),this.__defineGetter__("Name",function(){return this.name}),this.ordinal=function(){return this.ordinal_Renamed_Field}}w.numBitsDiffering=function(e,t){return h[15&(e^=t)]+h[15&M(e,4)]+h[15&M(e,8)]+h[15&M(e,12)]+h[15&M(e,16)]+h[15&M(e,20)]+h[15&M(e,24)]+h[15&M(e,28)]},w.decodeFormatInformation=function(e){var t=w.doDecodeFormatInformation(e);return null!=t?t:w.doDecodeFormatInformation(21522^e)},w.doDecodeFormatInformation=function(e){for(var t=4294967295,n=0,r=0;r=g.length)throw"ArgumentException";return g[e]};var u=new f(0,1,"L"),d=new f(1,0,"M"),l=new f(2,3,"Q"),c=new f(3,2,"H"),g=new Array(d,u,c,l);function v(e,t){if(t||(t=e),e<1||t<1)throw"Both dimensions must be greater than 0";this.width=e,this.height=t;var n=e>>5;0!=(31&e)&&n++,this.rowSize=n,this.bits=new Array(n*t);for(var r=0;r>5);return 0!=(1&M(this.bits[n],31&e))},this.set_Renamed=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]|=1<<(31&e)},this.flip=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]^=1<<(31&e)},this.clear=function(){for(var e=this.bits.length,t=0;tthis.height||i>this.width)throw"The region must fit inside the matrix";for(var o=t;o>5)]|=1<<(31&h)}}function m(e,t){this.numDataCodewords=e,this.codewords=t,this.__defineGetter__("NumDataCodewords",function(){return this.numDataCodewords}),this.__defineGetter__("Codewords",function(){return this.codewords})}function b(e){var t=e.Dimension;if(t<21||1!=(3&t))throw"Error BitMatrixParser";this.bitMatrix=e,this.parsedVersion=null,this.parsedFormatInfo=null,this.copyBit=function(e,t,n){return this.bitMatrix.get_Renamed(e,t)?n<<1|1:n<<1},this.readFormatInformation=function(){if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var e=0,t=0;t<6;t++)e=this.copyBit(t,8,e);e=this.copyBit(7,8,e),e=this.copyBit(8,8,e),e=this.copyBit(8,7,e);for(var n=5;n>=0;n--)e=this.copyBit(8,n,e);if(this.parsedFormatInfo=w.decodeFormatInformation(e),null!=this.parsedFormatInfo)return this.parsedFormatInfo;var r=this.bitMatrix.Dimension;e=0;var i=r-8;for(t=r-1;t>=i;t--)e=this.copyBit(t,8,e);for(n=r-7;n>2;if(t<=6)return r.getVersionForNumber(t);for(var n=0,i=e-11,a=5;a>=0;a--)for(var o=e-9;o>=i;o--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;n=0;for(o=5;o>=0;o--)for(a=e-9;a>=i;a--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;throw"Error readVersion"},this.readCodewords=function(){var e=this.readFormatInformation(),t=this.readVersion(),n=y.forReference(e.DataMask),r=this.bitMatrix.Dimension;n.unmaskBitMatrix(this.bitMatrix,r);for(var i=t.buildFunctionPattern(),a=!0,o=new Array(t.TotalCodewords),s=0,h=0,w=0,f=r-1;f>0;f-=2){6==f&&f--;for(var u=0;u=0;){if(s[c].codewords.length==l)break;c--}c++;var g=l-r.ECCodewordsPerBlock,v=0;for(o=0;o1&&0==t[0]){for(var r=1;rr.length){var i=n;n=r,r=i}for(var a=new Array(r.length),o=r.length-n.length,s=0;s=e.Degree&&!n.Zero;){var a=n.Degree-e.Degree,o=this.field.multiply(n.getCoefficient(n.Degree),i),s=e.multiplyByMonomial(a,o),h=this.field.buildMonomial(a,o);t=t.addOrSubtract(h),n=n.addOrSubtract(s)}return new Array(t,n)}}function _(e){this.expTable=new Array(256),this.logTable=new Array(256);for(var t=1,n=0;n<256;n++)this.expTable[n]=t,(t<<=1)>=256&&(t^=e);for(n=0;n<255;n++)this.logTable[this.expTable[n]]=n;var r=new Array(1);r[0]=0,this.zero=new C(this,new Array(r));var i=new Array(1);i[0]=1,this.one=new C(this,new Array(i)),this.__defineGetter__("Zero",function(){return this.zero}),this.__defineGetter__("One",function(){return this.one}),this.buildMonomial=function(e,t){if(e<0)throw"System.ArgumentException";if(0==t)return this.zero;for(var n=new Array(e+1),r=0;r7)throw"System.ArgumentException";return y.DATA_MASKS[e]},y.DATA_MASKS=new Array(new function(){this.unmaskBitMatrix=function(e,t){for(var n=0;n=Math.floor(n/2);){var f=i,u=o,d=h;if(o=s,h=w,(i=a).Zero)throw"r_{i-1} was zero";a=f;for(var l=this.field.Zero,c=i.getCoefficient(i.Degree),g=this.field.inverse(c);a.Degree>=i.Degree&&!a.Zero;){var v=a.Degree-i.Degree,m=this.field.multiply(a.getCoefficient(a.Degree),g);l=l.addOrSubtract(this.field.buildMonomial(v,m)),a=a.addOrSubtract(i.multiplyByMonomial(v,m))}s=l.multiply1(o).addOrSubtract(u),w=l.multiply1(h).addOrSubtract(d)}var b=w.getCoefficient(0);if(0==b)throw"ReedSolomonException sigmaTilde(0) was zero";var y=this.field.inverse(b),C=w.multiply2(y),_=a.multiply2(y);return new Array(C,_)},this.findErrorLocations=function(e){var t=e.Degree;if(1==t)return new Array(e.getCoefficient(1));for(var n=new Array(t),r=0,i=1;i<256&&r=0?e>>t:(e>>t)+(2<<~t)}A.imagedata=null,A.width=0,A.height=0,A.qrCodeSymbol=null,A.debug=!1,A.maxImgSize=1048576,A.sizeOfDataLengthInfo=[[10,9,8,8],[12,11,16,10],[14,13,16,12]],A.callback=null,A.vidSuccess=function(e){A.localstream=e,A.webkit?A.video.src=window.webkitURL.createObjectURL(e):A.moz?(A.video.mozSrcObject=e,A.video.play()):A.video.src=e,A.gUM=!0,A.canvas_qr2=document.createElement("canvas"),A.canvas_qr2.id="qr-canvas",A.qrcontext2=A.canvas_qr2.getContext("2d"),A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,setTimeout(A.captureToCanvas,500)},A.vidError=function(e){A.gUM=!1},A.captureToCanvas=function(){if(A.gUM)try{if(0==A.video.videoWidth)return void setTimeout(A.captureToCanvas,500);A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,A.qrcontext2.drawImage(A.video,0,0);try{A.decode()}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}},A.setWebcam=function(e){var t=navigator;A.video=document.getElementById(e);var n=!0;if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices)try{navigator.mediaDevices.enumerateDevices().then(function(e){e.forEach(function(e){console.log("deb1"),"videoinput"===e.kind&&e.label.toLowerCase().search("back")>-1&&(n=[{sourceId:e.deviceId}]),console.log(e.kind+": "+e.label+" id = "+e.deviceId)})})}catch(e){console.log(e)}else console.log("no navigator.mediaDevices.enumerateDevices");t.getUserMedia?t.getUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError):t.webkitGetUserMedia?(A.webkit=!0,t.webkitGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError)):t.mozGetUserMedia&&(A.moz=!0,t.mozGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError))},A.decode=function(e){if(0==arguments.length){if(A.canvas_qr2)var t=A.canvas_qr2,n=A.qrcontext2;else n=(t=document.getElementById("qr-canvas")).getContext("2d");return A.width=t.width,A.height=t.height,A.imagedata=n.getImageData(0,0,A.width,A.height),A.result=A.process(n),null!=A.callback&&A.callback(A.result),A.result}var r=new Image;r.crossOrigin="Anonymous",r.onload=function(){var e=document.getElementById("out-canvas");if(null!=e){var t=e.getContext("2d");t.clearRect(0,0,320,240),t.drawImage(r,0,0,320,240)}var n=document.createElement("canvas"),i=n.getContext("2d"),a=r.height,o=r.width;if(r.width*r.height>A.maxImgSize){var s=r.width/r.height;o=s*(a=Math.sqrt(A.maxImgSize/s))}n.width=o,n.height=a,i.drawImage(r,0,0,n.width,n.height),A.width=n.width,A.height=n.height;try{A.imagedata=i.getImageData(0,0,n.width,n.height)}catch(e){return A.result="Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!",void(null!=A.callback&&A.callback(A.result))}try{A.result=A.process(i)}catch(e){console.log(e),A.result="error decoding QR Code"}null!=A.callback&&A.callback(A.result)},r.onerror=function(){null!=A.callback&&A.callback("Failed to load the image")},r.src=e},A.isUrl=function(e){return/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(e)},A.decode_url=function(e){var t="";try{t=escape(e)}catch(n){console.log(n),t=e}var n="";try{n=decodeURIComponent(t)}catch(e){console.log(e),n=t}return n},A.decode_utf8=function(e){return A.isUrl(e)?A.decode_url(e):e},A.process=function(e){var t=(new Date).getTime(),n=A.grayScaleToBitmap(A.grayscale());if(A.debug){for(var r=0;rr[s][o][1]&&(r[s][o][1]=f)}}for(var u=new Array(4),d=0;d<4;d++)u[d]=new Array(4);for(o=0;o<4;o++)for(s=0;s<4;s++)u[s][o]=Math.floor((r[s][o][0]+r[s][o][1])/2);return u},A.grayScaleToBitmap=function(e){for(var t=A.getMiddleBrightnessPerArea(e),n=t.length,r=Math.floor(A.width/n),i=Math.floor(A.height/n),a=new ArrayBuffer(A.width*A.height),o=new Uint8Array(a),s=0;s=0&&i[t+s*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.crossCheckHorizontal=function(e,t,n,r){for(var i=this.image,a=A.width,o=this.CrossCheckStateCount,s=e;s>=0&&i[s+t*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[s+t*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[s+t*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2]+e[3]+e[4],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),e[2],r);if(!isNaN(a)&&(i=this.crossCheckHorizontal(Math.floor(i),Math.floor(a),e[2],r),!isNaN(i))){for(var o=r/7,s=!1,h=this.possibleCenters.length,w=0;w3){for(var t=0,n=0,r=0;r=0;r--){var h=this.possibleCenters[r];Math.abs(h.EstimatedModuleSize-a)>s&&this.possibleCenters.splice(r,1)}}return this.possibleCenters.length>3&&this.possibleCenters.sort(function(e,t){return e.count>t.count?-1:e.count=B){if(null!=t)return this.hasSkipped=!0,Math.floor((Math.abs(t.X-r.X)-Math.abs(t.Y-r.Y))/2);t=r}}return 0},this.haveMultiplyConfirmedCenters=function(){for(var e=0,t=0,n=this.possibleCenters.length,r=0;r=B&&(e++,t+=i.EstimatedModuleSize)}if(e<3)return!1;var a=t/n,o=0;for(r=0;ra[2]&&(o+=w-a[2]-r,h=n-1)}else{do{h++}while(h=n)return!1;return!0},this.crossCheckVertical=function(e,t,n,r){var i=this.image,a=A.height,o=this.crossCheckStateCount;o[0]=0,o[1]=0,o[2]=0;for(var s=e;s>=0&&i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;sn)return NaN;for(;sn)return NaN;var h=o[0]+o[1]+o[2];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),2*e[1],r);if(!isNaN(a)){for(var o=(e[0]+e[1]+e[2])/3,s=this.possibleCenters.length,h=0;h>1),s=new Array(0,0,0),h=0;h>1:-(h+1>>1));s[0]=0,s[1]=0,s[2]=0;for(var f=t;f=10&&t<=26?this.dataLengthMode=1:t>=27&&t<=40&&(this.dataLengthMode=2),this.getNextBits=function(e){var t=0;if(e>this.bitPointer-e+1,this.bitPointer-=e,t}if(e>8-(e-(this.bitPointer+1)),this.bitPointer=this.bitPointer-e%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}if(e>8-(e-(this.bitPointer+1+8))),this.bitPointer=this.bitPointer-(e-8)%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}return 0},this.NextMode=function(){return this.blockPointer>this.blocks.length-this.numErrorCorrectionCode-2?0:this.getNextBits(4)},this.getDataLength=function(e){for(var t=0;e>>t!=1;)t++;return this.getNextBits(A.sizeOfDataLengthInfo[this.dataLengthMode][t])},this.getRomanAndFigureString=function(e){var t=e,n=0,r="",i=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","$","%","*","+","-",".","/",":");do{if(t>1){var a=(n=this.getNextBits(11))%45;r+=i[Math.floor(n/45)],r+=i[a],t-=2}else 1==t&&(r+=i[n=this.getNextBits(6)],t-=1)}while(t>0);return r},this.getFigureString=function(e){var t=e,n=0,r="";do{t>=3?((n=this.getNextBits(10))<100&&(r+="0"),n<10&&(r+="0"),t-=3):2==t?((n=this.getNextBits(7))<10&&(r+="0"),t-=2):1==t&&(n=this.getNextBits(4),t-=1),r+=n}while(t>0);return r},this.get8bitByteArray=function(e){var t=e,n=0,r=new Array;do{n=this.getNextBits(8),r.push(n),t--}while(t>0);return r},this.getKanjiString=function(e){var t=e,n=0,r="";do{var i=((n=this.getNextBits(13))/192<<8)+n%192,a=0;a=i+33088<=40956?i+33088:i+49472,r+=String.fromCharCode(a),t--}while(t>0);return r},this.parseECIValue=function(){var e=0,t=this.getNextBits(8);(0==(128&t)&&(e=127&t),128==(192&t))&&(e=(63&t)<<8|this.getNextBits(8));192==(224&t)&&(e=(31&t)<<16|this.getNextBits(8));return e},this.__defineGetter__("DataByte",function(){for(var e=new Array;;){var t=this.NextMode();if(0==t){if(e.length>0)break;throw"Empty data block"}if(1!=t&&2!=t&&4!=t&&8!=t&&7!=t)throw"Invalid mode: "+t+" in (block:"+this.blockPointer+" bit:"+this.bitPointer+")";if(7==t)var n=this.parseECIValue();else{var r=this.getDataLength(t);if(r<1)throw"Invalid data length: "+r;switch(t){case 1:for(var i=this.getFigureString(r),a=new Array(i.length),o=0;o=a&&o>=s?(r=e[0],n=e[1],i=e[2]):s>=o&&s>=a?(r=e[1],n=e[0],i=e[2]):(r=e[2],n=e[0],i=e[1]),function(e,t,n){var r=t.x,i=t.y;return(n.x-r)*(e.y-i)-(n.y-i)*(e.x-r)}(n,r,i)<0){var h=n;n=i,i=h}e[0]=n,e[1]=r,e[2]=i},A} - -/** Html5Qrcode From here */ -"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;dk)throw"'config.qrbox' should not be greater than the width of the HTML element."}var m=function(a,b){var c=h.qrbox;c>b&&console.warn("[Html5Qrcode] config.qrboxsize is greater than video height. Shading will be ignored");var d=i&&c<=b,e=d?f._getShadedRegionBounds(a,b,c):{x:0,y:0,width:a,height:b},k=f._createCanvasElement(e.width,e.height),l=k.getContext("2d");l.canvas.width=e.width,l.canvas.height=e.height,j.append(k),d&&f._possiblyInsertShadingElement(j,b,e),g._qrRegion=e,g._context=l,g._canvasElement=k},n=function(){try{return g.qrcode.decode(),f._possiblyUpdateShaders(!0),!0}catch(a){return f._possiblyUpdateShaders(!1),e("QR code parse error, error = ".concat(a)),!1}},o=function b(){if(g._shouldScan){if(g._localMediaStream){var c=g._videoElement,d=c.videoWidth/c.clientWidth,e=c.videoHeight/c.clientHeight,i=g._qrRegion.width*d,j=g._qrRegion.height*e,k=g._qrRegion.x*d,l=g._qrRegion.y*e;g._context.drawImage(g._videoElement,k,l,i,j,0,0,g._qrRegion.width,g._qrRegion.height),n()||!0===h.disableFlip||(f._context.translate(f._context.canvas.width,0),f._context.scale(-1,1),n())}g._foreverScanTimeout=setTimeout(b,a._getTimeoutFps(h.fps))}},p=function(a){return new Promise(function(b,c){var d=function(){var d=f._createVideoElement(k);g._element.append(d),d.onabort=c,d.onerror=c,d.onplaying=function(){var a=d.clientWidth,c=d.clientHeight;m(a,c),o(),b()},d.srcObject=a,d.play(),g._videoElement=d};if(g._localMediaStream=a,!h.aspectRatio)d();else{var e={aspectRatio:h.aspectRatio},i=a.getVideoTracks()[0];i.applyConstraints(e).then(function(){return d()})["catch"](function(a){console.log("[Warning] [Html5Qrcode] Constriants could not be satisfied, ignoring constraints",a),d()})}})};return new Promise(function(a,c){if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var d=g._createVideoConstraints(b);navigator.mediaDevices.getUserMedia({audio:!1,video:d}).then(function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)})["catch"](function(a){c("Error getting userMedia, error = ".concat(a))})}else if(navigator.getUserMedia){if("string"!=typeof b)throw"The device doesn't support navigator.mediaDevices, only supported cameraIdOrConfig in this case is deviceId parameter (string).";navigator.getUserMedia({video:{optional:[{sourceId:b}]}},function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)},function(a){c("Error getting userMedia, error = ".concat(a))})}else c("Web camera streaming not supported by the browser.")})}},{key:"stop",value:function(){this._shouldScan=!1,clearTimeout(this._foreverScanTimeout);var b=this;return new Promise(function(c){b.qrcode.callback=null;var d=b._localMediaStream.getVideoTracks().length,e=0,f=function(){for(;b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME).length;){var c=b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME)[0];b._element.removeChild(c)}},g=function(){b._localMediaStream=null,b._element.removeChild(b._videoElement),b._element.removeChild(b._canvasElement),f(),b._isScanning=!1,b._qrRegion&&(b._qrRegion=null),b._context&&(b._context=null),c(!0)};b._localMediaStream.getVideoTracks().forEach(function(a){a.stop(),++e,e>=d&&g()})})}},{key:"scanFile",value:function(b,c){var d=this;if(!b||!(b instanceof File))throw"imageFile argument is mandatory and should be instance of File. Use 'event.target.files[0]'";if(c=void 0===c||c,d._isScanning)throw"Close ongoing scan before scanning a file.";var e=function b(c,d,e,f){if(c<=e&&d<=f){var g=(e-c)/2,h=(f-d)/2;return{x:g,y:h,width:c,height:d}}var i=c,j=d;return c>e&&(d=e/c*d,c=e),d>f&&(c=f/d*c,d=f),a._log("Image downsampled from "+"".concat(i,"X").concat(j)+" to ".concat(c,"X").concat(d,".")),b(c,d,e,f)};return new Promise(function(f,g){d._possiblyCloseLastScanImageFile(),d._clearElement(),d._lastScanImageFile=b;var h=new Image;h.onload=function(){var b=Math.max,i=h.width,j=h.height,k=document.getElementById(d._elementId),l=k.clientWidth?k.clientWidth:a.DEFAULT_WIDTH,m=b(k.clientHeight?k.clientHeight:j,a.FILE_SCAN_MIN_HEIGHT),n=e(i,j,l,m);if(c){var o=d._createCanvasElement(l,m,"qr-canvas-visible");o.style.display="inline-block",k.appendChild(o);var p=o.getContext("2d");p.canvas.width=l,p.canvas.height=m,p.drawImage(h,0,0,i,j,n.x,n.y,n.width,n.height)}var q=d._createCanvasElement(n.width,n.height);k.appendChild(q);var r=q.getContext("2d");r.canvas.width=n.width,r.canvas.height=n.height,r.drawImage(h,0,0,i,j,0,0,n.width,n.height);try{f(d.qrcode.decode())}catch(a){g("QR code parse error, error = ".concat(a))}},h.onerror=g,h.onabort=g,h.onstalled=g,h.onsuspend=g,h.src=URL.createObjectURL(b)})}},{key:"clear",value:function(){this._clearElement()}},{key:"_clearElement",value:function(){if(this._isScanning)throw"Cannot clear while scan is ongoing, close it first.";var a=document.getElementById(this._elementId);a.innerHTML=""}},{key:"_createCanvasElement",value:function(a,b,c){var d=document.createElement("canvas");return d.style.width="".concat(a,"px"),d.style.height="".concat(b,"px"),d.style.display="none",d.id=null==c?"qr-canvas":c,d}},{key:"_createVideoElement",value:function(a){var b=document.createElement("video");return b.style.width="".concat(a,"px"),b.muted=!0,b.playsInline=!0,b}},{key:"_getShadedRegionBounds",value:function(a,b,c){if(c>a||c>b)throw"'config.qrbox' should not be greater than the width and height of the HTML element.";return{x:(a-c)/2,y:(b-c)/2,width:c,height:c}}},{key:"_possiblyInsertShadingElement",value:function(b,c,d){var e=this;if(0!=d.x||0!=d.y){var f={};f[a.SHADED_LEFT]=this._createShadedElement(c,d,a.SHADED_LEFT),f[a.SHADED_RIGHT]=this._createShadedElement(c,d,a.SHADED_RIGHT),f[a.SHADED_TOP]=this._createShadedElement(c,d,a.SHADED_TOP),f[a.SHADED_BOTTOM]=this._createShadedElement(c,d,a.SHADED_BOTTOM),Object.keys(f).forEach(function(a){return b.append(f[a])}),10>d.x||10>d.y?this.hasBorderShaders=!1:(Object.keys(f).forEach(function(a){return e._insertShaderBorders(f[a],d,a)}),this.hasBorderShaders=!0)}}},{key:"_createShadedElement",value:function(b,c,d){var e=document.createElement("div");switch(e.style.position="absolute",e.style.height="".concat(b,"px"),e.className=a.SHADED_REGION_CLASSNAME,e.id="".concat(a.SHADED_REGION_CLASSNAME,"_").concat(d),e.style.background="#0000007a",d){case a.SHADED_LEFT:e.style.top="0px",e.style.left="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_RIGHT:e.style.top="0px",e.style.right="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_TOP:e.style.top="0px",e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;case a.SHADED_BOTTOM:var f=c.y+c.height;e.style.top="".concat(f,"px"),e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;default:throw"Unsupported shadingPosition";}return e}},{key:"_insertShaderBorders",value:function(b,c,d){d=parseInt(d);var e=this,f=5,g=5,h=40,i=function(){var b=document.createElement("div");switch(b.style.position="absolute",b.style.backgroundColor=a.BORDER_SHADER_DEFAULT_COLOR,d){case a.SHADED_LEFT:case a.SHADED_RIGHT:b.style.width="".concat(g,"px"),b.style.height="".concat(h+f,"px");break;case a.SHADED_TOP:case a.SHADED_BOTTOM:b.style.width="".concat(h+f,"px"),b.style.height="".concat(g,"px");break;default:throw"Unsupported shadingPosition";}return b},j=function(a,c){if(null===a||null===c)throw"Shaders should have defined positions";var d=i();d.style.top="".concat(a,"px"),d.style.left="".concat(c,"px"),b.appendChild(d),e.borderShaders||(e.borderShaders=[]),e.borderShaders.push(d)},k=null,l=null,m=null,n=null;switch(d){case a.SHADED_LEFT:k=c.y-f,l=c.x-g,m=c.y+c.height-h,n=l;break;case a.SHADED_RIGHT:k=c.y-f,l=0,m=c.y+c.height-h,n=l;break;case a.SHADED_TOP:k=c.y-f,l=-g,m=k,n=c.width-h;break;case a.SHADED_BOTTOM:k=0,l=-g,m=k,n=c.width-h;break;default:throw"Unsupported shadingPosition";}j(k,l),j(m,n)}},{key:"_possiblyUpdateShaders",value:function(b){this.qrMatch===b||(this.hasBorderShaders&&this.borderShaders&&this.borderShaders.length&&this.borderShaders.forEach(function(c){c.style.backgroundColor=b?a.BORDER_SHADER_MATCH_COLOR:a.BORDER_SHADER_DEFAULT_COLOR}),this.qrMatch=b)}},{key:"_possiblyCloseLastScanImageFile",value:function(){this._lastScanImageFile&&(URL.revokeObjectURL(this._lastScanImageFile),this._lastScanImageFile=null)}},{key:"_createVideoConstraints",value:function(a){if("string"==typeof a)return{deviceId:{exact:a}};if("object"==_typeof(a)){var b={user:!0,environment:!0},c=function(a){if(a in b)return!0;throw"config has invalid 'facingMode' value = "+"'".concat(a,"'")},d=Object.keys(a);if(1!=d.length)throw"'cameraIdOrConfig' object should have exactly 1 key,"+" if passed as an object, found ".concat(d.length," keys");var e=Object.keys(a)[0];if("facingMode"!=e&&"deviceId"!=e)throw"Only '".concat("facingMode","' and '").concat("deviceId","' ")+" are supported for 'cameraIdOrConfig'";if("facingMode"==e){var f=a[e];if("string"==typeof f){if(c(f))return{facingMode:f};}else if("object"!=_typeof(f)){var g=_typeof(f);throw"Invalid type of 'facingMode' = ".concat(g)}else if(!("exact"in f))throw"'facingMode' should be string or object with"+" ".concat("exact"," as key.");else if(c(f.exact))return{facingMode:{exact:f.exact}}}else{var h=a[e];if("string"==typeof h)return{deviceId:h};if("object"==_typeof(h)){if("exact"in h)return{deviceId:{exact:h.exact}};throw"'deviceId' should be string or object with"+" ".concat("exact"," as key.")}else{var i=_typeof(h);throw"Invalid type of 'deviceId' = ".concat(i)}}}else{var j=_typeof(a);throw"Invalid type of 'cameraIdOrConfig' = ".concat(j)}}}],[{key:"getCameras",value:function(){var a=this;return new Promise(function(b,c){if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices&&navigator.mediaDevices.getUserMedia)a._log("navigator.mediaDevices used"),navigator.mediaDevices.getUserMedia({audio:!1,video:!0}).then(function(d){d.oninactive=function(){return a._log("All streams closed")};var e=function(a){for(var b,c=a.getVideoTracks(),d=0;d6&&(t.setRegion(e-11,0,3,6),t.setRegion(0,e-11,6,3)),t},this.getECBlocksForLevel=function(e){return this.ecBlocks[e.ordinal()]}}function i(e,t,n,r,a,o,s,h,w){this.a11=e,this.a12=r,this.a13=s,this.a21=t,this.a22=a,this.a23=h,this.a31=n,this.a32=o,this.a33=w,this.transformPoints1=function(e){for(var t=e.length,n=this.a11,r=this.a12,i=this.a13,a=this.a21,o=this.a22,s=this.a23,h=this.a31,w=this.a32,f=this.a33,u=0;uMath.abs(n-e);if(i){var a=e;e=t,t=a,a=n,n=r,r=a}for(var o=Math.abs(n-e),s=Math.abs(r-t),h=-o>>1,w=t0){if(l==r)break;l+=w,h-=o}}var b=n-e,y=r-t;return Math.sqrt(b*b+y*y)},this.sizeOfBlackWhiteBlackRunBothWays=function(e,t,n,r){var i=this.sizeOfBlackWhiteBlackRun(e,t,n,r),a=1,o=e-(n-e);o<0?(a=e/(e-o),o=0):o>=A.width&&(a=(A.width-1-e)/(o-e),o=A.width-1);var s=Math.floor(t-(r-t)*a);return a=1,s<0?(a=t/(t-s),s=0):s>=A.height&&(a=(A.height-1-t)/(s-t),s=A.height-1),o=Math.floor(e+(o-e)*a),(i+=this.sizeOfBlackWhiteBlackRun(e,t,o,s))-1},this.calculateModuleSizeOneWay=function(e,t){var n=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(e.X),Math.floor(e.Y),Math.floor(t.X),Math.floor(t.Y)),r=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(t.X),Math.floor(t.Y),Math.floor(e.X),Math.floor(e.Y));return isNaN(n)?r/7:isNaN(r)?n/7:(n+r)/14},this.calculateModuleSize=function(e,t,n){return(this.calculateModuleSizeOneWay(e,t)+this.calculateModuleSizeOneWay(e,n))/2},this.distance=function(e,t){var n=e.X-t.X,r=e.Y-t.Y;return Math.sqrt(n*n+r*r)},this.computeDimension=function(e,t,n,r){var i=7+(Math.round(this.distance(e,t)/r)+Math.round(this.distance(e,n)/r)>>1);switch(3&i){case 0:i++;break;case 2:i--;break;case 3:throw"Error"}return i},this.findAlignmentInRegion=function(e,t,n,r){var i=Math.floor(r*e),a=Math.max(0,t-i),o=Math.min(A.width-1,t+i);if(o-a<3*e)throw"Error";var s=Math.max(0,n-i),h=Math.min(A.height-1,n+i);return new F(this.image,a,s,o-a,h-s,e,this.resultPointCallback).find()},this.createTransform=function(e,t,n,r,a){var o,s,h,w,f=a-3.5;return null!=r?(o=r.X,s=r.Y,h=w=f-3):(o=t.X-e.X+n.X,s=t.Y-e.Y+n.Y,h=w=f),i.quadrilateralToQuadrilateral(3.5,3.5,f,3.5,h,w,3.5,f,e.X,e.Y,t.X,t.Y,o,s,n.X,n.Y)},this.sampleGrid=function(t,n,r){return e.sampleGrid3(t,r,n)},this.processFinderPatternInfo=function(e){var t=e.TopLeft,n=e.TopRight,i=e.BottomLeft,o=this.calculateModuleSize(t,n,i);if(o<1)throw"Error";var s=this.computeDimension(t,n,i,o),h=r.getProvisionalVersionForDimension(s),w=h.DimensionForVersion-7,f=null;if(h.AlignmentPatternCenters.length>0)for(var u=n.X-t.X+i.X,d=n.Y-t.Y+i.Y,l=1-3/w,c=Math.floor(t.X+l*(u-t.X)),g=Math.floor(t.Y+l*(d-t.Y)),v=4;v<=16;v<<=1){f=this.findAlignmentInRegion(o,c,g,v);break}var m=this.createTransform(t,n,i,f,s);return new a(this.sampleGrid(this.image,m,s),null==f?new Array(i,t,n):new Array(i,t,n,f))},this.detect=function(){var e=(new D).findFinderPattern(this.image);return this.processFinderPatternInfo(e)}}e.checkAndNudgePoints=function(e,t){for(var n=A.width,r=A.height,i=!0,a=0;an||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}i=!0;for(a=t.length-2;a>=0&&i;a-=2){o=Math.floor(t[a]),s=Math.floor(t[a+1]);if(o<-1||o>n||s<-1||s>r)throw"Error.checkAndNudgePoints ";i=!1,-1==o?(t[a]=0,i=!0):o==n&&(t[a]=n-1,i=!0),-1==s?(t[a+1]=0,i=!0):s==r&&(t[a+1]=r-1,i=!0)}},e.sampleGrid3=function(t,n,r){for(var i=new v(n),a=new Array(n<<1),o=0;o>1),a[w+1]=h;r.transformPoints1(a),e.checkAndNudgePoints(t,a);try{for(w=0;w>1,o)}}catch(e){throw"Error.checkAndNudgePoints"}}return i},e.sampleGridx=function(t,n,r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y){var C=i.quadrilateralToQuadrilateral(r,a,o,s,h,w,f,u,d,l,c,g,v,m,b,y);return e.sampleGrid3(t,n,C)},r.VERSION_DECODE_INFO=new Array(31892,34236,39577,42195,48118,51042,55367,58893,63784,68472,70749,76311,79154,84390,87683,92361,96236,102084,102881,110507,110734,117786,119615,126325,127568,133589,136944,141498,145311,150283,152622,158308,161089,167017),r.VERSIONS=new Array(new r(1,new Array,new n(7,new t(1,19)),new n(10,new t(1,16)),new n(13,new t(1,13)),new n(17,new t(1,9))),new r(2,new Array(6,18),new n(10,new t(1,34)),new n(16,new t(1,28)),new n(22,new t(1,22)),new n(28,new t(1,16))),new r(3,new Array(6,22),new n(15,new t(1,55)),new n(26,new t(1,44)),new n(18,new t(2,17)),new n(22,new t(2,13))),new r(4,new Array(6,26),new n(20,new t(1,80)),new n(18,new t(2,32)),new n(26,new t(2,24)),new n(16,new t(4,9))),new r(5,new Array(6,30),new n(26,new t(1,108)),new n(24,new t(2,43)),new n(18,new t(2,15),new t(2,16)),new n(22,new t(2,11),new t(2,12))),new r(6,new Array(6,34),new n(18,new t(2,68)),new n(16,new t(4,27)),new n(24,new t(4,19)),new n(28,new t(4,15))),new r(7,new Array(6,22,38),new n(20,new t(2,78)),new n(18,new t(4,31)),new n(18,new t(2,14),new t(4,15)),new n(26,new t(4,13),new t(1,14))),new r(8,new Array(6,24,42),new n(24,new t(2,97)),new n(22,new t(2,38),new t(2,39)),new n(22,new t(4,18),new t(2,19)),new n(26,new t(4,14),new t(2,15))),new r(9,new Array(6,26,46),new n(30,new t(2,116)),new n(22,new t(3,36),new t(2,37)),new n(20,new t(4,16),new t(4,17)),new n(24,new t(4,12),new t(4,13))),new r(10,new Array(6,28,50),new n(18,new t(2,68),new t(2,69)),new n(26,new t(4,43),new t(1,44)),new n(24,new t(6,19),new t(2,20)),new n(28,new t(6,15),new t(2,16))),new r(11,new Array(6,30,54),new n(20,new t(4,81)),new n(30,new t(1,50),new t(4,51)),new n(28,new t(4,22),new t(4,23)),new n(24,new t(3,12),new t(8,13))),new r(12,new Array(6,32,58),new n(24,new t(2,92),new t(2,93)),new n(22,new t(6,36),new t(2,37)),new n(26,new t(4,20),new t(6,21)),new n(28,new t(7,14),new t(4,15))),new r(13,new Array(6,34,62),new n(26,new t(4,107)),new n(22,new t(8,37),new t(1,38)),new n(24,new t(8,20),new t(4,21)),new n(22,new t(12,11),new t(4,12))),new r(14,new Array(6,26,46,66),new n(30,new t(3,115),new t(1,116)),new n(24,new t(4,40),new t(5,41)),new n(20,new t(11,16),new t(5,17)),new n(24,new t(11,12),new t(5,13))),new r(15,new Array(6,26,48,70),new n(22,new t(5,87),new t(1,88)),new n(24,new t(5,41),new t(5,42)),new n(30,new t(5,24),new t(7,25)),new n(24,new t(11,12),new t(7,13))),new r(16,new Array(6,26,50,74),new n(24,new t(5,98),new t(1,99)),new n(28,new t(7,45),new t(3,46)),new n(24,new t(15,19),new t(2,20)),new n(30,new t(3,15),new t(13,16))),new r(17,new Array(6,30,54,78),new n(28,new t(1,107),new t(5,108)),new n(28,new t(10,46),new t(1,47)),new n(28,new t(1,22),new t(15,23)),new n(28,new t(2,14),new t(17,15))),new r(18,new Array(6,30,56,82),new n(30,new t(5,120),new t(1,121)),new n(26,new t(9,43),new t(4,44)),new n(28,new t(17,22),new t(1,23)),new n(28,new t(2,14),new t(19,15))),new r(19,new Array(6,30,58,86),new n(28,new t(3,113),new t(4,114)),new n(26,new t(3,44),new t(11,45)),new n(26,new t(17,21),new t(4,22)),new n(26,new t(9,13),new t(16,14))),new r(20,new Array(6,34,62,90),new n(28,new t(3,107),new t(5,108)),new n(26,new t(3,41),new t(13,42)),new n(30,new t(15,24),new t(5,25)),new n(28,new t(15,15),new t(10,16))),new r(21,new Array(6,28,50,72,94),new n(28,new t(4,116),new t(4,117)),new n(26,new t(17,42)),new n(28,new t(17,22),new t(6,23)),new n(30,new t(19,16),new t(6,17))),new r(22,new Array(6,26,50,74,98),new n(28,new t(2,111),new t(7,112)),new n(28,new t(17,46)),new n(30,new t(7,24),new t(16,25)),new n(24,new t(34,13))),new r(23,new Array(6,30,54,74,102),new n(30,new t(4,121),new t(5,122)),new n(28,new t(4,47),new t(14,48)),new n(30,new t(11,24),new t(14,25)),new n(30,new t(16,15),new t(14,16))),new r(24,new Array(6,28,54,80,106),new n(30,new t(6,117),new t(4,118)),new n(28,new t(6,45),new t(14,46)),new n(30,new t(11,24),new t(16,25)),new n(30,new t(30,16),new t(2,17))),new r(25,new Array(6,32,58,84,110),new n(26,new t(8,106),new t(4,107)),new n(28,new t(8,47),new t(13,48)),new n(30,new t(7,24),new t(22,25)),new n(30,new t(22,15),new t(13,16))),new r(26,new Array(6,30,58,86,114),new n(28,new t(10,114),new t(2,115)),new n(28,new t(19,46),new t(4,47)),new n(28,new t(28,22),new t(6,23)),new n(30,new t(33,16),new t(4,17))),new r(27,new Array(6,34,62,90,118),new n(30,new t(8,122),new t(4,123)),new n(28,new t(22,45),new t(3,46)),new n(30,new t(8,23),new t(26,24)),new n(30,new t(12,15),new t(28,16))),new r(28,new Array(6,26,50,74,98,122),new n(30,new t(3,117),new t(10,118)),new n(28,new t(3,45),new t(23,46)),new n(30,new t(4,24),new t(31,25)),new n(30,new t(11,15),new t(31,16))),new r(29,new Array(6,30,54,78,102,126),new n(30,new t(7,116),new t(7,117)),new n(28,new t(21,45),new t(7,46)),new n(30,new t(1,23),new t(37,24)),new n(30,new t(19,15),new t(26,16))),new r(30,new Array(6,26,52,78,104,130),new n(30,new t(5,115),new t(10,116)),new n(28,new t(19,47),new t(10,48)),new n(30,new t(15,24),new t(25,25)),new n(30,new t(23,15),new t(25,16))),new r(31,new Array(6,30,56,82,108,134),new n(30,new t(13,115),new t(3,116)),new n(28,new t(2,46),new t(29,47)),new n(30,new t(42,24),new t(1,25)),new n(30,new t(23,15),new t(28,16))),new r(32,new Array(6,34,60,86,112,138),new n(30,new t(17,115)),new n(28,new t(10,46),new t(23,47)),new n(30,new t(10,24),new t(35,25)),new n(30,new t(19,15),new t(35,16))),new r(33,new Array(6,30,58,86,114,142),new n(30,new t(17,115),new t(1,116)),new n(28,new t(14,46),new t(21,47)),new n(30,new t(29,24),new t(19,25)),new n(30,new t(11,15),new t(46,16))),new r(34,new Array(6,34,62,90,118,146),new n(30,new t(13,115),new t(6,116)),new n(28,new t(14,46),new t(23,47)),new n(30,new t(44,24),new t(7,25)),new n(30,new t(59,16),new t(1,17))),new r(35,new Array(6,30,54,78,102,126,150),new n(30,new t(12,121),new t(7,122)),new n(28,new t(12,47),new t(26,48)),new n(30,new t(39,24),new t(14,25)),new n(30,new t(22,15),new t(41,16))),new r(36,new Array(6,24,50,76,102,128,154),new n(30,new t(6,121),new t(14,122)),new n(28,new t(6,47),new t(34,48)),new n(30,new t(46,24),new t(10,25)),new n(30,new t(2,15),new t(64,16))),new r(37,new Array(6,28,54,80,106,132,158),new n(30,new t(17,122),new t(4,123)),new n(28,new t(29,46),new t(14,47)),new n(30,new t(49,24),new t(10,25)),new n(30,new t(24,15),new t(46,16))),new r(38,new Array(6,32,58,84,110,136,162),new n(30,new t(4,122),new t(18,123)),new n(28,new t(13,46),new t(32,47)),new n(30,new t(48,24),new t(14,25)),new n(30,new t(42,15),new t(32,16))),new r(39,new Array(6,26,54,82,110,138,166),new n(30,new t(20,117),new t(4,118)),new n(28,new t(40,47),new t(7,48)),new n(30,new t(43,24),new t(22,25)),new n(30,new t(10,15),new t(67,16))),new r(40,new Array(6,30,58,86,114,142,170),new n(30,new t(19,118),new t(6,119)),new n(28,new t(18,47),new t(31,48)),new n(30,new t(34,24),new t(34,25)),new n(30,new t(20,15),new t(61,16)))),r.getVersionForNumber=function(e){if(e<1||e>40)throw"ArgumentException";return r.VERSIONS[e-1]},r.getProvisionalVersionForDimension=function(e){if(e%4!=1)throw"Error getProvisionalVersionForDimension";try{return r.getVersionForNumber(e-17>>2)}catch(e){throw"Error getVersionForNumber"}},r.decodeVersionInformation=function(e){for(var t=4294967295,n=0,i=0;i>3&3),this.dataMask=7&e,this.__defineGetter__("ErrorCorrectionLevel",function(){return this.errorCorrectionLevel}),this.__defineGetter__("DataMask",function(){return this.dataMask}),this.GetHashCode=function(){return this.errorCorrectionLevel.ordinal()<<3|this.dataMask},this.Equals=function(e){var t=e;return this.errorCorrectionLevel==t.errorCorrectionLevel&&this.dataMask==t.dataMask}}function f(e,t,n){this.ordinal_Renamed_Field=e,this.bits=t,this.name=n,this.__defineGetter__("Bits",function(){return this.bits}),this.__defineGetter__("Name",function(){return this.name}),this.ordinal=function(){return this.ordinal_Renamed_Field}}w.numBitsDiffering=function(e,t){return h[15&(e^=t)]+h[15&M(e,4)]+h[15&M(e,8)]+h[15&M(e,12)]+h[15&M(e,16)]+h[15&M(e,20)]+h[15&M(e,24)]+h[15&M(e,28)]},w.decodeFormatInformation=function(e){var t=w.doDecodeFormatInformation(e);return null!=t?t:w.doDecodeFormatInformation(21522^e)},w.doDecodeFormatInformation=function(e){for(var t=4294967295,n=0,r=0;r=g.length)throw"ArgumentException";return g[e]};var u=new f(0,1,"L"),d=new f(1,0,"M"),l=new f(2,3,"Q"),c=new f(3,2,"H"),g=new Array(d,u,c,l);function v(e,t){if(t||(t=e),e<1||t<1)throw"Both dimensions must be greater than 0";this.width=e,this.height=t;var n=e>>5;0!=(31&e)&&n++,this.rowSize=n,this.bits=new Array(n*t);for(var r=0;r>5);return 0!=(1&M(this.bits[n],31&e))},this.set_Renamed=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]|=1<<(31&e)},this.flip=function(e,t){var n=t*this.rowSize+(e>>5);this.bits[n]^=1<<(31&e)},this.clear=function(){for(var e=this.bits.length,t=0;tthis.height||i>this.width)throw"The region must fit inside the matrix";for(var o=t;o>5)]|=1<<(31&h)}}function m(e,t){this.numDataCodewords=e,this.codewords=t,this.__defineGetter__("NumDataCodewords",function(){return this.numDataCodewords}),this.__defineGetter__("Codewords",function(){return this.codewords})}function b(e){var t=e.Dimension;if(t<21||1!=(3&t))throw"Error BitMatrixParser";this.bitMatrix=e,this.parsedVersion=null,this.parsedFormatInfo=null,this.copyBit=function(e,t,n){return this.bitMatrix.get_Renamed(e,t)?n<<1|1:n<<1},this.readFormatInformation=function(){if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var e=0,t=0;t<6;t++)e=this.copyBit(t,8,e);e=this.copyBit(7,8,e),e=this.copyBit(8,8,e),e=this.copyBit(8,7,e);for(var n=5;n>=0;n--)e=this.copyBit(8,n,e);if(this.parsedFormatInfo=w.decodeFormatInformation(e),null!=this.parsedFormatInfo)return this.parsedFormatInfo;var r=this.bitMatrix.Dimension;e=0;var i=r-8;for(t=r-1;t>=i;t--)e=this.copyBit(t,8,e);for(n=r-7;n>2;if(t<=6)return r.getVersionForNumber(t);for(var n=0,i=e-11,a=5;a>=0;a--)for(var o=e-9;o>=i;o--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;n=0;for(o=5;o>=0;o--)for(a=e-9;a>=i;a--)n=this.copyBit(o,a,n);if(this.parsedVersion=r.decodeVersionInformation(n),null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;throw"Error readVersion"},this.readCodewords=function(){var e=this.readFormatInformation(),t=this.readVersion(),n=y.forReference(e.DataMask),r=this.bitMatrix.Dimension;n.unmaskBitMatrix(this.bitMatrix,r);for(var i=t.buildFunctionPattern(),a=!0,o=new Array(t.TotalCodewords),s=0,h=0,w=0,f=r-1;f>0;f-=2){6==f&&f--;for(var u=0;u=0;){if(s[c].codewords.length==l)break;c--}c++;var g=l-r.ECCodewordsPerBlock,v=0;for(o=0;o1&&0==t[0]){for(var r=1;rr.length){var i=n;n=r,r=i}for(var a=new Array(r.length),o=r.length-n.length,s=0;s=e.Degree&&!n.Zero;){var a=n.Degree-e.Degree,o=this.field.multiply(n.getCoefficient(n.Degree),i),s=e.multiplyByMonomial(a,o),h=this.field.buildMonomial(a,o);t=t.addOrSubtract(h),n=n.addOrSubtract(s)}return new Array(t,n)}}function _(e){this.expTable=new Array(256),this.logTable=new Array(256);for(var t=1,n=0;n<256;n++)this.expTable[n]=t,(t<<=1)>=256&&(t^=e);for(n=0;n<255;n++)this.logTable[this.expTable[n]]=n;var r=new Array(1);r[0]=0,this.zero=new C(this,new Array(r));var i=new Array(1);i[0]=1,this.one=new C(this,new Array(i)),this.__defineGetter__("Zero",function(){return this.zero}),this.__defineGetter__("One",function(){return this.one}),this.buildMonomial=function(e,t){if(e<0)throw"System.ArgumentException";if(0==t)return this.zero;for(var n=new Array(e+1),r=0;r7)throw"System.ArgumentException";return y.DATA_MASKS[e]},y.DATA_MASKS=new Array(new function(){this.unmaskBitMatrix=function(e,t){for(var n=0;n=Math.floor(n/2);){var f=i,u=o,d=h;if(o=s,h=w,(i=a).Zero)throw"r_{i-1} was zero";a=f;for(var l=this.field.Zero,c=i.getCoefficient(i.Degree),g=this.field.inverse(c);a.Degree>=i.Degree&&!a.Zero;){var v=a.Degree-i.Degree,m=this.field.multiply(a.getCoefficient(a.Degree),g);l=l.addOrSubtract(this.field.buildMonomial(v,m)),a=a.addOrSubtract(i.multiplyByMonomial(v,m))}s=l.multiply1(o).addOrSubtract(u),w=l.multiply1(h).addOrSubtract(d)}var b=w.getCoefficient(0);if(0==b)throw"ReedSolomonException sigmaTilde(0) was zero";var y=this.field.inverse(b),C=w.multiply2(y),_=a.multiply2(y);return new Array(C,_)},this.findErrorLocations=function(e){var t=e.Degree;if(1==t)return new Array(e.getCoefficient(1));for(var n=new Array(t),r=0,i=1;i<256&&r=0?e>>t:(e>>t)+(2<<~t)}A.imagedata=null,A.width=0,A.height=0,A.qrCodeSymbol=null,A.debug=!1,A.maxImgSize=1048576,A.sizeOfDataLengthInfo=[[10,9,8,8],[12,11,16,10],[14,13,16,12]],A.callback=null,A.vidSuccess=function(e){A.localstream=e,A.webkit?A.video.src=window.webkitURL.createObjectURL(e):A.moz?(A.video.mozSrcObject=e,A.video.play()):A.video.src=e,A.gUM=!0,A.canvas_qr2=document.createElement("canvas"),A.canvas_qr2.id="qr-canvas",A.qrcontext2=A.canvas_qr2.getContext("2d"),A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,setTimeout(A.captureToCanvas,500)},A.vidError=function(e){A.gUM=!1},A.captureToCanvas=function(){if(A.gUM)try{if(0==A.video.videoWidth)return void setTimeout(A.captureToCanvas,500);A.canvas_qr2.width=A.video.videoWidth,A.canvas_qr2.height=A.video.videoHeight,A.qrcontext2.drawImage(A.video,0,0);try{A.decode()}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}}catch(e){console.log(e),setTimeout(A.captureToCanvas,500)}},A.setWebcam=function(e){var t=navigator;A.video=document.getElementById(e);var n=!0;if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices)try{navigator.mediaDevices.enumerateDevices().then(function(e){e.forEach(function(e){console.log("deb1"),"videoinput"===e.kind&&e.label.toLowerCase().search("back")>-1&&(n=[{sourceId:e.deviceId}]),console.log(e.kind+": "+e.label+" id = "+e.deviceId)})})}catch(e){console.log(e)}else console.log("no navigator.mediaDevices.enumerateDevices");t.getUserMedia?t.getUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError):t.webkitGetUserMedia?(A.webkit=!0,t.webkitGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError)):t.mozGetUserMedia&&(A.moz=!0,t.mozGetUserMedia({video:n,audio:!1},A.vidSuccess,A.vidError))},A.decode=function(e){if(0==arguments.length){if(A.canvas_qr2)var t=A.canvas_qr2,n=A.qrcontext2;else n=(t=document.getElementById("qr-canvas")).getContext("2d");return A.width=t.width,A.height=t.height,A.imagedata=n.getImageData(0,0,A.width,A.height),A.result=A.process(n),null!=A.callback&&A.callback(A.result),A.result}var r=new Image;r.crossOrigin="Anonymous",r.onload=function(){var e=document.getElementById("out-canvas");if(null!=e){var t=e.getContext("2d");t.clearRect(0,0,320,240),t.drawImage(r,0,0,320,240)}var n=document.createElement("canvas"),i=n.getContext("2d"),a=r.height,o=r.width;if(r.width*r.height>A.maxImgSize){var s=r.width/r.height;o=s*(a=Math.sqrt(A.maxImgSize/s))}n.width=o,n.height=a,i.drawImage(r,0,0,n.width,n.height),A.width=n.width,A.height=n.height;try{A.imagedata=i.getImageData(0,0,n.width,n.height)}catch(e){return A.result="Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!",void(null!=A.callback&&A.callback(A.result))}try{A.result=A.process(i)}catch(e){console.log(e),A.result="error decoding QR Code"}null!=A.callback&&A.callback(A.result)},r.onerror=function(){null!=A.callback&&A.callback("Failed to load the image")},r.src=e},A.isUrl=function(e){return/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(e)},A.decode_url=function(e){var t="";try{t=escape(e)}catch(n){console.log(n),t=e}var n="";try{n=decodeURIComponent(t)}catch(e){console.log(e),n=t}return n},A.decode_utf8=function(e){return A.isUrl(e)?A.decode_url(e):e},A.process=function(e){var t=(new Date).getTime(),n=A.grayScaleToBitmap(A.grayscale());if(A.debug){for(var r=0;rr[s][o][1]&&(r[s][o][1]=f)}}for(var u=new Array(4),d=0;d<4;d++)u[d]=new Array(4);for(o=0;o<4;o++)for(s=0;s<4;s++)u[s][o]=Math.floor((r[s][o][0]+r[s][o][1])/2);return u},A.grayScaleToBitmap=function(e){for(var t=A.getMiddleBrightnessPerArea(e),n=t.length,r=Math.floor(A.width/n),i=Math.floor(A.height/n),a=new ArrayBuffer(A.width*A.height),o=new Uint8Array(a),s=0;s=0&&i[t+s*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.crossCheckHorizontal=function(e,t,n,r){for(var i=this.image,a=A.width,o=this.CrossCheckStateCount,s=e;s>=0&&i[s+t*A.width];)o[2]++,s--;if(s<0)return NaN;for(;s>=0&&!i[s+t*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&i[s+t*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;s=n)return NaN;for(;s=n)return NaN;var h=o[0]+o[1]+o[2]+o[3]+o[4];return 5*Math.abs(h-r)>=r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2]+e[3]+e[4],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),e[2],r);if(!isNaN(a)&&(i=this.crossCheckHorizontal(Math.floor(i),Math.floor(a),e[2],r),!isNaN(i))){for(var o=r/7,s=!1,h=this.possibleCenters.length,w=0;w3){for(var t=0,n=0,r=0;r=0;r--){var h=this.possibleCenters[r];Math.abs(h.EstimatedModuleSize-a)>s&&this.possibleCenters.splice(r,1)}}return this.possibleCenters.length>3&&this.possibleCenters.sort(function(e,t){return e.count>t.count?-1:e.count=B){if(null!=t)return this.hasSkipped=!0,Math.floor((Math.abs(t.X-r.X)-Math.abs(t.Y-r.Y))/2);t=r}}return 0},this.haveMultiplyConfirmedCenters=function(){for(var e=0,t=0,n=this.possibleCenters.length,r=0;r=B&&(e++,t+=i.EstimatedModuleSize)}if(e<3)return!1;var a=t/n,o=0;for(r=0;ra[2]&&(o+=w-a[2]-r,h=n-1)}else{do{h++}while(h=n)return!1;return!0},this.crossCheckVertical=function(e,t,n,r){var i=this.image,a=A.height,o=this.crossCheckStateCount;o[0]=0,o[1]=0,o[2]=0;for(var s=e;s>=0&&i[t+s*A.width]&&o[1]<=n;)o[1]++,s--;if(s<0||o[1]>n)return NaN;for(;s>=0&&!i[t+s*A.width]&&o[0]<=n;)o[0]++,s--;if(o[0]>n)return NaN;for(s=e+1;sn)return NaN;for(;sn)return NaN;var h=o[0]+o[1]+o[2];return 5*Math.abs(h-r)>=2*r?NaN:this.foundPatternCross(o)?this.centerFromEnd(o,s):NaN},this.handlePossibleCenter=function(e,t,n){var r=e[0]+e[1]+e[2],i=this.centerFromEnd(e,n),a=this.crossCheckVertical(t,Math.floor(i),2*e[1],r);if(!isNaN(a)){for(var o=(e[0]+e[1]+e[2])/3,s=this.possibleCenters.length,h=0;h>1),s=new Array(0,0,0),h=0;h>1:-(h+1>>1));s[0]=0,s[1]=0,s[2]=0;for(var f=t;f=10&&t<=26?this.dataLengthMode=1:t>=27&&t<=40&&(this.dataLengthMode=2),this.getNextBits=function(e){var t=0;if(e>this.bitPointer-e+1,this.bitPointer-=e,t}if(e>8-(e-(this.bitPointer+1)),this.bitPointer=this.bitPointer-e%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}if(e>8-(e-(this.bitPointer+1+8))),this.bitPointer=this.bitPointer-(e-8)%8,this.bitPointer<0&&(this.bitPointer=8+this.bitPointer),t}return 0},this.NextMode=function(){return this.blockPointer>this.blocks.length-this.numErrorCorrectionCode-2?0:this.getNextBits(4)},this.getDataLength=function(e){for(var t=0;e>>t!=1;)t++;return this.getNextBits(A.sizeOfDataLengthInfo[this.dataLengthMode][t])},this.getRomanAndFigureString=function(e){var t=e,n=0,r="",i=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","$","%","*","+","-",".","/",":");do{if(t>1){var a=(n=this.getNextBits(11))%45;r+=i[Math.floor(n/45)],r+=i[a],t-=2}else 1==t&&(r+=i[n=this.getNextBits(6)],t-=1)}while(t>0);return r},this.getFigureString=function(e){var t=e,n=0,r="";do{t>=3?((n=this.getNextBits(10))<100&&(r+="0"),n<10&&(r+="0"),t-=3):2==t?((n=this.getNextBits(7))<10&&(r+="0"),t-=2):1==t&&(n=this.getNextBits(4),t-=1),r+=n}while(t>0);return r},this.get8bitByteArray=function(e){var t=e,n=0,r=new Array;do{n=this.getNextBits(8),r.push(n),t--}while(t>0);return r},this.getKanjiString=function(e){var t=e,n=0,r="";do{var i=((n=this.getNextBits(13))/192<<8)+n%192,a=0;a=i+33088<=40956?i+33088:i+49472,r+=String.fromCharCode(a),t--}while(t>0);return r},this.parseECIValue=function(){var e=0,t=this.getNextBits(8);(0==(128&t)&&(e=127&t),128==(192&t))&&(e=(63&t)<<8|this.getNextBits(8));192==(224&t)&&(e=(31&t)<<16|this.getNextBits(8));return e},this.__defineGetter__("DataByte",function(){for(var e=new Array;;){var t=this.NextMode();if(0==t){if(e.length>0)break;throw"Empty data block"}if(1!=t&&2!=t&&4!=t&&8!=t&&7!=t)throw"Invalid mode: "+t+" in (block:"+this.blockPointer+" bit:"+this.bitPointer+")";if(7==t)var n=this.parseECIValue();else{var r=this.getDataLength(t);if(r<1)throw"Invalid data length: "+r;switch(t){case 1:for(var i=this.getFigureString(r),a=new Array(i.length),o=0;o=a&&o>=s?(r=e[0],n=e[1],i=e[2]):s>=o&&s>=a?(r=e[1],n=e[0],i=e[2]):(r=e[2],n=e[0],i=e[1]),function(e,t,n){var r=t.x,i=t.y;return(n.x-r)*(e.y-i)-(n.y-i)*(e.x-r)}(n,r,i)<0){var h=n;n=i,i=h}e[0]=n,e[1]=r,e[2]=i},A} + +/** Html5Qrcode From here */ +"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;dk)throw"'config.qrbox' should not be greater than the width of the HTML element."}var m=function(a,b){var c=h.qrbox;c>b&&console.warn("[Html5Qrcode] config.qrboxsize is greater than video height. Shading will be ignored");var d=i&&c<=b,e=d?f._getShadedRegionBounds(a,b,c):{x:0,y:0,width:a,height:b},k=f._createCanvasElement(e.width,e.height),l=k.getContext("2d");l.canvas.width=e.width,l.canvas.height=e.height,j.append(k),d&&f._possiblyInsertShadingElement(j,b,e),g._qrRegion=e,g._context=l,g._canvasElement=k},n=function(){try{return g.qrcode.decode(),f._possiblyUpdateShaders(!0),!0}catch(a){return f._possiblyUpdateShaders(!1),e("QR code parse error, error = ".concat(a)),!1}},o=function b(){if(g._shouldScan){if(g._localMediaStream){var c=g._videoElement,d=c.videoWidth/c.clientWidth,e=c.videoHeight/c.clientHeight,i=g._qrRegion.width*d,j=g._qrRegion.height*e,k=g._qrRegion.x*d,l=g._qrRegion.y*e;g._context.drawImage(g._videoElement,k,l,i,j,0,0,g._qrRegion.width,g._qrRegion.height),n()||!0===h.disableFlip||(f._context.translate(f._context.canvas.width,0),f._context.scale(-1,1),n())}g._foreverScanTimeout=setTimeout(b,a._getTimeoutFps(h.fps))}},p=function(a){return new Promise(function(b,c){var d=function(){var d=f._createVideoElement(k);g._element.append(d),d.onabort=c,d.onerror=c,d.onplaying=function(){var a=d.clientWidth,c=d.clientHeight;m(a,c),o(),b()},d.srcObject=a,d.play(),g._videoElement=d};if(g._localMediaStream=a,!h.aspectRatio)d();else{var e={aspectRatio:h.aspectRatio},i=a.getVideoTracks()[0];i.applyConstraints(e).then(function(){return d()})["catch"](function(a){console.log("[Warning] [Html5Qrcode] Constriants could not be satisfied, ignoring constraints",a),d()})}})};return new Promise(function(a,c){if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){var d=g._createVideoConstraints(b);navigator.mediaDevices.getUserMedia({audio:!1,video:d}).then(function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)})["catch"](function(a){c("Error getting userMedia, error = ".concat(a))})}else if(navigator.getUserMedia){if("string"!=typeof b)throw"The device doesn't support navigator.mediaDevices, only supported cameraIdOrConfig in this case is deviceId parameter (string).";navigator.getUserMedia({video:{optional:[{sourceId:b}]}},function(b){p(b).then(function(){g._isScanning=!0,a()})["catch"](c)},function(a){c("Error getting userMedia, error = ".concat(a))})}else c("Web camera streaming not supported by the browser.")})}},{key:"stop",value:function(){this._shouldScan=!1,clearTimeout(this._foreverScanTimeout);var b=this;return new Promise(function(c){b.qrcode.callback=null;var d=b._localMediaStream.getVideoTracks().length,e=0,f=function(){for(;b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME).length;){var c=b._element.getElementsByClassName(a.SHADED_REGION_CLASSNAME)[0];b._element.removeChild(c)}},g=function(){b._localMediaStream=null,b._element.removeChild(b._videoElement),b._element.removeChild(b._canvasElement),f(),b._isScanning=!1,b._qrRegion&&(b._qrRegion=null),b._context&&(b._context=null),c(!0)};b._localMediaStream.getVideoTracks().forEach(function(a){a.stop(),++e,e>=d&&g()})})}},{key:"scanFile",value:function(b,c){var d=this;if(!b||!(b instanceof File))throw"imageFile argument is mandatory and should be instance of File. Use 'event.target.files[0]'";if(c=void 0===c||c,d._isScanning)throw"Close ongoing scan before scanning a file.";var e=function b(c,d,e,f){if(c<=e&&d<=f){var g=(e-c)/2,h=(f-d)/2;return{x:g,y:h,width:c,height:d}}var i=c,j=d;return c>e&&(d=e/c*d,c=e),d>f&&(c=f/d*c,d=f),a._log("Image downsampled from "+"".concat(i,"X").concat(j)+" to ".concat(c,"X").concat(d,".")),b(c,d,e,f)};return new Promise(function(f,g){d._possiblyCloseLastScanImageFile(),d._clearElement(),d._lastScanImageFile=b;var h=new Image;h.onload=function(){var b=Math.max,i=h.width,j=h.height,k=document.getElementById(d._elementId),l=k.clientWidth?k.clientWidth:a.DEFAULT_WIDTH,m=b(k.clientHeight?k.clientHeight:j,a.FILE_SCAN_MIN_HEIGHT),n=e(i,j,l,m);if(c){var o=d._createCanvasElement(l,m,"qr-canvas-visible");o.style.display="inline-block",k.appendChild(o);var p=o.getContext("2d");p.canvas.width=l,p.canvas.height=m,p.drawImage(h,0,0,i,j,n.x,n.y,n.width,n.height)}var q=d._createCanvasElement(n.width,n.height);k.appendChild(q);var r=q.getContext("2d");r.canvas.width=n.width,r.canvas.height=n.height,r.drawImage(h,0,0,i,j,0,0,n.width,n.height);try{f(d.qrcode.decode())}catch(a){g("QR code parse error, error = ".concat(a))}},h.onerror=g,h.onabort=g,h.onstalled=g,h.onsuspend=g,h.src=URL.createObjectURL(b)})}},{key:"clear",value:function(){this._clearElement()}},{key:"_clearElement",value:function(){if(this._isScanning)throw"Cannot clear while scan is ongoing, close it first.";var a=document.getElementById(this._elementId);a.innerHTML=""}},{key:"_createCanvasElement",value:function(a,b,c){var d=document.createElement("canvas");return d.style.width="".concat(a,"px"),d.style.height="".concat(b,"px"),d.style.display="none",d.id=null==c?"qr-canvas":c,d}},{key:"_createVideoElement",value:function(a){var b=document.createElement("video");return b.style.width="".concat(a,"px"),b.muted=!0,b.playsInline=!0,b}},{key:"_getShadedRegionBounds",value:function(a,b,c){if(c>a||c>b)throw"'config.qrbox' should not be greater than the width and height of the HTML element.";return{x:(a-c)/2,y:(b-c)/2,width:c,height:c}}},{key:"_possiblyInsertShadingElement",value:function(b,c,d){var e=this;if(0!=d.x||0!=d.y){var f={};f[a.SHADED_LEFT]=this._createShadedElement(c,d,a.SHADED_LEFT),f[a.SHADED_RIGHT]=this._createShadedElement(c,d,a.SHADED_RIGHT),f[a.SHADED_TOP]=this._createShadedElement(c,d,a.SHADED_TOP),f[a.SHADED_BOTTOM]=this._createShadedElement(c,d,a.SHADED_BOTTOM),Object.keys(f).forEach(function(a){return b.append(f[a])}),10>d.x||10>d.y?this.hasBorderShaders=!1:(Object.keys(f).forEach(function(a){return e._insertShaderBorders(f[a],d,a)}),this.hasBorderShaders=!0)}}},{key:"_createShadedElement",value:function(b,c,d){var e=document.createElement("div");switch(e.style.position="absolute",e.style.height="".concat(b,"px"),e.className=a.SHADED_REGION_CLASSNAME,e.id="".concat(a.SHADED_REGION_CLASSNAME,"_").concat(d),e.style.background="#0000007a",d){case a.SHADED_LEFT:e.style.top="0px",e.style.left="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_RIGHT:e.style.top="0px",e.style.right="0px",e.style.width="".concat(c.x,"px"),e.style.height="".concat(b,"px");break;case a.SHADED_TOP:e.style.top="0px",e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;case a.SHADED_BOTTOM:var f=c.y+c.height;e.style.top="".concat(f,"px"),e.style.left="".concat(c.x,"px"),e.style.width="".concat(c.width,"px"),e.style.height="".concat(c.y,"px");break;default:throw"Unsupported shadingPosition";}return e}},{key:"_insertShaderBorders",value:function(b,c,d){d=parseInt(d);var e=this,f=5,g=5,h=40,i=function(){var b=document.createElement("div");switch(b.style.position="absolute",b.style.backgroundColor=a.BORDER_SHADER_DEFAULT_COLOR,d){case a.SHADED_LEFT:case a.SHADED_RIGHT:b.style.width="".concat(g,"px"),b.style.height="".concat(h+f,"px");break;case a.SHADED_TOP:case a.SHADED_BOTTOM:b.style.width="".concat(h+f,"px"),b.style.height="".concat(g,"px");break;default:throw"Unsupported shadingPosition";}return b},j=function(a,c){if(null===a||null===c)throw"Shaders should have defined positions";var d=i();d.style.top="".concat(a,"px"),d.style.left="".concat(c,"px"),b.appendChild(d),e.borderShaders||(e.borderShaders=[]),e.borderShaders.push(d)},k=null,l=null,m=null,n=null;switch(d){case a.SHADED_LEFT:k=c.y-f,l=c.x-g,m=c.y+c.height-h,n=l;break;case a.SHADED_RIGHT:k=c.y-f,l=0,m=c.y+c.height-h,n=l;break;case a.SHADED_TOP:k=c.y-f,l=-g,m=k,n=c.width-h;break;case a.SHADED_BOTTOM:k=0,l=-g,m=k,n=c.width-h;break;default:throw"Unsupported shadingPosition";}j(k,l),j(m,n)}},{key:"_possiblyUpdateShaders",value:function(b){this.qrMatch===b||(this.hasBorderShaders&&this.borderShaders&&this.borderShaders.length&&this.borderShaders.forEach(function(c){c.style.backgroundColor=b?a.BORDER_SHADER_MATCH_COLOR:a.BORDER_SHADER_DEFAULT_COLOR}),this.qrMatch=b)}},{key:"_possiblyCloseLastScanImageFile",value:function(){this._lastScanImageFile&&(URL.revokeObjectURL(this._lastScanImageFile),this._lastScanImageFile=null)}},{key:"_createVideoConstraints",value:function(a){if("string"==typeof a)return{deviceId:{exact:a}};if("object"==_typeof(a)){var b={user:!0,environment:!0},c=function(a){if(a in b)return!0;throw"config has invalid 'facingMode' value = "+"'".concat(a,"'")},d=Object.keys(a);if(1!=d.length)throw"'cameraIdOrConfig' object should have exactly 1 key,"+" if passed as an object, found ".concat(d.length," keys");var e=Object.keys(a)[0];if("facingMode"!=e&&"deviceId"!=e)throw"Only '".concat("facingMode","' and '").concat("deviceId","' ")+" are supported for 'cameraIdOrConfig'";if("facingMode"==e){var f=a[e];if("string"==typeof f){if(c(f))return{facingMode:f};}else if("object"!=_typeof(f)){var g=_typeof(f);throw"Invalid type of 'facingMode' = ".concat(g)}else if(!("exact"in f))throw"'facingMode' should be string or object with"+" ".concat("exact"," as key.");else if(c(f.exact))return{facingMode:{exact:f.exact}}}else{var h=a[e];if("string"==typeof h)return{deviceId:h};if("object"==_typeof(h)){if("exact"in h)return{deviceId:{exact:h.exact}};throw"'deviceId' should be string or object with"+" ".concat("exact"," as key.")}else{var i=_typeof(h);throw"Invalid type of 'deviceId' = ".concat(i)}}}else{var j=_typeof(a);throw"Invalid type of 'cameraIdOrConfig' = ".concat(j)}}}],[{key:"getCameras",value:function(){var a=this;return new Promise(function(b,c){if(navigator.mediaDevices&&navigator.mediaDevices.enumerateDevices&&navigator.mediaDevices.getUserMedia)a._log("navigator.mediaDevices used"),navigator.mediaDevices.getUserMedia({audio:!1,video:!0}).then(function(d){d.oninactive=function(){return a._log("All streams closed")};var e=function(a){for(var b,c=a.getVideoTracks(),d=0;d",c.appendChild(b.cameraScanImage)},this.cameraScanImage.width=64,this.cameraScanImage.style.opacity=.3,this.cameraScanImage.src=a.ASSET_CAMERA_SCAN)}},{key:"__insertFileScanImageToScanRegion",value:function(){var b=this,c=document.getElementById(this.__getScanRegionId());return this.fileScanImage?(c.innerHTML="
",void c.appendChild(this.fileScanImage)):void(this.fileScanImage=new Image,this.fileScanImage.onload=function(){c.innerHTML="
",c.appendChild(b.fileScanImage)},this.fileScanImage.width=64,this.fileScanImage.style.opacity=.3,this.fileScanImage.src=a.ASSET_FILE_SCAN)}},{key:"__clearScanRegion",value:function(){var a=document.getElementById(this.__getScanRegionId());a.innerHTML=""}},{key:"__getDashboardSectionId",value:function(){return"".concat(this.elementId,"__dashboard_section")}},{key:"__getDashboardSectionCameraScanRegionId",value:function(){return"".concat(this.elementId,"__dashboard_section_csr")}},{key:"__getDashboardSectionFileScanRegionId",value:function(){return"".concat(this.elementId,"__dashboard_section_fsr")}},{key:"__getDashboardSectionSwapLinkId",value:function(){return"".concat(this.elementId,"__dashboard_section_swaplink")}},{key:"__getScanRegionId",value:function(){return"".concat(this.elementId,"__scan_region")}},{key:"__getDashboardId",value:function(){return"".concat(this.elementId,"__dashboard")}},{key:"__getFileScanInputId",value:function(){return"".concat(this.elementId,"__filescan_input")}},{key:"__getStatusSpanId",value:function(){return"".concat(this.elementId,"__status_span")}},{key:"__getHeaderMessageContainerId",value:function(){return"".concat(this.elementId,"__header_message")}},{key:"__getCameraSelectionId",value:function(){return"".concat(this.elementId,"__camera_selection")}},{key:"__getCameraScanRegion",value:function(){return document.getElementById(this.__getDashboardSectionCameraScanRegionId())}},{key:"__getFileScanRegion",value:function(){return document.getElementById(this.__getDashboardSectionFileScanRegionId())}},{key:"__getFileScanInput",value:function(){return document.getElementById(this.__getFileScanInputId())}},{key:"__getDashboardSectionSwapLink",value:function(){return document.getElementById(this.__getDashboardSectionSwapLinkId())}}]),a}();_defineProperty(Html5QrcodeScanner,"SCAN_TYPE_CAMERA","SCAN_TYPE_CAMERA"),_defineProperty(Html5QrcodeScanner,"SCAN_TYPE_FILE","SCAN_TYPE_FILE"),_defineProperty(Html5QrcodeScanner,"STATUS_SUCCESS","STATUS_SUCCESS"),_defineProperty(Html5QrcodeScanner,"STATUS_WARNING","STATUS_WARNING"),_defineProperty(Html5QrcodeScanner,"STATUS_DEFAULT","STATUS_DEFAULT"),_defineProperty(Html5QrcodeScanner,"ASSET_FILE_SCAN","https://raw.githubusercontent.com/mebjas/html5-qrcode/master/assets/file-scan.gif"),_defineProperty(Html5QrcodeScanner,"ASSET_CAMERA_SCAN","https://raw.githubusercontent.com/mebjas/html5-qrcode/master/assets/camera-scan.gif"); \ No newline at end of file From 6ca947c751bd655f9f181421ff846ee95b5b8a8f Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 8 Oct 2020 16:09:52 +0530 Subject: [PATCH 02/74] 0.0.71 --- css/main.css | 1828 ++++++ css/main.min.css | 2 +- css/main.scss | 1870 ++++++ index.html | 13947 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 17646 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 9c0fd6f..ab88fe3 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,4 @@ +<<<<<<< Updated upstream * { box-sizing: border-box; padding: 0; @@ -1822,4 +1823,1831 @@ sm-panel { .remove:hover { opacity: 1; } +======= +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: "Roboto", sans-serif; +} + +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} + +body[data-theme=dark] { + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); +} +body[data-theme=dark] .flo-balance-card { + color: rgba(var(--text-color), 1); +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: "Poppins", sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} + +strong { + font-weight: 500; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: "Poppins", sans-serif; +} +button:focus { + outline: thin solid rgba(var(--text-color-light), 0.4); +} +button:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); +} +button:disabled ~ .loader { + opacity: 0; +} + +::-moz-focus-inner { + border: none; +} + +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right { + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: 0.1em; +} + +.no-transformations { + transform: none !important; +} + +.capitalize { + text-transform: capitalize; +} + +sm-button[variant=outlined] { + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -220; + } +} +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; +} +.action:disabled .primary-btn { + background: none; +} +.action:focus { + outline: none; +} +.action h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; +} +.action .btn { + z-index: 2; +} +.action .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; +} +.action .loader:not(.animate-loader) { + opacity: 0; +} +.action .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + to { + opacity: 1; + transform: none; + } +} +.logo { + display: flex; + align-items: center; +} +.logo h4 { + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); +} +.logo .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; +} +.empty-state svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; +} +.container-header h2 { + flex: 1; +} +.container-header button { + align-self: center; +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; +} +#confirmation h4, +#prompt h4 { + font-weight: 500; + margin-bottom: 1.5rem; +} +#confirmation .flex sm-button:first-of-type, +#prompt .flex sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup .illustration { + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); +} +sm-popup sm-input:not(:last-of-type) { + margin-bottom: 1rem; +} +sm-popup p { + margin-block-end: 1rem; +} +sm-popup .action h4 { + padding: 0.5rem 1rem; + font-weight: 500; +} +sm-popup .message { + margin-bottom: 0.2rem; +} +sm-popup .message + .copy-row { + margin-bottom: 1.5rem; +} +sm-popup h5:not(.tag) { + font-family: "Roboto", sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; +} + +#reader { + overflow: hidden; +} + +.my-qr-code { + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} + +#qr_code_popup::part(popup) { + height: 90vh; +} +#qr_code_popup::part(popup-body) { + padding: 0; +} +#qr_code_popup .popup-header { + padding-bottom: 1.5rem; +} +#qr_code_popup sm-tab-header { + margin: 0 auto; + transform: translateX(-1rem); +} +#qr_code_popup sm-panel { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +#qr_code_popup video { + width: 100% !important; + object-fit: cover; +} +#qr_code_popup p { + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; +} + +sm-input[type=number] { + font-size: 1.2rem; +} + +.popup-header { + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; +} +.popup-header .icon { + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; +} +.popup-header button { + width: auto; + margin-left: auto; +} + +details, summary { + margin-bottom: 1rem; +} + +summary { + cursor: pointer; +} + +details h5 { + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; +} +details p { + font-size: 0.9rem; + line-height: 1.4; +} + +#sign_in_popup::part(background) { + background: rgba(var(--foreground-color), 1); +} +#sign_in_popup h3 { + margin-top: 2rem; +} +#sign_in_popup h4 { + font-weight: 500; + margin-bottom: 3rem; +} +#sign_in_popup button { + margin: 1rem 0; +} +#sign_in_popup p { + margin-top: 1rem; + margin-bottom: 0 !important; +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; +} +#navbar .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; +} +#navbar .navbar-item h5 { + margin-top: 0.4em; +} +#navbar .navbar-item .icon { + stroke: rgba(var(--text-color), 1); +} +#navbar .active { + opacity: 1; +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; +} +#home_page .left { + width: auto; + border-radius: 0.6rem; +} +#home_page .left h3, #home_page .left h4, #home_page .left p { + padding: 0 1.5rem; +} +#home_page .left h3 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; +} +.user-panel .icon { + stroke: rgba(var(--foreground-color), 1); +} +.user-panel .action { + width: auto; + justify-content: flex-end; +} +.user-panel .action h4 { + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto; +} +.user-panel .action .loader { + align-self: flex-end; +} +.user-panel .action .clip { + clip-path: circle(0 at 100% 0) !important; +} + +#deposit { + padding-top: 1.5rem; +} +#deposit .flex sm-button { + margin-bottom: 1.5rem; +} +#deposit .user-panel { + padding: 0 1rem; +} +#deposit .display-balance { + grid-template-areas: "rupee rupee" "flo flo"; +} + +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: "rupee ." "flo flo"; + gap: 0.8rem; + margin-top: 1rem; +} +.display-balance .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; +} + +.balance { + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; +} +.balance h4 { + font-size: 2rem; + font-family: "Roboto", sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; +} +.balance h5 { + opacity: 0.8; + margin-bottom: 0.2rem; +} +.balance .tooltip { + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; +} + +.rupee-balance-card { + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; +} +.rupee-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; +} + +.in-process-balance { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; +} +.in-process-balance .tooltip { + box-shadow: 0 0 0 0.4rem #ff4857 inset; +} + +.flo-balance-card { + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; +} +.flo-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem #1b0980 inset; +} + +.tooltip { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; +} +.tooltip .tt-icon { + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; +} +.tooltip .tooltip-text { + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; +} +.tooltip:hover { + clip-path: circle(100%); +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; +} +.option .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; +} +.option h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +.option:active { + transform: scale(0.95); +} + +.request-icon { + transform: rotate(180deg); +} + +.notification-dot::after { + content: ""; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit .container-header, +#withdraw .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} + +sm-tab { + text-transform: capitalize; +} +sm-tab::part(tab) { + padding: 0.4rem 1.2rem; +} + +sm-panel { + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); +} +.request h4 { + font-weight: 400; + font-size: 0.9rem; +} +.request h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; +} +.request .action { + align-self: flex-end; +} +.request .amount { + font-family: "Roboto", sans-serif; +} +.request button { + width: auto; +} +.request .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; +} +.request .flex button { + margin: 0; +} +.request.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.request.placeholder h4, .request.placeholder h5 { + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); +} +.request.placeholder .btns { + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; +} +.request.placeholder .btns h4 { + width: 6rem; +} +.request.placeholder h5 { + width: 50%; +} +.request.placeholder .time { + width: 3rem; +} +.request.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.request.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.request.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.request.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.request.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; +} +.page .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: ". ." "search search"; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; +} +.page .container-header .search { + grid-area: search; +} +.page .container-header .search input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; +} +.page .container-header .search input:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; +} +.copy-row h4 { + margin-bottom: 0; + font-weight: 400; +} +.copy-row .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; +} +.copy-row .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; +} +#profile_page button { + align-self: flex-start; +} + +.complaint { + display: grid; + gap: 1.5rem 0; +} +.complaint .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; +} +.complaint .processed { + color: #007732; +} +.complaint .unprocessed { + color: #d43125; +} +.complaint .processed, +.complaint .unprocessed { + margin-bottom: 1.5rem; +} +.complaint button .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page sm-select { + margin-bottom: 1.5rem; +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; +} +.complaint-placeholder h4, +.complaint-placeholder h5 { + border-radius: 0.2rem; +} +.complaint-placeholder h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; +} +.complaint-placeholder h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; +} +.complaint-placeholder .demo-btn { + padding: 0.8rem 3rem; +} + +@keyframes pulse { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; +} +#main_loader sm-button { + margin-left: 0; + margin-top: 1rem; +} +#main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; +} +#main_loader h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; +} + +#upi_txId_section .copy-row { + margin-bottom: 1.5rem; +} + +@keyframes popup { + 0% { + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40% { + transform: translateY(0) scale(0.2); + } + 41% { + transform: translateY(0) scale(0.2); + } + 50% { + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100% { + stroke-dashoffset: 0; + } +} +#transaction_result { + z-index: 12; +} +#transaction_result #transaction_heading { + margin-bottom: 1rem; +} +#transaction_result .copy-row { + grid-template-areas: "label label" ". ."; + margin-top: 1rem; + gap: 0 1rem; +} +#transaction_result .copy-row h4 { + font-weight: 500; +} +#transaction_result h5 { + grid-area: label; + color: rgba(var(--text-color), 0.7); +} +#transaction_result h4, #transaction_result h5, #transaction_result p { + text-align: center; +} +#transaction_result > h4 { + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; +} +#transaction_result sm-button { + align-self: center; + width: auto; +} + +#success_svg, #failure_svg { + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg polyline { + fill: none; + stroke: #00C853; +} + +#failure_svg line { + stroke: #EF5350; +} + +.rupee-symbol { + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee .copy-row { + margin-bottom: 1rem; +} + +.activity-container { + display: grid; + gap: 1rem; +} + +.activity { + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: "icon type amount" "icon receiver time"; + align-items: center; + cursor: pointer; + transition: transform 0.3s; +} +.activity:active { + transform: scale(0.95); +} +.activity .icon { + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; +} +.activity .activity-type { + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; +} +.activity .activity-receiver { + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.activity .activity-amount { + text-align: right; + grid-area: amount; + font-family: "Roboto", sans-serif; +} +.activity .activity-time { + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; +} +.activity .pending { + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; +} +.activity.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.activity.placeholder .activity-type, +.activity.placeholder .activity-receiver { + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; +} +.activity.placeholder .activity-type { + width: 50%; +} +.activity.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.activity.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.activity.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.activity.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.activity.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} +.activity.placeholder:nth-of-type(7) { + animation-delay: 0.6s; +} +.activity.placeholder:nth-of-type(8) { + animation-delay: 0.7s; +} + +.back-arrow { + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} + +.select { + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; +} +.select:first-of-type:not(:last-of-type) { + border-radius: 0.3rem 0.3rem 0 0; +} +.select + .select { + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); +} +.select label { + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; +} +.select input[type=radio] { + display: none; +} +.select input:checked ~ .radio .outer-ring { + stroke: var(--accent-color); +} +.select input:checked ~ .radio .inner-disc { + transform: none; +} +.select .radio { + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; +} +.select .radio .outer-ring { + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); +} +.select .radio .inner-disc { + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +.select .remove { + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; +} +.select .tag { + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; +} +.select h4 { + font-weight: 400; +} + +.add-upi { + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page header { + padding: 0.5rem 0; +} +#transaction_page header .back-arrow { + grid-area: back; +} +#transaction_page header h4 { + text-transform: capitalize; +} +#transaction_page h5 { + font-weight: 400; + font-family: "Roboto", sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; +} +#transaction_page p:last-of-type { + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; +} +#transaction_page #transaction_details { + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; +} +#transaction_page #transaction_details .icon { + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); +} +#transaction_page #transaction_details .success { + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); +} +#transaction_page #transaction_details .flex { + margin-bottom: 1.5rem; + align-items: baseline; +} +#transaction_page #transaction_details strong { + font-weight: 500; +} +#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { + margin-bottom: 1.5rem; + margin-top: -0.4rem; +} +#transaction_page #transaction_details strong:not(:last-of-type) { + margin-bottom: 1rem; +} +#transaction_page #transaction_details sm-button { + width: max-content; + margin-top: 0.6rem; +} +#transaction_page .transaction-amount { + font-size: 2rem; + font-weight: 400; +} +#transaction_page #transaction_time { + right: 0; + position: absolute; + margin: 1.5rem; +} + +#people_container { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +#add_person_btn { + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +#add_person_btn:active { + transform: scale(0.95); +} +#add_person_btn .icon { + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; +} + +.person { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; +} +.person:active { + transform: scale(0.95); +} + +.person-initials, #person_initials { + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; + color: rgba(var(--foreground-color), 1); +} + +.person-name { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup > .flex:first-of-type { + margin: 1rem 0; +} +#person_popup > .flex:first-of-type .flex { + margin-top: 0.5rem; +} +#person_popup > .flex:first-of-type .flex .icon { + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; +} +#person_popup > .flex:first-of-type .flex .icon:hover { + background: rgba(var(--text-color), 0.06); +} +#person_popup h3 { + text-transform: capitalize; +} +#person_popup h5 { + font-weight: 500; + opacity: 0.8; +} +#person_popup .copy-row { + margin-bottom: 1.5rem; +} +#person_popup #show_person_name { + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; +} +#person_popup #show_person_name:focus { + outline: none; + background: rgba(var(--text-color), 0.1); +} + +#activity_page .empty-state, +#request_page .empty-state, +#settings_page .empty-state { + justify-content: left; +} + +#settings_page h4 { + margin-top: 2rem; + margin-bottom: 0.6rem; +} +#settings_page .copy-row h4 { + margin: 0; +} +#settings_page p { + color: rgba(var(--text-color), 0.7); +} +#settings_page sm-button { + margin-top: 0.8rem; +} +#settings_page .flex { + max-width: 60ch; +} +#settings_page .my-qr-code { + margin-bottom: 1.5rem; + height: 14rem; +} +#settings_page .my-qr-code img { + height: 100%; +} + +@media only screen and (max-width: 640px) { + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-areas: "." "left"; + grid-template-columns: minmax(0, 1fr); + } + #home_page .left, #deposit .left { + grid-area: left; + } + + sm-select { + width: 100%; + } + + .hide-on-mobile { + display: none !important; + } + + #transaction_page { + padding-top: 0; + } + #transaction_page header { + padding: 1.5rem 0; + } + + #deposit .user-panel { + padding: 0; + } + + video { + height: 100vw; + } +} +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + body { + padding: 0 2rem; + margin-left: 4rem; + } + + sm-popup { + background: rgba(var(--foreground-color), 1); + } + + sm-popup::part(popup) { + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + } + #navbar .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + } + #navbar .navbar-item .icon { + height: 1.2rem; + width: 1.2rem; + } + #navbar .navbar-item h5 { + display: none; + } + #navbar .navbar-item:hover { + opacity: 1; + } + #navbar .logo { + margin: 1.5rem 1rem; + } + #navbar .logo h4 { + display: none; + } + #navbar .logo .main-logo { + height: 1.2rem; + width: 1.2rem; + } + #navbar .active { + background: rgba(var(--text-color), 0.06); + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + + #home_page { + padding-top: 0.5rem; + } + #home_page .left { + margin-top: 1rem; + } + + .options-tab, #people_container { + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + + .display-balance .balance { + height: 9rem; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } + .request .time { + grid-area: time; + margin-bottom: 0 !important; + } + .request button { + width: max-content; + margin-left: auto; + } + .request .breakable { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #deposit .user-panel { + padding-right: 0; + } + + #settings_page .copy-row { + display: inline-grid; + } +} +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: ". . " "header header"; + } + .complaint .complaint-actions { + grid-area: header; + } + .complaint .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + .complaint .right { + display: flex; + justify-content: center; + flex-direction: column; + } + + #navbar .navbar-item h5 { + font-size: 0.9rem; + margin: 0; + display: block; + } + #navbar .icon { + margin-right: 0.8rem; + } + #navbar .logo h4 { + display: block; + font-size: 1rem; + } + + .user-panel { + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 18rem; + } + #deposit .user-panel { + padding-right: 0; + } + + .activity { + width: 60ch; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } +} +@media only screen and (min-width: 1280px) { + .request { + grid-template-areas: "time time time" ". . ."; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 20rem; + } + #deposit .request { + grid-template-areas: "time time time time" ". . . ."; + } +} +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} +@media (any-hover: hover) { + .navbar-item:hover { + background: rgba(var(--text-color), 0.06); + } + + .remove { + opacity: 0.6; + } + + .remove:hover { + opacity: 1; + } +>>>>>>> Stashed changes } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 99af61e..58256ec 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{position:relative}.balance h4,.breakable{word-break:break-all}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.option,.person,button{-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}.action,.align-center{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em;stroke-dashoffset:220;stroke-dasharray:220}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo{display:flex;align-items:center}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem;background:rgba(var(--text-color),.06)}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}#deposit .flex sm-button,sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}#reader{overflow:hidden}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4{color:rgba(var(--text-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit{padding-top:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;color:rgba(var(--foreground-color),1);background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option{transition:transform .3s;cursor:pointer}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5em;border-radius:.6rem;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{font-weight:400;opacity:.8;margin-bottom:.2rem}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center;background:rgba(var(--text-color),.06)}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background:rgba(var(--text-color),.06);background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500}.activity .pending{display:inline-flex;padding:.3rem .6rem;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{transition:transform .3s;cursor:pointer}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem;background:rgba(var(--text-color),.06)}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;flex-direction:column;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;flex-direction:column;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.6rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page h4{margin-top:2rem;margin-bottom:.6rem}#settings_page .copy-row h4{margin:0}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}video{height:100vw}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file +#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4,body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}#navbar .navbar-item,.activity,.back-arrow,.copy-row .icon,.display-balance .icon,.option,.popup-header .icon,.select .remove,.select label,button,summary{cursor:pointer}.option,.person,button{-webkit-tap-highlight-color:transparent}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.back-arrow,.loader{height:2rem;fill:none}.action,button{position:relative;display:inline-flex}.balance h4,.breakable{word-break:break-all}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.action,.logo{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em;stroke-dashoffset:220;stroke-dasharray:220}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo{display:flex}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1)}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.option .icon,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem}#main_loader,#navbar{position:fixed;left:0}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}#deposit .flex sm-button,sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}#reader{overflow:hidden}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit{padding-top:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10}.balance{height:10rem;position:relative;display:flex;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;color:rgba(var(--foreground-color),1);background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option{transition:transform .3s}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem}.option .icon{height:3rem;width:3rem;border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}.activity,.request{border-radius:.6rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5em;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{font-weight:400;opacity:.8;margin-bottom:.2rem}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center;background:rgba(var(--text-color),.06)}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#deposit_rupee .copy-row,#transaction_result #transaction_heading{margin-bottom:1rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}.activity-container{display:grid;gap:1rem}.activity{display:grid;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background:rgba(var(--text-color),.06);background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500}.activity .pending{display:inline-flex;padding:.3rem .6rem;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#add_person_btn:active,.person:active{transform:scale(.95)}.select .remove{width:3rem;height:2rem;padding:.7rem;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem;background:rgba(var(--text-color),.06)}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#add_person_btn,.person{flex-direction:column;transition:transform .3s;cursor:pointer}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.6rem!important;text-transform:uppercase;color:rgba(var(--foreground-color),1)}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page h4{margin-top:2rem;margin-bottom:.6rem}#settings_page .copy-row h4{margin:0}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}video{height:100vw}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 4368571..442aaa0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,3 +1,4 @@ +<<<<<<< Updated upstream * { box-sizing: border-box; padding: 0; @@ -1864,3 +1865,1872 @@ sm-panel{ opacity: 1; } } +======= +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Roboto', sans-serif; +} +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} +body[data-theme="dark"]{ + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); + .flo-balance-card{ + color: rgba(var(--text-color), 1); + } +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} +strong{ + font-weight: 500; +} +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: 'Poppins', sans-serif; + + &:focus { + outline: thin solid rgba(var(--text-color-light), .4); + } + + &:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); + } + + &:disabled~.loader { + opacity: 0; + } +} +::-moz-focus-inner { + border: none; +} +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right{ + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: .1em; +} + +.no-transformations { + transform: none !important; +} +.capitalize{ + text-transform: capitalize; +} + +sm-button[variant="outlined"]{ + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -220; + } +} + +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; + &:disabled{ + .primary-btn { + background: none; + } + } + &:focus{ + outline: none; + } + h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; + } + + .btn { + z-index: 2; + } + + .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; + } + .loader:not(.animate-loader){ + opacity: 0; + } + .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + } + +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + + to { + opacity: 1; + transform: none; + } +} + +.logo { + display: flex; + align-items: center; + h4{ + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); + } + .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; + } +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; + svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; + } +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; + + h2 { + flex: 1; + } + + button { + align-self: center; + } +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 1.5rem; + } + + .flex { + sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; + } + } +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup{ + .illustration{ + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); + } + sm-input:not(:last-of-type) { + margin-bottom: 1rem; + } + p{ + margin-block-end: 1rem; + } + .action{ + h4{ + padding: 0.5rem 1rem; + font-weight: 500; + } + } + .message{ + margin-bottom: 0.2rem; + } + .message + .copy-row{ + margin-bottom: 1.5rem; + } + h5:not(.tag){ + font-family: 'Roboto', sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; + } +} + +#reader{ + overflow: hidden; +} +.my-qr-code{ + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} +#qr_code_popup{ + &::part(popup){ + height: 90vh; + } + &::part(popup-body){ + padding: 0; + } + .popup-header{ + padding-bottom: 1.5rem; + } + sm-tab-header{ + margin: 0 auto; + transform: translateX(-1rem); + } + sm-panel{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + video{ + width: 100% !important; + object-fit: cover; + } + p{ + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; + } +} +sm-input[type="number"]{ + font-size: 1.2rem; +} + +.popup-header{ + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; + .icon{ + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; + } + button{ + width: auto; + margin-left: auto; + } +} + +details, summary{ + margin-bottom: 1rem; +} +summary{ + cursor: pointer; +} +details{ + h5{ + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; + } + p{ + font-size: 0.9rem; + line-height: 1.4; + } +} + +#sign_in_popup { + &::part(background){ + background: rgba(var(--foreground-color), 1); + } + h3 { + margin-top: 2rem; + } + + h4 { + font-weight: 500; + margin-bottom: 3rem; + } + + button { + margin: 1rem 0; + } + + p { + margin-top: 1rem; + margin-bottom: 0 !important; + } +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; + .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; + h5 { + margin-top: 0.4em; + } + .icon{ + stroke: rgba(var(--text-color), 1); + } + } + .active{ + opacity: 1; + } +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; + .left { + width: auto; + border-radius: 0.6rem; + h3, h4, p { + padding: 0 1.5rem; + } + h3{ + font-size: 2rem; + margin-bottom: 1rem; + } + } +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; + .icon{ + stroke: rgba(var(--foreground-color), 1); + } + .action{ + width: auto; + justify-content: flex-end; + h4{ + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto ; + } + .loader{ + align-self: flex-end; + } + .clip{ + clip-path: circle(0 at 100% 0) !important; + } + } +} +#deposit{ + padding-top: 1.5rem; + .flex{ + sm-button{ + margin-bottom: 1.5rem; + } + } + .user-panel{ + padding: 0 1rem; + } + .display-balance { + grid-template-areas: 'rupee rupee' 'flo flo'; + } +} +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: 'rupee .' 'flo flo'; + gap: 0.8rem; + margin-top: 1rem; + .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; + } +} +.balance{ + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; + h4{ + font-size: 2rem; + font-family: 'Roboto', sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; + } + h5{ + opacity: 0.8; + margin-bottom: 0.2rem; + } + .tooltip{ + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; + } +} +.rupee-balance-card{ + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; + } +} +.in-process-balance{ + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem #ff4857 inset; + } +} +.flo-balance-card{ + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem#1b0980 inset; + } +} + +.tooltip{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; + .tt-icon{ + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; + } + .tooltip-text{ + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; + } + &:hover{ + clip-path: circle(100%); + } +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; + .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; + } + + h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + } + + &:active { + transform: scale(0.95); + } +} + +.request-icon{ + transform: rotate(180deg); +} + +.notification-dot::after { + content: ''; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit, +#withdraw { + .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); + } +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} +sm-tab{ + text-transform: capitalize; + &::part(tab){ + padding: 0.4rem 1.2rem; + } +} +sm-panel{ + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); + h4{ + font-weight: 400; + font-size: 0.9rem; + } + h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; + } + .action { + align-self: flex-end; + } + .amount { + font-family: 'Roboto', sans-serif; + } + button { + width: auto; + } + .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; + button { + margin: 0; + } + } + &.placeholder{ + pointer-events: none; + h4, h5{ + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); + } + .btns{ + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; + h4{ + width: 6rem; + } + } + h5{ + width: 50%; + } + .time{ + width: 3rem; + } + animation: pulse infinite 0.6s alternate; + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + } +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; + .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: '. .' + 'search search'; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; + + .search { + grid-area: search; + + input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; + + &:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); + } + } + } + } +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; + h4 { + margin-bottom: 0; + font-weight: 400; + } + + .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; + } + + .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; + + button { + align-self: flex-start; + } +} + +.complaint { + display: grid; + gap: 1.5rem 0; + + .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; + } + + .processed { + color: #007732; + } + + .unprocessed { + color: #d43125; + } + + .processed, + .unprocessed { + margin-bottom: 1.5rem; + } + + button { + .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; + } + } +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page { + sm-select { + margin-bottom: 1.5rem; + } +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; + + h4, + h5 { + border-radius: 0.2rem; + } + + h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; + } + + h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; + } + + .demo-btn { + padding: 0.8rem 3rem; + } +} + +@keyframes pulse { + from { + opacity: 0.4; + } + + to { + opacity: 1; + } +} + + +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; + sm-button { + margin-left: 0; + margin-top: 1rem; + } + + svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; + } + + h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; + } +} +#upi_txId_section{ + .copy-row{ + margin-bottom: 1.5rem; + } +} + +@keyframes popup{ + 0%{ + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40%{ + transform: translateY(0) scale(0.2); + } + 41%{ + transform: translateY(0) scale(0.2); + } + 50%{ + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100%{ + stroke-dashoffset: 0; + } +} +#transaction_result{ + z-index: 12; + #transaction_heading{ + margin-bottom: 1rem; + } + .copy-row{ + grid-template-areas: 'label label' '. .'; + margin-top: 1rem; + gap: 0 1rem; + h4{ + font-weight: 500; + } + } + h5{ + grid-area: label; + color: rgba(var(--text-color), 0.7); + } + h4, h5, p{ + text-align: center; + } + & > h4{ + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; + } + sm-button{ + align-self: center; + width: auto; + } +} +#success_svg, #failure_svg{ + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg{ + polyline{ + fill: none; + stroke: #00C853 ; + } +} +#failure_svg{ + line{ + stroke: #EF5350; + } +} + +.rupee-symbol{ + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee{ + .copy-row{ + margin-bottom: 1rem; + } +} +.activity-container{ + display: grid; + gap: 1rem; +} +.activity{ + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'icon type amount' 'icon receiver time'; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + &:active{ + transform: scale(0.95); + } + .icon{ + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; + } + .activity-type{ + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; + } + .activity-receiver{ + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .activity-amount{ + text-align: right; + grid-area: amount; + font-family: 'Roboto', sans-serif; + } + .activity-time{ + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; + } + .pending{ + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; + } + &.placeholder{ + pointer-events: none; + animation: pulse infinite 0.6s alternate; + .activity-type, + .activity-receiver{ + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; + } + .activity-type{ + width: 50%; + } + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + &:nth-of-type(7){ + animation-delay: 0.6s; + } + &:nth-of-type(8){ + animation-delay: 0.7s; + } + } +} +.back-arrow{ + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} +.select{ + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; + &:first-of-type:not(:last-of-type){ + border-radius: 0.3rem 0.3rem 0 0; + } + & + &{ + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); + } + label{ + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; + } + input[type="radio"]{ + display: none; + } + input:checked ~ .radio .outer-ring{ + stroke: var(--accent-color); + } + input:checked ~ .radio .inner-disc{ + transform: none; + } + .radio{ + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; + .outer-ring{ + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); + } + .inner-disc{ + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + } + .remove{ + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; + } + .tag{ + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; + } + h4{ + font-weight: 400; + } +} +.add-upi{ + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page{ + header{ + padding: 0.5rem 0; + .back-arrow{ + grid-area: back; + } + h4{ + text-transform: capitalize; + } + } + h5{ + font-weight: 400; + font-family: 'Roboto', sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; + } + p:last-of-type{ + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; + } + #transaction_details{ + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; + .icon{ + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); + } + .success{ + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); + } + .flex{ + margin-bottom: 1.5rem; + align-items: baseline; + } + strong{ + font-weight: 500; + &:not(:last-of-type) + sm-button{ + margin-bottom: 1.5rem; + margin-top: -0.4rem; + } + } + strong:not(:last-of-type){ + margin-bottom: 1rem; + } + sm-button{ + width: max-content; + margin-top: 0.6rem; + } + } + .transaction-amount{ + font-size: 2rem; + font-weight: 400; + } + #transaction_time{ + right: 0; + position: absolute; + margin: 1.5rem; + } +} +#people_container{ + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +#add_person_btn{ + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + &:active{ + transform: scale(0.95); + } + .icon{ + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; + } +} +.person{ + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; + &:active{ + transform: scale(0.95); + } +} +.person-initials, #person_initials{ + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; + color: rgba(var(--foreground-color), 1); +} +.person-name{ + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup{ + & > .flex:first-of-type{ + margin: 1rem 0; + .flex{ + margin-top: 0.5rem; + .icon{ + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; + &:hover{ + background: rgba(var(--text-color), 0.06); + } + } + } + } + h3{ + text-transform: capitalize; + } + h5{ + font-weight: 500; + opacity: 0.8; + } + .copy-row{ + margin-bottom: 1.5rem; + } + #show_person_name{ + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; + &:focus{ + outline: none; + background: rgba(var(--text-color), 0.1); + } + } +} + +#activity_page, +#request_page, +#settings_page{ + .empty-state{ + justify-content: left; + } +} +#settings_page{ + h4{ + margin-top: 2rem; + margin-bottom: 0.6rem; + } + .copy-row h4{ + margin: 0; + } + p{ + color: rgba(var(--text-color), 0.7); + } + sm-button{ + margin-top: 0.8rem; + } + .flex{ + max-width: 60ch; + } + .my-qr-code{ + margin-bottom: 1.5rem; + height: 14rem; + img{ + height: 100%; + } + } +} +@media only screen and (max-width: 640px) { + #home_page, #deposit{ + display: grid; + gap: 1.5rem; + grid-template-areas: '.''left'; + grid-template-columns: minmax(0, 1fr); + .left { + grid-area: left; + } + } + sm-select { + width: 100%; + } + .hide-on-mobile{ + display: none !important; + } + #transaction_page{ + padding-top: 0; + header{ + padding: 1.5rem 0; + } + } + #deposit{ + .user-panel{ + padding: 0; + } + } + video{ + height: 100vw; + } +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop{ + display: none !important; + } + body { + padding: 0 2rem; + margin-left: 4rem; + } + sm-popup{ + background: rgba(var(--foreground-color), 1); + } + sm-popup::part(popup){ + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + .icon { + height: 1.2rem; + width: 1.2rem; + } + h5{ + display: none; + } + &:hover { + opacity: 1; + } + } + .logo{ + margin: 1.5rem 1rem; + h4{ + display: none; + } + .main-logo{ + height: 1.2rem; + width: 1.2rem; + } + } + .active{ + background: rgba(var(--text-color), 0.06); + } + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + #home_page { + padding-top: 0.5rem; + .left { + margin-top: 1rem; + } + } + .options-tab, #people_container{ + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + .display-balance{ + .balance{ + height: 9rem; + } + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + .time{ + grid-area: time; + margin-bottom: 0 !important; + } + button{ + width: max-content; + margin-left: auto; + } + .breakable{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + #deposit{ + .user-panel{ + padding-right: 0; + } + } + #settings_page{ + .copy-row{ + display: inline-grid; + } + } +} + +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: '. . ''header header'; + + .complaint-actions { + grid-area: header; + } + + .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + + .right { + display: flex; + justify-content: center; + flex-direction: column; + } + } + #navbar{ + .navbar-item { + h5{ + font-size: 0.9rem; + margin: 0; + display: block; + } + } + .icon{ + margin-right: 0.8rem; + } + .logo{ + h4{ + display: block; + font-size: 1rem; + } + } + } + .user-panel{ + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 18rem; + .user-panel{ + padding-right: 0; + } + } + .activity{ + width: 60ch; + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + } +} + +@media only screen and (min-width: 1280px) { + .request{ + grid-template-areas: 'time time time' '. . .'; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 20rem; + .request{ + grid-template-areas: 'time time time time' '. . . .'; + } + } +} + +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} + +@media (any-hover: hover) { + .navbar-item:hover{ + background: rgba(var(--text-color), 0.06); + } + .remove{ + opacity: 0.6; + } + .remove:hover{ + opacity: 1; + } +} +>>>>>>> Stashed changes diff --git a/index.html b/index.html index fbdc2a8..9a64122 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ +<<<<<<< Updated upstream @@ -13926,4 +13927,13950 @@ +======= + + + + + + + RanchiMall Pay + + + + + + + +

+
+ Cancel + OK +
+ + +

Some input required

+ +
+ + +
+ + + +
+ + Loader + + +

Loading RanchiMall Pay

+ Sign Out +
+ + +
+

Sign In

+
+

Welcome to RanchiMall Pay.
Please enter your FLO private key to + continue.

+ + + + + +
+ + close + + + + + Scan + My QR Code + +
+ + +
+

Point your camera towards QR Code.
+ *Only works with RanchiMall Pay. +

+ + +
+

Show this QR Code to receive money using RanchiMall Pay

+ + + + +
+ + close + + + +

Send Rupee

+ +
+

+ Send rupee to any FLO address. +

+
+ + How to send rupee? + +
Step 1
+

Enter receiver's FLO address.

+
Step 2
+

Enter the amount you want to send.

+
Step 3
+

Press Send button.

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Deposit

+ +
+

+ Deposit money through UPI. +

+
+ + How to deposit money? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Copy the UPI transaction ID shown after transaction was successful.

+
Step 4
+

Enter the amount you sent to copied address

+
Step 5
+

Then enter the UPI transaction ID you copied when was transaction completed.

+
Step 6
+

Press Deposit button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Withdraw rupee

+ +
+

+ Withdraw or redeem your rupee to your specified UPI address. +

+
+ + How to withdraw rupee? + +
Step 1
+

Enter amount you want to withdraw

+
Step 2
+

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using + 'Add UPI address' button.

+
Step 3
+

Press Withdraw button

+
+ + + rupee-symbol + + + + +
Withdraw To
+
+ + Add UPI + address + + +
+ + close + + + +

Request rupee

+ +
+

+ Request rupee from other's using FLO address. +

+
+ + How to request rupee? + +
Step 1
+

Enter amount you want to request

+
Step 2
+

Enter the FLO address of person you want to request rupee from.

+
Step 3
+

Press Request button

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Pay through cashier

+ +
+
+ + What is this? + +

+ Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be + sent as Rupee. +

+
+
+ + How to pay through cashier? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Enter the amount you sent to copied address

+
Step 4
+

Then enter the FLO address of person you want send rupee to.

+
Step 5
+

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI + address, add one using 'Add UPI address' button.

+
Step 6
+

Press Pay button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + +
Send from
+
+ + Add UPI + address + + +
+ + close + + + +
+
+ + success + + + +
+
+ + failure + + + + +
+

+

+
+
Transaction ID
+

+ + Copy + + + +
+ Done + + + +
+ + close + + + +

Add UPI address

+ +
+ + + + + + +
+ + close + + + +

Add a person

+ +
+ + + + + + +
+ + close + + + +
+
+

+

+
+ + + + + remove + + + + +
+
+
FLO ID
+
+

+ + Copy + + + +
+
+
+ + + +

Send rupee

+
+
+ + + +

Request rupee

+
+
+ + + + +
+ + close + + + +

Report

+ +
+ + + +
+ +
+ +
+
+
+

Rupee actions

+
+
+ + scanner + + + + + + +

Scan QR

+
+
+ + + +

Send

+
+
+ + deposit + + + + + + +

deposit

+
+
+ + withdraw + + + + + + + +

Withdraw

+
+
+ + + +

Request

+
+
+ + + + +

pay through cashier

+ +
+
+
+

People

+
+
+
+

S

+

Sairaj Mote

+
+
+
+
+
+

My Balances

+ +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Money that is in-process after deposit.

+
+
In-process
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+
+

Requests

+ + Deposits + Withdrawals + Pay Through Cashier + + + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No deposit requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No withdraw requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No pay requests.

+
+ + +
+
+
+

My Balances

+ Check Balance +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+

Payment Requests

+ + Pending + Paid + Declined + + + +
+

You don't have any pending requests.

+ + + +

No paid requests.

+ + +
+

No declined requests.

+ + +
+
+

Activity

+ + Sent + Received + Deposits + Withdrawals + Paid through cashier + System Notifications + + + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't deposited rupee yet.

+ + +
+

You haven't withdrawn rupee yet.

+ + +
+

You haven't paid through cashier yet.

+ + +
+

No messages from cashier.

+ + +
+
+
+

Complaints

+

+
Select Cashier
+ + + Deposit + Withdraw + Pay through cashier + + + +
+

No deposit complaints.

+ + +
+

No withdraw complaints.

+ + +
+

No pay through cashier complaints.

+ + +
+
+

Settings

+
+

My FLO address

+
+

+ + Copy + + + +
+
+

Theme

+
+

Toggle dark theme

+ +
+
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address + +
+

Sign Out

+

Signing out will erase all the data stored in local storage and Indexed DB. This will remove + saved private key, UPI addresses and contacts.

+ Sign out +
+
+
+ + Go to activity page + + +

+
+
+

+ Report +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +>>>>>>> Stashed changes \ No newline at end of file From 80e9f7e770dd69efb4a76a8a5bc8539f5c63375c Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 8 Oct 2020 16:15:33 +0530 Subject: [PATCH 03/74] 0.0.71 --- css/main.css | 3649 +++--- css/main.min.css | 2 +- css/main.scss | 3733 +++--- index.html | 27871 +++++++++++++++++++++++---------------------- 4 files changed, 17636 insertions(+), 17619 deletions(-) diff --git a/css/main.css b/css/main.css index 9c0fd6f..87b443a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,1825 +1,1826 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: "Roboto", sans-serif; -} - -body { - --accent-color: #4527A0; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --hue: 255; - --saturation: 61%; - --lightness: 39%; - color: rgba(var(--text-color), 1); - font-size: 16px; - background-size: cover; -} - -body[data-theme=dark] { - --accent-color: #a293d0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); -} -body[data-theme=dark] .flo-balance-card { - color: rgba(var(--text-color), 1); -} - -a { - font-weight: 600; - text-decoration: none; - color: var(--accent-color); -} - -.dark-text { - color: #111; -} - -h1 { - font-size: 3.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.8rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: "Poppins", sans-serif; - font-weight: 600; -} - -p { - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} - -strong { - font-weight: 500; -} - -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: "Poppins", sans-serif; -} -button:focus { - outline: thin solid rgba(var(--text-color-light), 0.4); -} -button:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); -} -button:disabled ~ .loader { - opacity: 0; -} - -::-moz-focus-inner { - border: none; -} - -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1em; -} - -.bottom-margin { - margin-bottom: 1.5rem; -} - -.top-margin { - margin-top: 1.5rem; -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; -} - -.align-center { - align-items: center; -} - -.direction-column { - flex-direction: column; -} - -.justify-right { - margin-left: auto; -} - -.space-between { - justify-content: space-between; -} - -.label { - margin-bottom: 0.4rem; -} - -.light-text { - opacity: 0.7; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.breakable { - word-break: break-all; -} - -.separator { - padding: 0.1em; -} - -.no-transformations { - transform: none !important; -} - -.capitalize { - text-transform: capitalize; -} - -sm-button[variant=outlined] { - --accent-color: rgba(var(--text-color), 1); -} - -.loader { - fill: none; - stroke-width: 10; - stroke: var(--accent-color); - height: 2rem; - width: 2rem; - overflow: visible; - stroke-dashoffset: 230; - stroke-dasharray: 230; - padding: 2px; - justify-self: center; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -210; - } -} -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -220; - } -} -.action { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0; - background: none; -} -.action:disabled .primary-btn { - background: none; -} -.action:focus { - outline: none; -} -.action h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; -} -.action .btn { - z-index: 2; -} -.action .loader { - position: absolute; - z-index: 1; - padding: 0.4em; - stroke-dashoffset: 220; - stroke-dasharray: 220; -} -.action .loader:not(.animate-loader) { - opacity: 0; -} -.action .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; -} - -.clip { - clip-path: circle(0) !important; -} - -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; -} - -.expand { - width: 100%; -} - -.fade-left { - animation: fadeleft 0.3s; -} - -.fade-right { - animation: faderight 0.3s; -} - -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1em); - } - to { - opacity: 1; - transform: none; - } -} -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1em); - } - to { - opacity: 1; - transform: none; - } -} -.logo { - display: flex; - align-items: center; -} -.logo h4 { - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); -} -.logo .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; -} - -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.8rem; -} - -*:empty + .empty-state { - display: grid; -} - -.empty-state { - display: none; - place-items: center; - width: 100%; -} -.empty-state svg { - stroke: rgba(var(--text-color), 0.8); - height: 12em; - width: 12em; -} - -.container-header { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; -} -.container-header h2 { - flex: 1; -} -.container-header button { - align-self: center; -} - -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4em 1em; -} - -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; -} - -.card { - border-radius: 0.6rem; - padding: 1.5em; - background: rgba(var(--foreground-color), 1); -} - -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { - flex-direction: column; -} -#confirmation h4, -#prompt h4 { - font-weight: 500; - margin-bottom: 1.5rem; -} -#confirmation .flex sm-button:first-of-type, -#prompt .flex sm-button:first-of-type { - margin-right: 0.6em; - margin-left: auto; -} - -.refresh { - margin-top: 0.6em; - margin-bottom: 1em; -} - -sm-popup .illustration { - position: relative; - height: 4rem; - width: 4rem; - padding: 1rem; - stroke: var(--accent-color); - margin-bottom: 1rem; - border-radius: 5rem; - background: rgba(var(--text-color), 0.06); -} -sm-popup sm-input:not(:last-of-type) { - margin-bottom: 1rem; -} -sm-popup p { - margin-block-end: 1rem; -} -sm-popup .action h4 { - padding: 0.5rem 1rem; - font-weight: 500; -} -sm-popup .message { - margin-bottom: 0.2rem; -} -sm-popup .message + .copy-row { - margin-bottom: 1.5rem; -} -sm-popup h5:not(.tag) { - font-family: "Roboto", sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; -} - -#reader { - overflow: hidden; -} - -.my-qr-code { - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} - -#qr_code_popup::part(popup) { - height: 90vh; -} -#qr_code_popup::part(popup-body) { - padding: 0; -} -#qr_code_popup .popup-header { - padding-bottom: 1.5rem; -} -#qr_code_popup sm-tab-header { - margin: 0 auto; - transform: translateX(-1rem); -} -#qr_code_popup sm-panel { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} -#qr_code_popup video { - width: 100% !important; - object-fit: cover; -} -#qr_code_popup p { - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; -} - -sm-input[type=number] { - font-size: 1.2rem; -} - -.popup-header { - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; - width: 100%; -} -.popup-header .icon { - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; - cursor: pointer; -} -.popup-header button { - width: auto; - margin-left: auto; -} - -details, summary { - margin-bottom: 1rem; -} - -summary { - cursor: pointer; -} - -details h5 { - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; -} -details p { - font-size: 0.9rem; - line-height: 1.4; -} - -#sign_in_popup::part(background) { - background: rgba(var(--foreground-color), 1); -} -#sign_in_popup h3 { - margin-top: 2rem; -} -#sign_in_popup h4 { - font-weight: 500; - margin-bottom: 3rem; -} -#sign_in_popup button { - margin: 1rem 0; -} -#sign_in_popup p { - margin-top: 1rem; - margin-bottom: 0 !important; -} - -.primary-btn { - background: var(--accent-color); - justify-content: center; - color: rgba(var(--foreground-color), 1); -} - -#main_header { - align-items: center; - padding: clamp(1rem, 2vw, 2rem) 1rem; - justify-content: space-between; -} - -.icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; -} - -#navbar { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; -} -#navbar .navbar-item { - position: relative; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.8rem; - border-radius: 0.4em; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.8em; - text-transform: capitalize; - width: 100%; - font-weight: 600; -} -#navbar .navbar-item h5 { - margin-top: 0.4em; -} -#navbar .navbar-item .icon { - stroke: rgba(var(--text-color), 1); -} -#navbar .active { - opacity: 1; -} - -.banking { - stroke-width: 4; -} - -#home_page { - padding: 0 0 4rem 0; -} -#home_page .left { - width: auto; - border-radius: 0.6rem; -} -#home_page .left h3, #home_page .left h4, #home_page .left p { - padding: 0 1.5rem; -} -#home_page .left h3 { - font-size: 2rem; - margin-bottom: 1rem; -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; -} -.user-panel .icon { - stroke: rgba(var(--foreground-color), 1); -} -.user-panel .action { - width: auto; - justify-content: flex-end; -} -.user-panel .action h4 { - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto; -} -.user-panel .action .loader { - align-self: flex-end; -} -.user-panel .action .clip { - clip-path: circle(0 at 100% 0) !important; -} - -#deposit { - padding-top: 1.5rem; -} -#deposit .flex sm-button { - margin-bottom: 1.5rem; -} -#deposit .user-panel { - padding: 0 1rem; -} -#deposit .display-balance { - grid-template-areas: "rupee rupee" "flo flo"; -} - -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: "rupee ." "flo flo"; - gap: 0.8rem; - margin-top: 1rem; -} -.display-balance .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; -} - -.balance { - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; -} -.balance h4 { - font-size: 2rem; - font-family: "Roboto", sans-serif; - font-weight: 500; - text-shadow: 1px 0.1rem 0.2rem #00000040; - word-break: break-all; - flex: 1; -} -.balance h5 { - opacity: 0.8; - margin-bottom: 0.2rem; -} -.balance .tooltip { - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; -} - -.rupee-balance-card { - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; -} -.rupee-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; -} - -.in-process-balance { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; -} -.in-process-balance .tooltip { - box-shadow: 0 0 0 0.4rem #ff4857 inset; -} - -.flo-balance-card { - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; -} -.flo-balance-card .tooltip { - box-shadow: 0 0 0 0.4rem #1b0980 inset; -} - -.tooltip { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; - display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; -} -.tooltip .tt-icon { - display: inline-flex; - width: 3rem; - height: 3rem; - align-items: center; - justify-content: center; - margin-left: auto; - font-weight: 600; -} -.tooltip .tooltip-text { - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; -} -.tooltip:hover { - clip-path: circle(100%); -} - -.user-type { - font-weight: 500; -} - -.options-tab { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} - -.option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.4rem; - width: 5rem; - text-transform: capitalize; - transition: transform 0.3s; - -webkit-tap-highlight-color: transparent; - cursor: pointer; -} -.option .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 2rem; - padding: 0.8rem; - margin-bottom: 0.6rem; -} -.option h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} -.option:active { - transform: scale(0.95); -} - -.request-icon { - transform: rotate(180deg); -} - -.notification-dot::after { - content: ""; - position: absolute; - z-index: 1; - top: 0; - right: 0; - height: 0.6em; - width: 0.6em; - background-color: #E53935; - border-radius: 0.4em; - transition: transform 0.3s; -} - -.shrink.notification-dot::after { - transform: scale(0); -} - -#deposit .container-header, -#withdraw .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); -} - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; -} - -sm-tab { - text-transform: capitalize; -} -sm-tab::part(tab) { - padding: 0.4rem 1.2rem; -} - -sm-panel { - width: 100%; -} - -.request { - display: grid; - gap: 1rem; - padding: 1.5em; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); -} -.request h4 { - font-weight: 400; - font-size: 0.9rem; -} -.request h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; -} -.request .action { - align-self: flex-end; -} -.request .amount { - font-family: "Roboto", sans-serif; -} -.request button { - width: auto; -} -.request .flex { - align-items: center; - justify-content: flex-end; - justify-self: flex-end; -} -.request .flex button { - margin: 0; -} -.request.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; -} -.request.placeholder h4, .request.placeholder h5 { - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); -} -.request.placeholder .btns { - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; -} -.request.placeholder .btns h4 { - width: 6rem; -} -.request.placeholder h5 { - width: 50%; -} -.request.placeholder .time { - width: 3rem; -} -.request.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.request.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.request.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.request.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.request.placeholder:nth-of-type(6) { - animation-delay: 0.5s; -} - -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1em; - width: 100%; -} - -.page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; -} -.page .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: ". ." "search search"; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; - z-index: 2; -} -.page .container-header .search { - grid-area: search; -} -.page .container-header .search input { - padding: 1em; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2em; -} -.page .container-header .search input:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); -} - -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 0.5rem; - width: auto; -} -.copy-row h4 { - margin-bottom: 0; - font-weight: 400; -} -.copy-row .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; -} -.copy-row .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; -} -#profile_page button { - align-self: flex-start; -} - -.complaint { - display: grid; - gap: 1.5rem 0; -} -.complaint .complaint-actions { - align-items: center; - margin: 1.5rem 0 0 0; -} -.complaint .processed { - color: #007732; -} -.complaint .unprocessed { - color: #d43125; -} -.complaint .processed, -.complaint .unprocessed { - margin-bottom: 1.5rem; -} -.complaint button .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; -} - -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page sm-select { - margin-bottom: 1.5rem; -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; -} -.complaint-placeholder h4, -.complaint-placeholder h5 { - border-radius: 0.2rem; -} -.complaint-placeholder h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; -} -.complaint-placeholder h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.8rem 0.8rem; -} -.complaint-placeholder .demo-btn { - padding: 0.8rem 3rem; -} - -@keyframes pulse { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; -} -#main_loader sm-button { - margin-left: 0; - margin-top: 1rem; -} -#main_loader svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; -} -#main_loader h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16em; -} - -#upi_txId_section .copy-row { - margin-bottom: 1.5rem; -} - -@keyframes popup { - 0% { - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); - } - 40% { - transform: translateY(0) scale(0.2); - } - 41% { - transform: translateY(0) scale(0.2); - } - 50% { - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100% { - stroke-dashoffset: 0; - } -} -#transaction_result { - z-index: 12; -} -#transaction_result #transaction_heading { - margin-bottom: 1rem; -} -#transaction_result .copy-row { - grid-template-areas: "label label" ". ."; - margin-top: 1rem; - gap: 0 1rem; -} -#transaction_result .copy-row h4 { - font-weight: 500; -} -#transaction_result h5 { - grid-area: label; - color: rgba(var(--text-color), 0.7); -} -#transaction_result h4, #transaction_result h5, #transaction_result p { - text-align: center; -} -#transaction_result > h4 { - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; -} -#transaction_result sm-button { - align-self: center; - width: auto; -} - -#success_svg, #failure_svg { - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_svg polyline { - fill: none; - stroke: #00C853; -} - -#failure_svg line { - stroke: #EF5350; -} - -.rupee-symbol { - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee .copy-row { - margin-bottom: 1rem; -} - -.activity-container { - display: grid; - gap: 1rem; -} - -.activity { - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: "icon type amount" "icon receiver time"; - align-items: center; - cursor: pointer; - transition: transform 0.3s; -} -.activity:active { - transform: scale(0.95); -} -.activity .icon { - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.8rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; -} -.activity .activity-type { - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.8rem; -} -.activity .activity-receiver { - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.activity .activity-amount { - text-align: right; - grid-area: amount; - font-family: "Roboto", sans-serif; -} -.activity .activity-time { - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; -} -.activity .pending { - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; -} -.activity.placeholder { - pointer-events: none; - animation: pulse infinite 0.6s alternate; -} -.activity.placeholder .activity-type, -.activity.placeholder .activity-receiver { - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; -} -.activity.placeholder .activity-type { - width: 50%; -} -.activity.placeholder:nth-of-type(2) { - animation-delay: 0.1s; -} -.activity.placeholder:nth-of-type(3) { - animation-delay: 0.2s; -} -.activity.placeholder:nth-of-type(4) { - animation-delay: 0.3s; -} -.activity.placeholder:nth-of-type(5) { - animation-delay: 0.4s; -} -.activity.placeholder:nth-of-type(6) { - animation-delay: 0.5s; -} -.activity.placeholder:nth-of-type(7) { - animation-delay: 0.6s; -} -.activity.placeholder:nth-of-type(8) { - animation-delay: 0.7s; -} - -.back-arrow { - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} - -.select { - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; -} -.select:first-of-type:not(:last-of-type) { - border-radius: 0.3rem 0.3rem 0 0; -} -.select + .select { - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); -} -.select label { - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.8rem 1rem; -} -.select input[type=radio] { - display: none; -} -.select input:checked ~ .radio .outer-ring { - stroke: var(--accent-color); -} -.select input:checked ~ .radio .inner-disc { - transform: none; -} -.select .radio { - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; -} -.select .radio .outer-ring { - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); -} -.select .radio .inner-disc { - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -.select .remove { - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; -} -.select .tag { - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; -} -.select h4 { - font-weight: 400; -} - -.add-upi { - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page header { - padding: 0.5rem 0; -} -#transaction_page header .back-arrow { - grid-area: back; -} -#transaction_page header h4 { - text-transform: capitalize; -} -#transaction_page h5 { - font-weight: 400; - font-family: "Roboto", sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; -} -#transaction_page p:last-of-type { - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; -} -#transaction_page #transaction_details { - position: relative; - margin: 1.5rem 0; - padding: 1.5rem; - background-color: rgba(var(--text-color), 0.06); - max-width: 50ch; - border-radius: 0.5rem; -} -#transaction_page #transaction_details .icon { - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); -} -#transaction_page #transaction_details .success { - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); -} -#transaction_page #transaction_details .flex { - margin-bottom: 1.5rem; - align-items: baseline; -} -#transaction_page #transaction_details strong { - font-weight: 500; -} -#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { - margin-bottom: 1.5rem; - margin-top: -0.4rem; -} -#transaction_page #transaction_details strong:not(:last-of-type) { - margin-bottom: 1rem; -} -#transaction_page #transaction_details sm-button { - width: max-content; - margin-top: 0.6rem; -} -#transaction_page .transaction-amount { - font-size: 2rem; - font-weight: 400; -} -#transaction_page #transaction_time { - right: 0; - position: absolute; - margin: 1.5rem; -} - -#people_container { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} - -#add_person_btn { - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - text-align: center; - transition: transform 0.3s; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; -} -#add_person_btn:active { - transform: scale(0.95); -} -#add_person_btn .icon { - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; -} - -.person { - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; -} -.person:active { - transform: scale(0.95); -} - -.person-initials, #person_initials { - display: flex; - justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; - font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; -} - -.person-name { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - text-transform: capitalize; - text-align: center; -} - -#person_popup > .flex:first-of-type { - margin: 1rem 0; -} -#person_popup > .flex:first-of-type .flex { - margin-top: 0.5rem; -} -#person_popup > .flex:first-of-type .flex .icon { - height: 2.6rem; - width: 2.6rem; - padding: 0.8rem; - cursor: pointer; - stroke-width: 8; -} -#person_popup > .flex:first-of-type .flex .icon:hover { - background: rgba(var(--text-color), 0.06); -} -#person_popup h3 { - text-transform: capitalize; -} -#person_popup h5 { - font-weight: 500; - opacity: 0.8; -} -#person_popup .copy-row { - margin-bottom: 1.5rem; -} -#person_popup #show_person_name { - padding: 0.5rem 1rem; - border-radius: 0.4rem; - max-width: 30ch; -} -#person_popup #show_person_name:focus { - outline: none; - background: rgba(var(--text-color), 0.1); -} - -#activity_page .empty-state, -#request_page .empty-state, -#settings_page .empty-state { - justify-content: left; -} - -#settings_page h4 { - margin-top: 2rem; - margin-bottom: 0.6rem; -} -#settings_page .copy-row h4 { - margin: 0; -} -#settings_page p { - color: rgba(var(--text-color), 0.7); -} -#settings_page sm-button { - margin-top: 0.8rem; -} -#settings_page .flex { - max-width: 60ch; -} -#settings_page .my-qr-code { - margin-bottom: 1.5rem; - height: 14rem; -} -#settings_page .my-qr-code img { - height: 100%; -} - -@media only screen and (max-width: 640px) { - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-areas: "." "left"; - grid-template-columns: minmax(0, 1fr); - } - #home_page .left, #deposit .left { - grid-area: left; - } - - sm-select { - width: 100%; - } - - .hide-on-mobile { - display: none !important; - } - - #transaction_page { - padding-top: 0; - } - #transaction_page header { - padding: 1.5rem 0; - } - - #deposit .user-panel { - padding: 0; - } - - video { - height: 100vw; - } -} -@media only screen and (min-width: 640px) { - .hide-on-desktop { - display: none !important; - } - - body { - padding: 0 2rem; - margin-left: 4rem; - } - - sm-popup { - background: rgba(var(--foreground-color), 1); - } - - sm-popup::part(popup) { - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - } - #navbar .navbar-item { - display: flex; - width: auto; - padding: 0.8rem 1.2rem; - } - #navbar .navbar-item .icon { - height: 1.2rem; - width: 1.2rem; - } - #navbar .navbar-item h5 { - display: none; - } - #navbar .navbar-item:hover { - opacity: 1; - } - #navbar .logo { - margin: 1.5rem 1rem; - } - #navbar .logo h4 { - display: none; - } - #navbar .logo .main-logo { - height: 1.2rem; - width: 1.2rem; - } - #navbar .active { - background: rgba(var(--text-color), 0.06); - } - - .page { - padding-bottom: 2rem; - } - - #sign_in_popup { - width: 24rem; - } - - #home_page { - padding-top: 0.5rem; - } - #home_page .left { - margin-top: 1rem; - } - - .options-tab, #people_container { - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.8rem; - } - - .display-balance .balance { - height: 9rem; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; - } - .request .time { - grid-area: time; - margin-bottom: 0 !important; - } - .request button { - width: max-content; - margin-left: auto; - } - .request .breakable { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - #deposit .user-panel { - padding-right: 0; - } - - #settings_page .copy-row { - display: inline-grid; - } -} -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; - } - - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: ". . " "header header"; - } - .complaint .complaint-actions { - grid-area: header; - } - .complaint .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; - } - .complaint .right { - display: flex; - justify-content: center; - flex-direction: column; - } - - #navbar .navbar-item h5 { - font-size: 0.9rem; - margin: 0; - display: block; - } - #navbar .icon { - margin-right: 0.8rem; - } - #navbar .logo h4 { - display: block; - font-size: 1rem; - } - - .user-panel { - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 18rem; - } - #deposit .user-panel { - padding-right: 0; - } - - .activity { - width: 60ch; - } - - .request { - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: "time time" " . ." " . ."; - } -} -@media only screen and (min-width: 1280px) { - .request { - grid-template-areas: "time time time" ". . ."; - } - - #deposit { - grid-template-columns: minmax(0, 1fr) 20rem; - } - #deposit .request { - grid-template-areas: "time time time time" ". . . ."; - } -} -@media only screen and (max-width: 320px) { - body { - font-size: 14px; - } -} -@media (any-hover: hover) { - .navbar-item:hover { - background: rgba(var(--text-color), 0.06); - } - - .remove { - opacity: 0.6; - } - - .remove:hover { - opacity: 1; - } +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: "Roboto", sans-serif; +} + +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} + +body[data-theme=dark] { + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); +} +body[data-theme=dark] .flo-balance-card { + color: rgba(var(--text-color), 1); +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: "Poppins", sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} + +strong { + font-weight: 500; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: "Poppins", sans-serif; +} +button:focus { + outline: thin solid rgba(var(--text-color-light), 0.4); +} +button:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); +} +button:disabled ~ .loader { + opacity: 0; +} + +::-moz-focus-inner { + border: none; +} + +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right { + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: 0.1em; +} + +.no-transformations { + transform: none !important; +} + +.capitalize { + text-transform: capitalize; +} + +sm-button[variant=outlined] { + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -220; + } +} +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; +} +.action:disabled .primary-btn { + background: none; +} +.action:focus { + outline: none; +} +.action h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; +} +.action .btn { + z-index: 2; +} +.action .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; +} +.action .loader:not(.animate-loader) { + opacity: 0; +} +.action .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + to { + opacity: 1; + transform: none; + } +} +.logo { + display: flex; + align-items: center; +} +.logo h4 { + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); +} +.logo .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; +} +.empty-state svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; +} +.container-header h2 { + flex: 1; +} +.container-header button { + align-self: center; +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; +} +#confirmation h4, +#prompt h4 { + font-weight: 500; + margin-bottom: 1.5rem; +} +#confirmation .flex sm-button:first-of-type, +#prompt .flex sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup .illustration { + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); +} +sm-popup sm-input:not(:last-of-type) { + margin-bottom: 1rem; +} +sm-popup p { + margin-block-end: 1rem; +} +sm-popup .action h4 { + padding: 0.5rem 1rem; + font-weight: 500; +} +sm-popup .message { + margin-bottom: 0.2rem; +} +sm-popup .message + .copy-row { + margin-bottom: 1.5rem; +} +sm-popup h5:not(.tag) { + font-family: "Roboto", sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; +} + +#reader { + overflow: hidden; +} + +.my-qr-code { + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} + +#qr_code_popup::part(popup) { + height: 90vh; +} +#qr_code_popup::part(popup-body) { + padding: 0; +} +#qr_code_popup .popup-header { + padding-bottom: 1.5rem; +} +#qr_code_popup sm-tab-header { + margin: 0 auto; + transform: translateX(-1rem); +} +#qr_code_popup sm-panel { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +#qr_code_popup video { + width: 100% !important; + object-fit: cover; +} +#qr_code_popup p { + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; +} + +sm-input[type=number] { + font-size: 1.2rem; +} + +.popup-header { + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; +} +.popup-header .icon { + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; +} +.popup-header button { + width: auto; + margin-left: auto; +} + +details, summary { + margin-bottom: 1rem; +} + +summary { + cursor: pointer; +} + +details h5 { + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; +} +details p { + font-size: 0.9rem; + line-height: 1.4; +} + +#sign_in_popup::part(background) { + background: rgba(var(--foreground-color), 1); +} +#sign_in_popup h3 { + margin-top: 2rem; +} +#sign_in_popup h4 { + font-weight: 500; + margin-bottom: 3rem; +} +#sign_in_popup button { + margin: 1rem 0; +} +#sign_in_popup p { + margin-top: 1rem; + margin-bottom: 0 !important; +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; +} +#navbar .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; +} +#navbar .navbar-item h5 { + margin-top: 0.4em; +} +#navbar .navbar-item .icon { + stroke: rgba(var(--text-color), 1); +} +#navbar .active { + opacity: 1; +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; +} +#home_page .left { + width: auto; + border-radius: 0.6rem; +} +#home_page .left h3, #home_page .left h4, #home_page .left p { + padding: 0 1.5rem; +} +#home_page .left h3 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; +} +.user-panel .icon { + stroke: rgba(var(--foreground-color), 1); +} +.user-panel .action { + width: auto; + justify-content: flex-end; +} +.user-panel .action h4 { + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto; +} +.user-panel .action .loader { + align-self: flex-end; +} +.user-panel .action .clip { + clip-path: circle(0 at 100% 0) !important; +} + +#deposit { + padding-top: 1.5rem; +} +#deposit .flex sm-button { + margin-bottom: 1.5rem; +} +#deposit .user-panel { + padding: 0 1rem; +} +#deposit .display-balance { + grid-template-areas: "rupee rupee" "flo flo"; +} + +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: "rupee ." "flo flo"; + gap: 0.8rem; + margin-top: 1rem; +} +.display-balance .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; +} + +.balance { + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; +} +.balance h4 { + font-size: 2rem; + font-family: "Roboto", sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; +} +.balance h5 { + opacity: 0.8; + margin-bottom: 0.2rem; +} +.balance .tooltip { + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; +} + +.rupee-balance-card { + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; +} +.rupee-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; +} + +.in-process-balance { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; +} +.in-process-balance .tooltip { + box-shadow: 0 0 0 0.4rem #ff4857 inset; +} + +.flo-balance-card { + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; +} +.flo-balance-card .tooltip { + box-shadow: 0 0 0 0.4rem #1b0980 inset; +} + +.tooltip { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; +} +.tooltip .tt-icon { + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; +} +.tooltip .tooltip-text { + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; +} +.tooltip:hover { + clip-path: circle(100%); +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; +} +.option .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; +} +.option h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +.option:active { + transform: scale(0.95); +} + +.request-icon { + transform: rotate(180deg); +} + +.notification-dot::after { + content: ""; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit .container-header, +#withdraw .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} + +sm-tab { + text-transform: capitalize; +} +sm-tab::part(tab) { + padding: 0.4rem 1.2rem; +} + +sm-panel { + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); +} +.request h4 { + font-weight: 400; + font-size: 0.9rem; +} +.request h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; +} +.request .action { + align-self: flex-end; +} +.request .amount { + font-family: "Roboto", sans-serif; +} +.request button { + width: auto; +} +.request .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; +} +.request .flex button { + margin: 0; +} +.request.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.request.placeholder h4, .request.placeholder h5 { + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); +} +.request.placeholder .btns { + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; +} +.request.placeholder .btns h4 { + width: 6rem; +} +.request.placeholder h5 { + width: 50%; +} +.request.placeholder .time { + width: 3rem; +} +.request.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.request.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.request.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.request.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.request.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; +} +.page .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: ". ." "search search"; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; +} +.page .container-header .search { + grid-area: search; +} +.page .container-header .search input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; +} +.page .container-header .search input:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; +} +.copy-row h4 { + margin-bottom: 0; + font-weight: 400; +} +.copy-row .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; +} +.copy-row .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; +} +#profile_page button { + align-self: flex-start; +} + +.complaint { + display: grid; + gap: 1.5rem 0; +} +.complaint .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; +} +.complaint .processed { + color: #007732; +} +.complaint .unprocessed { + color: #d43125; +} +.complaint .processed, +.complaint .unprocessed { + margin-bottom: 1.5rem; +} +.complaint button .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page sm-select { + margin-bottom: 1.5rem; +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; +} +.complaint-placeholder h4, +.complaint-placeholder h5 { + border-radius: 0.2rem; +} +.complaint-placeholder h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; +} +.complaint-placeholder h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; +} +.complaint-placeholder .demo-btn { + padding: 0.8rem 3rem; +} + +@keyframes pulse { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; +} +#main_loader sm-button { + margin-left: 0; + margin-top: 1rem; +} +#main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; +} +#main_loader h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; +} + +#upi_txId_section .copy-row { + margin-bottom: 1.5rem; +} + +@keyframes popup { + 0% { + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40% { + transform: translateY(0) scale(0.2); + } + 41% { + transform: translateY(0) scale(0.2); + } + 50% { + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100% { + stroke-dashoffset: 0; + } +} +#transaction_result { + z-index: 12; +} +#transaction_result #transaction_heading { + margin-bottom: 1rem; +} +#transaction_result .copy-row { + grid-template-areas: "label label" ". ."; + margin-top: 1rem; + gap: 0 1rem; +} +#transaction_result .copy-row h4 { + font-weight: 500; +} +#transaction_result h5 { + grid-area: label; + color: rgba(var(--text-color), 0.7); +} +#transaction_result h4, #transaction_result h5, #transaction_result p { + text-align: center; +} +#transaction_result > h4 { + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; +} +#transaction_result sm-button { + align-self: center; + width: auto; +} + +#success_svg, #failure_svg { + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg polyline { + fill: none; + stroke: #00C853; +} + +#failure_svg line { + stroke: #EF5350; +} + +.rupee-symbol { + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee .copy-row { + margin-bottom: 1rem; +} + +.activity-container { + display: grid; + gap: 1rem; +} + +.activity { + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: "icon type amount" "icon receiver time"; + align-items: center; + cursor: pointer; + transition: transform 0.3s; +} +.activity:active { + transform: scale(0.95); +} +.activity .icon { + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; +} +.activity .activity-type { + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; +} +.activity .activity-receiver { + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.activity .activity-amount { + text-align: right; + grid-area: amount; + font-family: "Roboto", sans-serif; +} +.activity .activity-time { + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; +} +.activity .pending { + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; +} +.activity.placeholder { + pointer-events: none; + animation: pulse infinite 0.6s alternate; +} +.activity.placeholder .activity-type, +.activity.placeholder .activity-receiver { + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; +} +.activity.placeholder .activity-type { + width: 50%; +} +.activity.placeholder:nth-of-type(2) { + animation-delay: 0.1s; +} +.activity.placeholder:nth-of-type(3) { + animation-delay: 0.2s; +} +.activity.placeholder:nth-of-type(4) { + animation-delay: 0.3s; +} +.activity.placeholder:nth-of-type(5) { + animation-delay: 0.4s; +} +.activity.placeholder:nth-of-type(6) { + animation-delay: 0.5s; +} +.activity.placeholder:nth-of-type(7) { + animation-delay: 0.6s; +} +.activity.placeholder:nth-of-type(8) { + animation-delay: 0.7s; +} + +.back-arrow { + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} + +.select { + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; +} +.select:first-of-type:not(:last-of-type) { + border-radius: 0.3rem 0.3rem 0 0; +} +.select + .select { + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); +} +.select label { + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; +} +.select input[type=radio] { + display: none; +} +.select input:checked ~ .radio .outer-ring { + stroke: var(--accent-color); +} +.select input:checked ~ .radio .inner-disc { + transform: none; +} +.select .radio { + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; +} +.select .radio .outer-ring { + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); +} +.select .radio .inner-disc { + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +.select .remove { + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; +} +.select .tag { + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; +} +.select h4 { + font-weight: 400; +} + +.add-upi { + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page header { + padding: 0.5rem 0; +} +#transaction_page header .back-arrow { + grid-area: back; +} +#transaction_page header h4 { + text-transform: capitalize; +} +#transaction_page h5 { + font-weight: 400; + font-family: "Roboto", sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; +} +#transaction_page p:last-of-type { + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; +} +#transaction_page #transaction_details { + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; +} +#transaction_page #transaction_details .icon { + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); +} +#transaction_page #transaction_details .success { + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); +} +#transaction_page #transaction_details .flex { + margin-bottom: 1.5rem; + align-items: baseline; +} +#transaction_page #transaction_details strong { + font-weight: 500; +} +#transaction_page #transaction_details strong:not(:last-of-type) + sm-button { + margin-bottom: 1.5rem; + margin-top: -0.4rem; +} +#transaction_page #transaction_details strong:not(:last-of-type) { + margin-bottom: 1rem; +} +#transaction_page #transaction_details sm-button { + width: max-content; + margin-top: 0.6rem; +} +#transaction_page .transaction-amount { + font-size: 2rem; + font-weight: 400; +} +#transaction_page #transaction_time { + right: 0; + position: absolute; + margin: 1.5rem; +} + +#people_container { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} + +#add_person_btn { + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; +} +#add_person_btn:active { + transform: scale(0.95); +} +#add_person_btn .icon { + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; +} + +.person { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; +} +.person:active { + transform: scale(0.95); +} + +.person-initials, #person_initials { + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; + color: rgba(var(--foreground-color), 1); +} + +.person-name { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup > .flex:first-of-type { + margin: 1rem 0; +} +#person_popup > .flex:first-of-type .flex { + margin-top: 0.5rem; +} +#person_popup > .flex:first-of-type .flex .icon { + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; +} +#person_popup > .flex:first-of-type .flex .icon:hover { + background: rgba(var(--text-color), 0.06); +} +#person_popup h3 { + text-transform: capitalize; +} +#person_popup h5 { + font-weight: 500; + opacity: 0.8; +} +#person_popup .copy-row { + margin-bottom: 1.5rem; +} +#person_popup #show_person_name { + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; +} +#person_popup #show_person_name:focus { + outline: none; + background: rgba(var(--text-color), 0.1); +} + +#activity_page .empty-state, +#request_page .empty-state, +#settings_page .empty-state { + justify-content: left; +} + +#settings_page h4 { + margin-top: 2rem; + margin-bottom: 0.6rem; +} +#settings_page .copy-row h4 { + margin: 0; +} +#settings_page p { + color: rgba(var(--text-color), 0.7); +} +#settings_page sm-button { + margin-top: 0.8rem; +} +#settings_page .flex { + max-width: 60ch; +} +#settings_page .my-qr-code { + margin-bottom: 1.5rem; + height: 14rem; +} +#settings_page .my-qr-code img { + height: 100%; +} + +@media only screen and (max-width: 640px) { + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-areas: "." "left"; + grid-template-columns: minmax(0, 1fr); + } + #home_page .left, #deposit .left { + grid-area: left; + } + + sm-select { + width: 100%; + } + + .hide-on-mobile { + display: none !important; + } + + #transaction_page { + padding-top: 0; + } + #transaction_page header { + padding: 1.5rem 0; + } + + #deposit .user-panel { + padding: 0; + } + + video { + height: 100vw; + } +} +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + body { + padding: 0 2rem; + margin-left: 4rem; + } + + sm-popup { + background: rgba(var(--foreground-color), 1); + } + + sm-popup::part(popup) { + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + } + #navbar .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + } + #navbar .navbar-item .icon { + height: 1.2rem; + width: 1.2rem; + } + #navbar .navbar-item h5 { + display: none; + } + #navbar .navbar-item:hover { + opacity: 1; + } + #navbar .logo { + margin: 1.5rem 1rem; + } + #navbar .logo h4 { + display: none; + } + #navbar .logo .main-logo { + height: 1.2rem; + width: 1.2rem; + } + #navbar .active { + background: rgba(var(--text-color), 0.06); + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + + #home_page { + padding-top: 0.5rem; + } + #home_page .left { + margin-top: 1rem; + } + + .options-tab, #people_container { + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + + .display-balance .balance { + height: 9rem; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } + .request .time { + grid-area: time; + margin-bottom: 0 !important; + } + .request button { + width: max-content; + margin-left: auto; + } + .request .breakable { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #deposit .user-panel { + padding-right: 0; + } + + #settings_page .copy-row { + display: inline-grid; + } +} +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: ". . " "header header"; + } + .complaint .complaint-actions { + grid-area: header; + } + .complaint .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + .complaint .right { + display: flex; + justify-content: center; + flex-direction: column; + } + + #navbar .navbar-item h5 { + font-size: 0.9rem; + margin: 0; + display: block; + } + #navbar .icon { + margin-right: 0.8rem; + } + #navbar .logo h4 { + display: block; + font-size: 1rem; + } + + .user-panel { + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 18rem; + } + #deposit .user-panel { + padding-right: 0; + } + + .activity { + width: 60ch; + } + + .request { + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: "time time" " . ." " . ."; + } +} +@media only screen and (min-width: 1280px) { + .request { + grid-template-areas: "time time time" ". . ."; + } + + #deposit { + grid-template-columns: minmax(0, 1fr) 20rem; + } + #deposit .request { + grid-template-areas: "time time time time" ". . . ."; + } +} +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} +@media (any-hover: hover) { + .navbar-item:hover { + background: rgba(var(--text-color), 0.06); + } + + .remove { + opacity: 0.6; + } + + .remove:hover { + opacity: 1; + } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 99af61e..58256ec 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}.action,button{position:relative}.balance h4,.breakable{word-break:break-all}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.option,.person,button{-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}.action,.align-center{align-items:center}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{fill:none;stroke-width:10;stroke:var(--accent-color);height:2rem;width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{display:inline-flex;justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em;stroke-dashoffset:220;stroke-dasharray:220}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo{display:flex;align-items:center}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1);fill:none;height:2rem;cursor:pointer}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem;background:rgba(var(--text-color),.06)}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}#deposit .flex sm-button,sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}#reader{overflow:hidden}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}summary{cursor:pointer}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4{color:rgba(var(--text-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;cursor:pointer;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit{padding-top:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10;cursor:pointer}.balance{height:10rem;position:relative;display:flex;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;color:rgba(var(--foreground-color),1);background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option{transition:transform .3s;cursor:pointer}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem}.option .icon{height:3rem;width:3rem;background:rgba(var(--text-color),.06);border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5em;border-radius:.6rem;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{font-weight:400;opacity:.8;margin-bottom:.2rem}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center;background:rgba(var(--text-color),.06)}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result #transaction_heading{margin-bottom:1rem}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}#deposit_rupee .copy-row{margin-bottom:1rem}.activity-container{display:grid;gap:1rem}.activity{display:grid;border-radius:.6rem;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background:rgba(var(--text-color),.06);background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500}.activity .pending{display:inline-flex;padding:.3rem .6rem;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;cursor:pointer;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#add_person_btn:active,.person:active{transform:scale(.95)}#add_person_btn,.person{transition:transform .3s;cursor:pointer}.select .remove{width:3rem;height:2rem;padding:.7rem;cursor:pointer;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem;background:rgba(var(--text-color),.06)}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;flex-direction:column;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;flex-direction:column;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.6rem!important;text-transform:uppercase}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page h4{margin-top:2rem;margin-bottom:.6rem}#settings_page .copy-row h4{margin:0}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}video{height:100vw}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file +#transaction_page h5,*,.activity .activity-amount,.balance h4,.request .amount{font-family:Roboto,sans-serif}#navbar .navbar-item,.balance .tooltip,.user-panel .action h4,body,body[data-theme=dark] .flo-balance-card{color:rgba(var(--text-color),1)}a,h1,h2,h3,h4,h5{font-weight:600}#navbar .navbar-item,.activity,.back-arrow,.copy-row .icon,.display-balance .icon,.option,.popup-header .icon,.select .remove,.select label,button,summary{cursor:pointer}.option,.person,button{-webkit-tap-highlight-color:transparent}#navbar .navbar-item,#transaction_page h5,#transaction_page header h4,.activity .activity-type,.capitalize,.option,.request h5,button,sm-tab{text-transform:capitalize}.back-arrow,.loader{height:2rem;fill:none}.action,button{position:relative;display:inline-flex}.balance h4,.breakable{word-break:break-all}*{box-sizing:border-box;padding:0;margin:0}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#4527A0;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f4f4f4;--hue:255;--saturation:61%;--lightness:39%;font-size:16px;background-size:cover}body[data-theme=dark]{--accent-color:#a293d0;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#222;--hue:255;--saturation:39%;--lightness:70%;background-color:var(--background-color)}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:60ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}button{align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}button:disabled~.loader{opacity:0}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}#confirmation,#prompt,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.separator{padding:.1em}.no-transformations{transform:none!important}sm-button[variant=outlined]{--accent-color:rgba(var(--text-color), 1)}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;overflow:visible;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.action,.logo{align-items:center}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}@keyframes load-btn-loader{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-220}}.action{justify-content:center;padding:0;background:0 0}.action:disabled .primary-btn{background:0 0}.action:focus{outline:0}.action h4{padding:.5rem 1.2rem;font-size:.9rem;clip-path:circle(100%);transition:clip-path .3s;border-radius:.2rem}.action .btn{z-index:2}.action .loader{position:absolute;z-index:1;padding:.4em;stroke-dashoffset:220;stroke-dasharray:220}.action .loader:not(.animate-loader){opacity:0}.action .animate-loader{animation:load-btn-loader 2.6s infinite,rotate 1s infinite linear}.clip{clip-path:circle(0)!important}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}.expand{width:100%}.fade-left{animation:fadeleft .3s}.fade-right{animation:faderight .3s}@keyframes faderight{from{opacity:0;transform:translateX(-1em)}to{opacity:1;transform:none}}@keyframes fadeleft{from{opacity:0;transform:translateX(1em)}to{opacity:1;transform:none}}.logo{display:flex}.logo h4{font-weight:500;font-size:clamp(1.1rem,2vw,1.2rem)}.logo .main-logo{height:clamp(1.4rem,2vw,1.6rem);width:clamp(1.4rem,2vw,1.6rem);fill:rgba(var(--text-color),1);stroke:none;margin-right:.2rem}textarea{width:100%;max-width:100%;background:rgba(var(--text-color),.1);border:none;border-radius:.2rem;resize:none;font-size:1rem;line-height:1.6;padding:.8rem}:empty+.empty-state{display:grid}.empty-state{display:none;place-items:center;width:100%}.empty-state svg{stroke:rgba(var(--text-color),.8);height:12em;width:12em}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:1rem 0}.container-header h2{flex:1}.container-header button{align-self:center}.btn{background:var(--accent-color);color:rgba(var(--foreground-color),1);padding:.4em 1em}.back-arrow{stroke:rgba(var(--text-color),1)}.card{border-radius:.6rem;padding:1.5em;background:rgba(var(--foreground-color),1)}.solid-background{background:rgba(var(--foreground-color),1)!important}.option .icon,sm-popup .illustration{background:rgba(var(--text-color),.06)}#confirmation h4,#prompt h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type,#prompt .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}.refresh{margin-top:.6em;margin-bottom:1em}sm-popup .illustration{position:relative;height:4rem;width:4rem;padding:1rem;stroke:var(--accent-color);margin-bottom:1rem;border-radius:5rem}#main_loader,#navbar{position:fixed;left:0}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup p{margin-block-end:1rem}sm-popup .action h4{padding:.5rem 1rem;font-weight:500}sm-popup .message{margin-bottom:.2rem}#deposit .flex sm-button,sm-popup .message+.copy-row{margin-bottom:1.5rem}sm-popup h5:not(.tag){font-family:Roboto,sans-serif;margin-bottom:.4rem;margin-top:1rem;font-weight:500}#reader{overflow:hidden}.my-qr-code{background:#fff;border-radius:.5rem;padding:1rem;max-width:max-content}#qr_code_popup::part(popup){height:90vh}#qr_code_popup::part(popup-body){padding:0}#qr_code_popup .popup-header{padding-bottom:1.5rem}#qr_code_popup sm-tab-header{margin:0 auto;transform:translateX(-1rem)}#qr_code_popup sm-panel{display:flex;flex-direction:column;align-items:center;text-align:center}#qr_code_popup video{width:100%!important;object-fit:cover}#qr_code_popup p{margin-top:1.5rem;opacity:.8;text-align:center;max-width:30ch}sm-input[type=number]{font-size:1.2rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10}.popup-header button{width:auto;margin-left:auto}details,summary{margin-bottom:1rem}details h5{line-height:.6;margin-bottom:0;margin-top:1.2rem!important}details p{font-size:.9rem;line-height:1.4}#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header{align-items:center;padding:clamp(1rem,2vw,2rem) 1rem;justify-content:space-between}.icon{height:1.2rem;width:1.2rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;stroke-linecap:round;stroke-linejoin:round}#navbar{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;right:0;bottom:0;top:auto;z-index:3;background:rgba(var(--foreground-color),1);box-shadow:0 -.5rem 1rem #00010;border-radius:1rem 1rem 0 0}#navbar .navbar-item{position:relative;text-align:center;padding:.3rem;padding-top:.8rem;border-radius:.4em;opacity:.6;font-size:.8em;width:100%;font-weight:600}#navbar .navbar-item h5{margin-top:.4em}#navbar .navbar-item .icon{stroke:rgba(var(--text-color),1)}#navbar .active{opacity:1}.banking{stroke-width:4}#home_page{padding:0 0 4rem}#home_page .left{width:auto;border-radius:.6rem}#home_page .left h3,#home_page .left h4,#home_page .left p{padding:0 1.5rem}#home_page .left h3{font-size:2rem;margin-bottom:1rem}.user-panel{position:relative;padding:1.5rem;padding-top:1rem;align-self:flex-start}.request .action,.user-panel .action .loader{align-self:flex-end}.user-panel .icon{stroke:rgba(var(--foreground-color),1)}.user-panel .action{width:auto;justify-content:flex-end}.user-panel .action h4{border-radius:2rem;background-color:rgba(var(--text-color),.1);width:auto}.user-panel .action .clip{clip-path:circle(0 at 100% 0)!important}#deposit{padding-top:1.5rem}#deposit .user-panel{padding:0 1rem}#deposit .display-balance{grid-template-areas:"rupee rupee" "flo flo"}.display-balance{grid-template-columns:1fr 1fr;grid-template-areas:"rupee ." "flo flo";gap:.8rem;margin-top:1rem}.display-balance .icon{height:1.4rem;width:1.4rem;padding:.3rem;stroke-width:10}.balance{height:10rem;position:relative;display:flex;flex-direction:column;border-radius:1rem;padding:1rem;justify-content:flex-end}.balance h4{font-size:2rem;font-weight:500;text-shadow:1px .1rem .2rem #00040;flex:1}.balance h5{opacity:.8;margin-bottom:.2rem}.balance .tooltip{border-radius:1rem;margin-left:auto}.rupee-balance-card{grid-area:rupee;background:url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat,linear-gradient(200deg,rgba(var(--text-color),.1),rgba(var(--text-color),.2));background-size:9rem,cover}.rupee-balance-card .tooltip{box-shadow:0 0 0 .4rem rgba(var(--text-color),.1) inset}.in-process-balance{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom,linear-gradient(135deg,#fd946a,#ff4857);background-size:cover}.in-process-balance .tooltip{box-shadow:0 0 0 .4rem #ff4857 inset}.flo-balance-card{grid-area:flo;color:rgba(var(--foreground-color),1);background:url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat,linear-gradient(270deg,#2f69e6,#1b0980);background-size:cover}.flo-balance-card .tooltip{box-shadow:0 0 0 .4rem #1b0980 inset}.tooltip{position:absolute;left:0;right:0;top:0;bottom:0;cursor:help;display:flex;flex-direction:column;background:rgba(var(--foreground-color),1);z-index:1;transition:clip-path .4s ease-out;clip-path:circle(.8rem at calc(100% - 1.5rem) 1.4rem);scrollbar-width:thin}.activity,.option{transition:transform .3s}.tooltip .tt-icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-left:auto;font-weight:600}.tooltip .tooltip-text{padding:1rem;padding-top:0;line-height:1.4;font-size:.9rem;font-weight:400;overflow-y:auto;max-height:calc(100% - 3rem);max-width:30ch}.option h4,.user-type{font-weight:500}.tooltip:hover{clip-path:circle(100%)}.options-tab{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}.option{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:.4rem;width:5rem}.option .icon{height:3rem;width:3rem;border-radius:2rem;padding:.8rem;margin-bottom:.6rem}.option h4{font-size:.85rem;opacity:.8}.option:active{transform:scale(.95)}.request-icon{transform:rotate(180deg)}.notification-dot::after{content:"";position:absolute;z-index:1;top:0;right:0;height:.6em;width:.6em;background-color:#E53935;border-radius:.4em;transition:transform .3s}.shrink.notification-dot::after{transform:scale(0)}#deposit .container-header,#withdraw .container-header{background:linear-gradient(rgba(var(--foreground-color),1) 90%,transparent)}sm-tab-header{position:sticky;top:0;display:inline-flex;background-color:var(--dark-shade);z-index:2;padding:.3rem;margin:1rem 0;border-radius:3rem}.activity,.request{border-radius:.6rem}sm-tab::part(tab){padding:.4rem 1.2rem}sm-panel{width:100%}.request{display:grid;gap:1rem;padding:1.5em;background:rgba(var(--text-color),.06)}.request h4{font-weight:400;font-size:.9rem}.request h5{font-weight:400;opacity:.8;margin-bottom:.2rem}.request button{width:auto}.request .flex{align-items:center;justify-content:flex-end;justify-self:flex-end}.request .flex button{margin:0}.request.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.request.placeholder h4,.request.placeholder h5{padding:.5rem 0;background:rgba(var(--text-color),.06)}.request.placeholder .btns{display:grid;gap:.5rem;grid-auto-flow:column;justify-content:flex-end}.request.placeholder .btns h4{width:6rem}.request.placeholder h5{width:50%}.request.placeholder .time{width:3rem}.request.placeholder:nth-of-type(2){animation-delay:.1s}.request.placeholder:nth-of-type(3){animation-delay:.2s}.request.placeholder:nth-of-type(4){animation-delay:.3s}.request.placeholder:nth-of-type(5){animation-delay:.4s}.request.placeholder:nth-of-type(6){animation-delay:.5s}.deposited{color:#00C853}.decline-request{margin-right:.5rem!important}.withdrawn{color:#d43125}.container{display:grid;gap:1em;width:100%}.page{padding:1rem 1.5rem;padding-bottom:5rem}.page .container-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:". ." "search search";gap:1rem;top:0;background:rgba(var(--foreground-color),1);will-change:auto;z-index:2}.page .container-header .search{grid-area:search}.page .container-header .search input{padding:1em;border:none;width:100%;background:var(--dark-shade);font-size:1rem;font-weight:500;color:rgba(var(--text-color),1);border-radius:.2em}.page .container-header .search input:focus{outline:0;background:rgba(var(--text-color-light),.2)}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{font-weight:500}#report_popup{width:32rem}#profile_page{display:flex;flex-direction:column}#profile_page button{align-self:flex-start}.complaint{display:grid;gap:1.5rem 0}.complaint .complaint-actions{align-items:center;margin:1.5rem 0 0}#helpline_page sm-select,.complaint .processed,.complaint .unprocessed{margin-bottom:1.5rem}.complaint .processed{color:#007732}.complaint .unprocessed{color:#d43125}.complaint button .icon{padding:.2rem;margin-right:.5rem;stroke:var(--accent-color);stroke-width:8}.complaints-container{padding-top:1.5rem;display:grid;align-items:flex-start;gap:1.5rem}.complaint-placeholder{animation:pulse infinite .6s alternate}.complaint-placeholder h4,.complaint-placeholder h5{border-radius:.2rem}.complaint-placeholder h5{background:rgba(var(--text-color),.1);padding:.5rem .6rem}.complaint-placeholder h4{background:rgba(var(--text-color),.2);padding:.8rem}.complaint-placeholder .demo-btn{padding:.8rem 3rem}@keyframes pulse{from{opacity:.4}to{opacity:1}}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw}#main_loader sm-button{margin-left:0;margin-top:1rem}#main_loader svg{height:2rem;width:2rem;stroke:var(--accent-color);stroke-width:6;fill:none;overflow:visible;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}.activity,.select{align-items:center;background:rgba(var(--text-color),.06)}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}#upi_txId_section .copy-row{margin-bottom:1.5rem}#deposit_rupee .copy-row,#transaction_result #transaction_heading{margin-bottom:1rem}@keyframes popup{0%{stroke-dashoffset:50;transform:translateY(4rem) scale(.2,.6)}40%,41%{transform:translateY(0) scale(.2)}50%{stroke-dashoffset:50;transform:translateY(0) scale(1)}100%{stroke-dashoffset:0}}#transaction_result{z-index:12}#transaction_result .copy-row{grid-template-areas:"label label" ". .";margin-top:1rem;gap:0 1rem}#transaction_result .copy-row h4{font-weight:500}#transaction_result h5{grid-area:label;color:rgba(var(--text-color),.7)}#transaction_result h4,#transaction_result h5,#transaction_result p{text-align:center}#transaction_result>h4{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}#transaction_result sm-button{align-self:center;width:auto}#failure_svg,#success_svg{height:5rem;width:5rem;stroke-width:4;align-self:center;stroke:none;stroke-dasharray:50;fill:rgba(var(--text-color),.1);animation:popup 2s forwards cubic-bezier(.175,.885,.32,1.275)}#success_svg polyline{fill:none;stroke:#00C853}#failure_svg line{stroke:#EF5350}.rupee-symbol{height:1rem;width:1rem;fill:rgba(var(--text-color),.5)}.activity-container{display:grid;gap:1rem}.activity{display:grid;padding:1rem 1.2rem;gap:0 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon type amount" "icon receiver time"}.activity:active{transform:scale(.95)}.activity .icon{grid-area:icon;height:3rem;width:3rem;padding:.8rem;background:rgba(var(--text-color),.06);background-size:cover;border-radius:2rem}.activity .activity-type{grid-area:type;font-weight:400;font-size:.8rem}.activity .activity-receiver{grid-area:receiver;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity .activity-amount{text-align:right;grid-area:amount}.activity .activity-time{text-align:right;grid-area:time;color:rgba(var(--text-color),.7);font-weight:500}.activity .pending{display:inline-flex;padding:.3rem .6rem;background:rgba(var(--text-color),.06);border-radius:1rem;width:max-content;margin-left:.4rem}.activity.placeholder{pointer-events:none;animation:pulse infinite .6s alternate}.activity.placeholder .activity-receiver,.activity.placeholder .activity-type{background:rgba(var(--text-color),.06);padding:.5rem 0}.activity.placeholder .activity-type{width:50%}.activity.placeholder:nth-of-type(2){animation-delay:.1s}.activity.placeholder:nth-of-type(3){animation-delay:.2s}.activity.placeholder:nth-of-type(4){animation-delay:.3s}.activity.placeholder:nth-of-type(5){animation-delay:.4s}.activity.placeholder:nth-of-type(6){animation-delay:.5s}.activity.placeholder:nth-of-type(7){animation-delay:.6s}.activity.placeholder:nth-of-type(8){animation-delay:.7s}.back-arrow{stroke-width:10;margin-right:.5rem;padding:.2rem}.select{max-width:50ch;position:relative;display:flex;width:100%;border-radius:.3rem}.select:first-of-type:not(:last-of-type){border-radius:.3rem .3rem 0 0}.select+.select{margin-top:0;border-radius:0 0 .3rem .3rem;border-top:solid 1px rgba(var(--text-color),.16)}.select label{display:flex;align-items:center;flex:1;padding:.8rem 1rem}.select input[type=radio]{display:none}.select input:checked~.radio .outer-ring{stroke:var(--accent-color)}.select input:checked~.radio .inner-disc{transform:none}.select .radio{width:1.2rem;height:1.2rem;fill:none;overflow:visible;margin-right:.6rem}.select .radio .outer-ring{stroke-width:8;stroke:rgba(var(--text-color),.5)}.select .radio .inner-disc{transform-origin:center;fill:var(--accent-color);transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#add_person_btn:active,.person:active{transform:scale(.95)}.select .remove{width:3rem;height:2rem;padding:.7rem;stroke-width:10}.select .tag{grid-area:tag;opacity:.6;font-weight:500;border:1px solid;padding:.2rem .4rem;border-radius:.3rem;margin-right:.5rem}#add_person_btn,#person_popup h5,.person-name{opacity:.8;font-weight:500}.select h4{font-weight:400}.add-upi{margin-top:.4rem;justify-self:flex-start;width:max-content}#transaction_page header{padding:.5rem 0}#transaction_page header .back-arrow{grid-area:back}#transaction_page h5{font-weight:400;opacity:.8;margin-bottom:.4rem}#transaction_page p:last-of-type{margin:2rem 0 1rem;font-size:.9rem;opacity:.8}#transaction_page #transaction_details{position:relative;margin:1.5rem 0;padding:1.5rem;background-color:rgba(var(--text-color),.06);max-width:50ch;border-radius:.5rem}#transaction_page #transaction_details .icon{height:4rem;width:4rem;padding:1.2rem;border-radius:4rem;margin-bottom:2rem;background:rgba(var(--text-color),.06)}#transaction_page #transaction_details .success{background:#00C853;stroke-width:8;stroke:var(--background-color)}#transaction_page #transaction_details .flex{margin-bottom:1.5rem;align-items:baseline}#add_person_btn,.person{flex-direction:column;transition:transform .3s;cursor:pointer}#transaction_page #transaction_details strong{font-weight:500}#transaction_page #transaction_details strong:not(:last-of-type)+sm-button{margin-bottom:1.5rem;margin-top:-.4rem}#transaction_page #transaction_details strong:not(:last-of-type){margin-bottom:1rem}#transaction_page #transaction_details sm-button{width:max-content;margin-top:.6rem}#transaction_page .transaction-amount{font-size:2rem;font-weight:400}#transaction_page #transaction_time{right:0;position:absolute;margin:1.5rem}#people_container{display:grid;grid-template-columns:repeat(4,1fr);padding:1.5rem;gap:2rem .2rem}#add_person_btn{display:flex;width:5rem;text-align:center;font-size:.85rem}#add_person_btn .icon{height:3rem;width:3rem;border-radius:2rem;stroke-width:10;padding:1rem;background:rgba(var(--text-color),.06);align-self:center;margin-bottom:.6rem}.person{display:flex;align-items:center;width:5rem}#person_initials,.person-initials{display:flex;justify-content:center;height:3rem;width:3rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-bottom:.6rem!important;text-transform:uppercase;color:rgba(var(--foreground-color),1)}#person_popup h3,.person-name{text-transform:capitalize}.person-name{font-size:.85rem;text-align:center}#person_popup>.flex:first-of-type{margin:1rem 0}#person_popup>.flex:first-of-type .flex{margin-top:.5rem}#person_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.8rem;cursor:pointer;stroke-width:8}#person_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#person_popup .copy-row{margin-bottom:1.5rem}#person_popup #show_person_name{padding:.5rem 1rem;border-radius:.4rem;max-width:30ch}#person_popup #show_person_name:focus{outline:0;background:rgba(var(--text-color),.1)}#activity_page .empty-state,#request_page .empty-state,#settings_page .empty-state{justify-content:left}#settings_page h4{margin-top:2rem;margin-bottom:.6rem}#settings_page .copy-row h4{margin:0}#settings_page p{color:rgba(var(--text-color),.7)}#settings_page sm-button{margin-top:.8rem}#settings_page .flex{max-width:60ch}#settings_page .my-qr-code{margin-bottom:1.5rem;height:14rem}#settings_page .my-qr-code img{height:100%}@media only screen and (max-width:640px){#deposit,#home_page{display:grid;gap:1.5rem;grid-template-areas:"." "left";grid-template-columns:minmax(0,1fr)}#deposit .left,#home_page .left{grid-area:left}sm-select{width:100%}.hide-on-mobile{display:none!important}#transaction_page{padding-top:0}#transaction_page header{padding:1.5rem 0}#deposit .user-panel{padding:0}video{height:100vw}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}body{padding:0 2rem;margin-left:4rem}sm-popup{background:rgba(var(--foreground-color),1)}#navbar,#navbar .active{background:rgba(var(--text-color),.06)}#confirmation,sm-popup::part(popup){width:24rem}#navbar{justify-content:flex-start;flex-direction:column;align-items:stretch;left:0;bottom:0;top:0;right:auto;border-top:none;border-radius:0;box-shadow:-.5rem 0 .5rem #00008 inset}#navbar .navbar-item{display:flex;width:auto;padding:.8rem 1.2rem}#navbar .logo h4,#navbar .navbar-item h5{display:none}#navbar .logo .main-logo,#navbar .navbar-item .icon{height:1.2rem;width:1.2rem}#navbar .navbar-item:hover{opacity:1}#navbar .logo{margin:1.5rem 1rem}.page{padding-bottom:2rem}#sign_in_popup{width:24rem}#home_page{padding-top:.5rem}#home_page .left{margin-top:1rem}#people_container,.options-tab{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:2rem .8rem}.display-balance .balance{height:9rem}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}.request .time{grid-area:time;margin-bottom:0!important}.request button{width:max-content;margin-left:auto}.request .breakable{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deposit .user-panel{padding-right:0}#settings_page .copy-row{display:inline-grid}}@media only screen and (min-width:800px){body{margin-left:11rem}.complaint{gap:0 1.5rem;grid-template-columns:1fr 1fr;grid-template-areas:". . " "header header"}.complaint .complaint-actions{grid-area:header}.complaint .left{border-right:1px solid rgba(var(--text-color),.2);padding-right:1.5rem}.complaint .right{display:flex;justify-content:center;flex-direction:column}#navbar .navbar-item h5{font-size:.9rem;margin:0;display:block}#navbar .icon{margin-right:.8rem}#navbar .logo h4{display:block;font-size:1rem}.user-panel{position:sticky;top:1.5rem;padding-top:1.5rem}#deposit,#home_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 22rem}#deposit{grid-template-columns:minmax(0,1fr) 18rem}#deposit .user-panel{padding-right:0}.activity{width:60ch}.request{grid-template-columns:minmax(0,auto) auto;grid-template-areas:"time time" " . ." " . ."}}@media only screen and (min-width:1280px){.request{grid-template-areas:"time time time" ". . ."}#deposit{grid-template-columns:minmax(0,1fr) 20rem}#deposit .request{grid-template-areas:"time time time time" ". . . ."}}@media only screen and (max-width:320px){body{font-size:14px}}@media (any-hover:hover){.navbar-item:hover{background:rgba(var(--text-color),.06)}.remove{opacity:.6}.remove:hover{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 4368571..334bd43 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,1866 +1,1867 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: 'Roboto', sans-serif; -} -body { - --accent-color: #4527A0; - --text-color: 17, 17, 17; - --text-color-light: 85, 85, 85; - --foreground-color: 255, 255, 255; - --background-color: rgba(var(--foreground-color), 1); - --dark-shade: #f4f4f4; - --hue: 255; - --saturation: 61%; - --lightness: 39%; - color: rgba(var(--text-color), 1); - font-size: 16px; - background-size: cover; -} -body[data-theme="dark"]{ - --accent-color: #a293d0; - --text-color: 238, 238, 238; - --text-color-light: 170, 170, 170; - --foreground-color: 26, 26, 26; - --background-color: #111; - --dark-shade: #222; - --hue: 255; - --saturation: 39%; - --lightness: 70%; - background-color: var(--background-color); - .flo-balance-card{ - color: rgba(var(--text-color), 1); - } -} - -a { - font-weight: 600; - text-decoration: none; - color: var(--accent-color); -} - -.dark-text { - color: #111; -} - -h1 { - font-size: 3.5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.5rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.8rem; -} - -h1, -h2, -h3, -h4, -h5 { - font-family: 'Poppins', sans-serif; - font-weight: 600; -} - -p { - line-height: 1.5; - max-width: 60ch; - color: rgba(var(--text-color), 0.9); -} -strong{ - font-weight: 500; -} -button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-transform: capitalize; - padding: 0.6rem 1.2rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.3rem; - color: var(--accent-color); - transition: transform 0.3s; - border: none; - background: rgba(var(--text-color), 0.1); - -webkit-tap-highlight-color: transparent; - font-family: 'Poppins', sans-serif; - - &:focus { - outline: thin solid rgba(var(--text-color-light), .4); - } - - &:disabled { - cursor: default; - background: rgba(var(--text-color), 0.4); - } - - &:disabled~.loader { - opacity: 0; - } -} -::-moz-focus-inner { - border: none; -} -.bottom-padding { - padding-bottom: 1.5rem; -} - -.top-padding { - padding-top: 1em; -} - -.bottom-margin { - margin-bottom: 1.5rem; -} - -.top-margin { - margin-top: 1.5rem; -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; -} - -.align-center { - align-items: center; -} - -.direction-column { - flex-direction: column; -} - -.justify-right{ - margin-left: auto; -} - -.space-between { - justify-content: space-between; -} - -.label { - margin-bottom: 0.4rem; -} - -.light-text { - opacity: 0.7; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.breakable { - word-break: break-all; -} - -.separator { - padding: .1em; -} - -.no-transformations { - transform: none !important; -} -.capitalize{ - text-transform: capitalize; -} - -sm-button[variant="outlined"]{ - --accent-color: rgba(var(--text-color), 1); -} - -.loader { - fill: none; - stroke-width: 10; - stroke: var(--accent-color); - height: 2rem; - width: 2rem; - overflow: visible; - stroke-dashoffset: 230; - stroke-dasharray: 230; - padding: 2px; - justify-self: center; -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -210; - } -} -@keyframes load-btn-loader { - 50% { - stroke-dashoffset: 0; - } - - 100% { - stroke-dashoffset: -220; - } -} - -.action { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0; - background: none; - &:disabled{ - .primary-btn { - background: none; - } - } - &:focus{ - outline: none; - } - h4 { - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - clip-path: circle(100%); - transition: clip-path 0.3s; - border-radius: 0.2rem; - } - - .btn { - z-index: 2; - } - - .loader { - position: absolute; - z-index: 1; - padding: 0.4em; - stroke-dashoffset: 220; - stroke-dasharray: 220; - } - .loader:not(.animate-loader){ - opacity: 0; - } - .animate-loader { - animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; - } - -} - -.clip { - clip-path: circle(0) !important; -} - -.animate-loader { - animation: load 2.6s infinite, rotate 1s infinite linear; -} - -.expand { - width: 100%; -} - -.fade-left { - animation: fadeleft 0.3s; -} - -.fade-right { - animation: faderight 0.3s; -} - -@keyframes faderight { - from { - opacity: 0; - transform: translateX(-1em); - } - - to { - opacity: 1; - transform: none; - } -} - -@keyframes fadeleft { - from { - opacity: 0; - transform: translateX(1em); - } - - to { - opacity: 1; - transform: none; - } -} - -.logo { - display: flex; - align-items: center; - h4{ - font-weight: 500; - font-size: clamp(1.1rem, 2vw, 1.2rem); - } - .main-logo { - height: clamp(1.4rem, 2vw, 1.6rem); - width: clamp(1.4rem, 2vw, 1.6rem); - fill: rgba(var(--text-color), 1); - stroke: none; - margin-right: 0.2rem; - } -} - -textarea { - width: 100%; - max-width: 100%; - background: rgba(var(--text-color), 0.1); - border: none; - border-radius: 0.2rem; - resize: none; - font-size: 1rem; - line-height: 1.6; - padding: 0.8rem; -} - -*:empty + .empty-state { - display: grid; -} - -.empty-state { - display: none; - place-items: center; - width: 100%; - svg { - stroke: rgba(var(--text-color), 0.8); - height: 12em; - width: 12em; - } -} - -.container-header { - display: flex; - align-items: center; - flex-direction: row; - width: 100%; - padding: 1rem 0; - - h2 { - flex: 1; - } - - button { - align-self: center; - } -} - -.btn { - background: var(--accent-color); - color: rgba(var(--foreground-color), 1); - padding: 0.4em 1em; -} - -.back-arrow { - stroke: rgba(var(--text-color), 1); - stroke-width: 6; - fill: none; - height: 2rem; - padding: 0.5rem 0.5rem 0.5rem 0; - cursor: pointer; -} - -.card { - border-radius: 0.6rem; - padding: 1.5em; - background: rgba(var(--foreground-color), 1); -} - -.solid-background { - background: rgba(var(--foreground-color), 1) !important; -} - -#confirmation, -#prompt { - flex-direction: column; - h4 { - font-weight: 500; - margin-bottom: 1.5rem; - } - - .flex { - sm-button:first-of-type { - margin-right: 0.6em; - margin-left: auto; - } - } -} - -.refresh { - margin-top: 0.6em; - margin-bottom: 1em; -} - -sm-popup{ - .illustration{ - position: relative; - height: 4rem; - width: 4rem; - padding: 1rem; - stroke: var(--accent-color); - margin-bottom: 1rem; - border-radius: 5rem; - background: rgba(var(--text-color), 0.06); - } - sm-input:not(:last-of-type) { - margin-bottom: 1rem; - } - p{ - margin-block-end: 1rem; - } - .action{ - h4{ - padding: 0.5rem 1rem; - font-weight: 500; - } - } - .message{ - margin-bottom: 0.2rem; - } - .message + .copy-row{ - margin-bottom: 1.5rem; - } - h5:not(.tag){ - font-family: 'Roboto', sans-serif; - margin-bottom: 0.4rem; - margin-top: 1rem; - font-weight: 500; - } -} - -#reader{ - overflow: hidden; -} -.my-qr-code{ - background: #fff; - border-radius: 0.5rem; - padding: 1rem; - max-width: max-content; -} -#qr_code_popup{ - &::part(popup){ - height: 90vh; - } - &::part(popup-body){ - padding: 0; - } - .popup-header{ - padding-bottom: 1.5rem; - } - sm-tab-header{ - margin: 0 auto; - transform: translateX(-1rem); - } - sm-panel{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - } - video{ - width: 100% !important; - object-fit: cover; - } - p{ - margin-top: 1.5rem; - opacity: 0.8; - text-align: center; - max-width: 30ch; - } -} -sm-input[type="number"]{ - font-size: 1.2rem; -} - -.popup-header{ - padding: 1.5rem; - padding-bottom: 0; - display: flex; - align-items: center; - width: 100%; - .icon{ - margin-right: 1rem; - padding: 0.2rem; - stroke-width: 10; - cursor: pointer; - } - button{ - width: auto; - margin-left: auto; - } -} - -details, summary{ - margin-bottom: 1rem; -} -summary{ - cursor: pointer; -} -details{ - h5{ - line-height: 0.6; - margin-bottom: 0; - margin-top: 1.2rem !important; - } - p{ - font-size: 0.9rem; - line-height: 1.4; - } -} - -#sign_in_popup { - &::part(background){ - background: rgba(var(--foreground-color), 1); - } - h3 { - margin-top: 2rem; - } - - h4 { - font-weight: 500; - margin-bottom: 3rem; - } - - button { - margin: 1rem 0; - } - - p { - margin-top: 1rem; - margin-bottom: 0 !important; - } -} - -.primary-btn { - background: var(--accent-color); - justify-content: center; - color: rgba(var(--foreground-color), 1); -} - -#main_header { - align-items: center; - padding: clamp(1rem, 2vw, 2rem) 1rem; - justify-content: space-between; -} - -.icon { - height: 1.2rem; - width: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; -} - -#navbar { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: auto; - z-index: 3; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 -0.5rem 1rem #00000010; - border-radius: 1rem 1rem 0 0; - .navbar-item { - position: relative; - text-align: center; - cursor: pointer; - padding: 0.3rem; - padding-top: 0.8rem; - border-radius: 0.4em; - opacity: 0.6; - color: rgba(var(--text-color), 1); - font-size: 0.8em; - text-transform: capitalize; - width: 100%; - font-weight: 600; - h5 { - margin-top: 0.4em; - } - .icon{ - stroke: rgba(var(--text-color), 1); - } - } - .active{ - opacity: 1; - } -} - -.banking { - stroke-width: 4; -} - -#home_page { - padding: 0 0 4rem 0; - .left { - width: auto; - border-radius: 0.6rem; - h3, h4, p { - padding: 0 1.5rem; - } - h3{ - font-size: 2rem; - margin-bottom: 1rem; - } - } -} - -.user-panel { - position: relative; - padding: 1.5rem; - padding-top: 1rem; - align-self: flex-start; - .icon{ - stroke: rgba(var(--foreground-color), 1); - } - .action{ - width: auto; - justify-content: flex-end; - h4{ - border-radius: 2rem; - background-color: rgba(var(--text-color), 0.1); - color: rgba(var(--text-color), 1); - width: auto ; - } - .loader{ - align-self: flex-end; - } - .clip{ - clip-path: circle(0 at 100% 0) !important; - } - } -} -#deposit{ - padding-top: 1.5rem; - .flex{ - sm-button{ - margin-bottom: 1.5rem; - } - } - .user-panel{ - padding: 0 1rem; - } - .display-balance { - grid-template-areas: 'rupee rupee' 'flo flo'; - } -} -.display-balance { - grid-template-columns: 1fr 1fr; - grid-template-areas: 'rupee .' 'flo flo'; - gap: 0.8rem; - margin-top: 1rem; - .icon { - height: 1.4rem; - width: 1.4rem; - padding: 0.3rem; - stroke-width: 10; - cursor: pointer; - } -} -.balance{ - height: 10rem; - position: relative; - display: flex; - flex-direction: column; - border-radius: 1rem; - padding: 1rem; - justify-content: flex-end; - h4{ - font-size: 2rem; - font-family: 'Roboto', sans-serif; - font-weight: 500; - text-shadow: 1px 0.1rem 0.2rem #00000040; - word-break: break-all; - flex: 1; - } - h5{ - opacity: 0.8; - margin-bottom: 0.2rem; - } - .tooltip{ - border-radius: 1rem; - color: rgba(var(--text-color), 1); - margin-left: auto; - } -} -.rupee-balance-card{ - grid-area: rupee; - background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); - background-size: 9rem, cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; - } -} -.in-process-balance{ - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem #ff4857 inset; - } -} -.flo-balance-card{ - grid-area: flo; - color: rgba(var(--foreground-color), 1); - background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); - background-size: cover; - .tooltip{ - box-shadow: 0 0 0 0.4rem#1b0980 inset; - } -} - -.tooltip{ - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - cursor: help; - display: flex; - flex-direction: column; - background: rgba(var(--foreground-color), 1); - z-index: 1; - transition: clip-path 0.4s ease-out; - clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); - scrollbar-width: thin; - .tt-icon{ - display: inline-flex; - width: 3rem; - height: 3rem; - align-items: center; - justify-content: center; - margin-left: auto; - font-weight: 600; - } - .tooltip-text{ - padding: 1rem; - padding-top: 0; - line-height: 1.4; - font-size: 0.9rem; - font-weight: normal; - overflow-y: auto; - max-height: calc(100% - 3rem); - max-width: 30ch; - } - &:hover{ - clip-path: circle(100%); - } -} - -.user-type { - font-weight: 500; -} - -.options-tab { - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -.option { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border-radius: 0.4rem; - width: 5rem; - text-transform: capitalize; - transition: transform 0.3s; - -webkit-tap-highlight-color: transparent; - cursor: pointer; - .icon { - height: 3rem; - width: 3rem; - background: rgba(var(--text-color), 0.06); - border-radius: 2rem; - padding: 0.8rem; - margin-bottom: 0.6rem; - } - - h4 { - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - } - - &:active { - transform: scale(0.95); - } -} - -.request-icon{ - transform: rotate(180deg); -} - -.notification-dot::after { - content: ''; - position: absolute; - z-index: 1; - top: 0; - right: 0; - height: 0.6em; - width: 0.6em; - background-color: #E53935; - border-radius: 0.4em; - transition: transform 0.3s; -} - -.shrink.notification-dot::after { - transform: scale(0); -} - -#deposit, -#withdraw { - .container-header { - background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); - } -} - -sm-tab-header { - position: sticky; - top: 0; - display: inline-flex; - background-color: var(--dark-shade); - z-index: 2; - padding: 0.3rem; - margin: 1rem 0; - border-radius: 3rem; -} -sm-tab{ - text-transform: capitalize; - &::part(tab){ - padding: 0.4rem 1.2rem; - } -} -sm-panel{ - width: 100%; -} - -.request { - display: grid; - gap: 1rem; - padding: 1.5em; - border-radius: 0.6rem; - background: rgba(var(--text-color), 0.06); - h4{ - font-weight: 400; - font-size: 0.9rem; - } - h5 { - text-transform: capitalize; - font-weight: 400; - opacity: 0.8; - margin-bottom: 0.2rem; - } - .action { - align-self: flex-end; - } - .amount { - font-family: 'Roboto', sans-serif; - } - button { - width: auto; - } - .flex { - align-items: center; - justify-content: flex-end; - justify-self: flex-end; - button { - margin: 0; - } - } - &.placeholder{ - pointer-events: none; - h4, h5{ - padding: 0.5rem 0; - background: rgba(var(--text-color), 0.06); - } - .btns{ - display: grid; - gap: 0.5rem; - grid-auto-flow: column; - justify-content: flex-end; - h4{ - width: 6rem; - } - } - h5{ - width: 50%; - } - .time{ - width: 3rem; - } - animation: pulse infinite 0.6s alternate; - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - } -} - -.deposited { - color: #00C853; -} - -.decline-request { - margin-right: 0.5rem !important; -} - -.withdrawn { - color: #d43125; -} - -.container { - display: grid; - gap: 1em; - width: 100%; -} - -.page { - padding: 1rem 1.5rem; - padding-bottom: 5rem; - .container-header { - display: grid; - grid-template-columns: 1fr auto; - grid-template-areas: '. .' - 'search search'; - gap: 1rem; - top: 0; - background: rgba(var(--foreground-color), 1); - will-change: auto; - z-index: 2; - - .search { - grid-area: search; - - input { - padding: 1em; - border: none; - width: 100%; - background: var(--dark-shade); - font-size: 1rem; - font-weight: 500; - color: rgba(var(--text-color), 1); - border-radius: 0.2em; - - &:focus { - outline: none; - background: rgba(var(--text-color-light), 0.2); - } - } - } - } -} - -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 0.5rem; - width: auto; - h4 { - margin-bottom: 0; - font-weight: 400; - } - - .icon { - cursor: pointer; - padding: 0.4rem; - height: 1.8rem; - width: 1.8rem; - } - - .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.time { - font-weight: 500; -} - -#report_popup { - width: 32rem; -} - -#profile_page { - display: flex; - flex-direction: column; - - button { - align-self: flex-start; - } -} - -.complaint { - display: grid; - gap: 1.5rem 0; - - .complaint-actions { - align-items: center; - margin: 1.5rem 0 0 0; - } - - .processed { - color: #007732; - } - - .unprocessed { - color: #d43125; - } - - .processed, - .unprocessed { - margin-bottom: 1.5rem; - } - - button { - .icon { - padding: 0.2rem; - margin-right: 0.5rem; - stroke: var(--accent-color); - stroke-width: 8; - } - } -} - -.complaints-container { - padding-top: 1.5rem; - display: grid; - align-items: flex-start; - gap: 1.5rem; -} - -#helpline_page { - sm-select { - margin-bottom: 1.5rem; - } -} - -.complaint-placeholder { - animation: pulse infinite 0.6s alternate; - - h4, - h5 { - border-radius: 0.2rem; - } - - h5 { - background: rgba(var(--text-color), 0.1); - padding: 0.5rem 0.6rem; - } - - h4 { - background: rgba(var(--text-color), 0.2); - padding: 0.8rem 0.8rem; - } - - .demo-btn { - padding: 0.8rem 3rem; - } -} - -@keyframes pulse { - from { - opacity: 0.4; - } - - to { - opacity: 1; - } -} - - -#main_loader { - text-align: center; - place-content: center; - height: 100vh; - width: 100vw; - position: fixed; - left: 0; - sm-button { - margin-left: 0; - margin-top: 1rem; - } - - svg { - height: 2rem; - width: 2rem; - stroke: var(--accent-color); - stroke-width: 6; - fill: none; - overflow: visible; - stroke-linecap: round; - stroke-dashoffset: 210; - stroke-dasharray: 210; - justify-self: center; - align-self: center; - margin-bottom: 2rem; - } - - h3 { - width: 100%; - font-weight: 400; - word-spacing: 0.16em; - } -} -#upi_txId_section{ - .copy-row{ - margin-bottom: 1.5rem; - } -} - -@keyframes popup{ - 0%{ - stroke-dashoffset: 50; - transform: translateY(4rem) scale(0.2, 0.6); - } - 40%{ - transform: translateY(0) scale(0.2); - } - 41%{ - transform: translateY(0) scale(0.2); - } - 50%{ - stroke-dashoffset: 50; - transform: translateY(0) scale(1); - } - 100%{ - stroke-dashoffset: 0; - } -} -#transaction_result{ - z-index: 12; - #transaction_heading{ - margin-bottom: 1rem; - } - .copy-row{ - grid-template-areas: 'label label' '. .'; - margin-top: 1rem; - gap: 0 1rem; - h4{ - font-weight: 500; - } - } - h5{ - grid-area: label; - color: rgba(var(--text-color), 0.7); - } - h4, h5, p{ - text-align: center; - } - & > h4{ - font-size: 1.2rem; - margin-top: 2rem; - margin-bottom: 0.5rem; - } - sm-button{ - align-self: center; - width: auto; - } -} -#success_svg, #failure_svg{ - height: 5rem; - width: 5rem; - stroke-width: 4; - align-self: center; - stroke: none; - stroke-dasharray: 50; - fill: rgba(var(--text-color), 0.1); - animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#success_svg{ - polyline{ - fill: none; - stroke: #00C853 ; - } -} -#failure_svg{ - line{ - stroke: #EF5350; - } -} - -.rupee-symbol{ - height: 1rem; - width: 1rem; - fill: rgba(var(--text-color), 0.5); -} - -#deposit_rupee{ - .copy-row{ - margin-bottom: 1rem; - } -} -.activity-container{ - display: grid; - gap: 1rem; -} -.activity{ - display: grid; - background: rgba(var(--text-color), 0.06); - border-radius: 0.6rem; - padding: 1rem 1.2rem; - gap: 0 1rem; - grid-template-columns: auto 1fr auto; - grid-template-areas: 'icon type amount' 'icon receiver time'; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - &:active{ - transform: scale(0.95); - } - .icon{ - grid-area: icon; - height: 3rem; - width: 3rem; - padding: 0.8rem; - background: rgba(var(--text-color), 0.06); - background-size: cover; - border-radius: 2rem; - } - .activity-type{ - grid-area: type; - text-transform: capitalize; - font-weight: 400; - font-size: 0.8rem; - } - .activity-receiver{ - grid-area: receiver; - font-weight: 500; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .activity-amount{ - text-align: right; - grid-area: amount; - font-family: 'Roboto', sans-serif; - } - .activity-time{ - text-align: right; - grid-area: time; - color: rgba(var(--text-color), 0.7); - font-weight: 500; - } - .pending{ - display: inline-flex; - padding: 0.3rem 0.6rem; - background: rgba(var(--text-color), 0.06); - border-radius: 1rem; - width: max-content; - margin-left: 0.4rem; - } - &.placeholder{ - pointer-events: none; - animation: pulse infinite 0.6s alternate; - .activity-type, - .activity-receiver{ - background: rgba(var(--text-color), 0.06); - padding: 0.5rem 0; - } - .activity-type{ - width: 50%; - } - &:nth-of-type(2){ - animation-delay: 0.1s; - } - &:nth-of-type(3){ - animation-delay: 0.2s; - } - &:nth-of-type(4){ - animation-delay: 0.3s; - } - &:nth-of-type(5){ - animation-delay: 0.4s; - } - &:nth-of-type(6){ - animation-delay: 0.5s; - } - &:nth-of-type(7){ - animation-delay: 0.6s; - } - &:nth-of-type(8){ - animation-delay: 0.7s; - } - } -} -.back-arrow{ - stroke-width: 10; - margin-right: 0.5rem; - padding: 0.2rem; -} -.select{ - max-width: 50ch; - position: relative; - display: flex; - width: 100%; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); - align-items: center; - &:first-of-type:not(:last-of-type){ - border-radius: 0.3rem 0.3rem 0 0; - } - & + &{ - margin-top: 0; - border-radius: 0 0 0.3rem 0.3rem; - border-top: solid 1px rgba(var(--text-color), 0.16); - } - label{ - display: flex; - align-items: center; - cursor: pointer; - flex: 1; - padding: 0.8rem 1rem; - } - input[type="radio"]{ - display: none; - } - input:checked ~ .radio .outer-ring{ - stroke: var(--accent-color); - } - input:checked ~ .radio .inner-disc{ - transform: none; - } - .radio{ - width: 1.2rem; - height: 1.2rem; - fill: none; - overflow: visible; - margin-right: 0.6rem; - .outer-ring{ - stroke-width: 8; - stroke: rgba(var(--text-color), 0.5); - } - .inner-disc{ - transform-origin: center; - fill: var(--accent-color); - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - } - .remove{ - width: 3rem; - height: 2rem; - padding: 0.7rem; - cursor: pointer; - stroke-width: 10; - } - .tag{ - grid-area: tag; - opacity: 0.6; - font-weight: 500; - border: solid 1px rgba(var(--text-color), 0.4); - padding: 0.2rem 0.4rem; - border-radius: 0.3rem; - margin-right: 0.5rem; - } - h4{ - font-weight: 400; - } -} -.add-upi{ - margin-top: 0.4rem; - justify-self: flex-start; - width: max-content; -} - -#transaction_page{ - header{ - padding: 0.5rem 0; - .back-arrow{ - grid-area: back; - } - h4{ - text-transform: capitalize; - } - } - h5{ - font-weight: 400; - font-family: 'Roboto', sans-serif; - opacity: 0.8; - margin-bottom: 0.4rem; - text-transform: capitalize; - } - p:last-of-type{ - margin: 2rem 0 1rem 0; - font-size: 0.9rem; - opacity: 0.8; - } - #transaction_details{ - position: relative; - margin: 1.5rem 0; - padding: 1.5rem; - background-color: rgba(var(--text-color), 0.06); - max-width: 50ch; - border-radius: 0.5rem; - .icon{ - height: 4rem; - width: 4rem; - padding: 1.2rem; - border-radius: 4rem; - margin-bottom: 2rem; - background: rgba(var(--text-color), 0.06); - } - .success{ - background: #00C853; - stroke-width: 8; - stroke: var(--background-color); - } - .flex{ - margin-bottom: 1.5rem; - align-items: baseline; - } - strong{ - font-weight: 500; - &:not(:last-of-type) + sm-button{ - margin-bottom: 1.5rem; - margin-top: -0.4rem; - } - } - strong:not(:last-of-type){ - margin-bottom: 1rem; - } - sm-button{ - width: max-content; - margin-top: 0.6rem; - } - } - .transaction-amount{ - font-size: 2rem; - font-weight: 400; - } - #transaction_time{ - right: 0; - position: absolute; - margin: 1.5rem; - } -} -#people_container{ - display: grid; - grid-template-columns: repeat(4, 1fr); - padding: 1.5rem; - gap: 2rem 0.2rem; -} -#add_person_btn{ - cursor: pointer; - display: flex; - flex-direction: column; - width: 5rem; - text-align: center; - transition: transform 0.3s; - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - &:active{ - transform: scale(0.95); - } - .icon{ - height: 3rem; - width: 3rem; - border-radius: 2rem; - stroke-width: 10; - padding: 1rem; - background: rgba(var(--text-color), 0.06); - align-self: center; - margin-bottom: 0.6rem; - } -} -.person{ - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - transition: transform 0.3s; - width: 5rem; - -webkit-tap-highlight-color: transparent; - &:active{ - transform: scale(0.95); - } -} -.person-initials, #person_initials{ - display: flex; - justify-content: center; - height: 3rem; - width: 3rem; - font-size: 1.2rem !important; - font-weight: 500; - align-items: center; - border-radius: 2rem; - margin-bottom: 0.6rem !important; - text-transform: uppercase; -} -.person-name{ - font-size: 0.85rem; - opacity: 0.8; - font-weight: 500; - text-transform: capitalize; - text-align: center; -} - -#person_popup{ - & > .flex:first-of-type{ - margin: 1rem 0; - .flex{ - margin-top: 0.5rem; - .icon{ - height: 2.6rem; - width: 2.6rem; - padding: 0.8rem; - cursor: pointer; - stroke-width: 8; - &:hover{ - background: rgba(var(--text-color), 0.06); - } - } - } - } - h3{ - text-transform: capitalize; - } - h5{ - font-weight: 500; - opacity: 0.8; - } - .copy-row{ - margin-bottom: 1.5rem; - } - #show_person_name{ - padding: 0.5rem 1rem; - border-radius: 0.4rem; - max-width: 30ch; - &:focus{ - outline: none; - background: rgba(var(--text-color), 0.1); - } - } -} - -#activity_page, -#request_page, -#settings_page{ - .empty-state{ - justify-content: left; - } -} -#settings_page{ - h4{ - margin-top: 2rem; - margin-bottom: 0.6rem; - } - .copy-row h4{ - margin: 0; - } - p{ - color: rgba(var(--text-color), 0.7); - } - sm-button{ - margin-top: 0.8rem; - } - .flex{ - max-width: 60ch; - } - .my-qr-code{ - margin-bottom: 1.5rem; - height: 14rem; - img{ - height: 100%; - } - } -} -@media only screen and (max-width: 640px) { - #home_page, #deposit{ - display: grid; - gap: 1.5rem; - grid-template-areas: '.''left'; - grid-template-columns: minmax(0, 1fr); - .left { - grid-area: left; - } - } - sm-select { - width: 100%; - } - .hide-on-mobile{ - display: none !important; - } - #transaction_page{ - padding-top: 0; - header{ - padding: 1.5rem 0; - } - } - #deposit{ - .user-panel{ - padding: 0; - } - } - video{ - height: 100vw; - } -} - -@media only screen and (min-width: 640px) { - .hide-on-desktop{ - display: none !important; - } - body { - padding: 0 2rem; - margin-left: 4rem; - } - sm-popup{ - background: rgba(var(--foreground-color), 1); - } - sm-popup::part(popup){ - width: 24rem; - } - - #confirmation { - width: 24rem; - } - - #navbar { - justify-content: flex-start; - flex-direction: column; - align-items: stretch; - left: 0; - bottom: 0; - top: 0; - right: auto; - border-top: none; - border-radius: 0; - background: rgba(var(--text-color), 0.06); - box-shadow: -0.5rem 0 0.5rem #00000008 inset; - .navbar-item { - display: flex; - width: auto; - padding: 0.8rem 1.2rem; - .icon { - height: 1.2rem; - width: 1.2rem; - } - h5{ - display: none; - } - &:hover { - opacity: 1; - } - } - .logo{ - margin: 1.5rem 1rem; - h4{ - display: none; - } - .main-logo{ - height: 1.2rem; - width: 1.2rem; - } - } - .active{ - background: rgba(var(--text-color), 0.06); - } - } - - .page { - padding-bottom: 2rem; - } - - #sign_in_popup { - width: 24rem; - } - #home_page { - padding-top: 0.5rem; - .left { - margin-top: 1rem; - } - } - .options-tab, #people_container{ - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); - gap: 2rem 0.8rem; - } - .display-balance{ - .balance{ - height: 9rem; - } - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - .time{ - grid-area: time; - margin-bottom: 0 !important; - } - button{ - width: max-content; - margin-left: auto; - } - .breakable{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - #deposit{ - .user-panel{ - padding-right: 0; - } - } - #settings_page{ - .copy-row{ - display: inline-grid; - } - } -} - -@media only screen and (min-width: 800px) { - body { - margin-left: 11rem; - } - .complaint { - gap: 0 1.5rem; - grid-template-columns: 1fr 1fr; - grid-template-areas: '. . ''header header'; - - .complaint-actions { - grid-area: header; - } - - .left { - border-right: 1px solid rgba(var(--text-color), 0.2); - padding-right: 1.5rem; - } - - .right { - display: flex; - justify-content: center; - flex-direction: column; - } - } - #navbar{ - .navbar-item { - h5{ - font-size: 0.9rem; - margin: 0; - display: block; - } - } - .icon{ - margin-right: 0.8rem; - } - .logo{ - h4{ - display: block; - font-size: 1rem; - } - } - } - .user-panel{ - position: sticky; - top: 1.5rem; - padding-top: 1.5rem; - } - #home_page, #deposit { - display: grid; - gap: 1.5rem; - grid-template-columns: minmax(0, 1fr) 22rem; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 18rem; - .user-panel{ - padding-right: 0; - } - } - .activity{ - width: 60ch; - } - .request{ - grid-template-columns: minmax(0, auto) auto; - grid-template-areas: 'time time' ' . .' ' . .'; - } -} - -@media only screen and (min-width: 1280px) { - .request{ - grid-template-areas: 'time time time' '. . .'; - } - #deposit{ - grid-template-columns: minmax(0, 1fr) 20rem; - .request{ - grid-template-areas: 'time time time time' '. . . .'; - } - } -} - -@media only screen and (max-width: 320px) { - body { - font-size: 14px; - } -} - -@media (any-hover: hover) { - .navbar-item:hover{ - background: rgba(var(--text-color), 0.06); - } - .remove{ - opacity: 0.6; - } - .remove:hover{ - opacity: 1; - } -} +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Roboto', sans-serif; +} +body { + --accent-color: #4527A0; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f4f4f4; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background-size: cover; +} +body[data-theme="dark"]{ + --accent-color: #a293d0; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #222; + --hue: 255; + --saturation: 39%; + --lightness: 70%; + background-color: var(--background-color); + .flo-balance-card{ + color: rgba(var(--text-color), 1); + } +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 60ch; + color: rgba(var(--text-color), 0.9); +} +strong{ + font-weight: 500; +} +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: 'Poppins', sans-serif; + + &:focus { + outline: thin solid rgba(var(--text-color-light), .4); + } + + &:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); + } + + &:disabled~.loader { + opacity: 0; + } +} +::-moz-focus-inner { + border: none; +} +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right{ + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.separator { + padding: .1em; +} + +.no-transformations { + transform: none !important; +} +.capitalize{ + text-transform: capitalize; +} + +sm-button[variant="outlined"]{ + --accent-color: rgba(var(--text-color), 1); +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -210; + } +} +@keyframes load-btn-loader { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -220; + } +} + +.action { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; + &:disabled{ + .primary-btn { + background: none; + } + } + &:focus{ + outline: none; + } + h4 { + padding: 0.5rem 1.2rem; + font-size: 0.9rem; + clip-path: circle(100%); + transition: clip-path 0.3s; + border-radius: 0.2rem; + } + + .btn { + z-index: 2; + } + + .loader { + position: absolute; + z-index: 1; + padding: 0.4em; + stroke-dashoffset: 220; + stroke-dasharray: 220; + } + .loader:not(.animate-loader){ + opacity: 0; + } + .animate-loader { + animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear; + } + +} + +.clip { + clip-path: circle(0) !important; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +.expand { + width: 100%; +} + +.fade-left { + animation: fadeleft 0.3s; +} + +.fade-right { + animation: faderight 0.3s; +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-1em); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeleft { + from { + opacity: 0; + transform: translateX(1em); + } + + to { + opacity: 1; + transform: none; + } +} + +.logo { + display: flex; + align-items: center; + h4{ + font-weight: 500; + font-size: clamp(1.1rem, 2vw, 1.2rem); + } + .main-logo { + height: clamp(1.4rem, 2vw, 1.6rem); + width: clamp(1.4rem, 2vw, 1.6rem); + fill: rgba(var(--text-color), 1); + stroke: none; + margin-right: 0.2rem; + } +} + +textarea { + width: 100%; + max-width: 100%; + background: rgba(var(--text-color), 0.1); + border: none; + border-radius: 0.2rem; + resize: none; + font-size: 1rem; + line-height: 1.6; + padding: 0.8rem; +} + +*:empty + .empty-state { + display: grid; +} + +.empty-state { + display: none; + place-items: center; + width: 100%; + svg { + stroke: rgba(var(--text-color), 0.8); + height: 12em; + width: 12em; + } +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 1rem 0; + + h2 { + flex: 1; + } + + button { + align-self: center; + } +} + +.btn { + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); + padding: 0.4em 1em; +} + +.back-arrow { + stroke: rgba(var(--text-color), 1); + stroke-width: 6; + fill: none; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.card { + border-radius: 0.6rem; + padding: 1.5em; + background: rgba(var(--foreground-color), 1); +} + +.solid-background { + background: rgba(var(--foreground-color), 1) !important; +} + +#confirmation, +#prompt { + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 1.5rem; + } + + .flex { + sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; + } + } +} + +.refresh { + margin-top: 0.6em; + margin-bottom: 1em; +} + +sm-popup{ + .illustration{ + position: relative; + height: 4rem; + width: 4rem; + padding: 1rem; + stroke: var(--accent-color); + margin-bottom: 1rem; + border-radius: 5rem; + background: rgba(var(--text-color), 0.06); + } + sm-input:not(:last-of-type) { + margin-bottom: 1rem; + } + p{ + margin-block-end: 1rem; + } + .action{ + h4{ + padding: 0.5rem 1rem; + font-weight: 500; + } + } + .message{ + margin-bottom: 0.2rem; + } + .message + .copy-row{ + margin-bottom: 1.5rem; + } + h5:not(.tag){ + font-family: 'Roboto', sans-serif; + margin-bottom: 0.4rem; + margin-top: 1rem; + font-weight: 500; + } +} + +#reader{ + overflow: hidden; +} +.my-qr-code{ + background: #fff; + border-radius: 0.5rem; + padding: 1rem; + max-width: max-content; +} +#qr_code_popup{ + &::part(popup){ + height: 90vh; + } + &::part(popup-body){ + padding: 0; + } + .popup-header{ + padding-bottom: 1.5rem; + } + sm-tab-header{ + margin: 0 auto; + transform: translateX(-1rem); + } + sm-panel{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + video{ + width: 100% !important; + object-fit: cover; + } + p{ + margin-top: 1.5rem; + opacity: 0.8; + text-align: center; + max-width: 30ch; + } +} +sm-input[type="number"]{ + font-size: 1.2rem; +} + +.popup-header{ + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; + .icon{ + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; + } + button{ + width: auto; + margin-left: auto; + } +} + +details, summary{ + margin-bottom: 1rem; +} +summary{ + cursor: pointer; +} +details{ + h5{ + line-height: 0.6; + margin-bottom: 0; + margin-top: 1.2rem !important; + } + p{ + font-size: 0.9rem; + line-height: 1.4; + } +} + +#sign_in_popup { + &::part(background){ + background: rgba(var(--foreground-color), 1); + } + h3 { + margin-top: 2rem; + } + + h4 { + font-weight: 500; + margin-bottom: 3rem; + } + + button { + margin: 1rem 0; + } + + p { + margin-top: 1rem; + margin-bottom: 0 !important; + } +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#main_header { + align-items: center; + padding: clamp(1rem, 2vw, 2rem) 1rem; + justify-content: space-between; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke-linecap: round; + stroke-linejoin: round; +} + +#navbar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + z-index: 3; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 -0.5rem 1rem #00000010; + border-radius: 1rem 1rem 0 0; + .navbar-item { + position: relative; + text-align: center; + cursor: pointer; + padding: 0.3rem; + padding-top: 0.8rem; + border-radius: 0.4em; + opacity: 0.6; + color: rgba(var(--text-color), 1); + font-size: 0.8em; + text-transform: capitalize; + width: 100%; + font-weight: 600; + h5 { + margin-top: 0.4em; + } + .icon{ + stroke: rgba(var(--text-color), 1); + } + } + .active{ + opacity: 1; + } +} + +.banking { + stroke-width: 4; +} + +#home_page { + padding: 0 0 4rem 0; + .left { + width: auto; + border-radius: 0.6rem; + h3, h4, p { + padding: 0 1.5rem; + } + h3{ + font-size: 2rem; + margin-bottom: 1rem; + } + } +} + +.user-panel { + position: relative; + padding: 1.5rem; + padding-top: 1rem; + align-self: flex-start; + .icon{ + stroke: rgba(var(--foreground-color), 1); + } + .action{ + width: auto; + justify-content: flex-end; + h4{ + border-radius: 2rem; + background-color: rgba(var(--text-color), 0.1); + color: rgba(var(--text-color), 1); + width: auto ; + } + .loader{ + align-self: flex-end; + } + .clip{ + clip-path: circle(0 at 100% 0) !important; + } + } +} +#deposit{ + padding-top: 1.5rem; + .flex{ + sm-button{ + margin-bottom: 1.5rem; + } + } + .user-panel{ + padding: 0 1rem; + } + .display-balance { + grid-template-areas: 'rupee rupee' 'flo flo'; + } +} +.display-balance { + grid-template-columns: 1fr 1fr; + grid-template-areas: 'rupee .' 'flo flo'; + gap: 0.8rem; + margin-top: 1rem; + .icon { + height: 1.4rem; + width: 1.4rem; + padding: 0.3rem; + stroke-width: 10; + cursor: pointer; + } +} +.balance{ + height: 10rem; + position: relative; + display: flex; + flex-direction: column; + border-radius: 1rem; + padding: 1rem; + justify-content: flex-end; + h4{ + font-size: 2rem; + font-family: 'Roboto', sans-serif; + font-weight: 500; + text-shadow: 1px 0.1rem 0.2rem #00000040; + word-break: break-all; + flex: 1; + } + h5{ + opacity: 0.8; + margin-bottom: 0.2rem; + } + .tooltip{ + border-radius: 1rem; + color: rgba(var(--text-color), 1); + margin-left: auto; + } +} +.rupee-balance-card{ + grid-area: rupee; + background: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Crect x='312' y='323' width='240' height='140' rx='18' transform='rotate(30 312 323)' fill='%231C783B'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Crect x='431.283' y='302' width='240' height='140' rx='18' transform='rotate(50.0235 431.283 302)' fill='%232DBD5E'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='225' y='320' width='301.846' height='265.244' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='307' y='299' width='285.477' height='297.86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-5' dy='9'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") bottom right no-repeat, linear-gradient(200deg, rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.2)); + background-size: 9rem, cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 0.1) inset; + } +} +.in-process-balance{ + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%231b1464;%7D.b%7Bfill:%2309083f;%7D.c%7Bfill:%2329abe2;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ebg-art1%3C/title%3E%3Cpolygon class='a' points='0 957.24 232 957.24 357 828 434 899 485 867 594 959 843 957 889 925 938 953 1301 953 1447 807 1555 915 1590 880 1623 913 1673 856 1744 957 1920 957.24 1920 1080 0 1080 0 957.24'/%3E%3Cpolygon class='b' points='495 959 594 959 485 867 434 899 495 959'/%3E%3Cpolygon class='c' points='232 957 357 828 247 957 232 957'/%3E%3Cpolygon class='c' points='1301 953 1447 807 1318.32 953 1301 953'/%3E%3C/svg%3E") left bottom, linear-gradient(135deg, #fd946a, #ff4857); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem #ff4857 inset; + } +} +.flo-balance-card{ + grid-area: flo; + color: rgba(var(--foreground-color), 1); + background: url("data:image/svg+xml,%3Csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cg filter='url(%23filter0_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='437.5' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d)'%3E%3Ccircle cx='1814.5' cy='977.5' r='243.5' fill='%231B0980'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='1344' y='515' width='913' height='913' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_d' x='1538' y='709' width='525' height='525' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-14' dy='-6'/%3E%3CfeGaussianBlur stdDeviation='9.5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3CclipPath id='clip0'%3E%3Crect width='1920' height='1080' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center no-repeat, linear-gradient(270deg, #2f69e6, #1b0980); + background-size: cover; + .tooltip{ + box-shadow: 0 0 0 0.4rem#1b0980 inset; + } +} + +.tooltip{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + cursor: help; + display: flex; + flex-direction: column; + background: rgba(var(--foreground-color), 1); + z-index: 1; + transition: clip-path 0.4s ease-out; + clip-path: circle(0.8rem at calc(100% - 1.5rem) 1.4rem); + scrollbar-width: thin; + .tt-icon{ + display: inline-flex; + width: 3rem; + height: 3rem; + align-items: center; + justify-content: center; + margin-left: auto; + font-weight: 600; + } + .tooltip-text{ + padding: 1rem; + padding-top: 0; + line-height: 1.4; + font-size: 0.9rem; + font-weight: normal; + overflow-y: auto; + max-height: calc(100% - 3rem); + max-width: 30ch; + } + &:hover{ + clip-path: circle(100%); + } +} + +.user-type { + font-weight: 500; +} + +.options-tab { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +.option { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-radius: 0.4rem; + width: 5rem; + text-transform: capitalize; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + cursor: pointer; + .icon { + height: 3rem; + width: 3rem; + background: rgba(var(--text-color), 0.06); + border-radius: 2rem; + padding: 0.8rem; + margin-bottom: 0.6rem; + } + + h4 { + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + } + + &:active { + transform: scale(0.95); + } +} + +.request-icon{ + transform: rotate(180deg); +} + +.notification-dot::after { + content: ''; + position: absolute; + z-index: 1; + top: 0; + right: 0; + height: 0.6em; + width: 0.6em; + background-color: #E53935; + border-radius: 0.4em; + transition: transform 0.3s; +} + +.shrink.notification-dot::after { + transform: scale(0); +} + +#deposit, +#withdraw { + .container-header { + background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent); + } +} + +sm-tab-header { + position: sticky; + top: 0; + display: inline-flex; + background-color: var(--dark-shade); + z-index: 2; + padding: 0.3rem; + margin: 1rem 0; + border-radius: 3rem; +} +sm-tab{ + text-transform: capitalize; + &::part(tab){ + padding: 0.4rem 1.2rem; + } +} +sm-panel{ + width: 100%; +} + +.request { + display: grid; + gap: 1rem; + padding: 1.5em; + border-radius: 0.6rem; + background: rgba(var(--text-color), 0.06); + h4{ + font-weight: 400; + font-size: 0.9rem; + } + h5 { + text-transform: capitalize; + font-weight: 400; + opacity: 0.8; + margin-bottom: 0.2rem; + } + .action { + align-self: flex-end; + } + .amount { + font-family: 'Roboto', sans-serif; + } + button { + width: auto; + } + .flex { + align-items: center; + justify-content: flex-end; + justify-self: flex-end; + button { + margin: 0; + } + } + &.placeholder{ + pointer-events: none; + h4, h5{ + padding: 0.5rem 0; + background: rgba(var(--text-color), 0.06); + } + .btns{ + display: grid; + gap: 0.5rem; + grid-auto-flow: column; + justify-content: flex-end; + h4{ + width: 6rem; + } + } + h5{ + width: 50%; + } + .time{ + width: 3rem; + } + animation: pulse infinite 0.6s alternate; + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + } +} + +.deposited { + color: #00C853; +} + +.decline-request { + margin-right: 0.5rem !important; +} + +.withdrawn { + color: #d43125; +} + +.container { + display: grid; + gap: 1em; + width: 100%; +} + +.page { + padding: 1rem 1.5rem; + padding-bottom: 5rem; + .container-header { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: '. .' + 'search search'; + gap: 1rem; + top: 0; + background: rgba(var(--foreground-color), 1); + will-change: auto; + z-index: 2; + + .search { + grid-area: search; + + input { + padding: 1em; + border: none; + width: 100%; + background: var(--dark-shade); + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text-color), 1); + border-radius: 0.2em; + + &:focus { + outline: none; + background: rgba(var(--text-color-light), 0.2); + } + } + } + } +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; + h4 { + margin-bottom: 0; + font-weight: 400; + } + + .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; + } + + .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.time { + font-weight: 500; +} + +#report_popup { + width: 32rem; +} + +#profile_page { + display: flex; + flex-direction: column; + + button { + align-self: flex-start; + } +} + +.complaint { + display: grid; + gap: 1.5rem 0; + + .complaint-actions { + align-items: center; + margin: 1.5rem 0 0 0; + } + + .processed { + color: #007732; + } + + .unprocessed { + color: #d43125; + } + + .processed, + .unprocessed { + margin-bottom: 1.5rem; + } + + button { + .icon { + padding: 0.2rem; + margin-right: 0.5rem; + stroke: var(--accent-color); + stroke-width: 8; + } + } +} + +.complaints-container { + padding-top: 1.5rem; + display: grid; + align-items: flex-start; + gap: 1.5rem; +} + +#helpline_page { + sm-select { + margin-bottom: 1.5rem; + } +} + +.complaint-placeholder { + animation: pulse infinite 0.6s alternate; + + h4, + h5 { + border-radius: 0.2rem; + } + + h5 { + background: rgba(var(--text-color), 0.1); + padding: 0.5rem 0.6rem; + } + + h4 { + background: rgba(var(--text-color), 0.2); + padding: 0.8rem 0.8rem; + } + + .demo-btn { + padding: 0.8rem 3rem; + } +} + +@keyframes pulse { + from { + opacity: 0.4; + } + + to { + opacity: 1; + } +} + + +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; + sm-button { + margin-left: 0; + margin-top: 1rem; + } + + svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; + } + + h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; + } +} +#upi_txId_section{ + .copy-row{ + margin-bottom: 1.5rem; + } +} + +@keyframes popup{ + 0%{ + stroke-dashoffset: 50; + transform: translateY(4rem) scale(0.2, 0.6); + } + 40%{ + transform: translateY(0) scale(0.2); + } + 41%{ + transform: translateY(0) scale(0.2); + } + 50%{ + stroke-dashoffset: 50; + transform: translateY(0) scale(1); + } + 100%{ + stroke-dashoffset: 0; + } +} +#transaction_result{ + z-index: 12; + #transaction_heading{ + margin-bottom: 1rem; + } + .copy-row{ + grid-template-areas: 'label label' '. .'; + margin-top: 1rem; + gap: 0 1rem; + h4{ + font-weight: 500; + } + } + h5{ + grid-area: label; + color: rgba(var(--text-color), 0.7); + } + h4, h5, p{ + text-align: center; + } + & > h4{ + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 0.5rem; + } + sm-button{ + align-self: center; + width: auto; + } +} +#success_svg, #failure_svg{ + height: 5rem; + width: 5rem; + stroke-width: 4; + align-self: center; + stroke: none; + stroke-dasharray: 50; + fill: rgba(var(--text-color), 0.1); + animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +#success_svg{ + polyline{ + fill: none; + stroke: #00C853 ; + } +} +#failure_svg{ + line{ + stroke: #EF5350; + } +} + +.rupee-symbol{ + height: 1rem; + width: 1rem; + fill: rgba(var(--text-color), 0.5); +} + +#deposit_rupee{ + .copy-row{ + margin-bottom: 1rem; + } +} +.activity-container{ + display: grid; + gap: 1rem; +} +.activity{ + display: grid; + background: rgba(var(--text-color), 0.06); + border-radius: 0.6rem; + padding: 1rem 1.2rem; + gap: 0 1rem; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'icon type amount' 'icon receiver time'; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + &:active{ + transform: scale(0.95); + } + .icon{ + grid-area: icon; + height: 3rem; + width: 3rem; + padding: 0.8rem; + background: rgba(var(--text-color), 0.06); + background-size: cover; + border-radius: 2rem; + } + .activity-type{ + grid-area: type; + text-transform: capitalize; + font-weight: 400; + font-size: 0.8rem; + } + .activity-receiver{ + grid-area: receiver; + font-weight: 500; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .activity-amount{ + text-align: right; + grid-area: amount; + font-family: 'Roboto', sans-serif; + } + .activity-time{ + text-align: right; + grid-area: time; + color: rgba(var(--text-color), 0.7); + font-weight: 500; + } + .pending{ + display: inline-flex; + padding: 0.3rem 0.6rem; + background: rgba(var(--text-color), 0.06); + border-radius: 1rem; + width: max-content; + margin-left: 0.4rem; + } + &.placeholder{ + pointer-events: none; + animation: pulse infinite 0.6s alternate; + .activity-type, + .activity-receiver{ + background: rgba(var(--text-color), 0.06); + padding: 0.5rem 0; + } + .activity-type{ + width: 50%; + } + &:nth-of-type(2){ + animation-delay: 0.1s; + } + &:nth-of-type(3){ + animation-delay: 0.2s; + } + &:nth-of-type(4){ + animation-delay: 0.3s; + } + &:nth-of-type(5){ + animation-delay: 0.4s; + } + &:nth-of-type(6){ + animation-delay: 0.5s; + } + &:nth-of-type(7){ + animation-delay: 0.6s; + } + &:nth-of-type(8){ + animation-delay: 0.7s; + } + } +} +.back-arrow{ + stroke-width: 10; + margin-right: 0.5rem; + padding: 0.2rem; +} +.select{ + max-width: 50ch; + position: relative; + display: flex; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + align-items: center; + &:first-of-type:not(:last-of-type){ + border-radius: 0.3rem 0.3rem 0 0; + } + & + &{ + margin-top: 0; + border-radius: 0 0 0.3rem 0.3rem; + border-top: solid 1px rgba(var(--text-color), 0.16); + } + label{ + display: flex; + align-items: center; + cursor: pointer; + flex: 1; + padding: 0.8rem 1rem; + } + input[type="radio"]{ + display: none; + } + input:checked ~ .radio .outer-ring{ + stroke: var(--accent-color); + } + input:checked ~ .radio .inner-disc{ + transform: none; + } + .radio{ + width: 1.2rem; + height: 1.2rem; + fill: none; + overflow: visible; + margin-right: 0.6rem; + .outer-ring{ + stroke-width: 8; + stroke: rgba(var(--text-color), 0.5); + } + .inner-disc{ + transform-origin: center; + fill: var(--accent-color); + transform: scale(0); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + } + .remove{ + width: 3rem; + height: 2rem; + padding: 0.7rem; + cursor: pointer; + stroke-width: 10; + } + .tag{ + grid-area: tag; + opacity: 0.6; + font-weight: 500; + border: solid 1px rgba(var(--text-color), 0.4); + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + margin-right: 0.5rem; + } + h4{ + font-weight: 400; + } +} +.add-upi{ + margin-top: 0.4rem; + justify-self: flex-start; + width: max-content; +} + +#transaction_page{ + header{ + padding: 0.5rem 0; + .back-arrow{ + grid-area: back; + } + h4{ + text-transform: capitalize; + } + } + h5{ + font-weight: 400; + font-family: 'Roboto', sans-serif; + opacity: 0.8; + margin-bottom: 0.4rem; + text-transform: capitalize; + } + p:last-of-type{ + margin: 2rem 0 1rem 0; + font-size: 0.9rem; + opacity: 0.8; + } + #transaction_details{ + position: relative; + margin: 1.5rem 0; + padding: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + max-width: 50ch; + border-radius: 0.5rem; + .icon{ + height: 4rem; + width: 4rem; + padding: 1.2rem; + border-radius: 4rem; + margin-bottom: 2rem; + background: rgba(var(--text-color), 0.06); + } + .success{ + background: #00C853; + stroke-width: 8; + stroke: var(--background-color); + } + .flex{ + margin-bottom: 1.5rem; + align-items: baseline; + } + strong{ + font-weight: 500; + &:not(:last-of-type) + sm-button{ + margin-bottom: 1.5rem; + margin-top: -0.4rem; + } + } + strong:not(:last-of-type){ + margin-bottom: 1rem; + } + sm-button{ + width: max-content; + margin-top: 0.6rem; + } + } + .transaction-amount{ + font-size: 2rem; + font-weight: 400; + } + #transaction_time{ + right: 0; + position: absolute; + margin: 1.5rem; + } +} +#people_container{ + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 1.5rem; + gap: 2rem 0.2rem; +} +#add_person_btn{ + cursor: pointer; + display: flex; + flex-direction: column; + width: 5rem; + text-align: center; + transition: transform 0.3s; + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + &:active{ + transform: scale(0.95); + } + .icon{ + height: 3rem; + width: 3rem; + border-radius: 2rem; + stroke-width: 10; + padding: 1rem; + background: rgba(var(--text-color), 0.06); + align-self: center; + margin-bottom: 0.6rem; + } +} +.person{ + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + transition: transform 0.3s; + width: 5rem; + -webkit-tap-highlight-color: transparent; + &:active{ + transform: scale(0.95); + } +} +.person-initials, #person_initials{ + display: flex; + justify-content: center; + height: 3rem; + width: 3rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-bottom: 0.6rem !important; + text-transform: uppercase; + color: rgba(var(--foreground-color), 1); +} +.person-name{ + font-size: 0.85rem; + opacity: 0.8; + font-weight: 500; + text-transform: capitalize; + text-align: center; +} + +#person_popup{ + & > .flex:first-of-type{ + margin: 1rem 0; + .flex{ + margin-top: 0.5rem; + .icon{ + height: 2.6rem; + width: 2.6rem; + padding: 0.8rem; + cursor: pointer; + stroke-width: 8; + &:hover{ + background: rgba(var(--text-color), 0.06); + } + } + } + } + h3{ + text-transform: capitalize; + } + h5{ + font-weight: 500; + opacity: 0.8; + } + .copy-row{ + margin-bottom: 1.5rem; + } + #show_person_name{ + padding: 0.5rem 1rem; + border-radius: 0.4rem; + max-width: 30ch; + &:focus{ + outline: none; + background: rgba(var(--text-color), 0.1); + } + } +} + +#activity_page, +#request_page, +#settings_page{ + .empty-state{ + justify-content: left; + } +} +#settings_page{ + h4{ + margin-top: 2rem; + margin-bottom: 0.6rem; + } + .copy-row h4{ + margin: 0; + } + p{ + color: rgba(var(--text-color), 0.7); + } + sm-button{ + margin-top: 0.8rem; + } + .flex{ + max-width: 60ch; + } + .my-qr-code{ + margin-bottom: 1.5rem; + height: 14rem; + img{ + height: 100%; + } + } +} +@media only screen and (max-width: 640px) { + #home_page, #deposit{ + display: grid; + gap: 1.5rem; + grid-template-areas: '.''left'; + grid-template-columns: minmax(0, 1fr); + .left { + grid-area: left; + } + } + sm-select { + width: 100%; + } + .hide-on-mobile{ + display: none !important; + } + #transaction_page{ + padding-top: 0; + header{ + padding: 1.5rem 0; + } + } + #deposit{ + .user-panel{ + padding: 0; + } + } + video{ + height: 100vw; + } +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop{ + display: none !important; + } + body { + padding: 0 2rem; + margin-left: 4rem; + } + sm-popup{ + background: rgba(var(--foreground-color), 1); + } + sm-popup::part(popup){ + width: 24rem; + } + + #confirmation { + width: 24rem; + } + + #navbar { + justify-content: flex-start; + flex-direction: column; + align-items: stretch; + left: 0; + bottom: 0; + top: 0; + right: auto; + border-top: none; + border-radius: 0; + background: rgba(var(--text-color), 0.06); + box-shadow: -0.5rem 0 0.5rem #00000008 inset; + .navbar-item { + display: flex; + width: auto; + padding: 0.8rem 1.2rem; + .icon { + height: 1.2rem; + width: 1.2rem; + } + h5{ + display: none; + } + &:hover { + opacity: 1; + } + } + .logo{ + margin: 1.5rem 1rem; + h4{ + display: none; + } + .main-logo{ + height: 1.2rem; + width: 1.2rem; + } + } + .active{ + background: rgba(var(--text-color), 0.06); + } + } + + .page { + padding-bottom: 2rem; + } + + #sign_in_popup { + width: 24rem; + } + #home_page { + padding-top: 0.5rem; + .left { + margin-top: 1rem; + } + } + .options-tab, #people_container{ + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); + gap: 2rem 0.8rem; + } + .display-balance{ + .balance{ + height: 9rem; + } + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + .time{ + grid-area: time; + margin-bottom: 0 !important; + } + button{ + width: max-content; + margin-left: auto; + } + .breakable{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + #deposit{ + .user-panel{ + padding-right: 0; + } + } + #settings_page{ + .copy-row{ + display: inline-grid; + } + } +} + +@media only screen and (min-width: 800px) { + body { + margin-left: 11rem; + } + .complaint { + gap: 0 1.5rem; + grid-template-columns: 1fr 1fr; + grid-template-areas: '. . ''header header'; + + .complaint-actions { + grid-area: header; + } + + .left { + border-right: 1px solid rgba(var(--text-color), 0.2); + padding-right: 1.5rem; + } + + .right { + display: flex; + justify-content: center; + flex-direction: column; + } + } + #navbar{ + .navbar-item { + h5{ + font-size: 0.9rem; + margin: 0; + display: block; + } + } + .icon{ + margin-right: 0.8rem; + } + .logo{ + h4{ + display: block; + font-size: 1rem; + } + } + } + .user-panel{ + position: sticky; + top: 1.5rem; + padding-top: 1.5rem; + } + #home_page, #deposit { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 22rem; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 18rem; + .user-panel{ + padding-right: 0; + } + } + .activity{ + width: 60ch; + } + .request{ + grid-template-columns: minmax(0, auto) auto; + grid-template-areas: 'time time' ' . .' ' . .'; + } +} + +@media only screen and (min-width: 1280px) { + .request{ + grid-template-areas: 'time time time' '. . .'; + } + #deposit{ + grid-template-columns: minmax(0, 1fr) 20rem; + .request{ + grid-template-areas: 'time time time time' '. . . .'; + } + } +} + +@media only screen and (max-width: 320px) { + body { + font-size: 14px; + } +} + +@media (any-hover: hover) { + .navbar-item:hover{ + background: rgba(var(--text-color), 0.06); + } + .remove{ + opacity: 0.6; + } + .remove:hover{ + opacity: 1; + } +} diff --git a/index.html b/index.html index fbdc2a8..601251c 100644 --- a/index.html +++ b/index.html @@ -1,13929 +1,13944 @@ - - - - - - - RanchiMall Pay - - - - - - - -

-
- Cancel - OK -
- - -

Some input required

- -
- - -
- - - -
- - Loader - - -

Loading RanchiMall Pay

- Sign Out -
- - -
-

Sign In

-
-

Welcome to RanchiMall Pay.
Please enter your FLO private key to - continue.

- - - - - -
- - close - - - - - Scan - My QR Code - -
- - -
-

Point your camera towards QR Code.
- *Only works with RanchiMall Pay. -

- - -
-

Show this QR Code to receive money using RanchiMall Pay

- - - - -
- - close - - - -

Send Rupee

- -
-

- Send rupee to any FLO address. -

-
- - How to send rupee? - -
Step 1
-

Enter receiver's FLO address.

-
Step 2
-

Enter the amount you want to send.

-
Step 3
-

Press Send button.

-
- - - rupee-symbol - - - - - - -
- - close - - - -

Deposit

- -
-

- Deposit money through UPI. -

-
- - How to deposit money? - -
Step 1
-

Copy UPI address shown below.

-
Step 2
-

Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)

-
Step 3
-

Copy the UPI transaction ID shown after transaction was successful.

-
Step 4
-

Enter the amount you sent to copied address

-
Step 5
-

Then enter the UPI transaction ID you copied when was transaction completed.

-
Step 6
-

Press Deposit button

-
-

Send money to UPI ID below.

-
-

- - Copy - - - -
- - - rupee-symbol - - - - - - -
- - close - - - -

Withdraw rupee

- -
-

- Withdraw or redeem your rupee to your specified UPI address. -

-
- - How to withdraw rupee? - -
Step 1
-

Enter amount you want to withdraw

-
Step 2
-

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using - 'Add UPI address' button.

-
Step 3
-

Press Withdraw button

-
- - - rupee-symbol - - - - -
Withdraw To
-
- + Add UPI - address - - -
- - close - - - -

Request rupee

- -
-

- Request rupee from other's using FLO address. -

-
- - How to request rupee? - -
Step 1
-

Enter amount you want to request

-
Step 2
-

Enter the FLO address of person you want to request rupee from.

-
Step 3
-

Press Request button

-
- - - rupee-symbol - - - - - - -
- - close - - - -

Pay through cashier

- -
-
- - What is this? - -

- Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be - sent as Rupee. -

-
-
- - How to pay through cashier? - -
Step 1
-

Copy UPI address shown below.

-
Step 2
-

Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)

-
Step 3
-

Enter the amount you sent to copied address

-
Step 4
-

Then enter the FLO address of person you want send rupee to.

-
Step 5
-

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI - address, add one using 'Add UPI address' button.

-
Step 6
-

Press Pay button

-
-

Send money to UPI ID below.

-
-

- - Copy - - - -
- - - rupee-symbol - - - - -
Send from
-
- + Add UPI - address - - -
- - close - - - -
-
- - success - - - -
-
- - failure - - - - -
-

-

-
-
Transaction ID
-

- - Copy - - - -
- Done - - - -
- - close - - - -

Add UPI address

- -
- - - - - - -
- - close - - - -

Add a person

- -
- - - - - - -
- - close - - - -
-
-

-

-
- - - - - remove - - - - -
-
-
FLO ID
-
-

- - Copy - - - -
-
-
- - - -

Send rupee

-
-
- - - -

Request rupee

-
-
- - - - -
- - close - - - -

Report

- -
- - - -
- -
- -
-
-
-

Rupee actions

-
-
- - scanner - - - - - - -

Scan QR

-
-
- - - -

Send

-
-
- - deposit - - - - - - -

deposit

-
-
- - withdraw - - - - - - - -

Withdraw

-
-
- - - -

Request

-
-
- - - - -

pay through cashier

- -
-
-
-

People

-
-
-
-

S

-

Sairaj Mote

-
-
-
-
-
-

My Balances

- -
-
-
-
-
?
-

Your wallet balance

-
-
Rupee
-

0

-
-
-
-
?
-

Money that is in-process after deposit.

-
-
In-process
-

0

-
-
-
-
?
-

Your FLO balance. This is required for every transaction.

-
-
FLO
-

0

-
-
-
-
-
-
-

Requests

- - Deposits - Withdrawals - Pay Through Cashier - - - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No deposit requests.

-
- - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No withdraw requests.

-
- - -
- Load pending -
-
-
- - - - - Empty icon - - - - - - - - - -

No pay requests.

-
- - -
-
-
-

My Balances

- Check Balance -
-
-
-
-
?
-

Your wallet balance

-
-
Rupee
-

0

-
-
-
-
?
-

Your FLO balance. This is required for every transaction.

-
-
FLO
-

0

-
-
-
-
-
-

Payment Requests

- - Pending - Paid - Declined - - - -
-

You don't have any pending requests.

- - - -

No paid requests.

- - -
-

No declined requests.

- - -
-
-

Activity

- - Sent - Received - Deposits - Withdrawals - Paid through cashier - System Notifications - - - -
-

You haven't sent any rupee yet.

- - -
-

You haven't sent any rupee yet.

- - -
-

You haven't deposited rupee yet.

- - -
-

You haven't withdrawn rupee yet.

- - -
-

You haven't paid through cashier yet.

- - -
-

No messages from cashier.

- - -
-
-
-

Complaints

-

-
Select Cashier
- - - Deposit - Withdraw - Pay through cashier - - - -
-

No deposit complaints.

- - -
-

No withdraw complaints.

- - -
-

No pay through cashier complaints.

- - -
-
-

Settings

-
-

My FLO address

-
-

- - Copy - - - -
-
-

Theme

-
-

Toggle dark theme

- -
-
-

My UPIs

-
-

Add UPI address for easier access during various transactions.

- + Add UPI address - -
-

Sign Out

-

Signing out will erase all the data stored in local storage and Indexed DB. This will remove - saved private key, UPI addresses and contacts.

- Sign out -
-
-
- - Go to activity page - - -

-
-
-

- Report -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + RanchiMall Pay + + + + + + + +

+
+ Cancel + OK +
+ + +

Some input required

+ +
+ + +
+ + + +
+ + Loader + + +

Loading RanchiMall Pay

+ Sign Out +
+ + +
+

Sign In

+
+

Welcome to RanchiMall Pay.
Please enter your FLO private key to + continue.

+ + + + + +
+ + close + + + + + Scan + My QR Code + +
+ + +
+

Point your camera towards QR Code.
+ *Only works with RanchiMall Pay. +

+ + +
+

Show this QR Code to receive money using RanchiMall Pay

+ + + + +
+ + close + + + +

Send Rupee

+ +
+

+ Send rupee to any FLO address. +

+
+ + How to send rupee? + +
Step 1
+

Enter receiver's FLO address.

+
Step 2
+

Enter the amount you want to send.

+
Step 3
+

Press Send button.

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Deposit

+ +
+

+ Deposit money through UPI. +

+
+ + How to deposit money? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Copy the UPI transaction ID shown after transaction was successful.

+
Step 4
+

Enter the amount you sent to copied address

+
Step 5
+

Then enter the UPI transaction ID you copied when was transaction completed.

+
Step 6
+

Press Deposit button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Withdraw rupee

+ +
+

+ Withdraw or redeem your rupee to your specified UPI address. +

+
+ + How to withdraw rupee? + +
Step 1
+

Enter amount you want to withdraw

+
Step 2
+

Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using + 'Add UPI address' button.

+
Step 3
+

Press Withdraw button

+
+ + + rupee-symbol + + + + +
Withdraw To
+
+ + Add UPI + address + + +
+ + close + + + +

Request rupee

+ +
+

+ Request rupee from other's using FLO address. +

+
+ + How to request rupee? + +
Step 1
+

Enter amount you want to request

+
Step 2
+

Enter the FLO address of person you want to request rupee from.

+
Step 3
+

Press Request button

+
+ + + rupee-symbol + + + + + + +
+ + close + + + +

Pay through cashier

+ +
+
+ + What is this? + +

+ Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be + sent as Rupee. +

+
+
+ + How to pay through cashier? + +
Step 1
+

Copy UPI address shown below.

+
Step 2
+

Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)

+
Step 3
+

Enter the amount you sent to copied address

+
Step 4
+

Then enter the FLO address of person you want send rupee to.

+
Step 5
+

Select UPI address that you used when sending money copied UPI address. If you haven't added UPI + address, add one using 'Add UPI address' button.

+
Step 6
+

Press Pay button

+
+

Send money to UPI ID below.

+
+

+ + Copy + + + +
+ + + rupee-symbol + + + + +
Send from
+
+ + Add UPI + address + + +
+ + close + + + +
+
+ + success + + + +
+
+ + failure + + + + +
+

+

+
+
Transaction ID
+

+ + Copy + + + +
+ Done + + + +
+ + close + + + +

Add UPI address

+ +
+ + + + + + +
+ + close + + + +

Add a person

+ +
+ + + + + + +
+ + close + + + +
+
+

+

+
+ + + + + remove + + + + +
+
+
FLO ID
+
+

+ + Copy + + + +
+
+
+ + + +

Send rupee

+
+
+ + + +

Request rupee

+
+
+ + + + +
+ + close + + + +

Report

+ +
+ + + +
+ +
+ +
+
+
+

Rupee actions

+
+
+ + scanner + + + + + + +

Scan QR

+
+
+ + + +

Send

+
+
+ + deposit + + + + + + +

deposit

+
+
+ + withdraw + + + + + + + +

Withdraw

+
+
+ + + +

Request

+
+
+ + + + +

pay through cashier

+ +
+
+
+

People

+
+
+
+

S

+

Sairaj Mote

+
+
+
+
+
+

My Balances

+ +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Money that is in-process after deposit.

+
+
In-process
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+
+

Requests

+ + Deposits + Withdrawals + Pay Through Cashier + + + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No deposit requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No withdraw requests.

+
+ + +
+ Load pending +
+
+
+ + + + + Empty icon + + + + + + + + + +

No pay requests.

+
+ + +
+
+
+

My Balances

+ Check Balance +
+
+
+
+
?
+

Your wallet balance

+
+
Rupee
+

0

+
+
+
+
?
+

Your FLO balance. This is required for every transaction.

+
+
FLO
+

0

+
+
+
+
+
+

Payment Requests

+ + Pending + Paid + Declined + + + +
+

You don't have any pending requests.

+ + + +

No paid requests.

+ + +
+

No declined requests.

+ + +
+
+

Activity

+ + Sent + Received + Deposits + Withdrawals + Paid through cashier + System Notifications + + + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't sent any rupee yet.

+ + +
+

You haven't deposited rupee yet.

+ + +
+

You haven't withdrawn rupee yet.

+ + +
+

You haven't paid through cashier yet.

+ + +
+

No messages from cashier.

+ + +
+
+
+

Complaints

+

+
Select Cashier
+ + + Deposit + Withdraw + Pay through cashier + + + +
+

No deposit complaints.

+ + +
+

No withdraw complaints.

+ + +
+

No pay through cashier complaints.

+ + +
+
+

Settings

+
+

My FLO address

+
+

+ + Copy + + + +
+
+

Theme

+
+

Toggle dark theme

+ +
+
+

My UPIs

+
+

Add UPI address for easier access during various transactions.

+ + Add UPI address + +
+

Sign Out

+

Signing out will erase all the data stored in local storage and Indexed DB. This will remove + saved private key, UPI addresses and contacts.

+ Sign out +
+
+
+ + Go to activity page + + +

+
+
+

+ Report +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From b6bb5cd856327a3507d437dc6e9977bb849722e8 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 9 Oct 2020 14:34:26 +0530 Subject: [PATCH 04/74] 0.0.72 --- index.html | 70 +++++++++++++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 601251c..b8bd75e 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - +