Team:CityU HK/notebook/lablog css

From 2014.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 1: Line 1:
-
#cssmenu {
+
#cssmenu,
-
  background: #333;
+
#cssmenu ul,
-
  list-style: none;
+
#cssmenu ul li,
 +
#cssmenu ul li a {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
-
   width: 12em;
+
  border: 0;
 +
  list-style: none;
 +
  line-height: 1;
 +
  display: block;
 +
  position: relative;
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
#cssmenu {
 +
   width: 150px;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  font-size: 5px;
 +
  color: #ffffff;
 +
  margin-top: 160px;
   position: fixed;
   position: fixed;
}
}
-
#cssmenu li {
+
#cssmenu.align-right {
-
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
+
   float: right;
-
   margin: 0;
+
-
  padding: 0;
+
-
  list-style: none;
+
}
}
-
#cssmenu a {
+
#cssmenu:after,
-
  background: #333;
+
#cssmenu ul:after {
-
  border-bottom: 1px solid #393939;
+
   content: ".";
-
   color: #ccc;
+
   display: block;
   display: block;
-
   margin: 0;
+
   clear: both;
-
   padding: 8px 12px;
+
  visibility: hidden;
 +
  line-height: 0;
 +
   height: 0;
 +
}
 +
#cssmenu ul li {
 +
  display: block;
 +
  z-index: 1;
 +
  background: #222222;
 +
  /* Old browsers */
 +
 
 +
  background: -moz-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 +
  background: -webkit-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 +
  background: -o-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 +
  background: -ms-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 +
  background: linear-gradient(to top, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 +
}
 +
#cssmenu ul li::after {
 +
  content: "";
 +
  width: 100%;
 +
  height: 8px;
 +
  position: absolute;
 +
  border-top-left-radius: 50% 4px;
 +
  border-top-right-radius: 50% 4px;
 +
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 +
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 +
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 +
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 +
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 +
  z-index: 2;
 +
  bottom: 10px;
 +
}
 +
#cssmenu ul li a {
 +
  display: block;
 +
  padding: 10px 30px;
   text-decoration: none;
   text-decoration: none;
-
   font-weight: normal;
+
   font-size: 12px;
 +
  text-transform: uppercase;
 +
  color: #ffffff;
 +
  z-index: 3;
 +
}
 +
#cssmenu ul li a:hover,
 +
#cssmenu ul li.active a {
 +
  color: #ffffff;
 +
}
 +
#cssmenu ul li:hover,
 +
#cssmenu ul li.active {
 +
  background: #16bd8c;
 +
  background: -moz-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 +
  background: -webkit-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 +
  background: -o-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 +
  background: -ms-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 +
  background: linear-gradient(to top, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
}
}
-
#cssmenu a:hover {
+
#cssmenu ul li:hover::after,
-
   background: #2580a2 url("images/hover.gif") left center no-repeat;
+
#cssmenu ul li.active::after {
-
   color: #fff;
+
   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
-
   padding-bottom: 8px;
+
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 +
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 +
   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 +
   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
}

Latest revision as of 01:45, 13 October 2014

  1. cssmenu,
  2. cssmenu ul,
  3. cssmenu ul li,
  4. cssmenu ul li a { 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

  1. cssmenu { 
 width: 150px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 5px;
 color: #ffffff;
 margin-top: 160px;
 position: fixed;

}

  1. cssmenu.align-right { 
 float: right;

}

  1. cssmenu:after,
  2. cssmenu ul:after { 
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;

}

  1. cssmenu ul li { 
 display: block;
 z-index: 1;
 background: #222222;
 /* Old browsers */

 background: -moz-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -webkit-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -o-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -ms-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: linear-gradient(to top, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);

}

  1. cssmenu ul li::after { 
 content: "";
 width: 100%;
 height: 8px;
 position: absolute;
 border-top-left-radius: 50% 4px;
 border-top-right-radius: 50% 4px;
 background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 z-index: 2;
 bottom: 10px;

}

  1. cssmenu ul li a { 
 display: block;
 padding: 10px 30px;
 text-decoration: none;
 font-size: 12px;
 text-transform: uppercase;
 color: #ffffff;
 z-index: 3;

}

  1. cssmenu ul li a:hover,
  2. cssmenu ul li.active a { 
 color: #ffffff;

}

  1. cssmenu ul li:hover,
  2. cssmenu ul li.active { 
 background: #16bd8c;
 background: -moz-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -webkit-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -o-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -ms-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: linear-gradient(to top, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);

}

  1. cssmenu ul li:hover::after,
  2. cssmenu ul li.active::after { 
 background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

}

Retrieved from "http://2014.igem.org/Team:CityU_HK/notebook/lablog_css"