Skip to content

Instantly share code, notes, and snippets.

@TABASCOatw

TABASCOatw/index.css

Created February 21, 2024 23:58
Show Gist options
  • Save TABASCOatw/18908f11acc7cbabf18aa851d09e3439 to your computer and use it in GitHub Desktop.
Save TABASCOatw/18908f11acc7cbabf18aa851d09e3439 to your computer and use it in GitHub Desktop.
Download ZIP
Particle Connect CSS
Raw
index.css
/* src/styles/root.css */
.particle-connect-ui-theme-ligth {
--bg-color: #FFFFFF;
--font-color1: #000000;
--font-color2: rgba(60, 66, 66, 0.6);
--font-color3: rgba(107, 113, 146, 1);
--scoll-bar-color: rgba(0, 0, 0, 0.3);
--hover-color: rgba(0, 0, 0, 0.3);
--hover-color2: rgba(81, 119, 249, 0.05);
--active-color: rgba(0, 0, 0, 1);
--active-bg-color: rgba(0, 0, 0, 1);
--active-font-color: rgba(255, 255, 255, 1);
--close-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAA79JREFUaEPdm7uO1TAQhv/lfl8uFW9BR0/PE9BQIEQLEhIIUSEEEhK0CFHQ8AT09HS8Bd2y3Je9os/yrLw5yYnt2IecjBQJ7Ukcf5nx7/HYrKiOHZF0VNJhfx2StOIv3rjnr11JO/7akrRduju8tJQBdFzSMUkA5RjAm5L+SgJ4sA0F5PmTkk4MgOqCAHZD0h/v7SzYXEADAy63jdgOE85AZoHmdI5QPOPHVmwnS9zHWP2ZGrqpgKd9OKY+VwLQxImw/RXbYGxHEY1zklDHMRhq+10S43SuxQACt/ofQrKv74Tstz7IPsCxwhl8L+Q8QH7Dc2MJyy6PEq54ErWdsXmAwKGYy2AkBUBGA6KWzHHLZMyTM+ra5kG8hmL2jc+xwROiKOuBFK8N4sIIFTP2YzIe18Obm4CEJeG5zEaYEq7OQkD+fXEJQ7PpDCb/r6aqIeApSVxTsN+SuA54EO/lruPG9lHw4loIyCIV5ZySoaibFqJn/Wp8COBlSc8lfZb0KrOhu5KuSHog6UtmG/YYVYEfBlgiPF9Iuulbfy3pcWIHn0i64595J+l+4vNtYrMGILnm+YGN8fg1Se+D3DUFMoRjLrsh6WOBPq0DSD2FFXoJuy7pTSJkE+62pA8lOkMFAEDggCxlKZA14eDZsCVR6VVDDGRtOACditbKPedBLgIOwB1Lz2pN8G2QvNjUEkEpOeaaw8wBXqqcfzYhrRO14XjP3iIAeRGQb4NUkFTqVkG17BJIB1hiku9T4HDM2b0p82Rf+12/79YUGXtpCEcVDGPXCasN6cZgzeJSm1oClpoM5Hpwq8ZE3+a5pqDEzJO5UOFzbqIvmarFwNk9i4B0qVqpZDsFblGQLtnGSilpToZSy5NuVW+AJRJuMpKn/oOlTuJNyEdeiIaMQ7bZXIhiJNuo6RB7KOmeP0iQk36FkC8lPRvSGV/KdypqNjRMmdvITihZfMrs3FVfsiDrsTkzp6mZohONTL5sOJXCL3sUlAzddlqzdD8FL+4XfdsA+VutBXDOWEp9hnFL2X7f2naXlrkI7Iq9fYD8PukNUPsA1ErHvj9vfZ3ZF7Qf5u3ijv2EhTHMPWnRt03N5E2GU6solSoizfuZ0NnR7TwQ1AdIg2M75RSGZe9ppxhAm07YXitdIM71IAcNgGs9GxOjol0vJhFYxBHKrvfb0Uq3extjsR4M20JZWV4tWmFRSo5TJh17zgE0WEodeLS2ACEgeIz1XbINAbSXEbJcpUEBs5O+yWAx82Bqo5M8lN71EUbz3wr+AYmK2/Eo29nbAAAAAElFTkSuQmCC);
--more-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALBJREFUOE+l1N8NwiAQx/Evk5gmLtANfHGOxgWMu3SBdo2+6AgO4DDmlEsoAXoALw3k+Pyuf6jjPy7ACVj9vOfyAN7Ay3n46bUFuHXIsn/y+4cYl/XWgBAWZxRcQU1sCYhhuftF8Z6AJCxgiLcEZOEUXhNQhHO4JeAQLuGlABN8hKcCPsA5OAe/ryJ3LuIXmqqLO9WaImzpXCHzowi7s3Su9RtwBWbgbvlF1OAWb1fzBRrFKl8Qs4flAAAAAElFTkSuQmCC);
--more-icon-fff: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
--back-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAA5hJREFUaEPdm8luFDEQhv+w7+trcOcFQICE4MR658KNO0cEB04cQUgIngUkxA0J8RgQSICQkAR9lj3q9HSP3T2ubs+UZAmle2x/XeWqctmsyEYOSDooab9v+ySt+MaIu77tSNr2bUvSv9zTYdBcAtBhSYckAdRHAN6U9FcSwHPLvID8/qikI3NAtUEAuyHpj9d2L9i+gAEMuL59pE4YcwayF2ifyWGKJ/zaSp1kjvdYq+tdTbcr4HFvjl1/lwMwOCfM9ldqh6kTxWmckoR3LEHwtj8lsU5nSgogcKdHMMnY3DHZHzHIGGCpcAE+CjkLkGdorhSzbNMo5oom8bZTMgsQODzmIghJAZDJgHhLYtwiCXFyyrs2aRCt4TFj67M0eEwUz7onxWuCOFugx0z9mKzH1erLdUDMEvNcZMFMMVcnVUD+fW4BTbOuDIL/9+BVq4DHJNGGEPaJzyVdlPRQ0ufMg/6WRNujQbTXdx/XZX7AvZJ0w//opaTHXTpIeBctfqsCsknFc1pLHY71ctNAg3DgUTeDiZ70u3FLwCa425I+GQ1KVWAtAFqb59BwfDNnpgCSa54x+op0OwZcwFkFkHoKO3QLGRMOnnUAgQMyt4wNB89G2BLl3jWUAAeg86K5c89S4ADcDulZrgBPPH0t6Zq3d+KcZSiILSsHeD5j/vlU0gM/KqnSLcM4F4Pj+a4lIOW9e5Lep8zE6B0HmDPIE1PfSbpc0eJ9SR+MAGLd7lg4GSDfSLpaAKRbgxbFJcIOkFdGhtyyDPQlQLpAb5mqjQ3pUjXrZLsJ8o6kjzEPkeG5S7aRnJ60aV51SBKAu8aQk+0SE7JKuKuwQBJCLlWyHEtI4rAzUYTB8abWQir3tgZ5XdIXg4Ep5TsvGsTaTMM4dcgXkp5kBpwqOtH/kGVDIJ9JuiDpkaSvmQEby4bLUvjljIKSoTtOq5fuh9RiZqVNuptorwmQv+XeAFuBNPXLiS9l+4k0nS4NVQS2AHfF3hggz5f6ADR8AGqlpZ/Ph7lOnQuGB7NOcUu/YREYZt60iB1TUyEjw8lVlMq97gjonOi2XgiKATKh0m45Vc0yetspBTCEE47XcheI+2qUiwbANd6NSfGibQOTCAxxhbJt/HC10p3epkiqBqt94VnZXg3tYfGUXKfsdO25D2CApdSBRq0dEA4EjbG/6yzzAIbBMFlablDAwk3fzmApcbBrp0t5Kb3tIxTz3wr+A84tyfE2Wc4aAAAAAElFTkSuQmCC);
--border-color: #E8E9ED;
}
.particle-connect-ui-theme-dark {
--bg-color: #1a1b20;
--font-color1: #ffffff;
--font-color2: rgba(255, 255, 255, 0.6);
--font-color3: #ffffff;
--scoll-bar-color: rgba(255, 255, 255, 0.7);
--border-color: #1a1b20;
--hover-color: rgba(255, 255, 255, 0.3);
--hover-color2: rgba(255, 255, 255, 0.3);
--active-bg-color: rgba(255, 255, 255, 1);
--active-font-color: rgba(0, 0, 0, 1);
--close-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAABDdJREFUaEPdmlluFDEQhv9i3xGb2Hce4ALcgwMgLgDvwAEQ73ABxDvcgwvwhJIQAgnZCCGZZMKk0D+yo56Ou9vutofulDSakdquqa+9VNlVggSiqocAHAdwEMABAPvNh78pfwEMMt9bAP6ICL+jisTSZqBOAjgB4HBNvRsEBbAaC7YxoKoS6FwDqKJ3QdglESFwbakNqKpHAVwAcKT2v/t1JOiCiKz7NR9tFQyoqpx+BDtW5w8b9FkzoJshOoIAVfWsmY5B/UIMqmirABZFZMlXp5ehqsp2FwGc8lWcuN1vAHMiQuBSqQRUVW7tV8aw1qpszT/n2vwuInQ5hVIKqKrcQAhn/VeoEanbE25GRArXZSGgmZbXWzhyrpGcLpquZYCXAdBxd0EYGPxwGeoEVNUzxhV0Ac7aOC8iy3mDdwGakOsmgMoNqGX03FGnRKSftcsFeNUEyi2z38ucNRGZKQQ0cSV3zS7Lt2xYtzOCZte8ZY44XQbcFJEpC5AF7OLGUjQQP0XkFx8OAVWVB9LbAPZ1eegytvMwPSkiAwvIk8G1PQJnMej8exaQxx9O0SbCoOA1gM8A3tZU9AzAfQDPeaqvqcN242F5wQJyc+E9ShN5CeCJUfABwItAZXw5j0yfdwBeBfbPN++LyKQYx07ApvIQwPuMkhDILBxVPAbwqalBw3UYOSzjCNBYKz6QeThOz48R4KhinoCxg+oQyJRwBFwlYIrQzAcyNRwB1wjIwLruPWbZTCqDHAccbesR8E7CE7sLkju33S1pRMw1l3/hWwS8lziCyUNmjUgJx//ZJuBdkzeItHE51bggU8PRkAEBYzj5qpeTX3Ns7+NCqvRWPe8TkDFoyltqF1yIn6yCKHu+nsIPZv/QtVvyeWgwUBdy6AdjBNouA8pcgY+frAuV7bdMQF7HX4qhLaPDx8+NA3KWgLy15mE31i2aD5x9Fykhecs2YY9LsaKZELjUkD0RmbaA5wEwNdZE8qMR4uea9C2ymWm2RQvIJMuNJnQAeBp/anSEwLlGkjcCbxra81VENrK3ajEiGp7oeWVR97DKQ/MDADzRN5GBiHyhgr16bbiTp8hf/HI3bWsu0HdEmTOcsOm0EdegqqdNqtpXWRvbMbW9Yg1zJV84iqxQ6qKMXNuPrEFLo6q83+Q9TReFOfuRwqGiBCgrKjhduyQrIjKXN7gshZ3iMirVC9uVFyxcg5mpykQMixBSXEjFBGWFBfMQ2y6lVWUkdBmEbOumw/JLwhXWylSeIFpcCNQzhUBMlRVKJSB7trCUi5mn2SilXNlX05JiPIZhw+ytj3iNYA6Smw6PVyxZHqekL6fMgfImjqB7qyA2P2Qm8mF2ODbo/y1pdoDSpXBUOXX5zcKGEOFuyLJlTkU67tLd0Vdx8Br0VWxKMZkWpw/lx/6mCvovflh2Nfzm6dtXd0i7f4OccmrSCbV4AAAAAElFTkSuQmCC);
--more-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
--more-icon-fff: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
--back-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAABEJJREFUaEPdm0lv1TAQx//Dvu87iH2HCx8AAQe+BCckTix3BOLAFSEWcefGtwHBiUJpWYootKWlLGXpOuj/5FR5afLivOdJAiNFrRTH9s9je8bjeQIDUdWlAFYAWAJgEYCFAOYBmO+amwYwA2ASwLh7xkTkd+juSKgKVXUlgDUA+HdBm/VOAfgBYFRExtqso+mzjgBVlRrZBGBtB1BZHIQdBTAkItR4W9IWoKpyum0GsN5NvbYa9/yIcCMOlNO6kBQGdFNxh1tXhRrrsDDX6wcR4RT2Fm9AVWXZrU5r3t9598SvoAIYBjAgIvw/V7w6qqrcBXcD4O5YB+Fu+05EqNWWkguoqtzm97rtPq++Mt9PAHgjIvybKS0BHdy+Ctab70BRg72tNJkJqKq0ZYRb7NtaReXoKBAy1ZSkAroNhXDLKup00WZ/AXidtvFkAW4DsKFoKxWX/ywin5J9mAOoqvQh9wDI3YAqBko2T7PxNuniNUG4qXnwH1h3WWPL9fgqPlWTgPQrt9RMM0W7QydgKPpoFtA5zodjR5qiFdelPHfTl9GuGgek88ynDOEp5AaAEwCuA+gK3OisFuOARw2OPGn9JtwtAGfdy0cAbgcG5FHrBddiA1BVVzlfM3A7c6pLwtF+XTDQIBumr/o9AtwFYLUxXRrcJQDPjNr9JiJ9EeAx482lbDiO2bSIPBdVpTu232gUWW0VcBFOLwHpktE1s5Aq4cjzkYAMP6wzoKsajkhfCMhTw/LAgHWAI9IYAem98NQeSuoCR55xAh4JeGJn7IZG+4wbLdo5S1OQp5RJAh4PGNu8CuCca5WBoYuGdi4Pju9nLAH/ALgC4LFPT4zKNABD+qCM49wHcDKmRUI+MQLIq3bKYpMh5B0Ap2sAOWFlJgh5F8CpiiF/Whr6OkA2DL2lq1Y1ZMNVs3a20yBpG5/m7RAB3veWdVxKQtIBuGwMOSUiXRHgTnf9HGDQMqtImhBryK8i8r7skAVduXsxO0nI8wC6DUa2KWRBUPqk7SYPFOlfEvIhgAdFKvAo2xx04geqWmbYkJDXABwCcBNAj0enixQZFJFBfpAM/FKLTDD4l4WJCgwZNq7TkqH7MrVoNYiz2ksDJDCnTcgDsBVIWr28zu7OvHxxa7GsILAFeGPnjFecdQG63aWLWHTCqs4REelPVt7qCvuAS6az6lDIenm47vG+wnZTta7pI8mB4brj/Xxqzsz/kEZCuMxcmdx7eJflxDt75n7WSTgteSffMtspF9BNV8Y6eQPFBIU6CHNJ+3zSLL0AIyJV5f39xgozMJhJwXSRAd9RLgTotMkDMs1I2Yl5jLP2iwhPIN5SGDCmTYY6mJVhfQLhyYBZv0yjLCxtAzpt0jEnKJ/QoAQj1LCIFM70jUaiI8D4cLpMYF6D09VrF5ZQdLV4Gq8+KT1rvsR+VsBMRT6tflZAG8Yt3+RnBX8BGG560bLz030AAAAASUVORK5CYII=);
}
/* src/styles/flex.css */
.particle-connect-ui .flex {
display: flex;
}
.particle-connect-ui .flex-column {
display: flex;
flex-direction: column;
}
.particle-connect-ui .flex-wrap {
flex-wrap: wrap;
}
.particle-connect-ui .start-start {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.particle-connect-ui .start-center {
display: flex;
align-items: flex-start;
justify-content: center;
}
.particle-connect-ui .start-end {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.particle-connect-ui .center-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.particle-connect-ui .center-center {
display: flex;
align-items: center;
justify-content: center;
}
.particle-connect-ui .center-end {
display: flex;
align-items: center;
justify-content: flex-end;
}
.particle-connect-ui .center-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.particle-connect-ui .flex1 {
flex: 1;
}
.particle-connect-ui .hover:hover {
cursor: pointer;
opacity: 0.8;
}
/* src/styles/font/index.css */
@font-face {
font-family: "Apercu Pro-Light";
font-style: normal;
src: url(./Alliance-No-1-Regular-WZT7KIBP.woff2) format("woff2"), url(./Alliance-No-1-Regular-LGX6HLOQ.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro-Mono";
font-style: normal;
src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
src: url(./Alliance-No-1-SemiBold-2WWQPZHS.woff2) format("woff2"), url(./Alliance-No-1-SemiBold-2D6PRMDQ.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro-Medium";
font-style: normal;
src: url(./Alliance-No-1-Bold-H6IRQAM5.woff2) format("woff2"), url(./Alliance-No-1-Bold-ABEQRDSS.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro-Bold";
font-style: normal;
src: url(./Alliance-No-2-Bold-JEEK6NA5.woff2) format("woff2"), url(./Alliance-No-2-Bold-RX4FAILL.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro-Black";
font-style: normal;
src: url(./Alliance-No-2-ExtraBold-XGXNYWG2.woff2) format("woff2"), url(./Alliance-No-2-ExtraBold-VY6OMXVX.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
font-weight: 200;
src: url(./Alliance-No-1-Regular-WZT7KIBP.woff2) format("woff2"), url(./Alliance-No-1-Regular-LGX6HLOQ.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: italic;
font-weight: 400;
src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
font-weight: 450;
src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
font-weight: 500;
src: url(./Alliance-No-1-SemiBold-2WWQPZHS.woff2) format("woff2"), url(./Alliance-No-1-SemiBold-2D6PRMDQ.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
font-weight: 600;
src: url(./Alliance-No-2-Bold-JEEK6NA5.woff2) format("woff2"), url(./Alliance-No-2-Bold-RX4FAILL.ttf) format("truetype");
font-display: swap;
}
@font-face {
font-family: "Apercu Pro";
font-style: normal;
font-weight: 800;
src: url(./Alliance-No-2-ExtraBold-XGXNYWG2.woff2) format("woff2"), url(./Alliance-No-2-ExtraBold-VY6OMXVX.ttf) format("truetype");
font-display: swap;
}
.particle-connect-ui .connect-body {
font-family: "Apercu Pro";
}
/* src/styles/index.css */
/* src/components/ChainModal/index.css */
.particle-chain-modal-container {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.39);
position: fixed;
bottom: 0;
left: 0;
z-index: 1998;
visibility: hidden;
color: var(--font-color1);
}
.particle-chain-modal-container.show {
visibility: initial;
}
@keyframes model-box-show {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1 !important;
}
}
.particle-chain-modal-box {
max-width: 100%;
width: 350px;
min-height: 100px;
border: 1px solid var(--bg-color);
background-color: var(--bg-color);
border-radius: 21px;
opacity: 0;
transform: translateY(100px);
visibility: hidden;
overflow: hidden;
padding: 16px;
box-sizing: border-box;
}
.particle-chain-modal-box.show {
visibility: initial;
animation: model-box-show .18s ease forwards;
opacity: 1;
}
.particle-chain-modal-title {
font-size: 18px;
height: 60px;
line-height: 60px;
font-weight: 800;
color: var(--font-color1);
margin-left: 6px;
width: 100%;
}
.particle-chain-modal-close {
width: 28px;
height: 28px;
border-radius: 50%;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
background-image: var(--close-icon);
background-size: cover;
z-index: 9;
transition: all 0.1s;
}
.particle-modal-title {
font-size: 18px;
font-weight: 800;
color: var(--font-color1);
width: 100%;
margin-bottom: 10px;
}
.particle-chain-list-box {
width: 100%;
max-height: 65vh;
overflow-y: auto;
}
.particle-not-tips {
padding: 0 10px 0 0;
box-sizing: border-box;
margin-top: 15px;
color: var(--font-color2);
font-size: 14px;
}
.particle-chain-list-item {
height: 40px;
width: 100%;
border-radius: 12px;
padding: 7px;
box-sizing: border-box;
font-weight: 700;
color: var(--font-color1);
margin-top: 4px;
cursor: default;
}
.particle-disconnect-btn {
color: #FF494A;
height: 40px;
width: 100%;
border-radius: 12px;
box-sizing: border-box;
font-weight: 700;
margin-top: 10px;
cursor: default;
}
.particle-chain-list-item.item-hover:hover,
.particle-disconnect-btn:hover {
background-color: var(--hover-color);
cursor: pointer;
transition: all 0.3s;
}
.particle-chain-list-item img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-right: 10px;
}
.particle-chain-list-item.active {
background-color: var(--active-bg-color) !important;
color: var(--active-font-color) !important;
}
.particle-chain-active-connected {
color: var(--active-font-color);
font-size: 14px;
}
.particle-chain-active-confirm {
font-weight: 400;
font-size: 12px;
}
.particle-chain-active-confirm span {
background-color: #FFD641;
display: flex;
width: 8px;
height: 8px;
margin-left: 6px;
border-radius: 50%;
}
.particle-chain-active-connected {
display: none;
font-weight: 400;
font-size: 12px;
}
.particle-chain-list-item.active .particle-chain-active-connected {
display: flex;
}
.particle-chain-active-connected span {
display: flex;
width: 8px;
height: 8px;
background-color: #30E000;
margin-left: 6px;
border-radius: 50%;
}
/* src/components/ConnectForm/index.css */
.particle-connect-form-contaier {
width: 100%;
height: 100%;
position: relative;
}
.particle-form-footer {
font-size: 18px;
font-weight: 600;
width: 100%;
color: var(--font-color1);
}
.particle-qrcode {
width: 380px;
height: 380px;
box-sizing: border-box;
border: 1px solid #E9EAEB;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 5px;
background-color: #fff;
}
.particle-copy-uri {
color: var(--font-color2);
font-size: 16px;
cursor: pointer;
text-align: center;
margin-bottom: 10px;
width: 100%;
}
.particle-qrcode img {
width: 100%;
height: 100%;
}
.particle-loading > img {
width: 68px;
height: 68px;
border-radius: 10px;
}
.particle-loading h3 {
font-size: 18px;
margin-bottom: 20px;
font-size: 18px;
font-weight: 800;
margin-top: 10px;
line-height: 30px;
color: var(--font-color1);
}
.particle-loading p {
font-size: 14px;
font-weight: 500;
line-height: 12px;
color: var(--font-color2);
text-align: center;
margin: 0;
}
@keyframes loading-inner {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.particle-loading-img {
width: 30px;
height: 30px;
margin-top: 20px;
animation: loading-inner 1.5s linear infinite;
}
.particle-open-qrcode {
width: 53px;
height: 28px;
background-color: rgba(0, 0, 0, 0.06);
font-size: 12px;
text-align: center;
border-radius: 20px 20px 20px 20px;
line-height: 28px;
margin-left: 30px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #000;
font-weight: 800;
}
.particle-tips {
margin-top: 10px;
font-size: 12px;
color: var(--font-color2);
width: 100%;
padding: 0 40px;
box-sizing: border-box;
margin-bottom: 10px;
}
/* src/components/ConnectModal/index.css */
.particle-connect-modal-container {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.39);
position: fixed;
bottom: 0;
left: 0;
z-index: 1998;
visibility: hidden;
overflow: hidden;
}
.particle-connect-modal-container.show {
visibility: initial;
}
@keyframes model-box-show {
0% {
transform: translateY(200px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.particle-connect-modal-box {
width: 748px;
max-width: 95vw;
height: 526px;
border: 1px solid var(--bg-color);
background-color: var(--bg-color);
border-radius: 20px;
transform: translateY(200px);
visibility: hidden;
position: fixed;
top: calc(50vh - 263px);
left: calc(50vw - 374px);
z-index: 1999;
overflow: hidden;
}
.particle-connect-modal-box.show {
visibility: initial;
animation: model-box-show 0.18s ease forwards;
}
.particle-connect-modal-title {
font-size: 18px;
height: 60px;
line-height: 60px;
font-weight: 600;
color: var(--font-color1);
margin-left: 6px;
width: 100%;
}
.particle-connect-modal-close {
width: 28px;
height: 28px;
border-radius: 50%;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
background-image: var(--close-icon);
background-size: cover;
z-index: 9;
transition: all 0.1s;
}
.particle-connect-modal-close:hover {
transform: scale(1.1);
}
.particle-connect-methods-list {
height: 100%;
padding: 0 0px 0 22px;
box-sizing: border-box;
}
.particle-connect-methods-form {
width: 446px;
max-width: 95vw;
height: 526px;
border-left: 1px solid #efefef;
}
.particle-connect-modal-group-name {
padding: 10px 0;
font-size: 14px;
font-weight: 500;
line-height: 12px;
color: #868989;
max-width: 100%;
overflow-x: hidden;
margin-left: 6px;
}
.particle-connect-modal-group-item {
font-size: 17px;
font-weight: 500;
line-height: 12px;
color: var(--font-color1);
width: 260px;
height: 41px;
overflow: hidden;
transition: all 0.3s;
border-radius: 12px;
cursor: pointer;
margin-top: 4px;
}
.particle-connect-modal-group-item img {
width: 30px;
height: 30px;
}
.particle-group-icon-box {
height: 30px;
width: 30px;
margin-left: 4px;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 13px;
margin-left: 6px;
overflow: hidden;
border-radius: 5px;
}
.particle-connect-modal-group-item.active {
background-color: var(--active-bg-color);
color: var(--active-font-color) !important;
transform: scale(1) !important;
}
.particle-item-hover1:active {
transform: scale(0.95);
}
.particle-item-hover1:hover {
background-color: var(--hover-color);
color: var(--font-color1);
}
.particle-connect-more {
font-size: 14px;
font-weight: 500;
line-height: 16px;
color: var(--font-color1);
width: 100%;
padding-right: 28px;
box-sizing: border-box;
width: 100%;
height: 40px;
cursor: pointer;
}
.particle-connect-more .particle-icon_more {
width: 11.44px;
height: 6.75px;
margin-left: 4px;
border-radius: 4px;
transition: all 0.3s;
background-image: var(--more-icon);
background-size: cover;
}
.particle-connect-more .particle-icon_more.show {
transform: rotate(180deg);
}
.particle-connect-modal-gourp-list {
height: 460px;
overflow-y: auto;
padding-bottom: 20px;
box-sizing: border-box;
}
.particle-connect-modal-gourp-list::-webkit-scrollbar-thumb {
width: 8px;
background: var(--scoll-bar-color);
margin-right: 2px;
border: none;
border-radius: 10px;
}
.particle-no-auth-key {
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
font-size: 14px;
}
.particle-item-what {
margin-top: 30px;
margin-bottom: 28px;
width: 100%;
}
.particle-no-auth-key h3 {
font-size: 18px;
width: 100%;
margin-top: 0;
width: 100%;
font-weight: 600;
text-align: center;
color: var(--font-color1);
}
.particle-item-what h5 {
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: var(--font-color1);
max-width: 276px;
margin: 0;
}
.particle-item-what p {
font-size: 14px;
font-weight: 400;
color: var(--font-color2);
margin: 0;
line-height: 22px;
max-width: 276px;
}
.particle-icon-what {
width: 48px;
height: 48px;
margin-right: 26px;
user-select: none;
margin-left: 22px;
pointer-events: none;
}
.particle-icon-back {
display: none;
}
@media screen and (max-width: 768px) {
.particle-connect-modal-box {
width: 350px;
left: calc(50vw - 175px);
}
.particle-connect-methods-list.hide {
display: none;
}
.particle-connect-modal-title {
text-align: center;
padding-right: 22px;
box-sizing: border-box;
}
.particle-connect-modal-group-item {
}
.particle-connect-methods-form {
display: none;
max-width: 100%;
box-sizing: border-box;
border: none;
}
.particle-connect-methods-form.show {
display: block;
position: relative;
}
.particle-icon-back {
display: block;
position: absolute;
left: 15px;
top: 15px;
cursor: pointer;
z-index: 9;
background-image: var(--back-icon);
width: 28px;
height: 28px;
background-size: 100% 100%;
}
.particle-qrcode {
max-width: 320px;
max-height: 320px;
padding: 10px;
}
}
.-cbwsdk-css-reset {
display: none;
}
/* src/components/AccountModal/index.css */
.particle-account-modal-container {
z-index: 1998;
visibility: hidden;
border-radius: 0;
overflow: hidden;
position: absolute;
right: -20px;
top: 60px;
width: 100vw;
height: 100vh;
}
@media screen and (max-width:600px) {
.particle-account-modal-container {
z-index: 1998;
visibility: hidden;
border-radius: 0;
overflow: hidden;
position: initial !important;
left: 0 !important;
top: 0 !important;
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.39);
}
.particle-account-modal-box {
position: absolute !important;
right: 0;
top: 60px;
}
}
.particle-account-modal-container.show {
visibility: initial;
}
@keyframes model-box-show {
0% {
transform: translateY(-20px);
opacity: 0;
height: auto;
}
100% {
transform: translateY(0px);
opacity: 1 !important;
min-height: 100px;
height: auto;
}
}
.particle-account-modal-box {
position: absolute;
max-width: 100vw;
width: 280px;
height: 0;
z-index: 1999;
padding: 18px 22px;
border: 1px solid var(--bg-color);
background-color: var(--bg-color);
border-radius: 18px;
opacity: 0;
transform: translateY(-20px);
visibility: hidden;
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: 0px 3px 6px rgba(137, 146, 175, 0.16);
}
.particle-account-modal-box.topLeft {
left: 0;
bottom: 60px;
}
.particle-account-modal-box.topRight {
right: 0;
bottom: 60px;
}
.particle-account-modal-box.bottomLeft {
left: 0;
top: 60px;
}
.particle-account-modal-box.bottomRight {
right: 0;
top: 60px;
}
.particle-account-modal-box.show {
visibility: initial;
animation: model-box-show .18s ease forwards;
}
.particle-account-modal-title {
font-size: 18px;
height: 60px;
line-height: 60px;
font-weight: 800;
color: var(--font-color1);
margin-left: 6px;
width: 100%;
}
.particle-account-modal-close {
font-size: 14px;
position: absolute;
right: 24px;
top: 24px;
cursor: pointer;
background-size: cover;
z-index: 9;
transition: all 0.1s;
color: var(--font-color1);
}
.particle-account-header {
display: flex;
align-items: center;
padding: 0 0 16px 0;
box-sizing: content-box;
border-bottom: 1px solid #DCDFE6;
width: 100%;
margin-bottom: 17px;
}
.particle-avatar {
height: 33px;
width: 33px;
margin-right: 0;
border-radius: 50%;
overflow: hidden;
}
.particle-account-address {
margin-left: 7px;
font-size: 17px;
font-weight: 500;
line-height: 20px;
color: var(--font-color3);
font-family: Apercu Pro;
user-select: none;
}
.particle-account-info span {
user-select: none;
}
.particle-logout:hover {
transform: scale(1.02);
}
.particle-logout:active {
opacity: 0.8;
}
.particle-icon-copy {
width: 18px;
height: 18px;
margin-left: 10px;
cursor: pointer;
}
.particle-link-item {
width: 100%;
height: 40px;
opacity: 1;
border-radius: 6px;
transition: all 0.3s;
font-size: 17px;
font-weight: 500;
line-height: 20px;
color: var(--font-color1);
padding: 0 10px;
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
font-family: Apercu Pro !important;
}
.particle-link-item .icon {
font-size: 20px;
font-weight: 600;
margin-right: 15px;
color: var(--font-color1);
}
.particle-link-item.red,
.particle-link-item.red .icon {
color: #F92531 !important;
}
.particle-link-item.red:hover {
background: rgba(249, 37, 49, 0.1) !important;
}
.particle-link-item:hover {
background: var(--hover-color2);
}
/* src/components/ConnectButton/index.css */
.particle-user-bar-container {
display: inline-flex;
}
.particle-connect-wallet-btn {
display: inline-flex;
background-color: #0e76fd;
font-size: 16px;
color: #fff;
font-weight: 600;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
transition: all .125s ease;
cursor: pointer;
user-select: none;
text-align: center;
justify-content: center;
align-items: center;
max-width: 147px;
height: 100%;
text-align: center;
word-break: keep-all;
}
.particle-connect-wallet-btn:hover {
transform: scale(1.01);
}
.particle-connect-wallet-btn:active {
opacity: 0.8;
}
.particle-account-info {
display: inline-flex;
overflow: hidden;
background-color: var(--bg-color);
border-radius: 10px;
padding: 10px 14px;
font-size: 16px;
font-weight: 400;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
text-overflow: ellipsis;
overflow: hidden;
word-wrap: nowrap;
cursor: pointer;
transition: all 0.14s;
color: var(--font-color1);
position: relative;
}
.particle-unsupported-chain-button {
display: inline-flex;
overflow: hidden;
background-color: #FF494A;
border-radius: 10px;
padding: 10px 14px;
font-size: 16px;
font-weight: 400;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
text-overflow: ellipsis;
overflow: hidden;
word-wrap: nowrap;
cursor: pointer;
transition: all 0.14s;
color: #fff;
}
.particle-account-info.particle-chain {
margin-right: 8px;
}
.particle-account-info:hover,
.unsupported-chain-button:hover {
transform: scale(1.01);
}
.particle-avatar-img {
border-radius: 3px;
margin-right: 10px;
overflow: hidden;
background-color: var(--bg-color);
width: 24px;
height: 24px;
border-radius: 50%;
background-size: 100% auto;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.particle-chain-icon {
width: 100%;
height: 100%;
}
.particle-account-info span,
.unsupported-chain-button span {
margin-right: 4px;
}
.particle-icon-more {
width: 11.44px;
height: 6.75px;
background-image: var(--more-icon);
background-size: cover;
}
.particle-unsupported-chain-button .icon-more {
background-image: var(--more-icon-fff);
}
.particle-unsupported-tips {
color: var(--font-color2);
font-size: 14px;
margin: 20px 0 10px;
font-weight: 500;
}
@media screen and (max-width:500px) {
.particle-account-info span {
display: none;
}
}
.particle-account-info-fixed {
position: relative;
width: auto;
height: auto;
}
.custom-btn-box.account-show {
position: relative;
display: inline-block;
width: auto;
height: auto;
}
.custom-btn-box .particle-account-modal-container,
.custom-btn-box .particle-account-modal-box {
display: none !important;
}
.custom-btn-box.account-show .particle-account-modal-container,
.custom-btn-box.account-show .particle-account-modal-box {
display: flex !important;
position: fixed !important;
}
.custom-btn-box.account-show .particle-account-modal-container {
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.custom-btn-box.account-show .particle-account-modal-box {
right: calc(50vw - 140px) !important;
top: calc(50vh - 200px) !important;
opacity: 1 !important;
}
.particle-user-bar-container .particle-account-modal-container,
.particle-user-bar-container .particle-account-modal-box {
display: none !important;
}
.particle-user-bar-container.is-ui-button .particle-account-modal-container,
.particle-user-bar-container.is-ui-button .particle-account-modal-box {
display: block !important;
opacity: 1 !important;
}
/*# sourceMappingURL=index.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment