diff --git a/args/app-config.json b/args/app-config.json new file mode 100644 index 0000000..635cc90 --- /dev/null +++ b/args/app-config.json @@ -0,0 +1 @@ +{"secret":"9qWGMLljSaHWGfm4tfXMxukjig43fBtafjZ","port":"8080","sql_user":"user","sql_pwd":"Qwerty@123","sql_db":"exchange","sql_host":"localhost","backup-port":"8081","backup-floIDs":[]} \ No newline at end of file diff --git a/docs/css/components.js b/docs/css/components.js index 31f5316..0052889 100644 --- a/docs/css/components.js +++ b/docs/css/components.js @@ -9,30 +9,24 @@ smButton.innerHTML = ` box-sizing: border-box; } :host{ - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; width: auto; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0.6rem 1.2rem; --border-radius: 0.3rem; - --background: rgba(var(--text-color), 0.1); + --background: rgba(var(--text-color, (17,17,17)), 0.1); } :host([variant='primary']) .button{ - background: var(--accent-color); - color: rgba(var(--background-color), 1); + background: var(--accent-color,teal); + color: rgba(var(--background-color, (255,255,255)), 1); } :host([variant='outlined']) .button{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset; - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset; + box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset; background: transparent; - color: var(--accent-color); + color: var(--accent-color,teal); } :host([variant='no-outline']) .button{ background: inherit; - color: var(--accent-color); + color: var(--accent-color,teal); } :host([disabled]){ pointer-events: none; @@ -40,19 +34,12 @@ smButton.innerHTML = ` } .button { position: relative; - display: -webkit-box; - display: -ms-flexbox; display: flex; width: 100%; padding: var(--padding); cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; border-radius: var(--border-radius); - -webkit-box-pack: center; - -ms-flex-pack: center; justify-content: center; transition: box-shadow 0.3s, background-color 0.3s; font-family: inherit; @@ -70,8 +57,8 @@ smButton.innerHTML = ` pointer-events: none; cursor: not-allowed; opacity: 0.6; - color: rgba(var(--text-color), 1); - background-color: rgba(var(--text-color), 0.3); + color: rgba(var(--text-color, (17,17,17)), 1); + background-color: rgba(var(--text-color, (17,17,17)), 0.3); } @media (hover: hover){ :host(:not([disabled])) .button:hover, @@ -81,8 +68,8 @@ smButton.innerHTML = ` } :host([variant='outlined']:not([disabled])) .button:hover, :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); } } @media (hover: none){ @@ -91,8 +78,8 @@ smButton.innerHTML = ` box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2); } :host([variant='outlined']) .button:active{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); } } @@ -153,27 +140,26 @@ customElements.define('sm-button', }) const smForm = document.createElement('template'); smForm.innerHTML = ` - -
- -
-`; + +
+ +
+ `; customElements.define('sm-form', class extends HTMLElement { constructor() { @@ -215,9 +201,9 @@ customElements.define('sm-form', class extends HTMLElement { } } handleKeydown(e) { - if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA') { + if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) { if (this.allRequiredValid) { - if (this.submitButton && this.submitButton.tagName === 'SM-BUTTON') { + if (this.submitButton) { this.submitButton.click() } this.dispatchEvent(new CustomEvent('submit', { @@ -257,231 +243,207 @@ customElements.define('sm-form', class extends HTMLElement { const smInput = document.createElement('template') smInput.innerHTML = ` - -
- -

-
-`; + .hide{ + display: none !important; + } + button{ + display: flex; + border: none; + background: none; + padding: 0; + border-radius: 1rem; + min-width: 0; + cursor: pointer; + } + button:focus{ + outline: var(--accent-color, teal) solid medium; + } + .icon { + height: 1.4rem; + width: 1.4rem; + fill: rgba(var(--text-color, (17,17,17)), 0.6); + } + + :host(.round) .input{ + border-radius: 10rem; + } + .input { + display: flex; + cursor: text; + min-width: 0; + text-align: left; + align-items: center; + position: relative; + gap: var(--icon-gap); + padding: var(--padding, 0.6rem 0.8rem); + border-radius: var(--border-radius,0.3rem); + transition: opacity 0.3s, box-shadow 0.2s; + background: var(--background); + width: 100%; + outline: none; + min-height: 3.5rem; + } + .input.readonly .clear{ + opacity: 0 !important; + margin-right: -2rem; + pointer-events: none !important; + } + .readonly{ + pointer-events: none; + } + .input:focus-within:not(.readonly){ + box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; + } + .disabled{ + pointer-events: none; + opacity: 0.6; + } + .label { + grid-area: 1/1/2/2; + font-size: inherit; + opacity: .7; + font-weight: 400; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s, color .03; + transform-origin: left; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + width: 100%; + user-select: none; + will-change: transform; + } + .outer-container{ + position: relative; + width: var(--width); + } + .container{ + width: 100%; + display: grid; + grid-template-columns: 1fr auto; + position: relative; + align-items: center; + } + input{ + grid-area: 1/1/2/2; + font-size: inherit; + border: none; + background: transparent; + outline: none; + color: inherit; + font-family: inherit; + width: 100%; + caret-color: var(--accent-color, teal); + } + :host([animate]) .input:focus-within .container input, + .animate-placeholder .container input { + -webkit-transform: translateY(0.6rem); + -ms-transform: translateY(0.6rem); + transform: translateY(0.6rem); + } + + :host([animate]) .input:focus-within .label, + .animate-placeholder .label { + -webkit-transform: translateY(-0.7em) scale(0.8); + -ms-transform: translateY(-0.7em) scale(0.8); + transform: translateY(-0.7em) scale(0.8); + opacity: 1; + color: var(--accent-color,teal) + } + :host([variant="outlined"]) .input { + box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; + background: rgba(var(--background-color, (255,255,255)), 1); + } + .animate-placeholder:focus-within:not(.readonly) .label{ + color: var(--accent-color,teal) + } + .feedback-text:not(:empty){ + display: flex; + width: 100%; + text-align: left; + font-size: 0.9rem; + align-items: center; + padding: 0.8rem 0; + color: rgba(var(--text-color, (17,17,17)), 0.8); + } + .success{ + color: var(--success-color); + } + .error{ + color: var(--danger-color); + } + .status-icon{ + margin-right: 0.2rem; + } + .status-icon--error{ + fill: var(--danger-color); + } + .status-icon--success{ + fill: var(--success-color); + } + @media (any-hover: hover){ + .icon:hover{ + background: rgba(var(--text-color, (17,17,17)), 0.1); + } + } + +
+ +

+
+ `; customElements.define('sm-input', class extends HTMLElement { @@ -500,11 +462,11 @@ customElements.define('sm-input', this._helperText = ''; this._errorText = ''; this.isRequired = false; - this.hideRequired = false; this.validationFunction = undefined; this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']; this.reset = this.reset.bind(this); + this.clear = this.clear.bind(this); this.focusIn = this.focusIn.bind(this); this.focusOut = this.focusOut.bind(this); this.fireEvent = this.fireEvent.bind(this); @@ -590,9 +552,9 @@ customElements.define('sm-input', this.feedbackText.classList.add('error'); this.feedbackText.classList.remove('success'); this.feedbackText.innerHTML = ` - - ${this._errorText} - `; + + ${this._errorText} + `; } } return (_isValid && _customValid); @@ -601,6 +563,10 @@ customElements.define('sm-input', reset() { this.value = ''; } + clear() { + this.value = ''; + this.input.focus(); + } focusIn() { this.input.focus(); @@ -625,22 +591,20 @@ customElements.define('sm-input', this.clearBtn.classList.remove('hide'); } else { this.clearBtn.classList.add('hide'); - if (this.isRequired && !this.hideRequired) { - this.feedbackText.textContent = '*required'; - } } } if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; if (this.input.value !== '') { if (this.animate) - this.inputParent.classList.add('animate-label'); + this.inputParent.classList.add('animate-placeholder'); else this.label.classList.add('hide'); } else { if (this.animate) - this.inputParent.classList.remove('animate-label'); + this.inputParent.classList.remove('animate-placeholder'); else this.label.classList.remove('hide'); + this.feedbackText.textContent = ''; } } vibrate() { @@ -661,7 +625,7 @@ customElements.define('sm-input', this.animate = this.hasAttribute('animate'); this.setAttribute('role', 'textbox'); this.input.addEventListener('input', this.checkInput); - this.clearBtn.addEventListener('click', this.reset); + this.clearBtn.addEventListener('click', this.clear); } attributeChangedCallback(name, oldValue, newValue) { @@ -694,11 +658,6 @@ customElements.define('sm-input', } else if (name === 'required') { this.isRequired = this.hasAttribute('required'); - if (this.isRequired && !this.hideRequired) { - this.feedbackText.textContent = ''; - } else { - this.feedbackText.textContent = '*required'; - } if (this.isRequired) { this.setAttribute('aria-required', 'true'); } @@ -706,9 +665,6 @@ customElements.define('sm-input', this.setAttribute('aria-required', 'false'); } } - else if (name === 'hiderequired') { - this.hideRequired = this.hasAttribute('hiderequired') - } else if (name === 'readonly') { if (this.hasAttribute('readonly')) { this.inputParent.classList.add('readonly'); @@ -728,158 +684,156 @@ customElements.define('sm-input', } disconnectedCallback() { this.input.removeEventListener('input', this.checkInput); - this.clearBtn.removeEventListener('click', this.reset); + this.clearBtn.removeEventListener('click', this.clear); } }) + const smNotifications = document.createElement('template') smNotifications.innerHTML = ` - -
-` - + +
+ `; customElements.define('sm-notifications', class extends HTMLElement { constructor() { super(); @@ -898,7 +852,23 @@ customElements.define('sm-notifications', class extends HTMLElement { this.createNotification = this.createNotification.bind(this) this.removeNotification = this.removeNotification.bind(this) this.clearAll = this.clearAll.bind(this) + this.handlePointerMove = this.handlePointerMove.bind(this) + + this.startX = 0; + this.currentX = 0; + this.endX = 0; + this.swipeDistance = 0; + this.swipeDirection = ''; + this.swipeThreshold = 0; + this.startTime = 0; + this.swipeTime = 0; + this.swipeTimeThreshold = 200; + this.currentTarget = null; + + this.mediaQuery = window.matchMedia('(min-width: 640px)') + this.handleOrientationChange = this.handleOrientationChange.bind(this) + this.isLandscape = false } randString(length) { @@ -911,21 +881,21 @@ customElements.define('sm-notifications', class extends HTMLElement { createNotification(message, options = {}) { const { pinned = false, icon = '' } = options; - const notification = document.createElement('div') + const notification = document.createElement('output') notification.id = this.randString(8) notification.classList.add('notification'); let composition = ``; composition += ` -
${icon}
-

${message}

- `; +
${icon}
+

${message}

+ `; if (pinned) { notification.classList.add('pinned'); composition += ` - - `; + + `; } notification.innerHTML = composition; return notification; @@ -933,28 +903,45 @@ customElements.define('sm-notifications', class extends HTMLElement { push(message, options = {}) { const notification = this.createNotification(message, options); - this.notificationPanel.append(notification); + if (this.isLandscape) + this.notificationPanel.append(notification); + else + this.notificationPanel.prepend(notification); + this.notificationPanel.animate( + [ + { + transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions + ) notification.animate([ { - transform: `translateY(1rem)`, + transform: `translateY(-1rem)`, opacity: '0' }, { transform: `none`, opacity: '1' }, - ], this.animationOptions); + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } return notification.id; } - removeNotification(notification) { + removeNotification(notification, direction = 'left') { + const sign = direction === 'left' ? '-' : '+'; notification.animate([ { - transform: `none`, + transform: this.currentX ? `translateX(${this.currentX}px)` : `none`, opacity: '1' }, { - transform: `translateY(0.5rem)`, + transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: '0' } ], this.animationOptions).onfinish = () => { @@ -968,7 +955,70 @@ customElements.define('sm-notifications', class extends HTMLElement { }); } + handlePointerMove(e) { + this.currentX = e.clientX - this.startX; + this.currentTarget.style.transform = `translateX(${this.currentX}px)`; + } + + handleOrientationChange(e) { + this.isLandscape = e.matches + if (e.matches) { + // landscape + + } else { + // portrait + } + } connectedCallback() { + + this.handleOrientationChange(this.mediaQuery); + + this.mediaQuery.addEventListener('change', this.handleOrientationChange); + this.notificationPanel.addEventListener('pointerdown', e => { + if (e.target.closest('.notification')) { + this.swipeThreshold = this.clientWidth / 2; + this.currentTarget = e.target.closest('.notification'); + this.currentTarget.setPointerCapture(e.pointerId); + this.startTime = Date.now(); + this.startX = e.clientX; + this.startY = e.clientY; + this.notificationPanel.addEventListener('pointermove', this.handlePointerMove); + } + }); + this.notificationPanel.addEventListener('pointerup', e => { + this.endX = e.clientX; + this.endY = e.clientY; + this.swipeDistance = Math.abs(this.endX - this.startX); + this.swipeTime = Date.now() - this.startTime; + if (this.endX > this.startX) { + this.swipeDirection = 'right'; + } else { + this.swipeDirection = 'left'; + } + if (this.swipeTime < this.swipeTimeThreshold) { + if (this.swipeDistance > 50) + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + if (this.swipeDistance > this.swipeThreshold) { + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + this.currentTarget.animate([ + { + transform: `translateX(${this.currentX}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } + } + } + this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove) + this.notificationPanel.releasePointerCapture(e.pointerId); + this.currentX = 0; + }); this.notificationPanel.addEventListener('click', e => { if (e.target.closest('.close')) { this.removeNotification(e.target.closest('.notification')); @@ -990,7 +1040,11 @@ customElements.define('sm-notifications', class extends HTMLElement { childList: true, }); } + disconnectedCallback() { + mediaQueryList.removeEventListener('change', handleOrientationChange); + } }); + class Stack { constructor() { this.items = []; @@ -1023,9 +1077,6 @@ smPopup.innerHTML = ` display: -ms-grid; display: grid; z-index: 10; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --width: 100%; --height: auto; --min-width: auto; @@ -1080,7 +1131,7 @@ smPopup.innerHTML = ` min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } @@ -1140,7 +1191,7 @@ smPopup.innerHTML = ` .handle{ height: 0.3rem; width: 2rem; - background: rgba(var(--text-color), .4); + background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } @@ -1151,10 +1202,10 @@ smPopup.innerHTML = ` } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color, (17,17,17))), 0.5); } } } @@ -1405,7 +1456,7 @@ customElements.define('sm-popup', class extends HTMLElement { } updateFocusableList() { - this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])') + this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])') this.autoFocus = this.querySelector('[autofocus]') } @@ -1467,17 +1518,12 @@ spinner.innerHTML = ` -webkit-box-sizing: border-box; box-sizing: border-box; } -:host{ - --accent-color: #4d2588; - --height: 1.6rem; - --width: 1.6rem; -} .loader { - height: var(--height); - width: var(--weight); + height: var(--size, 1.5rem); + width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; - stroke: var(--accent-color); + stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; @@ -1501,7 +1547,7 @@ spinner.innerHTML = ` `; -class SquareLoader extends HTMLElement { +class SpinnerLoader extends HTMLElement { constructor() { super(); this.attachShadow({ @@ -1509,7 +1555,7 @@ class SquareLoader extends HTMLElement { }).append(spinner.content.cloneNode(true)); } } -window.customElements.define('sm-spinner', SquareLoader); +window.customElements.define('sm-spinner', SpinnerLoader); const themeToggle = document.createElement('template'); themeToggle.innerHTML = ` @@ -1544,7 +1590,7 @@ themeToggle.innerHTML = ` pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); - background-color: rgba(var(--text-color), 0.12); + background-color: rgba(var(--text-color,(17,17,17)), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; @@ -1557,7 +1603,7 @@ themeToggle.innerHTML = ` position: absolute; height: 100%; width: 100%; - fill: rgba(var(--text-color), 1); + fill: rgba(var(--text-color,(17,17,17)), 1); transition: transform 0.3s, opacity 0.1s; } @@ -1601,6 +1647,9 @@ class ThemeToggle extends HTMLElement { static get observedAttributes() { return ['checked']; } + get theme() { + return this.hasTheme; + } daylight() { this.hasTheme = 'light'; @@ -1703,13 +1752,8 @@ smCopy.innerHTML = ` :host{ display: -webkit-box; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0; - --background-color: inherit; - --button-background-color: rgba(var(--text-color), 0.2); - --button-border-radius: 0.3rem; + --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2); } .copy{ display: grid; @@ -1719,10 +1763,15 @@ smCopy.innerHTML = ` align-items: center; grid-template-columns: minmax(0, 1fr) auto; } -.copy-content{ +:host(:not([clip-text])) .copy-content{ overflow-wrap: break-word; word-wrap: break-word; } +:host([clip-text]) .copy-content{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .copy-button{ display: inline-flex; justify-content: center; @@ -1730,7 +1779,7 @@ smCopy.innerHTML = ` border: none; padding: 0.4rem; background-color: inherit; - border-radius: var(--button-border-radius); + border-radius: var(--button-border-radius, 0.3rem); } .copy-button:active{ background-color: var(--button-background-color); @@ -1738,7 +1787,7 @@ smCopy.innerHTML = ` .icon{ height: 1.2rem; width: 1.2rem; - fill: rgba(var(--text-color), 0.8); + fill: rgba(var(--text-color, (17,17,17)), 0.8); } @media (any-hover: hover){ .copy:hover .copy-button{ @@ -1811,134 +1860,130 @@ customElements.define('sm-copy', }); const stripSelect = document.createElement('template'); stripSelect.innerHTML = ` - -
-
- -
- + +
+
+ +
+ +
+ +
- -
-
- -`; + + `; customElements.define('strip-select', class extends HTMLElement { constructor() { super(); @@ -2078,47 +2123,41 @@ customElements.define('strip-select', class extends HTMLElement { //Strip option const stripOption = document.createElement('template'); stripOption.innerHTML = ` - - -`; + + + `; customElements.define('strip-option', class extends HTMLElement { constructor() { super(); @@ -2177,7 +2216,7 @@ slideButton.innerHTML = ` display: flex; align-items: center; width: 100%; - background-color: rgba(var(--text-color), 0.1); + background-color: rgba(var(--text-color,(17,17,17)), 0.1); border-radius: var(--button-border-radius, 0.3rem); overscroll-behavior: contain; touch-action: pan; @@ -2213,7 +2252,7 @@ slideButton.innerHTML = ` } :host([disabled]) .slide-thumb{ pointer-events: none; - background-color: rgba(var(--text-color), 0.5); + background-color: rgba(var(--text-color,(17,17,17)), 0.5); }
@@ -2321,9 +2360,6 @@ smSelect.innerHTML = ` display: -webkit-box; display: -ms-flexbox; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --min-width: 100%; } :host([disabled]) .select{ @@ -2347,7 +2383,7 @@ smSelect.innerHTML = ` height: 1.2rem; width: 1.2rem; margin-left: 0.5rem; - fill: rgba(var(--text-color), 0.7); + fill: rgba(var(--text-color, (17,17,17)), 0.7); } .selected-option-text{ font-size: inherit; @@ -2365,7 +2401,7 @@ smSelect.innerHTML = ` grid-template-columns: 1fr auto; grid-template-areas: 'heading heading' '. .'; padding: var(--padding,0.6rem 0.8rem); - background: rgba(var(--text-color), 0.06); + background: rgba(var(--text-color,(17,17,17)), 0.06); -webkit-box-align: center; -ms-flex-align: center; align-items: center; @@ -2373,8 +2409,8 @@ smSelect.innerHTML = ` z-index: 2; } .selection:focus{ - -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color); - box-shadow: 0 0 0 0.1rem var(--accent-color) + -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal); + box-shadow: 0 0 0 0.1rem var(--accent-color, teal) } :host([align-select="left"]) .options{ left: 0; @@ -2398,8 +2434,8 @@ smSelect.innerHTML = ` flex-direction: column; min-width: var(--min-width); max-height: var(--max-height, auto); - background: rgba(var(--background-color), 1); - border: solid 1px rgba(var(--text-color), 0.2); + background: rgba(var(--background-color,(255,255,255)), 1); + border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2); border-radius: var(--border-radius, 0.5rem); z-index: 1; -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030; @@ -2420,10 +2456,10 @@ smSelect.innerHTML = ` } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color,(17,17,17)), 0.5); } } } @@ -2684,13 +2720,13 @@ smOption.innerHTML = ` } :host(:focus){ outline: none; - background: rgba(var(--text-color), 0.1); + background: rgba(var(--text-color,(17,17,17)), 0.1); } .icon { opacity: 0; height: 1.2rem; width: 1.2rem; - fill: rgba(var(--text-color), 0.8); + fill: rgba(var(--text-color,(17,17,17)), 0.8); } :host(:focus) .option .icon{ opacity: 0.4 @@ -2700,7 +2736,7 @@ smOption.innerHTML = ` } @media (hover: hover){ .option:hover{ - background: rgba(var(--text-color), 0.1); + background: rgba(var(--text-color,(17,17,17)), 0.1); } :host(:not(.check-selected):hover) .icon{ opacity: 0.4 @@ -2738,13 +2774,10 @@ smCheckbox.innerHTML = ` display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --height: 1.2rem; --width: 1.2rem; --border-radius: 0.2rem; - --border-color: rgba(var(--text-color), 0.7); + --border-color: rgba(var(--text-color,(17,17,17)), 0.7); } :host([disabled]) { opacity: 0.6; @@ -2769,7 +2802,7 @@ smCheckbox.innerHTML = ` } .checkbox:active .icon, .checkbox:focus-within .icon{ - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; } input { @@ -2786,11 +2819,11 @@ smCheckbox.innerHTML = ` :host([checked]) .checkmark { stroke-dashoffset: 0; - stroke: rgba(var(--background-color), 1); + stroke: rgba(var(--background-color,(255,255,255)), 1); } :host([checked]) .icon { - background: var(--accent-color); - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + background: var(--accent-color, teal); + box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; } .icon { fill: none; @@ -2919,389 +2952,73 @@ customElements.define('sm-checkbox', class extends HTMLElement { this.removeEventListener('change', this.handleClick) } }) -const smTabHeader = document.createElement('template') -smTabHeader.innerHTML = ` - -
-
- -
-
-
-`; -customElements.define('sm-tab-header', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTabHeader.content.cloneNode(true)) - - this.prevTab - this.allTabs - this.activeTab - - this.indicator = this.shadowRoot.querySelector('.indicator'); - this.tabSlot = this.shadowRoot.querySelector('slot'); - this.tabHeader = this.shadowRoot.querySelector('.tab-header'); - - this.changeTab = this.changeTab.bind(this) - this.handleClick = this.handleClick.bind(this) - this.handlePanelChange = this.handlePanelChange.bind(this) - this.moveIndiactor = this.moveIndiactor.bind(this) - } - - fireEvent(index) { - this.dispatchEvent( - new CustomEvent(`switchedtab${this.target}`, { - bubbles: true, - detail: { - index: parseInt(index) - } - }) - ) - } - - moveIndiactor(tabDimensions) { - this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) - } - - - changeTab(target) { - if (target === this.prevTab || !target.closest('sm-tab')) - return - if (this.prevTab) - this.prevTab.classList.remove('active') - target.classList.add('active') - - this.tabHeader.scrollTo({ - behavior: 'smooth', - left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft - }) - this.moveIndiactor(target.getBoundingClientRect()) - this.prevTab = target; - this.activeTab = target; - } - handleClick(e) { - if (e.target.closest('sm-tab')) { - this.changeTab(e.target) - this.fireEvent(e.target.dataset.index) - } - } - - handlePanelChange(e) { - this.changeTab(this.allTabs[e.detail.index]) - } - - connectedCallback() { - if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; - this.target = this.getAttribute('target') - - this.tabSlot.addEventListener('slotchange', () => { - this.allTabs = this.tabSlot.assignedElements(); - this.allTabs.forEach((tab, index) => { - tab.dataset.index = index - }) - }) - - this.addEventListener('click', this.handleClick) - document.addEventListener(`switchedpanel${this.target}`, this.handlePanelChange) - - let resizeObserver = new ResizeObserver(entries => { - entries.forEach((entry) => { - if (this.prevTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } - }) - }) - resizeObserver.observe(this) - let observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - this.indicator.style.transition = 'none' - if (this.activeTab) { - let tabDimensions = this.activeTab.getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - } else { - this.allTabs[0].classList.add('active') - let tabDimensions = this.allTabs[0].getBoundingClientRect(); - this.moveIndiactor(tabDimensions) - this.fireEvent(0) - this.prevTab = this.tabSlot.assignedElements()[0]; - this.activeTab = this.prevTab; - } - } - }) - }, { - threshold: 1.0 - }) - observer.observe(this) - } - disconnectedCallback() { - this.removeEventListener('click', this.handleClick) - document.removeEventListener(`switchedpanel${this.target}`, this.handlePanelChange) - } -}) - -// tab -const smTab = document.createElement('template') -smTab.innerHTML = ` - -
- -
-`; - -customElements.define('sm-tab', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smTab.content.cloneNode(true)) - } -}) - -// tab-panels - -const smTabPanels = document.createElement('template') -smTabPanels.innerHTML = ` - -
- Nothing to see here. -
+
`; - -customElements.define('sm-tab-panels', class extends HTMLElement { +class LineLoader extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(smTabPanels.content.cloneNode(true)) - - this.isTransitioning = false - - this.panelContainer = this.shadowRoot.querySelector('.panel-container'); - this.handleTabChange = this.handleTabChange.bind(this) + }).append(lineLoader.content.cloneNode(true)); } - handleTabChange(e) { - this.isTransitioning = true - this.panelContainer.scrollTo({ - left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft, - behavior: 'smooth' - }) - setTimeout(() => { - this.isTransitioning = false - }, 300); - } - fireEvent(index) { - this.dispatchEvent( - new CustomEvent(`switchedpanel${this.id}`, { - bubbles: true, - detail: { - index: parseInt(index) - } - }) - ) - } - connectedCallback() { - const slot = this.shadowRoot.querySelector('slot'); - slot.addEventListener('slotchange', (e) => { - this.allPanels = e.target.assignedElements() - this.allPanels.forEach((panel, index) => { - panel.dataset.index = index - intersectionObserver.observe(panel) - }) - }) - document.addEventListener(`switchedtab${this.id}`, this.handleTabChange) - - const intersectionObserver = new IntersectionObserver(entries => { - - entries.forEach(entry => { - if (!this.isTransitioning && entry.isIntersecting) { - this.fireEvent(entry.target.dataset.index) - } - }) - }, { - threshold: 0.6 - }) - } - disconnectedCallback() { - intersectionObserver.disconnect() - document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange) - } -}) \ No newline at end of file +} +window.customElements.define('line-loader', LineLoader); diff --git a/docs/css/main.css b/docs/css/main.css index 160d012..50eb702 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -16,38 +16,29 @@ body { } body { - color: rgba(var(--text-color), 1); - background: rgba(var(--background-color), 1); -} -body, -body * { --accent-color: #504dff; - --accent-color--light: #eeeeff; - --text-color: 36, 36, 36; - --background-color: 255, 255, 255; - --foreground-color: rgb(250, 252, 255); + --text-color: 20, 20, 20; + --background-color: 240, 240, 240; + --foreground-color: 250, 250, 250; --danger-color: rgb(255, 75, 75); --green: #1cad59; - --yellow: #f3a600; - --loan-color: rgb(255, 171, 93); scrollbar-width: thin; + scrollbar-gutter: stable; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); + transition: background-color 0.3s; } -body[data-theme=dark], -body[data-theme=dark] * { +body[data-theme=dark] { --accent-color: #a3a1ff; - --accent-color--light: rgba(142, 140, 255, 0.06); - --text-color: 230, 230, 230; - --text-color-light: 170, 170, 170; + --text-color: 220, 220, 220; --background-color: 10, 10, 10; - --foreground-color: rgb(24, 24, 24); + --foreground-color: 24, 24, 24; --danger-color: rgb(255, 106, 106); --green: #00e676; - --yellow: #ffd13a; - --loan-color: rgb(255, 232, 170); } body[data-theme=dark] sm-popup::part(popup) { - background-color: var(--foreground-color); + background-color: rgba(var(--foreground-color), 1); } p, @@ -128,7 +119,6 @@ a:any-link:focus-visible { sm-input { font-size: 0.9rem; --border-radius: 0.3rem; - --background: var(--accent-color--light); } sm-button { @@ -149,6 +139,10 @@ sm-button.danger { color: rgba(var(--background-color), 1); } +sm-form { + --gap: 1rem; +} + ul { list-style: none; } @@ -166,7 +160,7 @@ ul { pointer-events: none; } -.hide-completely { +.hide { display: none !important; } @@ -313,45 +307,41 @@ ul { .interact { position: relative; + overflow: hidden; cursor: pointer; - transition: transform 0.3s; -webkit-tap-highlight-color: transparent; } -.empty-state { - display: grid; - justify-content: center; - text-align: center; - width: 100%; - max-width: none; - padding: 1.5rem; -} - -.observe-empty-state:empty { - display: none; -} - -.observe-empty-state:not(:empty) + .empty-state { - display: none; +.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; } .icon { - width: 1.5rem; - height: 1.5rem; + width: 1.2rem; + height: 1.2rem; fill: rgba(var(--text-color), 0.8); } -.button__icon { - height: 1.2rem; - width: 1.2rem; -} -.button__icon--left { +.margin-right-0-5 { margin-right: 0.5rem; } -.button__icon--right { + +.margin-left-0-5 { margin-left: 0.5rem; } +.icon-only { + padding: 0.6rem; + aspect-ratio: 1/1; + background-color: transparent; +} + .icon-button { padding: 0.6rem; border-radius: 0.8rem; @@ -364,6 +354,31 @@ ul { fill: var(--accent-color); } +.empty-state { + display: grid; + text-align: center; + justify-items: center; + width: 100%; + max-width: none; + padding: 1.5rem; +} +.empty-state__icon { + height: 3rem; + width: 3rem; + padding: 0.6rem; + border-radius: 1rem; + background-color: rgba(var(--text-color), 0.06); + margin-bottom: 1rem; +} + +.observe-empty-state:empty { + display: none !important; +} + +.observe-empty-state:not(:empty) + .empty-state { + display: none !important; +} + #confirmation_popup, #prompt_popup { flex-direction: column; @@ -392,17 +407,11 @@ ul { margin-bottom: 1.5rem; } -button:active, -.button:active, -.interact:active { - transform: scale(0.96); -} - .popup__header { display: grid; gap: 0.5rem; width: 100%; - padding: 0 1.5rem 0 0.5rem; + padding: 0 1.5rem 0 0.8rem; align-items: center; grid-template-columns: auto 1fr auto; } @@ -457,8 +466,8 @@ details[open] > summary .icon { strip-select { --gap: 0; - background-color: var(--accent-color--light); - border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.2rem; } strip-option { @@ -469,10 +478,10 @@ strip-option { --active-option-background-color: var(--accent-color); } strip-option:first-of-type { - --border-radius: 0.3rem 0 0 0.3rem; + --border-radius: 0.2rem 0 0 0.2rem; } strip-option:last-of-type { - --border-radius: 0 0.3rem 0.3rem 0; + --border-radius: 0 0.2rem 0.2rem 0; } sm-select, @@ -494,6 +503,17 @@ sm-checkbox { line-height: 1.5; } +.tip { + border-radius: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + padding: 0.3rem 0.8rem; + font-size: 0.85rem; +} +.tip .icon { + fill: var(--accent-color); + flex-shrink: 0; +} + .page-layout { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; @@ -506,6 +526,10 @@ sm-checkbox { height: 100%; } +.mobile-page { + align-items: flex-start; +} + #landing { grid-template-rows: auto 1fr; } @@ -547,10 +571,15 @@ sm-checkbox { #home { height: 100%; - display: grid; + display: flex; + flex-direction: column; align-items: flex-start; align-content: flex-start; - grid-template-columns: minmax(0, 1fr); +} + +#login_form { + width: min(24rem, 100%); + margin: 0 auto; } #login_form__priv_key { @@ -558,28 +587,79 @@ sm-checkbox { } #main_header { - margin-top: 1.5rem; - margin-bottom: 1rem; display: grid; gap: 1rem; + padding: 1.5rem; + width: 100%; align-items: center; grid-template-columns: 1fr auto auto; grid-column: 1/-1; } -.rate-card { - grid-template-columns: auto 1fr auto; - gap: 1rem; - padding: 1rem; - border-radius: 0.5rem; - border: solid rgba(var(--text-color), 0.2) thin; - background-color: rgba(var(--background-color), 1); +#main_navbar { + width: 100%; } -#trade_form, -#login_form { - align-self: flex-start; - padding: 1rem 1.5rem 1.5rem 1.5rem; +.main_navbar__item { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + padding: 0.5rem 0; +} +.main_navbar__item .item__title, +.main_navbar__item .icon { + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s; +} +.main_navbar__item .item__title { + color: rgba(var(--text-color), 0.8); + font-size: 0.8rem; + font-weight: 500; +} +.main_navbar__item .icon { + height: 1.2rem; + margin-bottom: 0.3rem; +} +.main_navbar__item--active .item__title { + color: var(--accent-color); +} +.main_navbar__item--active .icon { + fill: var(--accent-color); +} + +#pages_container { + display: flex; + flex: 1; + width: 100%; + justify-content: center; + overflow-y: auto; + padding: 0 1.5rem; +} +#pages_container > * { + min-width: min(26rem, 100%); +} + +.listed-asset { + position: relative; + grid-template-columns: auto 1fr auto; + gap: 0.5rem; + padding: 1rem 0; + border-radius: 0.5rem; + opacity: 0.8; + font-weight: 400; + transition: background-color 0.3s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: inherit; +} +.listed-asset__icon { + display: flex; +} +.listed-asset__icon .icon { + height: 1.5rem; + width: 1.5rem; } .quantity-selector .button { @@ -588,6 +668,10 @@ sm-checkbox { margin-left: 0.5rem; } +#quantity_selector_tip::first-letter { + text-transform: uppercase; +} + #quantity_type, #wallet_quantity_type { font-size: 0.8rem; @@ -600,34 +684,55 @@ sm-checkbox { min-width: 8ch; } -#my_orders_section, -#market_orders_section { - padding-top: 1rem; +#exchange_wrapper { + display: flex; + flex-direction: column; + height: 100%; } -#my_orders_section .icon, -#market_orders_section .icon { - height: 1.2rem; - width: 1.2rem; + +#asset_page { + display: flex; + flex-direction: column; + height: 100%; +} + +#asset_page__nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0; +} +#asset_page__nav .icon-only { + margin-left: -0.7rem; +} + +#trade_form { + height: 100%; +} +#trade_form::part(form) { + display: flex; + flex-direction: column; + gap: 0; +} +#trade_form > * { + margin-bottom: 1rem; +} +#trade_form > :last-child { + margin-top: auto; +} + +#my_orders, +#market { + width: min(42rem, 100%); + grid-template-rows: auto 1fr; } .orders_section__header { - padding: 0 1.5rem; -} - -#my_orders_section__header { - height: 2.4rem; -} - -#orders_section__header--primary sm-tab-header { - --gap: 1.5rem; -} -#orders_section__header--primary sm-tab { - font-size: 0.9rem; - --padding: 0.8rem 0; + min-height: 2.8rem; } .list__item { - padding: 0.5rem 1.5rem; + padding: 0.5rem 0; display: grid; } @@ -643,6 +748,7 @@ sm-checkbox { padding: 0.5rem 1.5rem 0.5rem 0.5rem; grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content; grid-template-columns: min-content repeat(3, 1fr) min-content; + border-radius: 0.5rem; } .order-card__type { font-size: 0.9rem; @@ -716,13 +822,14 @@ sm-checkbox { } #market_orders_list .list__header { margin-bottom: 0.5rem; - padding: 0 1.5rem; grid-template-columns: repeat(3, 1fr) 2rem; } -#user_section { +#wallet { + display: grid; + width: auto; gap: 1.5rem; - padding: 1.5rem; + grid-template-columns: minmax(0, 1fr); align-content: flex-start; } @@ -741,19 +848,29 @@ sm-checkbox { margin-bottom: 0.2rem; } +#my_assets { + gap: 0.5rem; + margin-top: 0.5rem; +} + .balance-card { display: grid; align-items: center; - gap: 0.3rem 1rem; - padding: 0.5rem 0; + gap: 0 0.5rem; border-radius: 0.5rem; + background-color: rgba(var(--foreground-color), 1); + padding: 0.5rem; } .balance-card.is-locked { - grid-template-columns: auto 1fr; - gap: 1rem; + padding: 1rem 0.5rem; + grid-template-columns: auto 1fr auto; + gap: 0.5rem; +} +.balance-card.is-locked .balance-card__icon { + grid-row: span 2; } .balance-card:not(.is-locked) { - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr auto auto; } .balance-card__icon { display: flex; @@ -773,7 +890,7 @@ sm-checkbox { font-weight: 500; } .balance-card__amount-wrapper { - grid-column: span 2; + grid-column: 2/3; gap: 0.3rem 1rem; grid-template-columns: 1fr 1fr; } @@ -829,6 +946,12 @@ sm-checkbox { opacity: 1; } } +#wallet_result__cta { + padding: 1.5rem 1rem; + border-radius: 0.5rem; + background-color: rgba(var(--text-color), 0.06); +} + .stateful-button-wrapper { display: flex; position: relative; @@ -935,61 +1058,37 @@ sm-checkbox { } @media screen and (max-width: 40rem) and (any-hover: none) { .cancel-order span { - display: none; + display: none !important; } } @media screen and (max-width: 40rem) { - #main_header { - padding: 0 1.5rem; - } - sm-button { --padding: 0.9rem 1.6rem; } - #home > :last-child { - padding-bottom: 5rem; + .empty-state { + align-self: center; } - #bottom_nav { - position: fixed; - bottom: 0; - background-color: var(--foreground-color); - width: 100%; - } - - .bottom_nav__item { - display: flex; - flex-direction: column; - align-items: center; - flex: 1; - padding: 0.5rem 0; - } - .bottom_nav__item .item__title, -.bottom_nav__item .icon { - transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - .bottom_nav__item .item__title { - color: rgba(var(--text-color), 0.8); - font-size: 0.8rem; - font-weight: 500; - } - .bottom_nav__item .icon { - height: 1.2rem; - margin-bottom: 0.3rem; - } - .bottom_nav__item--active .item__title { - color: var(--accent-color); + .main_navbar__item--active .item__title { transform: translateY(100%); opacity: 0; } - .bottom_nav__item--active .icon { + .main_navbar__item--active .icon { transform: translateY(50%) scale(1.2); - fill: var(--accent-color); } .hide-on-mobile { - display: none; + display: none !important; + } + + .listed-asset { + border-radius: 0; + border-bottom: solid thin rgba(var(--text-color), 0.1); + } + + #price_chart_container { + flex: 1; } } @media screen and (min-width: 40rem) { @@ -1014,7 +1113,7 @@ sm-checkbox { } .popup__header { - padding: 1rem 1.5rem 0 0.5rem; + padding: 1rem 1.5rem 0 0.8rem; } #confirmation_popup { @@ -1025,45 +1124,133 @@ sm-checkbox { grid-template-columns: 1fr 90vw 1fr; } - #home { - padding: 0 4vmax; - gap: 1rem; + .mobile-page { + padding: 2rem; + border-radius: 0.5rem; + background-color: rgba(var(--foreground-color), 1); } .hide-on-desktop { - display: none; + display: none !important; } - .card { + #home { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "header header" "nav pages"; + } + + #main_header { + grid-area: header; + } + + #main_navbar { + grid-area: nav; + flex-direction: column; + height: 100%; + padding: 0 0.5rem; + } + + .main_navbar__item { + padding: 1.5rem 1rem; + width: 100%; + flex: 0; + flex-direction: row; border-radius: 0.5rem; - background-color: var(--foreground-color); - border: solid thin rgba(var(--text-color), 0.1); + transition: background-color 0.3s; + } + .main_navbar__item .icon { + margin-bottom: 0; + margin-right: 0.5rem; + } + .main_navbar__item .item__title { + font-size: 0.9rem; + } + .main_navbar__item--active { + background-color: rgba(var(--text-color), 0.06); + } + + #pages_container { + grid-area: pages; + } + + .is-signed-in #exchange { + display: flex; + width: 100%; + } + .is-signed-in #exchange_wrapper { + display: grid; + width: 100%; + height: 100%; + gap: 1.5rem; + grid-template-columns: 16rem minmax(0, 1fr); + align-items: flex-start; + } + + #price_history_chart { + height: 20rem; + } + + #asset_list_wrapper { + grid-row: 1/3; + } + + .listed-asset { + padding: 1rem; + } + .listed-asset--active { + opacity: 1; + background-color: rgba(var(--text-color), 0.06); + } + .listed-asset--active::before { + content: ""; + position: absolute; + width: 0.25rem; + border-radius: 0 0.2rem 0.2rem 0; + height: 50%; + background-color: var(--accent-color); } } -@media screen and (min-width: 48rem) { - #home { - grid-template-rows: -webkit-min-content 1fr; - grid-template-rows: min-content 1fr; - grid-template-columns: 24rem minmax(0, 1fr); +@media screen and (max-width: 64rem) and (min-width: 40rem) { + .main_navbar__item .icon { + margin-right: 0; } - #home.signed-in #orders_list, -#home.signed-in #market_orders_list { - height: 32vmin; - overflow-y: auto; + .main_navbar__item .item__title { + display: none !important; + } +} +@media screen and (min-width: 64rem) { + #home { + grid-template-columns: 10rem 1fr; } - #orders_section { - grid-row: span 2; + #asset_page { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 20rem; + } + + #asset_page__nav { + grid-column: 1/-1; + } + + #wallet { + gap: 1rem 2rem; + grid-template-columns: 20rem 24rem; + } + #wallet__header { + grid-column: 1/3; + padding-bottom: 1rem; + } + #wallet .balance-card { + border: solid thin rgba(var(--text-color), 0.2); } } @media screen and (min-width: 72rem) { .page-layout { grid-template-columns: 1fr 80vw 1fr; } - - #home.signed-in { - grid-template-columns: 24rem minmax(0, 1fr) 20rem; - } } @media screen and (min-width: 120rem) { .page-layout { @@ -1084,15 +1271,6 @@ sm-checkbox { background: rgba(var(--text-color), 0.5); } - .interact, -button { - transition: background-color 0.3s, transform 0.3s; - } - .interact:hover, -button:hover { - background-color: var(--accent-color--light); - } - .order-card .cancel-order { justify-self: flex-end; overflow: hidden; diff --git a/docs/css/main.min.css b/docs/css/main.min.css index 5a86f26..8dd4c26 100644 --- a/docs/css/main.min.css +++ b/docs/css/main.min.css @@ -1 +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%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}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)}button,.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;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}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}sm-input{font-size:.9rem;--border-radius: 0.3rem;--background: var(--accent-color--light)}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}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)}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.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-items:flex-start}.align-center{align-items:center}.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%}.interact{position:relative;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;justify-content:center;text-align:center;width:100%;max-width:none;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);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}button:active,.button:active,.interact:active{transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:grid;align-items:flex-start;align-content:flex-start;grid-template-columns:minmax(0, 1fr)}#login_form__priv_key{margin-top:1rem}#main_header{margin-top:1.5rem;margin-bottom:1rem;display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}.rate-card{grid-template-columns:auto 1fr auto;gap:1rem;padding:1rem;border-radius:.5rem;border:solid rgba(var(--text-color), 0.2) thin;background-color:rgba(var(--background-color), 1)}#trade_form,#login_form{align-self:flex-start;padding:1rem 1.5rem 1.5rem 1.5rem}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders_section,#market_orders_section{padding-top:1rem}#my_orders_section .icon,#market_orders_section .icon{height:1.2rem;width:1.2rem}.orders_section__header{padding:0 1.5rem}#my_orders_section__header{height:2.4rem}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 1.5rem;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;padding:0 1.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#user_section{gap:1.5rem;padding:1.5rem;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){#main_header{padding:0 1.5rem}sm-button{--padding: 0.9rem 1.6rem}#home>:last-child{padding-bottom:5rem}#bottom_nav{position:fixed;bottom:0;background-color:var(--foreground-color);width:100%}.bottom_nav__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.bottom_nav__item .item__title,.bottom_nav__item .icon{transition:.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.bottom_nav__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.bottom_nav__item .icon{height:1.2rem;margin-bottom:.3rem}.bottom_nav__item--active .item__title{color:var(--accent-color);transform:translateY(100%);opacity:0}.bottom_nav__item--active .icon{transform:translateY(50%) scale(1.2);fill:var(--accent-color)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{padding:0 4vmax;gap:1rem}.hide-on-desktop{display:none}.card{border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.1)}}@media screen and (min-width: 48rem){#home{grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;grid-template-columns:24rem minmax(0, 1fr)}#home.signed-in #orders_list,#home.signed-in #market_orders_list{height:32vmin;overflow-y:auto}#orders_section{grid-row:span 2}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}#home.signed-in{grid-template-columns:24rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@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,button{transition:background-color .3s,transform .3s}.interact:hover,button:hover{background-color:var(--accent-color--light)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{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%;scroll-behavior:smooth}body{--accent-color: #504dff;--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}body[data-theme=dark]{--accent-color: #a3a1ff;--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:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}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)}button,.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;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}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}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:.9rem;--padding: 0.7rem 1rem}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-form{--gap: 1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.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-items:flex-start}.align-center{align-items:center}.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%}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.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}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-only{padding:.6rem;aspect-ratio:1/1;background-color:transparent}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.empty-state{display:grid;text-align:center;justify-items:center;width:100%;max-width:none;padding:1.5rem}.empty-state__icon{height:3rem;width:3rem;padding:.6rem;border-radius:1rem;background-color:rgba(var(--text-color), 0.06);margin-bottom:1rem}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}#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 0 .8rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.2rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.2rem 0 0 0.2rem}strip-option:last-of-type{--border-radius: 0 0.2rem 0.2rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.tip{border-radius:1.5rem;background-color:rgba(var(--text-color), 0.06);padding:.3rem .8rem;font-size:.85rem}.tip .icon{fill:var(--accent-color);flex-shrink:0}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}.mobile-page{align-items:flex-start}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#home{height:100%;display:flex;flex-direction:column;align-items:flex-start;align-content:flex-start}#login_form{width:min(24rem,100%);margin:0 auto}#login_form__priv_key{margin-top:1rem}#main_header{display:grid;gap:1rem;padding:1.5rem;width:100%;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1}#main_navbar{width:100%}.main_navbar__item{display:flex;flex-direction:column;align-items:center;flex:1;padding:.5rem 0}.main_navbar__item .item__title,.main_navbar__item .icon{transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .3s}.main_navbar__item .item__title{color:rgba(var(--text-color), 0.8);font-size:.8rem;font-weight:500}.main_navbar__item .icon{height:1.2rem;margin-bottom:.3rem}.main_navbar__item--active .item__title{color:var(--accent-color)}.main_navbar__item--active .icon{fill:var(--accent-color)}#pages_container{display:flex;flex:1;width:100%;justify-content:center;overflow-y:auto;padding:0 1.5rem}#pages_container>*{min-width:min(26rem,100%)}.listed-asset{position:relative;grid-template-columns:auto 1fr auto;gap:.5rem;padding:1rem 0;border-radius:.5rem;opacity:.8;font-weight:400;transition:background-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit}.listed-asset__icon{display:flex}.listed-asset__icon .icon{height:1.5rem;width:1.5rem}.quantity-selector .button{flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_selector_tip::first-letter{text-transform:uppercase}#quantity_type,#wallet_quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#exchange_wrapper{display:flex;flex-direction:column;height:100%}#asset_page{display:flex;flex-direction:column;height:100%}#asset_page__nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}#asset_page__nav .icon-only{margin-left:-0.7rem}#trade_form{height:100%}#trade_form::part(form){display:flex;flex-direction:column;gap:0}#trade_form>*{margin-bottom:1rem}#trade_form>:last-child{margin-top:auto}#my_orders,#market{width:min(42rem,100%);grid-template-rows:auto 1fr}.orders_section__header{min-height:2.8rem}.list__item{padding:.5rem 0;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content;border-radius:.5rem}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{padding:1rem;cursor:pointer}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type,.transaction-card--buy .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type,.transaction-card--sell .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list .list__header{margin-bottom:.5rem;grid-template-columns:repeat(3, 1fr) 2rem}#wallet{display:grid;width:auto;gap:1.5rem;grid-template-columns:minmax(0, 1fr);align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}#my_assets{gap:.5rem;margin-top:.5rem}.balance-card{display:grid;align-items:center;gap:0 .5rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);padding:.5rem}.balance-card.is-locked{padding:1rem .5rem;grid-template-columns:auto 1fr auto;gap:.5rem}.balance-card.is-locked .balance-card__icon{grid-row:span 2}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto auto}.balance-card__icon{display:flex;align-content:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:2/3;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}#wallet_result{justify-content:center;text-align:center}#wallet_result__icon{display:flex;padding:1rem;border-radius:50%;background-color:rgba(var(--text-color), 0.06);justify-self:center;-webkit-animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-up .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#wallet_result__icon .icon{height:2rem;width:2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}@-webkit-keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop-up{from{transform:translateY(3rem) scale(0.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}#wallet_result__cta{padding:1.5rem 1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.06)}.stateful-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none !important}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.empty-state{align-self:center}.main_navbar__item--active .item__title{transform:translateY(100%);opacity:0}.main_navbar__item--active .icon{transform:translateY(50%) scale(1.2)}.hide-on-mobile{display:none !important}.listed-asset{border-radius:0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#price_chart_container{flex:1}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .8rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.mobile-page{padding:2rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}.hide-on-desktop{display:none !important}#home{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav pages"}#main_header{grid-area:header}#main_navbar{grid-area:nav;flex-direction:column;height:100%;padding:0 .5rem}.main_navbar__item{padding:1.5rem 1rem;width:100%;flex:0;flex-direction:row;border-radius:.5rem;transition:background-color .3s}.main_navbar__item .icon{margin-bottom:0;margin-right:.5rem}.main_navbar__item .item__title{font-size:.9rem}.main_navbar__item--active{background-color:rgba(var(--text-color), 0.06)}#pages_container{grid-area:pages}.is-signed-in #exchange{display:flex;width:100%}.is-signed-in #exchange_wrapper{display:grid;width:100%;height:100%;gap:1.5rem;grid-template-columns:16rem minmax(0, 1fr);align-items:flex-start}#price_history_chart{height:20rem}#asset_list_wrapper{grid-row:1/3}.listed-asset{padding:1rem}.listed-asset--active{opacity:1;background-color:rgba(var(--text-color), 0.06)}.listed-asset--active::before{content:"";position:absolute;width:.25rem;border-radius:0 .2rem .2rem 0;height:50%;background-color:var(--accent-color)}}@media screen and (max-width: 64rem)and (min-width: 40rem){.main_navbar__item .icon{margin-right:0}.main_navbar__item .item__title{display:none !important}}@media screen and (min-width: 64rem){#home{grid-template-columns:10rem 1fr}#asset_page{display:grid;gap:1.5rem;grid-template-columns:minmax(0, 1fr) 20rem}#asset_page__nav{grid-column:1/-1}#wallet{gap:1rem 2rem;grid-template-columns:20rem 24rem}#wallet__header{grid-column:1/3;padding-bottom:1rem}#wallet .balance-card{border:solid thin rgba(var(--text-color), 0.2)}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@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)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{transition:opacity .3s,transform .3s}.order-card .cancel-order .icon{opacity:0;transform:translateX(100%)}.order-card .cancel-order span{transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;transform:translateX(0)}.transaction-card button{opacity:0;transition:opacity .3s}.transaction-card:hover button{opacity:1}} \ No newline at end of file diff --git a/docs/css/main.scss b/docs/css/main.scss index 446f90c..95f5688 100644 --- a/docs/css/main.scss +++ b/docs/css/main.scss @@ -16,40 +16,28 @@ body { } body { - &, - * { - --accent-color: #504dff; - --accent-color--light: #eeeeff; - --text-color: 36, 36, 36; - --background-color: 255, 255, 255; - --foreground-color: rgb(250, 252, 255); - --danger-color: rgb(255, 75, 75); - --green: #1cad59; - --yellow: #f3a600; - --loan-color: rgb(255, 171, 93); - scrollbar-width: thin; - } - + --accent-color: #504dff; + --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: rgba(var(--background-color), 1); + background-color: rgba(var(--background-color), 1); + transition: background-color 0.3s; } body[data-theme="dark"] { - &, - * { - --accent-color: #a3a1ff; - --accent-color--light: rgba(142, 140, 255, 0.06); - --text-color: 230, 230, 230; - --text-color-light: 170, 170, 170; - --background-color: 10, 10, 10; - --foreground-color: rgb(24, 24, 24); - --danger-color: rgb(255, 106, 106); - --green: #00e676; - --yellow: #ffd13a; - --loan-color: rgb(255, 232, 170); - } + --accent-color: #a3a1ff; + --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: var(--foreground-color); + background-color: rgba(var(--foreground-color), 1); } } @@ -119,7 +107,6 @@ a:any-link:focus-visible { sm-input { font-size: 0.9rem; --border-radius: 0.3rem; - --background: var(--accent-color--light); } sm-button { text-transform: uppercase; @@ -143,6 +130,9 @@ sm-button { color: rgba(var(--background-color), 1); } } +sm-form { + --gap: 1rem; +} ul { list-style: none; } @@ -160,7 +150,7 @@ ul { pointer-events: none; } -.hide-completely { +.hide { display: none !important; } @@ -308,44 +298,40 @@ ul { .interact { position: relative; + overflow: hidden; cursor: pointer; - transition: transform 0.3s; -webkit-tap-highlight-color: transparent; } -.empty-state { - display: grid; - justify-content: center; - text-align: center; - width: 100%; - max-width: none; - padding: 1.5rem; -} - -.observe-empty-state:empty { - display: none; -} - -.observe-empty-state:not(:empty) + .empty-state { - display: none; +.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; } .icon { - width: 1.5rem; - height: 1.5rem; + width: 1.2rem; + height: 1.2rem; fill: rgba(var(--text-color), 0.8); } -.button__icon { - height: 1.2rem; - width: 1.2rem; - - &--left { - margin-right: 0.5rem; - } - - &--right { - margin-left: 0.5rem; - } +.margin-right-0-5 { + margin-right: 0.5rem; +} +.margin-left-0-5 { + margin-left: 0.5rem; +} +.icon-only { + padding: 0.6rem; + aspect-ratio: 1/1; + background-color: transparent; } .icon-button { @@ -357,6 +343,30 @@ ul { fill: var(--accent-color); } } +.empty-state { + display: grid; + text-align: center; + justify-items: center; + width: 100%; + max-width: none; + padding: 1.5rem; + &__icon { + height: 3rem; + width: 3rem; + padding: 0.6rem; + border-radius: 1rem; + background-color: rgba(var(--text-color), 0.06); + margin-bottom: 1rem; + } +} + +.observe-empty-state:empty { + display: none !important; +} + +.observe-empty-state:not(:empty) + .empty-state { + display: none !important; +} #confirmation_popup, #prompt_popup { flex-direction: column; @@ -379,18 +389,11 @@ ul { #prompt_message { margin-bottom: 1.5rem; } - -button:active, -.button:active, -.interact:active { - transform: scale(0.96); -} - .popup__header { display: grid; gap: 0.5rem; width: 100%; - padding: 0 1.5rem 0 0.5rem; + padding: 0 1.5rem 0 0.8rem; align-items: center; grid-template-columns: auto 1fr auto; } @@ -445,8 +448,8 @@ details { } strip-select { --gap: 0; - background-color: var(--accent-color--light); - border-radius: 0.3rem; + background-color: rgba(var(--text-color), 0.06); + border-radius: 0.2rem; } strip-option { font-weight: 500; @@ -455,10 +458,10 @@ strip-option { --active-option-color: rgba(var(--background-color), 1); --active-option-background-color: var(--accent-color); &:first-of-type { - --border-radius: 0.3rem 0 0 0.3rem; + --border-radius: 0.2rem 0 0 0.2rem; } &:last-of-type { - --border-radius: 0 0.3rem 0.3rem 0; + --border-radius: 0 0.2rem 0.2rem 0; } } sm-select, @@ -477,6 +480,16 @@ sm-checkbox { border-radius: 0.5rem; line-height: 1.5; } +.tip { + border-radius: 1.5rem; + background-color: rgba(var(--text-color), 0.06); + padding: 0.3rem 0.8rem; + font-size: 0.85rem; + .icon { + fill: var(--accent-color); + flex-shrink: 0; + } +} .page-layout { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; @@ -487,6 +500,9 @@ sm-checkbox { .page { height: 100%; } +.mobile-page { + align-items: flex-start; +} #landing { grid-template-rows: auto 1fr; header { @@ -527,38 +543,90 @@ sm-checkbox { } #home { height: 100%; - display: grid; + display: flex; + flex-direction: column; align-items: flex-start; align-content: flex-start; - grid-template-columns: minmax(0, 1fr); +} +#login_form { + width: min(24rem, 100%); + margin: 0 auto; } #login_form__priv_key { margin-top: 1rem; } #main_header { - margin-top: 1.5rem; - margin-bottom: 1rem; display: grid; gap: 1rem; + padding: 1.5rem; + width: 100%; align-items: center; grid-template-columns: 1fr auto auto; grid-column: 1/-1; } - -.rate-card { - grid-template-columns: auto 1fr auto; - gap: 1rem; - padding: 1rem; - border-radius: 0.5rem; - border: solid rgba(var(--text-color), 0.2) thin; - background-color: rgba(var(--background-color), 1); +#main_navbar { + width: 100%; } +.main_navbar__item { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + padding: 0.5rem 0; + .item__title, + .icon { + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), + opacity 0.3s; + } + .item__title { + color: rgba(var(--text-color), 0.8); + font-size: 0.8rem; + font-weight: 500; + } + .icon { + height: 1.2rem; + margin-bottom: 0.3rem; + } + &--active { + .item__title { + color: var(--accent-color); + } + .icon { + fill: var(--accent-color); + } + } +} +#pages_container { + display: flex; + flex: 1; + width: 100%; + justify-content: center; + overflow-y: auto; + padding: 0 1.5rem; + & > * { + min-width: min(26rem, 100%); + } +} +.listed-asset { + position: relative; + grid-template-columns: auto 1fr auto; + gap: 0.5rem; + padding: 1rem 0; -#trade_form, -#login_form { - align-self: flex-start; - padding: 1rem 1.5rem 1.5rem 1.5rem; + border-radius: 0.5rem; + opacity: 0.8; + font-weight: 400; + transition: background-color 0.3s; + user-select: none; + color: inherit; + &__icon { + display: flex; + .icon { + height: 1.5rem; + width: 1.5rem; + } + } } .quantity-selector { .button { @@ -567,6 +635,12 @@ sm-checkbox { margin-left: 0.5rem; } } +#quantity_selector_tip { + &::first-letter { + text-transform: uppercase; + } +} + #quantity_type, #wallet_quantity_type { font-size: 0.8rem; @@ -578,32 +652,51 @@ sm-checkbox { font-weight: 500; min-width: 8ch; } -#my_orders_section, -#market_orders_section { - padding-top: 1rem; - .icon { - height: 1.2rem; - width: 1.2rem; +#exchange_wrapper { + display: flex; + flex-direction: column; + height: 100%; +} +#asset_page { + display: flex; + flex-direction: column; + height: 100%; +} +#asset_page__nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0; + .icon-only { + margin-left: -0.7rem; } } -.orders_section__header { - padding: 0 1.5rem; -} -#my_orders_section__header { - height: 2.4rem; -} -#orders_section__header--primary { - sm-tab-header { - --gap: 1.5rem; +#trade_form { + height: 100%; + &::part(form) { + display: flex; + flex-direction: column; + gap: 0; } - sm-tab { - font-size: 0.9rem; - --padding: 0.8rem 0; + & > * { + margin-bottom: 1rem; + } + & > :last-child { + margin-top: auto; } } +#my_orders, +#market { + width: min(42rem, 100%); + grid-template-rows: auto 1fr; +} +.orders_section__header { + min-height: 2.8rem; +} + .list__item { - padding: 0.5rem 1.5rem; + padding: 0.5rem 0; display: grid; } .order-card { @@ -614,6 +707,7 @@ sm-checkbox { gap: 0.5rem; padding: 0.5rem 1.5rem 0.5rem 0.5rem; grid-template-columns: min-content repeat(3, 1fr) min-content; + border-radius: 0.5rem; &__type { font-size: 0.9rem; font-weight: 500; @@ -694,13 +788,14 @@ sm-checkbox { } .list__header { margin-bottom: 0.5rem; - padding: 0 1.5rem; grid-template-columns: repeat(3, 1fr) 2rem; } } -#user_section { +#wallet { + display: grid; + width: auto; gap: 1.5rem; - padding: 1.5rem; + grid-template-columns: minmax(0, 1fr); align-content: flex-start; } .wallet_actions__wrapper { @@ -716,18 +811,27 @@ sm-checkbox { color: rgba(var(--text-color), 0.8); margin-bottom: 0.2rem; } +#my_assets { + gap: 0.5rem; + margin-top: 0.5rem; +} .balance-card { display: grid; align-items: center; - gap: 0.3rem 1rem; - padding: 0.5rem 0; + gap: 0 0.5rem; border-radius: 0.5rem; + background-color: rgba(var(--foreground-color), 1); + padding: 0.5rem; &.is-locked { - grid-template-columns: auto 1fr; - gap: 1rem; + padding: 1rem 0.5rem; + grid-template-columns: auto 1fr auto; + gap: 0.5rem; + .balance-card__icon { + grid-row: span 2; + } } &:not(.is-locked) { - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr auto auto; } &__icon { display: flex; @@ -747,7 +851,7 @@ sm-checkbox { font-weight: 500; } &__amount-wrapper { - grid-column: span 2; + grid-column: 2/3; gap: 0.3rem 1rem; grid-template-columns: 1fr 1fr; & > :nth-child(even) { @@ -788,7 +892,11 @@ sm-checkbox { opacity: 1; } } - +#wallet_result__cta { + padding: 1.5rem 1rem; + border-radius: 0.5rem; + background-color: rgba(var(--text-color), 0.06); +} .stateful-button-wrapper { display: flex; position: relative; @@ -871,61 +979,35 @@ sm-checkbox { @media screen and (max-width: 40rem) and (any-hover: none) { .cancel-order { span { - display: none; + display: none !important; } } } @media screen and (max-width: 40rem) { - #main_header { - padding: 0 1.5rem; - } sm-button { --padding: 0.9rem 1.6rem; } - #home { - & > :last-child { - padding-bottom: 5rem; - } + .empty-state { + align-self: center; } - #bottom_nav { - position: fixed; - bottom: 0; - background-color: var(--foreground-color); - width: 100%; - } - .bottom_nav__item { - display: flex; - flex-direction: column; - align-items: center; - flex: 1; - padding: 0.5rem 0; - .item__title, - .icon { - transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } + .main_navbar__item--active { .item__title { - color: rgba(var(--text-color), 0.8); - font-size: 0.8rem; - font-weight: 500; + transform: translateY(100%); + opacity: 0; } .icon { - height: 1.2rem; - margin-bottom: 0.3rem; - } - &--active { - .item__title { - color: var(--accent-color); - transform: translateY(100%); - opacity: 0; - } - .icon { - transform: translateY(50%) scale(1.2); - fill: var(--accent-color); - } + transform: translateY(50%) scale(1.2); } } .hide-on-mobile { - display: none; + display: none !important; + } + .listed-asset { + border-radius: 0; + border-bottom: solid thin rgba(var(--text-color), 0.1); + } + #price_chart_container { + flex: 1; } } @media screen and (min-width: 40rem) { @@ -948,7 +1030,7 @@ sm-checkbox { font-size: 1rem; } .popup__header { - padding: 1rem 1.5rem 0 0.5rem; + padding: 1rem 1.5rem 0 0.8rem; } #confirmation_popup { --width: 24rem; @@ -956,44 +1038,124 @@ sm-checkbox { .page-layout { grid-template-columns: 1fr 90vw 1fr; } - #home { - padding: 0 4vmax; - gap: 1rem; + .mobile-page { + padding: 2rem; + border-radius: 0.5rem; + background-color: rgba(var(--foreground-color), 1); } .hide-on-desktop { - display: none; + display: none !important; } - .card { - border-radius: 0.5rem; - background-color: var(--foreground-color); - border: solid thin rgba(var(--text-color), 0.1); - } -} -@media screen and (min-width: 48rem) { #home { - grid-template-rows: min-content 1fr; - grid-template-columns: 24rem minmax(0, 1fr); - &.signed-in { - #orders_list, - #market_orders_list { - height: 32vmin; - overflow-y: auto; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "header header" "nav pages"; + } + #main_header { + grid-area: header; + } + #main_navbar { + grid-area: nav; + flex-direction: column; + height: 100%; + padding: 0 0.5rem; + } + .main_navbar__item { + padding: 1.5rem 1rem; + width: 100%; + flex: 0; + flex-direction: row; + border-radius: 0.5rem; + transition: background-color 0.3s; + .icon { + margin-bottom: 0; + margin-right: 0.5rem; + } + .item__title { + font-size: 0.9rem; + } + &--active { + background-color: rgba(var(--text-color), 0.06); + } + } + #pages_container { + grid-area: pages; + } + .is-signed-in { + #exchange { + display: flex; + width: 100%; + } + #exchange_wrapper { + display: grid; + width: 100%; + height: 100%; + gap: 1.5rem; + grid-template-columns: 16rem minmax(0, 1fr); + align-items: flex-start; + } + } + #price_history_chart { + height: 20rem; + } + #asset_list_wrapper { + grid-row: 1/3; + } + .listed-asset { + padding: 1rem; + &--active { + opacity: 1; + background-color: rgba(var(--text-color), 0.06); + &::before { + content: ""; + position: absolute; + width: 0.25rem; + border-radius: 0 0.2rem 0.2rem 0; + height: 50%; + background-color: var(--accent-color); } } } - #orders_section { - grid-row: span 2; +} +@media screen and (max-width: 64rem) and (min-width: 40rem) { + .main_navbar__item { + .icon { + margin-right: 0; + } + .item__title { + display: none !important; + } } } -@media screen and (max-width: 64rem) { +@media screen and (min-width: 64rem) { + #home { + grid-template-columns: 10rem 1fr; + } + #asset_page { + display: grid; + gap: 1.5rem; + grid-template-columns: minmax(0, 1fr) 20rem; + } + #asset_page__nav { + grid-column: 1/-1; + } + #wallet { + gap: 1rem 2rem; + grid-template-columns: 20rem 24rem; + &__header { + grid-column: 1/3; + padding-bottom: 1rem; + } + .balance-card { + border: solid thin rgba(var(--text-color), 0.2); + } + } } @media screen and (min-width: 72rem) { .page-layout { grid-template-columns: 1fr 80vw 1fr; } - #home.signed-in { - grid-template-columns: 24rem minmax(0, 1fr) 20rem; - } } @media screen and (min-width: 120rem) { .page-layout { @@ -1014,13 +1176,6 @@ sm-checkbox { background: rgba(var(--text-color), 0.5); } } - .interact, - button { - transition: background-color 0.3s, transform 0.3s; - &:hover { - background-color: var(--accent-color--light); - } - } .order-card { .cancel-order { justify-self: flex-end; diff --git a/docs/index.html b/docs/index.html index 506605b..38a388e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,8 @@ - RanchiMall market + RanchiMall exchange + @@ -18,10 +19,11 @@ + - +

@@ -42,7 +44,17 @@
-
+
+
+ +
+

RanchiMall Exchange

+

Getting everything ready

+
+ Reset +
+
+
- -
-
- -
-

Login

-

Please login for trading and accessing your account.

-
- - - - Remember me - - - - -
- Log in -
- Not registered? - click here! -
-

Don't have FLO credentials?

- Generate FLO credentials -
- clear local data - - -
-
- - - - FLO - +
+
+ +
+

Login

+

Please login for exchange.

-
- - - - FLOBNB - + + + + + Remember me + + + + +
+ Log in
-
-
-

Trade FLO

- - Buy - Sell - -
- - - - - - -
- Rupee - - - - -
-
- BUY FLO - -
- -
-
-
+ Not registered? + click here! +
+

Don't have FLO credentials?

+ Generate FLO credentials +
+ Reset + +
+
+
ASSETS
+
    +
    +
    + +
    +
    +
    + + Hour + + Day + +
    +
    +
    +
    +
    + +
    +

    Trade FLO

    + + Buy + Sell + +
    + + + + + + + +
    +
    + Rupee + + + + +
    +
    + + + + +

    + Buy FLO worth of the above percentage rupee +

    +
    +
    +
    + BUY FLO + +
    +     +
    +
    +
    +

    @@ -151,10 +200,9 @@ History

    -
    +
      -

      - No orders placed -

      +
      + + + + +

      + No orders placed yet +

      +

      My orders will only show completed orders

      +
      -
      +

      Market orders @@ -197,121 +254,134 @@ No orders placed

      +
      +

      + + + + + + My wallet +

      +
      +

      Select asset

      + +
      + + + +
      +
      +
      +
      +

      Balance

      + +
      +
        +
        +
        -
        -

        - +
        Exchange
        + + + + + + + + + + + + +
        My orders
        +         + + + + + + + + + + + + +
        Market
        +         + + - My wallet -

        -
        + + +
        + +

        BUY

        +
        +
        +
        +
        +

        -

        Balance

        -
        -
        -
        - - - -
        -
        FLO
        -
        -
        -
        -
        - - - -
        -
        Rupee
        -
        -
        -
        -
        - - - -
        -
        flobnb
        -
        -
        -
        +
        Quantity
        +

        -
        -
        - + d="M7,20h4c0,1.1-0.9,2-2,2S7,21.1,7,20z M5,19h8v-2H5V19z M16.5,9.5c0,3.82-2.66,5.86-3.77,6.5H5.27 C4.16,15.36,1.5,13.32,1.5,9.5C1.5,5.36,4.86,2,9,2S16.5,5.36,16.5,9.5z M14.5,9.5C14.5,6.47,12.03,4,9,4S3.5,6.47,3.5,9.5 c0,2.47,1.49,3.89,2.35,4.5h6.3C13.01,13.39,14.5,11.97,14.5,9.5z M21.37,7.37L20,8l1.37,0.63L22,10l0.63-1.37L24,8l-1.37-0.63L22,6 L21.37,7.37z M19,6l0.94-2.06L22,3l-2.06-0.94L19,0l-0.94,2.06L16,3l2.06,0.94L19,6z" /> + +

        + Buy FLO worth of the above percentage rupee +

        + + Confirm +
        +
        -

        Register

        -
        -
        - -

        Enter the private key of FLO ID you want to register.

        - - Register -         -
        -
        - + +
        Rupee @@ -415,20 +464,27 @@
        - +
        -
        +

        - +
        +
        +

        Low on rupee balance?

        +

        Visit RanchiMall Pay to deposit rupee in your FLO ID.

        +
        + Open RanchiMall Pay +
        @@ -457,17 +513,36 @@
        + + + + +