Difference between revisions of "Team:IISER-Kolkata/common.css"

Revision as of 06:52, 12 October 2018 (view source) Prajwalp (Talk | contribs) ← Older edit		Revision as of 09:39, 12 October 2018 (view source) Quasar (Talk | contribs) Newer edit →
Line 9:		Line 9:
	position: absolute !important;		position: absolute !important;
	left: 0 !important;		left: 0 !important;
−	}
−
−	.subtab>p>a:link{
−	color: black;
−	text-decoration: none;
−	}
−	.subtab>p>a:visited{
−	color: black;
−	text-decoration: none;
−	}
−	.subtab>p>a:hover{
−	color:white;
−	text-decoration: none;
−	cursor:pointer;
−	}
−	.subtab:hover{
−	cursor:default !important;
	}		}
Line 72:		Line 55:
	background-color: #777777;		background-color: #777777;
	}		}
−		+	.subtab>p>a:link{
		+	color: white;
		+	text-decoration: none;
		+	}
		+	.subtab>p>a:visited{
		+	color: white;
		+	text-decoration: none;
		+	}
	/*mobile mode*/		/*mobile mode*/
	@media screen and (orientation: portrait) {		@media screen and (orientation: portrait) {
Line 222:		Line 212:
	transition: 0.2s linear;		transition: 0.2s linear;
	}		}
−	.subtab#problemTab p,.subtab#deletionTab p,.subtab#resultsTab p,.subtab#fieSurTab p,.subtab#studentsTab p {	+	.subtab a {
−	color: white;	+	text-decoration: none !important;
	}		}
−	.subtab p {	+	.subtab p {
−	text-decoration: none;	+
	font-family: rodina !important;		font-family: rodina !important;
	font-size: 1.8vmax !important;		font-size: 1.8vmax !important;
	color: black;		color: black;
		+	-webkit-transition: 0.2s linear;
		+	-moz-transition: 0.2s linear;
		+	-o-transition: 0.2s linear;
		+	transition: 0.2s linear;
	}		}
	.subtab:hover {		.subtab:hover {
Line 235:		Line 228:
	border-radius: 0vw 2vw 0vw 2vw !important;		border-radius: 0vw 2vw 0vw 2vw !important;
	}		}
−	.subtab:hover > p {	+	.subtab p:hover {
	color: white !important;		color: white !important;
	}		}
Line 274:		Line 267:
	.subpage p,.subpage ul,.subpage ol {		.subpage p,.subpage ul,.subpage ol {
	width: auto;		width: auto;
		+	align-self: flex-start;
	font-family: blogger !important;		font-family: blogger !important;
	font-size: 1.5vmax !important;		font-size: 1.5vmax !important;
Line 281:		Line 275:
	.subpage li {		.subpage li {
	margin: 0.7vw 0vw 0.7vw 0vw !important;		margin: 0.7vw 0vw 0.7vw 0vw !important;
		+	}
		+	.subimage {
		+	height: 50vmin;
		+	width: auto;
		+	margin: 2vmax;
	}		}
	table.tabular {		table.tabular {

---

Revision as of 09:39, 12 October 2018

1. top_title, .logo_2018, #firstHeading{

display: none !important; }

1. content{

width: 100vw !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: absolute !important; left: 0 !important; }

/*fonts*/ @font-face {

   src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf");
   font-family: blogger;

} @font-face {

   src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf");
   font-family: prime;

} @font-face {

   src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf");
   font-family: rodina;

} @font-face {

   src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf");
   font-family: social;

}

/*body*/ body, html {

   margin: 0;
   padding: 0;

} body {

   overflow-y: scroll;
   overflow-x: hidden;
   margin: auto;

} body::-webkit-scrollbar-track {

   background-color: black;

} body::-webkit-scrollbar {

   width: 1vw;

} body::-webkit-scrollbar-thumb {

   background-color: #999999;

} body::-webkit-scrollbar-thumb:hover {

   background-color: #777777;

} .subtab>p>a:link{

   color: white;
   text-decoration: none;

} .subtab>p>a:visited{

   color: white;
   text-decoration: none;

} /*mobile mode*/ @media screen and (orientation: portrait) {

   #menuicon {
       display: flex !important;
       margin-right: 3vw;
       margin-left: auto;
       height: 2vmax;
       width: 2.2vmax;
       cursor: pointer;        
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   #bar1, #bar2, #bar3 {
       margin: 0.25vmax 0vh 0.25vmax 0vh;
       width: 2.2vmax;
       height: 0.15vmax;
       background-color: white;
       border-radius: 25%;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   .change #bar1 {
       margin: 0vw;
       -webkit-transform: rotate(-45deg) translateY(0.25vmax);
       -moz-transform: rotate(-45deg) translateY0.25vmax);
       -o-transform: rotate(-45deg) translateY(0.25vmax);
       transform: rotate(-45deg) translateY(0.25vmax);
   }
   .change #bar2 {
       margin: 0vw;
       opacity: 0;
   }
   .change #bar3 {
       margin: 0vw;
       -webkit-transform: rotate(45deg) translateY(-0.25vmax);
       -moz-transform: rotate(45deg) translateY(-0.25vmax);
       -o-transform: rotate(45deg) translateY(-0.25vmax);
       transform: rotate(45deg) translateY(-0.25vmax);
   }  

   .subcontainer {
       width: 100vw !important;
       left: 0vw !important;
   }
   #sidenav {  
       width: 30vw !important;
       height: 100vh !important;
       position: fixed;
       top: 18px;
       left: 100vw  !important;
       z-index: 5;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   #sidenav.visible {
       left: 70vw !important;
   }

}

/*navbar*/

1. menubar {

   width: 100vw;
   height: 3vmax;
   background-color: #222222;
   display: flex;
   align-items: center;  
   position: fixed;
   top: 18px;
   left: 0vw;
   z-index: 10;

}

1. menubar #logo {

   margin: 0vw 1vw 0vw 0vw;
   align-self: flex-start;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   width: 8vmax;
   height: 5vmax; 
   border-radius: 0% 0% 50% 0%;
   background-color: #222222;

}

1. logo a {

   height: 90%;
   width: 70%;

}

1. logo a img {

   height: 100%;
   width: auto;

}

1. menubar .pagelink {

   display: flex;  
   align-items: center;
   justify-content: center;   
   height: 100%;
   width: auto; 
   padding: 0vw 2vw 0vw 2vw;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;     

} .pagelink a {

   text-decoration: none;
   font-family: prime;
   font-size: 1.5vmax; 
   color: white;  
   cursor: pointer; 

} .pagelink a:hover {

   color: wheat !important;

}

1. menuicon {

   display: none;

}

/*side tabnav*/

1. sidenav {

   width: 15vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;  
   justify-content: center;
   position: fixed;
   top: 18px;
   left: 0vw;
   z-index: 5;

}

1. sidenav .subtab {

   display: flex;  
   align-items: center;
   justify-content: center;   
   width: 90%;
   height: 3vmax; 
   padding: 0.5vw 0vw 0.5vw 0vw;
   margin: 0.5vw 0vw 0.5vw 0vw;
   border-radius: 0vw 2vw 0vw 2vw;
   cursor: pointer;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;     

} .subtab a {

   text-decoration: none !important;

} .subtab p {

   font-family: rodina !important;
   font-size: 1.8vmax !important; 
   color: black;   
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .subtab:hover {

   background-color: rgba(0,0,0,0.3) !important;
   border-radius: 0vw 2vw 0vw 2vw !important;

} .subtab p:hover {

   color: white !important;

}

/*page layouts*/ .subcontainer {

   position: relative;
   top: 2vmax;
   width: 85vw;
   left: 15vw;
   height: auto;
   display: flex;
   flex-direction: column;
   background-color: #eeeeee;

} section.subpage {

   padding: 2.5vw 7.5vw 2.5vw 7.5vw;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   width: auto;

} .subpage h1.subheading {

   width: auto;
   font-family: rodina !important;
   font-size: 3vmax !important;
   margin: 2.5vw 0vw 2.5vw 0vw !important;

} .subpage h3.subsubheading {

   width: auto;
   align-self: flex-start;
   font-family: prime !important;
   font-size: 1.8vmax !important;
   margin: 2vw 0vw 1.5vw 0vw !important;

} .subpage p,.subpage ul,.subpage ol {

   width: auto;
   align-self: flex-start;
   font-family: blogger !important;
   font-size: 1.5vmax !important;
   text-align: justify !important;
   margin: 0.8vw 0vw 1.2vw 0vw !important;

} .subpage li {

   margin: 0.7vw 0vw 0.7vw 0vw !important;

} .subimage {

   height: 50vmin;
   width: auto;    
   margin: 2vmax;

} table.tabular {

   font-size: 1.5vmax; 
   font-family: blogger;
   border-collapse: collapse;
   caption-side: bottom;
   margin: 2vw;

} .tabular caption {

   margin: 0.5vw !important;
   font-size: 1.3vmax; 

} .tabular td {

   min-width: 5vw;
   padding: 1vw;
   background-color: #eeeeee !important;
   text-align: center;
   border: 0.1vw solid black !important; 
   margin: 0vw;

} .tabular th {

   min-width: 5vw;
   padding: 1vw;
   background-color: #dddddd !important;
   border: 0.1vw solid black !important; 
   margin: 0vw;

}