/*############################################################### *#### DESKTOP COMMON STATIC CSS - ALL REFERRERS ########### *############################################################### */ /* Touch events: UI fixes */ a { text-decoration: none; } .clickable, .clickDiv { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ cursor: pointer; } .clickable.matchCTA, .clickDiv.matchCTA { -webkit-tap-highlight-color: transparent; transition: all .15s ease-in-out; } /* cursor support */ .touchable, .tapDiv { cursor: pointer; } .textLink:hover { text-decoration: underline; } .textLinkWhite:hover { text-decoration: underline; color: white } .textLinkReverse { text-decoration: underline; } .textLinkReverse:hover { text-decoration: none; } .roundButton:hover { box-shadow: 0px 1px 2px 1px #ddd; } .roundButtonDialog:hover { background-color: #5397E0 !important; } .roundButtonInversedDialog:hover { border-color: #5397E0 !important; } .roundButtonInversedDialog:hover .roundButtonInversedTextDialog { color: #5397E0 !important; } /* settings links hover */ /* .hoverable:hover { background: rgba(0,0,0,0.05); } .userListElement:hover, .threadListElement:hover, .wywaListElement:hover { background: #f2f2f2 !important; } */ /* Toast */ #app .socDateToast { background-color: #444; opacity: 0.9; border-radius: 40px; color: white; margin: 15px 40px; text-align: center; min-height: 30px; } #app .socDateToast > div { line-height: 22px; padding: 3px 10px; } /* Toast fix */ #app .socDateToast > div { padding: 3px 25px; } @media only screen and (min-width: 640px){ .Toastify__toast-container { width: 640px; } .Toastify__toast-container--bottom-center { margin-left: -320px } } /* Toast - registration */ #app .socDateToastRegister { background-color: #FFF; opacity: 0.9; border-radius: 40px; color: #5b91ca; margin: 15px 40px; text-align: center; min-height: 30px; } /* layout */ #app #layoutContainer { display: flex; flex-direction: column; align-items: center; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } #app #layoutContainerInner { display: flex; flex-direction: row; /* height: 100vh; */ /* height: calc(100vh - 115px); */ flex: 1; } #app #layoutContainer .leftContainer .menuGrad { flex: 1; display: flex; align-items: center; justify-content: flex-start; } #app #layoutContainer .leftContainer > img { margin-left: 12px; } #app #layoutContainer .midAndRightContainer { flex: 1; display: flex; flex-direction: row; height: 100vh; } #app #layoutContainer .midContainer { position: relative; flex-direction: column; } #app #layoutContainer .rightContainer { position: relative; display: flex; flex-direction: column; } #app #layoutContainer .rightContainer .menuGradRight { flex: 1; display: flex; align-items: center; justify-content: flex-start; } #app #layoutContainer .topContainer { position: relative; display: flex; flex-direction: row; background: white; } #app #layoutContainer .logoContainer { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; } #app #layoutContainer .statsContainer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex: 2; } #app #layoutContainer .bottomContainer { display: flex; flex-direction: column; flex: 1; position: relative; } #app #layoutContainer .topRightButtonWithIcon.active svg path { fill: #6d9fd4 !important; } /* Ellipsis - list item: trim too long sentence and add ... */ span.listItemSentenceEllipsis { font: inherit; -webkit-line-clamp: 3; } span.listItemSentenceEllipsis.ellipsis2 { font: inherit; -webkit-line-clamp: 2; } /* ScrollView scroll bars */ .scrollView::-webkit-scrollbar { height: 6px; width: 6px; } /* FF support */ .scrollView { scrollbar-width: thin; } .scrollView::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.2); } .scrollView:hover::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.5); } .scrollView::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.2); } .scrollView:hover::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.7); } /* disable tap-events on channel=Desktop */ * { tap-events: none; } /* show DRAG cursor on draggable elements */ .react-draggable { cursor: pointer; /* cursor: -moz-move; cursor: -webkit-move; */ } .react-draggable.react-draggable-dragging { cursor: grabbing !important; cursor: -moz-grabbing !important; cursor: -webkit-grabbing !important; } /* ICONs specific */ .iconWrap svg { pointer-events: none; } /* channel=Desktop layout/cols specific */ #app #layoutContainer .midContainer .middleContainerRightBorder { position: relative; } #app #layoutContainer .midContainer .middleContainerRightBorder:after { position: absolute; content: ""; right: 0; top: 0; bottom: 0; width: 10px; /* background: red; */ background: rgb(238,241,245); background: linear-gradient(90deg, rgba(217,219,223,0) 0%, rgba(0,0,0,0.15) 100%); z-index: 1000; } #app #layoutContainer .midContainer .navBarTop.middleContainerRightBorder:after { top: -50px; } #app #layoutContainer .rightContainer .rightContainerLeftBorder { /* position: relative; */ } #app #layoutContainer .rightContainer .rightContainerLeftBorder:after { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 12px; /* background: red; */ background: rgb(238,241,245); background: linear-gradient(-90deg, rgba(217,219,223,0) 0%, rgba(0,0,0,0.15) 100%); z-index: 1000; } #app #layoutContainer .rightContainer .rightContainerTopBorder { /* position: relative; */ } #app #layoutContainer .rightContainer .rightContainerTopBorder:before { position: absolute; content: ""; left: 0; top: 0; right: 0; height: 4px; /* background: red; */ background: rgb(238,241,245); background: linear-gradient(0deg, rgba(217,219,223,0) 0%, rgba(0,0,0,0.15) 100%); z-index: 1000; } /* TabBar */ .tabBar .tabBarItem { font-size: 15px; padding: 17px; position: relative; text-align: center; } .tabBar .tabBarItem .tabBarSubitemsContainer { display: none; position: absolute; z-index: 5; background: white; color: #333; right: 0; top: 43px; box-shadow: 0px 0px 6px silver; } .tabBar .tabBarItem:hover .tabBarSubitemsContainer { display: block; } .tabBar .tabBarItem .tabBarSubitemsContainer .tabBarItem:hover { } .tabBar .tabBarItem:hover:after { position: absolute; content: ''; height: 5px; left: 0; right: 0; bottom: 0; } .tabBar .tabBarItem.active:after { position: absolute; content: ''; height: 5px; left: 0; right: 0; bottom: 0; } .indexSectionMore { transition: height .3s ease-in-out; overflow: hidden; } .indexSectionMore.opened { height: 380px; } .indexSectionMore.closed { height: 0; } .indexContentRow .indexMoreIcon { transition: transform .3s ease-in-out; transform: rotate(0deg); } .indexContentRow.detailed .indexMoreIcon { transform: rotate(90deg); } /* markdown */ .markdown h2 { margin-top: 30px; margin-bottom: 30px; } .markdown h3 { margin-top: 30px; margin-bottom: 30px; } .markdown img { margin: 25px auto; } .markdown li { line-height: 27px; } .markdown blockquote { margin: 15px 0; } .markdown table { width: 100%; } .markdown th { border: 1px solid rgb(51, 51, 51); padding: 4px; text-align: left; font-weight: bold; } .markdown td { border-bottom: 1px solid rgb(51, 51, 51); padding: 2px; padding: 10px 10px 5px 4px; } .markdown table th:nth-child(1){ width: 150px; } /* timeline */ .userTimelineListElementImInput{ transition: 0.5s padding, 0.5s margin, 0.5s width, 0.5s border-color; position: relative; margin-top: 10px !important; } .userTimelineListElementImInput.focused { padding: 5px 7px 6px 15px !important; } .sendButtonTimeline { width: 0px; display: block; overflow: hidden; padding: 0; justify-content: center; align-items: center; display: flex; margin-top: 10px; } .userTimelineListElementImInput.focused + .sendButtonTimeline { transition: 0.5s; width: 45px; } /* slider animation */ .shake-y { animation: 0.5s ease-out vertical-shaking 1; } @keyframes vertical-shaking { 0% { transform: translateY(0) } 25% { transform: translateY(5px) } 50% { transform: translateY(-25px) } 75% { transform: translateY(5px) } 100% { transform: translateY(0) } } /* pushNotificationPrompt dialog animation */ .ring { animation: 1.5s ease-out ring-bell infinite; } @keyframes ring-bell { 0% { transform: rotateZ(0) } 40% { transform: rotateZ(25deg) } 50% { transform: rotateZ(-15deg) } 60% { transform: rotateZ(10deg) } 75% { transform: rotateZ(-8deg) } 85% { transform: rotateZ(5deg) } 100% { transform: rotateZ(0) } } /* matchingProfiles rotate and scale */ @-webkit-keyframes spinScale /* Safari and Chrome */ { to { -webkit-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); } from { -webkit-transform: rotate(360deg) scale(1.5); -o-transform: rotate(360deg) scale(1.5); transform: rotate(360deg) scale(1.5); } } @keyframes spinScale { to { -ms-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -webkit-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); } from { -ms-transform: rotate(360deg) scale(1.5); -moz-transform: rotate(360deg) scale(1.5); -webkit-transform: rotate(360deg) scale(1.5); -o-transform: rotate(360deg) scale(1.5); transform: rotate(360deg) scale(1.5); } } .spinScale { -webkit-animation: spinScale 10s linear infinite; -moz-animation: spinScale 10s linear infinite; -ms-animation: spinScale 10s linear infinite; -o-animation: spinScale 10s linear infinite; animation: spinScale 10s linear infinite; } @-webkit-keyframes spin /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .spin { -webkit-animation: spin 10s linear infinite; -moz-animation: spin 10s linear infinite; -ms-animation: spin 10s linear infinite; -o-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } @-webkit-keyframes wave /* Safari and Chrome */ { to { -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -o-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 0; } from { -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -o-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 1; } } @keyframes wave { to { -ms-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -moz-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -o-transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 0; } from { -ms-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -moz-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); -o-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 1; } } .wave { -webkit-animation: wave 1.5s linear infinite; -moz-animation: wave 1.5s linear infinite; -ms-animation: wave 1.5s linear infinite; -o-animation: wave 1.5s linear infinite; animation: wave 1.5s linear infinite; } @-webkit-keyframes waveDelay /* Safari and Chrome */ { 0% { transform: scale3d(1, 1, 1); opacity: 1 } 20% { transform: scale3d(1, 1, 1); opacity: 1; } 30% { transform: scale3d(1, 1, 1); opacity: 1; } 80% { transform: translate3d(0px, 0px, 0px) scale3d(1.1, 1.1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 0.4; } 90% { transform: translate3d(0px, 0px, 0px) scale3d(1.15, 1.15, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 0; } 100% { transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 0; } } .waveDelay { -webkit-animation: waveDelay 1.5s linear infinite; -moz-animation: waveDelay 1.5s linear infinite; -ms-animation: waveDelay 1.5s linear infinite; -o-animation: waveDelay 1.5s linear infinite; animation: waveDelay 1.5s linear infinite; } /* matching profiles imMessage ImCta button */ .hoverImCta:hover { background-color: white; color:#6d9fd4; transition: .4s; } .hoverImCtaInvert:hover { background-color: #6d9fd4; color: white !important; transition: .4s; } /* myCoins burgerMenu icon animation */ @-webkit-keyframes appearFromAboveAndScale /* Safari and Chrome */ { 0% { transform: translate3d(0px, -30px, 0px); opacity: 0; } 20% { transform: translate3d(0px, -25px, 0px); opacity: 0.8; } 30% { transform: translate3d(0px, 0px, 0px); opacity:1; } 45% { transform: scale3d(1.2, 1.2, 1.2); } 50% { transform: scale3d(1, 1, 1); } 100% { transform: translate3d(0px, 0px, 0px); } } .appearFromAboveAndScale { -webkit-animation: appearFromAboveAndScale 1s linear; -moz-animation: appearFromAboveAndScale 1s linear; -ms-animation: appearFromAboveAndScale 1s linear; -o-animation: appearFromAboveAndScale 1s linear; animation: appearFromAboveAndScale 1s linear; } .appearFromAboveAndScaleTwoTimes{ -webkit-animation: 1s linear appearFromAboveAndScale; -moz-animation: 1s linear appearFromAboveAndScale; -ms-animation: 1s linear appearFromAboveAndScale; -o-animation: 1s linear appearFromAboveAndScale; animation: 1s 2 appearFromAboveAndScale; animation-timing-function: ease-in, linear, ease-out; } .appearFromAboveAndScaleThreeTimes{ -webkit-animation: 1s linear appearFromAboveAndScale; -moz-animation: 1s linear appearFromAboveAndScale; -ms-animation: 1s linear appearFromAboveAndScale; -o-animation: 1s linear appearFromAboveAndScale; animation: 1s 3 appearFromAboveAndScale; animation-timing-function: ease-in, linear, ease-out; } /* override svg color */ .appearFromAboveAndScaleColor .cls-1 { fill: #F7B75E; } /* swiper styles */ .boostedKeepAliveUsersSwiperItem:hover .boostedKeepAliveUsersSwiperItemImage { z-index: 1; scale: 1.1; transition: scale 0.1s; } /* my coins boost status */ .circle { z-index: 10; position: relative; top: 1; } .inside-circle { display: flex; align-items: center; justify-content: center; } .circle-wrap { width: 32px; height: 32px; background: #e6e2e7; border-radius: 50%; } .circle-wrap .circle .mask, .circle-wrap .circle .fill { width: 32px; height: 32px; position: absolute; border-radius: 50%; } .circle-wrap .circle .mask { clip: rect(0px, 32px, 32px, 16px); } .circle-wrap .circle .mask .fill { clip: rect(0px, 16px, 32px, 0px); background-color: white; } .circle-wrap .circle .mask.full, .circle-wrap .circle .fill { animation: fill ease-in-out 3s; } .additionalBackground { width: 36px; height: 36px; border-radius: 50%; position: absolute; top: 11.5px; right: 8px; } .scrollViewProfileEdit::-webkit-scrollbar { height: 15px; } .profilePictureSwierImageBlur { filter: grayscale(60%); transition: 1s; } .imMessageSingleEmojiScale { transition: transform 150ms; } .imMessageSingleEmojiScale:hover { transform: scale(1.2); } .dialogCloseButtonHover { opacity: 0.3; } .dialogCloseButtonHover:hover { opacity: 1; transition: transform 150ms; } /* paymentInfo paymentStripeHPP */ .cvcInputWrapFocused:focus-within, .expDateInputWrapFocused:focus-within, .ccNumberInputWrapFocused:focus-within { box-shadow: 0 0 0 3px #ebf4ff; border: 1px solid #6d9fd4 !important; } /* paymentInfo Valu */ .valuInput:not(:placeholder-shown) { font-size: 20 !important; font-weight: 700 !important; } .radioListOption { border: 2px solid transparent; /* Transparent border by default */ } /* payment success */ @keyframes expandAnimation { 0% { scale: 1; } 10% { scale: 1.15; } 100% { scale: 1.15; } } @keyframes shrinkAnimation { from { top: 0; bottom: 0; left: 0; right: 0; opacity: 1 } to { top: -80%; bottom: -80%; left: -80%; right: -80%; opacity: 0 } } .cupidCard { width: -webkit-fill-available; width: -moz-available; } /* AI chat bot - blinking dots (waiting state) */ @keyframes typingDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .AIchatBotTypingDotsWrapper span:nth-child(2){ animation-delay: 0.2s !important; } .AIchatBotTypingDotsWrapper span:nth-child(3){ animation-delay: 0.4s !important; } .imageLoader { transition: opacity 0.5s ease; opacity: 0; } .imageLoader.loaded { opacity: 1; }