@pusdn/gatsby-theme-antv
Version:
Ant Visualization solution home page
399 lines (388 loc) • 8.53 kB
text/less
@import './mixins';
.wrapper {
min-height: 650px;
max-height: 803px;
background: linear-gradient(225deg, #ffffff, #f0f5ff);
height: calc(94vh);
position: relative;
overflow: hidden;
.content {
.container1440;
height: 100%;
position: relative;
}
.text {
position: relative;
top: 26%;
z-index: 1;
margin-left: 4.5%;
.title {
font-size: 3.4em; //2.875em;
font-weight: 800;
color: rgba(0, 0, 0, 1);
position: relative;
}
.description {
margin-top: 0.83%; //12px;
margin-bottom: 0px;
color: rgba(106, 123, 140, 1);
font-size: 1.14em;
font-weight: 200;
position: relative;
width: 40%;
max-width: 700px;
}
.buttons {
display: flex;
margin-top: 5.56%;
.buttonLink + .buttonLink {
margin-left: 16px;
}
.buttonLink {
cursor: pointer;
border-radius: 50px;
min-width: 134px;
padding-left: 15px;
padding-right: 15px;
height: 40px;
z-index: 10;
position: relative;
transition: all 0.3s;
border: 1px solid @primary-color;
color: @primary-color;
background: transparent;
text-align: center;
font-size: 1.14em;
line-height: 40px;
&:hover {
color: tint(@primary-color, 25%);
border: 1px solid tint(@primary-color, 25%);
background-color: fade(@primary-color, 3%);
}
&.primary {
border: none;
outline: none;
color: #fff;
background: linear-gradient(
60deg,
fade(@primary-color, 70%),
shade(@primary-color, 20%)
);
opacity: 0.8;
box-shadow: 0 8px 10px fade(@primary-color, 20%);
&:hover {
opacity: 1;
}
}
}
.videoButtonWrapper {
margin-left: 16px;
width: fit-content;
height: fit-content;
.videoButton {
width: 40px;
height: 40px;
background-size: contain;
border: 1px solid @primary-color;
border-radius: 20px;
transition: all 0.15s;
display: flex;
cursor: pointer;
overflow: hidden;
.videoButtonIcon {
margin-left: 12px;
font-size: 16px;
color: @primary-color;
line-height: 44px;
}
.videoButtonText {
line-height: 40px;
margin-left: 10px;
color: @primary-color;
}
&:hover {
width: 134px;
}
}
}
.githubWrapper {
margin-left: 16px;
display: flex;
:global {
.gh-btn {
width: 40px;
height: 40px;
border-radius: 20px;
padding: 9px;
border: 1px solid #ced4d9;
background: transparent;
text-decoration: none;
white-space: nowrap;
display: flex;
cursor: pointer;
float: left;
transition: all 0.15s;
&:hover {
background: #f2f4f5;
}
.gh-ico {
width: 16px;
height: 16px;
margin-left: 2px;
margin-top: 2px;
background-image: url(https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ);
background-size: 100% 100%;
background-repeat: no-repeat;
box-sizing: border-box;
cursor: pointer;
color: #333;
}
.gh-text {
display: none;
}
}
.gh-count {
position: relative;
display: none;
/* hidden to start */
margin-left: 52px;
margin-top: 7px;
border: 1px solid #d4d4d4;
padding: 2px 10px;
font-weight: 700;
height: 65%;
border-radius: 5px;
color: rgb(49, 70, 89);
&:hover {
background: #f2f4f5;
transition: all 0.15s;
}
}
.gh-count:hover,
.gh-count:focus {
color: #4183c4;
}
.gh-count:before,
.gh-count:after {
content: '';
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.gh-count:before {
top: 50%;
left: -3px;
margin-top: -5px;
border-width: 4px 4px 4px 0;
border-right-color: #fafafa;
}
.gh-count:after {
top: 50%;
border-width: 5px 5px 5px 0;
border-right-color: #d4d4d4;
left: -5px;
z-index: -1;
margin-top: -6px;
}
}
}
}
}
.notifications {
width: 80%;
display: flex;
bottom: 40px;
position: absolute;
z-index: 3;
margin-left: 4.5%;
}
.teaser {
display: flex;
position: absolute;
right: 0;
margin-top: -300px;
width: 52%;
max-width: 598px;
height: 324px;
margin: auto;
margin-top: 0;
top: 0;
bottom: 0;
.teaserimg {
width: 100%;
height: auto;
position: relative;
}
}
.backLeftBottom {
position: absolute;
left: -8%;
bottom: -20px;
}
}
.videoModal {
:global {
.video-react-big-play-button {
display: none ;
}
.video-react-control-bar {
border-radius: 0 0 4px 4px;
}
.video-react {
border-radius: 4px;
.video-react-video {
border-radius: 4px;
}
}
.ant-modal-close {
right: -50px;
top: -12px;
color: #fff;
}
.anticon-info-circle {
display: none ;
}
.ant-modal-confirm-btns {
display: none ;
}
.ant-modal-confirm-title {
display: none ;
}
.ant-modal-close {
display: block ;
}
.ant-modal-body {
padding: 0 ;
.ant-modal-confirm-content {
margin: 0 ;
}
}
}
}
@media (max-width: 1144px) {
.wrapper {
.teaser {
transition: 0.3s all;
margin: auto;
margin-top: 0;
top: 0;
bottom: 0;
}
}
}
@media (max-width: 900px) {
.wrapper {
.content {
width: 91.46%;
margin-left: 4.27%;
margin-bottom: 5%;
position: relative;
}
.text {
top: 16.7%;
text-align: center;
margin-left: 0;
.title {
font-size: 2.857em;
margin-left: 0;
}
.description {
width: 100%;
max-width: 100%;
margin-left: 0;
font-size: 1em;
}
.buttons {
display: inline-flex;
.more {
font-size: 1em;
}
.githubIframe {
height: 40px;
}
.videoButtonWrapper {
width: fit-content;
height: fit-content;
}
}
}
.notifications {
width: 100%;
display: block;
bottom: 20px;
height: 44px;
overflow: hidden;
}
.teaser {
width: 100%;
max-width: 1200px;
margin-top: auto;
margin-left: unset;
margin-right: unset;
right: unset;
top: 30%;
display: flex;
justify-content: center;
.teaserimg {
width: 40%;
margin-left: unset;
margin-right: unset;
}
}
}
}
@media (max-width: 786px) {
.wrapper {
.text {
.buttons {
.videoButtonWrapper {
display: none;
}
}
}
}
}
@media (max-width: 510px) {
.wrapper {
.text {
.buttons {
margin-top: 70%;
.githubWrapper {
display: none;
}
}
}
.teaser {
width: 100%;
top: 5%;
.teaserimg {
width: 100%;
}
}
.backLeftBottom {
display: none;
}
}
}
@media (max-width: 480px) {
.wrapper {
.text {
height: 70%;
.buttons {
bottom: 10px;
margin-top: unset;
z-index: 1;
position: absolute;
left: 0;
width: 100%;
justify-content: center;
}
}
.teaser {
top: 14%;
}
}
}