Difference between revisions of "Template:SZU China/Playground/component2/CSS"
| (6 intermediate revisions by the same user not shown) | |||
| Line 73: | Line 73: | ||
border-radius: 50%; | border-radius: 50%; | ||
background: #39f; | background: #39f; | ||
| − | transition: | + | transition: padding 1.5s, transform 1.5s; |
| − | -moz-transition: | + | -moz-transition: padding 1.5s, -moz-transform 1.5s; |
| − | + | -webkit-transition: padding 1.5s, -webkit-transform 1.5s; | |
| − | - | + | -o-transition: padding 1.5s,-o-transform 1.5s; |
| − | + | ||
| − | + | ||
| − | - | + | |
| − | + | ||
} | } | ||
.profile:hover{ | .profile:hover{ | ||
| − | + | padding:20px; | |
| − | + | ||
} | } | ||
.profile img { | .profile img { | ||
Latest revision as of 20:29, 18 September 2015
html, body, .container {
position: relative; width: 100%; height: 100%;
} body {
overflow-y: scroll; background: #333;
} .splitlayout {
position: relative; overflow-x: hidden; min-height: 100%; width: 100%;
} /* Intro sides */
.side {
position: fixed;
top: 0;
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
} .open-left .side, .open-right .side {
cursor: default;
} .overlay {
position: absolute; top: 0; left: 0; z-index: 499; visibility: hidden; width: 100%; height: 100%; opacity: 0;
} .side-left .overlay {
background: rgba(0, 0, 0, 0.7);
} .side-right .overlay {
background: rgba(0, 0, 0, 0.3);
} .side-left {
left: 0; background: #3399ff; color: #fff; outline: 1px solid #47a3da; /* avoid gap */
} .side-right {
right: 0; background: #fff; color: #47a3da; outline: 1px solid #fff; /* avoid gap */
} /* Intro content, profile image and name, back button */
.intro-content {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
cursor: pointer;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
} .profile {
margin: 0 auto; width: 140px; height: 140px; border-radius: 50%; background: #39f; transition: padding 1.5s, transform 1.5s; -moz-transition: padding 1.5s, -moz-transform 1.5s; -webkit-transition: padding 1.5s, -webkit-transform 1.5s; -o-transition: padding 1.5s,-o-transform 1.5s;
} .profile:hover{
padding:20px;
} .profile img {
max-width: 100%; border-radius: 50%;
} .intro-content h1 > span {
display: block; white-space: nowrap;
} .intro-content h1 > span:first-child {
font-weight: 300; font-size: 2em;
} .intro-content h1 > span:nth-child(2) {
position: relative; margin-top: 0.5em; padding: 0.8em; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em;
} .intro-content h1 > span:nth-child(2):before {
position: absolute; top: 0; left: 25%; width: 50%; height: 2px; background: #fff; content:;
} .side-right .intro-content h1 > span:nth-child(2):before {
background: #47a3da;
} .back {
position: fixed; top: 2.6em; z-index: 500; display: block; visibility: hidden; width: 50px; height: 50px; border-radius: 50%; color: #47a3da; text-align: center; font-size: 22px; line-height: 44px; opacity: 0; pointer-events: none;
} .mobile-layout .back {
/* fixed positioning will make this not clickable after scrolling on some mobile devices */ position: absolute;
} .back-left {
left: 12.5%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
} .back-right {
right: 12.5%; -webkit-transform: translateX(50%); transform: translateX(50%); color: #fff;
} .open-right .back-left, .open-left .back-right {
visibility: visible; opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; pointer-events: auto;
} .back:hover {
color: #ddd;
} /* Pages */
.page {
position: relative;
top: 0;
overflow: auto;
min-height: 100%;
width: 75%;
height: auto;
font-size: 1.4em;
-webkit-backface-visibility: hidden;
} .page-right {
left: 25%; outline: 5px solid #ecf0f1; /* avoid rounding gaps */ background: #ecf0f1; color: #000; -webkit-transform: translateX(100%); transform: translateX(100%);
} .page-left {
left: 0; outline: 5px solid #34495e; /* avoid rounding gaps */ background: #2d89e5; color: #fff; text-align: right; -webkit-transform: translateX(-100%); transform: translateX(-100%);
} /* Inner page content */
.page-inner {
padding: 2em;
} .page-inner section {
padding-bottom: 1em;
} .page-inner h2 {
margin: 0 0 1em 0; font-weight: 300; font-size: 2.4em; padding-bottom:0.4em;
}
.page-inner .page-left h2{
color:#fff;
}
.page-inner p {
font-weight: 300; font-size: 1.2em;
} /* All transitions */
.side, .page {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
} .overlay {
-webkit-transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out; transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out;
} .intro-content {
-webkit-transition: -webkit-transform 0.5s ease-in-out, top 0.5s ease-in-out; transition: transform 0.5s ease-in-out, top 0.5s ease-in-out;
} .intro-content h1, .back {
-webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} /* Open and close */
/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page, .splitlayout.open-right .page-left, .splitlayout.open-left .page-right, .splitlayout.close-right .page-left, .splitlayout.close-left .page-right {
position: absolute;
overflow: hidden;
height: 100%;
} .splitlayout.open-right .page-right, .splitlayout.open-left .page-left {
position: relative; overflow: auto; height: auto;
} .open-right .side-left .overlay, .open-left .side-right .overlay {
visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} /* Right side open */
.open-right .side-left {
-webkit-transform: translateX(-60%) scale(.5);
transform: translateX(-60%) scale(.5);
} .open-right .side-right {
z-index: 200; -webkit-transform: translateX(-150%); transform: translateX(-150%);
} .close-right .side-right {
z-index: 200;
} .open-right .side-right .intro-content {
-webkit-transform: translateY(-50%) translateX(0%) scale(0.6); transform: translateY(-50%) translateX(0%) scale(0.6);
} .open-right .page-right {
-webkit-transform: translateX(0%); transform: translateX(0%);
} /* Left side open */
.open-left .side-right {
-webkit-transform: translateX(60%) scale(.5);
transform: translateX(60%) scale(.5);
} .open-left .side-left {
z-index: 200; -webkit-transform: translateX(150%); transform: translateX(150%);
} .close-left .side-left {
z-index: 200;
} .open-left .side-left .intro-content {
-webkit-transform: translateY(-50%) translateX(-100%) scale(0.6); transform: translateY(-50%) translateX(-100%) scale(0.6);
} .open-left .codropsheader {
opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s; transition: opacity 0.3s, visibility 0.1s 0.3s;
} .open-left .page-left {
-webkit-transform: translateX(0%); transform: translateX(0%);
} /* Media Queries */
@media screen and (max-width: 83em) {
.intro-content {
font-size: 60%;
}
} @media screen and (max-width: 58em) {
body {
font-size: 90%;
}
} @media screen and (max-width: 49.4375em) {
.open-right .side-right {
-webkit-transform: translateX(-175%);
transform: translateX(-175%);
}
.open-right .side-left {
-webkit-transform: translateX(-100%) scale(.7);
transform: translateX(-100%) scale(.7);
}
.open-left .side-right {
-webkit-transform: translateX(100%) scale(.7);
transform: translateX(100%) scale(.7);
}
.open-left .side-left {
-webkit-transform: translateX(175%);
transform: translateX(175%);
}
.page {
width: 100%;
}
.page-right {
left: 0;
padding-left: 15%;
}
.page-left {
padding-right: 15%;
}
.intro-content {
width: 100%;
}
.open-right .side-right .intro-content {
top: 100%;
-webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
transform: translateY(-150px) translateX(-12.5%) scale(0.5);
}
.open-left .side-left .intro-content {
top: 100%;
-webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
transform: translateY(-150px) translateX(-87.5%) scale(0.5);
}
.open-right .intro-content h1, .open-left .intro-content h1 {
opacity: 0;
}
.back-left {
left: 6.25%;
}
.back-right {
right: 6.25%;
}
} @media screen and (max-width: 42.5em) {
body {
font-size: 80%;
}
.intro-content {
font-size: 50%;
}
} @media screen and (max-height: 41.125em) {
.intro-content {
-webkit-transform: translateY(-25%) translateX(-50%);
transform: translateY(-25%) translateX(-50%);
}
} @media screen and (max-width: 39.375em) {
.intro-content .profile {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
} @media screen and (max-width: 320px) {
body {
font-size: 70%;
}
}