Difference between revisions of "Team:ETH Zurich/styles/template css"

Line 8: Line 8:
 
body {
 
body {
 
     background-color:#1f407a;
 
     background-color:#1f407a;
 +
min-width: 400px;
 +
  width: auto !important;
 +
  width: 400px;
 
}
 
}
  
Line 33: Line 36:
 
}
 
}
  
 +
#burger_icon {
 +
display: none;
 +
}
 +
 +
#burger_icon > img {
 +
padding: 6px;
 +
-webkit-transition: all 0.3s ease;
 +
-moz-transition: all 0.3s ease;
 +
-ms-transition: all 0.3s ease;
 +
-o-transition: all 0.3s ease;
 +
transition: all 0.3s ease;
 +
}
 +
 +
#burger_icon > img:hover {
 +
background-color: #3f609a;
 +
-webkit-transition: all 0.3s ease;
 +
-moz-transition: all 0.3s ease;
 +
-ms-transition: all 0.3s ease;
 +
-o-transition: all 0.3s ease;
 +
transition: all 0.3s ease;
 +
}
 
/* Menu style */
 
/* Menu style */
 
/*==========================================================================*/
 
/*==========================================================================*/
Line 75: Line 99:
 
}
 
}
  
−
.menu_container > ul > li {
+
.menu_item {
 
     display: inline-block;
 
     display: inline-block;
 
}
 
}
Line 128: Line 152:
 
font-size: 18px;
 
font-size: 18px;
 
padding: 6px 54px 6px 16px;
 
padding: 6px 54px 6px 16px;
 +
}
 +
 +
.burger_visible {
 +
display: block !important;
 
}
 
}
  
Line 148: Line 176:
 
     margin-left:0px;
 
     margin-left:0px;
 
     background-color:#1f407a;
 
     background-color:#1f407a;
 +
}
 +
 +
.content_wrapper > p {
 +
    display:none;
 
}
 
}
  
Line 233: Line 265:
 
border-bottom:0px;  
 
border-bottom:0px;  
 
color: #000000;   
 
color: #000000;   
−
}
 
−
 
−
.content_wrapper > p {
 
−
    display:none;
 
 
}
 
}
  
Line 248: Line 276:
 
.content_wrapper a {  
 
.content_wrapper a {  
 
font-weight: bold;  
 
font-weight: bold;  
−
text-decoration-color:#1f407a;
 
 
color: #1f407a;
 
color: #1f407a;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 352: Line 379:
 
}
 
}
  
−
/* If the screen width is smaller than 680px */
+
/* If the screen width is smaller than 740px */
−
@media only screen and (max-width: 680px) {
+
@media only screen and (max-width: 740px) {
 
.collapsable_menu_control { display:block; }
 
.collapsable_menu_control { display:block; }
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
−
.sec, div.sec:first-of-type { padding-left: 6%; padding-right: 6%; }
+
.sec, div.sec:first-of-type, .title_container { padding-left: 6%; padding-right: 6%; }
 +
#burger_icon { display: block; float: right; }
 +
#title_text { display: block; float: left; text-align: left; }
 +
#main_menu { display: none; }
 +
.menu_item { display: block; width: 100%; }
 +
.menu { width: 100%; }
 +
.submenu_visible { position: relative !important; }
 +
.submenu a {  padding-left: 24px !important; }
 
}
 
}

Revision as of 08:33, 28 August 2016

/* Default wiki style */ /*==========================================================================*/

  1. sideMenu, #top_title {
   display:none;

}

body { 

   background-color:#1f407a;

min-width: 400px; 

  	width: auto !important;
  	width: 400px;

}

  1. bodyContent h1, #bodyContent h2, #bodyContent h3,
  2. bodyContent h4, #bodyContent h5 {
   margin-bottom: 0px;

}

  1. globalWrapper {
   padding: 0px;

}

/* Title style */ /*==========================================================================*/

.title_container { 

   height: 100px;
   line-height: 100px;
   text-align: center;
   font-family: "Segoe UI",Arial,Helvetica,sans-serif;
   font-size: 40px;
   color: #FFFFFF;
   font-weight: 600;
   font-stretch: extra-expanded;

}

  1. burger_icon {

display: none; }

  1. burger_icon > img {

padding: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

  1. burger_icon > img:hover {

background-color: #3f609a; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Menu style */ /*==========================================================================*/

.menu_container { 

   background-color: #111111;
   color: #EEEEEE;
   font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
   font-size: 20px;

width: 100%; }

.menu_container a { 

 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;

}

.menu_container a { 

   color: #EEEEEE;
   text-decoration:none;

display: block; }

.menu_container ul { 

   list-style-type: none;
   list-style-image: none;
   margin: 0px;

}

.menu_container > ul { 

   margin: 0 auto;

-webkit-margin-before: 0px; 

   -webkit-margin-after: 0px;

}

.menu_container > ul > li > a { 

   height: 42px;
   line-height: 42px;
   padding: 0px 12px;

}

.menu_item { 

   display: inline-block;

}

.menu_container li { 

   cursor: pointer;
   margin: 0px;

}

.menu { display: table; 

   margin: 0 auto;

}

.menu_item, .submenu > li { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_hover { background-color: #3D3D3D; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_open { background-color: #232323; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_container .submenu { 

   display: none;

background-color: #232323; }

.menu_container .submenu_visible { display: block; position: absolute; }

.menu_container .submenu a { font-size: 18px; padding: 6px 54px 6px 16px; }

.burger_visible { display: block !important; }

/* Default content style */ /*==========================================================================*/

.content_wrapper { width: 100%; 

   background-color:white;
   display: block;
 	margin-left: auto;
 	margin-right: auto;

}

  1. content {
   width: 100%;

height: 100%; 

   padding: 0;

padding:0px; 

   margin-left:0px;
   background-color:#1f407a;

}

.content_wrapper > p { 

   display:none;

}

div.sec:first-of-type { 

   width: auto;
   padding: 54px 20% 14px 20%;

}

.sec { 

   width: auto;
   padding: 14px 20%;

}

.sec p { text-align: justify; }

.light { 

   background-color: #FFFFFF;

}

.dark { 

   background-color: #ECECEC;

}

.blue { 

   background-color:#1f407a;

}

.blue h2 { 

   color: #FFFFFF !important;

}

.column { padding: 10px 0px; background-color:white; }

.full_size { width:100%; }

.full_size img { padding: 10px 15px; width:96.5%; }

.half_size { width: 50%; }

.half_size img { padding: 10px 15px; width: 93%; }

.clear { clear:both; }

.highlight { width: 90%; margin: auto; padding: 15px 5px; background-color: #f2f2f2; }

.judges-will-not-evaluate { border: 4px solid #72c9b6; display: block; margin: 5px 15px; width: 95%; font-weight:bold; }

/* styling for the titles */ .content_wrapper h1, .content_wrapper h2 { padding: 5px 0px; border-bottom:0px; color:#1f407a; }

.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { padding: 5px 0px; border-bottom:0px; color: #000000; }

/* font and text */ .content_wrapper p { font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Links */ .content_wrapper a { font-weight: bold; color: #1f407a; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* hover for the links */ .content_wrapper a:hover { text-decoration:none; color:#000000; }

/* non numbered lists */ .content_wrapper ul { padding:0px 5px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* numbered lists */ .content_wrapper ol { padding:0px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Table */ .content_wrapper table { width: 97%; margin:15px 10px; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* table cells */ .content_wrapper td { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* table headers */ .content_wrapper th { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; background-color:#f2f2f2; }

/* Button class */ .button_click { margin: 10px auto; padding: 15px; width:12%; text-align:center; font-weight:bold; background-color: #72c9b6; cursor:pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* button class on hover */ .button_click:hover { background-color:#000000; color:#72c9b6; }

  1. sponsor_logos {
   text-align:center;

margin: 15px 0px; padding: 15px; background-color: white; }

  1. sponsor_logos img {
   max-height:80px;

max-width:100%; 

   width:auto;
   height:auto;

}

  1. sponsor_logos li {
   display: inline-block;
   margin: 0px 12px;

}

/* Responsive styling */ /*==========================================================================*/

/* If the screen width is smaller than 1000px */ @media only screen and (max-width: 1000px) { .icon {display:none;} .highlight {padding:10px 0px;} .sec, div.sec:first-of-type { padding-left: 10%; padding-right: 10%; } }

/* If the screen width is smaller than 740px */ @media only screen and (max-width: 740px) { .collapsable_menu_control { display:block; } .highlight {padding:15px 5px;} .sec, div.sec:first-of-type, .title_container { padding-left: 6%; padding-right: 6%; } #burger_icon { display: block; float: right; } #title_text { display: block; float: left; text-align: left; } #main_menu { display: none; } .menu_item { display: block; width: 100%; } .menu { width: 100%; } .submenu_visible { position: relative !important; } .submenu a { padding-left: 24px !important; } }