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