SZMUNC/themes/tstyle/source/style.less
Saturneric 90f0f5f447 Add.
2020-09-01 00:38:50 +08:00

893 lines
16 KiB
Plaintext

@background: #fff;
@default: #000;
@gray: #999999;
@active-link: #fff;
@border-radius-2: 2px;
@open-sans: 'Open Sans', sans-serif;
@box-shadow-2: inset 0 0 1px #fff;
body {
background: @background;
}
li {
list-style: none;
}
a {
text-decoration: none;
transition: all 0.4s ease 0s;
}
.container {
max-width: 1200px;
}
.s2 {
.container-1 {
width: 100%;
height: auto;
margin: 50px auto;
margin-bottom: 20px;
float: left;
h1 {
font-size: 24px;
color: @default;
text-align: center;
font-family: @open-sans;
}
h6 {
font-size: 18px;
color: @gray;
text-align: center;
font-family: @open-sans;
margin-bottom: 30px;
}
.portfolio {
width: 100%;
height: auto;
h1 {
font-size: 36px;
color: #000;
font-family: @open-sans;
.title span {
background: #fff;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
}
}/*h1*/
}/*portfolio*/
}/* container-1 */
/*****Portfolio Page*****/
/*****Portfolio Page*****/
.portfolioContainer .col-xs-12, .portfolioContainer .col-sm-12, .portfolioContainer .col-md-6, .portfolioContainer .col-lg-6 {
padding: 0px;
margin: 0px;
}
.portfolio-img {
max-width: 100%;
height: auto;
overflow: hidden;
text-align: center;
}
.portfolio-img img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
min-width: 100% !important;
}
/***** Issotop ****/
.portfolioFilter {
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
a {
margin-right: 10px;
color:#666;
text-decoration:none;
outline: 0px;
border: 3px solid transparent;
padding: 10px 15px;
font-family: @open-sans;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
a:hover, a.current {
font-weight:bold;
border: 3px solid #33CCCC;
color: #666;
font-family: @open-sans;
}
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
ul.portfolioContainer {
margin: 0px;
padding: 0px;
}
.portfolioContainer li {
margin-bottom: 0px;
}
.row.portfolioContainer {
margin-right: 0px;
}
/**** End Issotop ****/
.portfolioContainer .isotope-item {
width: 24.98%;
}
/* View */
.view {
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
/*background: #fff url(../images/bgimg.jpg) no-repeat center center;*/
img {
display: block;
position: relative;
}
h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
a.info {
display: inline-block;
text-decoration: none;
outline: 0px;
padding: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
a.info:hover {
}
}
.view .mask,.view .content {
/*width: 300px;*/
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-first {
.mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(17,17,17, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p {
margin-top: 25%;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
}
/*
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}*/
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* End view */
.portfolio-img .hover {
bottom: 0;
/*cursor: url("img/cursure.png") 40 40, crosshair;*/
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
top: 0;
transition: all 0.5s ease-in-out 0s;
width: 100%;
z-index: 99;
}
.portfolio-img:hover .hover {
opacity: 1;
}
/* Landscape phones and down */
@media (min-width: 380px) and (max-width: 768px) {
.portfolioFilter a {
line-height: 45px;
}
}
/** End Gallary **/
}
.blog {
.container-1 {
width: 100%;
height: auto;
margin: 50px auto;
margin-bottom: 20px;
float: left;
h1 {
font-size: 24px;
color: @default;
text-align: center;
font-family: @open-sans;
}
h6 {
font-size: 18px;
color: @gray;
text-align: center;
font-family: @open-sans;
margin-bottom: 30px;
}
.portfolio {
width: 100%;
height: auto;
h1 {
font-size: 36px;
color: #000;
font-family: @open-sans;
.title span {
background: #fff;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
}
}/*h1*/
h3 {
font-size: 26px;
color: #000;
font-family: @open-sans;
text-align: center;
}
}/*portfolio*/
}/* container-1 */
/*****Portfolio Page*****/
/*****Portfolio Page*****/
.portfolio-img {
max-width: 100%;
height: auto;
overflow: hidden;
text-align: center;
}
.portfolio-img img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
min-width: 100% !important;
}
/***** Issotop ****/
ul.portfolioFilter {
margin-bottom: 20px;
margin-top: 30px;
text-align: center;
padding-bottom: 30px;
width: 100%;
text-align: center;
padding-left: 0px;
padding-right: 0px;
li {
list-style: none;
display: inline-block;
margin-left: -5px;
}
li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
li:last-child a {
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
a {
margin-right: 0px;
color:#666;
text-decoration:none;
outline: 0px;
/*border: 1px solid #cf0404;*/
border: none;
padding: 10px 20px;
font-family: @open-sans;
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,221,221,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(221,221,221,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(221,221,221,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
a.current {
border: none;
}
a:hover, a.current {
background: #cf0404;
color: #fff;
font-family: @open-sans;
border: none !important;
}
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
ul.portfolioContainer {
margin: 0px;
padding: 0px;
}
.portfolioContainer li {
margin-bottom: 0px;
}
.row.portfolioContainer {
margin-right: 0px;
}
/**** End Issotop ****/
.portfolioContainer .isotope-item {
width: 32.5%;
margin-right: 10px;
margin-bottom: 20px;
}
.isotope-item-dtls {
width: 100%;
height: auto;
padding: 10px;
padding-bottom: 30px;
text-align: center;
border: 1px solid #eee;
border-top: none;
}
.isotope-item-dtls {
h3, p {
color: #333;
font-family: @open-sans;
}
h3 {
font-size: 22px;
}
p {
font-size: 14px;
margin-bottom: 20px;
}
}
/* View */
.view {
/*width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;*/
overflow: hidden;
position: relative;
text-align: center;
/*-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;*/
cursor: default;
/*background: #fff url(../images/bgimg.jpg) no-repeat center center;*/
img {
display: block;
position: relative;
}
h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
a.info {
display: inline-block;
text-decoration: none;
outline: 0px;
padding: 14px;
color: #fff;
text-transform: uppercase;
border: 2px solid #ffffff;
margin-top: 40%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
}
.view .mask,.view .content {
/*width: 300px;*/
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.mask {
width: 100%;
}
.view-first {
img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(0,0,0, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.info {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;
}
a.infozoom {
-webkit-transform: translate(-200px, 0px);
-moz-transform: translate(-200px, 0px);
-o-transform: translate(-200px, 0px);
-ms-transform: translate(-200px, 0px);
transform: translate(-200px, 0px);
}
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
/* End view */
.portfolio-img .hover {
bottom: 0;
/*cursor: url("img/cursure.png") 40 40, crosshair;*/
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
top: 0;
transition: all 0.5s ease-in-out 0s;
width: 100%;
z-index: 99;
}
.portfolio-img:hover .hover {
opacity: 1;
}
/* Landscape phones and down */
@media (min-width: 380px) and (max-width: 768px) {
.portfolioFilter a {
line-height: 45px;
}
.portfolioContainer {
margin-top: 20px;
float: left;
}
}
ul.slider1 {
margin: 0px;
padding: 0px;
li {
list-style: none;
float: left;
}
}
/** End **/
}/** End Blog **/
.contact {
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default, .btn-default {
color: #333333 !important;
border-radius: 0px;
}
.form-horizontal .form-group {
margin-left: 0px;
}
}
.s7 {
address {
margin-bottom: 0px;
}
}