Untitled
unknown
plain_text
5 months ago
17 kB
5
Indexable
:root {
--modal-dark: ${({ theme }) => theme.common.borderDarker};
--modal-dark-2: ${({ theme }) => theme.background.subSection};
--modal-dark-3: ${({ theme }) => theme.background.primaryCard};
--modal-grey: ${({ theme }) => theme.typography.lightText};
--modal-grey-2: ${({ theme }) => theme.typography.subTitle};
--modal-white: ${({ theme }) => theme.typography.whiteText};
--modal-light: ${({ theme }) => theme.typography.text};
}
.newPopup {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 10101;
background-color: rgba(17, 15, 15, 0.506);
input,
button,
textarea {
appearance: none;
border: 0px;
box-shadow: none;
line-height: 1;
transition: all .2s;
display: inline-block;
outline: none;
margin: 0;
padding: 0;
background: none;
}
img,
svg {
display: block;
}
&__generated {
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: var(--modal-dark);
border-radius: 3rem;
}
h2 {
display: block;
margin-bottom: 6px;
line-height: 1.5;
color: var(--modal-light);
font-weight: 600;
font-size: 18px;
letter-spacing: 0;
font-style: normal;
margin-top: 0;
padding: 0;
}
p {
line-height: 2;
color: var(--modal-grey-2);
font-weight: 400;
font-size: 14px;
letter-spacing: 0;
font-style: normal;
margin: 0;
padding: 0;
@media (max-width: 575.98px) {
font-size: 13px;
}
}
}
&__pair {
overflow-x: auto;
white-space: nowrap;
&-divider {
border-bottom: 2px solid var(--modal-dark);
position: sticky;
top: 0;
left: 0;
margin: 12px 0;
}
&-titleArea {
div {
width: 28px;
flex-shrink: 0;
p {
text-align: center;
text-transform: uppercase;
line-height: 1;
color: var(--modal-light);
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
font-style: normal;
margin: 0;
padding: 0;
}
}
}
&-circleArea {
&__bullet {
flex-shrink: 0;
width: 28px;
height: 28px;
border: 2px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
p {
line-height: 1;
color: var(--modal-light);
font-weight: 600;
font-size: 13px;
letter-spacing: 0;
font-style: normal;
margin: 0;
padding: 0;
}
&--red {
border-color: #FC3037;
background-color: rgba(252, 48, 55, 0.19);
}
&--green {
border-color: #1CCE35;
background-color: rgba(20, 206, 53, 0.19);
}
&--yellow {
border-color: #FDB740;
background-color: rgba(253, 183, 64, 0.19);
}
}
}
}
&__card {
&-item {
border: 1px solid var(--modal-dark);
border-radius: 6px;
position: relative;
}
&-head {
border: 1px solid var(--modal-dark);
background-color: var(--modal-dark-2);
border-radius: 4px;
padding: 10px;
p {
text-transform: uppercase;
line-height: 1;
color: var(--modal-light);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.05em;
font-style: normal;
margin: 0;
padding: 0;
}
}
&-text {
line-height: 1.3;
color: var(--modal-light);
font-weight: 400;
font-size: 14px;
letter-spacing: 0;
font-style: normal;
margin: 0;
padding: 0;
&--big {
font-size: 24px;
font-weight: 700;
line-height: 1;
}
}
}
&__wrapper {
max-width: 968px;
width: calc(100% - 24px);
max-height: calc(100% - 96px);
background-color: var(--modal-dark-3);
border: 2px solid var(--modal-dark);
border-radius: 12px;
overflow: auto;
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: var(--modal-dark);
border-radius: 3rem;
}
&::-webkit-scrollbar-track-piece:end {
background: transparent;
margin-bottom: 79px;
}
&::-webkit-scrollbar-track-piece:start {
background: transparent;
margin-top: 56px;
}
@media (max-width: 575.98px) {
&::-webkit-scrollbar {
display: none;
}
}
}
&__head {
height: 56px;
position: sticky;
top: 0;
z-index: 1090;
background-color: var(--modal-dark-3);
button {
svg {
path {
fill: var(--modal-grey);
}
}
&:hover {
opacity: 0.6;
}
}
}
&__footer {
height: 82px;
position: sticky;
bottom: 0;
border-top: 2px solid var(--modal-dark);
background-color: var(--modal-dark-3);
}
&__input {
&-close {
width: 0;
overflow: hidden;
position: absolute;
right: 50px;
z-index: 1100;
cursor: pointer;
p {
line-height: 50px;
color: #FDB740;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.05em;
font-style: normal;
margin: 0;
padding: 0;
text-transform: uppercase;
@media (max-width: 575.98px) {
font-size: 10px;
}
}
}
position: relative;
textarea {
background-color: var(--modal-dark-3);
border: 1px solid var(--modal-dark);
width: 100%;
height: 50px;
border-radius: 48px;
display: block;
resize: none;
padding: 8px;
padding-left: 24px;
padding-right: 50px;
line-height: 1.2;
color: var(--modal-white);
font-size: 13px;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
&::-webkit-scrollbar {
display: none;
}
&:focus {
border-color: var(--modal-grey);
}
&::placeholder {
line-height: 32px;
color: var(--modal-grey);
font-size: 13px;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
margin: 0;
padding: 0;
opacity: 1;
@media (max-width: 575.98px) {
font-size: 11px;
}
}
&:focus {
&::placeholder {
visibility: hidden;
}
}
}
button:not(.newPopup__input-close) {
position: absolute;
right: 7px;
top: 7px;
width: 36px;
height: 36px;
background-color: #FDB740;
border: 1px solid #FDB740;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: transform 0.2s ease-in-out;
svg,
img {
width: 14px;
height: auto;
transition: all .2s;
path {
fill: #212328;
}
}
&:hover {
transform: rotate(-45deg);
}
&:active {
transform: scale(0.8);
}
}
}
&__message {
p {
line-height: 1.3;
color: var(--modal-light);
font-weight: 400;
font-size: 11px;
letter-spacing: 0;
font-style: normal;
margin: 0;
padding: 0;
}
}
&__detail {
background-color: var(--modal-dark-2);
border: 1px solid var(--modal-dark);
border-radius: 6px;
}
&__btn {
input[type="radio"] {
display: none;
}
&-content {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--modal-dark-2);
border: 1px solid var(--modal-dark);
border-radius: 50%;
cursor: pointer;
user-select: none;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
position: relative;
&:hover {
background-color: var(--modal-dark);
transform: scale(0.9);
}
&:active {
transform: scale(1);
}
}
svg,
img {
width: 18px;
height: 18px;
object-fit: contain;
path {
fill: var(--modal-grey);
}
@media (max-width: 575.98px) {
width: 16px;
height: 16px;
}
}
&-like {
input[type="radio"]:checked+.newPopup__btn-content {
background-color: #279b37;
border-color: #279b37;
&::before,
&::after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: 1095;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
&::before {
display: none;
top: -75%;
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
&::after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
&::before {
display: block;
animation: topConfetti ease-in-out 0.75s forwards;
}
&::after {
display: block;
animation: bottomConfetti ease-in-out 0.75s forwards;
}
}
}
&-dislike {
svg {
transform: rotate(180deg);
}
input[type="radio"]:checked+.newPopup__btn-content {
background-color: #c93035;
border-color: #c93035;
}
}
input[type="radio"]:checked+.newPopup__btn-content {
pointer-events: none;
transform: scale(1);
svg {
path {
fill: #fff;
}
}
}
}
}
@keyframes topConfetti {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes bottomConfetti {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
.fnd-circle-green,
.fnd-circle-green-empty {
width: 26px;
height: 26px;
border: 2px solid #1CCE35;
background-color: rgba(20, 206, 53, 0.19);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
color: var(--modal-light);
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
font-style: normal;
margin: 0 4px;
padding: 0;
position: relative;
}
.fnd-circle-red,
.fnd-circle-red-empty {
width: 26px;
height: 26px;
border: 2px solid #FC3037;
background-color: rgba(252, 48, 55, 0.19);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
color: var(--modal-light);
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
font-style: normal;
margin: 0 4px;
padding: 0;
position: relative;
}
.fnd-circle-yellow,
.fnd-circle-yellow-empty {
width: 26px;
height: 26px;
border: 2px solid #FDB740;
background-color: rgba(253, 183, 64, 0.19);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
color: var(--modal-light);
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
font-style: normal;
margin: 0 4px;
padding: 0;
position: relative;
}
.fnd-circle-red-empty,
.fnd-circle-green-empty,
.fnd-circle-yellow-empty {
color: transparent;
&::before {
content: "..";
}
}
#lottie {
width: 100%;
height: 280px;
overflow: hidden;
object-fit: contain;
svg {
object-fit: contain;
}
}
@media (max-width: 575.98px) {
.newPopup:has(textarea:focus) .triggerElems {
display: none;
}
.newPopup:has(textarea:focus) .newPopup__input-close {
width: auto;
}
.newPopup:has(textarea:focus) textarea {
padding-right: 95px;
}
}
[data-typeit-id]:before {
content: "" !important;
all: revert !important;
}
#type-hidden-element {
visibility: hidden;
position: absolute;
top: -9999px;
left: 0;
z-index: -1;
padding: 0px 16px;
p {
@media (max-width: 575.98px) {
font-size: 13px;
}
}
}Leave a Comment