ant-design/site/theme/static/preview-img.less

200 lines
3.0 KiB
Plaintext
Raw Normal View History

2016-03-02 17:12:43 +08:00
.preview-image-boxes {
2018-01-02 00:03:55 +08:00
display: flex;
2016-03-02 17:12:43 +08:00
float: right;
2017-12-29 15:59:45 +08:00
margin: 0 0 70px 64px;
2017-12-22 17:59:16 +08:00
width: 496px;
2016-03-15 17:40:31 +08:00
clear: both;
2016-03-17 10:43:50 +08:00
&-with-carousel {
width: 420px;
2016-03-17 15:00:06 +08:00
.preview-image-box img {
2016-03-17 10:43:50 +08:00
padding: 0;
}
}
2016-03-02 17:12:43 +08:00
}
.preview-image-boxes + .preview-image-boxes {
2016-03-15 17:40:31 +08:00
margin-top: -35px;
2016-03-02 17:12:43 +08:00
}
.preview-image-box {
width: 100%;
float: left;
}
2018-01-02 00:03:55 +08:00
.preview-image-box + .preview-image-box {
margin-left: 24px;
}
2016-03-02 17:12:43 +08:00
.preview-image-wrapper {
2018-01-02 10:46:52 +08:00
background: #f2f4f5;
2016-03-02 17:12:43 +08:00
padding: 16px;
display: inline-block;
text-align: center;
width: 100%;
position: relative;
}
2016-03-15 17:40:31 +08:00
.preview-image-wrapper.video {
padding: 0;
background: 0;
display: block;
}
.preview-image-wrapper video {
width: 100%;
display: block;
+ svg {
position: absolute;
top: 0;
left: 0;
}
}
2016-03-02 17:12:43 +08:00
.preview-image-wrapper.good:after {
content: '';
width: 100%;
height: 3px;
2016-11-13 18:58:02 +08:00
background: @primary-color;
2016-03-02 17:12:43 +08:00
display: block;
position: absolute;
bottom: 0;
left: 0;
}
.preview-image-wrapper.bad:after {
content: '';
width: 100%;
height: 3px;
background: @error-color;
2016-03-02 17:12:43 +08:00
display: block;
position: absolute;
bottom: 0;
left: 0;
}
.preview-image-title {
font-size: 12px;
margin-top: 5px;
2017-11-28 16:15:22 +08:00
color: @site-text-color;
2016-03-02 17:12:43 +08:00
}
.preview-image-description {
font-size: 12px;
margin-top: 2px;
2017-11-28 16:15:22 +08:00
color: @site-text-color-secondary;
2016-03-02 17:12:43 +08:00
line-height: 1.5;
}
.preview-image-description hr {
margin: 2px 0;
border: 0;
background: none;
}
.preview-image-box img {
cursor: pointer;
max-width: 100%;
transition: all .3s;
2016-03-02 17:12:43 +08:00
background: #fff;
padding: 12px;
2016-11-13 18:58:02 +08:00
border-radius: @border-radius-base;
2016-05-20 13:23:51 +08:00
&.no-padding {
padding: 0;
background: none;
}
2016-03-02 17:12:43 +08:00
}
.preview-image-boxes.preview-image-boxes-with-carousel img {
2016-03-02 17:12:43 +08:00
padding: 0;
2017-02-26 15:41:50 +08:00
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
2016-03-02 17:12:43 +08:00
}
.preview-image-box img:hover {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
2016-03-02 17:58:06 +08:00
}
.image-modal {
text-align: center;
2016-03-17 10:43:50 +08:00
&-container {
position: relative;
text-align: center;
}
2016-08-17 18:33:19 +08:00
.ant-carousel {
.slick-slider {
padding-bottom: 24px;
img {
display: inline;
max-width: 100%;
}
}
.slick-dots {
bottom: 4px;
li button {
background: #888;
2016-08-17 18:33:19 +08:00
}
}
}
2016-05-20 13:23:51 +08:00
2016-08-17 18:33:19 +08:00
.image-modal-single.slick-slider {
padding-bottom: 0;
}
.image-modal-single .slick-dots {
2017-08-04 17:58:32 +08:00
display: none !important;
2016-08-17 18:33:19 +08:00
}
2016-03-02 17:58:06 +08:00
}
2018-09-30 11:43:53 +08:00
.transition-video-player,
.motion-video-min {
2016-03-16 17:46:35 +08:00
float: right;
2016-10-20 21:00:36 +08:00
padding: 0 0 70px 20px;
2016-03-16 17:46:35 +08:00
width: 600px;
.preview-image-wrapper {
padding: 0;
}
2016-05-20 13:23:51 +08:00
}
2018-09-30 11:43:53 +08:00
.motion-video-min {
width: 390px;
}
.motion-principle-wrapper {
width: 100%;
max-width: 900px;
margin: 48px 0;
}
.principle-wrapper {
width: 100%;
.principle {
width: 100%;
min-height: 180px;
display: inline-block;
margin-right: 12.5%;
padding: 24px;
text-align: center;
font-size: 24px;
border-radius: 4px;
border: 1px solid #e8e8e8;
&:last-child {
margin-right: 0;
}
h4 {
margin: 16px 0 8px;
}
p {
font-size: 12px;
line-height: 24px;
}
}
}