v1.6.7/website relaunch
This commit is contained in:
@@ -10,10 +10,24 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
||||
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
html {
|
||||
font-size: 7px !important;
|
||||
body {
|
||||
padding: 20rem;
|
||||
padding-top: 15rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 7px !important;
|
||||
.bubble.right {
|
||||
margin-left: -20rem;
|
||||
padding-left: 20rem;
|
||||
padding-right: 20rem;
|
||||
}
|
||||
|
||||
.bubble.left {
|
||||
margin-left: -15rem;
|
||||
margin-right: -20rem;
|
||||
padding-left: 15rem;
|
||||
padding-right: 20rem;
|
||||
}
|
||||
|
||||
.bright-circle {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
+228
-604
@@ -10,667 +10,291 @@ 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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
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;
|
||||
font-size: 10px !important;
|
||||
background-color: var(--color-primary);
|
||||
transition: all ease-in-out 0.2s;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: table;
|
||||
a {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
display: inline-block;
|
||||
content: '↗';
|
||||
margin-left: 1rem;
|
||||
transition: all ease-in-out 0.2s;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
a:hover::after {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.underlink {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 2px;
|
||||
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;
|
||||
.title {
|
||||
font-size: 7.2rem;
|
||||
margin-bottom: 5rem;
|
||||
letter-spacing: 1rem;
|
||||
}
|
||||
|
||||
.features .title {
|
||||
a.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;
|
||||
.sub-title {
|
||||
font-size: 3.6rem;
|
||||
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;
|
||||
.body {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: 2px;
|
||||
margin: 5px 0;
|
||||
margin: 3rem 0px;
|
||||
}
|
||||
|
||||
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;
|
||||
body {
|
||||
padding: 10rem;
|
||||
}
|
||||
|
||||
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;
|
||||
.bubble {
|
||||
border-width: 5rem;
|
||||
border-color: var(--color-bright);
|
||||
border-style: solid;
|
||||
background-color: var(--color-bright);
|
||||
border-radius: 90rem;
|
||||
padding-top: 20rem;
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
|
||||
p#call-user-chip.not-me-user-chip input {
|
||||
margin-left: 20px;
|
||||
.bubble.empty {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
h6#title-card-tagline {
|
||||
color: var(--primary-medium);
|
||||
font-size: 15px;
|
||||
color: var(--primary);
|
||||
margin: 20px 0;
|
||||
letter-spacing: 3.5px;
|
||||
.bubble.right {
|
||||
border-left-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: -10rem;
|
||||
margin-right: -10rem;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
.bubble.left {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-left: -10rem;
|
||||
margin-right: -10rem;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
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;
|
||||
.big-button {
|
||||
display: block;
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: 20rem;
|
||||
color: var(--color-primary);
|
||||
padding: 2.5rem 5rem;
|
||||
margin: 10rem 0rem;
|
||||
max-width: 100%;
|
||||
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));
|
||||
font-size: 1.8rem;
|
||||
text-decoration: none;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
div#title-card {
|
||||
position: relative;
|
||||
a.big-button::after {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
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);
|
||||
.overlap {
|
||||
margin-top: -20rem;
|
||||
}
|
||||
|
||||
/*
|
||||
T H R E A D
|
||||
D E M O S
|
||||
*/
|
||||
|
||||
#ti * {
|
||||
font-size: 14px !important;
|
||||
font-family: 'Glacial';
|
||||
letter-spacing: 1.1px;
|
||||
.info {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
#ti {
|
||||
color: white;
|
||||
width: fit-content;
|
||||
margin: 10px 0;
|
||||
.info .info-card {
|
||||
background-color: var(--color-dim);
|
||||
border-radius: 2.5rem;
|
||||
height: 45rem;
|
||||
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;
|
||||
margin-bottom: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info .info-card {
|
||||
color: var(--color-primary);
|
||||
font-size: 15rem;
|
||||
letter-spacing: 1rem;
|
||||
}
|
||||
|
||||
.info .info-card video {
|
||||
margin: 0 auto;
|
||||
clip-path: circle();
|
||||
max-height: 30rem;
|
||||
}
|
||||
|
||||
.info .info-card svg {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.info .info-text p .underlink {
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.supported.text-section {
|
||||
position: relative;
|
||||
margin-top: 20rem;
|
||||
}
|
||||
|
||||
.bright-circle {
|
||||
width: 50rem;
|
||||
height: 50rem;
|
||||
background-color: var(--color-bright);
|
||||
position: absolute;
|
||||
border-radius: 80rem;
|
||||
z-index: -1;
|
||||
left: -10rem;
|
||||
top: -7.5rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
max-height: fit-content;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar {
|
||||
height: 0.7rem !important;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar-track {
|
||||
background-color: var(--color-tertiary);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.card-grid::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-secondary);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.card-grid::after {
|
||||
content: '.';
|
||||
opacity: 0;
|
||||
color: #9f9f9f;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 50rem;
|
||||
}
|
||||
#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');
|
||||
|
||||
.card-grid .support-card {
|
||||
display: inline-block;
|
||||
min-width: 30rem;
|
||||
min-height: 30rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: 3rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: var(--color-tertiary);
|
||||
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;
|
||||
|
||||
.card-grid a.support-card::after {
|
||||
content: none;
|
||||
}
|
||||
#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;
|
||||
|
||||
.features.card-grid {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#tm video {
|
||||
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 video {
|
||||
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 video {
|
||||
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 {
|
||||
|
||||
.features.card-grid .support-card {
|
||||
min-width: 50rem;
|
||||
min-height: 50rem;
|
||||
margin: 3rem;
|
||||
background-image: none;
|
||||
background-color: var(--color-dim);
|
||||
padding: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#ti.mm #tn {
|
||||
display: none;
|
||||
|
||||
.features.card-grid .support-card video {
|
||||
clip-path: circle();
|
||||
height: 20rem;
|
||||
flex: 1;
|
||||
}
|
||||
#ti.mm #tm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
footer {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
#ti.mm #tm p {
|
||||
text-align: right;
|
||||
|
||||
.link-list {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
#ti.mm #tm #tt {
|
||||
flex-direction: row;
|
||||
|
||||
.link-list .link-list-title {
|
||||
font-size: 2.2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
#ti.mm #tm #tt #ri {
|
||||
right: 0;
|
||||
left: unset;
|
||||
|
||||
.link-list .underlink {
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
#ti.mm:hover #tm p,
|
||||
#ti.mm:hover #tm video {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
|
||||
.link-list .underlink:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
video::-internal-media-controls-overlay-cast-button {
|
||||
display: none;
|
||||
|
||||
footer .end-line .underlink::after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
footer .end-line .underlink:first-of-type {
|
||||
display: block;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
footer .end-line .underlink svg {
|
||||
fill: var(--color-dim);
|
||||
margin-right: 2.5rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
footer .end-line .underlink svg:hover {
|
||||
fill: var(--color-secondary);
|
||||
}
|
||||
|
||||
.versions .support-card {
|
||||
font-size: 7rem;
|
||||
text-decoration: none;
|
||||
letter-spacing: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
+88
-36
@@ -10,49 +10,101 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
||||
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
.features,
|
||||
.supported {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.landing video {
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.home .pop-features {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.pop-feature {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pop-feature {
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
.pop-feature > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pop-feature .explanation {
|
||||
.big-button {
|
||||
text-align: left;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.pop-feature .explanation div {
|
||||
margin-left: 0;
|
||||
padding: 50px;
|
||||
.info {
|
||||
width: 70rem;
|
||||
max-width: 70rem;
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.pop-feature.alternate {
|
||||
flex-direction: row-reverse;
|
||||
.info:not(:last-of-type) {
|
||||
margin-right: 6rem;
|
||||
}
|
||||
|
||||
.pop-feature.alternate .explanation {
|
||||
text-align: right;
|
||||
.link-section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pop-feature.pop-feature.alternate .explanation div {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
.link-section .link-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.link-section .link-list:not(:last-of-type) {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
.card-grid .support-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 1rem transparent;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.card-grid .support-card:hover {
|
||||
box-shadow: 0px 0px 3rem var(--color-secondary-light);
|
||||
}
|
||||
|
||||
.features.card-grid .support-card::before {
|
||||
content: '';
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
border-radius: 20rem;
|
||||
background-color: var(--color-secondary-light);
|
||||
bottom: -5rem;
|
||||
left: -5rem;
|
||||
transition: all linear 0.4s;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.features.card-grid .support-card:hover::before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.features.card-grid .support-card > * {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
footer .end-line {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding-top: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .end-line .underlink:first-of-type {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
footer .end-line .underlink:not(:last-of-type) {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
.text-section .info {
|
||||
width: 100%;
|
||||
max-width: 150rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-section .info .info-text {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-section .info .info-text > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text-section .info .info-text .sub-title {
|
||||
margin-top: 2.5rem;
|
||||
margin-right: 6rem;
|
||||
}
|
||||
|
||||
+6
-277
@@ -10,285 +10,14 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
||||
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
html {
|
||||
font-size: 6.5px !important;
|
||||
.bubble.right {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 6.5px !important;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.features,
|
||||
.supported {
|
||||
max-width: 75%;
|
||||
flex: 1;
|
||||
}
|
||||
.supported-logo {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
.link-button {
|
||||
transition: all ease-in-out 0.2s !important;
|
||||
border: 1px solid var(--cta);
|
||||
background: none;
|
||||
color: var(--cta);
|
||||
position: relative;
|
||||
}
|
||||
.link-button::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
top: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
border-radius: 7rem;
|
||||
left: 0;
|
||||
background: var(--cta);
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.link-button:hover {
|
||||
color: var(--primary);
|
||||
z-index: 10;
|
||||
}
|
||||
.link-button:hover::before {
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.logo {
|
||||
font-size: 10rem;
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
.logo.stickied {
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.8rem;
|
||||
position: fixed;
|
||||
background-color: var(--primary);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
padding: 3rem 10rem;
|
||||
height: auto;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
.landing .link-button.stickied {
|
||||
position: fixed;
|
||||
right: 0rem;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
font-size: 2rem;
|
||||
z-index: 1999 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.landing .link-button.stickied::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
.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 {
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.landing .supported .supported-logo[data-full-support]:hover::before,
|
||||
.landing .supported .supported-logo[data-beta-support]:hover::before,
|
||||
.landing .supported .supported-logo[data-upcoming-support]:hover::before {
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
height: 1.6rem;
|
||||
letter-spacing: 1.05px;
|
||||
padding-top: 1.5rem;
|
||||
z-index: -1;
|
||||
}
|
||||
.feature-card {
|
||||
background-color: var(--primary-medium);
|
||||
z-index: 1;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: -1px;
|
||||
display: inline-block;
|
||||
padding: 3rem;
|
||||
transition: all 0.3s ease-in;
|
||||
position: relative;
|
||||
.bubble.left {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.feature-card .feature-text {
|
||||
z-index: 1;
|
||||
display: table;
|
||||
line-height: 0;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.feature-card:hover {
|
||||
background-color: var(--cta);
|
||||
box-shadow: -5px 5px 100px #000000;
|
||||
z-index: 100;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.feature-card:hover .feature-text {
|
||||
display: table;
|
||||
color: var(--primary-light);
|
||||
line-height: initial;
|
||||
opacity: 1;
|
||||
margin-top: -1.75rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-card .feature-icon video {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon video {
|
||||
transform: scale(3) translateY(-50%);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 17rem;
|
||||
}
|
||||
|
||||
footer .title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
footer .built-with {
|
||||
display: block;
|
||||
}
|
||||
footer .link-button {
|
||||
max-width: fit-content;
|
||||
display: inline-table;
|
||||
margin-right: 3rem;
|
||||
padding: 0.8rem 3.375rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.copyright .landing {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.copyright.welcome .landing {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.welcome .logo a,
|
||||
.copyright .logo a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.welcome .logo a::before,
|
||||
.copyright .logo a::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
top: -3px;
|
||||
padding-top: 2px;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
background: var(--cta);
|
||||
transition: all ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.welcome .logo a:hover::before,
|
||||
.copyright .logo a:hover::before {
|
||||
width: calc(100% + 1rem);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.welcome .logo a:hover,
|
||||
.copyright .logo a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.welcome .landing video {
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.welcome .landing .supported-logo {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--cta);
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip {
|
||||
padding-right: 100px;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .link-button {
|
||||
max-width: fit-content;
|
||||
display: inline-table;
|
||||
margin-right: 3rem;
|
||||
padding: 0.8rem 3.375rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.welcome .landing .supported-logo::before {
|
||||
content: "START WATCHING";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: all ease-out 0.3s;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--primary);
|
||||
font-family: "GlacialBold";
|
||||
background-color: var(--cta);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.welcome .landing .supported-logo[data-support]::before {
|
||||
content: attr(data-support);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.welcome .landing .supported-logo:hover::before {
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
height: 2rem;
|
||||
letter-spacing: 1.05px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.welcome .landing {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip h6 {
|
||||
color: var(--primary-medium);
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip p {
|
||||
color: var(--primary-medium);
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip:hover h6,
|
||||
.welcome .landing#tips .tip:hover p {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip:hover {
|
||||
background-color: var(--primary-medium);
|
||||
margin-left: -2.5rem;
|
||||
border-top-left-radius: 2rem;
|
||||
border-bottom-left-radius: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
.welcome .landing#tips .tip:last-of-type {
|
||||
margin-bottom: 3rem;
|
||||
.link-list .underlink {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,3 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
|
||||
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
|
||||
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
.welcome .landing video {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
@@ -11,37 +11,49 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
************************************************************************/
|
||||
|
||||
:root {
|
||||
--primary: black;
|
||||
--primary-medium: #464646;
|
||||
--primary-light: #626262;
|
||||
--cta: #c0f300;
|
||||
--primary-text: white;
|
||||
--color-primary: black;
|
||||
--color-secondary: white;
|
||||
--color-secondary-light: rgba(255, 255, 255, 0.726);
|
||||
--color-tertiary: #2e2e2e;
|
||||
--color-bright: #beff94;
|
||||
--color-dim: #dfedd6;
|
||||
}
|
||||
.supported-logo#disney {
|
||||
background-image: url('../media/logos/Disney.png');
|
||||
|
||||
.title,
|
||||
.sub-title,
|
||||
.body,
|
||||
.underlink {
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.supported-logo#prime {
|
||||
background-image: url('../media/logos/Prime.png');
|
||||
|
||||
.bright-circle {
|
||||
display: none;
|
||||
}
|
||||
.supported-logo#youtube {
|
||||
background-image: url('../media/logos/Youtube.png');
|
||||
|
||||
.card-grid .support-card#disney {
|
||||
background-image: url('/media/logos/Disney.webp');
|
||||
}
|
||||
.supported-logo#hbonow {
|
||||
background-image: url('../media/logos/HBONowWhite.png');
|
||||
.card-grid .support-card#prime {
|
||||
background-image: url('/media/logos/Prime.webp');
|
||||
}
|
||||
.supported-logo#hbomax {
|
||||
background-image: url('../media/logos/HBOMaxWhite.png');
|
||||
.card-grid .support-card#youtube {
|
||||
background-image: url('/media/logos/Youtube.webp');
|
||||
}
|
||||
.supported-logo#peacock {
|
||||
background-image: url('../media/logos/Peacock.png');
|
||||
.card-grid .support-card#hbo {
|
||||
background-image: url('/media/logos/HBOMaxWhite.webp');
|
||||
}
|
||||
.supported-logo#appletv {
|
||||
background-image: url('../media/logos/AppleTVWhite.png');
|
||||
.card-grid .support-card#peacock {
|
||||
background-image: url('/media/logos/Peacock.webp');
|
||||
}
|
||||
.supported-logo#viki {
|
||||
background-image: url('../media/logos/Viki.png');
|
||||
.card-grid .support-card#google {
|
||||
background-image: url('/media/logos/GooglePlay.webp');
|
||||
}
|
||||
.supported-logo#funimation {
|
||||
background-image: url('../media/logos/FunimationWhite.png');
|
||||
background-size: 60% !important;
|
||||
.card-grid .support-card#crunchyroll {
|
||||
background-image: url('/media/logos/Crunchyroll.webp');
|
||||
}
|
||||
.card-grid .support-card#apple {
|
||||
background-image: url('/media/logos/AppleTVWhite.webp');
|
||||
}
|
||||
.card-grid .support-card#funimation {
|
||||
background-image: url('/media/logos/FunimationWhite.webp');
|
||||
}
|
||||
|
||||
@@ -5,56 +5,54 @@ 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.
|
||||
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.
|
||||
************************************************************************/
|
||||
|
||||
:root {
|
||||
--primary: white;
|
||||
--primary-medium: #c5c5c5;
|
||||
--primary-light: #c0f300;
|
||||
--cta: black;
|
||||
--primary-text: black;
|
||||
--color-primary: white;
|
||||
--color-secondary: black;
|
||||
--color-secondary-light: rgba(87, 87, 87, 0.3);
|
||||
--color-tertiary: #f7f6f6;
|
||||
--color-bright: #beff94;
|
||||
--color-dim: #dfedd6;
|
||||
font-size: 10px;
|
||||
}
|
||||
.supported-logo#netflix {
|
||||
background-image: url('../media/logos/Netflix.png');
|
||||
|
||||
.card-grid .support-card#netflix {
|
||||
background-image: url('/media/logos/Netflix.webp');
|
||||
}
|
||||
.supported-logo#hulu {
|
||||
background-image: url('../media/logos/Hulu.png');
|
||||
.card-grid .support-card#hulu {
|
||||
background-image: url('/media/logos/Hulu.webp');
|
||||
}
|
||||
.supported-logo#disney {
|
||||
background-image: url('../media/logos/DisneyColor.png');
|
||||
.card-grid .support-card#disney {
|
||||
background-image: url('/media/logos/DisneyColor.webp');
|
||||
}
|
||||
.supported-logo#prime {
|
||||
background-image: url('../media/logos/PrimeColor.png');
|
||||
.card-grid .support-card#prime {
|
||||
background-image: url('/media/logos/PrimeColor.webp');
|
||||
}
|
||||
.supported-logo#youtube {
|
||||
background-image: url('../media/logos/YoutubeColor.png');
|
||||
.card-grid .support-card#youtube {
|
||||
background-image: url('/media/logos/YoutubeColor.webp');
|
||||
}
|
||||
.supported-logo#hbonow {
|
||||
background-image: url('../media/logos/HBONowBlack.png');
|
||||
.card-grid .support-card#hbo {
|
||||
background-image: url('/media/logos/HBOMax.webp');
|
||||
}
|
||||
.supported-logo#hbomax {
|
||||
background-image: url('../media/logos/HBOMax.png');
|
||||
.card-grid .support-card#peacock {
|
||||
background-image: url('/media/logos/PeacockColor.webp');
|
||||
}
|
||||
.supported-logo#peacock {
|
||||
background-image: url('../media/logos/PeacockColor.png');
|
||||
.card-grid .support-card#google {
|
||||
background-image: url('/media/logos/GooglePlayColor.webp');
|
||||
}
|
||||
.supported-logo#googleplay {
|
||||
background-image: url('../media/logos/GooglePlay.png');
|
||||
.card-grid .support-card#crunchyroll {
|
||||
background-image: url('/media/logos/Crunchyroll.webp');
|
||||
}
|
||||
.supported-logo#crunchyroll {
|
||||
background-image: url('../media/logos/Crunchyroll.png');
|
||||
.card-grid .support-card#apple {
|
||||
background-image: url('/media/logos/AppleTVBlack.webp');
|
||||
}
|
||||
.supported-logo#appletv {
|
||||
background-image: url('../media/logos/AppleTVBlack.png');
|
||||
.card-grid .support-card#viki {
|
||||
background-image: url('/media/logos/Viki.webp');
|
||||
}
|
||||
.supported-logo#viki {
|
||||
background-image: url('../media/logos/Viki.png');
|
||||
}
|
||||
.supported-logo#funimation {
|
||||
background-image: url('../media/logos/FunimationColor.png');
|
||||
background-size: 60% !important;
|
||||
.card-grid .support-card#funimation {
|
||||
background-image: url('/media/logos/FunimationColor.webp');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user