From f2f69a83b87cda20efbaec023f65fc087e6c41ad Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 29 Dec 2022 02:38:57 +0530 Subject: [PATCH] Code refactoring and UI changes --- components.min.js | 7 + css/main.css | 1473 +++++++++--------- css/main.min.css | 2 +- css/main.scss | 1265 +++++++++------- index.html | 3687 +++++++++++++++------------------------------ 5 files changed, 2602 insertions(+), 3832 deletions(-) create mode 100644 components.min.js diff --git a/components.min.js b/components.min.js new file mode 100644 index 0000000..a75fd42 --- /dev/null +++ b/components.min.js @@ -0,0 +1,7 @@ +// Components downloaded: chips,copy,input,notifications,spinner,theme-toggle +const smChips = document.createElement("template"); smChips.innerHTML = '
', customElements.define("sm-chips", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChips.content.cloneNode(!0)), this.chipsWrapper = this.shadowRoot.querySelector(".sm-chips"), this.coverLeft = this.shadowRoot.querySelector(".cover--left"), this.coverRight = this.shadowRoot.querySelector(".cover--right"), this.navButtonLeft = this.shadowRoot.querySelector(".nav-button--left"), this.navButtonRight = this.shadowRoot.querySelector(".nav-button--right"), this.slottedOptions = void 0, this._value = void 0, this.scrollDistance = 0, this.assignedElements = [], this.scrollLeft = this.scrollLeft.bind(this), this.scrollRight = this.scrollRight.bind(this), this.fireEvent = this.fireEvent.bind(this), this.setSelectedOption = this.setSelectedOption.bind(this) } get value() { return this._value } set value(t) { this.setSelectedOption(t) } scrollLeft() { this.chipsWrapper.scrollBy({ left: -this.scrollDistance, behavior: "smooth" }) } scrollRight() { this.chipsWrapper.scrollBy({ left: this.scrollDistance, behavior: "smooth" }) } setSelectedOption(t) { this._value !== t && (this._value = t, this.assignedElements.forEach(e => { e.value == t ? (e.setAttribute("selected", ""), e.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })) : e.removeAttribute("selected") })) } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this._value } })) } connectedCallback() { this.setAttribute("role", "listbox"); const t = this.shadowRoot.querySelector("slot"); t.addEventListener("slotchange", e => { clearTimeout(this.slotChangeTimeout), this.slotChangeTimeout = setTimeout(() => { n.disconnect(), i.disconnect(), this.assignedElements = t.assignedElements(), this.assignedElements.forEach(t => { t.hasAttribute("selected") && (this._value = t.value) }), this.hasAttribute("multiline") || (this.assignedElements.length > 0 ? (n.observe(this.assignedElements[0]), i.observe(this.assignedElements[this.assignedElements.length - 1])) : (this.navButtonLeft.classList.add("hide"), this.navButtonRight.classList.add("hide"), this.coverLeft.classList.add("hide"), this.coverRight.classList.add("hide"), n.disconnect(), i.disconnect())) }, 100) }); const e = new ResizeObserver(t => { t.forEach(t => { if (t.contentBoxSize) { const e = Array.isArray(t.contentBoxSize) ? t.contentBoxSize[0] : t.contentBoxSize; this.scrollDistance = .6 * e.inlineSize } else this.scrollDistance = .6 * t.contentRect.width }) }); e.observe(this), this.chipsWrapper.addEventListener("option-clicked", t => { this._value !== t.target.value && (this.setSelectedOption(t.target.value), this.fireEvent()) }); const n = new IntersectionObserver(t => { t.forEach(t => { t.isIntersecting ? (this.navButtonLeft.classList.add("hide"), this.coverLeft.classList.add("hide")) : (this.navButtonLeft.classList.remove("hide"), this.coverLeft.classList.remove("hide")) }) }, { threshold: .9, root: this }), i = new IntersectionObserver(t => { t.forEach(t => { t.isIntersecting ? (this.navButtonRight.classList.add("hide"), this.coverRight.classList.add("hide")) : (this.navButtonRight.classList.remove("hide"), this.coverRight.classList.remove("hide")) }) }, { threshold: .9, root: this }); this.navButtonLeft.addEventListener("click", this.scrollLeft), this.navButtonRight.addEventListener("click", this.scrollRight) } disconnectedCallback() { this.navButtonLeft.removeEventListener("click", this.scrollLeft), this.navButtonRight.removeEventListener("click", this.scrollRight) } }); const smChip = document.createElement("template"); smChip.innerHTML = ' ', customElements.define("sm-chip", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChip.content.cloneNode(!0)), this._value = void 0, this.radioButton = this.shadowRoot.querySelector("input"), this.fireEvent = this.fireEvent.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this) } get value() { return this._value } fireEvent() { this.dispatchEvent(new CustomEvent("option-clicked", { bubbles: !0, composed: !0, detail: { value: this._value } })) } handleKeyDown(t) { "Enter" !== t.key && "Space" !== t.key || this.fireEvent() } connectedCallback() { this.setAttribute("role", "option"), this.setAttribute("tabindex", "0"), this._value = this.getAttribute("value"), this.addEventListener("click", this.fireEvent), this.addEventListener("keydown", this.handleKeyDown) } disconnectedCallback() { this.removeEventListener("click", this.fireEvent), this.removeEventListener("keydown", this.handleKeyDown) } }); +const smCopy = document.createElement("template"); smCopy.innerHTML = '

', customElements.define("sm-copy", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smCopy.content.cloneNode(!0)), this.copyContent = this.shadowRoot.querySelector(".copy-content"), this.copyButton = this.shadowRoot.querySelector(".copy-button"), this.copy = this.copy.bind(this) } static get observedAttributes() { return ["value"] } set value(t) { this.setAttribute("value", t) } get value() { return this.getAttribute("value") } fireEvent() { this.dispatchEvent(new CustomEvent("copy", { composed: !0, bubbles: !0, cancelable: !0 })) } copy() { navigator.clipboard.writeText(this.copyContent.textContent).then(t => this.fireEvent()).catch(t => console.error(t)) } connectedCallback() { this.copyButton.addEventListener("click", this.copy) } attributeChangedCallback(t, n, o) { "value" === t && (this.copyContent.textContent = o) } disconnectedCallback() { this.copyButton.removeEventListener("click", this.copy) } }); +const smInput = document.createElement("template"); smInput.innerHTML = '
', customElements.define("sm-input", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smInput.content.cloneNode(!0)), this.inputParent = this.shadowRoot.querySelector(".input"), this.input = this.shadowRoot.querySelector("input"), this.clearBtn = this.shadowRoot.querySelector(".clear"), this.label = this.shadowRoot.querySelector(".label"), this.feedbackText = this.shadowRoot.querySelector(".feedback-text"), this.outerContainer = this.shadowRoot.querySelector(".outer-container"), this.optionList = this.shadowRoot.querySelector(".datalist"), this._helperText = "", this._errorText = "", this.isRequired = !1, this.datalist = [], this.validationFunction = void 0, this.reflectedAttributes = ["value", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "list", "autocomplete"], 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), this.checkInput = this.checkInput.bind(this), this.allowOnlyNum = this.allowOnlyNum.bind(this), this.handleOptionClick = this.handleOptionClick.bind(this), this.handleInputNavigation = this.handleInputNavigation.bind(this), this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleBlur = this.handleBlur.bind(this) } static get observedAttributes() { return ["value", "placeholder", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "helper-text", "error-text", "list"] } get value() { return this.input.value } set value(t) { t !== this.input.value && (this.input.value = t, this.checkInput()) } get placeholder() { return this.getAttribute("placeholder") } set placeholder(t) { this.setAttribute("placeholder", t) } get type() { return this.getAttribute("type") } set type(t) { this.setAttribute("type", t) } get validity() { return this.input.validity } get disabled() { return this.hasAttribute("disabled") } set disabled(t) { t ? this.inputParent.classList.add("disabled") : this.inputParent.classList.remove("disabled") } get readOnly() { return this.hasAttribute("readonly") } set readOnly(t) { t ? this.setAttribute("readonly", "") : this.removeAttribute("readonly") } set customValidation(t) { this.validationFunction = t } set errorText(t) { this._errorText = t } set helperText(t) { this._helperText = t } get isValid() { if ("" !== this.input.value) { const t = this.input.checkValidity(); let e = !0; return this.validationFunction && (e = Boolean(this.validationFunction(this.input.value))), t && e ? (this.feedbackText.classList.remove("error"), this.feedbackText.classList.add("success"), this.feedbackText.textContent = "") : this._errorText && (this.feedbackText.classList.add("error"), this.feedbackText.classList.remove("success"), this.feedbackText.innerHTML = ` ${this._errorText}`), t && e } } reset() { this.value = "" } clear() { this.value = "", this.input.focus(), this.fireEvent() } focusIn() { this.input.focus() } focusOut() { this.input.blur() } fireEvent() { let t = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(t) } searchDatalist(t) { const e = this.datalist.filter(e => e.toLowerCase().includes(t.toLowerCase())); if (e.sort((e, n) => { const i = e.toLowerCase().indexOf(t.toLowerCase()), s = n.toLowerCase().indexOf(t.toLowerCase()); return i - s }), e.length) { if (this.optionList.children.length > e.length) { const t = this.optionList.children.length - e.length; for (let e = 0; e < t; e++)this.optionList.removeChild(this.optionList.lastChild) } e.forEach((t, e) => { if (this.optionList.children[e]) this.optionList.children[e].textContent = t; else { const e = document.createElement("li"); e.textContent = t, e.classList.add("datalist-item"), e.setAttribute("tabindex", "0"), this.optionList.appendChild(e) } }), this.optionList.classList.remove("hidden") } else this.optionList.classList.add("hidden") } checkInput(t) { this.hasAttribute("readonly") || ("" !== this.input.value ? this.clearBtn.classList.remove("hidden") : this.clearBtn.classList.add("hidden")), this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder").trim() && ("" !== this.input.value ? (this.animate ? this.inputParent.classList.add("animate-placeholder") : this.label.classList.add("hidden"), this.datalist.length && (this.searchTimeout && clearTimeout(this.searchTimeout), this.searchTimeout = setTimeout(() => { this.searchDatalist(this.input.value.trim()) }, 100))) : (this.animate ? this.inputParent.classList.remove("animate-placeholder") : this.label.classList.remove("hidden"), this.feedbackText.textContent = "", this.datalist.length && (this.optionList.innerHTML = "", this.optionList.classList.add("hidden")))) } allowOnlyNum(t) { 1 === t.key.length && (("." !== t.key || !t.target.value.includes(".") && 0 !== t.target.value.length) && ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."].includes(t.key) || t.preventDefault()) } handleOptionClick(t) { this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus() } handleInputNavigation(t) { "ArrowDown" === t.key ? (t.preventDefault(), this.optionList.children.length && this.optionList.children[0].focus()) : "ArrowUp" === t.key && (t.preventDefault(), this.optionList.children.length && this.optionList.children[this.optionList.children.length - 1].focus()) } handleDatalistNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus()) : "ArrowDown" === t.key ? (t.preventDefault(), this.shadowRoot.activeElement.nextElementSibling ? this.shadowRoot.activeElement.nextElementSibling.focus() : this.input.focus()) : "Enter" !== t.key && " " !== t.key || (t.preventDefault(), this.input.value = t.target.textContent, this.optionList.classList.add("hidden"), this.input.focus()) } handleFocus(t) { this.datalist.length && this.searchDatalist(this.input.value.trim()) } handleBlur(t) { this.datalist.length && this.optionList.classList.add("hidden") } connectedCallback() { this.animate = this.hasAttribute("animate"), this.setAttribute("role", "textbox"), this.input.addEventListener("input", this.checkInput), this.clearBtn.addEventListener("click", this.clear), this.datalist.length && (this.optionList.addEventListener("click", this.handleOptionClick), this.input.addEventListener("keydown", this.handleInputNavigation), this.optionList.addEventListener("keydown", this.handleDatalistNavigation)), this.input.addEventListener("focusin", this.handleFocus), this.addEventListener("focusout", this.handleBlur) } attributeChangedCallback(t, e, n) { e !== n && (this.reflectedAttributes.includes(t) && (this.hasAttribute(t) ? this.input.setAttribute(t, this.getAttribute(t) ? this.getAttribute(t) : "") : this.input.removeAttribute(t)), "placeholder" === t ? (this.label.textContent = n, this.setAttribute("aria-label", n)) : this.hasAttribute("value") ? this.checkInput() : "type" === t ? this.hasAttribute("type") && "number" === this.getAttribute("type") ? (this.input.setAttribute("inputmode", "decimal"), this.input.addEventListener("keydown", this.allowOnlyNum)) : this.input.removeEventListener("keydown", this.allowOnlyNum) : "helper-text" === t ? this._helperText = this.getAttribute("helper-text") : "error-text" === t ? this._errorText = this.getAttribute("error-text") : "required" === t ? (this.isRequired = this.hasAttribute("required"), this.isRequired ? this.setAttribute("aria-required", "true") : this.setAttribute("aria-required", "false")) : "readonly" === t ? this.hasAttribute("readonly") ? this.inputParent.classList.add("readonly") : this.inputParent.classList.remove("readonly") : "disabled" === t ? this.hasAttribute("disabled") ? this.inputParent.classList.add("disabled") : this.inputParent.classList.remove("disabled") : "list" === t && this.hasAttribute("list") && "" !== this.getAttribute("list").trim() && (this.datalist = this.getAttribute("list").split(","))) } disconnectedCallback() { this.input.removeEventListener("input", this.checkInput), this.clearBtn.removeEventListener("click", this.clear), this.input.removeEventListener("keydown", this.allowOnlyNum), this.optionList.removeEventListener("click", this.handleOptionClick), this.input.removeEventListener("keydown", this.handleInputNavigation), this.optionList.removeEventListener("keydown", this.handleDatalistNavigation), this.input.removeEventListener("focusin", this.handleFocus), this.removeEventListener("focusout", this.handleBlur) } }); +const smNotifications = document.createElement("template"); smNotifications.innerHTML = '
', customElements.define("sm-notifications", class extends HTMLElement { constructor() { super(), this.shadow = this.attachShadow({ mode: "open" }).append(smNotifications.content.cloneNode(!0)), this.notificationPanel = this.shadowRoot.querySelector(".notification-panel"), this.animationOptions = { duration: 300, fill: "forwards", easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }, this.push = this.push.bind(this), this.createNotification = this.createNotification.bind(this), this.removeNotification = this.removeNotification.bind(this), this.clearAll = this.clearAll.bind(this), this.remove = this.remove.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 = !1 } randString(n) { let t = ""; const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (let e = 0; e < n; e++)t += i.charAt(Math.floor(Math.random() * i.length)); return t } createNotification(n, t = {}) { const { pinned: i = !1, icon: e = "", action: o } = t, r = document.createElement("div"); r.id = this.randString(8), r.classList.add("notification"); let a = ""; return a += `
${e}
${n} `, o && (a += ` `), i && (r.classList.add("pinned"), a += ' '), r.innerHTML = a, r } push(n, t = {}) { const i = this.createNotification(n, t); return this.isLandscape ? this.notificationPanel.append(i) : this.notificationPanel.prepend(i), this.notificationPanel.animate([{ transform: `translateY(${this.isLandscape ? "" : "-"}${i.clientHeight}px)` }, { transform: "none" }], this.animationOptions), i.animate([{ transform: "translateY(-1rem)", opacity: "0" }, { transform: "none", opacity: "1" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), i.querySelector(".action") && i.querySelector(".action").addEventListener("click", t.action.callback), i.id } removeNotification(n, t = "left") { if (!n) return; const i = "left" === t ? "-" : "+"; n.animate([{ transform: this.currentX ? `translateX(${this.currentX}px)` : "none", opacity: "1" }, { transform: `translateX(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`, opacity: "0" }], this.animationOptions).onfinish = (() => { n.remove() }) } remove(n) { const t = this.notificationPanel.querySelector(`#${n}`); t && this.removeNotification(t) } clearAll() { Array.from(this.notificationPanel.children).forEach(n => { this.removeNotification(n) }) } handlePointerMove(n) { this.currentX = n.clientX - this.startX, this.currentTarget.style.transform = `translateX(${this.currentX}px)` } handleOrientationChange(n) { this.isLandscape = n.matches, n.matches } connectedCallback() { this.handleOrientationChange(this.mediaQuery), this.mediaQuery.addEventListener("change", this.handleOrientationChange), this.notificationPanel.addEventListener("pointerdown", n => { n.target.closest(".close") ? this.removeNotification(n.target.closest(".notification")) : n.target.closest(".notification") && (this.swipeThreshold = n.target.closest(".notification").getBoundingClientRect().width / 2, this.currentTarget = n.target.closest(".notification"), this.currentTarget.setPointerCapture(n.pointerId), this.startTime = Date.now(), this.startX = n.clientX, this.startY = n.clientY, this.notificationPanel.addEventListener("pointermove", this.handlePointerMove)) }), this.notificationPanel.addEventListener("pointerup", n => { this.endX = n.clientX, this.endY = n.clientY, this.swipeDistance = Math.abs(this.endX - this.startX), this.swipeTime = Date.now() - this.startTime, this.endX > this.startX ? this.swipeDirection = "right" : this.swipeDirection = "left", this.swipeTime < this.swipeTimeThreshold ? this.swipeDistance > 50 && this.removeNotification(this.currentTarget, this.swipeDirection) : this.swipeDistance > this.swipeThreshold ? this.removeNotification(this.currentTarget, this.swipeDirection) : this.currentTarget.animate([{ transform: `translateX(${this.currentX}px)` }, { transform: "none" }], this.animationOptions).onfinish = (n => { n.target.commitStyles(), n.target.cancel() }), this.notificationPanel.removeEventListener("pointermove", this.handlePointerMove), this.notificationPanel.releasePointerCapture(n.pointerId), this.currentX = 0 }); const n = new MutationObserver(n => { n.forEach(n => { "childList" === n.type && n.addedNodes.length && !n.addedNodes[0].classList.contains("pinned") && setTimeout(() => { this.removeNotification(n.addedNodes[0]) }, 5e3) }) }); n.observe(this.notificationPanel, { childList: !0 }) } disconnectedCallback() { mediaQueryList.removeEventListener("change", handleOrientationChange) } }); +const spinner = document.createElement("template"); spinner.innerHTML = ''; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader); +const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' '; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle); \ No newline at end of file diff --git a/css/main.css b/css/main.css index 09c06a3..8aac9a0 100644 --- a/css/main.css +++ b/css/main.css @@ -1,185 +1,617 @@ -@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap"); -*, -::before, -::after { +* { padding: 0; margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-family: "Roboto", sans-serif; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); +} + +html, +body { + height: 100%; } body { - --primary-color: #1565c0; - --text: 17, 17, 17; - --text-light: 100, 100, 100; - --foreground: 255, 255, 255; - --background: #e8e8e8; - --dark-shade: #dadada; - font-size: 16px; - color: rgba(var(--text), 1); - background: rgba(var(--foreground), 1); - background-size: cover; + --accent-color: #3d5afe; + --secondary-color: #ffac2e; + --text-color: 34, 34, 34; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); } body[data-theme=dark] { - --primary-color: #2196f3; - --text: 218, 218, 218; - --text-light: 170, 170, 170; - --foreground: 20, 20, 20; - --background: #0a0a0a; - --dark-shade: #1a1a1a; + --accent-color: #92a2ff; + --secondary-color: #d60739; + --text-color: 200, 200, 200; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); +} +body[data-theme=dark] ::-webkit-calendar-picker-indicator { + filter: invert(1); } -input[type=text]::-ms-clear { - display: none; - width: 0; - height: 0; +h1, +h2, +h3, +h4, +h5, +h6 { + letter-spacing: -0.01em; + font-weight: 700; } -input[type=text]::-ms-reveal { - display: none; - width: 0; - height: 0; +p, +strong { + line-height: 1.7; + color: rgba(var(--text-color), 0.9); + max-width: 70ch; } -input[type=search]::-webkit-search-decoration, -input[type=search]::-webkit-search-cancel-button, -input[type=search]::-webkit-search-results-button, -input[type=search]::-webkit-search-results-decoration { - display: none; +img { + -o-object-fit: cover; + object-fit: cover; } -input[type=number] { - -moz-appearance: textfield; +a:where([class]) { + color: inherit; + text-decoration: none; +} +a:where([class]):focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; } -input:invalid { - outline: none; - -webkit-box-shadow: none; - box-shadow: none; +a { + color: var(--accent-color); } -::-moz-focus-inner { +a:-webkit-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:-moz-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +button, +.button { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + position: relative; + display: inline-flex; border: none; -} - -button { - border: none; - border-radius: 0.2em; - text-transform: uppercase; + background-color: transparent; + overflow: hidden; + color: inherit; + -webkit-tap-highlight-color: transparent; + align-items: center; + font-size: inherit; font-weight: 500; - letter-spacing: 0.06em; - background: none; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; + flex-shrink: 0; +} +button:focus-visible, +.button:focus-visible { + outline: var(--accent-color) solid medium; +} +button:not(:disabled), +.button:not(:disabled) { cursor: pointer; - padding: 0.6rem 1rem; - color: var(--primary-color); - -ms-flex-item-align: center; - align-self: center; } -h1 { - font-size: 4rem; +.button { + background-color: rgba(var(--text-color), 0.02); + border: solid thin rgba(var(--text-color), 0.06); +} +.button--primary { + color: rgba(var(--background-color), 1); + background-color: var(--accent-color); +} +.button--primary .icon { + fill: rgba(var(--background-color), 1); +} +.button--colored { + color: var(--accent-color); +} +.button--colored .icon { + fill: var(--accent-color); +} +.button--danger { + background-color: rgba(255, 115, 115, 0.062745098); + color: var(--danger-color); +} +.button--danger .icon { + fill: var(--danger-color); +} +.button--small { + padding: 0.4rem 0.6rem; +} +.button--outlined { + border: solid rgba(var(--text-color), 0.3) 0.1rem; + background-color: rgba(var(--foreground-color), 1); +} +.button--transparent { + background-color: transparent; } -h2 { - font-size: 2rem; +button:disabled { + opacity: 0.4; + cursor: not-allowed; + filter: saturate(0); +} + +.cta { + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.8rem 1rem; +} + +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} + +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; + aspect-ratio: 1/1; +} + +a:-webkit-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:-moz-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +details summary { + display: flex; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: pointer; + align-items: center; + justify-content: space-between; + color: var(--accent-color); +} + +details[open] summary { + margin-bottom: 1rem; +} +details[open] > summary .down-arrow { + transform: rotate(180deg); +} + +sm-input { + --border-radius: 0.5rem; + --background-color: rgba(var(--foreground-color), 1); +} + +sm-spinner { + --size: 1.5rem; + --stroke-width: 0.1rem; +} + +sm-chips { + --gap: 0.3rem; +} + +sm-chip { + position: relative; + font-size: 0.9rem; + --border-radius: 0.5rem; + --padding: 0.5rem 0.8rem; + --background: rgba(var(--text-color), 0.06); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; font-weight: 500; } +sm-chip[selected] { + --background: var(--accent-color); + color: rgba(var(--background-color), 1); +} -h3 { - font-size: 1.5rem; +ul { + list-style: none; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.wrap-around { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +.full-bleed { + grid-column: 1/-1; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.sticky { + position: -webkit-sticky; + position: sticky; +} + +.top-0 { + top: 0; } .flex { - display: -webkit-box; - display: -ms-flexbox; display: flex; } +.flex-wrap { + flex-wrap: wrap; +} + +.flex-1 { + flex: 1; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + .grid { display: grid; } -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; +.flow-column { + grid-auto-flow: column; } -.hide { - opacity: 0; - pointer-events: none; +.gap-0-3 { + gap: 0.3rem; } -.hide-completely { +.gap-0-5 { + gap: 0.5rem; +} + +.gap-1 { + gap: 1rem; +} + +.gap-1-5 { + gap: 1.5rem; +} + +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + +.text-align-right { + text-align: right; +} + +.text-align-left { + text-align: left; +} + +.align-items-start { + align-items: flex-start; +} + +.align-items-center { + align-items: center; +} + +.align-content-start { + align-content: flex-start; +} + +.align-start { + align-content: flex-start; +} + +.align-center { + align-items: center; +} + +.align-end { + align-items: flex-end; +} + +.text-center { + text-align: center; +} + +.justify-start { + justify-items: start; +} + +.justify-content-start { + justify-content: start; +} + +.justify-content-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.align-self-end { + align-self: end; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.flex-direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.space-evenly { + justify-content: space-evenly; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.padding-block-1 { + padding-block: 1rem; +} + +.margin-right-0-3 { + margin-right: 0.3rem; +} + +.margin-right-0-5 { + margin-right: 0.5rem; +} + +.margin-right-1 { + margin-right: 1rem; +} + +.margin-left-0-5 { + margin-left: 0.5rem; +} + +.margin-left-auto { + margin-left: auto; +} + +.margin-right-auto { + margin-right: auto; +} + +.margin-top-1 { + margin-top: 1rem; +} + +.margin-bottom-0-5 { + margin-bottom: 0.5rem; +} + +.margin-bottom-1 { + margin-bottom: 1rem; +} + +.margin-bottom-2 { + margin-bottom: 2rem; +} + +.margin-block-0-5 { + margin-block: 0.5rem; +} + +.margin-block-1 { + margin-block: 1rem; +} + +.margin-block-1-5 { + margin-block: 1.5rem; +} + +.margin-inline-1 { + margin-inline: 1rem; +} + +.margin-inline-1-5 { + margin-inline: 1.5rem; +} + +.hidden { display: none !important; } -.breakable { - word-break: break-word; +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + +.flow-column { + grid-auto-flow: column; +} + +.w-100 { + width: 100%; +} + +.color-0-8 { + color: rgba(var(--text-color), 0.8); +} + +.weight-400 { + font-weight: 400; +} + +.weight-500 { font-weight: 500; - letter-spacing: 0.06rem; } -.other-font { - font-family: "Barlow", sans-serif; +.ws-pre-line { + white-space: pre-line; } -.uppercase { - text-transform: uppercase !important; +.card { + background-color: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + padding: max(1rem, 3vw); } -.capitalise { - text-transform: capitalize !important; +.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; } -.toggle { +.interactive { position: relative; + overflow: hidden; cursor: pointer; - z-index: 1; + -webkit-tap-highlight-color: transparent; } -.toggle input[type=checkbox] { + +.observe-empty-state:empty { display: none; } -.toggle .switch { - overflow: hidden; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + +.observe-empty-state:not(:empty) ~ .empty-state { + display: none; +} + +.multi-state-button { + display: grid; + text-align: center; + align-items: center; justify-items: center; - padding: 0.2rem; - min-height: 1.6rem; - max-height: 1.6rem; - border-radius: 0.5rem; +} +.multi-state-button > * { + grid-area: 1/1/2/2; +} +.multi-state-button button { + z-index: 1; +} + +#confirmation_popup, +#prompt_popup { + flex-direction: column; +} +#confirmation_popup h4, +#prompt_popup h4 { + font-size: 1.2rem; + margin-bottom: 1rem; +} +#confirmation_popup .flex, +#prompt_popup .flex { + margin-top: 1rem; +} + +.popup__header { position: relative; + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem; + align-items: center; } -.toggle .circle { - border-radius: 0.5rem; - -webkit-transition: -webkit-transform 0.3s; - transition: -webkit-transform 0.3s; - transition: transform 0.3s; - transition: transform 0.3s, -webkit-transform 0.3s; - fill: rgba(var(--text), 0.8); - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; - height: 1.2rem; - width: 1.2rem; +.popup__header > * { + grid-row: 1; } -.toggle .circle:first-of-type { - margin-bottom: 0.4rem; +.popup__header h3, +.popup__header h4 { + grid-column: 1/-1; + justify-self: center; + align-self: center; } -.toggle .circle line { - stroke: rgba(var(--text), 0.8); - stroke-width: 6; -} -.toggle input:checked ~ .switch .circle { - -webkit-transform: translateY(-1.7rem); - transform: translateY(-1.7rem); +.popup__header__close { + grid-column: 1; + margin-left: -1rem; + justify-self: flex-start; } section { @@ -203,12 +635,6 @@ ul[type=circle] li:last-of-type { ul { list-style: none; } -ul .balance { - margin-bottom: 2rem; -} -ul .balance:last-of-type { - margin-bottom: 0; -} .top-bottom-padding { padding: 1.5rem 0; @@ -216,23 +642,22 @@ ul .balance:last-of-type { .margin, .page { - margin: 0 1.5rem; + margin: 0 1rem; } -.margin-left-auto { - margin-left: auto; +.page { + display: flex; + flex-direction: column; } .card { padding: 2rem 1.5rem; border-radius: 0.5rem; - background: rgba(var(--text), 0.06); + background: rgba(var(--text-color), 0.06); margin: 1.5rem 0; } .card h4 { margin-bottom: 0.4rem; - font-weight: 400; - text-transform: capitalize; } .card h2 { margin-bottom: 1.5rem; @@ -241,52 +666,27 @@ ul .balance:last-of-type { .transaction-container { display: grid; margin-top: 1.5rem; - gap: 1.5rem; - grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: 0.5rem; } .label { text-transform: capitalize; font-size: 0.8rem; margin-bottom: 0.3rem; - line-height: 1.4em; - color: rgba(var(--text-light), 1); + color: rgba(var(--text-color), 0.8); margin-top: 1.5rem; - font-weight: 400; + font-weight: 500; } .label:first-of-type { margin-top: 0; } -.label + h4:not(.address) { - text-transform: capitalize; +.label + * { + font-weight: 700; } .header { justify-items: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -#logo { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - letter-spacing: 0.1em; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; -} -#logo h4 { - font-weight: 400; -} -#logo #main_logo { - height: 1.2rem; - width: 1.2rem; - margin-right: 0.2rem; - fill: rgba(var(--text), 1); + flex-direction: column; } #homepage { @@ -295,313 +695,66 @@ ul .balance:last-of-type { #first_section { display: grid; - grid-template-rows: 1fr auto; - min-height: calc(100vh - 8rem); } header.grid-2 { margin-top: 2rem; } -#search_page { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 20; - margin: 0; - background: rgba(var(--foreground), 1); - padding: 1.5rem 8vw; -} -#search_page header { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 2rem; -} -#search_page header .icon { - margin: 0; - cursor: pointer; - height: 2.2rem; - width: 2.2rem; - padding: 0.6rem; -} -#search_page h1 { - font-weight: 500; - font-size: 3rem; -} -#search_page .input { - -webkit-animation: fade 0.4s; - animation: fade 0.4s; -} -#search_page .input input:valid ~ #suggestions { - opacity: 1; - pointer-events: all; - -webkit-transform: none; - transform: none; -} -#search_page #suggestions { - opacity: 0; - pointer-events: none; - -webkit-transform: translateY(-0.5rem); - transform: translateY(-0.5rem); - -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; - transition: opacity 0.3s, -webkit-transform 0.3s; - transition: transform 0.3s, opacity 0.3s; - transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; - position: absolute; - top: 100%; - width: 100%; - background: var(--background); - border-radius: 0.5rem; - padding: 0.5rem 0; - max-height: 30vh; - overflow-y: auto; - margin-top: 0.5rem; -} -#search_page #suggestions:empty { - padding: 0; -} -#search_page .suggestion { - padding: 0.6rem 1.5rem 0.6rem 3rem; - opacity: 0.8; - cursor: pointer; -} -#search_page .suggestion:hover, #search_page .suggestion:focus { - opacity: 1; -} - -#main_search { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} -#main_search h2 { - margin-top: 2rem; - -ms-flex-item-align: start; - align-self: flex-start; - font-size: 4rem; - letter-spacing: 0.1em; - font-weight: 600; -} -#main_search h4 { - line-height: 1.4em; - margin-top: 2rem; - font-weight: 400; - color: rgba(var(--text-light), 1); -} -#main_search label { - position: relative; -} - -.input { - border-radius: 0.2rem; - position: relative; - display: grid; - grid-template-columns: auto 1fr; - z-index: 1; - width: 100%; - margin: 1.5rem 0; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.8rem; - gap: 1em; - background: var(--background); -} -.input input { - border: none; - width: 100%; - background: transparent; - outline: none; - font-size: 1rem; - color: rgba(var(--text), 1); -} - -.icon { - height: 1rem; - overflow: visible; - width: 1rem; - fill: none; - stroke: rgba(var(--text), 1); - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 6; -} - -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 0.5rem; -} -.copy-row .icon { - cursor: pointer; -} - -#textCopied { - padding: 1rem; - border-radius: 2rem; - background: rgba(var(--text), 0.2); - color: rgba(var(--text), 1); - position: fixed; - bottom: 0; - pointer-events: none; - margin: 2rem 0; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - -webkit-transition: 0.3s opacity ease; - transition: 0.3s opacity ease; - z-index: 20; -} - @-webkit-keyframes flyInLeft { from { opacity: 0; - -webkit-transform: translateX(-0.5rem); - transform: translateX(-0.5rem); + transform: translateX(-0.5rem); } to { opacity: 1; - -webkit-transform: none; - transform: none; + transform: none; } } @keyframes flyInLeft { from { opacity: 0; - -webkit-transform: translateX(-0.5rem); - transform: translateX(-0.5rem); + transform: translateX(-0.5rem); } to { opacity: 1; - -webkit-transform: none; - transform: none; + transform: none; } } @-webkit-keyframes flyInRight { from { opacity: 0; - -webkit-transform: translateX(0.5rem); - transform: translateX(0.5rem); + transform: translateX(0.5rem); } to { opacity: 1; - -webkit-transform: none; - transform: none; + transform: none; } } @keyframes flyInRight { from { opacity: 0; - -webkit-transform: translateX(0.5rem); - transform: translateX(0.5rem); + transform: translateX(0.5rem); } to { opacity: 1; - -webkit-transform: none; - transform: none; + transform: none; } } -@-webkit-keyframes flyOutLeft { - from { - opacity: 1; - -webkit-transform: none; - transform: none; - } - to { - opacity: 0; - -webkit-transform: translateX(-0.5rem); - transform: translateX(-0.5rem); - } -} -@keyframes flyOutLeft { - from { - opacity: 1; - -webkit-transform: none; - transform: none; - } - to { - opacity: 0; - -webkit-transform: translateX(-0.5rem); - transform: translateX(-0.5rem); - } -} -@-webkit-keyframes flyOutRight { - from { - opacity: 1; - -webkit-transform: none; - transform: none; - } - to { - opacity: 0; - -webkit-transform: translateX(0.5rem); - transform: translateX(0.5rem); - } -} -@keyframes flyOutRight { - from { - opacity: 1; - -webkit-transform: none; - transform: none; - } - to { - opacity: 0; - -webkit-transform: translateX(0.5rem); - transform: translateX(0.5rem); - } -} -.fly-in-from-left { - -webkit-animation: flyInLeft 0.2s forwards; - animation: flyInLeft 0.2s forwards; -} - -.fly-in-from-right { - -webkit-animation: flyInRight 0.2s forwards; - animation: flyInRight 0.2s forwards; -} - -.fly-out-to-left { - -webkit-animation: flyOutLeft 0.2s forwards; - animation: flyOutLeft 0.2s forwards; -} - -.fly-out-to-right { - -webkit-animation: flyOutRight 0.2s forwards; - animation: flyOutRight 0.2s forwards; -} - #highlights { padding: 1.5rem 0; display: grid; - grid-template-columns: 1fr 1fr; - grid-template-areas: "token token" "total wallet" "contract contract"; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; } #highlights .highlight-item { opacity: 0; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 1.5rem; - border-left: 0.1rem solid rgba(var(--text), 0.2); + flex-direction: column; + padding: 1rem 1.5rem; + border-left: 0.1rem solid rgba(var(--text-color), 0.2); + --animation-duration: 0.3s; } #highlights .highlight-item .label { margin-top: auto; @@ -620,69 +773,93 @@ header.grid-2 { text-transform: capitalize; } #highlights .highlight-item:first-of-type { - grid-area: token; - -webkit-animation: flyInLeft 0.4s 0.2s forwards; - animation: flyInLeft 0.4s 0.2s forwards; + -webkit-animation: flyInLeft var(--animation-duration) forwards; + animation: flyInLeft var(--animation-duration) forwards; } #highlights .highlight-item:nth-of-type(2) { - grid-area: total; - -webkit-animation: flyInLeft 0.4s 0.4s forwards; - animation: flyInLeft 0.4s 0.4s forwards; + -webkit-animation: flyInLeft var(--animation-duration) 0.1s forwards; + animation: flyInLeft var(--animation-duration) 0.1s forwards; } #highlights .highlight-item:nth-of-type(3) { - grid-area: wallet; - -webkit-animation: flyInLeft 0.4s 0.6s forwards; - animation: flyInLeft 0.4s 0.6s forwards; + -webkit-animation: flyInLeft var(--animation-duration) 0.2s forwards; + animation: flyInLeft var(--animation-duration) 0.2s forwards; } #highlights .highlight-item:last-of-type { - grid-area: contract; - -webkit-animation: flyInLeft 0.4s 0.8s forwards; - animation: flyInLeft 0.4s 0.8s forwards; -} - -#latest_transaction_section, -#latest_blocks_section { - background: rgba(var(--foreground), 1); -} -#latest_transaction_section header, -#latest_blocks_section header { - grid-template-columns: 1fr auto; - background: inherit; - z-index: 2; + -webkit-animation: flyInLeft var(--animation-duration) 0.3s forwards; + animation: flyInLeft var(--animation-duration) 0.3s forwards; } #main_header { - height: 8rem; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: "logo theme" "search search"; + margin-top: 1rem; + gap: 1rem; } -#main_header > .flex:first-of-type { - margin-top: 1.5rem; + +#logo { + grid-area: logo; + color: inherit; +} + +theme-toggle { + grid-area: theme; + justify-self: end; + align-self: center; +} + +#search_wrapper { + grid-area: search; + width: min(28rem, 100%); + position: relative; +} + +#main_search_field { + width: 100%; + --min-height: 2.8rem; +} + +#suggestions { + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + z-index: 1; + overflow: hidden; + max-height: 0; + transition: max-height 0.2s ease-in-out; +} +#suggestions:not(:empty) { + max-height: 20rem; + overflow-y: auto; +} + +.suggestion { + padding: 0.8rem 1rem; + display: flex; + align-items: center; + cursor: pointer; +} +.suggestion:hover, .suggestion:active, .suggestion:focus { + background: rgba(var(--text-color), 0.06); + outline: none; +} +.suggestion .address { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.6); + margin-left: auto; } #page_header { padding: 1rem 0; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; } #page_header h3 { font-weight: 500; text-transform: capitalize; } -#page_header .icon { - height: 1.8rem; - width: 1.8rem; - cursor: pointer; -} -#page_header .icon:first-of-type { - margin-right: 1rem; - padding: 0.4rem 0.4rem 0.4rem 0; -} -#page_header .icon:nth-of-type(2) { - padding: 0.4rem 0 0.4rem 0.4rem; -} -#page_header #secondary_search_btn { - margin-left: auto; -} .page { padding: 0 0 1rem 0; @@ -702,46 +879,25 @@ p { } .balance-card { - display: inline-grid; - grid-template-columns: auto auto; - grid-template-areas: "labl logo" "balance logo" "address address"; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"), linear-gradient(135deg, #4d20a7, #21106e); + display: flex; + flex-direction: column; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"), linear-gradient(135deg, rgb(77, 32, 167), rgb(33, 16, 110)); background-size: cover; color: white; border-radius: 0.5rem; padding: 2rem 1.5rem; margin-bottom: 1rem; } -.balance-card .flo-logo { - grid-area: logo; - fill: white; - height: 1.5rem; - width: 1.5rem; - opacity: 0.8; - justify-self: flex-end; -} +.balance-card h2, .balance-card h3, -.balance-card h4 { - display: inline-block; - width: auto; +.balance-card h4, +.balance-card h5 { + opacity: 0.8; } .balance-card h3 { - grid-area: balance; - font-weight: 400; - opacity: 0.8; -} -.balance-card h4 { - font-weight: 400; -} -.balance-card p { - font-size: 0.8rem; - grid-area: address; - opacity: 0.8; - letter-spacing: 0.1em; - margin-top: 3rem; + font-size: 1.5rem; } .balance-card .label { - grid-area: labl; color: white; opacity: 0.7; } @@ -750,26 +906,19 @@ p { .status { padding: 0.5rem 0.8rem; border-radius: 2rem; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; margin-bottom: 0.5rem; text-transform: capitalize; } .choice-container { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .choice { - border: solid 1px rgba(var(--text), 0.2); + border: solid 1px rgba(var(--text-color), 0.2); } .choice:last-of-type { margin-bottom: 0; @@ -779,8 +928,8 @@ p { font-size: 0.8rem; } .status.closed { - background: rgba(var(--foreground), 1); - border: solid 1px rgba(var(--text), 0.2); + background: rgba(var(--foreground-color), 1); + border: solid 1px rgba(var(--text-color), 0.2); } .address, @@ -789,7 +938,7 @@ p { .contract, .block-height { cursor: pointer; - color: var(--primary-color); + color: var(--accent-color); } .address { @@ -797,43 +946,6 @@ p { word-break: break-all; } -.tabs { - position: sticky; - top: 0; - padding: 1rem 0 1rem 0; - background: rgba(var(--foreground), 1); - z-index: 2; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - overflow-x: auto; -} -.tabs .tab { - cursor: pointer; - opacity: 0.6; - margin-right: 1.5rem; - -webkit-tap-highlight-color: transparent; - white-space: nowrap; - font-size: 1.1rem; -} -.tabs .tab:last-of-type { - margin-right: 0; -} -.tabs .tab.active { - opacity: 1; -} -.tabs .line { - position: absolute; - height: 0.12rem; - background: rgba(var(--text), 1); - width: 1px; - bottom: 0; - -webkit-transition: width 0.4s, -webkit-transform 0.4s; - transition: width 0.4s, -webkit-transform 0.4s; - transition: transform 0.4s, width 0.4s; - transition: transform 0.4s, width 0.4s, -webkit-transform 0.4s; -} - .contract-choice { display: grid; gap: 0.5rem 1rem; @@ -843,176 +955,112 @@ p { margin-bottom: 0; } -@-webkit-keyframes fade { - from { - opacity: 0; - -webkit-transform: translateY(1rem); - transform: translateY(1rem); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } -} - -@keyframes fade { - from { - opacity: 0; - -webkit-transform: translateY(1rem); - transform: translateY(1rem); - } - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } -} .transaction { display: grid; - gap: 2rem 1rem; - padding: 2rem; + gap: 1.5rem; + padding: max(1rem, 2vw); border-radius: 0.5rem; - grid-template-columns: -webkit-min-content 1fr; - grid-template-columns: min-content 1fr; - grid-template-rows: auto 1fr; - background: rgba(var(--text), 0.06); - grid-template-areas: ". ." "info info"; + background-color: rgba(var(--foreground-color), 0.8); + content-visibility: auto; } .transaction .contract-info { - grid-area: info; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; -} -.transaction h4 { - font-weight: 500; + align-items: flex-start; + display: grid; + gap: 1.5rem; } .transaction > .icon:first-of-type { + fill: none; + stroke: rgba(var(--text-color), 0.8); stroke-width: 4; - justify-self: center; - height: 3rem; - width: 3rem; - padding: 0.8rem; + stroke-linecap: round; + stroke-linejoin: round; + overflow: visible; + height: 2.5rem; + width: 2.5rem; + padding: 0.7rem; border-radius: 1rem; - background: rgba(var(--foreground), 1); + background: rgba(var(--text-color), 0.1); } -#loader_page { - display: grid; - place-content: center; - height: 100vh; - width: 100vw; - text-align: center; +#loading { position: fixed; + display: grid; + top: 0; + left: 0; + bottom: 0; + right: 0; + place-content: center; + justify-items: center; + background: rgba(var(--foreground-color), 1); z-index: 10; - background: rgba(var(--foreground), 1); } -#loader_page h4 { +#loading h4 { margin-top: 1.5rem; font-weight: 500; } -#loader { - justify-self: center; - height: 2.5rem; - width: 2.5rem; - -webkit-transform-origin: center; - transform-origin: center; - stroke-dashoffset: 200; - stroke-dasharray: 200; - -webkit-animation: load 2s infinite linear; - animation: load 2s infinite linear; - stroke: var(--primary-color); -} - -@-webkit-keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -200; - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -200; - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} #all_blocks_page, -#top_blocks_container, -#token_balance_container { +#top_blocks_container { display: grid; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-top: 1rem; } -#all_blocks_page .card, -#top_blocks_container .card, -#token_balance_container .card { - margin: 0; + +.block-card { + grid-template-columns: 5rem 1fr auto; + gap: 1rem; + background-color: rgba(var(--foreground-color), 1); + padding: 1rem; + border-radius: 0.5rem; +} +.block-card time { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); } #token_balance_container { + display: grid; + gap: 0.5rem; margin-top: 1.5rem; } +#token_balance_container .holder-balance { + padding: 1rem; + border-radius: 0.5rem; + background: rgba(var(--foreground-color), 1); +} #error_page { padding: 1.5rem 0; } +.view-wrapper { + display: grid; + align-items: flex-start; +} +.view-wrapper > * { + grid-area: 1/1; +} + @media only screen and (min-width: 640px) { .margin, .page { margin: 0 4vw; } - - .input { - width: 60% !important; - } - section header h1 { font-size: 2rem; } - - #main_search h1 { - font-size: 6rem; - text-align: center; + #main_header { + grid-template-areas: "logo theme"; } - - #highlights { - gap: 2rem; - grid-template-columns: repeat(2, auto); - grid-template-areas: "token total" " wallet contract"; + #search_wrapper { + grid-area: 1/1/2/-1; + margin: 0 auto; + max-width: calc(100% - 16rem); } - #highlights .highlight-item h1 { - font-size: 2.5rem; - } - #highlights .highlight-item:first-of-type { - grid-area: token; - } - #highlights .highlight-item:nth-of-type(2) { - grid-area: total; - } - #highlights .highlight-item:nth-of-type(3) { - grid-area: wallet; - } - #highlights .highlight-item:last-of-type { - grid-area: contract; - } - #page_header { padding: 1.5rem 0; } - #transaction_page { display: grid; gap: 0 1.5rem; @@ -1022,105 +1070,32 @@ p { #transaction_page .head { grid-area: header; } - + .transaction { + grid-template-columns: auto 1fr; + } + .transaction > .icon:first-of-type { + grid-area: 1/1/3/2; + } .contract-choice { grid-template-columns: 2fr 1fr 1fr; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; } } @media only screen and (min-width: 1280px) { .margin, .page { - margin: 0 12vw; - } - - .input { - width: 50% !important; - } - - #highlights { - grid-template-columns: repeat(4, auto); - grid-template-areas: "token total wallet contract"; - } - #highlights .highlight-item:first-of-type { - grid-area: token; - } - #highlights .highlight-item:nth-of-type(2) { - grid-area: total; - } - #highlights .highlight-item:nth-of-type(3) { - grid-area: wallet; - } - #highlights .highlight-item:last-of-type { - grid-area: contract; - } -} -@media only screen and (min-width: 1920px) { - body { - font-size: 24px; - } - - .margin, -.page { - margin: 0 16vw; - } - - #search_page { - padding: 1.5rem 12vw; - } - - .input { - width: 40% !important; - } -} -@media only screen and (min-width: 2048px) { - body { - font-size: 24px; - } - - .margin, -.page { - margin: 0 26vw; - } - - #search_page { - padding: 1.5rem 24vw; - } - - #first_section { - min-height: auto; - } - - .input { - width: 30% !important; - } -} -@media only screen and (max-width: 320px) { - body { - font-size: 14px; + margin: 0 10vw; } } @media (hover: hover) { button { - -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } button:hover { - background: var(--primary-color); - color: rgba(var(--foreground), 1); + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); } - .hover { cursor: pointer; } - - .tab { - -webkit-transition: opacity 0.3s; - transition: opacity 0.3s; - } - .tab:hover { - opacity: 1; - } } \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index 5099f93..6f2e7da 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap";*,::before,::after{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--primary-color: #1565c0;--text: 17, 17, 17;--text-light: 100, 100, 100;--foreground: 255, 255, 255;--background: #e8e8e8;--dark-shade: #dadada;font-size:16px;color:rgba(var(--text), 1);background:rgba(var(--foreground), 1);background-size:cover}body[data-theme=dark]{--primary-color: #2196f3;--text: 218, 218, 218;--text-light: 170, 170, 170;--foreground: 20, 20, 20;--background: #0a0a0a;--dark-shade: #1a1a1a}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:none;-webkit-box-shadow:none;box-shadow:none}::-moz-focus-inner{border:none}button{border:none;border-radius:.2em;text-transform:uppercase;font-weight:500;letter-spacing:.06em;background:none;cursor:pointer;padding:.6rem 1rem;color:var(--primary-color);-ms-flex-item-align:center;align-self:center}h1{font-size:4rem}h2{font-size:2rem;font-weight:500}h3{font-size:1.5rem}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.breakable{word-break:break-word;font-weight:500;letter-spacing:.06rem}.other-font{font-family:"Barlow",sans-serif}.uppercase{text-transform:uppercase !important}.capitalise{text-transform:capitalize !important}.toggle{position:relative;cursor:pointer;z-index:1}.toggle input[type=checkbox]{display:none}.toggle .switch{overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;justify-items:center;padding:.2rem;min-height:1.6rem;max-height:1.6rem;border-radius:.5rem;position:relative}.toggle .circle{border-radius:.5rem;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;fill:rgba(var(--text), 0.8);overflow:visible;stroke-linecap:round;stroke-linejoin:round;height:1.2rem;width:1.2rem}.toggle .circle:first-of-type{margin-bottom:.4rem}.toggle .circle line{stroke:rgba(var(--text), 0.8);stroke-width:6}.toggle input:checked~.switch .circle{-webkit-transform:translateY(-1.7rem);transform:translateY(-1.7rem)}section{position:relative}section .dark-background{display:grid;grid-template-rows:auto 1fr}ul[type=circle]{padding:1.5rem 2.5rem;list-style:circle}ul[type=circle] li{margin-bottom:1rem}ul[type=circle] li:last-of-type{margin-bottom:0}ul{list-style:none}ul .balance{margin-bottom:2rem}ul .balance:last-of-type{margin-bottom:0}.top-bottom-padding{padding:1.5rem 0}.margin,.page{margin:0 1.5rem}.margin-left-auto{margin-left:auto}.card{padding:2rem 1.5rem;border-radius:.5rem;background:rgba(var(--text), 0.06);margin:1.5rem 0}.card h4{margin-bottom:.4rem;font-weight:400;text-transform:capitalize}.card h2{margin-bottom:1.5rem}.transaction-container{display:grid;margin-top:1.5rem;gap:1.5rem;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr))}.label{text-transform:capitalize;font-size:.8rem;margin-bottom:.3rem;line-height:1.4em;color:rgba(var(--text-light), 1);margin-top:1.5rem;font-weight:400}.label:first-of-type{margin-top:0}.label+h4:not(.address){text-transform:capitalize}.header{justify-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#logo{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;letter-spacing:.1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}#logo h4{font-weight:400}#logo #main_logo{height:1.2rem;width:1.2rem;margin-right:.2rem;fill:rgba(var(--text), 1)}#homepage{padding-top:0}#first_section{display:grid;grid-template-rows:1fr auto;min-height:calc(100vh - 8rem)}header.grid-2{margin-top:2rem}#search_page{position:fixed;left:0;right:0;top:0;bottom:0;z-index:20;margin:0;background:rgba(var(--foreground), 1);padding:1.5rem 8vw}#search_page header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:2rem}#search_page header .icon{margin:0;cursor:pointer;height:2.2rem;width:2.2rem;padding:.6rem}#search_page h1{font-weight:500;font-size:3rem}#search_page .input{-webkit-animation:fade .4s;animation:fade .4s}#search_page .input input:valid~#suggestions{opacity:1;pointer-events:all;-webkit-transform:none;transform:none}#search_page #suggestions{opacity:0;pointer-events:none;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s;position:absolute;top:100%;width:100%;background:var(--background);border-radius:.5rem;padding:.5rem 0;max-height:30vh;overflow-y:auto;margin-top:.5rem}#search_page #suggestions:empty{padding:0}#search_page .suggestion{padding:.6rem 1.5rem .6rem 3rem;opacity:.8;cursor:pointer}#search_page .suggestion:hover,#search_page .suggestion:focus{opacity:1}#main_search{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#main_search h2{margin-top:2rem;-ms-flex-item-align:start;align-self:flex-start;font-size:4rem;letter-spacing:.1em;font-weight:600}#main_search h4{line-height:1.4em;margin-top:2rem;font-weight:400;color:rgba(var(--text-light), 1)}#main_search label{position:relative}.input{border-radius:.2rem;position:relative;display:grid;grid-template-columns:auto 1fr;z-index:1;width:100%;margin:1.5rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.8rem;gap:1em;background:var(--background)}.input input{border:none;width:100%;background:transparent;outline:none;font-size:1rem;color:rgba(var(--text), 1)}.icon{height:1rem;overflow:visible;width:1rem;fill:none;stroke:rgba(var(--text), 1);stroke-linecap:round;stroke-linejoin:round;stroke-width:6}.copy-row{display:grid;grid-template-columns:1fr auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem}.copy-row .icon{cursor:pointer}#textCopied{padding:1rem;border-radius:2rem;background:rgba(var(--text), 0.2);color:rgba(var(--text), 1);position:fixed;bottom:0;pointer-events:none;margin:2rem 0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:.3s opacity ease;transition:.3s opacity ease;z-index:20}@-webkit-keyframes flyInLeft{from{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes flyInLeft{from{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes flyInRight{from{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes flyInRight{from{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes flyOutLeft{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}}@keyframes flyOutLeft{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}}@-webkit-keyframes flyOutRight{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}}@keyframes flyOutRight{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}}.fly-in-from-left{-webkit-animation:flyInLeft .2s forwards;animation:flyInLeft .2s forwards}.fly-in-from-right{-webkit-animation:flyInRight .2s forwards;animation:flyInRight .2s forwards}.fly-out-to-left{-webkit-animation:flyOutLeft .2s forwards;animation:flyOutLeft .2s forwards}.fly-out-to-right{-webkit-animation:flyOutRight .2s forwards;animation:flyOutRight .2s forwards}#highlights{padding:1.5rem 0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"token token" "total wallet" "contract contract";gap:1.5rem}#highlights .highlight-item{opacity:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1.5rem;border-left:.1rem solid rgba(var(--text), 0.2)}#highlights .highlight-item .label{margin-top:auto}#highlights .highlight-item h1{font-size:2rem;letter-spacing:.1rem;font-weight:500;text-transform:uppercase;overflow-wrap:break-word}#highlights .highlight-item:first-of-type{text-transform:uppercase}#highlights .highlight-item:nth-of-type(2){text-transform:capitalize}#highlights .highlight-item:first-of-type{grid-area:token;-webkit-animation:flyInLeft .4s .2s forwards;animation:flyInLeft .4s .2s forwards}#highlights .highlight-item:nth-of-type(2){grid-area:total;-webkit-animation:flyInLeft .4s .4s forwards;animation:flyInLeft .4s .4s forwards}#highlights .highlight-item:nth-of-type(3){grid-area:wallet;-webkit-animation:flyInLeft .4s .6s forwards;animation:flyInLeft .4s .6s forwards}#highlights .highlight-item:last-of-type{grid-area:contract;-webkit-animation:flyInLeft .4s .8s forwards;animation:flyInLeft .4s .8s forwards}#latest_transaction_section,#latest_blocks_section{background:rgba(var(--foreground), 1)}#latest_transaction_section header,#latest_blocks_section header{grid-template-columns:1fr auto;background:inherit;z-index:2}#main_header{height:8rem}#main_header>.flex:first-of-type{margin-top:1.5rem}#page_header{padding:1rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#page_header h3{font-weight:500;text-transform:capitalize}#page_header .icon{height:1.8rem;width:1.8rem;cursor:pointer}#page_header .icon:first-of-type{margin-right:1rem;padding:.4rem .4rem .4rem 0}#page_header .icon:nth-of-type(2){padding:.4rem 0 .4rem .4rem}#page_header #secondary_search_btn{margin-left:auto}.page{padding:0 0 1rem 0}.page h3.heading{text-transform:capitalize;font-weight:500}.page>h3.heading{margin-top:2rem}p{overflow-wrap:break-word;line-height:1.6em;text-transform:capitalize}.balance-card{display:inline-grid;grid-template-columns:auto auto;grid-template-areas:"labl logo" "balance logo" "address address";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"),linear-gradient(135deg, #4d20a7, #21106e);background-size:cover;color:#fff;border-radius:.5rem;padding:2rem 1.5rem;margin-bottom:1rem}.balance-card .flo-logo{grid-area:logo;fill:#fff;height:1.5rem;width:1.5rem;opacity:.8;justify-self:flex-end}.balance-card h3,.balance-card h4{display:inline-block;width:auto}.balance-card h3{grid-area:balance;font-weight:400;opacity:.8}.balance-card h4{font-weight:400}.balance-card p{font-size:.8rem;grid-area:address;opacity:.8;letter-spacing:.1em;margin-top:3rem}.balance-card .label{grid-area:labl;color:#fff;opacity:.7}.choice,.status{padding:.5rem .8rem;border-radius:2rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.5rem;text-transform:capitalize}.choice-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.choice{border:solid 1px rgba(var(--text), 0.2)}.choice:last-of-type{margin-bottom:0}.status{font-size:.8rem}.status.closed{background:rgba(var(--foreground), 1);border:solid 1px rgba(var(--text), 0.2)}.address,.token,.hash,.contract,.block-height{cursor:pointer;color:var(--primary-color)}.address{text-transform:none !important;word-break:break-all}.tabs{position:sticky;top:0;padding:1rem 0 1rem 0;background:rgba(var(--foreground), 1);z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto}.tabs .tab{cursor:pointer;opacity:.6;margin-right:1.5rem;-webkit-tap-highlight-color:transparent;white-space:nowrap;font-size:1.1rem}.tabs .tab:last-of-type{margin-right:0}.tabs .tab.active{opacity:1}.tabs .line{position:absolute;height:.12rem;background:rgba(var(--text), 1);width:1px;bottom:0;-webkit-transition:width .4s,-webkit-transform .4s;transition:width .4s,-webkit-transform .4s;transition:transform .4s,width .4s;transition:transform .4s,width .4s,-webkit-transform .4s}.contract-choice{display:grid;gap:.5rem 1rem;margin-bottom:2rem}.contract-choice:last-of-type{margin-bottom:0}@-webkit-keyframes fade{from{opacity:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fade{from{opacity:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}to{opacity:1;-webkit-transform:none;transform:none}}.transaction{display:grid;gap:2rem 1rem;padding:2rem;border-radius:.5rem;grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr;background:rgba(var(--text), 0.06);grid-template-areas:". ." "info info"}.transaction .contract-info{grid-area:info;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.transaction h4{font-weight:500}.transaction>.icon:first-of-type{stroke-width:4;justify-self:center;height:3rem;width:3rem;padding:.8rem;border-radius:1rem;background:rgba(var(--foreground), 1)}#loader_page{display:grid;place-content:center;height:100vh;width:100vw;text-align:center;position:fixed;z-index:10;background:rgba(var(--foreground), 1)}#loader_page h4{margin-top:1.5rem;font-weight:500}#loader{justify-self:center;height:2.5rem;width:2.5rem;-webkit-transform-origin:center;transform-origin:center;stroke-dashoffset:200;stroke-dasharray:200;-webkit-animation:load 2s infinite linear;animation:load 2s infinite linear;stroke:var(--primary-color)}@-webkit-keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}#all_blocks_page,#top_blocks_container,#token_balance_container{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));margin-top:1rem}#all_blocks_page .card,#top_blocks_container .card,#token_balance_container .card{margin:0}#token_balance_container{margin-top:1.5rem}#error_page{padding:1.5rem 0}@media only screen and (min-width: 640px){.margin,.page{margin:0 4vw}.input{width:60% !important}section header h1{font-size:2rem}#main_search h1{font-size:6rem;text-align:center}#highlights{gap:2rem;grid-template-columns:repeat(2, auto);grid-template-areas:"token total" " wallet contract"}#highlights .highlight-item h1{font-size:2.5rem}#highlights .highlight-item:first-of-type{grid-area:token}#highlights .highlight-item:nth-of-type(2){grid-area:total}#highlights .highlight-item:nth-of-type(3){grid-area:wallet}#highlights .highlight-item:last-of-type{grid-area:contract}#page_header{padding:1.5rem 0}#transaction_page{display:grid;gap:0 1.5rem;grid-template-columns:40% 60%;grid-template-areas:"header header" ". ."}#transaction_page .head{grid-area:header}.contract-choice{grid-template-columns:2fr 1fr 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media only screen and (min-width: 1280px){.margin,.page{margin:0 12vw}.input{width:50% !important}#highlights{grid-template-columns:repeat(4, auto);grid-template-areas:"token total wallet contract"}#highlights .highlight-item:first-of-type{grid-area:token}#highlights .highlight-item:nth-of-type(2){grid-area:total}#highlights .highlight-item:nth-of-type(3){grid-area:wallet}#highlights .highlight-item:last-of-type{grid-area:contract}}@media only screen and (min-width: 1920px){body{font-size:24px}.margin,.page{margin:0 16vw}#search_page{padding:1.5rem 12vw}.input{width:40% !important}}@media only screen and (min-width: 2048px){body{font-size:24px}.margin,.page{margin:0 26vw}#search_page{padding:1.5rem 24vw}#first_section{min-height:auto}.input{width:30% !important}}@media only screen and (max-width: 320px){body{font-size:14px}}@media(hover: hover){button{-webkit-transition:background-color .3s;transition:background-color .3s}button:hover{background:var(--primary-color);color:rgba(var(--foreground), 1)}.hover{cursor:pointer}.tab{-webkit-transition:opacity .3s;transition:opacity .3s}.tab:hover{opacity:1}} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}h1,h2,h3,h4,h5,h6{letter-spacing:-0.01em;font-weight:700}p,strong{line-height:1.7;color:rgba(var(--text-color), 0.9);max-width:70ch}img{-o-object-fit:cover;object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:inherit;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center;flex-shrink:0}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem;aspect-ratio:1/1}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input{--border-radius: 0.5rem;--background-color: rgba(var(--foreground-color), 1)}sm-spinner{--size: 1.5rem;--stroke-width: 0.1rem}sm-chips{--gap: 0.3rem}sm-chip{position:relative;font-size:.9rem;--border-radius: 0.5rem;--padding: 0.5rem 0.8rem;--background: rgba(var(--text-color), 0.06);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500}sm-chip[selected]{--background: var(--accent-color);color:rgba(var(--background-color), 1)}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.text-align-left{text-align:left}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-content-start{align-content:flex-start}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-content-start{justify-content:start}.justify-content-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.space-evenly{justify-content:space-evenly}.w-100{width:100%}.h-100{height:100%}.padding-block-1{padding-block:1rem}.margin-right-0-3{margin-right:.3rem}.margin-right-0-5{margin-right:.5rem}.margin-right-1{margin-right:1rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.margin-top-1{margin-top:1rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-2{margin-bottom:2rem}.margin-block-0-5{margin-block:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.hidden{display:none !important}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ws-pre-line{white-space:pre-line}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:max(1rem,3vw)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.multi-state-button{display:grid;text-align:center;align-items:center;justify-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-size:1.2rem;margin-bottom:1rem}#confirmation_popup .flex,#prompt_popup .flex{margin-top:1rem}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1;margin-left:-1rem;justify-self:flex-start}section{position:relative}section .dark-background{display:grid;grid-template-rows:auto 1fr}ul[type=circle]{padding:1.5rem 2.5rem;list-style:circle}ul[type=circle] li{margin-bottom:1rem}ul[type=circle] li:last-of-type{margin-bottom:0}ul{list-style:none}.top-bottom-padding{padding:1.5rem 0}.margin,.page{margin:0 1rem}.page{display:flex;flex-direction:column}.card{padding:2rem 1.5rem;border-radius:.5rem;background:rgba(var(--text-color), 0.06);margin:1.5rem 0}.card h4{margin-bottom:.4rem}.card h2{margin-bottom:1.5rem}.transaction-container{display:grid;margin-top:1.5rem;gap:.5rem}.label{text-transform:capitalize;font-size:.8rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8);margin-top:1.5rem;font-weight:500}.label:first-of-type{margin-top:0}.label+*{font-weight:700}.header{justify-items:center;flex-direction:column}#homepage{padding-top:0}#first_section{display:grid}header.grid-2{margin-top:2rem}@-webkit-keyframes flyInLeft{from{opacity:0;transform:translateX(-0.5rem)}to{opacity:1;transform:none}}@keyframes flyInLeft{from{opacity:0;transform:translateX(-0.5rem)}to{opacity:1;transform:none}}@-webkit-keyframes flyInRight{from{opacity:0;transform:translateX(0.5rem)}to{opacity:1;transform:none}}@keyframes flyInRight{from{opacity:0;transform:translateX(0.5rem)}to{opacity:1;transform:none}}#highlights{padding:1.5rem 0;display:grid;grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));gap:1.5rem}#highlights .highlight-item{opacity:0;display:flex;flex-direction:column;padding:1rem 1.5rem;border-left:.1rem solid rgba(var(--text-color), 0.2);--animation-duration: 0.3s}#highlights .highlight-item .label{margin-top:auto}#highlights .highlight-item h1{font-size:2rem;letter-spacing:.1rem;font-weight:500;text-transform:uppercase;overflow-wrap:break-word}#highlights .highlight-item:first-of-type{text-transform:uppercase}#highlights .highlight-item:nth-of-type(2){text-transform:capitalize}#highlights .highlight-item:first-of-type{-webkit-animation:flyInLeft var(--animation-duration) forwards;animation:flyInLeft var(--animation-duration) forwards}#highlights .highlight-item:nth-of-type(2){-webkit-animation:flyInLeft var(--animation-duration) .1s forwards;animation:flyInLeft var(--animation-duration) .1s forwards}#highlights .highlight-item:nth-of-type(3){-webkit-animation:flyInLeft var(--animation-duration) .2s forwards;animation:flyInLeft var(--animation-duration) .2s forwards}#highlights .highlight-item:last-of-type{-webkit-animation:flyInLeft var(--animation-duration) .3s forwards;animation:flyInLeft var(--animation-duration) .3s forwards}#main_header{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"logo theme" "search search";margin-top:1rem;gap:1rem}#logo{grid-area:logo;color:inherit}theme-toggle{grid-area:theme;justify-self:end;align-self:center}#search_wrapper{grid-area:search;width:min(28rem,100%);position:relative}#main_search_field{width:100%;--min-height: 2.8rem}#suggestions{position:absolute;top:100%;left:0;width:100%;background:rgba(var(--foreground-color), 1);border-radius:.5rem;z-index:1;overflow:hidden;max-height:0;transition:max-height .2s ease-in-out}#suggestions:not(:empty){max-height:20rem;overflow-y:auto}.suggestion{padding:.8rem 1rem;display:flex;align-items:center;cursor:pointer}.suggestion:hover,.suggestion:active,.suggestion:focus{background:rgba(var(--text-color), 0.06);outline:none}.suggestion .address{font-size:.8rem;color:rgba(var(--text-color), 0.6);margin-left:auto}#page_header{padding:1rem 0;align-items:center}#page_header h3{font-weight:500;text-transform:capitalize}.page{padding:0 0 1rem 0}.page h3.heading{text-transform:capitalize;font-weight:500}.page>h3.heading{margin-top:2rem}p{overflow-wrap:break-word;line-height:1.6em;text-transform:capitalize}.balance-card{display:flex;flex-direction:column;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"),linear-gradient(135deg, rgb(77, 32, 167), rgb(33, 16, 110));background-size:cover;color:#fff;border-radius:.5rem;padding:2rem 1.5rem;margin-bottom:1rem}.balance-card h2,.balance-card h3,.balance-card h4,.balance-card h5{opacity:.8}.balance-card h3{font-size:1.5rem}.balance-card .label{color:#fff;opacity:.7}.choice,.status{padding:.5rem .8rem;border-radius:2rem;display:inline-flex;align-items:center;margin-bottom:.5rem;text-transform:capitalize}.choice-container{display:flex;flex-wrap:wrap}.choice{border:solid 1px rgba(var(--text-color), 0.2)}.choice:last-of-type{margin-bottom:0}.status{font-size:.8rem}.status.closed{background:rgba(var(--foreground-color), 1);border:solid 1px rgba(var(--text-color), 0.2)}.address,.token,.hash,.contract,.block-height{cursor:pointer;color:var(--accent-color)}.address{text-transform:none !important;word-break:break-all}.contract-choice{display:grid;gap:.5rem 1rem;margin-bottom:2rem}.contract-choice:last-of-type{margin-bottom:0}.transaction{display:grid;gap:1.5rem;padding:max(1rem,2vw);border-radius:.5rem;background-color:rgba(var(--foreground-color), 0.8);content-visibility:auto}.transaction .contract-info{align-items:flex-start;display:grid;gap:1.5rem}.transaction>.icon:first-of-type{fill:none;stroke:rgba(var(--text-color), 0.8);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;overflow:visible;height:2.5rem;width:2.5rem;padding:.7rem;border-radius:1rem;background:rgba(var(--text-color), 0.1)}#loading{position:fixed;display:grid;top:0;left:0;bottom:0;right:0;place-content:center;justify-items:center;background:rgba(var(--foreground-color), 1);z-index:10}#loading h4{margin-top:1.5rem;font-weight:500}#all_blocks_page,#top_blocks_container{display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));gap:1rem;margin-top:1rem}.block-card{grid-template-columns:5rem 1fr auto;gap:1rem;background-color:rgba(var(--foreground-color), 1);padding:1rem;border-radius:.5rem}.block-card time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}#token_balance_container{display:grid;gap:.5rem;margin-top:1.5rem}#token_balance_container .holder-balance{padding:1rem;border-radius:.5rem;background:rgba(var(--foreground-color), 1)}#error_page{padding:1.5rem 0}.view-wrapper{display:grid;align-items:flex-start}.view-wrapper>*{grid-area:1/1}@media only screen and (min-width: 640px){.margin,.page{margin:0 4vw}section header h1{font-size:2rem}#main_header{grid-template-areas:"logo theme"}#search_wrapper{grid-area:1/1/2/-1;margin:0 auto;max-width:calc(100% - 16rem)}#page_header{padding:1.5rem 0}#transaction_page{display:grid;gap:0 1.5rem;grid-template-columns:40% 60%;grid-template-areas:"header header" ". ."}#transaction_page .head{grid-area:header}.transaction{grid-template-columns:auto 1fr}.transaction>.icon:first-of-type{grid-area:1/1/3/2}.contract-choice{grid-template-columns:2fr 1fr 1fr;align-items:center}}@media only screen and (min-width: 1280px){.margin,.page{margin:0 10vw}}@media(hover: hover){button{transition:background-color .3s}button:hover{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.hover{cursor:pointer}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 894d829..5c69a66 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,148 +1,580 @@ -@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap"); -*, -::before, -::after { +* { padding: 0; margin: 0; box-sizing: border-box; - font-family: "Roboto", sans-serif; + font-family: "Inter", sans-serif; } + +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); +} + +html, body { - --primary-color: #1565c0; - --text: 17, 17, 17; - --text-light: 100, 100, 100; - --foreground: 255, 255, 255; - --background: #e8e8e8; - --dark-shade: #dadada; - font-size: 16px; - color: rgba(var(--text), 1); - background: rgba(var(--foreground), 1); - background-size: cover; + height: 100%; } + +body { + --accent-color: #3d5afe; + --secondary-color: #ffac2e; + --text-color: 34, 34, 34; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); +} + body[data-theme="dark"] { - --primary-color: #2196f3; - --text: 218, 218, 218; - --text-light: 170, 170, 170; - --foreground: 20, 20, 20; - --background: #0a0a0a; - --dark-shade: #1a1a1a; + --accent-color: #92a2ff; + --secondary-color: #d60739; + --text-color: 200, 200, 200; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); + ::-webkit-calendar-picker-indicator { + filter: invert(1); + } } -input[type="text"]::-ms-clear { - display: none; - width: 0; - height: 0; +h1, +h2, +h3, +h4, +h5, +h6 { + letter-spacing: -0.01em; + font-weight: 700; + // font-family: "Rubik", sans-serif; } -input[type="text"]::-ms-reveal { - display: none; - width: 0; - height: 0; +p, +strong { + line-height: 1.7; + color: rgba(var(--text-color), 0.9); + max-width: 70ch; } -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - display: none; + +img { + object-fit: cover; } -input[type="number"] { - -moz-appearance: textfield; + +a:where([class]) { + color: inherit; + text-decoration: none; + + &:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } } -input:invalid { - outline: none; - box-shadow: none; +a { + color: var(--accent-color); } -::-moz-focus-inner { + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +button, +.button { + user-select: none; + position: relative; + display: inline-flex; border: none; + background-color: transparent; + overflow: hidden; + color: inherit; + -webkit-tap-highlight-color: transparent; + align-items: center; + font-size: inherit; + font-weight: 500; + white-space: nowrap; + padding: 0.8rem; + border-radius: 0.3rem; + justify-content: center; + flex-shrink: 0; + &:focus-visible { + outline: var(--accent-color) solid medium; + } + + &:not(:disabled) { + cursor: pointer; + } } -button { - border: none; - border-radius: 0.2em; + +.button { + background-color: rgba(var(--text-color), 0.02); + border: solid thin rgba(var(--text-color), 0.06); + &--primary { + color: rgba(var(--background-color), 1); + background-color: var(--accent-color); + + .icon { + fill: rgba(var(--background-color), 1); + } + } + &--colored { + color: var(--accent-color); + .icon { + fill: var(--accent-color); + } + } + &--danger { + background-color: #ff737310; + color: var(--danger-color); + .icon { + fill: var(--danger-color); + } + } + + &--small { + padding: 0.4rem 0.6rem; + } + + &--outlined { + border: solid rgba(var(--text-color), 0.3) 0.1rem; + background-color: rgba(var(--foreground-color), 1); + } + &--transparent { + background-color: transparent; + } +} +button:disabled { + opacity: 0.4; + cursor: not-allowed; + filter: saturate(0); +} + +.cta { text-transform: uppercase; - font-weight: 500; - letter-spacing: 0.06em; - background: none; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.8rem 1rem; +} + +.icon { + width: 1.2rem; + height: 1.2rem; + fill: rgba(var(--text-color), 0.8); + flex-shrink: 0; +} + +.icon-only { + padding: 0.5rem; + border-radius: 0.3rem; + aspect-ratio: 1/1; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +details summary { + display: flex; + user-select: none; cursor: pointer; - padding: 0.6rem 1rem; - color: var(--primary-color); - align-self: center; + align-items: center; + justify-content: space-between; + color: var(--accent-color); } -h1 { - font-size: 4rem; + +details[open] { + & summary { + margin-bottom: 1rem; + } + + & > summary .down-arrow { + transform: rotate(180deg); + } } -h2 { - font-size: 2rem; + +sm-input { + --border-radius: 0.5rem; + --background-color: rgba(var(--foreground-color), 1); +} + +sm-spinner { + --size: 1.5rem; + --stroke-width: 0.1rem; +} + +sm-chips { + --gap: 0.3rem; +} + +sm-chip { + position: relative; + font-size: 0.9rem; + --border-radius: 0.5rem; + --padding: 0.5rem 0.8rem; + --background: rgba(var(--text-color), 0.06); + user-select: none; font-weight: 500; + &[selected] { + --background: var(--accent-color); + color: rgba(var(--background-color), 1); + } } -h3 { - font-size: 1.5rem; + +ul { + list-style: none; } + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.wrap-around { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +.full-bleed { + grid-column: 1/-1; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.sticky { + position: sticky; +} + +.top-0 { + top: 0; +} + .flex { display: flex; } + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-1 { + flex: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} + .grid { display: grid; } -.grid-2 { - grid-template-columns: auto auto; - gap: 1em; + +.flow-column { + grid-auto-flow: column; } -.hide { - opacity: 0; - pointer-events: none; + +.gap-0-3 { + gap: 0.3rem; } -.hide-completely { + +.gap-0-5 { + gap: 0.5rem; +} + +.gap-1 { + gap: 1rem; +} + +.gap-1-5 { + gap: 1.5rem; +} + +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + +.text-align-right { + text-align: right; +} +.text-align-left { + text-align: left; +} + +.align-items-start { + align-items: flex-start; +} +.align-items-center { + align-items: center; +} +.align-content-start { + align-content: flex-start; +} + +.align-start { + align-content: flex-start; +} + +.align-center { + align-items: center; +} + +.align-end { + align-items: flex-end; +} + +.text-center { + text-align: center; +} + +.justify-start { + justify-items: start; +} +.justify-content-start { + justify-content: start; +} + +.justify-content-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.align-self-end { + align-self: end; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.flex-direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} +.space-evenly { + justify-content: space-evenly; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.padding-block-1 { + padding-block: 1rem; +} + +.margin-right-0-3 { + margin-right: 0.3rem; +} +.margin-right-0-5 { + margin-right: 0.5rem; +} +.margin-right-1 { + margin-right: 1rem; +} + +.margin-left-0-5 { + margin-left: 0.5rem; +} + +.margin-left-auto { + margin-left: auto; +} +.margin-right-auto { + margin-right: auto; +} +.margin-top-1 { + margin-top: 1rem; +} +.margin-bottom-0-5 { + margin-bottom: 0.5rem; +} +.margin-bottom-1 { + margin-bottom: 1rem; +} +.margin-bottom-2 { + margin-bottom: 2rem; +} + +.margin-block-0-5 { + margin-block: 0.5rem; +} +.margin-block-1 { + margin-block: 1rem; +} + +.margin-block-1-5 { + margin-block: 1.5rem; +} + +.margin-inline-1 { + margin-inline: 1rem; +} + +.margin-inline-1-5 { + margin-inline: 1.5rem; +} + +.hidden { display: none !important; } -.breakable { - word-break: break-word; + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + +.flow-column { + grid-auto-flow: column; +} +.w-100 { + width: 100%; +} + +.color-0-8 { + color: rgba(var(--text-color), 0.8); +} + +.weight-400 { + font-weight: 400; +} + +.weight-500 { font-weight: 500; - letter-spacing: 0.06rem; } -.other-font { - font-family: "Barlow", sans-serif; +.ws-pre-line { + white-space: pre-line; } -.uppercase { - text-transform: uppercase !important; + +.card { + background-color: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + padding: max(1rem, 3vw); } -.capitalise { - text-transform: capitalize !important; + +.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; } -.toggle { +.interactive { position: relative; + overflow: hidden; cursor: pointer; - z-index: 1; - input[type="checkbox"] { - display: none; + -webkit-tap-highlight-color: transparent; +} + +.observe-empty-state:empty { + display: none; +} + +.observe-empty-state:not(:empty) ~ .empty-state { + display: none; +} +.multi-state-button { + display: grid; + text-align: center; + align-items: center; + justify-items: center; + & > * { + grid-area: 1/1/2/2; } - .switch { - overflow: hidden; - display: inline-flex; - flex-direction: column; - justify-items: center; - padding: 0.2rem; - min-height: 1.6rem; - max-height: 1.6rem; - border-radius: 0.5rem; - position: relative; + button { + z-index: 1; } - .circle { - border-radius: 0.5rem; - transition: transform 0.3s; - &:first-of-type { - margin-bottom: 0.4rem; - } - fill: rgba(var(--text), 0.8); - overflow: visible; - stroke-linecap: round; - stroke-linejoin: round; - height: 1.2rem; - width: 1.2rem; - line { - stroke: rgba(var(--text), 0.8); - stroke-width: 6; - } +} + +#confirmation_popup, +#prompt_popup { + flex-direction: column; + h4 { + font-size: 1.2rem; + margin-bottom: 1rem; } - input:checked ~ .switch .circle { - transform: translateY(-1.7rem); + + .flex { + margin-top: 1rem; + } +} + +.popup__header { + position: relative; + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem; + align-items: center; + & > * { + grid-row: 1; + } + h3, + h4 { + grid-column: 1/-1; + justify-self: center; + align-self: center; + } + &__close { + grid-column: 1; + margin-left: -1rem; + justify-self: flex-start; } } section { @@ -165,12 +597,6 @@ ul { } & { list-style: none; - .balance { - margin-bottom: 2rem; - &:last-of-type { - margin-bottom: 0; - } - } } } .top-bottom-padding { @@ -178,20 +604,19 @@ ul { } .margin, .page { - margin: 0 1.5rem; + margin: 0 1rem; } -.margin-left-auto { - margin-left: auto; +.page { + display: flex; + flex-direction: column; } .card { padding: 2rem 1.5rem; border-radius: 0.5rem; - background: rgba(var(--text), 0.06); + background: rgba(var(--text-color), 0.06); margin: 1.5rem 0; h4 { margin-bottom: 0.4rem; - font-weight: 400; - text-transform: capitalize; } h2 { margin-bottom: 1.5rem; @@ -200,191 +625,35 @@ ul { .transaction-container { display: grid; margin-top: 1.5rem; - gap: 1.5rem; - grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: 0.5rem; } .label { text-transform: capitalize; font-size: 0.8rem; margin-bottom: 0.3rem; - line-height: 1.4em; - color: rgba(var(--text-light), 1); + color: rgba(var(--text-color), 0.8); margin-top: 1.5rem; - font-weight: 400; + font-weight: 500; &:first-of-type { margin-top: 0; } - & + h4:not(.address) { - text-transform: capitalize; + & + * { + font-weight: 700; } } .header { justify-items: center; flex-direction: column; } -#logo { - display: inline-flex; - letter-spacing: 0.1em; - align-items: center; - cursor: pointer; - h4 { - font-weight: 400; - } - #main_logo { - height: 1.2rem; - width: 1.2rem; - margin-right: 0.2rem; - fill: rgba(var(--text), 1); - } -} #homepage { padding-top: 0; } #first_section { display: grid; - grid-template-rows: 1fr auto; - min-height: calc(100vh - 8rem); } header.grid-2 { margin-top: 2rem; } -#search_page { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 20; - margin: 0; - background: rgba(var(--foreground), 1); - padding: 1.5rem 8vw; - header { - align-items: center; - justify-content: space-between; - margin-top: 2rem; - .icon { - margin: 0; - cursor: pointer; - height: 2.2rem; - width: 2.2rem; - padding: 0.6rem; - } - } - h1 { - font-weight: 500; - font-size: 3rem; - } - .input { - animation: fade 0.4s; - input:valid ~ #suggestions { - opacity: 1; - pointer-events: all; - transform: none; - } - } - #suggestions { - opacity: 0; - pointer-events: none; - transform: translateY(-0.5rem); - transition: transform 0.3s, opacity 0.3s; - position: absolute; - top: 100%; - width: 100%; - background: var(--background); - border-radius: 0.5rem; - padding: 0.5rem 0; - max-height: 30vh; - overflow-y: auto; - &:empty { - padding: 0; - } - margin-top: 0.5rem; - } - .suggestion { - padding: 0.6rem 1.5rem 0.6rem 3rem; - opacity: 0.8; - cursor: pointer; - &:hover, - &:focus { - opacity: 1; - } - } -} -#main_search { - position: relative; - display: flex; - flex-direction: column; - h2 { - margin-top: 2rem; - align-self: flex-start; - font-size: 4rem; - letter-spacing: 0.1em; - font-weight: 600; - } - h4 { - line-height: 1.4em; - margin-top: 2rem; - font-weight: 400; - color: rgba(var(--text-light), 1); - } - label { - position: relative; - } -} -.input { - border-radius: 0.2rem; - position: relative; - display: grid; - grid-template-columns: auto 1fr; - z-index: 1; - width: 100%; - margin: 1.5rem 0; - align-items: center; - padding: 0.8rem; - gap: 1em; - background: var(--background); - input { - border: none; - width: 100%; - background: transparent; - outline: none; - font-size: 1rem; - color: rgba(var(--text), 1); - } -} -.icon { - height: 1rem; - overflow: visible; - width: 1rem; - fill: none; - stroke: rgba(var(--text), 1); - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 6; -} -.copy-row { - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: 0.5rem; - .icon { - cursor: pointer; - } -} -#textCopied { - padding: 1rem; - border-radius: 2rem; - background: rgba(var(--text), 0.2); - color: rgba(var(--text), 1); - position: fixed; - bottom: 0; - pointer-events: none; - margin: 2rem 0; - left: 50%; - transform: translateX(-50%); - transition: 0.3s opacity ease; - z-index: 20; -} @keyframes flyInLeft { from { opacity: 0; @@ -405,53 +674,17 @@ header.grid-2 { transform: none; } } -@keyframes flyOutLeft { - from { - opacity: 1; - transform: none; - } - to { - opacity: 0; - transform: translateX(-0.5rem); - } -} -@keyframes flyOutRight { - from { - opacity: 1; - transform: none; - } - to { - opacity: 0; - transform: translateX(0.5rem); - } -} -.fly-in-from-left { - animation: flyInLeft 0.2s forwards; -} -.fly-in-from-right { - animation: flyInRight 0.2s forwards; -} -.fly-out-to-left { - animation: flyOutLeft 0.2s forwards; -} -.fly-out-to-right { - animation: flyOutRight 0.2s forwards; -} #highlights { padding: 1.5rem 0; display: grid; - grid-template-columns: 1fr 1fr; - grid-template-areas: - "token token" - "total wallet" - "contract contract"; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; .highlight-item { opacity: 0; display: flex; flex-direction: column; - padding: 1.5rem; - border-left: 0.1rem solid rgba(var(--text), 0.2); + padding: 1rem 1.5rem; + border-left: 0.1rem solid rgba(var(--text-color), 0.2); .label { margin-top: auto; } @@ -468,38 +701,80 @@ header.grid-2 { &:nth-of-type(2) { text-transform: capitalize; } + --animation-duration: 0.3s; &:first-of-type { - grid-area: token; - animation: flyInLeft 0.4s 0.2s forwards; + animation: flyInLeft var(--animation-duration) forwards; } &:nth-of-type(2) { - grid-area: total; - animation: flyInLeft 0.4s 0.4s forwards; + animation: flyInLeft var(--animation-duration) 0.1s forwards; } &:nth-of-type(3) { - grid-area: wallet; - animation: flyInLeft 0.4s 0.6s forwards; + animation: flyInLeft var(--animation-duration) 0.2s forwards; } &:last-of-type { - grid-area: contract; - animation: flyInLeft 0.4s 0.8s forwards; + animation: flyInLeft var(--animation-duration) 0.3s forwards; } } } -#latest_transaction_section, -#latest_blocks_section { - background: rgba(var(--foreground), 1); - header { - grid-template-columns: 1fr auto; - background: inherit; - z-index: 2; - } -} #main_header { - & > .flex:first-of-type { - margin-top: 1.5rem; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "logo theme" + "search search"; + margin-top: 1rem; + gap: 1rem; +} +#logo { + grid-area: logo; + color: inherit; +} +theme-toggle { + grid-area: theme; + justify-self: end; + align-self: center; +} +#search_wrapper { + grid-area: search; + width: min(28rem, 100%); + position: relative; +} +#main_search_field { + width: 100%; + --min-height: 2.8rem; +} +#suggestions { + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: rgba(var(--foreground-color), 1); + border-radius: 0.5rem; + z-index: 1; + overflow: hidden; + max-height: 0; + transition: max-height 0.2s ease-in-out; + &:not(:empty) { + max-height: 20rem; + overflow-y: auto; + } +} +.suggestion { + padding: 0.8rem 1rem; + display: flex; + align-items: center; + cursor: pointer; + &:hover, + &:active, + &:focus { + background: rgba(var(--text-color), 0.06); + outline: none; + } + .address { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.6); + margin-left: auto; } - height: 8rem; } #page_header { padding: 1rem 0; @@ -508,21 +783,6 @@ header.grid-2 { font-weight: 500; text-transform: capitalize; } - .icon { - height: 1.8rem; - width: 1.8rem; - cursor: pointer; - } - .icon:first-of-type { - margin-right: 1rem; - padding: 0.4rem 0.4rem 0.4rem 0; - } - .icon:nth-of-type(2) { - padding: 0.4rem 0 0.4rem 0.4rem; - } - #secondary_search_btn { - margin-left: auto; - } } .page { padding: 0 0 1rem 0; @@ -540,12 +800,8 @@ p { text-transform: capitalize; } .balance-card { - display: inline-grid; - grid-template-columns: auto auto; - grid-template-areas: - "labl logo" - "balance logo" - "address address"; + display: flex; + flex-direction: column; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"), linear-gradient(135deg, rgb(77, 32, 167), rgb(33, 16, 110)); background-size: cover; @@ -553,36 +809,16 @@ p { border-radius: 0.5rem; padding: 2rem 1.5rem; margin-bottom: 1rem; - .flo-logo { - grid-area: logo; - fill: white; - height: 1.5rem; - width: 1.5rem; - opacity: 0.8; - justify-self: flex-end; - } + h2, h3, - h4 { - display: inline-block; - width: auto; + h4, + h5 { + opacity: 0.8; } h3 { - grid-area: balance; - font-weight: 400; - opacity: 0.8; - } - h4 { - font-weight: 400; - } - p { - font-size: 0.8rem; - grid-area: address; - opacity: 0.8; - letter-spacing: 0.1em; - margin-top: 3rem; + font-size: 1.5rem; } .label { - grid-area: labl; color: white; opacity: 0.7; } @@ -601,7 +837,7 @@ p { flex-wrap: wrap; } .choice { - border: solid 1px rgba(var(--text), 0.2); + border: solid 1px rgba(var(--text-color), 0.2); &:last-of-type { margin-bottom: 0; } @@ -609,8 +845,8 @@ p { .status { font-size: 0.8rem; &.closed { - background: rgba(var(--foreground), 1); - border: solid 1px rgba(var(--text), 0.2); + background: rgba(var(--foreground-color), 1); + border: solid 1px rgba(var(--text-color), 0.2); } } .address, @@ -619,43 +855,12 @@ p { .contract, .block-height { cursor: pointer; - color: var(--primary-color); + color: var(--accent-color); } .address { text-transform: none !important; word-break: break-all; } -.tabs { - position: sticky; - top: 0; - padding: 1rem 0 1rem 0; - background: rgba(var(--foreground), 1); - z-index: 2; - display: flex; - overflow-x: auto; - .tab { - cursor: pointer; - opacity: 0.6; - margin-right: 1.5rem; - -webkit-tap-highlight-color: transparent; - white-space: nowrap; - font-size: 1.1rem; - &:last-of-type { - margin-right: 0; - } - &.active { - opacity: 1; - } - } - .line { - position: absolute; - height: 0.12rem; - background: rgba(var(--text), 1); - width: 1px; - bottom: 0; - transition: transform 0.4s, width 0.4s; - } -} .contract-choice { display: grid; gap: 0.5rem 1rem; @@ -664,102 +869,91 @@ p { margin-bottom: 0; } } -@keyframes fade { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: none; - } -} .transaction { display: grid; - gap: 2rem 1rem; - padding: 2rem; + gap: 1.5rem; + padding: max(1rem, 2vw); border-radius: 0.5rem; - grid-template-columns: min-content 1fr; - grid-template-rows: auto 1fr; - background: rgba(var(--text), 0.06); - grid-template-areas: - ". ." - "info info"; + background-color: rgba(var(--foreground-color), 0.8); + content-visibility: auto; .contract-info { - grid-area: info; align-items: flex-start; - } - h4 { - font-weight: 500; + display: grid; + gap: 1.5rem; } & > .icon:first-of-type { + fill: none; + stroke: rgba(var(--text-color), 0.8); stroke-width: 4; - justify-self: center; - height: 3rem; - width: 3rem; - padding: 0.8rem; + stroke-linecap: round; + stroke-linejoin: round; + overflow: visible; + height: 2.5rem; + width: 2.5rem; + padding: 0.7rem; border-radius: 1rem; - background: rgba(var(--foreground), 1); + background: rgba(var(--text-color), 0.1); } } -#loader_page { - display: grid; - place-content: center; - height: 100vh; - width: 100vw; - text-align: center; +#loading { position: fixed; + display: grid; + top: 0; + left: 0; + bottom: 0; + right: 0; + place-content: center; + justify-items: center; + background: rgba(var(--foreground-color), 1); z-index: 10; - background: rgba(var(--foreground), 1); h4 { margin-top: 1.5rem; font-weight: 500; } } -#loader { - justify-self: center; - height: 2.5rem; - width: 2.5rem; - transform-origin: center; - stroke-dashoffset: 200; - stroke-dasharray: 200; - animation: load 2s infinite linear; - stroke: var(--primary-color); -} -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -200; - transform: rotate(360deg); - } -} #all_blocks_page, -#top_blocks_container, +#top_blocks_container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: 1rem; + margin-top: 1rem; +} +.block-card { + grid-template-columns: 5rem 1fr auto; + gap: 1rem; + background-color: rgba(var(--foreground-color), 1); + padding: 1rem; + border-radius: 0.5rem; + time { + font-size: 0.8rem; + color: rgba(var(--text-color), 0.8); + } +} #token_balance_container { display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); - margin-top: 1rem; - .card { - margin: 0; - } -} -#token_balance_container { + gap: 0.5rem; margin-top: 1.5rem; + .holder-balance { + padding: 1rem; + border-radius: 0.5rem; + background: rgba(var(--foreground-color), 1); + } } #error_page { padding: 1.5rem 0; } +.view-wrapper { + display: grid; + align-items: flex-start; + & > * { + grid-area: 1/1; + } +} @media only screen and (min-width: 640px) { .margin, .page { margin: 0 4vw; } - .input { - width: 60% !important; - } section { header { h1 { @@ -767,33 +961,13 @@ p { } } } - #main_search { - h1 { - font-size: 6rem; - text-align: center; - } + #main_header { + grid-template-areas: "logo theme"; } - #highlights { - gap: 2rem; - grid-template-columns: repeat(2, auto); - grid-template-areas: "token total" " wallet contract"; - .highlight-item { - h1 { - font-size: 2.5rem; - } - &:first-of-type { - grid-area: token; - } - &:nth-of-type(2) { - grid-area: total; - } - &:nth-of-type(3) { - grid-area: wallet; - } - &:last-of-type { - grid-area: contract; - } - } + #search_wrapper { + grid-area: 1/1/2/-1; + margin: 0 auto; + max-width: calc(100% - 16rem); } #page_header { padding: 1.5rem 0; @@ -809,6 +983,12 @@ p { grid-area: header; } } + .transaction { + grid-template-columns: auto 1fr; + & > .icon:first-of-type { + grid-area: 1/1/3/2; + } + } .contract-choice { grid-template-columns: 2fr 1fr 1fr; align-items: center; @@ -817,83 +997,18 @@ p { @media only screen and (min-width: 1280px) { .margin, .page { - margin: 0 12vw; - } - .input { - width: 50% !important; - } - #highlights { - grid-template-columns: repeat(4, auto); - grid-template-areas: "token total wallet contract"; - .highlight-item { - &:first-of-type { - grid-area: token; - } - &:nth-of-type(2) { - grid-area: total; - } - &:nth-of-type(3) { - grid-area: wallet; - } - &:last-of-type { - grid-area: contract; - } - } - } -} -@media only screen and (min-width: 1920px) { - body { - font-size: 24px; - } - .margin, - .page { - margin: 0 16vw; - } - #search_page { - padding: 1.5rem 12vw; - } - .input { - width: 40% !important; - } -} -@media only screen and (min-width: 2048px) { - body { - font-size: 24px; - } - .margin, - .page { - margin: 0 26vw; - } - #search_page { - padding: 1.5rem 24vw; - } - #first_section { - min-height: auto; - } - .input { - width: 30% !important; - } -} -@media only screen and (max-width: 320px) { - body { - font-size: 14px; + margin: 0 10vw; } } @media (hover: hover) { button { transition: background-color 0.3s; &:hover { - background: var(--primary-color); - color: rgba(var(--foreground), 1); + background: var(--accent-color); + color: rgba(var(--foreground-color), 1); } } .hover { cursor: pointer; } - .tab { - transition: opacity 0.3s; - &:hover { - opacity: 1; - } - } } diff --git a/index.html b/index.html index 33c6e39..3aff1dd 100644 --- a/index.html +++ b/index.html @@ -6,313 +6,702 @@ FLO Scout + + + + + - -
- Copied -
-
- - Loading - - + + +
+

Loading

-
-
-

Search

- - close - - +
+
-
    - -
    -
    -
    - -
    - - back_arrow - - - -

    - - - search for block, transactions, address, token or contract - - - - + +
      +
      -
      -
      +
      + +

      +
      +
      + + @@ -1863,1024 +1544,16 @@