121 lines
3.2 KiB
SCSS
Executable File
121 lines
3.2 KiB
SCSS
Executable File
// Gallery MODULES
|
|
.widget-gallery {
|
|
.widget-title {
|
|
border-radius: 0;
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
line-height: 38px;
|
|
font-size: 18px;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
padding-left: 25px;
|
|
border-right: 15px solid #70b8c2;
|
|
color: #fff;
|
|
font-family: 微軟正黑體;
|
|
font-weight: normal;
|
|
background-color: #68d2df;
|
|
background: #68d2df;
|
|
background: -moz-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #68d2df), color-stop(100%, #5cb5c0));
|
|
background: -webkit-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
|
|
background: -o-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
|
|
background: -ms-linear-gradient(top, #68d2df 1%, #5cb5c0 100%);
|
|
background: linear-gradient(to bottom, #68d2df 1%, #5cb5c0 100%);
|
|
-pie-background: linear-gradient(to bottom, #68d2df 1%, #5cb5c0 100%);
|
|
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68d2df', endColorstr='#5cb5c0',GradientType=0 );
|
|
}
|
|
.widget-pic img {
|
|
float: left;
|
|
border: 2px solid #d4d4d4;
|
|
padding: 2px;
|
|
background: #fff;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: 0 5px 5px 0;
|
|
}
|
|
}
|
|
|
|
.index-gallery {
|
|
.index-title {
|
|
@extend .unity-title;
|
|
}
|
|
&.index1 {
|
|
.index-content {
|
|
.index-content-inner {
|
|
position: relative;
|
|
}
|
|
.index-part {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
left: 4px;
|
|
overflow: hidden;
|
|
background-color: rgba($theme-color-main, 0.8);
|
|
@include transition(all 0.5s ease);
|
|
@include opacity(0);
|
|
.index-content-title {
|
|
@include transition(all 0.3s ease);
|
|
@include transition-delay(0.1s);
|
|
@include scale(0);
|
|
}
|
|
&:hover {
|
|
@include opacity(1);
|
|
.index-content-title {
|
|
@include scale(1);
|
|
}
|
|
}
|
|
}
|
|
.index-content-title {
|
|
display: table;
|
|
margin: 0;
|
|
@include size(100%, 100%);
|
|
a {
|
|
display: table-cell;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-gallery {
|
|
.show-title {
|
|
@extend .unity-title;
|
|
}
|
|
.show-content {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
.img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: auto;
|
|
opacity: (0.8);
|
|
-webkit-filter: grayscale(100%) brightness(1.2);
|
|
-moz-filter: grayscale(100%) brightness(1.2);
|
|
filter: grayscale(100%) brightness(1.2);
|
|
@include transition(all 0.2s ease);
|
|
}
|
|
.show-content-inner {
|
|
position: relative;
|
|
padding: 2px;
|
|
z-index: 0;
|
|
@include scale(1);
|
|
@include transition(all 0.2s ease);
|
|
&:hover {
|
|
z-index: 1;
|
|
@include scale(1.1);
|
|
.img {
|
|
opacity: (1);
|
|
-webkit-filter: grayscale(0%) brightness(1);
|
|
-moz-filter: grayscale(0%) brightness(1);
|
|
filter: grayscale(0%) brightness(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |