v1.6.0/welcome exp redone
This commit is contained in:
@@ -212,7 +212,7 @@ footer .link-button {
|
||||
|
||||
.welcome .landing#tips .tip {
|
||||
padding: 3rem 0;
|
||||
border-bottom: 0.5px solid var(--primary-medium);
|
||||
border-bottom: 0.5px solid var(--cta);
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
@@ -268,3 +268,384 @@ footer .link-button {
|
||||
content: attr(data-upcoming-support);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pop-features {
|
||||
padding: 35px;
|
||||
padding-left: 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: 250px;
|
||||
}
|
||||
60% {
|
||||
right: 200px;
|
||||
bottom: 250px;
|
||||
}
|
||||
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 3s infinite alternate-reverse !important;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
div#title-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div#sidebar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: var(--cta);
|
||||
top: 0;
|
||||
border-top-right-radius: 26px;
|
||||
border-bottom-right-radius: 26px;
|
||||
animation: rectSize 2s linear 3s infinite alternate-reverse !important;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -18,3 +18,27 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
.landing video {
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.pop-feature {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pop-feature:not(:first-of-type) {
|
||||
margin: -30px 0;
|
||||
}
|
||||
|
||||
.pop-feature > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pop-feature .explanation {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pop-feature.alternate {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.pop-feature.alternate .explanation {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -194,7 +194,8 @@ footer .link-button {
|
||||
.copyright .logo a::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
top: 0;
|
||||
top: -3px;
|
||||
padding-top: 2px;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
@@ -223,7 +224,7 @@ footer .link-button {
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip {
|
||||
padding-right: 0;
|
||||
padding-right: 100px;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
@@ -270,7 +271,7 @@ footer .link-button {
|
||||
}
|
||||
|
||||
.welcome .landing#tips .tip h6 {
|
||||
color: var(--primary-light);
|
||||
color: var(--primary-medium);
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,8 +12,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
|
||||
:root {
|
||||
--primary: black;
|
||||
--primary-medium: #232323;
|
||||
--primary-light: #454545;
|
||||
--primary-medium: #464646;
|
||||
--primary-light: #626262;
|
||||
--cta: #c0f300;
|
||||
--primary-text: white;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user