diff --git a/css/main.css b/css/main.css index 4b02408..8afb550 100644 --- a/css/main.css +++ b/css/main.css @@ -3,203 +3,203 @@ margin: 0; box-sizing: border-box; font-family: "Roboto", sans-serif; - word-break: break-all; } :root { - font-size: clamp(1rem, 1.2vmax, 3rem); + font-size: clamp(1rem, 1.2vmax, 1.2rem); } -html, body { +html, +body { height: 100%; - scroll-behavior: smooth; } body { - color: rgba(var(--text-color), 1); - background: rgba(var(--background-color), 1); -} -body, -body * { - --accent-color: #0D7377; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; - --danger-color: red; -} - -body[data-theme=dark], -body[data-theme=dark] * { - --accent-color: #32E0C4; - --text-color: 240, 240, 240; - --text-color-light: 170, 170, 170; - --background-color: 10, 10, 10; - --danger-color: rgb(255, 106, 106); -} - -span { - font-size: 5em; - height: 0em; + --accent-color: #3d5afe; + --secondary-color: #ffac2e; + --text-color: 34, 34, 34; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); display: flex; - justify-content: center; - align-items: center; + flex-direction: column; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); } -li > div > div:nth-of-type(1) { - text-align: right; - font-size: 35px; +body[data-theme=dark] { + --accent-color: #92a2ff; + --secondary-color: #d60739; + --text-color: 200, 200, 200; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); } -p { - font-size: 0.8; - max-width: 65ch; +p, +strong { line-height: 1.7; - margin-bottom: 1.5rem; - color: rgba(var(--text-color), 0.8); -} -p:not(:last-of-type) { - margin-bottom: 1rem; + color: rgba(var(--text-color), 0.9); + max-width: 70ch; } img { - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; } -a { +a:where([class]) { color: inherit; text-decoration: none; } -a:focus-visible { +a:where([class]):focus-visible { box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; } -button { - display: inline-flex; - border: none; - background-color: inherit; +a { + color: var(--accent-color); +} + +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; } -sm-button { - --border-radius: 0.3rem; +button, +.button { + -webkit-user-select: none; + -moz-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: inherit; + font-weight: 500; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; + flex-shrink: 0; +} +button:focus-visible, +.button:focus-visible { + outline: var(--accent-color) solid medium; +} +button:not(:disabled), +.button:not(:disabled) { + cursor: pointer; +} + +.button { + background-color: rgba(var(--text-color), 0.02); + border: solid thin rgba(var(--text-color), 0.06); +} +.button--primary { + color: rgba(var(--background-color), 1); + background-color: var(--accent-color); +} +.button--primary .icon { + fill: rgba(var(--background-color), 1); +} +.button--colored { + color: var(--accent-color); +} +.button--colored .icon { + fill: var(--accent-color); +} +.button--danger { + background-color: rgba(255, 115, 115, 0.062745098); + color: var(--danger-color); +} +.button--danger .icon { + fill: var(--danger-color); +} +.button--small { + padding: 0.4rem 0.6rem; +} +.button--outlined { + border: solid rgba(var(--text-color), 0.3) 0.1rem; + background-color: rgba(var(--foreground-color), 1); +} +.button--transparent { + background-color: transparent; +} + +button:disabled { + opacity: 0.4; + cursor: not-allowed; + filter: saturate(0); +} + +.cta { + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.8rem 1rem; +} + +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} + +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; + aspect-ratio: 1/1; +} + +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; +} + +sm-input { + --border-radius: 0.5rem; + --background-color: rgba(var(--foreground-color), 1); +} +sm-input button .icon { + fill: var(--accent-color); +} + +sm-spinner { + --size: 1.5rem; + --stroke-width: 0.1rem; +} + +sm-copy { + font-size: 0.9rem; + font-weight: 500; } ul { - list-style-type: none; - padding: 0.5em; -} - -.input-icon { - padding: 0.2em 0.4em; - border-radius: 5px; - border: 1px solid rgba(var(--text-color), 1); -} - -.profile { - width: 50px; - height: 50px; - background: #64b5f6; - border-radius: 50%; - margin-bottom: 1em; -} - -.last-tx { - padding: 1em 0em; -} - -.last-tx > div:nth-of-type(1) { - font-weight: 700; -} - -.last-tx-content { - display: flex; - align-items: flex-end; - justify-content: center; - flex-flow: column nowrap; -} - - -.last-tx-content > div:nth-of-type(1) { - padding: 0.5em; - margin: 0.5em 0em; - border-radius: 1rem; - background: red; - color: white; -} - -.last-tx-content > div:nth-of-type(2) { - width: 100%; -} - -.app { - padding: 0.5em; - display: flex; - flex-flow: row wrap; -} - -.search-wrapper { - opacity: 0; - transition: visiblity 0s, opacity 0.1s ease-in; -} - -.search-wrapper:not(.open) { - visibility: hidden; - position: fixed; -} - -.search-wrapper.open { - visibility: visible; - position: fixed; - z-index: 10; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 1; - height: 100vh; -} - -.search-overlay { - background: rgba(0, 0, 0, 0.05); - height: 100%; - position: fixed; - width: 100%; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -.search { - margin: 0em auto; - width: 50%; - margin-top: 4rem; - border-radius: 0.5rem; - box-shadow: 0 4px 7px 3px rgb(0 0 0 / 20%); - background: rgba(var(--background-color), 1); -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.hide { - opacity: 0; - pointer-events: none; -} - -.hide-completely { - display: none !important; -} - -.no-transformations { - transform: none !important; + list-style: none; } .overflow-ellipsis { @@ -209,39 +209,16 @@ ul { text-overflow: ellipsis; } -.breakable { +.wrap-around { overflow-wrap: break-word; word-wrap: break-word; - -ms-word-break: break-all; word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; -webkit-hyphens: auto; - hyphens: auto; + hyphens: auto; } .full-bleed { - grid-column: 1/4; -} - -.h1 { - font-size: 2.5rem; -} - -.h2 { - font-size: 2rem; -} - -.h3 { - font-size: 1.4rem; -} - -.h4 { - font-size: 1rem; -} - -.h5 { - font-size: 0.8rem; + grid-column: 1/-1; } .uppercase { @@ -252,22 +229,43 @@ ul { 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; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + .grid { display: grid; } -.grid-3 { - grid-template-columns: 1fr auto auto; -} - .flow-column { grid-auto-flow: column; } +.gap-0-3 { + gap: 0.3rem; +} + .gap-0-5 { gap: 0.5rem; } @@ -292,23 +290,39 @@ ul { text-align: right; } -.align-start { +.text-align-left { + text-align: left; +} + +.align-items-start { align-items: flex-start; } -.align-center { +.align-items-center { align-items: center; } +.align-content-start { + align-content: flex-start; +} + +.align-end { + align-items: flex-end; +} + .text-center { text-align: center; } .justify-start { + justify-items: start; +} + +.justify-content-start { justify-content: start; } -.justify-center { +.justify-content-center { justify-content: center; } @@ -320,6 +334,10 @@ ul { align-self: center; } +.align-self-end { + align-self: end; +} + .justify-self-center { justify-self: center; } @@ -332,7 +350,7 @@ ul { justify-self: end; } -.direction-column { +.flex-direction-column { flex-direction: column; } @@ -340,6 +358,114 @@ ul { justify-content: space-between; } +.space-evenly { + justify-content: space-evenly; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.padding-block-1 { + padding-block: 1rem; +} + +.margin-right-0-3 { + margin-right: 0.3rem; +} + +.margin-right-0-5 { + margin-right: 0.5rem; +} + +.margin-right-1 { + margin-right: 1rem; +} + +.margin-left-0-5 { + margin-left: 0.5rem; +} + +.margin-left-auto { + margin-left: auto; +} + +.margin-right-auto { + margin-right: auto; +} + +.margin-top-1 { + margin-top: 1rem; +} + +.margin-bottom-0-5 { + margin-bottom: 0.5rem; +} + +.margin-bottom-1 { + margin-bottom: 1rem; +} + +.margin-bottom-2 { + margin-bottom: 2rem; +} + +.margin-block-0-5 { + margin-block: 0.5rem; +} + +.margin-block-1 { + margin-block: 1rem; +} + +.margin-block-1-5 { + margin-block: 1.5rem; +} + +.margin-inline-1 { + margin-inline: 1rem; +} + +.margin-inline-1-5 { + margin-inline: 1.5rem; +} + +.hidden { + display: none !important; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + +.flow-column { + grid-auto-flow: column; +} + .w-100 { width: 100%; } @@ -356,11 +482,23 @@ ul { font-weight: 500; } +.ws-pre-line { + white-space: pre-line; +} + +.card { + background-color: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + padding: max(1rem, 3vw); +} + .ripple { + height: 8rem; + width: 8rem; position: absolute; border-radius: 50%; transform: scale(0); - background: rgba(var(--text-color), 0.16); + background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%); pointer-events: none; } @@ -379,12 +517,6 @@ ul { display: none; } -.icon { - width: 1.5rem; - height: 1.5rem; - fill: rgba(var(--text-color), 0.9); -} - .button__icon { height: 1.2rem; width: 1.2rem; @@ -396,153 +528,154 @@ ul { margin-left: 0.5rem; } -#loading { - text-align: center; - amimation: load 1s infinite; -} - -#searchToggle { - cursor: pointer; -} - - -@keyframes load { - 0% { - color: red; - } - 50% { - color: white; - } - 100% { - color: red; - } -} - -#confirmation_popup, -#prompt_popup { +#loader { + display: flex; 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; -} -#confirmation_popup .flex sm-button:first-of-type, -#prompt_popup .flex sm-button:first-of-type { - margin-right: 0.6rem; - margin-left: auto; + align-items: center; + justify-content: center; + height: 100%; + gap: 1rem; } #main_header { display: flex; gap: 1rem; align-items: center; - position: sticky; - padding: 0.5rem 1.5rem; - background: rgba(var(--background-color), 1); - border-bottom: solid 1px rgba(var(--text-color), 0.16); - z-index: 2; -} - -#logo { - display: grid; - align-items: center; - width: 100%; - grid-template-columns: auto 1fr; - gap: 0 0.5rem; - margin-right: 1rem; - cursor: pointer; -} -#logo h4 { - text-transform: capitalize; - font-size: 1rem; - font-weight: 600; - margin-top: 0.2rem; -} -#logo h5 { - font-size: 0.8rem; - font-family: "Roboto", sans-serif; - font-weight: 400; -} -#logo #main_logo { - height: 1.4rem; - width: 1.4rem; - fill: rgba(var(--text-color), 1); - stroke: none; -} - -sm-tab-header { - padding: 0 1.5rem; - background-color: rgba(var(--text-color), 0.06); -} - -sm-tab { - padding: 0.5rem 0.8rem; -} - -.section { - display: flex; - flex-direction: column; - margin-top: 3rem; - padding: 0 1.5rem; -} -.section:first-of-type { - margin-top: 0; -} - -.section__header { - display: flex; - padding: 1rem 0; + background: rgba(var(--foreground-color), 1); justify-content: space-between; + padding: 1.5rem 1rem; } -.card { - padding: 1.5rem; +#main_logo { + height: 1.5rem; + width: 1.5rem; + fill: rgba(var(--text-color), 1); +} + +#search_payments { + position: -webkit-sticky; + position: sticky; + top: 1rem; + width: min(24rem, 100% - 2rem); + margin: 0 auto; + margin-top: 1rem; + --border-radius: 0.5rem; + border-radius: 0.5rem; + --padding: 1rem 1.2rem; + --background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); + border: solid thin rgba(var(--text-color), 0.2); +} + +#intern_payment_list { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); + padding: 1rem; + padding-bottom: 4rem; + margin-top: 1rem; + margin: 0 auto; +} + +.intern-card { display: flex; flex-direction: column; - /*width: 100%;*/ - /*min-width: 20rem;*/ + gap: 0.8rem; + color: inherit; + text-decoration: none; + padding: max(1rem, 3vw); border-radius: 0.5rem; - margin: 1rem 0.5em; - margin-bottom: 0.4em; - flex: 1 0; - cursor: pointer; - position: relative; - background-color: rgba(var(--text-color), 0.06); + background-color: rgba(var(--foreground-color), 1); +} +.intern-card h3 { + font-size: 1.2rem; +} +.intern-card .button { + padding-right: 0.2rem; } -.card > a > div:nth-of-type(3) { - position: absolute; - right: 1em; - top: 1em; - padding: 0.5em; - border-radius: 1rem; - background-color: rgba(var(--background-color)); +#intern { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1rem; + width: min(56rem, 100%); + margin: 0 auto; } -.card > a > h3 { - font-weight: 500; +#intern__details { + background-color: rgba(var(--foreground-color), 1); + padding: max(1rem, 3vw); + border-radius: 0.5rem; } -@media screen and (min-width: 640px) { - sm-popup { - --width: 24rem; +.back-button { + position: -webkit-sticky; + position: sticky; + top: 1rem; + z-index: 1; + background-color: rgba(var(--background-color), 1); + border-radius: 2rem; + padding: 0.5rem 0.6rem; +} +.back-button .icon { + height: 1em; + width: 1em; + margin-right: 0.1em; + margin-left: -0.2rem; +} + +h1 { + font-size: 2rem; +} + +#payment_history { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.payment-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + border-radius: 0.5rem; + padding: max(1rem, 2vw); + background-color: rgba(var(--foreground-color), 1); +} +.payment-card time { + font-size: 0.85rem; + color: rgba(var(--text-color), 0.8); +} +.payment-card .amount { + font-weight: 700; +} + +@media screen and (max-width: 768px) { + #intern__details { + margin: 0 -1rem; + margin-top: -5rem; + padding-top: 5rem; + border-radius: 0; + box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.06); } } - -@media screen and (max-width: 500px) { - .search { - width: 80%; +@media (any-hover: hover) { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.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 { + transition: background-color 0.2s; + } + .interact:hover { + background-color: rgba(var(--text-color), 0.04); + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..9c86982 --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +*{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: #3d5afe;--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);display:flex;flex-direction:column;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{line-height:1.7;color:rgba(var(--text-color), 0.9);max-width:70ch}img{-o-object-fit:cover;object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}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}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:inherit;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center;flex-shrink:0}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem;aspect-ratio:1/1}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}sm-input{--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon{fill:var(--accent-color)}sm-spinner{--size: 1.5rem;--stroke-width: 0.1rem}sm-copy{font-size:.9rem;font-weight:500}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.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}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.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}.text-align-left{text-align:left}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-content-start{align-content:flex-start}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-content-start{justify-content:start}.justify-content-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.space-evenly{justify-content:space-evenly}.w-100{width:100%}.h-100{height:100%}.padding-block-1{padding-block:1rem}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-right-1{margin-right:1rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-top-1{margin-top:1rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-2{margin-bottom:2rem}.margin-block-0-5{margin-block:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.hidden{display:none !important}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ws-pre-line{white-space:pre-line}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:max(1rem,3vw)}.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}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem}#main_header{display:flex;gap:1rem;align-items:center;background:rgba(var(--foreground-color), 1);justify-content:space-between;padding:1.5rem 1rem}#main_logo{height:1.5rem;width:1.5rem;fill:rgba(var(--text-color), 1)}#search_payments{position:-webkit-sticky;position:sticky;top:1rem;width:min(24rem,100% - 2rem);margin:0 auto;margin-top:1rem;--border-radius: 0.5rem;border-radius:.5rem;--padding: 1rem 1.2rem;--background: rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);border:solid thin rgba(var(--text-color), 0.2)}#intern_payment_list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(24rem, 1fr));padding:1rem;padding-bottom:4rem;margin-top:1rem;margin:0 auto}.intern-card{display:flex;flex-direction:column;gap:.8rem;color:inherit;text-decoration:none;padding:max(1rem,3vw);border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}.intern-card h3{font-size:1.2rem}.intern-card .button{padding-right:.2rem}#intern{display:flex;flex-direction:column;gap:1.5rem;padding:1rem;width:min(56rem,100%);margin:0 auto}#intern__details{background-color:rgba(var(--foreground-color), 1);padding:max(1rem,3vw);border-radius:.5rem}.back-button{position:-webkit-sticky;position:sticky;top:1rem;z-index:1;background-color:rgba(var(--background-color), 1);border-radius:2rem;padding:.5rem .6rem}.back-button .icon{height:1em;width:1em;margin-right:.1em;margin-left:-0.2rem}h1{font-size:2rem}#payment_history{display:flex;flex-direction:column;gap:1rem}.payment-card{display:flex;flex-direction:column;gap:.5rem;border-radius:.5rem;padding:max(1rem,2vw);background-color:rgba(var(--foreground-color), 1)}.payment-card time{font-size:.85rem;color:rgba(var(--text-color), 0.8)}.payment-card .amount{font-weight:700}@media screen and (max-width: 768px){#intern__details{margin:0 -1rem;margin-top:-5rem;padding-top:5rem;border-radius:0;box-shadow:0 1rem 1rem rgba(0,0,0,.06)}}@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{transition:background-color .2s}.interact:hover{background-color:rgba(var(--text-color), 0.04)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..7f87da8 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,637 @@ +* { + 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: #3d5afe; + --secondary-color: #ffac2e; + --text-color: 34, 34, 34; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); + display: flex; + flex-direction: column; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); +} + +body[data-theme="dark"] { + --accent-color: #92a2ff; + --secondary-color: #d60739; + --text-color: 200, 200, 200; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); +} +p, +strong { + line-height: 1.7; + color: rgba(var(--text-color), 0.9); + max-width: 70ch; +} + +img { + object-fit: cover; +} + +a:where([class]) { + color: inherit; + text-decoration: none; + + &:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } +} +a { + color: var(--accent-color); +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +button, +.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: inherit; + font-weight: 500; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; + flex-shrink: 0; + &:focus-visible { + outline: var(--accent-color) solid medium; + } + + &:not(:disabled) { + cursor: pointer; + } +} + +.button { + background-color: rgba(var(--text-color), 0.02); + border: solid thin rgba(var(--text-color), 0.06); + &--primary { + color: rgba(var(--background-color), 1); + background-color: var(--accent-color); + + .icon { + fill: rgba(var(--background-color), 1); + } + } + &--colored { + color: var(--accent-color); + .icon { + fill: var(--accent-color); + } + } + &--danger { + background-color: #ff737310; + color: var(--danger-color); + .icon { + fill: var(--danger-color); + } + } + + &--small { + padding: 0.4rem 0.6rem; + } + + &--outlined { + border: solid rgba(var(--text-color), 0.3) 0.1rem; + background-color: rgba(var(--foreground-color), 1); + } + &--transparent { + background-color: transparent; + } +} +button:disabled { + opacity: 0.4; + cursor: not-allowed; + filter: saturate(0); +} + +.cta { + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.8rem 1rem; +} + +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} + +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; + aspect-ratio: 1/1; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +sm-input { + --border-radius: 0.5rem; + --background-color: rgba(var(--foreground-color), 1); + + button { + .icon { + fill: var(--accent-color); + } + } +} +sm-spinner { + --size: 1.5rem; + --stroke-width: 0.1rem; +} +sm-copy { + font-size: 0.9rem; + font-weight: 500; +} + +ul { + list-style: none; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.wrap-around { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + hyphens: auto; +} + +.full-bleed { + grid-column: 1/-1; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.sticky { + position: sticky; +} + +.top-0 { + top: 0; +} + +.flex { + display: flex; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-1 { + flex: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} + +.grid { + display: grid; +} + +.flow-column { + grid-auto-flow: column; +} + +.gap-0-3 { + gap: 0.3rem; +} + +.gap-0-5 { + gap: 0.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; +} +.text-align-left { + text-align: left; +} + +.align-items-start { + align-items: flex-start; +} +.align-items-center { + align-items: center; +} +.align-content-start { + align-content: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.text-center { + text-align: center; +} + +.justify-start { + justify-items: start; +} +.justify-content-start { + justify-content: start; +} + +.justify-content-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.align-self-end { + align-self: end; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.flex-direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} +.space-evenly { + justify-content: space-evenly; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.padding-block-1 { + padding-block: 1rem; +} + +.margin-right-0-3 { + margin-right: 0.3rem; +} +.margin-right-0-5 { + margin-right: 0.5rem; +} +.margin-right-1 { + margin-right: 1rem; +} + +.margin-left-0-5 { + margin-left: 0.5rem; +} + +.margin-left-auto { + margin-left: auto; +} +.margin-right-auto { + margin-right: auto; +} +.margin-top-1 { + margin-top: 1rem; +} +.margin-bottom-0-5 { + margin-bottom: 0.5rem; +} +.margin-bottom-1 { + margin-bottom: 1rem; +} +.margin-bottom-2 { + margin-bottom: 2rem; +} + +.margin-block-0-5 { + margin-block: 0.5rem; +} +.margin-block-1 { + margin-block: 1rem; +} + +.margin-block-1-5 { + margin-block: 1.5rem; +} + +.margin-inline-1 { + margin-inline: 1rem; +} + +.margin-inline-1-5 { + margin-inline: 1.5rem; +} + +.hidden { + display: none !important; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + +.flow-column { + grid-auto-flow: column; +} +.w-100 { + width: 100%; +} + +.color-0-8 { + color: rgba(var(--text-color), 0.8); +} + +.weight-400 { + font-weight: 400; +} + +.weight-500 { + font-weight: 500; +} +.ws-pre-line { + white-space: pre-line; +} + +.card { + background-color: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + padding: max(1rem, 3vw); +} + +.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; +} +.interact { + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.observe-empty-state:empty { + display: none; +} + +.observe-empty-state:not(:empty) ~ .empty-state { + display: none; +} + +.button__icon { + height: 1.2rem; + width: 1.2rem; + + &--left { + margin-right: 0.5rem; + } + + &--right { + margin-left: 0.5rem; + } +} +#loader { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1rem; +} +#main_header { + display: flex; + gap: 1rem; + align-items: center; + background: rgba(var(--foreground-color), 1); + justify-content: space-between; + padding: 1.5rem 1rem; +} +#main_logo { + height: 1.5rem; + width: 1.5rem; + fill: rgba(var(--text-color), 1); +} +#search_payments { + position: sticky; + top: 1rem; + width: min(24rem, calc(100% - 2rem)); + margin: 0 auto; + margin-top: 1rem; + --border-radius: 0.5rem; + border-radius: 0.5rem; + --padding: 1rem 1.2rem; + --background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1.5rem rgba(0 0 0 /0.1); + border: solid thin rgba(var(--text-color), 0.2); +} +#intern_payment_list { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); + padding: 1rem; + padding-bottom: 4rem; + margin-top: 1rem; + margin: 0 auto; +} +.intern-card { + display: flex; + flex-direction: column; + gap: 0.8rem; + color: inherit; + text-decoration: none; + padding: max(1rem, 3vw); + border-radius: 0.5rem; + background-color: rgba(var(--foreground-color), 1); + h3 { + font-size: 1.2rem; + } + .button { + padding-right: 0.2rem; + } +} +#intern { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1rem; + width: min(56rem, 100%); + margin: 0 auto; +} +#intern__details { + background-color: rgba(var(--foreground-color), 1); + padding: max(1rem, 3vw); + border-radius: 0.5rem; +} +.back-button { + position: sticky; + top: 1rem; + z-index: 1; + background-color: rgba(var(--background-color), 1); + border-radius: 2rem; + padding: 0.5rem 0.6rem; + .icon { + height: 1em; + width: 1em; + margin-right: 0.1em; + margin-left: -0.2rem; + } +} +h1 { + font-size: 2rem; +} +#payment_history { + display: flex; + flex-direction: column; + gap: 1rem; +} +.payment-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + border-radius: 0.5rem; + padding: max(1rem, 2vw); + background-color: rgba(var(--foreground-color), 1); + time { + font-size: 0.85rem; + color: rgba(var(--text-color), 0.8); + } + .amount { + font-weight: 700; + } +} +@media screen and (max-width: 768px) { + #intern__details { + margin: 0 -1rem; + margin-top: -5rem; + padding-top: 5rem; + border-radius: 0; + box-shadow: 0 1rem 1rem rgba(0 0 0 /0.06); + } +} +@media (any-hover: hover) { + ::-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); + } + } + .interact { + transition: background-color 0.2s; + &:hover { + background-color: rgba(var(--text-color), 0.04); + } + } +} diff --git a/index.html b/index.html index b3587b8..76539f0 100644 --- a/index.html +++ b/index.html @@ -1,12065 +1,82 @@ -
-Getting payments from FLO blockchain
+