Difference between revisions of "Template:Toulouse-INSA-UPS/PERSO-CSS"

Line 1: Line 1:
−
/*OVERRIDE DEFAULT CSS*/
+
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/*
 +
CSS for the iGEM 2018 Team : Toulouse INSA-UPS
 +
Creator : Yohann CHARREIRE--KIRBACH (Sentiare)
 +
Last Update : Tue 04/09/18 @ 13:42
 +
                                                                              */
 +
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
 
 +
 
 +
/**//*OVERRIDE DEFAULT CSS*//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* This section is for removing the default iGEM CSS
 +
* It should be complete, but i maybe missed something
 +
*/
 +
 
 
#HQ_page, #content {
 
#HQ_page, #content {
 
width:100%;
 
width:100%;
Line 21: Line 34:
 
}
 
}
  
−
/*CSS because the height of the iGEM menu doesn't match the height of its background spacer*/
+
/**//*CSS of the iGEM menu *//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* The iGEM black menu doesn't match his background spacer
 +
* This CSS just increase his size by 2px to make them both match in height.
 +
*/
 
#top_menu_14 {
 
#top_menu_14 {
−
height:18px; /*Now it does*/
+
height:18px; /*Now it matches his own spacer height*/
 
}
 
}
  
−
#MENU {
+
/**//*IMAGES*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
top:18px;
+
/**//*Team Logo*//**/
−
}
+
.img_team_logo {
−
 
+
−
/*IMAGES*/
+
−
/**//*Team Logo*/
+
−
.img_team_logo_white {
+
 
height:3.5rem;
 
height:3.5rem;
 
width:auto;
 
width:auto;
−
filter: invert(100%); /*make the logo white*/
 
−
}
 
−
 
−
/**//*GREY*//**/
 
−
.img_grayed_out {
 
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
−
filter:grayscale(100%);
 
−
-webkit-filter: opacity(25%);/* Safari 6.0-9.0 */
 
−
filter: opacity(25%);
 
 
}
 
}
  
Line 51: Line 54:
 
}
 
}
  
−
/*To hide the <p> that appear everywhere*/
+
/**//*In Page Documents*//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
#mw-content-text > p:first-child, div#FOOTER~p {
+
/* This section is about the different elements around the document reader in our
−
visibility:hidden;
+
* page. Remember : NO IFRAME!!!
−
height:0;
+
*/
−
margin:0;
+
−
padding:0;
+
−
}
+
  
−
/*pdf spacer*/
+
/**//*PDF*//**/
 
.black-pdf-spacer {
 
.black-pdf-spacer {
 
width:100%;
 
width:100%;
Line 67: Line 67:
 
}
 
}
  
−
 
+
/**//* GENERAL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
 
+
/* This section is mainly about title and text padding, margin and size
−
/* GENERAL */
+
*/
 
body, html {
 
body, html {
 
width:100%;
 
width:100%;
 
height:auto;
 
height:auto;
−
}
 
−
 
−
p { /*General*/
 
−
font-size:1rem;
 
−
}
 
−
 
−
div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content  { /*Timeline font*/
 
−
font-size:1rem;
 
−
}
 
−
 
−
#DISCLAIMER p { /*FOOTER font*/
 
−
font-size:0.7rem;
 
−
}
 
−
 
−
#DISCLAIMER hr {
 
−
margin-top:0.35rem;
 
−
margin-bottom:0.35rem;
 
 
}
 
}
  
Line 117: Line 100:
 
}
 
}
  
−
/* Anchors */
+
p { /*General*/
−
a.footer {
+
font-size:1rem;
−
text-decoration:underline;
+
 
}
 
}
  
−
a.footer:link, a.footer:visited {
+
div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content  { /*Timeline font*/
−
color:#f8f9fa;
+
font-size:1rem;
 
}
 
}
  
−
a.footer:hover, a.footer:active {
+
#DISCLAIMER p { /*FOOTER font*/
−
color:#d8d9da;
+
font-size:0.7rem;
 
}
 
}
  
−
/* BANNER */
+
 
 +
/**//* BANNER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* #BANNER refers to the picture on the top of the page.
 +
* It uses media queries.
 +
*/
 +
 
 
.img_banner {
 
.img_banner {
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
−
filter:grayscale(100%);
 
 
width:100%;
 
width:100%;
 
height:auto;
 
height:auto;
Line 177: Line 162:
 
}
 
}
  
 +
/**//* HR BANNERS *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* Is it a banner, is it a hr ? No it's a picture which acts like a hr.
 +
*/
 +
div.hr_img {
 +
width:100%;
 +
height:5rem;
 +
overflow:hidden;
 +
}
  
−
 
−
/* HR BANNERS */
 
 
img.hr_img {
 
img.hr_img {
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
−
filter:grayscale(100%);
 
 
width:100%;
 
width:100%;
 
}
 
}
  
−
div.hr_img {
+
/**//* HR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
height:5rem;
+
/* I love hr. So here's their very own section
−
overflow:hidden;
+
*/
−
}
+
−
 
+
−
/* HR */
+
 
h1~hr {
 
h1~hr {
 
padding-bottom:2rem;
 
padding-bottom:2rem;
Line 209: Line 195:
 
}
 
}
  
−
/* NAV ICONS */
+
hr {
 +
padding:0;
 +
}
 +
 
 +
/**//*NAV ICONS*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* Everything related with the ugly little nav icons on the left of the screen
 +
*/
 
a.ico {
 
a.ico {
 
padding:0.5rem 0.5rem;
 
padding:0.5rem 0.5rem;
Line 219: Line 211:
 
}
 
}
  
−
.nav-left-col {
+
/**//* FOOTER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
display:block;
+
/* Everything that is only in the footer and has CSS is in this section
−
width:16.666667%;
+
*/
−
max-width:16.666667%;
+
−
}
+
−
 
+
−
/* FOOTER */
+
 
#FOOTER_CONTENT {
 
#FOOTER_CONTENT {
 
margin:1.6rem
 
margin:1.6rem
 
}
 
}
  
−
/* GENERAL CSS */
+
/**//* Anchors *//**/
−
.sticky-bottom {
+
a.footer {
−
    position: -webkit-sticky; /* For compatibility */
+
text-decoration:underline;
−
    position: sticky;
+
−
    bottom: 0;
+
 
}
 
}
  
−
/* SPONSORS */
+
a.footer:link, a.footer:visited {
 +
color:#f8f9fa;
 +
}
 +
 
 +
a.footer:hover, a.footer:active {
 +
color:#d8d9da;
 +
}
 +
 
 +
/**//* SPONSORS *//**/
 
p.sponsor {
 
p.sponsor {
 
margin-bottom:0;
 
margin-bottom:0;
 
}
 
}
  
−
/* CAROUSEL */
+
/**//* CAROUSEL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* The carousel should soon be removed, remove this section too.
 +
*/
 
.car_img {
 
.car_img {
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
−
filter:grayscale(100%);
 
 
height:100%;
 
height:100%;
 
width:100%;
 
width:100%;
Line 286: Line 280:
 
}
 
}
  
−
/*"EXTENDED" BOOTSTRAP*/
+
/**//*"EXTENDED" BOOTSTRAP*//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* Just some classes that Bootstrap doesn't have but looks like they are bootstrap
 +
* classes.
 +
*/
 
.corner-bottom {
 
.corner-bottom {
 
border-bottom-left-radius : 0 !important;
 
border-bottom-left-radius : 0 !important;
Line 304: Line 301:
 
.card-of-picture {
 
.card-of-picture {
 
width:18rem !important;
 
width:18rem !important;
 +
}
 +
 +
.sticky-bottom {
 +
    position: -webkit-sticky; /* For compatibility */
 +
    position: sticky;
 +
    bottom: 0;
 +
}
 +
 +
.nav-left-col {
 +
display:block;
 +
width:16.666667%;
 +
max-width:16.666667%;
 +
}
 +
 +
/**//*Filters*//**/
 +
.filter-gray {
 +
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 +
filter:grayscale(100%);
 +
}
 +
 +
.filter-reverse {
 +
-webkit-filter: invert(100%); /* Safari 6.0-9.0 */
 +
filter: invert(100%);
 +
}
 +
 +
.filter-invert {
 +
-webkit-filter: invert(100%); /* Safari 6.0-9.0 */
 +
filter: invert(100%);
 +
}
 +
 +
.filter-alpha-0 {
 +
-webkit-filter : opacity(100%) !important;
 +
filter : opacity(100%) !important;
 +
}
 +
 +
.filter-alpha-25 {
 +
-webkit-filter : opacity(75%);
 +
filter : opacity(75%);
 +
}
 +
 +
.filter-alpha-50 {
 +
-webkit-filter : opacity(50%);
 +
filter : opacity(50%);
 +
}
 +
 +
.filter-alpha-75 {
 +
-webkit-filter : opacity(25%);
 +
filter : opacity(25%);
 +
}
 +
 +
.filter-alpha-100 {
 +
-webkit-filter : opacity(0%);
 +
filter : opacity(0%);
 +
}
 +
 +
.filter-alpha {
 +
-webkit-filter : opacity(50%);
 +
filter : opacity(50%);
 
}
 
}

Revision as of 11:43, 4 September 2018

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* CSS for the iGEM 2018 Team : Toulouse INSA-UPS Creator : Yohann CHARREIRE--KIRBACH (Sentiare) Last Update : Tue 04/09/18 @ 13:42 

                                                                             */

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/


/**//*OVERRIDE DEFAULT CSS*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is for removing the default iGEM CSS 

* It should be complete, but i maybe missed something
*/
  1. HQ_page, #content {

width:100%; padding:0; margin:0; }

a#top { height:0; }

  1. top_title, #top_title div, #top_title h1 {

visibility:hidden; height:0; margin:0; padding:0; }

  1. globalWrapper {

padding-bottom:0; }

/**//*CSS of the iGEM menu *//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* The iGEM black menu doesn't match his background spacer 

* This CSS just increase his size by 2px to make them both match in height.
*/
  1. top_menu_14 {

height:18px; /*Now it matches his own spacer height*/ }

/**//*IMAGES*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**//*Team Logo*//**/ .img_team_logo { height:3.5rem; width:auto; }

/**//*The text of the logo*//**/ a.navbar-brand { font-size:1.5rem; }

/**//*In Page Documents*//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is about the different elements around the document reader in our 

* page. Remember : NO IFRAME!!!
*/

/**//*PDF*//**/ .black-pdf-spacer { width:100%; height:1rem; background-color:#3F3F3F;

}

/**//* GENERAL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is mainly about title and text padding, margin and size 

*/

body, html { width:100%; height:auto; }

h1 { padding-top:3rem;

}

h2 { padding-top:2rem; }

h3 { padding-top:2rem; }

.heavy { 

   font-weight: 600;

}

  1. MENU {

font-size:1rem; }

a.dropdown-item { color:black !important; }

p { /*General*/ font-size:1rem; }

div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content { /*Timeline font*/ font-size:1rem; }

  1. DISCLAIMER p { /*FOOTER font*/

font-size:0.7rem; }


/**//* BANNER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* #BANNER refers to the picture on the top of the page. 

* It uses media queries.
*/

.img_banner { width:100%; height:auto; margin:0; padding:0; z-index:1000; }

  1. BANNER {

margin:0; padding:0; overflow: hidden; }

@media screen and (min-width:100px) and (max-width:576px) { #BANNER { height:40px; } }

@media screen and (min-width:577px) and (max-width:768px) { #BANNER { height:80px; } }

@media screen and (min-width:769px) and (max-width:992px) { #BANNER { height:110px; } }

@media screen and (min-width:993px) and (max-width:1200px) { #BANNER { height:140px; } }

@media screen and (min-width:1201px) { #BANNER { height:170px; } }

/**//* HR BANNERS *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Is it a banner, is it a hr ? No it's a picture which acts like a hr. 

*/

div.hr_img { width:100%; height:5rem; overflow:hidden; }

img.hr_img { width:100%; }

/**//* HR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* I love hr. So here's their very own section 

*/

h1~hr { padding-bottom:2rem; }

h2~hr { padding-bottom:1.33rem; }

h3~hr { padding-bottom:1.33rem; }

a.dropdown-item~hr { margin-bottom:0.5rem; margin-top:0.5rem; }

hr { padding:0; }

/**//*NAV ICONS*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Everything related with the ugly little nav icons on the left of the screen 

*/

a.ico { padding:0.5rem 0.5rem; }

img.ico { max-width:3rem; height:auto; }

/**//* FOOTER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Everything that is only in the footer and has CSS is in this section 

*/
  1. FOOTER_CONTENT {

margin:1.6rem }

/**//* Anchors *//**/ a.footer { text-decoration:underline; }

a.footer:link, a.footer:visited { color:#f8f9fa; }

a.footer:hover, a.footer:active { color:#d8d9da; }

/**//* SPONSORS *//**/ p.sponsor { margin-bottom:0; }

/**//* CAROUSEL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* The carousel should soon be removed, remove this section too. 

*/

.car_img { height:100%; width:100%; }

@media screen and (min-width:100px) and (max-width:576px) { #PLACEHOLDER { height:60px; } }

@media screen and (min-width:577px) and (max-width:768px) { #PLACEHOLDER { height:324px; } }

@media screen and (min-width:769px) and (max-width:992px) { #PLACEHOLDER { height:432px; } }

@media screen and (min-width:993px) and (max-width:1200px) { #PLACEHOLDER { height:558px; } }

@media screen and (min-width:1201px) { #PLACEHOLDER { height:675px; } }

  1. PLACEHOLDER {

overflow:hidden; z-index:1000; position:relative; }

/**//*"EXTENDED" BOOTSTRAP*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Just some classes that Bootstrap doesn't have but looks like they are bootstrap 

* classes.
*/

.corner-bottom { border-bottom-left-radius : 0 !important; border-bottom-right-radius : 0 !important; }

.corner-top { border-top-left-radius : 0 !important; border-top-right-radius : 0 !important; }

.picture-of-someone { height:18rem !important; width:18rem !important; }

.card-of-picture { width:18rem !important; }

.sticky-bottom { 

   position: -webkit-sticky; /* For compatibility */
   position: sticky;
   bottom: 0;

}

.nav-left-col { display:block; width:16.666667%; max-width:16.666667%; }

/**//*Filters*//**/ .filter-gray { -webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */ filter:grayscale(100%); }

.filter-reverse { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-invert { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-alpha-0 { -webkit-filter : opacity(100%) !important; filter : opacity(100%) !important; }

.filter-alpha-25 { -webkit-filter : opacity(75%); filter : opacity(75%); }

.filter-alpha-50 { -webkit-filter : opacity(50%); filter : opacity(50%); }

.filter-alpha-75 { -webkit-filter : opacity(25%); filter : opacity(25%); }

.filter-alpha-100 { -webkit-filter : opacity(0%); filter : opacity(0%); }

.filter-alpha { -webkit-filter : opacity(50%); filter : opacity(50%); }