Difference between revisions of "Team:NYMU-Taipei/css-test"

(original template css)
 
(wiki trytry css)
Line 24: Line 24:
 
/*this wraps the whole of the menu*/
 
/*this wraps the whole of the menu*/
 
.igem_2018_team_menu {  
 
.igem_2018_team_menu {  
−
background-color:#c4baba;  
+
background-color:black;  
−
border-left: 1px solid #c4baba;
+
border-left: 1px solid black;
−
display:block;
+
display: block;
−
float:right;
+
overflow-y: visible;
−
height:100vh;
+
−
max-width: 270px;
+
−
overflow-y: auto;
+
−
overflow-x: hidden;
+
 
padding:0px;
 
padding:0px;
 
position:fixed;  
 
position:fixed;  
−
right:0%;
 
 
text-align:left;
 
text-align:left;
−
width: 15%;  
+
width: 115em;
 +
height: 3em;
 +
align-items: left;
 
}
 
}
  
  
 
.igem_2018_team_menu.displaying_menu{
 
.igem_2018_team_menu.displaying_menu{
−
display:block;
+
display:inline;
 
}
 
}
  
−
.igem_2018_team_menu  a {
 
−
color: #484848;
 
−
text-decoration:none;
 
−
}
 
  
 
.igem_2018_team_menu img {
 
.igem_2018_team_menu img {
−
width:100%;
+
width:10%;
 
}
 
}
  
  
−
.igem_2018_team_menu .menu_item {
 
−
    background-color: #c4baba;
 
−
    border-bottom: 1px solid #928b8b;
 
−
    clear: both;
 
−
color: #484848;
 
−
    cursor: pointer;
 
−
float: left;
 
−
    font-size: 120%;
 
−
    font-weight: bold;
 
−
    padding: 15px 0px 15px 5%;
 
−
  width: 100%;
 
−
}
 
  
−
.igem_2018_team_menu .menu_item.direct_link {
 
−
color: #484848;
 
−
padding-left: 15%;
 
−
}
 
−
.igem_2018_team_menu .menu_item:hover {
 
−
background-color: #ecb656;
 
−
}
 
  
  
−
.igem_2018_team_menu .menu_item .submenu_control_icon {
 
−
color: #484848;
 
−
float: left;
 
−
width: 10%;
 
−
}
 
  
−
/* submenu icon "+"  "-"*/
+
/*mobile menu bar styling*/
−
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
/**************************************************************************************************************************************************************************************************/
−
content: "+";
+
−
}
+
  
−
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu{
−
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
height: 50px;
−
content: "-";
+
background-color: white;
−
}
+
box-shadow: 0 10px 20px -5px gray;
 +
}
 +
.dropdownbutton{
 +
 +
}
 +
.dropdownbutton a{
 +
 +
}
 +
.dropdownbutton: hover:{
 +
  
−
/*submenu wrapper*/
+
}
−
.igem_2018_team_menu .submenu{
+
−
background-color: #e4dede;
+
−
clear:both;
+
−
display:none;
+
−
float: left; 
+
−
width:100%;
+
−
}
+
  
−
/*styling for a submenu item*/
+
#cover{
−
.igem_2018_team_menu .submenu .submenu_item {
+
top: 1000px;
−
border-bottom: 1px solid #c4baba;
+
}
−
  color: #635d5d;
+
−
    height: 30px;
+
−
  float: left;
+
−
    font-size: 110%;
+
−
font-weight: bold;
+
−
    padding: 12px 0px 0px 15%;
+
−
    width: 100%;
+
−
}
+
  
−
.igem_2018_team_menu .submenu .submenu_item:hover {
+
button{
−
background-color: #f3bd5d;
+
background-color: white;
−
}
+
border-color: white;
 +
color:black;
 +
font-size: 1em;
 +
width: 100%;
 +
height: 50px;
 +
display: inline;
 +
}
  
 +
button a{
 +
color:black;
 +
}
  
−
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
button:hover{
−
.igem_2018_team_menu .menu_item.current_page,
+
background-color: white;
−
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
}
−
background-color:#7acbd8;
+
.dropdowncontent{
−
}
+
position:absolute;
 +
background-color: white;
 +
opacity: 0.9;
 +
font-size: 1em;
 +
display: block;
 +
z-index: 2;
 +
overflow: visible;
 +
width: 11%;
  
 +
}
 +
.dropdowncontent a{
 +
width: 5em;
 +
height: 3em;
 +
color:black;
 +
}
  
 +
.submenu_item{
 +
height: 50px;
 +
text-align: center;
 +
border-bottom: 1px white;
 +
}
  
−
/*mobile menu bar styling*/
+
.notshow{
−
/**************************************************************************************************************************************************************************************************/
+
display:none;
−
 
+
}
  
 +
.dropdownitem{
 +
display:inline-block;
 +
width: 10%;
 +
}
 
.igem_2018_team_mobile_bar {
 
.igem_2018_team_mobile_bar {
 
background-color:#e4dede;  
 
background-color:#e4dede;  
Line 137: Line 129:
 
float:left;
 
float:left;
 
margin-top: 0;
 
margin-top: 0;
−
padding: 5px 0;
+
margin-bottom:0;
 
position:fixed;
 
position:fixed;
 
width:100%;  
 
width:100%;  
 
}
 
}
  
−
.igem_logo_mobile img {
 
−
width:70px;
 
−
}
 
  
−
.igem_logo_mobile {
+
.slides{
−
float:left;  
+
color: white;
−
padding-left: 5%;
+
height:35em;
−
width: 30%;  
+
margin: auto;
−
}
+
text-align: center;
 +
padding-top: 2em;
 +
 +
}
  
−
.igem_menu_control_mobile img {
+
.notshow{
−
width:25px;
+
display:none;
−
}
+
}
  
−
.igem_menu_control_mobile {
+
#slide1{
−
float:right;
+
background-color: red;
−
padding-right:5%;  
+
}
−
padding-top:5px;
+
−
text-align:right;
+
−
width: 30%;
+
−
}
+
  
 +
#slide2{
 +
background-color: orange;
 +
}
  
 +
#slide3{
 +
background-color: yellow;
 +
color:black;
 +
}
 +
 +
#slide4{
 +
background-color: green;
 +
}
 +
 +
#slide5{
 +
background-color: blue;
 +
}
 +
 +
#slide6{
 +
background-color: indigo;
 +
}
 +
 +
#slide7{
 +
background-color: purple;
 +
}
 +
 +
.dot{
 +
text-align: center;
 +
margin-left: 2em;
 +
margin-right: 2em;
 +
}
 +
#dots{
 +
margin:auto;
 +
height: 3em;
 +
width: 40em;
 +
}
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 172: Line 194:
 
/* general wrapper for the content */
 
/* general wrapper for the content */
 
.igem_2018_team_content {
 
.igem_2018_team_content {
 +
padding-top:100px;
 
background-color:white;  
 
background-color:white;  
 
display:block;
 
display:block;
−
width: 87%;
+
width: 100%;
 +
margin:auto;
 
}
 
}
  
Line 181: Line 205:
 
margin:auto;
 
margin:auto;
 
max-width: 1400px;
 
max-width: 1400px;
−
width:90%;
+
width: 100%;
 
}
 
}
  
Line 414: Line 438:
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1800px) {
 
@media only screen and (max-width: 1800px) {
−
.igem_2018_team_content { width: 85%;}
+
.igem_2018_team_content { width: 70%;}
 
.igem_2018_team_menu {display:block;}
 
.igem_2018_team_menu {display:block;}
 
}
 
}

Revision as of 06:36, 24 May 2018

<style> /**************************************************************************************************************************************************************************************************/


/**************************************************************************************************************************************************************************************************/ /* DEFAULT WIKI SETTINGS */ /**************************************************************************************************************************************************************************************************/


#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}


/**************************************************************************************************************************************************************************************************/ /* MENU */ /**************************************************************************************************************************************************************************************************/

/*this wraps the whole of the menu*/ .igem_2018_team_menu { background-color:black; border-left: 1px solid black; display: block; overflow-y: visible; padding:0px; position:fixed; text-align:left; width: 115em; height: 3em; align-items: left; }


.igem_2018_team_menu.displaying_menu{ display:inline; }


.igem_2018_team_menu img { width:10%; }




/*mobile menu bar styling*/ /**************************************************************************************************************************************************************************************************/

.igem_2018_team_menu{ height: 50px; background-color: white; box-shadow: 0 10px 20px -5px gray; } .dropdownbutton{

} .dropdownbutton a{

} .dropdownbutton: hover:{


}

  1. cover{

top: 1000px; }

button{ background-color: white; border-color: white; color:black; font-size: 1em; width: 100%; height: 50px; display: inline; }

button a{ color:black; }

button:hover{ background-color: white; } .dropdowncontent{ position:absolute; background-color: white; opacity: 0.9; font-size: 1em; display: block; z-index: 2; overflow: visible; width: 11%;

} .dropdowncontent a{ width: 5em; height: 3em; color:black; }

.submenu_item{ height: 50px; text-align: center; border-bottom: 1px white; }

.notshow{ display:none; }

.dropdownitem{ display:inline-block; width: 10%; } .igem_2018_team_mobile_bar { background-color:#e4dede; border-bottom: 1px solid #c4baba; cursor:pointer; display:none; float:left; margin-top: 0; margin-bottom:0; position:fixed; width:100%; }


.slides{ color: white; height:35em; margin: auto; text-align: center; padding-top: 2em;

}

.notshow{ display:none; }

  1. slide1{

background-color: red; }

  1. slide2{

background-color: orange; }

  1. slide3{

background-color: yellow; color:black; }

  1. slide4{

background-color: green; }

  1. slide5{

background-color: blue; }

  1. slide6{

background-color: indigo; }

  1. slide7{

background-color: purple; }

.dot{ text-align: center; margin-left: 2em; margin-right: 2em; }

  1. dots{

margin:auto; height: 3em; width: 40em; }

/**************************************************************************************************************************************************************************************************/ /* CONTENT OF THE PAGE */ /**************************************************************************************************************************************************************************************************/

/* general wrapper for the content */ .igem_2018_team_content { padding-top:100px; background-color:white; display:block; width: 100%; margin:auto; }

/* subwrapper to center content */ .igem_2018_team_content .igem_2018_team_column_wrapper { margin:auto; max-width: 1400px; width: 100%; }


/*general styling*/ /**************************************************************************************************************************************************************************************************/

.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;} .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;} .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;} .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;} .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;} .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}


/* styling for the titles h1, h2*/ .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 { border-bottom:0px; color: #635d5d; font-family: "Arial Black", Gadget, sans-serif; padding: 10px 0px; }

/* styling for the titles h3, h3, h5, h6 */ .igem_2018_team_content .igem_2018_team_column_wrapper h3, .igem_2018_team_content .igem_2018_team_column_wrapper h4, .igem_2018_team_content .igem_2018_team_column_wrapper h5, .igem_2018_team_content .igem_2018_team_column_wrapper h6 { border-bottom:0px; color: #928b8b; font-family: "Arial Black", Gadget, sans-serif; padding: 5px 0px; }

/* text */ .igem_2018_team_content .igem_2018_team_column_wrapper p { font-size: 130%; font-family: Arial, Helvetica, sans-serif; padding: 5px 0px; text-align: left; color: #484848; }

/* Links */ .igem_2018_team_content .igem_2018_team_column_wrapper a { color: #5bc7d8; font-weight: bold; text-decoration: underline; text-decoration-color:#5bc7d8; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; }

/* hover for the links */ .igem_2018_team_content .igem_2018_team_column_wrapper a:hover { color: #f8b732; text-decoration:none; }


/* Table */ .igem_2018_team_content .igem_2018_team_column_wrapper table { border: 1px solid #928b8b; border-collapse: collapse; font-size: 130%; width: 100%; }

/* table cells */ .igem_2018_team_content .igem_2018_team_column_wrapper td { border: 1px solid #c4baba; border-collapse: collapse; font-size: 105%; padding: 10px; vertical-align: text-top; }

/* table headers */ .igem_2018_team_content .igem_2018_team_column_wrapper th { background-color:#c4baba; border: 1px solid #928b8b; border-collapse: collapse; font-size: 110%; padding: 10px; vertical-align: text-top; }


/* non numbered lists */ .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol { font-size: 130%; font-family: Arial, Helvetica, sans-serif; padding:0px 20px; }


.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li, 

	.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }


/*layout classes*/ /**************************************************************************************************************************************************************************************************/

/*main layout class */ .igem_2018_team_content .igem_2018_team_column_wrapper .column { float:left; margin: 1% 2%; padding: 0px; }

/* 100% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }

/* 66% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }

/* 33% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }



/*styling for all images*/ .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img, .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img { margin-bottom: 15px; width: 100%; }


/* page break */ .igem_2018_team_content .igem_2018_team_column_wrapper .clear { clear:both; } /*add extra space to page break with clear class*/ .igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space { height: 30px; }

/* horizontal line to divide the page*/ .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider { 

   	border-top: 1px solid #c4baba;

margin: auto; 

  	 	width: 98%;

}



/*support classes*/ /**************************************************************************************************************************************************************************************************/


/*Button */ /************************************************/ .igem_2018_team_content .igem_2018_team_column_wrapper .button_link { font-size: 130%; margin: 30px auto; text-align: center; }

.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a { background-color: #5bc7d8; color: #635d5d !important; font-weight: bold; margin: auto; text-decoration: none !important; padding: 10px 15px; }

.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover { background-color: #f8b732 !important; }


.igem_2018_team_content .igem_2018_team_column_wrapper .highlight { padding: 15px 20px; }

.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 { padding: 5px 15px; }

.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background { background-color: #e4dede; }

.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top { 

   	border-top: 4px solid #5bc7d8;

}


.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full { 

   	border: 4px solid #5bc7d8;

}

.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top { 

   	border-top: 4px solid #f8b732

}


.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full { 

   	border: 4px solid #f8b732;

}



/*mobile*/ /**************************************************************************************************************************************************************************************************/


/* 1800px */ /************************************************/ @media only screen and (max-width: 1800px) { .igem_2018_team_content { width: 70%;} .igem_2018_team_menu {display:block;} }

/* 1400px */ /************************************************/ @media only screen and (max-width: 1400px) { .igem_2018_team_menu .menu_item { font-size:100%;} .igem_2018_team_menu .submenu .submenu_item { font-size:90%;} .igem_2018_team_menu {display:block;} }

@media only screen and (max-width: 1001px) { .igem_2018_team_menu {display:block;} }

/* 1000px */ /************************************************/ @media only screen and (max-width: 1000px) { .igem_2018_team_content {width:100%; margin-left:0px;} .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;} .igem_2018_team_mobile_bar {display:block;} .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }

}


@media only screen and (max-width: 500px) { .igem_2018_team_menu {min-width:100%; width:100%; } }


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



</style>