Difference between revisions of "Template:TUST China/css/team"

Revision as of 06:14, 7 October 2018 (view source) Zenuken (Talk | contribs) ← Older edit		Revision as of 13:00, 8 October 2018 (view source) Zenuken (Talk | contribs) Newer edit →
Line 257:		Line 257:
	.teamy1:before {		.teamy1:before {
−	background-color: rgba(72, 27, 174, .8);	+	background-color: rgba(38,34,98, .8);
		+
	}		}
Line 269:		Line 270:
	width: 80%;		width: 80%;
	top: 20px;		top: 20px;
−	font-size: 1em;	+	font-size: 1.1em;
	z-index: 5;		z-index: 5;
	opacity: 0;		opacity: 0;
Line 285:		Line 286:
	.team-img{		.team-img{
	width: 100%;		width: 100%;
−		+	height: 500px;
−	height: 500px;	+
	}		}
	.team-img img{		.team-img img{
	position: fixed;		position: fixed;
	width: 100%;		width: 100%;
−	height: auto;	+
−	-webkit-transform: translateY(-25%);	+	height: auto;
		+	-webkit-transform: translateY(-25%);
	-moz-transform: translateY(-25%);		-moz-transform: translateY(-25%);
	-ms-transform: translateY(-25%);		-ms-transform: translateY(-25%);
	-o-transform: translateY(-25%);		-o-transform: translateY(-25%);
	transform: translateY(-25%);		transform: translateY(-25%);
		+
	}		}
Line 305:		Line 307:
	padding-top: 20px;		padding-top: 20px;
	text-align: center;		text-align: center;
−	background-color: #42dbc0;	+	background-color: #262262;
	}		}
	.content-text span{		.content-text span{
Line 311:		Line 313:
	text-align: center;		text-align: center;
	font-size: 1.2em;		font-size: 1.2em;
		+	color: #fff;
	}		}
	hr{		hr{

---

Revision as of 13:00, 8 October 2018

.at-section__title {

   margin: 0 0 70px;
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 2.625rem;
   text-align: center;

} .at-grid {

   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background: #FFF;
   border: 1px solid #E2E9ED;

} .at-grid[data-column="1"] .at-column {

   width: 100%;
   max-width: 100%;
   min-width: 100%;
   -webkit-flex-basis: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;

} .at-grid[data-column="2"] .at-column {

   width: 50%;
   max-width: 50%;
   min-width: 50%;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;

} .at-grid[data-column="3"] .at-column {

   width: 33.33333%;
   max-width: 33.33333%;
   min-width: 33.33333%;
   -webkit-flex-basis: 33.33333%;
   -ms-flex-preferred-size: 33.33333%;
   flex-basis: 33.33333%;

} .at-grid[data-column="4"] .at-column {

   width: 25%;
   max-width: 25%;
   min-width: 25%;
   -webkit-flex-basis: 25%;
   -ms-flex-preferred-size: 25%;
   flex-basis: 25%;

} .at-grid[data-column="5"] .at-column {

   width: 20%;
   max-width: 20%;
   min-width: 20%;
   -webkit-flex-basis: 20%;
   -ms-flex-preferred-size: 20%;
   flex-basis: 20%;

} .at-grid[data-column="6"] .at-column {

   width: 16.66667%;
   max-width: 16.66667%;
   min-width: 16.66667%;
   -webkit-flex-basis: 16.66667%;
   -ms-flex-preferred-size: 16.66667%;
   flex-basis: 16.66667%;

} .at-grid[data-column="7"] .at-column {

   width: 14.28571%;
   max-width: 14.28571%;
   min-width: 14.28571%;
   -webkit-flex-basis: 14.28571%;
   -ms-flex-preferred-size: 14.28571%;
   flex-basis: 14.28571%;

} .at-grid[data-column="8"] .at-column {

   width: 12.5%;
   max-width: 12.5%;
   min-width: 12.5%;
   -webkit-flex-basis: 12.5%;
   -ms-flex-preferred-size: 12.5%;
   flex-basis: 12.5%;

} .at-grid[data-column="9"] .at-column {

   width: 11.11111%;
   max-width: 11.11111%;
   min-width: 11.11111%;
   -webkit-flex-basis: 11.11111%;
   -ms-flex-preferred-size: 11.11111%;
   flex-basis: 11.11111%;

} .at-column {

   position: relative;
   background: #FFF;
   overflow: hidden;
   text-align: center;
   box-shadow: 0 0 0 1px #E2E9ED;
   padding: 10px;
   box-sizing: border-box;
   -webkit-transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;

} .at-column:before {

   content: "";
   display: block;
   padding-top: 100%;

} .at-column:hover {

   z-index: 1;
   box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(1.05);
   transform: scale(1.05);

} .at-column:hover .at-social {

   margin: 16px 0 0;
   opacity: 1;

} @media (max-width: 800px) {

   .at-column {
       width: 50% !important;
       max-width: 50% !important;
       min-width: 50% !important;
       -webkit-flex-basis: 50% !important;
       -ms-flex-preferred-size: 50% !important;
       flex-basis: 50% !important;
   }

} @media (max-width: 600px) {

   .at-column {
       width: 100% !important;
       max-width: 100% !important;
       min-width: 100% !important;
       -webkit-flex-basis: 100% !important;
       -ms-flex-preferred-size: 100% !important;
       flex-basis: 100% !important;
   }

} .at-user {

   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;

} .at-user__avatar {

   width: 125px;
   height: 125px;
   border-radius: 100%;
   margin: 0 auto 20px;
   overflow: hidden;

} .at-user__avatar img {

   display: block;
   width: 100%;

} .at-user__name {

   color: #313435;
   font-family: 'Roboto', sans-serif;
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 2.625rem;

} .at-user__title {

   color: #6F808A;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   line-height: 2.375rem;

}

body {

   background: #FFF;
   font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0px;

} .container {

   display: block;
   max-width: 1170px;
   width: 100%;
   margin: 100px auto;
   padding: 0 20px;
   box-sizing: border-box;
   -webkit-transform-origin: top center;
   transform-origin: top center;
   -webkit-transform: scale(0.8);
   transform: scale(0.8);

} .html-content{

   position: absolute;
   display: block;
   width: 100%;
   height: auto;
   background-color: #fff;

}

.teamy1 {

   overflow: hidden;
   width: 100%;
   height: 100%;

}

.teamy1:before {

   content: "";
   position: absolute;

   top: 50%;
   left: 50%;
   z-index: 2;

}

.at-column .teamy1:before {

   width: 0;
   height: 0;
   padding: 25%;
   border-radius: 50%;
   -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: transform .3s ease, opacity .3s ease-out;
   transition: transform .3s ease, opacity .3s ease-out, -webkit-transform .3s ease;
   will-change: opacity, transform;
   opacity: 0;
   -webkit-transform: translate(-50%, -50%) scale(0);
   transform: translate(-50%, -50%) scale(0);

} .at-column:hover .teamy1:before {

   opacity: 1;
   -webkit-transform: translate(-50%, -50%) scale(4);
   transform: translate(-50%, -50%) scale(4);
   -webkit-transition-duration: .6s;
   transition-duration: .6s;

}

.teamy1:before {

   background-color: rgba(38,34,98, .8);

}

.at-column span{

   display: inherit;
   position: absolute;
   text-align: left;
   white-space: pre-wrap;

   color: #fff;
   width: 80%;
   top: 20px;
   font-size: 1.1em;
   z-index: 5;
   opacity: 0;

} .at-column:hover span{

   opacity: 1;

}

.team-header{

   display: block;
   width: 100%;
   height: auto;
   margin: 0px;

} .team-img{

   width: 100%;
   height: 500px;

} .team-img img{

   position: fixed;
   width: 100%;

   height: auto;
   -webkit-transform: translateY(-25%);
   -moz-transform: translateY(-25%);
   -ms-transform: translateY(-25%);
   -o-transform: translateY(-25%);
   transform: translateY(-25%);

} .content-text{

   position: relative;
   width: 100%;
   height: 200px;
   padding-top: 20px;
   text-align: center;
   background-color: #262262;

} .content-text span{

   white-space: pre-wrap;
   text-align: center;
   font-size: 1.2em;
   color: #fff;

} hr{

   color: black;
   width: 2px;

}