674 lines
12 KiB
CSS
674 lines
12 KiB
CSS
/************************************************************************
|
|
Copyright (C) Ayushya Amitabh - All Rights Reserved
|
|
Unauthorized copying of this file, via any medium is strictly prohibited
|
|
Proprietary and confidential
|
|
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
|
|
https://www.chromewatchparty.com/copyright
|
|
=========================================================================
|
|
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
|
|
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
|
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
|
************************************************************************/
|
|
|
|
@keyframes circleFloat {
|
|
0% {
|
|
top: -12.5rem;
|
|
left: -12.5rem;
|
|
}
|
|
25% {
|
|
top: -14rem;
|
|
left: -13rem;
|
|
}
|
|
50% {
|
|
left: -11rem;
|
|
}
|
|
75% {
|
|
top: -11rem;
|
|
}
|
|
100% {
|
|
top: -12.5rem;
|
|
left: -12.5rem;
|
|
}
|
|
}
|
|
|
|
* {
|
|
margin: 0em;
|
|
padding: 0em;
|
|
user-select: none;
|
|
}
|
|
|
|
html {
|
|
font-size: 10px;
|
|
}
|
|
|
|
body {
|
|
font-size: 10px;
|
|
background-color: var(--primary);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.landing {
|
|
padding-top: 12.5rem;
|
|
padding-left: 10rem;
|
|
}
|
|
|
|
.logo-circle {
|
|
border-radius: 100%;
|
|
width: 60rem;
|
|
height: 60rem;
|
|
position: absolute;
|
|
top: -12.5rem;
|
|
left: -12.5rem;
|
|
z-index: -1 !important;
|
|
background-color: var(--primary-light);
|
|
animation: circleFloat 3s ease-in-out 0s infinite;
|
|
}
|
|
.logo-circle:nth-of-type(2) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
.logo-circle:nth-of-type(3) {
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.logo {
|
|
color: var(--cta);
|
|
font-size: 7.2rem;
|
|
letter-spacing: 2.2rem;
|
|
}
|
|
|
|
.logo.duplicate {
|
|
margin-bottom: var(--logo-offset);
|
|
opacity: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.link-button.duplicate {
|
|
margin-bottom: var(--link-button-offset);
|
|
opacity: 0;
|
|
}
|
|
|
|
.logo-tag {
|
|
color: var(--primary-text);
|
|
font-size: 3.2rem;
|
|
letter-spacing: 1.375rem;
|
|
margin: 6rem 0;
|
|
line-height: 6.4rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 3rem;
|
|
color: var(--primary-text);
|
|
letter-spacing: 0.75rem;
|
|
margin: 3rem 0;
|
|
display: inline-block;
|
|
line-height: 6rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--primary-text);
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.supported-logo {
|
|
display: inline-block;
|
|
padding: 10rem;
|
|
margin: 2.5rem;
|
|
background-position: center !important;
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
transition: all ease-in-out 0.2s;
|
|
}
|
|
|
|
.link-button {
|
|
display: table;
|
|
text-decoration: none;
|
|
padding: 3rem 7.5rem;
|
|
color: var(--primary);
|
|
background-color: var(--cta);
|
|
font-size: 4rem;
|
|
border-radius: 7.5rem;
|
|
}
|
|
|
|
.features {
|
|
margin: 6rem 0;
|
|
padding-left: 10rem;
|
|
}
|
|
|
|
.features .title {
|
|
display: block;
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background-color: var(--primary-light);
|
|
padding: 6rem 7.5rem;
|
|
margin: 10rem 0;
|
|
}
|
|
|
|
.feature-icon video {
|
|
border-radius: 100%;
|
|
width: 10rem;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
margin-top: 9rem;
|
|
transition: all ease-in-out 0.3s;
|
|
}
|
|
|
|
.feature-card .feature-icon video {
|
|
transform: scale(2.5) translateY(-50%) translateX(1.5rem);
|
|
}
|
|
|
|
.feature-text {
|
|
color: var(--primary-text);
|
|
font-size: 2.8rem;
|
|
text-align: left;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--primary-medium);
|
|
padding: 6rem 10rem;
|
|
}
|
|
|
|
footer .title {
|
|
width: 100%;
|
|
}
|
|
|
|
.built-with a {
|
|
color: var(--cta);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--cta);
|
|
padding-bottom: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
footer .link-button {
|
|
margin: 3rem 0;
|
|
position: relative;
|
|
width: calc(100% - 15rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.copyright .landing {
|
|
flex: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.welcome .logo,
|
|
.copyright .logo {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.welcome .logo a,
|
|
.copyright .logo a {
|
|
color: var(--cta);
|
|
text-decoration: none;
|
|
padding-bottom: 0.5rem;
|
|
line-height: 125%;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.welcome .landing video {
|
|
display: block;
|
|
max-width: 85%;
|
|
height: auto;
|
|
border-radius: 7rem;
|
|
border: 2px solid var(--cta);
|
|
margin: 10rem 0;
|
|
box-shadow: 0px 0px 50px #c0f30054;
|
|
}
|
|
|
|
.welcome .landing .title.subtitle {
|
|
display: table;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.welcome .landing#tips .tip {
|
|
padding: 3rem 0;
|
|
border-bottom: 0.5px solid var(--cta);
|
|
padding-right: 3rem;
|
|
}
|
|
|
|
.welcome .landing#tips .tip:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.welcome .landing#tips .link-button {
|
|
margin-bottom: 7rem;
|
|
}
|
|
|
|
.welcome .landing#tips .tip h6 {
|
|
color: var(--primary-text);
|
|
font-size: 3rem;
|
|
letter-spacing: 0.5rem;
|
|
}
|
|
|
|
.welcome .landing#tips .tip p {
|
|
color: var(--primary-text);
|
|
font-size: 3rem;
|
|
margin: 1.5rem 0;
|
|
letter-spacing: 0.25rem;
|
|
}
|
|
|
|
.landing .supported .supported-logo {
|
|
position: relative;
|
|
border-bottom: 2px solid var(--cta);
|
|
}
|
|
.landing .supported .supported-logo[data-full-support]::before,
|
|
.landing .supported .supported-logo[data-beta-support]::before,
|
|
.landing .supported .supported-logo[data-upcoming-support]::before {
|
|
content: "FULLY SUPPORTED";
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
height: 2rem;
|
|
left: 0;
|
|
opacity: 1;
|
|
transition: all ease-out 0.3s;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
color: var(--primary);
|
|
font-family: "GlacialBold";
|
|
background-color: var(--cta);
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.landing .supported .supported-logo[data-beta-support]::before {
|
|
content: "BETA SUPPORT";
|
|
}
|
|
|
|
.landing .supported .supported-logo[data-upcoming-support]::before {
|
|
content: attr(data-upcoming-support);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.home .pop-features {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.pop-features {
|
|
padding: 35px;
|
|
padding-left: 70px;
|
|
}
|
|
|
|
.pop-features .title {
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
.pop-feature {
|
|
width: 100%;
|
|
height: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pop-feature > * {
|
|
flex: 1;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
#title-card {
|
|
border-radius: 26px;
|
|
background: var(--primary-light);
|
|
width: 500px;
|
|
position: relative;
|
|
height: 500px;
|
|
box-shadow: 0px 0px 84px var(--primary-medium);
|
|
margin: 0 auto;
|
|
}
|
|
div#title-card {
|
|
width: calc(500px - 60px);
|
|
height: calc(500px - 60px);
|
|
padding: 30px;
|
|
}
|
|
|
|
h5#title-card-title {
|
|
font-size: 20px;
|
|
color: var(--cta);
|
|
letter-spacing: 5px;
|
|
}
|
|
|
|
h3#title-card-subtitle {
|
|
font-size: 30px;
|
|
letter-spacing: 5px;
|
|
margin: 7.5px 0px;
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
p#control-notification,
|
|
p#control-autorejoin,
|
|
p#control-admin {
|
|
font-size: 15px;
|
|
padding: 10px 55px;
|
|
background: var(--primary);
|
|
border-radius: 26px;
|
|
color: var(--primary-text);
|
|
box-shadow: 0px 0px 20px var(--primary-medium);
|
|
margin: 35px 0px;
|
|
width: max-content;
|
|
}
|
|
|
|
p#control-notification {
|
|
margin-left: -150px;
|
|
}
|
|
|
|
p#control-autorejoin {
|
|
margin-left: 100px;
|
|
}
|
|
|
|
p#control-admin {
|
|
margin-left: -75px;
|
|
}
|
|
|
|
p#control-notification span,
|
|
p#control-autorejoin span,
|
|
p#control-admin span {
|
|
display: block;
|
|
color: #949494;
|
|
}
|
|
|
|
.pop-feature .explanation > div {
|
|
margin: auto auto;
|
|
align-items: center;
|
|
max-width: 55%;
|
|
}
|
|
|
|
.pop-feature .explanation div h4 {
|
|
color: var(--primary-text);
|
|
font-size: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 5px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.pop-feature .explanation p {
|
|
color: var(--primary-text);
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 5px;
|
|
line-height: 2;
|
|
}
|
|
|
|
.pop-feature .explanation {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
h5#system-message {
|
|
text-align: center;
|
|
color: var(--primary-text);
|
|
font-size: 16px;
|
|
letter-spacing: 2px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
p#call-user-chip {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
padding: 10px 25px;
|
|
color: var(--primary-text);
|
|
border-radius: 26px;
|
|
background: var(--cta);
|
|
color: var(--primary-medium);
|
|
margin-right: 20px;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
p#call-user-chip.not-me-user-chip {
|
|
background: var(--primary);
|
|
color: var(--primary-text);
|
|
display: inline-flex;
|
|
margin: 0;
|
|
max-width: fit-content;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
p#call-user-chip.not-me-user-chip input {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
h6#title-card-tagline {
|
|
color: var(--primary-medium);
|
|
font-size: 15px;
|
|
color: var(--primary);
|
|
margin: 20px 0;
|
|
letter-spacing: 3.5px;
|
|
}
|
|
|
|
@keyframes circleMove {
|
|
0% {
|
|
right: -40px;
|
|
bottom: -40px;
|
|
}
|
|
35% {
|
|
right: 200px;
|
|
bottom: 350px;
|
|
}
|
|
60% {
|
|
right: 200px;
|
|
bottom: 350px;
|
|
}
|
|
75% {
|
|
right: -40px;
|
|
bottom: -40px;
|
|
}
|
|
100% {
|
|
right: -40px;
|
|
bottom: -40px;
|
|
}
|
|
}
|
|
@keyframes rectSize {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
35% {
|
|
width: 300px;
|
|
}
|
|
60% {
|
|
width: 300px;
|
|
}
|
|
75% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
div#fab {
|
|
background: var(--primary);
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60px;
|
|
letter-spacing: 5px;
|
|
text-align: center;
|
|
color: var(--cta);
|
|
position: absolute;
|
|
right: 250px;
|
|
bottom: 250px;
|
|
animation: circleMove 2s linear 0s infinite alternate !important;
|
|
z-index: 99;
|
|
filter: drop-shadow(0px 0px 20px var(--primary));
|
|
}
|
|
|
|
div#title-card {
|
|
position: relative;
|
|
}
|
|
|
|
div#sidebar {
|
|
width: 300px;
|
|
height: 120%;
|
|
right: 0;
|
|
position: absolute;
|
|
background: var(--cta);
|
|
top: -10%;
|
|
border-top-right-radius: 26px;
|
|
border-bottom-right-radius: 26px;
|
|
animation: rectSize 2s linear 0s infinite alternate !important;
|
|
box-shadow: -5px 0px 50px var(--primary-medium);
|
|
}
|
|
|
|
/*
|
|
T H R E A D
|
|
D E M O S
|
|
*/
|
|
|
|
#ti * {
|
|
font-size: 14px !important;
|
|
font-family: "Glacial";
|
|
letter-spacing: 1.1px;
|
|
}
|
|
|
|
#ti {
|
|
color: white;
|
|
width: fit-content;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
#tm {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
#tm #tt {
|
|
height: 0;
|
|
overflow-y: visible;
|
|
font-size: 10px;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0;
|
|
color: #9f9f9f;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
}
|
|
#tm #tt span {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
#tm #tt #ri {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px;
|
|
color: #c0f300;
|
|
font-size: 20px;
|
|
border-radius: 26px;
|
|
z-index: 99 !important;
|
|
left: 0;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
background-image: url("https://www.materialui.co/materialIcons/content/reply_grey_192x192.png");
|
|
background-size: 75%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
bottom: 0;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
}
|
|
#ti:hover #tm #tt {
|
|
height: 24px;
|
|
margin-bottom: 7px;
|
|
opacity: 1;
|
|
}
|
|
#tm p {
|
|
max-width: 40%;
|
|
padding: 5px 15px;
|
|
background: #424242;
|
|
border-radius: 26px;
|
|
z-index: 99 !important;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
width: fit-content;
|
|
}
|
|
#tm img {
|
|
max-width: 40%;
|
|
border-radius: 26px;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
z-index: 99;
|
|
}
|
|
#ti:hover #tm p,
|
|
#ti:hover #tm img {
|
|
margin-left: 40px;
|
|
}
|
|
#tm #tt #ri:hover {
|
|
opacity: 0.6;
|
|
}
|
|
#tn {
|
|
font-size: 11px;
|
|
margin-top: 15px;
|
|
margin-bottom: 7px;
|
|
color: var(--primary-text);
|
|
}
|
|
#tr {
|
|
font-size: 11px;
|
|
margin-bottom: -20px;
|
|
padding: 7.5px 15px;
|
|
padding-bottom: 25px;
|
|
border-radius: 13px;
|
|
background: #222222;
|
|
width: fit-content;
|
|
max-width: 35%;
|
|
z-index: 99 !important;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
#tr img {
|
|
max-height: 50px;
|
|
border-radius: 26px;
|
|
transition: all ease-in-out 0.3s;
|
|
/* transition-delay: 0.1s; */
|
|
}
|
|
#ti:hover #tr {
|
|
margin-bottom: 0;
|
|
padding-bottom: 7.5px;
|
|
}
|
|
#tr:hover {
|
|
background: #111111;
|
|
}
|
|
#ti.mm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
#ti.mm #tn {
|
|
display: none;
|
|
}
|
|
#ti.mm #tm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
#ti.mm #tm p {
|
|
text-align: right;
|
|
}
|
|
#ti.mm #tm #tt {
|
|
flex-direction: row;
|
|
}
|
|
#ti.mm #tm #tt #ri {
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
#ti.mm:hover #tm p,
|
|
#ti.mm:hover #tm img {
|
|
margin-left: 0;
|
|
margin-right: 40px;
|
|
}
|