decentraland-ui
Version:
Decentraland's UI components and styles
123 lines (103 loc) • 13.7 kB
CSS
.dcl.login-modal {
width: 520px;
}
.dcl.login-modal .dcl.option {
width: 410px;
height: 80px;
box-shadow: var(--shadow-1);
border-radius: 8px;
border: var(--outline);
background-color: var(--card-on-modal);
display: flex;
align-items: center;
padding: 8px;
cursor: pointer;
}
.dcl.login-modal .dcl.option:hover {
background-color: var(--secondary-on-modal-hover);
}
.dcl.login-modal .dcl.option .image {
flex: none;
width: 64px;
height: 64px;
background-position: center;
background-size: contain;
}
.dcl.option.metamask .image {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='64' height='64' viewBox='0 0 1025 1025' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url%28%23clip0_542_3186%29'%3E%3Cpath d='M862.005 871.546L689.114 820.065L558.73 898.006L467.763 897.968L337.303 820.065L164.488 871.546L111.92 694.087L164.488 497.133L111.92 330.613L164.488 124.233L434.526 285.567H591.967L862.005 124.233L914.573 330.613L862.005 497.133L914.573 694.087L862.005 871.546Z' fill='%23FF5C16'/%3E%3Cpath d='M164.527 124.233L434.566 285.68L423.826 396.479L164.527 124.233Z' fill='%23FF5C16'/%3E%3Cpath d='M337.34 694.163L456.155 784.672L337.34 820.065V694.163Z' fill='%23FF5C16'/%3E%3Cpath d='M446.659 544.525L423.823 396.554L277.65 497.169L277.574 497.132V497.207L278.026 600.776L337.302 544.525H337.34H446.659Z' fill='%23FF5C16'/%3E%3Cpath d='M862.005 124.233L591.967 285.68L602.669 396.479L862.005 124.233Z' fill='%23FF5C16'/%3E%3Cpath d='M689.19 694.163L570.375 784.672L689.19 820.065V694.163Z' fill='%23FF5C16'/%3E%3Cpath d='M748.922 497.207H748.96H748.922V497.132L748.884 497.169L602.711 396.554L579.875 544.525H689.194L748.508 600.776L748.922 497.207Z' fill='%23FF5C16'/%3E%3Cpath d='M337.303 820.062L164.488 871.544L111.92 694.16H337.303V820.062Z' fill='%23E34807'/%3E%3Cpath d='M446.623 544.487L479.634 758.4L433.886 639.463L277.953 600.776L337.267 544.487H446.586H446.623Z' fill='%23E34807'/%3E%3Cpath d='M689.188 820.062L862.003 871.544L914.571 694.16H689.188V820.062Z' fill='%23E34807'/%3E%3Cpath d='M579.87 544.487L546.859 758.4L592.607 639.463L748.54 600.776L689.189 544.487H579.87Z' fill='%23E34807'/%3E%3Cpath d='M111.92 694.085L164.488 497.131H277.538L277.952 600.737L433.886 639.424L479.633 758.361L456.119 784.556L337.304 694.047H111.92V694.085Z' fill='%23FF8D5D'/%3E%3Cpath d='M914.573 694.085L862.004 497.131H748.955L748.54 600.737L592.607 639.424L546.859 758.361L570.374 784.556L689.189 694.047H914.573V694.085Z' fill='%23FF8D5D'/%3E%3Cpath d='M591.969 285.567H513.249H434.528L423.826 396.366L479.635 758.25H546.862L602.709 396.366L591.969 285.567Z' fill='%23FF8D5D'/%3E%3Cpath d='M164.488 124.233L111.92 330.613L164.488 497.133H277.538L423.787 396.479L164.488 124.233Z' fill='%23661800'/%3E%3Cpath d='M413.951 587.451H362.739L334.854 614.781L433.923 639.349L413.951 587.413V587.451Z' fill='%23661800'/%3E%3Cpath d='M862.006 124.233L914.574 330.613L862.006 497.133H748.956L602.707 396.479L862.006 124.233Z' fill='%23661800'/%3E%3Cpath d='M612.617 587.451H663.904L691.79 614.819L592.607 639.424L612.617 587.413V587.451Z' fill='%23661800'/%3E%3Cpath d='M558.692 827.41L570.373 784.635L546.859 758.44H479.594L456.08 784.635L467.762 827.41' fill='%23661800'/%3E%3Cpath d='M558.689 827.407V898.043H467.76V827.407H558.689Z' fill='%23C0C4CD'/%3E%3Cpath d='M337.34 819.99L467.837 898.007V827.372L456.155 784.597L337.34 819.99Z' fill='%23E7EBF6'/%3E%3Cpath d='M689.19 819.99L558.693 898.007V827.372L570.375 784.597L689.19 819.99Z' fill='%23E7EBF6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_542_3186'%3E%3Crect width='1024' height='1024' fill='white' transform='translate%280.986328 0.5%29'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.dcl.option.metamask-mobile .image {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='64' height='64' viewBox='0 0 1025 1025' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url%28%23clip0_542_3186%29'%3E%3Cpath d='M862.005 871.546L689.114 820.065L558.73 898.006L467.763 897.968L337.303 820.065L164.488 871.546L111.92 694.087L164.488 497.133L111.92 330.613L164.488 124.233L434.526 285.567H591.967L862.005 124.233L914.573 330.613L862.005 497.133L914.573 694.087L862.005 871.546Z' fill='%23FF5C16'/%3E%3Cpath d='M164.527 124.233L434.566 285.68L423.826 396.479L164.527 124.233Z' fill='%23FF5C16'/%3E%3Cpath d='M337.34 694.163L456.155 784.672L337.34 820.065V694.163Z' fill='%23FF5C16'/%3E%3Cpath d='M446.659 544.525L423.823 396.554L277.65 497.169L277.574 497.132V497.207L278.026 600.776L337.302 544.525H337.34H446.659Z' fill='%23FF5C16'/%3E%3Cpath d='M862.005 124.233L591.967 285.68L602.669 396.479L862.005 124.233Z' fill='%23FF5C16'/%3E%3Cpath d='M689.19 694.163L570.375 784.672L689.19 820.065V694.163Z' fill='%23FF5C16'/%3E%3Cpath d='M748.922 497.207H748.96H748.922V497.132L748.884 497.169L602.711 396.554L579.875 544.525H689.194L748.508 600.776L748.922 497.207Z' fill='%23FF5C16'/%3E%3Cpath d='M337.303 820.062L164.488 871.544L111.92 694.16H337.303V820.062Z' fill='%23E34807'/%3E%3Cpath d='M446.623 544.487L479.634 758.4L433.886 639.463L277.953 600.776L337.267 544.487H446.586H446.623Z' fill='%23E34807'/%3E%3Cpath d='M689.188 820.062L862.003 871.544L914.571 694.16H689.188V820.062Z' fill='%23E34807'/%3E%3Cpath d='M579.87 544.487L546.859 758.4L592.607 639.463L748.54 600.776L689.189 544.487H579.87Z' fill='%23E34807'/%3E%3Cpath d='M111.92 694.085L164.488 497.131H277.538L277.952 600.737L433.886 639.424L479.633 758.361L456.119 784.556L337.304 694.047H111.92V694.085Z' fill='%23FF8D5D'/%3E%3Cpath d='M914.573 694.085L862.004 497.131H748.955L748.54 600.737L592.607 639.424L546.859 758.361L570.374 784.556L689.189 694.047H914.573V694.085Z' fill='%23FF8D5D'/%3E%3Cpath d='M591.969 285.567H513.249H434.528L423.826 396.366L479.635 758.25H546.862L602.709 396.366L591.969 285.567Z' fill='%23FF8D5D'/%3E%3Cpath d='M164.488 124.233L111.92 330.613L164.488 497.133H277.538L423.787 396.479L164.488 124.233Z' fill='%23661800'/%3E%3Cpath d='M413.951 587.451H362.739L334.854 614.781L433.923 639.349L413.951 587.413V587.451Z' fill='%23661800'/%3E%3Cpath d='M862.006 124.233L914.574 330.613L862.006 497.133H748.956L602.707 396.479L862.006 124.233Z' fill='%23661800'/%3E%3Cpath d='M612.617 587.451H663.904L691.79 614.819L592.607 639.424L612.617 587.413V587.451Z' fill='%23661800'/%3E%3Cpath d='M558.692 827.41L570.373 784.635L546.859 758.44H479.594L456.08 784.635L467.762 827.41' fill='%23661800'/%3E%3Cpath d='M558.689 827.407V898.043H467.76V827.407H558.689Z' fill='%23C0C4CD'/%3E%3Cpath d='M337.34 819.99L467.837 898.007V827.372L456.155 784.597L337.34 819.99Z' fill='%23E7EBF6'/%3E%3Cpath d='M689.19 819.99L558.693 898.007V827.372L570.375 784.597L689.19 819.99Z' fill='%23E7EBF6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_542_3186'%3E%3Crect width='1024' height='1024' fill='white' transform='translate%280.986328 0.5%29'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.dcl.option.dapper .image {
background-image: url('../../assets/7b3beb6bcbc56ed9.png');
}
.dcl.option.fortmatic .image {
background-image: url('../../assets/f0de0fc393f12f9f.png');
}
.dcl.option.wallet-connect .image {
background-image: url('../../assets/405a77eb97c6d08b.png');
}
.dcl.option.samsung-blockchain-wallet .image {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100%25' height='100%25' viewBox='0 0 300 300' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix%280.766553%2C0%2C0%2C0.766553%2C35.0615%2C35.0613%29'%3E%3Cpath d='M297.462%2C105.461C293.768%2C77.602 283.912%2C52.349 266.521%2C33.86L266.515%2C33.86C248.024%2C16.47 222.778%2C6.61 194.918%2C2.919C168.309%2C-0.604 150.189%2C0.26 150.189%2C0.26C150.189%2C0.26 132.07%2C-0.604 105.46%2C2.919C77.595%2C6.611 52.351%2C16.471 33.86%2C33.86L33.857%2C33.86C16.469%2C52.35 6.61%2C77.603 2.914%2C105.461C-0.612%2C132.068 0.265%2C150.191 0.265%2C150.191C0.265%2C150.191 -0.612%2C168.307 2.914%2C194.92C6.61%2C222.779 16.469%2C248.025 33.858%2C266.519L33.861%2C266.523C52.352%2C283.909 77.596%2C293.77 105.461%2C297.461C132.071%2C300.987 150.19%2C300.119 150.19%2C300.119C150.19%2C300.119 168.309%2C300.987 194.919%2C297.461C222.778%2C293.77 248.024%2C283.908 266.516%2C266.523L266.522%2C266.519C283.914%2C248.026 293.769%2C222.78 297.463%2C194.92C300.986%2C168.308 300.118%2C150.191 300.118%2C150.191C300.118%2C150.191 300.985%2C132.069 297.462%2C105.461' style='fill:rgb%2830%2C75%2C198%29%3Bfill-rule:nonzero%3B'/%3E%3Cpath d='M233.959%2C176.377L233.959%2C124.004C240.433%2C121.056 244.939%2C114.546 244.939%2C106.97C244.939%2C96.631 236.557%2C88.247 226.217%2C88.247C222.378%2C88.247 218.813%2C89.407 215.842%2C91.387L169.111%2C64.408C169.126%2C64.09 169.158%2C63.776 169.158%2C63.452C169.158%2C53.112 160.776%2C44.729 150.434%2C44.729C140.094%2C44.729 131.711%2C53.112 131.711%2C63.452C131.711%2C63.694 131.738%2C63.929 131.748%2C64.17L84.984%2C91.17C82.086%2C89.328 78.658%2C88.247 74.969%2C88.247C64.629%2C88.247 56.246%2C96.63 56.246%2C106.97C56.246%2C114.257 60.418%2C120.554 66.493%2C123.649L66.493%2C176.73C60.418%2C179.826 56.246%2C186.123 56.246%2C193.411C56.246%2C203.75 64.629%2C212.129 74.969%2C212.129C78.657%2C212.129 82.083%2C211.05 84.981%2C209.209L131.748%2C236.211C131.737%2C236.451 131.711%2C236.688 131.711%2C236.929C131.711%2C247.269 140.094%2C255.651 150.434%2C255.651C160.776%2C255.651 169.158%2C247.269 169.158%2C236.929C169.158%2C236.608 169.126%2C236.291 169.111%2C235.972L215.845%2C208.993C218.813%2C210.972 222.381%2C212.13 226.217%2C212.13C236.557%2C212.13 244.939%2C203.751 244.939%2C193.412C244.939%2C185.832 240.433%2C179.323 233.959%2C176.377ZM207.49%2C193.411C207.49%2C194.234 207.561%2C195.042 207.664%2C195.836L161.984%2C222.209C158.801%2C219.708 154.796%2C218.205 150.434%2C218.205C145.989%2C218.205 141.91%2C219.761 138.7%2C222.351L93.454%2C196.227C93.595%2C195.305 93.689%2C194.372 93.689%2C193.412C93.689%2C185.548 88.838%2C178.829 81.97%2C176.055L81.97%2C124.327C88.838%2C121.555 93.689%2C114.834 93.689%2C106.972C93.689%2C106.013 93.594%2C105.078 93.454%2C104.158L138.701%2C78.034C141.911%2C80.621 145.989%2C82.178 150.433%2C82.178C154.795%2C82.178 158.8%2C80.675 161.98%2C78.173L207.663%2C104.548C207.56%2C105.344 207.489%2C106.149 207.489%2C106.972C207.489%2C114.548 211.999%2C121.057 218.473%2C124.005L218.473%2C176.379C212%2C179.323 207.49%2C185.832 207.49%2C193.411Z' style='fill:white%3Bfill-rule:nonzero%3B'/%3E%3Cpath d='M169.342%2C139.168C169.342%2C128.816 160.948%2C120.418 150.594%2C120.418C140.236%2C120.418 131.84%2C128.816 131.84%2C139.168C131.84%2C146.598 136.171%2C152.994 142.434%2C156.03L142.434%2C179.959L158.752%2C179.959L158.752%2C156.03C165.013%2C152.994 169.342%2C146.599 169.342%2C139.168' style='fill:rgb%2869%2C210%2C249%29%3B'/%3E%3C/g%3E%3C/svg%3E");
}
.dcl.option.coinbase .image,
.dcl.option.wallet-link .image {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100%25' height='100%25' viewBox='0 0 1250 1250' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cpath d='M145.833%2C625.001c0%2C-264.46 214.708%2C-479.168 479.168%2C-479.168c264.458%2C0 479.166%2C214.708 479.166%2C479.168c-0%2C264.458 -214.708%2C479.166 -479.166%2C479.166c-264.46%2C-0 -479.168%2C-214.708 -479.168%2C-479.166Z' style='fill:url%28%23_Linear1%29%3B'/%3E%3Cpath d='M624.617%2C346.7c153.386%2C-0 277.916%2C124.53 277.916%2C277.917c0%2C153.386 -124.53%2C277.916 -277.916%2C277.916c-153.387%2C0 -277.917%2C-124.53 -277.917%2C-277.916c-0%2C-153.387 124.53%2C-277.917 277.917%2C-277.917Zm91.318%2C208.515c0%2C-12.096 -9.821%2C-21.916 -21.917%2C-21.916l-138.803%2C-0c-12.096%2C-0 -21.916%2C9.82 -21.916%2C21.916l-0%2C138.803c-0%2C12.096 9.82%2C21.917 21.916%2C21.917l138.803%2C0c12.096%2C0 21.917%2C-9.821 21.917%2C-21.917l0%2C-138.803Z' style='fill:%23fff%3B'/%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='matrix%285.8681e-14%2C-958.333%2C958.333%2C5.8681e-14%2C625.001%2C1104.17%29'%3E%3Cstop offset='0' style='stop-color:%23124bdc%3Bstop-opacity:1'/%3E%3Cstop offset='1' style='stop-color:%232d65f8%3Bstop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
.dcl.login-modal .dcl.option .info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin-left: 16px;
}
.dcl.login-modal .dcl.option .info .title {
font-weight: bold;
color: var(--text);
}
.dcl.login-modal .dcl.option .info .subtitle {
color: var(--secondary-text);
margin-top: 4px;
}
.dcl.login-modal .dcl.option + .dcl.option {
margin-top: 16px;
}
.dcl.login-modal .content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 28px;
}
.dcl.login-modal .message {
margin-top: 28px;
text-align: center;
display: block;
color: var(--text);
line-height: 1.5;
opacity: 0.9;
}
.dcl.login-modal .error {
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: var(--primary);
margin: 20px 0;
text-align: center;
}
.dcl.login-modal .error.visible {
transition: opacity 0.25s ease;
opacity: 1;
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
.dcl.login-modal .loader-background {
height: 100%;
width: 100%;
background-color: var(--background);
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}