RanchiMall/flobank
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor UI tweak

Browse Source
This commit is contained in:
sairaj mote 2022-11-10 20:00:14 +05:30
parent 24863d29f8
commit 9c59d01e11
3 changed files with 95 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

383
css/main.css
View File

@ -1,8 +1,7 @@
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
@ -24,12 +23,12 @@ body,
body * { body * {
--accent-color: #2672ff; --accent-color: #2672ff;
--accent-color--light: rgba(38, 114, 255, 0.06); --accent-color--light: rgba(38, 114, 255, 0.06);
--text-color: 36, 36, 36; --text-color: 20, 20, 20;
--background-color: 247, 250, 255; --foreground-color: 252, 253, 255;
--foreground-color: rgb(250, 252, 255); --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #f3a600; --yellow: rgb(220, 165, 0);
--loan-color: rgb(255, 171, 93); --loan-color: rgb(255, 171, 93);
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -38,13 +37,12 @@ body[data-theme=dark],
body[data-theme=dark] * { body[data-theme=dark] * {
--accent-color: rgb(170, 190, 255); --accent-color: rgb(170, 190, 255);
--accent-color--light: rgba(231, 239, 255, 0.06); --accent-color--light: rgba(231, 239, 255, 0.06);
--text-color: 230, 230, 230; --text-color: 200, 200, 200;
--text-color-light: 170, 170, 170; --foreground-color: 27, 28, 29;
--background-color: 10, 10, 10; --background-color: 21, 22, 22;
--foreground-color: rgb(20, 20, 20);
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffd13a; --yellow: rgb(255, 213, 5);
--loan-color: rgb(255, 232, 170); --loan-color: rgb(255, 232, 170);
} }
@ -65,8 +63,7 @@ a:where([class]) {
text-decoration: none; text-decoration: none;
} }
a:where([class]):focus-visible { a:where([class]):focus-visible {
-webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
a { a {
@ -77,21 +74,15 @@ button,
.button { .button {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
position: relative; position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
border: none; border: none;
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -140,8 +131,6 @@ ul {
} }
.flex { .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
} }
@ -170,7 +159,6 @@ ul {
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
} }
@ -208,8 +196,6 @@ ul {
} }
.flex { .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
} }
@ -250,15 +236,11 @@ ul {
} }
.align-start { .align-start {
-webkit-box-align: start; align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
} }
.align-center { .align-center {
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
.text-center { .text-center {
@ -266,15 +248,11 @@ ul {
} }
.justify-start { .justify-start {
-webkit-box-pack: start; justify-content: start;
-ms-flex-pack: start;
justify-content: start;
} }
.justify-center { .justify-center {
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center;
justify-content: center;
} }
.justify-right { .justify-right {
@ -282,8 +260,7 @@ ul {
} }
.align-self-center { .align-self-center {
-ms-flex-item-align: center; align-self: center;
align-self: center;
} }
.justify-self-center { .justify-self-center {
@ -299,22 +276,15 @@ ul {
} }
.direction-column { .direction-column {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
.space-between { .space-between {
-webkit-box-pack: justify; justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
} }
.stretch { .stretch {
-webkit-box-pack: stretch; justify-content: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
justify-items: stretch; justify-items: stretch;
} }
.stretch > * { .stretch > * {
@ -324,10 +294,7 @@ ul {
.interact { .interact {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -369,10 +336,7 @@ ul {
} }
#confirmation_popup { #confirmation_popup {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
#confirmation_popup h4 { #confirmation_popup h4 {
font-weight: 500; font-weight: 500;
@ -394,23 +358,19 @@ button:active,
.button:active, .button:active,
.interact:active, .interact:active,
.nav-item:active { .nav-item:active {
-webkit-transform: scale(0.96); transform: scale(0.96);
transform: scale(0.96);
} }
#main_page { #main_page {
padding: 1.5rem; padding: 1.5rem;
} }
#main_page > section:nth-of-type(1) { #main_page > section:nth-of-type(1) {
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
} }
.logo { .logo {
display: grid; display: grid;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%; width: 100%;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0 0.3rem; gap: 0 0.3rem;
@ -429,15 +389,10 @@ button:active,
} }
details summary { details summary {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify; justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
@ -445,8 +400,7 @@ details[open] > summary {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
details[open] > summary .icon { details[open] > summary .icon {
-webkit-transform: rotate(180deg); transform: rotate(180deg);
transform: rotate(180deg);
} }
.card { .card {
@ -482,8 +436,7 @@ details[open] > summary .icon {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
#landing > .grid { #landing > .grid {
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
text-align: center; text-align: center;
gap: 1rem; gap: 1rem;
} }
@ -491,9 +444,7 @@ details[open] > summary .icon {
#sign_in, #sign_in,
#sign_up { #sign_up {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
#sign_in section, #sign_in section,
#sign_up section { #sign_up section {
@ -547,29 +498,19 @@ details[open] > summary .icon {
#main_nav { #main_nav {
grid-area: main-nav; grid-area: main-nav;
position: relative; position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
} }
.nav-item { .nav-item {
position: relative; position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: inherit; color: inherit;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s; transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -595,9 +536,7 @@ details[open] > summary .icon {
padding: 1.5rem; padding: 1.5rem;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }
@ -613,33 +552,22 @@ details[open] > summary .icon {
} }
#quick_actions_container { #quick_actions_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.5rem; gap: 1.5rem;
margin: 2rem 0; margin: 2rem 0;
} }
.quick-action { .quick-action {
color: inherit; color: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.quick-action.disabled { .quick-action.disabled {
pointer-events: none; pointer-events: none;
opacity: 0.6; opacity: 0.6;
-webkit-filter: grayscale(100%); filter: grayscale(100%);
filter: grayscale(100%);
} }
.quick-action__icon { .quick-action__icon {
padding: 1rem; padding: 1rem;
@ -664,8 +592,7 @@ details[open] > summary .icon {
text-align: center; text-align: center;
} }
.empty-state .empty-state__icon { .empty-state .empty-state__icon {
-webkit-filter: drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));
filter: drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));
height: 12rem; height: 12rem;
width: 12rem; width: 12rem;
padding: 3rem; padding: 3rem;
@ -701,21 +628,14 @@ strip-option:last-of-type {
padding: 1rem 0; padding: 1rem 0;
gap: 0.4rem 1rem; gap: 0.4rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
-webkit-box-align: start; align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
color: inherit; color: inherit;
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr) auto;
} }
.activity-card__icon { .activity-card__icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-line-pack: center; align-content: center;
align-content: center; justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.8rem; border-radius: 0.8rem;
background-color: var(--accent-color--light); background-color: var(--accent-color--light);
@ -756,13 +676,10 @@ strip-option:last-of-type {
.activity-card--account { .activity-card--account {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
gap: 1.5rem; gap: 1.5rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
} }
.activity-card--account .activity-card__icon { .activity-card--account .activity-card__icon {
@ -807,9 +724,7 @@ strip-option:last-of-type {
} }
.activity-card--admin { .activity-card--admin {
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
grid-template-areas: "icon . button" "icon time button"; grid-template-areas: "icon . button" "icon time button";
} }
.activity-card--admin .activity-card__icon { .activity-card--admin .activity-card__icon {
@ -825,12 +740,8 @@ strip-option:last-of-type {
letter-spacing: 0.05em; letter-spacing: 0.05em;
background-color: var(--accent-color--light); background-color: var(--accent-color--light);
color: var(--accent-color); color: var(--accent-color);
-webkit-box-pack: end; justify-content: flex-end;
-ms-flex-pack: end; align-items: center;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.activity-card--admin sm-spinner { .activity-card--admin sm-spinner {
--height: 1rem; --height: 1rem;
@ -923,8 +834,7 @@ strip-option:last-of-type {
#user_section { #user_section {
display: grid; display: grid;
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
gap: 2rem; gap: 2rem;
overflow-y: auto; overflow-y: auto;
padding: 1.5rem; padding: 1.5rem;
@ -936,6 +846,7 @@ strip-option:last-of-type {
} }
#user_section__header { #user_section__header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
background-color: inherit; background-color: inherit;
@ -954,43 +865,25 @@ strip-option:last-of-type {
} }
#account_chart_container { #account_chart_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 15rem; height: 15rem;
padding-bottom: 3rem; padding-bottom: 3rem;
margin: 1.5rem 0; margin: 1.5rem 0;
} }
#chart_legend { #chart_legend {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; flex-wrap: wrap;
flex-wrap: wrap; justify-content: center;
-webkit-box-pack: center; align-items: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.legend { .legend {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.8rem; font-size: 0.8rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -1014,22 +907,15 @@ strip-option:last-of-type {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "icon ." "icon ."; grid-template-areas: "icon ." "icon .";
padding: 1rem 0; padding: 1rem 0;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.3rem 1rem; gap: 0.3rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.balance-card__icon { .balance-card__icon {
grid-area: icon; grid-area: icon;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-line-pack: center; align-content: center;
align-content: center; justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.8rem; border-radius: 0.8rem;
background-color: var(--accent-color--light); background-color: var(--accent-color--light);
@ -1056,8 +942,7 @@ strip-option:last-of-type {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: 1rem 0; gap: 1rem 0;
padding: 1.5rem 0; padding: 1.5rem 0;
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
} }
#transaction section, #transaction section,
@ -1073,28 +958,20 @@ strip-option:last-of-type {
#transaction_top, #transaction_top,
#account_top { #account_top {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-items: flex-start; justify-items: flex-start;
position: relative; position: relative;
} }
#transaction_detail__icon, #transaction_detail__icon,
#account_detail__icon { #account_detail__icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: 40%; border-radius: 40%;
padding: 0.8rem; padding: 0.8rem;
justify-self: flex-start; justify-self: flex-start;
-ms-flex-item-align: start; align-self: flex-start;
align-self: flex-start;
} }
#transaction_detail__icon .icon, #transaction_detail__icon .icon,
#account_detail__icon .icon { #account_detail__icon .icon {
@ -1105,8 +982,6 @@ strip-option:last-of-type {
#transaction_detail__amount, #transaction_detail__amount,
#account_detail__amount { #account_detail__amount {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
@ -1134,8 +1009,7 @@ strip-option:last-of-type {
#account_process { #account_process {
display: grid; display: grid;
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
gap: 2rem; gap: 2rem;
} }
@ -1201,26 +1075,22 @@ strip-option:last-of-type {
@-webkit-keyframes slide-down { @-webkit-keyframes slide-down {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-1rem); transform: translateY(-1rem);
transform: translateY(-1rem);
} }
to { to {
opacity: 1; opacity: 1;
-webkit-transform: none; transform: none;
transform: none;
} }
} }
@keyframes slide-down { @keyframes slide-down {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-1rem); transform: translateY(-1rem);
transform: translateY(-1rem);
} }
to { to {
opacity: 1; opacity: 1;
-webkit-transform: none; transform: none;
transform: none;
} }
} }
#deposit, #deposit,
@ -1236,13 +1106,8 @@ strip-option:last-of-type {
} }
#deposit sm-form::part(form), #deposit sm-form::part(form),
#loan sm-form::part(form) { #loan sm-form::part(form) {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
#deposit__icon .icon, #deposit__icon .icon,
@ -1270,22 +1135,15 @@ strip-option:last-of-type {
} }
.loader-button-wrapper { .loader-button-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
position: relative; position: relative;
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center; align-items: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.loader-button-wrapper sm-button, .loader-button-wrapper sm-button,
.loader-button-wrapper slide-button { .loader-button-wrapper slide-button {
width: 100%; width: 100%;
z-index: 1; z-index: 1;
-webkit-transition: -webkit-clip-path 0.3s;
transition: -webkit-clip-path 0.3s; transition: -webkit-clip-path 0.3s;
transition: clip-path 0.3s; transition: clip-path 0.3s;
transition: clip-path 0.3s, -webkit-clip-path 0.3s; transition: clip-path 0.3s, -webkit-clip-path 0.3s;
@ -1307,14 +1165,10 @@ strip-option:last-of-type {
} }
#result section { #result section {
text-align: center; text-align: center;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
#result__icon { #result__icon {
position: relative; position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
border-radius: 50%; border-radius: 50%;
padding: 1rem; padding: 1rem;
@ -1342,34 +1196,28 @@ strip-option:last-of-type {
@-webkit-keyframes pop-in { @-webkit-keyframes pop-in {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0.4) translateY(6rem); transform: scale(0.4) translateY(6rem);
transform: scale(0.4) translateY(6rem);
} }
40% { 40% {
opacity: 1; opacity: 1;
-webkit-transform: scale(0.4) translateY(0); transform: scale(0.4) translateY(0);
transform: scale(0.4) translateY(0);
} }
100% { 100% {
-webkit-transform: none; transform: none;
transform: none;
} }
} }
@keyframes pop-in { @keyframes pop-in {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0.4) translateY(6rem); transform: scale(0.4) translateY(6rem);
transform: scale(0.4) translateY(6rem);
} }
40% { 40% {
opacity: 1; opacity: 1;
-webkit-transform: scale(0.4) translateY(0); transform: scale(0.4) translateY(0);
transform: scale(0.4) translateY(0);
} }
100% { 100% {
-webkit-transform: none; transform: none;
transform: none;
} }
} }
#settings { #settings {
@ -1401,50 +1249,36 @@ strip-option:last-of-type {
sm-button { sm-button {
--padding: 0.9rem 1.6rem; --padding: 0.9rem 1.6rem;
} }
#dashboard { #dashboard {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
#main_nav { #main_nav {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border-top: thin solid rgba(var(--text-color), 0.1); border-top: thin solid rgba(var(--text-color), 0.1);
} }
.nav-item { .nav-item {
-webkit-box-flex: 1; flex: 1;
-ms-flex: 1; flex-direction: column;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
.nav-item__title { .nav-item__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
margin-top: 0.3rem; margin-top: 0.3rem;
} }
#transaction_action_button, #transaction_action_button,
#account_action_button, #account_action_button,
.loader-button-wrapper { .loader-button-wrapper {
margin-top: auto; margin-top: auto;
} }
#transaction_top, #transaction_top,
#account_top { #account_top {
margin-top: 1rem; margin-top: 1rem;
} }
#user_section { #user_section {
left: 0; left: 0;
} }
#admin__header { #admin__header {
position: relative; position: relative;
display: grid; display: grid;
@ -1453,17 +1287,14 @@ strip-option:last-of-type {
text-align: center; text-align: center;
justify-items: center; justify-items: center;
} }
#account_process, #account_process,
#transaction__steps { #transaction__steps {
border-top: solid rgba(var(--text-color), 0.2) thin; border-top: solid rgba(var(--text-color), 0.2) thin;
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.account-step .button { .account-step .button {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.activity-card--account .grid { .activity-card--account .grid {
text-align: right; text-align: right;
} }
@ -1472,39 +1303,29 @@ strip-option:last-of-type {
.h1 { .h1 {
font-size: 2rem; font-size: 2rem;
} }
.h2 { .h2 {
font-size: 1.8rem; font-size: 1.8rem;
} }
.h3 { .h3 {
font-size: 1.3rem; font-size: 1.3rem;
} }
.h4 { .h4 {
font-size: 1rem; font-size: 1rem;
} }
#confirmation_popup { #confirmation_popup {
--width: 24rem; --width: 24rem;
} }
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
#home { #home {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "main-header main-header user-section" "main-nav subpages user-section"; grid-template-areas: "main-header main-header user-section" "main-nav subpages user-section";
} }
#main_nav { #main_nav {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 1rem; padding: 0 1rem;
} }
#main_nav::after { #main_nav::after {
@ -1515,7 +1336,6 @@ strip-option:last-of-type {
background-color: rgba(var(--text-color), 0.2); background-color: rgba(var(--text-color), 0.2);
height: 80%; height: 80%;
} }
.nav-item--active { .nav-item--active {
background-color: var(--accent-color--light); background-color: var(--accent-color--light);
} }
@ -1529,13 +1349,11 @@ strip-option:last-of-type {
.nav-item__title { .nav-item__title {
display: none; display: none;
} }
#user_section { #user_section {
grid-area: user-section; grid-area: user-section;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
width: min(24rem, 100%); width: min(24rem, 100%);
} }
#transaction_top, #transaction_top,
#account_top, #account_top,
#account_process, #account_process,
@ -1543,29 +1361,18 @@ strip-option:last-of-type {
overflow: hidden; overflow: hidden;
padding: 1.8rem; padding: 1.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
-webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1), 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1), 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1), 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1); align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
} }
#transaction_detail__icon { #transaction_detail__icon {
justify-self: flex-start; justify-self: flex-start;
} }
#admin__header { #admin__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify; justify-content: space-between;
-ms-flex-pack: justify; align-items: center;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.account-step.row-3 { .account-step.row-3 {
grid-template-areas: ". . b-link" ". . b-link"; grid-template-areas: ". . b-link" ". . b-link";
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr) auto;
@ -1577,32 +1384,23 @@ strip-option:last-of-type {
grid-area: b-link; grid-area: b-link;
align-self: flex-start; align-self: flex-start;
} }
#user_accounts:not(:empty) { #user_accounts:not(:empty) {
gap: 1rem; gap: 1rem;
} }
.activity-card--account { .activity-card--account {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
text-align: left; text-align: left;
-webkit-box-pack: start; justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
} }
.activity-card--account .activity-card__icon { .activity-card--account .activity-card__icon {
-webkit-box-pack: start; justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
#user_section { #user_section {
position: fixed; position: fixed;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
z-index: 2; z-index: 2;
right: 0; right: 0;
top: 0; top: 0;
@ -1610,46 +1408,36 @@ strip-option:last-of-type {
padding-top: 0; padding-top: 0;
} }
#user_section.reveal { #user_section.reveal {
-webkit-box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1); box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
} }
#user_section:not(.reveal) { #user_section:not(.reveal) {
-webkit-transform: translateX(100%); transform: translateX(100%);
transform: translateX(100%);
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.page-layout { .page-layout {
grid-template-columns: 1fr 80vw 1fr; grid-template-columns: 1fr 80vw 1fr;
} }
.card { .card {
padding: 1.5rem; padding: 1.5rem;
} }
#home { #home {
grid-template-columns: 14rem minmax(0, 1fr) 24rem; grid-template-columns: 14rem minmax(0, 1fr) 24rem;
} }
.nav-item__title { .nav-item__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
margin-left: 0.5rem; margin-left: 0.5rem;
} }
#transaction section, #transaction section,
#account_details { #account_details {
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
} }
.hide-on-desktop { .hide-on-desktop {
display: none; display: none;
} }
.activity-card--pending:not(:empty) { .activity-card--pending:not(:empty) {
padding: 1.5rem; padding: 1.5rem;
} }
@ -1664,7 +1452,6 @@ strip-option:last-of-type {
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(var(--text-color), 0.3); background: rgba(var(--text-color), 0.3);
border-radius: 1rem; border-radius: 1rem;
@ -1672,13 +1459,9 @@ strip-option:last-of-type {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
.nav-item, .nav-item,
.interact { .interact {
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s; transition: background-color 0.3s, transform 0.3s;
transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
} }
.nav-item:hover, .nav-item:hover,
.interact:hover { .interact:hover {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
css/main.scss
View File

@ -20,12 +20,12 @@ body {
* { * {
--accent-color: #2672ff; --accent-color: #2672ff;
--accent-color--light: rgba(38, 114, 255, 0.06); --accent-color--light: rgba(38, 114, 255, 0.06);
--text-color: 36, 36, 36; --text-color: 20, 20, 20;
--background-color: 247, 250, 255; --foreground-color: 252, 253, 255;
--foreground-color: rgb(250, 252, 255); --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #f3a600; --yellow: rgb(220, 165, 0);
--loan-color: rgb(255, 171, 93); --loan-color: rgb(255, 171, 93);
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -39,13 +39,12 @@ body[data-theme="dark"] {
* { * {
--accent-color: rgb(170, 190, 255); --accent-color: rgb(170, 190, 255);
--accent-color--light: rgba(231, 239, 255, 0.06); --accent-color--light: rgba(231, 239, 255, 0.06);
--text-color: 230, 230, 230; --text-color: 200, 200, 200;
--text-color-light: 170, 170, 170; --foreground-color: 27, 28, 29;
--background-color: 10, 10, 10; --background-color: 21, 22, 22;
--foreground-color: rgb(20, 20, 20);
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffd13a; --yellow: rgb(255, 213, 5);
--loan-color: rgb(255, 232, 170); --loan-color: rgb(255, 232, 170);
} }
} }
@ -1181,7 +1180,7 @@ strip-option {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
#main_nav { #main_nav {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
border-top: thin solid rgba(var(--text-color), 0.1); border-top: thin solid rgba(var(--text-color), 0.1);
} }
.nav-item { .nav-item {
@ -1254,7 +1253,7 @@ strip-option {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
#home { #home {
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "main-header main-header user-section" "main-nav subpages user-section"; grid-template-areas: "main-header main-header user-section" "main-nav subpages user-section";
@ -1299,7 +1298,7 @@ strip-option {
overflow: hidden; overflow: hidden;
padding: 1.8rem; padding: 1.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1), box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1),
0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1); 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1);
align-self: flex-start; align-self: flex-start;