diff --git a/css/favicon.svg b/css/favicon.svg
new file mode 100644
index 0000000..1cc2b89
--- /dev/null
+++ b/css/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/focus.svg b/css/focus.svg
new file mode 100644
index 0000000..b2426d0
--- /dev/null
+++ b/css/focus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 5941ad4..0f86350 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,1825 +1,919 @@
* {
- box-sizing: border-box;
padding: 0;
margin: 0;
+ box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
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%;
+ height: 100%;
+}
+
+body {
+ --accent-color: #256eff;
+ --text-color: 20, 20, 20;
+ --background-color: 240, 240, 240;
+ --foreground-color: 250, 250, 250;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ scrollbar-width: thin;
+ scrollbar-gutter: stable;
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 {
+ background-color: rgba(var(--background-color), 1);
+ transition: background-color 0.3s;
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;
+body[data-theme=dark] {
+ --accent-color: #86afff;
+ --text-color: 220, 220, 220;
+ --background-color: 10, 10, 10;
+ --foreground-color: 24, 24, 24;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+}
+body[data-theme=dark] sm-popup::part(popup) {
+ background-color: rgba(var(--foreground-color), 1);
}
-.space-between {
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+p:not(:last-of-type),
+strong:not(:last-of-type) {
+ margin-bottom: 1.5rem;
+}
+
+a {
+ text-decoration: none;
+ color: var(--accent-color);
+}
+a:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+}
+button:focus-visible {
+ outline: var(--accent-color) solid medium;
+}
+button:not(:disabled) {
+ cursor: pointer;
+}
+
+.button {
+ background-color: rgba(var(--text-color), 0.06);
+}
+
+.button--primary,
+.button--danger {
+ color: rgba(var(--background-color), 1);
+}
+.button--primary .icon,
+.button--danger .icon {
+ fill: rgba(var(--background-color), 1);
+}
+
+.button--primary {
+ background-color: var(--accent-color);
+}
+
+.button--danger {
+ background-color: var(--danger-color);
+}
+
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 1rem;
+}
+
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
+}
+
+button:disabled {
+ opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details {
+ padding: 1rem 0;
+}
+
+details summary {
+ display: flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
justify-content: space-between;
+ color: var(--accent-color);
}
-.label {
- margin-bottom: 0.4rem;
+details[open] summary {
+ margin-bottom: 1rem;
+}
+details[open] > summary .down-arrow {
+ transform: rotate(180deg);
}
-.light-text {
- opacity: 0.7;
+sm-input,
+sm-textarea {
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+ --background-color: rgba(var(--foreground-color), 1);
+}
+sm-input button .icon,
+sm-textarea button .icon {
+ fill: var(--accent-color);
}
-.hide {
- opacity: 0;
- pointer-events: none;
+sm-button {
+ --padding: 0.6rem 0.8rem;
+}
+sm-button[variant=primary] .icon {
+ fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+ fill: rgba(var(--text-color), 0.6);
+}
+sm-button.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
}
-.hide-completely {
- display: none !important;
+sm-spinner {
+ --size: 1rem;
+ --stroke-width: 0.1rem;
+}
+
+sm-form {
+ --gap: 1rem;
+}
+
+strip-select {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+
+strip-option {
+ font-size: 0.8rem;
+ --border-radius: 0.2rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+ul {
+ list-style: none;
+}
+
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.breakable {
- word-break: break-all;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
}
-.separator {
- padding: 0.1em;
+.full-bleed {
+ grid-column: 1/-1;
}
-.no-transformations {
- transform: none !important;
+.h1 {
+ font-size: 1.5rem;
+}
+
+.h2 {
+ font-size: 1.2rem;
+}
+
+h3 {
+ font-size: 1.2rem;
+ line-height: 1.3;
+}
+
+.h4 {
+ font-size: 0.9rem;
+}
+
+.h5 {
+ font-size: 0.75rem;
+}
+
+.uppercase {
+ text-transform: uppercase;
}
.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 {
+.sticky {
+ position: -webkit-sticky;
position: sticky;
+}
+
+.top-0 {
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 {
+.flex {
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;
+.flex-wrap {
+ flex-wrap: wrap;
}
-.complaints-container {
- padding-top: 1.5rem;
+.flex-1 {
+ flex: 1;
+}
+
+.grid {
display: grid;
- align-items: flex-start;
+}
+
+.flow-column {
+ grid-auto-flow: column;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
gap: 1.5rem;
}
-#helpline_page sm-select {
- margin-bottom: 1.5rem;
+.gap-2 {
+ gap: 2rem;
}
-.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;
+.gap-3 {
+ gap: 3rem;
}
-@keyframes pulse {
- from {
- opacity: 0.4;
- }
- to {
- opacity: 1;
- }
+.text-align-right {
+ text-align: right;
}
-#main_loader {
+
+.align-start {
+ align-content: flex-start;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
text-align: center;
- place-content: center;
- height: 100vh;
- width: 100vw;
- position: fixed;
- left: 0;
}
-#main_loader sm-button {
- margin-left: 0;
+
+.justify-start {
+ justify-content: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+ pointer-events: none;
+}
+
+.button--primary .ripple,
+.button--danger .ripple {
+ background: radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+}
+
+.interact {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.empty-state {
+ display: grid;
+ width: 100%;
+ padding: 1.5rem 0;
+}
+
+.observe-empty-state:empty {
+ display: none;
+}
+
+.observe-empty-state:not(:empty) + .empty-state {
+ display: none;
+}
+
+.bullet-point {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 0.8ch;
+}
+.bullet-point::after {
+ content: "";
+ height: 0.4ch;
+ width: 0.4ch;
+ border-radius: 0.5em;
+ background-color: var(--accent-color);
+}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+
+.margin-right-0-5 {
+ margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+ margin-left: 0.5rem;
+}
+
+.icon-button {
+ padding: 0.6rem;
+ border-radius: 0.8rem;
+ background-color: rgba(var(--text-color), 0.1);
+ height: -webkit-max-content;
+ height: -moz-max-content;
+ height: max-content;
+}
+.icon-button .icon {
+ fill: var(--accent-color);
+}
+
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+}
+#confirmation_popup sm-button,
+#prompt_popup sm-button {
+ margin: 0;
+}
+#confirmation_popup .flex,
+#prompt_popup .flex {
+ padding: 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;
+#confirmation_popup .flex sm-button:first-of-type,
+#prompt_popup .flex sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
}
-#upi_txId_section .copy-row {
+#prompt_message {
margin-bottom: 1.5rem;
}
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem;
+ align-items: center;
+ grid-auto-flow: column;
+}
+
+.popup__header__close {
+ padding: 0.5rem;
+ margin-left: -0.5rem;
+ cursor: pointer;
+}
+
+#main_header {
+ padding: 1rem 1.5rem;
+}
+
+#main_card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(var(--foreground-color), 1);
+ transition: background-color 0.3s;
+}
+
+#pages_container {
+ flex: 1;
+ overflow-y: auto;
+}
+
+#main_navbar {
+ display: flex;
+ background: rgba(var(--text-color), 0.03);
+}
+#main_navbar.hide-away {
+ position: absolute;
+}
+#main_navbar ul {
+ display: flex;
+ height: 100%;
+ width: 100%;
+}
+#main_navbar ul li {
+ width: 100%;
+}
+
+.nav-item {
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.3rem;
+ color: var(--text-color);
+ font-size: 0.7rem;
+ border-radius: 0.3rem;
+}
+.nav-item .icon {
+ transition: transform 0.2s;
+}
+.nav-item__title {
+ margin-top: 0.3rem;
+ transition: opacity 0.2s, transform 0.2s;
+}
+.nav-item--active {
+ color: var(--accent-color);
+}
+.nav-item--active .icon {
+ fill: var(--accent-color);
+ transform: translateY(50%);
+}
+.nav-item--active .nav-item__title {
+ transform: translateY(100%);
+ opacity: 0;
+}
+.nav-item__indicator {
+ position: absolute;
+ bottom: 0;
+ width: 2rem;
+ height: 0.3rem;
+ background: var(--accent-color);
+ border-radius: 1rem 1rem 0 0;
+ z-index: 1;
+}
+
+.password-field label {
+ display: flex;
+}
+.password-field label input:checked ~ .visible {
+ display: none;
+}
+.password-field label input:not(:checked) ~ .invisible {
+ display: none;
+}
+
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.multi-state-button > * {
+ grid-area: 1/1/2/2;
+}
+.multi-state-button button {
+ z-index: 1;
+}
+
+.clip {
+ -webkit-clip-path: circle(0);
+ clip-path: circle(0);
+}
+
+.primary-action {
+ display: flex;
+ padding: 0.8rem 1rem;
+ gap: 0.5rem;
+ white-space: normal;
+ font-size: 0.8rem;
+ border-radius: 0.5rem;
+ background-color: transparent;
+ border: thin solid rgba(var(--text-color), 0.3);
+}
+.primary-action .icon {
+ fill: var(--accent-color);
+}
+.primary-action:not(:last-of-type) {
+ margin-right: 0.5rem;
+}
+
+.page {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ align-content: flex-start;
+ padding: 1.5rem;
+}
+
+#wallet_section {
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.5rem;
+ padding: 1.5rem;
+}
+
+#transactions_list {
+ flex-direction: column;
+ padding-bottom: 4rem;
+}
+
+.transaction {
+ grid-template-columns: auto 1fr auto;
+ gap: 0.5rem 1rem;
+ padding: 0.8rem;
+ align-items: center;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.3rem;
+}
+.transaction:not(:last-of-type) {
+ margin-bottom: 0.5rem;
+}
+.transaction__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ grid-area: 1/1/3/2;
+ width: 2.5rem;
+ height: 2.5rem;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.5rem;
+}
+.transaction__icon .icon {
+ fill: var(--accent-color);
+}
+.transaction__receiver {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: rgba(var(--text-color), 0.8);
+}
+.transaction__time {
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+}
+.transaction__amount {
+ font-size: 1rem;
+ font-weight: 700;
+ grid-area: 1/3/3/4;
+}
+.transaction__amount.sent::before {
+ content: "-";
+}
+.transaction__amount.received::before {
+ content: "+";
+}
+
+.fab {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: 1.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+ z-index: 2;
+}
+
+#scroll_to_top {
+ border-radius: 3rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+#transaction_result {
+ display: grid;
+ gap: 0.5rem;
+ height: max(40vh, 24rem);
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ align-content: center;
+}
+#transaction_result.success .icon--failed {
+ display: none;
+}
+#transaction_result.failed .icon--success {
+ display: none;
+}
+#transaction_result h3 {
+ text-align: center;
+ width: 100%;
+}
+#transaction_result .icon {
+ justify-self: center;
+ height: 4rem;
+ width: 4rem;
+ border-radius: 5rem;
+ margin-bottom: 1rem;
+ -webkit-animation: popup 1s;
+ animation: popup 1s;
+}
+#transaction_result .icon--success {
+ fill: rgba(var(--background-color), 1);
+ padding: 1rem;
+ background-color: #0bbe56;
+}
+#transaction_result .icon--failed {
+ background-color: rgba(var(--text-color), 0.03);
+ fill: var(--danger-color);
+}
+#transaction_result sm-copy {
+ font-size: 0.8rem;
+}
+
+@-webkit-keyframes popup {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
+ }
+ 10% {
+ transform: scale(0.2) translateY(5rem);
+ opacity: 1;
+ }
+ 40% {
+ transform: scale(0.2) translateY(0);
+ }
+ 80% {
+ transform: scale(1.1) translateY(0);
+ }
+ 100% {
+ transform: scale(1) translateY(0);
+ }
+}
+
@keyframes popup {
0% {
- stroke-dashoffset: 50;
- transform: translateY(4rem) scale(0.2, 0.6);
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
}
- 40% {
- transform: translateY(0) scale(0.2);
- }
- 41% {
- transform: translateY(0) scale(0.2);
- }
- 50% {
- stroke-dashoffset: 50;
- transform: translateY(0) scale(1);
- }
- 100% {
- stroke-dashoffset: 0;
- }
-}
-#transaction_result {
- z-index: 12;
-}
-#transaction_result #transaction_heading {
- margin-bottom: 1rem;
-}
-#transaction_result .copy-row {
- grid-template-areas: "label label" ". .";
- margin-top: 1rem;
- gap: 0 1rem;
-}
-#transaction_result .copy-row h4 {
- font-weight: 500;
-}
-#transaction_result h5 {
- grid-area: label;
- color: rgba(var(--text-color), 0.7);
-}
-#transaction_result h4, #transaction_result h5, #transaction_result p {
- text-align: center;
-}
-#transaction_result > h4 {
- font-size: 1.2rem;
- margin-top: 2rem;
- margin-bottom: 0.5rem;
-}
-#transaction_result sm-button {
- align-self: center;
- width: auto;
-}
-
-#success_svg, #failure_svg {
- height: 5rem;
- width: 5rem;
- stroke-width: 4;
- align-self: center;
- stroke: none;
- stroke-dasharray: 50;
- fill: rgba(var(--text-color), 0.1);
- animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-#success_svg polyline {
- fill: none;
- stroke: #00C853;
-}
-
-#failure_svg line {
- stroke: #EF5350;
-}
-
-.rupee-symbol {
- height: 1rem;
- width: 1rem;
- fill: rgba(var(--text-color), 0.5);
-}
-
-#deposit_rupee .copy-row {
- margin-bottom: 1rem;
-}
-
-.activity-container {
- display: grid;
- gap: 1rem;
-}
-
-.activity {
- display: grid;
- background: rgba(var(--text-color), 0.06);
- border-radius: 0.6rem;
- padding: 1rem 1.2rem;
- gap: 0 1rem;
- grid-template-columns: auto 1fr auto;
- grid-template-areas: "icon type amount" "icon receiver time";
- align-items: center;
- cursor: pointer;
- transition: transform 0.3s;
-}
-.activity:active {
- transform: scale(0.95);
-}
-.activity .icon {
- grid-area: icon;
- height: 3rem;
- width: 3rem;
- padding: 0.8rem;
- background: rgba(var(--text-color), 0.06);
- background-size: cover;
- border-radius: 2rem;
-}
-.activity .activity-type {
- grid-area: type;
- text-transform: capitalize;
- font-weight: 400;
- font-size: 0.8rem;
-}
-.activity .activity-receiver {
- grid-area: receiver;
- font-weight: 500;
- font-size: 0.9rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.activity .activity-amount {
- text-align: right;
- grid-area: amount;
- font-family: "Roboto", sans-serif;
-}
-.activity .activity-time {
- text-align: right;
- grid-area: time;
- color: rgba(var(--text-color), 0.7);
- font-weight: 500;
-}
-.activity .pending {
- display: inline-flex;
- padding: 0.3rem 0.6rem;
- background: rgba(var(--text-color), 0.06);
- border-radius: 1rem;
- width: max-content;
- margin-left: 0.4rem;
-}
-.activity.placeholder {
- pointer-events: none;
- animation: pulse infinite 0.6s alternate;
-}
-.activity.placeholder .activity-type,
-.activity.placeholder .activity-receiver {
- background: rgba(var(--text-color), 0.06);
- padding: 0.5rem 0;
-}
-.activity.placeholder .activity-type {
- width: 50%;
-}
-.activity.placeholder:nth-of-type(2) {
- animation-delay: 0.1s;
-}
-.activity.placeholder:nth-of-type(3) {
- animation-delay: 0.2s;
-}
-.activity.placeholder:nth-of-type(4) {
- animation-delay: 0.3s;
-}
-.activity.placeholder:nth-of-type(5) {
- animation-delay: 0.4s;
-}
-.activity.placeholder:nth-of-type(6) {
- animation-delay: 0.5s;
-}
-.activity.placeholder:nth-of-type(7) {
- animation-delay: 0.6s;
-}
-.activity.placeholder:nth-of-type(8) {
- animation-delay: 0.7s;
-}
-
-.back-arrow {
- stroke-width: 10;
- margin-right: 0.5rem;
- padding: 0.2rem;
-}
-
-.select {
- max-width: 50ch;
- position: relative;
- display: flex;
- width: 100%;
- border-radius: 0.3rem;
- background: rgba(var(--text-color), 0.06);
- align-items: center;
-}
-.select:first-of-type:not(:last-of-type) {
- border-radius: 0.3rem 0.3rem 0 0;
-}
-.select + .select {
- margin-top: 0;
- border-radius: 0 0 0.3rem 0.3rem;
- border-top: solid 1px rgba(var(--text-color), 0.16);
-}
-.select label {
- display: flex;
- align-items: center;
- cursor: pointer;
- flex: 1;
- padding: 0.8rem 1rem;
-}
-.select input[type=radio] {
- display: none;
-}
-.select input:checked ~ .radio .outer-ring {
- stroke: var(--accent-color);
-}
-.select input:checked ~ .radio .inner-disc {
- transform: none;
-}
-.select .radio {
- width: 1.2rem;
- height: 1.2rem;
- fill: none;
- overflow: visible;
- margin-right: 0.6rem;
-}
-.select .radio .outer-ring {
- stroke-width: 8;
- stroke: rgba(var(--text-color), 0.5);
-}
-.select .radio .inner-disc {
- transform-origin: center;
- fill: var(--accent-color);
- transform: scale(0);
- transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-.select .remove {
- width: 3rem;
- height: 2rem;
- padding: 0.7rem;
- cursor: pointer;
- stroke-width: 10;
-}
-.select .tag {
- grid-area: tag;
- opacity: 0.6;
- font-weight: 500;
- border: solid 1px rgba(var(--text-color), 0.4);
- padding: 0.2rem 0.4rem;
- border-radius: 0.3rem;
- margin-right: 0.5rem;
-}
-.select h4 {
- font-weight: 400;
-}
-
-.add-upi {
- margin-top: 0.4rem;
- justify-self: flex-start;
- width: max-content;
-}
-
-#transaction_page header {
- padding: 0.5rem 0;
-}
-#transaction_page header .back-arrow {
- grid-area: back;
-}
-#transaction_page header h4 {
- text-transform: capitalize;
-}
-#transaction_page h5 {
- font-weight: 400;
- font-family: "Roboto", sans-serif;
- opacity: 0.8;
- margin-bottom: 0.4rem;
- text-transform: capitalize;
-}
-#transaction_page p:last-of-type {
- margin: 2rem 0 1rem 0;
- font-size: 0.9rem;
- opacity: 0.8;
-}
-#transaction_page #transaction_details {
- position: relative;
- margin: 1.5rem 0;
- padding: 1.5rem;
- background-color: rgba(var(--text-color), 0.06);
- max-width: 50ch;
- border-radius: 0.5rem;
-}
-#transaction_page #transaction_details .icon {
- height: 4rem;
- width: 4rem;
- padding: 1.2rem;
- border-radius: 4rem;
- margin-bottom: 2rem;
- background: rgba(var(--text-color), 0.06);
-}
-#transaction_page #transaction_details .success {
- background: #00C853;
- stroke-width: 8;
- stroke: var(--background-color);
-}
-#transaction_page #transaction_details .flex {
- margin-bottom: 1.5rem;
- align-items: baseline;
-}
-#transaction_page #transaction_details strong {
- font-weight: 500;
-}
-#transaction_page #transaction_details strong:not(:last-of-type) + sm-button {
- margin-bottom: 1.5rem;
- margin-top: -0.4rem;
-}
-#transaction_page #transaction_details strong:not(:last-of-type) {
- margin-bottom: 1rem;
-}
-#transaction_page #transaction_details sm-button {
- width: max-content;
- margin-top: 0.6rem;
-}
-#transaction_page .transaction-amount {
- font-size: 2rem;
- font-weight: 400;
-}
-#transaction_page #transaction_time {
- right: 0;
- position: absolute;
- margin: 1.5rem;
-}
-
-#people_container {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- padding: 1.5rem;
- gap: 2rem 0.2rem;
-}
-
-#add_person_btn {
- cursor: pointer;
- display: flex;
- flex-direction: column;
- width: 5rem;
- text-align: center;
- transition: transform 0.3s;
- font-size: 0.85rem;
- opacity: 0.8;
- font-weight: 500;
-}
-#add_person_btn:active {
- transform: scale(0.95);
-}
-#add_person_btn .icon {
- height: 3rem;
- width: 3rem;
- border-radius: 2rem;
- stroke-width: 10;
- padding: 1rem;
- background: rgba(var(--text-color), 0.06);
- align-self: center;
- margin-bottom: 0.6rem;
-}
-
-.person {
- display: flex;
- flex-direction: column;
- align-items: center;
- cursor: pointer;
- transition: transform 0.3s;
- width: 5rem;
- -webkit-tap-highlight-color: transparent;
-}
-.person:active {
- transform: scale(0.95);
-}
-
-.person-initials, #person_initials {
- display: flex;
- justify-content: center;
- height: 3rem;
- width: 3rem;
- font-size: 1.2rem !important;
- font-weight: 500;
- align-items: center;
- border-radius: 2rem;
- margin-bottom: 0.6rem !important;
- text-transform: uppercase;
-}
-
-.person-name {
- font-size: 0.85rem;
- opacity: 0.8;
- font-weight: 500;
- text-transform: capitalize;
- text-align: center;
-}
-
-#person_popup > .flex:first-of-type {
- margin: 1rem 0;
-}
-#person_popup > .flex:first-of-type .flex {
- margin-top: 0.5rem;
-}
-#person_popup > .flex:first-of-type .flex .icon {
- height: 2.6rem;
- width: 2.6rem;
- padding: 0.8rem;
- cursor: pointer;
- stroke-width: 8;
-}
-#person_popup > .flex:first-of-type .flex .icon:hover {
- background: rgba(var(--text-color), 0.06);
-}
-#person_popup h3 {
- text-transform: capitalize;
-}
-#person_popup h5 {
- font-weight: 500;
- opacity: 0.8;
-}
-#person_popup .copy-row {
- margin-bottom: 1.5rem;
-}
-#person_popup #show_person_name {
- padding: 0.5rem 1rem;
- border-radius: 0.4rem;
- max-width: 30ch;
-}
-#person_popup #show_person_name:focus {
- outline: none;
- background: rgba(var(--text-color), 0.1);
-}
-
-#activity_page .empty-state,
-#request_page .empty-state,
-#settings_page .empty-state {
- justify-content: left;
-}
-
-#settings_page h4 {
- margin-top: 2rem;
- margin-bottom: 0.6rem;
-}
-#settings_page .copy-row h4 {
- margin: 0;
-}
-#settings_page p {
- color: rgba(var(--text-color), 0.7);
-}
-#settings_page sm-button {
- margin-top: 0.8rem;
-}
-#settings_page .flex {
- max-width: 60ch;
-}
-#settings_page .my-qr-code {
- margin-bottom: 1.5rem;
- height: 14rem;
-}
-#settings_page .my-qr-code img {
- height: 100%;
-}
-
-@media only screen and (max-width: 640px) {
- #home_page, #deposit {
- display: grid;
- gap: 1.5rem;
- grid-template-areas: "." "left";
- grid-template-columns: minmax(0, 1fr);
- }
- #home_page .left, #deposit .left {
- grid-area: left;
- }
-
- sm-select {
- width: 100%;
- }
-
- .hide-on-mobile {
- display: none !important;
- }
-
- #transaction_page {
- padding-top: 0;
- }
- #transaction_page header {
- padding: 1.5rem 0;
- }
-
- #deposit .user-panel {
- padding: 0;
- }
-
- video {
- height: 100vw;
- }
-}
-@media only screen and (min-width: 640px) {
- .hide-on-desktop {
- display: none !important;
- }
-
- body {
- padding: 0 2rem;
- margin-left: 4rem;
- }
-
- sm-popup {
- background: rgba(var(--foreground-color), 1);
- }
-
- sm-popup::part(popup) {
- width: 24rem;
- }
-
- #confirmation {
- width: 24rem;
- }
-
- #navbar {
- justify-content: flex-start;
- flex-direction: column;
- align-items: stretch;
- left: 0;
- bottom: 0;
- top: 0;
- right: auto;
- border-top: none;
- border-radius: 0;
- background: rgba(var(--text-color), 0.06);
- box-shadow: -0.5rem 0 0.5rem #00000008 inset;
- }
- #navbar .navbar-item {
- display: flex;
- width: auto;
- padding: 0.8rem 1.2rem;
- }
- #navbar .navbar-item .icon {
- height: 1.2rem;
- width: 1.2rem;
- }
- #navbar .navbar-item h5 {
- display: none;
- }
- #navbar .navbar-item:hover {
+ 10% {
+ transform: scale(0.2) translateY(5rem);
opacity: 1;
}
- #navbar .logo {
- margin: 1.5rem 1rem;
+ 40% {
+ transform: scale(0.2) translateY(0);
}
- #navbar .logo h4 {
- display: none;
+ 80% {
+ transform: scale(1.1) translateY(0);
}
- #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;
+ 100% {
+ transform: scale(1) translateY(0);
}
}
-@media only screen and (min-width: 800px) {
- body {
- margin-left: 11rem;
+.cashier-request,
+.wallet-request,
+.payment-request {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ background-color: rgba(var(--text-color), 0.06);
+}
+.cashier-request:not(:last-of-type),
+.wallet-request:not(:last-of-type),
+.payment-request:not(:last-of-type) {
+ margin-bottom: 1rem;
+}
+.cashier-request__time,
+.wallet-request__time,
+.payment-request__time {
+ font-size: 0.8rem;
+}
+
+.payment-request {
+ display: grid;
+ grid-template-columns: 1fr auto;
+}
+.payment-request__amount {
+ font-weight: 700;
+ text-align: right;
+}
+
+@media screen and (min-width: 40rem) {
+ sm-popup {
+ --width: 24rem;
}
- .complaint {
- gap: 0 1.5rem;
- grid-template-columns: 1fr 1fr;
- grid-template-areas: ". . " "header header";
+ .popup__header {
+ grid-column: 1/-1;
+ padding: 1rem 1.5rem 0 1.5rem;
}
- .complaint .complaint-actions {
+
+ body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+
+ #main_card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr;
+ grid-template-areas: "nav header" "nav main";
+ position: relative;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
+ background-color: rgba(var(--foreground-color), 0.9);
+ }
+
+ #main_header {
grid-area: header;
}
- .complaint .left {
- border-right: 1px solid rgba(var(--text-color), 0.2);
- padding-right: 1.5rem;
+
+ #pages_container {
+ grid-area: main;
}
- .complaint .right {
- display: flex;
- justify-content: center;
+
+ #main_navbar {
+ grid-area: nav;
+ border-top: none;
flex-direction: column;
+ height: 100%;
+ }
+ #main_navbar ul {
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.3rem;
+ }
+ #main_navbar ul li:last-of-type {
+ margin-top: auto;
}
- #navbar .navbar-item h5 {
- font-size: 0.9rem;
- margin: 0;
- display: block;
+ .nav-item {
+ aspect-ratio: 1/1;
}
- #navbar .icon {
- margin-right: 0.8rem;
- }
- #navbar .logo h4 {
- display: block;
- font-size: 1rem;
+ .nav-item__indicator {
+ width: 0.25rem;
+ height: 50%;
+ left: 0;
+ border-radius: 0 1rem 1rem 0;
+ bottom: auto;
}
- .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" " . ." " . .";
+ #user {
+ grid-template-columns: 1fr 20rem;
+ align-content: flex-start;
+ align-items: flex-start;
}
}
-@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 screen and (min-width: 56rem) {
+ #main_card {
+ height: 80vh;
+ width: 56rem;
}
}
@media (any-hover: hover) {
- .navbar-item:hover {
- background: rgba(var(--text-color), 0.06);
+ ::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
}
- .remove {
- opacity: 0.6;
+ ::-webkit-scrollbar-thumb {
+ background: rgba(var(--text-color), 0.3);
+ border-radius: 1rem;
+ }
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(var(--text-color), 0.5);
}
- .remove:hover {
- opacity: 1;
+ .interact:not([disabled]) {
+ transition: background-color 0.3s;
}
+ .interact:not([disabled]):hover {
+ background-color: rgba(var(--text-color), 0.06);
+ }
+
+ .button:not([disabled]) {
+ transition: background-color 0.3s, filter 0.3s;
+ }
+ .button:not([disabled]):hover {
+ filter: contrast(2);
+ }
+}
+@supports (overflow: overlay) {
+ body {
+ overflow: overlay;
+ }
+}
+.hide {
+ display: none !important;
}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 99af61e..d950434 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
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--background-color: 240, 240, 240;--foreground-color: 250, 250, 250;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: 24, 24, 24;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center;grid-auto-flow:column}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#main_header{padding:1rem 1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#pages_container{flex:1;overflow-y:auto}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;border:thin solid rgba(var(--text-color), 0.3)}.primary-action .icon{fill:var(--accent-color)}.primary-action:not(:last-of-type){margin-right:.5rem}.page{position:relative;display:flex;flex-direction:column;overflow-y:auto;align-content:flex-start;padding:1.5rem}#wallet_section{background-color:rgba(var(--text-color), 0.03);border-radius:.5rem;padding:1.5rem}#transactions_list{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{display:flex;align-items:center;justify-content:center;overflow:hidden}#main_card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav main";position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2);background-color:rgba(var(--foreground-color), 0.9)}#main_header{grid-area:header}#pages_container{grid-area:main}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#user{grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 017339e..a9cd50d 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,1866 +1,855 @@
* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- font-family: 'Roboto', sans-serif;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
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);
- }
+ height: 100%;
}
-a {
- font-weight: 600;
- text-decoration: none;
- color: var(--accent-color);
+body {
+ --accent-color: #256eff;
+ --text-color: 20, 20, 20;
+ --background-color: 240, 240, 240;
+ --foreground-color: 250, 250, 250;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ scrollbar-width: thin;
+ scrollbar-gutter: stable;
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+ transition: background-color 0.3s;
+ display: flex;
+ flex-direction: column;
}
-.dark-text {
- color: #111;
+body[data-theme="dark"] {
+ --accent-color: #86afff;
+ --text-color: 220, 220, 220;
+ --background-color: 10, 10, 10;
+ --foreground-color: 24, 24, 24;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ sm-popup::part(popup) {
+ background-color: rgba(var(--foreground-color), 1);
+ }
}
-h1 {
- font-size: 3.5rem;
-}
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
-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 {
+ &:not(:last-of-type) {
margin-bottom: 1.5rem;
+ }
+}
+a {
+ text-decoration: none;
+ color: var(--accent-color);
+ &:focus-visible {
+ box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+ }
}
-.top-margin {
- margin-top: 1.5rem;
+button {
+ user-select: none;
+ position: relative;
+ display: inline-flex;
+ border: none;
+ background-color: transparent;
+ overflow: hidden;
+ color: inherit;
+ -webkit-tap-highlight-color: transparent;
+ align-items: center;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ justify-content: center;
+ &:focus-visible {
+ outline: var(--accent-color) solid medium;
+ }
+ &:not(:disabled) {
+ cursor: pointer;
+ }
+}
+.button {
+ background-color: rgba(var(--text-color), 0.06);
+}
+.button--primary,
+.button--danger {
+ color: rgba(var(--background-color), 1);
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+}
+.button--primary {
+ background-color: var(--accent-color);
+}
+.button--danger {
+ background-color: var(--danger-color);
+}
+.cta {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ padding: 1rem;
+}
+.icon-only {
+ padding: 0.5rem;
+ border-radius: 0.3rem;
}
-.flex {
- display: flex;
+button:disabled {
+ opacity: 0.5;
}
-.grid {
- display: grid;
+a:any-link:focus-visible {
+ outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+details {
+ padding: 1rem 0;
}
-.grid-2 {
- grid-template-columns: auto auto;
- gap: 1em;
+details summary {
+ display: flex;
+ user-select: none;
+ cursor: pointer;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--accent-color);
}
-.align-center {
- align-items: center;
+details[open] {
+ & summary {
+ margin-bottom: 1rem;
+ }
+ & > summary .down-arrow {
+ transform: rotate(180deg);
+ }
}
-.direction-column {
- flex-direction: column;
+sm-input,
+sm-textarea {
+ font-size: 0.9rem;
+ --border-radius: 0.3rem;
+ --background-color: rgba(var(--foreground-color), 1);
+ button {
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+}
+sm-button {
+ --padding: 0.6rem 0.8rem;
+ &[variant="primary"] {
+ .icon {
+ fill: rgba(var(--background-color), 1);
+ }
+ }
+
+ &[disabled] {
+ .icon {
+ fill: rgba(var(--text-color), 0.6);
+ }
+ }
+ &.danger {
+ --background: var(--danger-color);
+ color: rgba(var(--background-color), 1);
+ }
+}
+sm-spinner {
+ --size: 1rem;
+ --stroke-width: 0.1rem;
+}
+sm-form {
+ --gap: 1rem;
+}
+strip-select {
+ --gap: 0;
+ background-color: rgba(var(--text-color), 0.06);
+ border-radius: 0.3rem;
+ padding: 0.3rem;
+}
+strip-option {
+ font-size: 0.8rem;
+ --border-radius: 0.2rem;
+ user-select: none;
+}
+ul {
+ list-style: none;
}
-.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;
+.overflow-ellipsis {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.breakable {
- word-break: break-all;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ hyphens: auto;
}
-.separator {
- padding: .1em;
+.full-bleed {
+ grid-column: 1/-1;
}
-.no-transformations {
- transform: none !important;
-}
-.capitalize{
- text-transform: capitalize;
+.h1 {
+ font-size: 1.5rem;
}
-sm-button[variant="outlined"]{
- --accent-color: rgba(var(--text-color), 1);
+.h2 {
+ font-size: 1.2rem;
}
-.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;
+h3 {
+ font-size: 1.2rem;
+ line-height: 1.3;
}
-@keyframes rotate {
- 100% {
- transform: rotate(360deg);
- }
+.h4 {
+ font-size: 0.9rem;
}
-@keyframes load {
- 50% {
- stroke-dashoffset: 0;
- }
-
- 100% {
- stroke-dashoffset: -210;
- }
+.h5 {
+ font-size: 0.75rem;
}
-@keyframes load-btn-loader {
- 50% {
- stroke-dashoffset: 0;
- }
-
- 100% {
- stroke-dashoffset: -220;
- }
+.uppercase {
+ text-transform: uppercase;
}
-.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;
- }
-
+.capitalize {
+ text-transform: capitalize;
}
-.clip {
- clip-path: circle(0) !important;
+.sticky {
+ position: sticky;
+}
+.top-0 {
+ top: 0;
}
-.animate-loader {
- animation: load 2.6s infinite, rotate 1s infinite linear;
+.flex {
+ display: flex;
+}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+.flex-1 {
+ flex: 1;
}
-.expand {
- width: 100%;
+.grid {
+ display: grid;
+}
+.flow-column {
+ grid-auto-flow: column;
}
-.fade-left {
- animation: fadeleft 0.3s;
+.gap-0-5 {
+ gap: 0.5rem;
}
-.fade-right {
- animation: faderight 0.3s;
+.gap-1 {
+ gap: 1rem;
}
-@keyframes faderight {
- from {
- opacity: 0;
- transform: translateX(-1em);
- }
-
- to {
- opacity: 1;
- transform: none;
- }
+.gap-1-5 {
+ gap: 1.5rem;
}
-@keyframes fadeleft {
- from {
- opacity: 0;
- transform: translateX(1em);
- }
-
- to {
- opacity: 1;
- transform: none;
- }
+.gap-2 {
+ gap: 2rem;
}
-.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;
- }
+.gap-3 {
+ gap: 3rem;
}
-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;
+.text-align-right {
+ text-align: right;
}
-*:empty + .empty-state {
- display: grid;
+.align-start {
+ align-content: flex-start;
}
+.align-center {
+ align-items: center;
+}
+.align-end {
+ align-items: flex-end;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.justify-start {
+ justify-content: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-right {
+ margin-left: auto;
+}
+
+.align-self-center {
+ align-self: center;
+}
+
+.justify-self-center {
+ justify-self: center;
+}
+
+.justify-self-start {
+ justify-self: start;
+}
+
+.justify-self-end {
+ justify-self: end;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.space-between {
+ justify-content: space-between;
+}
+
+.w-100 {
+ width: 100%;
+}
+.h-100 {
+ height: 100%;
+}
+
+.ripple {
+ height: 8rem;
+ width: 8rem;
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ background: radial-gradient(
+ circle,
+ rgba(var(--text-color), 0.3) 0%,
+ rgba(0, 0, 0, 0) 50%
+ );
+ pointer-events: none;
+}
+.button--primary,
+.button--danger {
+ .ripple {
+ background: radial-gradient(
+ circle,
+ rgba(var(--background-color), 0.3) 0%,
+ rgba(0, 0, 0, 0) 50%
+ );
+ }
+}
+.interact {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
.empty-state {
- display: none;
- place-items: center;
- width: 100%;
- svg {
- stroke: rgba(var(--text-color), 0.8);
- height: 12em;
- width: 12em;
- }
+ display: grid;
+ width: 100%;
+ padding: 1.5rem 0;
}
-.container-header {
- display: flex;
- align-items: center;
- flex-direction: row;
- width: 100%;
- padding: 1rem 0;
-
- h2 {
- flex: 1;
- }
-
- button {
- align-self: center;
- }
+.observe-empty-state:empty {
+ display: none;
}
-.btn {
- background: var(--accent-color);
- color: rgba(var(--foreground-color), 1);
- padding: 0.4em 1em;
+.observe-empty-state:not(:empty) + .empty-state {
+ display: none;
}
-.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;
+.bullet-point {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 0.8ch;
+ &::after {
+ content: "";
+ height: 0.4ch;
+ width: 0.4ch;
+ border-radius: 0.5em;
+ background-color: var(--accent-color);
+ }
}
-
-.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;
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.8);
+ flex-shrink: 0;
+}
+.margin-right-0-5 {
+ margin-right: 0.5rem;
}
-#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;
- }
+.margin-left-0-5 {
+ margin-left: 0.5rem;
}
-.banking {
- stroke-width: 4;
+.icon-button {
+ padding: 0.6rem;
+ border-radius: 0.8rem;
+ background-color: rgba(var(--text-color), 0.1);
+ height: max-content;
+ .icon {
+ fill: var(--accent-color);
+ }
}
-
-#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 {
+#confirmation_popup,
+#prompt_popup {
+ flex-direction: column;
+ h4 {
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);
+ margin-bottom: 0.5rem;
+ }
+ sm-button {
+ margin: 0;
+ }
+ .flex {
+ padding: 0;
+ margin-top: 1rem;
+ sm-button:first-of-type {
+ margin-right: 0.6rem;
+ margin-left: auto;
}
+ }
+}
+#prompt_message {
+ margin-bottom: 1.5rem;
}
-.request-icon{
- transform: rotate(180deg);
+.popup__header {
+ display: grid;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0 1.5rem;
+ align-items: center;
+ grid-auto-flow: column;
}
-.notification-dot::after {
- content: '';
+.popup__header__close {
+ padding: 0.5rem;
+ margin-left: -0.5rem;
+ cursor: pointer;
+}
+#main_header {
+ padding: 1rem 1.5rem;
+}
+#main_card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(var(--foreground-color), 1);
+ transition: background-color 0.3s;
+}
+#pages_container {
+ flex: 1;
+ overflow-y: auto;
+}
+
+#main_navbar {
+ display: flex;
+ background: rgba(var(--text-color), 0.03);
+ &.hide-away {
position: absolute;
+ }
+ ul {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ li {
+ width: 100%;
+ }
+ }
+}
+.nav-item {
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem 0.3rem;
+ color: var(--text-color);
+ font-size: 0.7rem;
+ border-radius: 0.3rem;
+ .icon {
+ transition: transform 0.2s;
+ }
+ &__title {
+ margin-top: 0.3rem;
+ transition: opacity 0.2s, transform 0.2s;
+ }
+ &--active {
+ color: var(--accent-color);
+ .icon {
+ fill: var(--accent-color);
+ transform: translateY(50%);
+ }
+ .nav-item__title {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ }
+ &__indicator {
+ position: absolute;
+ bottom: 0;
+ width: 2rem;
+ height: 0.3rem;
+ background: var(--accent-color);
+ border-radius: 1rem 1rem 0 0;
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);
+.password-field {
+ label {
+ display: flex;
+ input:checked ~ .visible {
+ display: none;
}
-}
-
-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;
+ input:not(:checked) ~ .invisible {
+ display: none;
}
+ }
}
-sm-panel{
- width: 100%;
+.multi-state-button {
+ display: grid;
+ text-align: center;
+ align-items: center;
+ & > * {
+ grid-area: 1/1/2/2;
+ }
+ button {
+ z-index: 1;
+ }
}
-
-.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;
- }
- }
+.clip {
+ clip-path: circle(0);
}
-
-.deposited {
- color: #00C853;
-}
-
-.decline-request {
- margin-right: 0.5rem !important;
-}
-
-.withdrawn {
- color: #d43125;
-}
-
-.container {
- display: grid;
- gap: 1em;
- width: 100%;
+.primary-action {
+ display: flex;
+ padding: 0.8rem 1rem;
+ gap: 0.5rem;
+ white-space: normal;
+ font-size: 0.8rem;
+ border-radius: 0.5rem;
+ background-color: transparent;
+ border: thin solid rgba(var(--text-color), 0.3);
+ .icon {
+ fill: var(--accent-color);
+ }
+ &:not(:last-of-type) {
+ margin-right: 0.5rem;
+ }
}
.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);
- }
- }
- }
- }
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ align-content: flex-start;
+ padding: 1.5rem;
}
-.copy-row {
- display: grid;
- grid-template-columns: 1fr auto;
+#wallet_section {
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.5rem;
+ padding: 1.5rem;
+}
+
+#transactions_list {
+ flex-direction: column;
+ padding-bottom: 4rem;
+}
+.transaction {
+ grid-template-columns: auto 1fr auto;
+ gap: 0.5rem 1rem;
+ padding: 0.8rem;
+ align-items: center;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.3rem;
+ &:not(:last-of-type) {
+ margin-bottom: 0.5rem;
+ }
+ &__icon {
+ display: flex;
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;
+ grid-area: 1/1/3/2;
+ width: 2.5rem;
+ height: 2.5rem;
+ background-color: rgba(var(--text-color), 0.03);
+ border-radius: 0.5rem;
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+ &__receiver {
+ font-size: 0.9rem;
font-weight: 500;
- align-items: center;
- border-radius: 2rem;
- margin-bottom: 0.6rem !important;
- text-transform: uppercase;
+ color: rgba(var(--text-color), 0.8);
+ }
+ &__time {
+ font-size: 0.8rem;
+ color: rgba(var(--text-color), 0.8);
+ }
+ &__amount {
+ font-size: 1rem;
+ font-weight: 700;
+ grid-area: 1/3/3/4;
+ &.sent {
+ &::before {
+ content: "-";
+ }
+ }
+ &.received {
+ &::before {
+ content: "+";
+ }
+ }
+ }
}
-.person-name{
- font-size: 0.85rem;
- opacity: 0.8;
- font-weight: 500;
- text-transform: capitalize;
+.fab {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: 1.5rem;
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+ z-index: 2;
+}
+#scroll_to_top {
+ border-radius: 3rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+
+#transaction_result {
+ display: grid;
+ gap: 0.5rem;
+ height: max(40vh, 24rem);
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ align-content: center;
+ &.success {
+ .icon--failed {
+ display: none;
+ }
+ }
+ &.failed {
+ .icon--success {
+ display: none;
+ }
+ }
+ h3 {
text-align: center;
+ width: 100%;
+ }
+ .icon {
+ justify-self: center;
+ height: 4rem;
+ width: 4rem;
+ border-radius: 5rem;
+ margin-bottom: 1rem;
+ animation: popup 1s;
+ &--success {
+ fill: rgba(var(--background-color), 1);
+ padding: 1rem;
+ background-color: #0bbe56;
+ }
+ &--failed {
+ background-color: rgba(var(--text-color), 0.03);
+ fill: var(--danger-color);
+ }
+ }
+ sm-copy {
+ font-size: 0.8rem;
+ }
+}
+@keyframes popup {
+ 0% {
+ opacity: 0;
+ transform: scale(0.2) translateY(600%);
+ }
+ 10% {
+ transform: scale(0.2) translateY(5rem);
+ opacity: 1;
+ }
+ 40% {
+ transform: scale(0.2) translateY(0);
+ }
+ 80% {
+ transform: scale(1.1) translateY(0);
+ }
+ 100% {
+ transform: scale(1) translateY(0);
+ }
}
-#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);
- }
- }
+#settings {
}
-#activity_page,
-#request_page,
-#settings_page{
- .empty-state{
- justify-content: left;
- }
+.cashier-request,
+.wallet-request,
+.payment-request {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ padding: 0.8rem;
+ border-radius: 0.3rem;
+ background-color: rgba(var(--text-color), 0.06);
+ &:not(:last-of-type) {
+ margin-bottom: 1rem;
+ }
+ &__time {
+ font-size: 0.8rem;
+ }
}
-#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%;
- }
- }
+.payment-request {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ &__amount {
+ font-weight: 700;
+ text-align: right;
+ }
}
-@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;
- }
+@media screen and (min-width: 40rem) {
+ sm-popup {
+ --width: 24rem;
+ }
+ .popup__header {
+ grid-column: 1/-1;
+ padding: 1rem 1.5rem 0 1.5rem;
+ }
+ body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+ #main_card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr;
+ grid-template-areas: "nav header" "nav main";
+ position: relative;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
+ 0 1rem 3rem rgba(0, 0, 0, 0.2);
+ // backdrop-filter: blur(2rem);
+ background-color: rgba(var(--foreground-color), 0.9);
+ }
+ #main_header {
+ grid-area: header;
+ }
+ #pages_container {
+ grid-area: main;
+ }
+
+ #main_navbar {
+ grid-area: nav;
+ border-top: none;
+ flex-direction: column;
+ height: 100%;
+ ul {
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.3rem;
+
+ li:last-of-type {
+ margin-top: auto;
+ }
}
- 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;
+ }
+ .nav-item {
+ aspect-ratio: 1/1;
+ &__indicator {
+ width: 0.25rem;
+ height: 50%;
+ left: 0;
+ border-radius: 0 1rem 1rem 0;
+ bottom: auto;
}
+ }
+ #user {
+ grid-template-columns: 1fr 20rem;
+ align-content: flex-start;
+ align-items: flex-start;
+ }
}
-
-@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 screen and (min-width: 56rem) {
+ #main_card {
+ height: 80vh;
+ width: 56rem;
+ }
}
@media (any-hover: hover) {
- .navbar-item:hover{
- background: rgba(var(--text-color), 0.06);
+ ::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(var(--text-color), 0.3);
+ border-radius: 1rem;
+
+ &:hover {
+ background: rgba(var(--text-color), 0.5);
}
- .remove{
- opacity: 0.6;
+ }
+ .interact:not([disabled]) {
+ transition: background-color 0.3s;
+ &:hover {
+ background-color: rgba(var(--text-color), 0.06);
}
- .remove:hover{
- opacity: 1;
+ }
+ .button:not([disabled]) {
+ transition: background-color 0.3s, filter 0.3s;
+ &:hover {
+ filter: contrast(2);
}
+ }
+}
+
+@supports (overflow: overlay) {
+ body {
+ overflow: overlay;
+ }
+}
+
+.hide {
+ display: none !important;
}
diff --git a/css/sign-in-bg.svg b/css/sign-in-bg.svg
new file mode 100644
index 0000000..077c111
--- /dev/null
+++ b/css/sign-in-bg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/success-art.svg b/css/success-art.svg
new file mode 100644
index 0000000..7fc5986
--- /dev/null
+++ b/css/success-art.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/welcome.svg b/css/welcome.svg
new file mode 100644
index 0000000..2dead8d
--- /dev/null
+++ b/css/welcome.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..bf699cb
Binary files /dev/null and b/favicon.png differ
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..8e56357
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/favicon_1.png b/favicon_1.png
new file mode 100644
index 0000000..346c89a
Binary files /dev/null and b/favicon_1.png differ
diff --git a/logo.ai b/logo.ai
new file mode 100644
index 0000000..a663314
--- /dev/null
+++ b/logo.ai
@@ -0,0 +1,2047 @@
+%PDF-1.5
%âãÏÓ
+1 0 obj
<>/OCGs[5 0 R 27 0 R 48 0 R 69 0 R 90 0 R 113 0 R]>>/Pages 3 0 R/Type/Catalog>>
endobj
2 0 obj
<>stream
+
+
+
+
+ application/pdf
+
+
+ Web
+
+
+ Adobe Illustrator CC 23.0 (Windows)
+ 2020-11-14T20:51+05:30
+ 2020-11-23T01:48:57+05:30
+ 2020-11-23T01:48:57+05:30
+
+
+
+ 256
+ 84
+ JPEG
+ /9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEA
AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK
DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f
Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAVAEAAwER
AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA
AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB
UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE
1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ
qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy
obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp
0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo
+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8Agf8AzkB/zkB5k80+ZL/Q
9Dv5bHyrYyvbIls5ja7aMlHlldDVkY14JXjxoSK4q8QxV2KuxV2KuxV2KuxV2Kp55T87+a/KOpR6
j5d1OfT7lGDMI2PpyU/ZliNUkX2YHFX6A/k3+ZMH5h+RbTzAI1gvQzWup26fZjuogC4WpJ4srK61
3oRirN8Vec+bvNV1cXctnaymK0iYoeBoZCNiSR28BnQaLRxjESkLkfsfJfaX2iy580sOKRjiia2/
iI535dw+LD5ZM2LycYoSWTFyIxQksmByIxQksmLkRihJZMXIjFCSyYHIjFCSyYuRGKElkxciMVTS
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
+
+
+
+ proof:pdf
+ uuid:65E6390686CF11DBA6E2D887CEACB407
+ xmp.did:6806a576-4fee-6d49-9e48-d75b54c46a40
+ uuid:e68512b5-97fb-412e-afd9-b665975faa8c
+
+ uuid:ddb85511-449e-4847-a808-d8e6c44f424f
+ xmp.did:3bd35275-b3c2-5f4a-88f4-4e9fdeff5904
+ uuid:65E6390686CF11DBA6E2D887CEACB407
+ proof:pdf
+
+
+
+
+ saved
+ xmp.iid:78d668e8-f910-f343-a1fd-84a62851bbc3
+ 2020-11-13T20:22:34+05:30
+ Adobe Illustrator CC 23.0 (Windows)
+ /
+
+
+ saved
+ xmp.iid:6806a576-4fee-6d49-9e48-d75b54c46a40
+ 2020-11-14T20:51+05:30
+ Adobe Illustrator CC 23.0 (Windows)
+ /
+
+
+
+ Web
+ Document
+ 1
+ False
+ False
+
+ 128.000000
+ 128.000000
+ Pixels
+
+
+
+ Cyan
+ Magenta
+ Yellow
+ Black
+
+
+
+
+
+ Default Swatch Group
+ 0
+
+
+
+ White
+ RGB
+ PROCESS
+ 255
+ 255
+ 255
+
+
+ Black
+ RGB
+ PROCESS
+ 0
+ 0
+ 0
+
+
+ RGB Red
+ RGB
+ PROCESS
+ 255
+ 0
+ 0
+
+
+ RGB Yellow
+ RGB
+ PROCESS
+ 255
+ 255
+ 0
+
+
+ RGB Green
+ RGB
+ PROCESS
+ 0
+ 255
+ 0
+
+
+ RGB Cyan
+ RGB
+ PROCESS
+ 0
+ 255
+ 255
+
+
+ RGB Blue
+ RGB
+ PROCESS
+ 0
+ 0
+ 255
+
+
+ RGB Magenta
+ RGB
+ PROCESS
+ 255
+ 0
+ 255
+
+
+ R=193 G=39 B=45
+ RGB
+ PROCESS
+ 193
+ 39
+ 45
+
+
+ R=237 G=28 B=36
+ RGB
+ PROCESS
+ 237
+ 28
+ 36
+
+
+ R=241 G=90 B=36
+ RGB
+ PROCESS
+ 241
+ 90
+ 36
+
+
+ R=247 G=147 B=30
+ RGB
+ PROCESS
+ 247
+ 147
+ 30
+
+
+ R=251 G=176 B=59
+ RGB
+ PROCESS
+ 251
+ 176
+ 59
+
+
+ R=252 G=238 B=33
+ RGB
+ PROCESS
+ 252
+ 238
+ 33
+
+
+ R=217 G=224 B=33
+ RGB
+ PROCESS
+ 217
+ 224
+ 33
+
+
+ R=140 G=198 B=63
+ RGB
+ PROCESS
+ 140
+ 198
+ 63
+
+
+ R=57 G=181 B=74
+ RGB
+ PROCESS
+ 57
+ 181
+ 74
+
+
+ R=0 G=146 B=69
+ RGB
+ PROCESS
+ 0
+ 146
+ 69
+
+
+ R=0 G=104 B=55
+ RGB
+ PROCESS
+ 0
+ 104
+ 55
+
+
+ R=34 G=181 B=115
+ RGB
+ PROCESS
+ 34
+ 181
+ 115
+
+
+ R=0 G=169 B=157
+ RGB
+ PROCESS
+ 0
+ 169
+ 157
+
+
+ R=41 G=171 B=226
+ RGB
+ PROCESS
+ 41
+ 171
+ 226
+
+
+ R=0 G=113 B=188
+ RGB
+ PROCESS
+ 0
+ 113
+ 188
+
+
+ R=46 G=49 B=146
+ RGB
+ PROCESS
+ 46
+ 49
+ 146
+
+
+ R=27 G=20 B=100
+ RGB
+ PROCESS
+ 27
+ 20
+ 100
+
+
+ R=102 G=45 B=145
+ RGB
+ PROCESS
+ 102
+ 45
+ 145
+
+
+ R=147 G=39 B=143
+ RGB
+ PROCESS
+ 147
+ 39
+ 143
+
+
+ R=158 G=0 B=93
+ RGB
+ PROCESS
+ 158
+ 0
+ 93
+
+
+ R=212 G=20 B=90
+ RGB
+ PROCESS
+ 212
+ 20
+ 90
+
+
+ R=237 G=30 B=121
+ RGB
+ PROCESS
+ 237
+ 30
+ 121
+
+
+ R=199 G=178 B=153
+ RGB
+ PROCESS
+ 199
+ 178
+ 153
+
+
+ R=153 G=134 B=117
+ RGB
+ PROCESS
+ 153
+ 134
+ 117
+
+
+ R=115 G=99 B=87
+ RGB
+ PROCESS
+ 115
+ 99
+ 87
+
+
+ R=83 G=71 B=65
+ RGB
+ PROCESS
+ 83
+ 71
+ 65
+
+
+ R=198 G=156 B=109
+ RGB
+ PROCESS
+ 198
+ 156
+ 109
+
+
+ R=166 G=124 B=82
+ RGB
+ PROCESS
+ 166
+ 124
+ 82
+
+
+ R=140 G=98 B=57
+ RGB
+ PROCESS
+ 140
+ 98
+ 57
+
+
+ R=117 G=76 B=36
+ RGB
+ PROCESS
+ 117
+ 76
+ 36
+
+
+ R=96 G=56 B=19
+ RGB
+ PROCESS
+ 96
+ 56
+ 19
+
+
+ R=66 G=33 B=11
+ RGB
+ PROCESS
+ 66
+ 33
+ 11
+
+
+
+
+
+ Grays
+ 1
+
+
+
+ R=0 G=0 B=0
+ RGB
+ PROCESS
+ 0
+ 0
+ 0
+
+
+ R=26 G=26 B=26
+ RGB
+ PROCESS
+ 26
+ 26
+ 26
+
+
+ R=51 G=51 B=51
+ RGB
+ PROCESS
+ 51
+ 51
+ 51
+
+
+ R=77 G=77 B=77
+ RGB
+ PROCESS
+ 77
+ 77
+ 77
+
+
+ R=102 G=102 B=102
+ RGB
+ PROCESS
+ 102
+ 102
+ 102
+
+
+ R=128 G=128 B=128
+ RGB
+ PROCESS
+ 128
+ 128
+ 128
+
+
+ R=153 G=153 B=153
+ RGB
+ PROCESS
+ 153
+ 153
+ 153
+
+
+ R=179 G=179 B=179
+ RGB
+ PROCESS
+ 179
+ 179
+ 179
+
+
+ R=204 G=204 B=204
+ RGB
+ PROCESS
+ 204
+ 204
+ 204
+
+
+ R=230 G=230 B=230
+ RGB
+ PROCESS
+ 230
+ 230
+ 230
+
+
+ R=242 G=242 B=242
+ RGB
+ PROCESS
+ 242
+ 242
+ 242
+
+
+
+
+
+ Web Color Group
+ 1
+
+
+
+ R=63 G=169 B=245
+ RGB
+ PROCESS
+ 63
+ 169
+ 245
+
+
+ R=122 G=201 B=67
+ RGB
+ PROCESS
+ 122
+ 201
+ 67
+
+
+ R=255 G=147 B=30
+ RGB
+ PROCESS
+ 255
+ 147
+ 30
+
+
+ R=255 G=29 B=37
+ RGB
+ PROCESS
+ 255
+ 29
+ 37
+
+
+ R=255 G=123 B=172
+ RGB
+ PROCESS
+ 255
+ 123
+ 172
+
+
+ R=189 G=204 B=212
+ RGB
+ PROCESS
+ 189
+ 204
+ 212
+
+
+
+
+
+
+ Adobe PDF library 15.00
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+endstream
endobj
3 0 obj
<>
endobj
7 0 obj
<>/Resources<>/ExtGState<>/Properties<>>>/Thumb 75 0 R/TrimBox[0.0 0.0 128.0 128.0]/Type/Page>>
endobj
92 0 obj
<>/Resources<>/ExtGState<>/Properties<>/Shading<>>>/TrimBox[0.0 0.0 128.0 128.0]/Type/Page>>
endobj
115 0 obj
<>/Resources<>/ExtGState<>/Properties<>>>/TrimBox[0.0 0.0 128.0 128.0]/Type/Page>>
endobj
122 0 obj
<>stream
+H‰TRËŽ1¼ç+üíñ#ÎãÊ,â´B+|@¸°HËH|ÿ–fP«”ívÙå¾|½Òåù*ôééJå©õiþþ(ßéO¹\¿ 7Ö‘flt'ºˆ~Aô×¼‘’àQÁS¤’вY(¯%#¯åPåPEõÊA¿ž}c™3Y¹¶dwîÖÖ)¢ëôátâ‹Î£<ÂÖ+®ìNÇ`Cš7ˆ™p¸ÂoÁuÒ#Dñ÷x7–ÕOGÂc>8ךÐûýÚxúàØ°¢óaFEÿ6Xa(OCyÈÕYÆ1PE¶\gùY^R”uØŠ¥ë]ÏÙ¹Ò;ŠÖ¸«)”jØÜṳ́{Nãi2„ï©¶ÍÖÁµ;[ü}ãʞꃰ¯á&7_ÛÖ{ØÙ0][[øÐÉúÎñq—µ¹uE+º7´TõŪ•G¬,M*øöB ªRî<ŘùÑ]´ÏÏøi_Ê» ѹˆ4
+endstream
endobj
113 0 obj
<>
endobj
123 0 obj
[/View/Design]
endobj
124 0 obj
<>>>
endobj
119 0 obj
<>
endobj
118 0 obj
[/ICCBased 125 0 R]
endobj
125 0 obj
<>stream
+H‰œ–yTSwÇoÉž•°Ãc
[€°5la‘QIBHØADED„ª•2ÖmtFOE.®cÖ}êÒõ0êè8´×Ž8GNg¦Óïï÷9÷wïïÝß½÷ó '¥ªµÕ0 Ö ÏJŒÅb¤
+ 2y.-;!à’ÆK°ZÜ ü‹ž^i½"LÊÀ0ðÿ‰-×é
@8(”µrœ;q®ª7èLöœy¥•&†Qëñq¶4±jž½ç|æ9ÚÄ
+V³)gB£0ñiœWו8#©8wÕ©•õ8_Å٥ʨQãüÜ«QÊj@é&»A)/ÇÙgº>'K‚ó ÈtÕ;\ú”
Ó¥$ÕºF½ZUnÀÜå˜(4TŒ%)ë«”ƒ0C&¯”阤Z£“i˜¿óœ8¦Úbx‘ƒE¡ÁÁBÑ;…ú¯›¿P¦ÞÎӓ̹žAüom?çW=
+€x¯Íú·¶Ò- Œ¯Àòæ[›Ëû 0ñ¾¾øÎ}ø¦y)7ta¾¾õõõ>j¥ÜÇTÐ7úŸ¿@ï¼ÏÇtÜ›ò`qÊ2™±Ê€™ê&¯®ª6ê±ZL®Ä„?â_øóyxg)Ë”z¥ÈçLUáíÖ*ÔuµSkÿSeØO4?׸¸c¯¯Ø°.ò ò· åÒ R´
ßÞô-•’2ð5ßáÞüÜÏ ú÷Sá>Ó£Vš‹“då`r£¾n~ÏôY &à+`œ;ÂA4ˆÉ 䀰ÈA9Ð =¨- t°lÃ`;»Á~pŒƒÁ ðGp| ®[`Lƒ‡`<¯ "AˆYA+äùCb(ЇR¡,¨ *T2B-Ð
+¨ê‡†¡Ðnè÷ÐQètº}MA ï —0Óal»Á¾°ŽSàx ¬‚kà&¸^Á£ð>ø0|>_ƒ'á‡ð,ÂG!"F$H:Rˆ”!z¤éF‘Qd?r9‹\A&‘GÈ”ˆrQ¢áhš‹ÊÑ´íE‡Ñ]èaô4zBgÐ×Á–àE#H ‹*B=¡‹0HØIøˆp†p0MxJ$ùD1„˜D, V›‰½ÄÄÄãÄKÄ»ÄY‰dEò"EÒI2’ÔEÚBÚGúŒt™4MzN¦‘Èþär!YKî ’÷?%_&ß#¿¢°(®”0J:EAi¤ôQÆ(Ç()Ó”WT6U@ æP+¨íÔ!ê~êêmêæD¥eÒÔ´å´!ÚïhŸÓ¦h/èº']B/¢éëèÒÓ¿¢?a0nŒhF!ÃÀXÇØÍ8ÅøšñÜŒkæc&5S˜µ™˜6»lö˜Iaº2c˜K™MÌAæ!æEæ#…寒°d¬VÖë(ëk–Íe‹Øél
»—½‡}Ž}ŸCâ¸qâ9
+N'çÎ)Î].ÂuæJ¸rî
+î÷wšGä xR^¯‡÷[ÞoÆœchžgÞ`>bþ‰ù$á»ñ¥ü*~ÿ ÿ:ÿ¥…EŒ…ÒbÅ~‹ËÏ,m,£-•–Ý–,¯Y¾´Â¬â*6X[ݱF=3ë·YŸ±~dó ·‘ÛtÛ´¹iÛzÚfÙ6Û~`{ÁvÖÎÞ.ÑNg·Åî”Ý#{¾}´}…ý€ý§ö¸‘j‡‡ÏþŠ™c1X6„Æfm“Ž;'_9 œr:œ8Ýq¦:‹ËœœO:ϸ8¸¤¹´¸ìu¹éJq»–»nv=ëúÌMà–ï¶ÊmÜí¾ÀR 4 ö
+n»3Ü£ÜkÜGݯz=Ä•[=¾ô„=ƒ<Ë=GTB(É/ÙSòƒ,]6*›-•–¾W:#—È7Ë*¢ŠÊe¿ò^YDYÙ}U„j£êAyTù`ù#µD=¬þ¶"©b{ųÊôÊ+¬Ê¯: !kJ4Gµm¥ötµ}uCõ%—®K7YV³©fFŸ¢ßYÕ.©=bàá?SŒîƕƩºÈº‘ºçõyõ‡Ø
Ú†žkï5%4ý¦m–7Ÿlqlio™Z³lG+ÔZÚz²Í¹³mzyâò]íÔöÊö?uøuôw|¿"űN»ÎåwW&®ÜÛe֥ﺱ*|ÕöÕèjõê‰5k¶¬yÝèþ¢Ç¯g°ç‡^yïkEk‡Öþ¸®lÝD_pß¶õÄõÚõ×7DmØÕÏîoê¿»1mãál {àûMÅ›Î
nßLÝlÜ<9”úO ¤[þ˜¸™$™™üšhšÕ›B›¯œœ‰œ÷dÒž@ž®ŸŸ‹Ÿú i Ø¡G¡¶¢&¢–££v£æ¤V¤Ç¥8¥©¦¦‹¦ý§n§à¨R¨Ä©7©©ªª««u«é¬\¬ÐD¸®-®¡¯¯‹° °u°ê±`±Ö²K²Â³8³®´%´œµµŠ¶¶y¶ð·h·à¸Y¸Ñ¹J¹Âº;ºµ».»§¼!¼›½½¾
+¾„¾ÿ¿z¿õÀpÀìÁgÁãÂ_ÂÛÃXÃÔÄQÄÎÅKÅÈÆFÆÃÇAÇ¿È=ȼÉ:ɹÊ8Ê·Ë6˶Ì5̵Í5͵Î6ζÏ7ϸÐ9кÑ<ѾÒ?ÒÁÓDÓÆÔIÔËÕNÕÑÖUÖØ×\×àØdØèÙlÙñÚvÚûÛ€ÜÜŠÝÝ–ÞÞ¢ß)߯à6à½áDáÌâSâÛãcãëäsäü儿
æ–çç©è2è¼éFéÐê[êåëpëûì†ííœî(î´ï@ïÌðXðåñrñÿòŒóó§ô4ôÂõPõÞömöû÷Šøø¨ù8ùÇúWúçûwüü˜ý)ýºþKþÜÿmÿÿ ÷„óû
+endstream
endobj
117 0 obj
<>
endobj
126 0 obj
<>
endobj
127 0 obj
<>stream
+%!PS-Adobe-3.0
+%%Creator: Adobe Illustrator(R) 17.0
+%%AI8_CreatorVersion: 23.0.5
+%%For: (sairaj mote) ()
+%%Title: (logo.ai)
+%%CreationDate: 11/23/2020 1:48 AM
+%%Canvassize: 16383
+%%BoundingBox: 0 -128 394 0
+%%HiResBoundingBox: 0.000000000060936 -127.99999999994 393.62001220703 -0.000000000060027
+%%DocumentProcessColors: Cyan Magenta Yellow Black
+%AI5_FileFormat 13.0
+%AI12_BuildNumber: 625
+%AI3_ColorUsage: Color
+%AI7_ImageSettings: 0
+%%RGBProcessColor: 0 0 0 ([Registration])
+%AI3_Cropmarks: 296 -128 424 0
+%AI3_TemplateBox: 64.5 -64.5 64.5 -64.5
+%AI3_TileBox: 62.3622131347656 -484.97509765625 657.682220458984 356.944885253906
+%AI3_DocumentPreview: None
+%AI5_ArtSize: 14400 14400
+%AI5_RulerUnits: 6
+%AI9_ColorModel: 1
+%AI5_ArtFlags: 0 0 0 1 0 0 1 0 0
+%AI5_TargetResolution: 800
+%AI5_NumLayers: 1
+%AI9_OpenToView: -78.1199999999999 103.320000000001 1.38888888888889 990 602 18 0 0 78 121 0 0 0 1 1 0 1 1 0 1
+%AI5_OpenViewLayers: 7
+%%PageOrigin:-336 -364
+%AI7_GridSettings: 72 8 72 8 1 0 0.800000011920929 0.800000011920929 0.800000011920929 0.899999976158142 0.899999976158142 0.899999976158142
+%AI9_Flatten: 1
+%AI12_CMSettings: 00.MS
+%%EndComments
+
+endstream
endobj
128 0 obj
<>stream
+%%BoundingBox: 0 -128 394 0
+%%HiResBoundingBox: 0.000000000060936 -127.99999999994 393.62001220703 -0.000000000060027
+%AI7_Thumbnail: 128 44 8
+%%BeginData: 7597 Hex Bytes
+%0000330000660000990000CC0033000033330033660033990033CC0033FF
+%0066000066330066660066990066CC0066FF009900009933009966009999
+%0099CC0099FF00CC0000CC3300CC6600CC9900CCCC00CCFF00FF3300FF66
+%00FF9900FFCC3300003300333300663300993300CC3300FF333300333333
+%3333663333993333CC3333FF3366003366333366663366993366CC3366FF
+%3399003399333399663399993399CC3399FF33CC0033CC3333CC6633CC99
+%33CCCC33CCFF33FF0033FF3333FF6633FF9933FFCC33FFFF660000660033
+%6600666600996600CC6600FF6633006633336633666633996633CC6633FF
+%6666006666336666666666996666CC6666FF669900669933669966669999
+%6699CC6699FF66CC0066CC3366CC6666CC9966CCCC66CCFF66FF0066FF33
+%66FF6666FF9966FFCC66FFFF9900009900339900669900999900CC9900FF
+%9933009933339933669933999933CC9933FF996600996633996666996699
+%9966CC9966FF9999009999339999669999999999CC9999FF99CC0099CC33
+%99CC6699CC9999CCCC99CCFF99FF0099FF3399FF6699FF9999FFCC99FFFF
+%CC0000CC0033CC0066CC0099CC00CCCC00FFCC3300CC3333CC3366CC3399
+%CC33CCCC33FFCC6600CC6633CC6666CC6699CC66CCCC66FFCC9900CC9933
+%CC9966CC9999CC99CCCC99FFCCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
+%CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFFFF0033FF0066FF0099FF00CC
+%FF3300FF3333FF3366FF3399FF33CCFF33FFFF6600FF6633FF6666FF6699
+%FF66CCFF66FFFF9900FF9933FF9966FF9999FF99CCFF99FFFFCC00FFCC33
+%FFCC66FFCC99FFCCCCFFCCFFFFFF33FFFF66FFFF99FFFFCC110000001100
+%000011111111220000002200000022222222440000004400000044444444
+%550000005500000055555555770000007700000077777777880000008800
+%000088888888AA000000AA000000AAAAAAAABB000000BB000000BBBBBBBB
+%DD000000DD000000DDDDDDDDEE000000EE000000EEEEEEEE0000000000FF
+%00FF0000FFFFFF0000FF00FFFFFF00FFFFFF
+%524C45FFFFA827FD22F852A8FD0AFFAF43FBFBFB1B431BFB1A431AFB1A3D
+%1A1B1A3D1A3C143C143C143C14361436143613361360A9FD29FF7DFD26F8
+%A8FD08FF8BFBFB1AFB1AFB1AFB1A1B1A1B1A1A1A1B1A1A141A141A141A14
+%1413141314131413140D140D1384FD27FFA8FD27F827FD07FFAFFD04FB1B
+%FB1BFB1AFB1A1B1A3D1A1B1A3D1A1A143C141A143C141413361436133613
+%360D360D36AFFD26FF27FD28F87DFD06FF67FB1AFB1AFB1AFB1A1B1A1BFD
+%041A141A141A141A141A1414131413140D140D140D140D130D130D84FD26
+%FFFD29F852FD06FF43FB43FBFB1B431BFB1A431A1B1A3D1A1B1A3D1A3C14
+%3C143C143C143613361436133613360D360D0D35FD26FFFD29F852FD06FF
+%43FB1AFB1AFB1AFB1A1B1A1B1A1A141A141A141A14141314131413141314
+%0D140D140D360D0D0D350D36FD26FFFD0AF8FD0D27FD12F852FD06FF43FB
+%FB1AFB1BFB1AFB1A1B1A3D6067606760616061606160616060363C13140D
+%3613360D360D350D2F2FFD11FFA8AFA8A9A8FD10FFFD09F852FD0CFFA8A8
+%7D52FD0FF852FD06FF1AFB1AFB1AFB1A1B1A1B1A1A1AFD0FFFA8AF36130D
+%14FD060D0736FD10FF2929012901297EFFA87E29532953537EA8FD05FFFD
+%09F827FD11FF27FD0DF852FD06FF43FBFB1A431BFB1A431A1B1A67FD12FF
+%84360D360D360D350D2F2FFD10FF54FD0529A97E2902292929072929297E
+%FD04FFFD09F852FD12FF52FD0CF852FD06FF1AFB1A1B1AFB1A1B1A1B1A1A
+%60FD13FF84130D0D0D2F0D0D0736FD10FF292928FD052907292829292928
+%29220736FFFFFFFD09F827FD13FF52FD0BF852FD06FF431AFB1AFB1AFB1A
+%1B1A1B1AAFFD14FF5A130D2F0D2F0D0D2FFD10FF54FD10290E0E36FFFFFD
+%09F827FD14FF27FD0AF852FD06FF3C1B1A1B1A1A1A1B1A1A141AA9FD06FF
+%8584FF5A85FD0AFFFD050D2F072FA8FD0FFFFD0429012929290129012901
+%292829070E0D0E5AFFFD09F827FD06FFFD06A8FD09FFFD0AF852FD06FF43
+%1A431AFB1A431A1B1A1B3CFD07FF363CFF6014FD0AFF840D2F0D2F0D2F2F
+%FD10FF54FD092953FD042907140E140D14AFFD09F827FD06FFFD07F87DFD
+%07FF27FD09F852FD06FF3C1B1A1B1A1A1A1B1A1A1461FD06FFA936136013
+%1436FD09FF84FD040D2F072FFD10FFFD04292829292953FFFFFFA87E070E
+%0D0E0D0E0D85FD09F827FD05FFA827FD07F87DFD06FF52FD09F852FD06FF
+%431A1B1A1B1A1B1A3D1A1A60FD06FFAF13361414131460FD08FFAF0D2F0D
+%2F0D2F2FFD10FF5307FD05297EFD06FFAF0E0E0D140E0E30FD09F852FD06
+%FFFD09F8FD06FF7DFD09F852FD06FF1A1BFD061A141A14AFFD06FF841413
+%140D140D1484FD07FFA80D062F070D062FFD10FF29290129292953FD08FF
+%5A0D0E0D0E0D0EFD09F827FD06FF27FD08F87DFD05FF7DFD09F852FD06FF
+%431A1B1A3D1A1B1A3D1A3CAFFD06FF611336143613360D36FD07FFAF0D2F
+%0D2F0D2F2FFD10FF54FD0529A9FD08FF840E0E140E140DFD09F852FD06FF
+%FD09F87DFD05FFA8FD09F852FD06FF3C1BFD041A141A141A36FD07FF3614
+%0D140D140D1484FD07FF840D072F070D062FFD10FF29292829292984FD08
+%FF850D0E0D0E0D0EFD09F827FD06FF27FD08F8A8FD05FF7DFD09F852FD06
+%FF431A3D1A1B1A3D1A1A1461FD06FFAF36131413360D36A8FD08FF84072F
+%072F0D0D2FFD10FF54FD0529A9FD08FF360E0E0E0D140EFD09F827FD06FF
+%FD08F87DFD06FF7DFD09F852FD06FF3C1A141A141A141A141460FD06FFA9
+%0D140D140D36A8FD09FF2F0D070D062F062FA8FD0FFFFD0429012984FD07
+%FF840E0D0E0D0E0D36FD09F827FD06FF27F8F8F827F852A8FD07FF27FD09
+%F852FD06FF431A3D1A1B1A3D1A1A14AFFD06FF841436600D60FD0AFF842F
+%0D2F072F072F2FFD10FF54FD0529A9FD06FF5A140D140E140E0E84FD09F8
+%27FD06FFF8F852FFA8FD09FF7DFD0AF852FD06FF3C1A141A141A141A1414
+%A8FD06FF3635FF5A5AFD0BFF2F062F070D062F062FFD10FFFD04290629A8
+%FF84360E360D0E0D0E0D0E0D0E0DFFFD09F827FD06FFF852FD0CFF27FD0A
+%F852FD06FF3D1A1A143D141A141A36FD07FF84FFFFA9FD0BFF84072F072F
+%072F062F2FFD10FF5307FD0429CBFF360D0E0E0E0D140E0E0D140D85FFFD
+%09F852FD05FF7DF8FD0CFF52FD0BF852FD06FF1A1A141A141A14141360FD
+%06FFAFFD0EFF84060D060D062F0607062FFD10FF2929012906297E5A0D0E
+%0D0E0D0E0D0E0D0E075AFFFFFD09F827FD04FFA8F8FD0CFF7DFD0CF852FD
+%06FF3D1A3C143D143C141A84FD14FF84072F0D2F072F072F062F2FFD10FF
+%54FD05295A0E140E140E140E140E0E0D61FFFFFFFD09F852FD04FFF87DFD
+%0AFFA827FD0DF852FD06FF3C1A141A141A141413AFFD12FFA85A060D062F
+%060D062F0629062FFD10FF29292829292F0D0E0D0E0D0E0D0E0D0E0E85FD
+%04FFFD09F827FFFFFF2752FD06FFA8FFA87D27FD0FF852FD06FF3D143C14
+%1A143C1436AFFD0FFFAFAF5A2F072F0D2F072F072F062F062929FD10FF54
+%2929292F0E140D360E360D36365A84FD06FFFD09F827FFFF7D2727522727
+%F8272727FD13F852FD06FF3C1A141A1414131414FD07FF84845A845A845A
+%84352F060D070D062F060D062F06070629062FA8FD0FFFFD042906297EAF
+%A8AFA8AFA8FD09FFFD09F827FD05FFA8FD19F852FD06FF3D143C143C143C
+%1460FD07FF360D140D13FD050D2F0D2F0D2F0D2F072F072F062F062929FD
+%10FF54FD0529A9FD0FFFFD09F827FD06FFFD19F852FD06FF3614141A1414
+%131460FD06FFAF0D0D0D350D0D0D2F0D0D072F070D062F0607062F062906
+%29062FFD10FFFD04290629A8FD0FFFFD09F827FD06FF27FD18F852FD06FF
+%3D141A143C141413AFFD06FF84140D360D360D2F0D2F0D2F0D2F0D2F062F
+%072F062F0629062929FD10FF5307FD0429A9FD0FFFFD09F852FD06FFFD19
+%F852FD06FFFD041413141314A8FD06FF600D13FD060D062F070D062F0607
+%0629060706290628012FFD10FF2929012906297EFD0FFFFD09F827FD06FF
+%27FD18F852FD06FF3D143C143C141436FD07FF36140D360D360D2F0D2F0D
+%2F072F072F062F072F062F0629062929FD10FF54FD0529A9FD0FFFFD09F8
+%52FD05FFA8FD19F852FD06FF3614141413141360FD07FF350D2F0D0D0D2F
+%0D0D062F070D062F06070629062806290628012FFD10FF292928290129A8
+%FD0FFFFD09F827FFFFFFA87DFD1AF852FD06FF3C143C1414131484FD07FF
+%0D350D350D2F0D2F0D2F072F072F062F0629062906290629062828FD10FF
+%542929297EA9FD10FFFD09F852FFFF52FD1CF852FD06FF3614131413140D
+%AFFD06FF84FD070D062F060D062F0607062906060629062801280129A8FD
+%0FFF292953A9FD12FFFD09F8277DFD1EF852FD06FF3C143C14361336A9FF
+%A9FFAFFFAF840D350D350D2F0D2F0D2F072F072F062F0629062906290629
+%062828FD10FFA8A9FD14FFFD29F852FD06FF3614131413140D360D360D36
+%0D350D2F0D0D0D2F0D0D062F060D062F0629062906280629062801280129
+%FD26FFFD29F852FD06FF3C1436133613360D140D140D360D2F0D2F0D2F0D
+%2F0D2F072F072F062F06290629062906290628012829FD26FFFD29F852FD
+%06FF361413140D140D130D13FD070D2F0D0D062F060D062F060706290606
+%06280128012801280053FD26FF7DFD28F8A8FD06FF8B1336133613360D36
+%0D360D360D2F0D2F0D2F0D2F0D2F072F072F062F06290629062906290628
+%01227EFD26FFA827FD26F852FD08FF360D140D360D130D350D0D0D2F0D0D
+%072F070D062F060D062F062906290628012801280128010128FD28FFA827
+%FD24F852FD09FFAF600D140D14FD0A0D060D070D060D0607060706060129
+%010601280101002853FD2AFFA87D52522752525227525252275252522752
+%5252275252522752525227525252275252527DFD0CFF855A605A605A5A59
+%5A595A595A595A595A595A535A535A535A53595359FD06537EFD28FFFF
+%%EndData
+
+endstream
endobj
129 0 obj
<>stream
+%AI12_CompressedDataxœì½m“¹u.øüµ!ݸ*á™Ú¨îªö•W²ÙÖ†Ã1AsÚ-¾Lp8ÖÕþú}žs d&Åîágh{Crº€B"ñrp^Ÿó7ÿÇo?ûÙé‹7ÿzÿ34‡§OþæonßÞ?{÷æí/òñá—/_~ýÕ»·üè'¿ûéÁæ£a«Ó/§ÏK˼ûÕ‹7¯qpèâY{Çïÿä«g/Þ>û÷ë7ïîzøÉOYñûï^Þ£êå›?¾9>{ñÓö@tp~öUÖþÜùŸ;ãÌÁþ"L‡Ó¯¥Í³×ÿñ쫯^ül‘üäùáÍ›¯_ñâõoÞüï_ÌágÖM?‡ƒð½øÝýWÛGÓ~’™}â7òqn?ßöÇ䌱ΙlüágÛï—ÙõùÍó¯_Ý¿~÷Û·ožßõÕí›—oÞ~õ‹Ãí_Ÿ½>üúÙQóìðÿÞ¿|ùæ/‡›—Ïžÿß9ý2~~÷âå=&æÕ³wëeO¿´îó›¯_¼üâï¿~õ¯÷˜³ä¢|î?—^ÿá+t‡žùÿòyþü—¯ðÑg÷ïÞáµðPy×ßýíÍz,œ–ŸüóïîÿøBÓû/?=¿}óå«goÿŒo»9é´§ÓÆúßß¿úò%ÖB&-…c<üLþ^þ·6Äi#wôÉ9ë9Eô¦pœs43uønÌÇ49LkˆÓ