Difference between revisions of "Team:Oxford/css"

Revision as of 20:48, 16 October 2018 (view source) Adrikoz (Talk | contribs) ← Older edit		Latest revision as of 02:50, 18 October 2018 (view source) Adrikoz (Talk | contribs)
(34 intermediate revisions by the same user not shown)
Line 44:		Line 44:
	background-color: #f2f2f2;		background-color: #f2f2f2;
	}		}
		+
		+	.tftable {color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
		+	.tftable th {;background-color:#E5FCE2;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;text-align:center;}
		+	.tftable tr {background-color:#FFFFFF;}
		+	.tftable td {;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5; text-align:center;}
		+	.tftable tr:hover {background-color:#F2F2F2;}
	body {		body {
	padding-top: 54px;		padding-top: 54px;
−	overflow-x: hidden;
	}		}
Line 79:		Line 84:
	.card {		.card {
	height: 100%;		height: 100%;
		+	}
		+
		+	.profile-photo {
		+	height:200px;
		+	width:200px;
		+	background-size:cover;
	}		}
Line 88:		Line 99:
	.translucent-back {		.translucent-back {
−	background: rgba(255,255,255,0.5);	+	background: rgba(255,255,255,0.6);
	text-align: center;		text-align: center;
	line-height: 400px;		line-height: 400px;
Line 113:		Line 124:
	}		}
−	#n2, #n4, #n6, #n8, #n10{	+	#n2, #n4, #n6, #n8, #n10 #n12{
	background-color: #f2f2f2;		background-color: #f2f2f2;
	height: 100%;		height: 100%;
Line 309:		Line 320:
	padding-top: 0px;		padding-top: 0px;
	padding-bottom: 0px;		padding-bottom: 0px;
		+	}
		+
		+	.image {
		+	height: 210px;
		+	width:210px;
	}		}
Line 328:		Line 344:
	} .team-style-01 .image:hover .overlay {		} .team-style-01 .image:hover .overlay {
−	opacity: 1;	+	opacity: 0.9;
	-webkit-transition: all 0.4s ease-in-out;		-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;		transition: all 0.4s ease-in-out;
Line 344:		Line 360:
	margin-bottom: 0;		margin-bottom: 0;
−	} .team-style-01 .overlay {	+	} .overlay {
−		+	width: 100% !important;
−	background-color: rgba(255, 255, 255, 0.7);	+	height: 100% !important;
−	opacity: 0;	+	max-height: inherit;
		+	background-color:white; /* fallback color */
		+	opacity: 0.8;
	top: 0;		top: 0;
	-webkit-transition: all 0.4s ease-in-out;		-webkit-transition: all 0.4s ease-in-out;
Line 393:		Line 411:
	transition-delay: 0.3s;		transition-delay: 0.3s;
	}		}
−
	section .section-block {		section .section-block {

---

Latest revision as of 02:50, 18 October 2018

• !

* Start Bootstrap - Heroic Features (https://startbootstrap.com/template-overviews/heroic-features)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-heroic-features/blob/master/LICENSE)
*/
 

• {

   border-radius: 0 !important;

}

html {

 scroll-behavior: smooth;

}

body {padding-top: 90px !important;}

1. n1 {

   padding-top: 100px !important;
   margin-top:-50px !important;

}

h2 {

  font-weight: 400;
  text-align: left;

}

h3 {

  font-weight: bold;
  text-align: left;
  font-style: normal;

}

.dropdown-menu {

   opacity: 1;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -ms-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #f2f2f2;

}

.tftable {color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;} .tftable th {;background-color:#E5FCE2;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;text-align:center;} .tftable tr {background-color:#FFFFFF;} .tftable td {;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5; text-align:center;} .tftable tr:hover {background-color:#F2F2F2;}

body {

 padding-top: 54px;

}

• {box-sizing:border-box}

@media (min-width: 992px) {

 body {
   padding-top: 56px;
 }

}

.parent {

 box-sizing:border-box;

}

.child {

 width: 100%;
 height: 100%;
 max-height: inherit;
 background-color:white; /* fallback color */
 background-position: center;
 background-size: cover;
 transition: all .25s;

}

.parent:hover .child, .parent:focus .child {

 transform: scale(1.03);

}

.card {

 height: 100%;

}

.profile-photo {

 height:200px;
 width:200px;
 background-size:cover;

}

1. bg_img {

   background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;

max-width:100%; max-height:100%; }

.translucent-back { background: rgba(255,255,255,0.6); text-align: center; line-height: 400px; }

.header-text { line-height: 600px; }

.header-text2 { line-height: 400px; }

.header-text a:hover{

   text-decoration: none !important;

}

.header-text2 a:hover{

   text-decoration: none !important;

}

section {

 padding: 70px 0;

}

1. n2, #n4, #n6, #n8, #n10 #n12{

 background-color: #f2f2f2;
 height: 100%;

}

1. wrapper {

 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;

}

1. wrapper.toggled {

 padding-left: 250px;

}

1. sidebar-wrapper {

 z-index: 1000;
 position: fixed;
 left: 250px;
 width: 0;
 height: 100%;
 margin-left: -250px;
 margin-top: 30px;
 overflow-y: auto;
 background: #f2f2f2;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;

}

1. wrapper.toggled #sidebar-wrapper {

 width: 250px;

}

1. page-content-wrapper {

 width: 100%;
 position: absolute;
 padding: 15px;

}

1. wrapper.toggled #page-content-wrapper {

 position: absolute;
 margin-right: -250px;

}

/* Sidebar Styles */

.sidebar-nav {

 position: absolute;
 top: 0;
 width: 250px;
 padding: 0;
 list-style: none;

}

.sidebar-nav li {

 text-indent: 20px;
 line-height: 40px;

}

.sidebar-nav li a {

 display: block;
 text-decoration: none;
 color: black;

}

.sidebar-nav li a:hover {

 text-decoration: none;
 color: black;
 background: rgba(255, 255, 255, 0.2);

}

.sidebar-nav li a:active, .sidebar-nav li a:focus {

 text-decoration: none;

}

@media(min-width:768px) {

 #wrapper {
   padding-left: 250px;
 }
 #sidebar-wrapper {
   width: 250px;
 }
 #page-content-wrapper {
   position: relative;
   margin-right: 0;
 }

.rounded-circle {

   border-radius: 50% !important;

}

.hover-button {

   background-color: white;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
 -ms-transition: opacity 0.5s ease-in-out;
 -o-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;

}

.hover-button:hover {

   opacity: 0.5;

}

.team-profile {

   margin-top:60px;

}

.team-profile-header {

   text-align: center;
   margin-top: 20px;
   font-size: 20px;
   font-family: 'Source Sans Pro';
   font-weight: 400;

}

.team-profile-job {

   text-decoration: italic;
   text-align: center;
   font-size: 15px;
   font-family: 'Montserrat';
   font-weight: 200;

}

.tiles-wrapper {

  padding-top: 100px;

}

.tilesWrapper {

  margin-left: 10%;
  margin-right: 10%;
  width: auto;

} .tile {

  position: relative;

}

.tile:hover .tileTitle {

  color: rgb(0,0,0);

}

.tile:hover .tileSubtitle {

  color: rgb(25,25,25);

}

.tileTitleWrapper {

  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 85%;
  z-index: 520; /*Set so title div is in front of overlay (z index of 512)*/

}

.tileTitle {

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
  font-size: 30px;
  color: rgb(30,30,30);

}

.tileTitleWrapper.pAndP {

  width: 80%;

}

.pAndP .tileTitle {

  line-height: 1.3;

}

.bgc-white .row {

padding-top: 0px;
padding-bottom: 0px;

}

.bgc-gray .row {

padding-top: 0px;
padding-bottom: 0px;

}

.image {

 height: 210px;
 width:210px;

}

/* Team */ .team-style-01 .image {

display: inline-block;
margin-bottom: 35px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

} .team-style-01 .image img {

max-width: 100%;

} .team-style-01 .image:hover {

-webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

} .team-style-01 .image:hover .overlay {

opacity: 0.9;
-webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

} .team-style-01 .image:hover .social-01 li {

-webkit-transform: translateY(0);
    -ms-transform: translateY(0);
        transform: translateY(0);

} .team-style-01 .job {

color: #30B397;
font-style: italic;
font-family: 'Playfair Display', serif;

} .team-style-01 .name {

margin-bottom: 0;

} .overlay {

 width: 100% !important;
 height: 100% !important;
 max-height: inherit;
 background-color:white; /* fallback color */
opacity: 0.8;
top: 0;
-webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

} .team-style-01 .social-01 a {

border-radius: 50%;
font-size: 15px;
height: 30px;
width: 30px;

} .team-style-01 .social-01 a:hover {

background-color: #30B397;

} .team-style-01 .social-01 a:hover i:before {

color: #ffffff;

} .team-style-01 .social-01 a i {

line-height: 30px;

} .team-style-01 .social-01 a i:before {

color: #333333;

} .team-style-01 .social-01 li {

-webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
        transform: translateY(-40px);
-webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

} .team-style-01 .social-01 li:nth-child(1) {

-webkit-transition-delay: 0s;
        transition-delay: 0s;

} .team-style-01 .social-01 li:nth-child(2) {

-webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;

} .team-style-01 .social-01 li:nth-child(3) {

-webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;

} .team-style-01 .social-01 li:nth-child(4) {

-webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;

} section .section-block {

margin-bottom: 40px;

} section .section-block:after {

clear: both;

} section .section-block:before, section .section-block:after {

content: " ";
display: table;

} section .section-block:after {

clear: both;

} section .section-block:before, section .section-block:after {

content: " ";
display: table;

} section .section-block-p {

margin-bottom: 15px;

} section .section-block-p:after {

clear: both;

} section .section-block-p:before, section .section-block-p:after {

content: " ";
display: table;

} section .section-block-p:after {

clear: both;

} section .section-block-p:before, section .section-block-p:after {

content: " ";
display: table;

}

/* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready {

opacity: 0.8;

} /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing {

opacity: 0;

}

.footer-social-icons { text-align:center; padding-top:30px; padding-bottom:30px; }

ul {

   padding:0;
   list-style: none;

}

.social-icon {

   color: #fff;

} ul.social-icons {

   margin-top: 10px;

} .social-icons li {

   vertical-align: top;
   display: inline;
   height: 100px;

} .social-icons a {

   color: white;
   text-decoration: none;

} .fa-facebook {

   padding:10px 14px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-facebook:hover { color: white;

   background-color: #3d5b99;

} .fa-twitter {

   padding:10px 12px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-twitter:hover {

   color: white;
   background-color: #00aced;

}

.fa-instagram {

   padding:10px 12px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-instagram:hover {

   color: white;
   background-color: #bc2a8d;

}