Difference between revisions of "Template:SZU China/Playground/component2/CSS"

Revision as of 09:40, 18 September 2015 (view source) Inari (Talk | contribs) ← Older edit		Revision as of 09:45, 18 September 2015 (view source) Inari (Talk | contribs) Newer edit →
Line 190:		Line 190:
	font-weight: 300;		font-weight: 300;
	font-size: 2.4em;		font-size: 2.4em;
		+	padding-bottom:0.4em;
	}		}
	.page-inner p {		.page-inner p {

---

Revision as of 09:45, 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: #47a3da;
   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%;
   padding: 0 1em;
   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: #47a3da;

} .profile img {

   max-width: 100%;
   border-radius: 50%;
   opacity: 0.6;

} .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: #97a8b2;
   -webkit-transform: translateX(100%);
   transform: translateX(100%);

} .page-left {

   left: 0;
   outline: 5px solid #34495e;
   /* avoid rounding gaps */
   background: #39f;
   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 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%;
   }

}