Template:Team:Technion-Israel/Technion-Israel-style.css
From 2014.igem.org
(Difference between revisions)
m |
|||
Line 928: | Line 928: | ||
text-decoration:none; | text-decoration:none; | ||
color: #e04749; | color: #e04749; | ||
+ | } | ||
+ | |||
+ | #cssmenu { | ||
+ | position: fixed; | ||
+ | top: 10px; | ||
+ | left: 10px; | ||
+ | margin: 0; | ||
+ | font-family: 'Source Sans Pro'; | ||
+ | line-height: 1; | ||
+ | width: 180px; | ||
+ | display: none; | ||
+ | } | ||
+ | .align-right { | ||
+ | float: right; | ||
+ | } | ||
+ | #cssmenu ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | display: block; | ||
+ | } | ||
+ | #cssmenu ul li { | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #cssmenu ul li a { | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #cssmenu > ul > li > a { | ||
+ | color: #dddddd; /*color of text when closed*/ | ||
+ | text-transform: uppercase; | ||
+ | display: block; | ||
+ | padding: 20px; | ||
+ | border-top: 1px solid #878787; | ||
+ | border-left: 1px solid #878787; | ||
+ | border-right: 1px solid #878787; | ||
+ | background: #878787; /*color of backgroung when closed*/ | ||
+ | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); | ||
+ | letter-spacing: 1px; | ||
+ | font-size: 16px; | ||
+ | font-weight: 300; | ||
+ | -webkit-transition: all 0.25s ease-in; | ||
+ | -moz-transition: all 0.25s ease-in; | ||
+ | -ms-transition: all 0.25s ease-in; | ||
+ | -o-transition: all 0.25s ease-in; | ||
+ | transition: all 0.25s ease-in; | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu > ul > li:first-child > a { | ||
+ | border-top-left-radius: 3px; | ||
+ | border-top-right-radius: 3px; | ||
+ | } | ||
+ | #cssmenu > ul > li:last-child > a { | ||
+ | border-bottom-left-radius: 3px; | ||
+ | border-bottom-right-radius: 3px; | ||
+ | border-bottom: 1px solid #878787; | ||
+ | } | ||
+ | #cssmenu > ul > li:hover > a, | ||
+ | #cssmenu > ul > li.open > a, | ||
+ | #cssmenu > ul > li.active > a { | ||
+ | background-color: rgba(135, 135, 135, 0.70); | ||
+ | color: #ffffff; /*color of text when main is closed*/ | ||
+ | } | ||
+ | #cssmenu ul > li.has-sub > a::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-top: 12px solid #000000; | ||
+ | border-botom: 12px solid transparent; | ||
+ | border-left: 90px solid transparent; | ||
+ | border-right: 90px solid transparent; | ||
+ | left: 0; | ||
+ | bottom: -13px; | ||
+ | bottom: 0px; | ||
+ | z-index: 1000001; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all .2s ease; | ||
+ | -moz-transition: all .2s ease; | ||
+ | -ms-transition: all .2s ease; | ||
+ | -o-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | } | ||
+ | #cssmenu ul > li.has-sub > a::before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-top: 12px solid #151515; | ||
+ | border-botom: 12px solid transparent; | ||
+ | border-left: 90px solid transparent; | ||
+ | border-right: 90px solid transparent; | ||
+ | left: 0; | ||
+ | bottom: -12px; | ||
+ | bottom: -1px; | ||
+ | z-index: 1000003; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all .2s ease; | ||
+ | -moz-transition: all .2s ease; | ||
+ | -ms-transition: all .2s ease; | ||
+ | -o-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | } | ||
+ | #cssmenu ul > li.has-sub::after { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border: 7px solid transparent; | ||
+ | border-top-color: #dddddd; | ||
+ | z-index: 1000002; | ||
+ | right: 20px; | ||
+ | top: 24.5px; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | #cssmenu ul > li:hover::after, | ||
+ | #cssmenu ul > li.active::after, | ||
+ | #cssmenu ul > li.open::after { | ||
+ | border-top-color: #ffffff; | ||
+ | } | ||
+ | #cssmenu ul > li.has-sub.open > a::after { | ||
+ | opacity: 1; | ||
+ | bottom: -13px; | ||
+ | } | ||
+ | #cssmenu ul > li.has-sub.open > a::before { | ||
+ | opacity: 1; | ||
+ | bottom: -12px; | ||
+ | } | ||
+ | #cssmenu ul ul { | ||
+ | display: none; | ||
+ | } | ||
+ | #cssmenu ul ul li { | ||
+ | border-left: 1px solid #ccc; | ||
+ | border-right: 1px solid #ccc; | ||
+ | } | ||
+ | #cssmenu ul ul li a { | ||
+ | background: #f1f1f1; /*color of whole menu*/ | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | font-size: 15px; | ||
+ | padding: 14px 20px; | ||
+ | border-bottom: 1px solid #dddddd; | ||
+ | color: #777777; /*color of text*/ | ||
+ | font-weight: 300; | ||
+ | -webkit-transition: all 0.25s ease-in; | ||
+ | -moz-transition: all 0.25s ease-in; | ||
+ | -ms-transition: all 0.25s ease-in; | ||
+ | -o-transition: all 0.25s ease-in; | ||
+ | transition: all 0.25s ease-in; | ||
+ | } | ||
+ | #cssmenu ul ul li:first-child > a { | ||
+ | padding-top: 18px; | ||
+ | } | ||
+ | #cssmenu ul ul ul li { | ||
+ | border: 0; | ||
+ | } | ||
+ | #cssmenu ul ul li:hover > a, | ||
+ | #cssmenu ul ul li.open > a, | ||
+ | #cssmenu ul ul li.active > a { | ||
+ | background: #e4e4e4; /*color when hover*/ | ||
+ | color: #666666; | ||
+ | } | ||
+ | #cssmenu ul ul > li.has-sub > a::after { | ||
+ | border-top: 13px solid #dddddd; | ||
+ | } | ||
+ | #cssmenu ul ul > li.has-sub > a::before { | ||
+ | border-top: 13px solid #e4e4e4; | ||
+ | } | ||
+ | #cssmenu ul ul ul li a { | ||
+ | padding-left: 30px; | ||
+ | } | ||
+ | #cssmenu ul ul > li.has-sub::after { | ||
+ | top: 18.5px; | ||
+ | border-width: 6px; | ||
+ | border-top-color: #777777; | ||
+ | } | ||
+ | #cssmenu ul ul > li:hover::after, | ||
+ | #cssmenu ul ul > li.active::after, | ||
+ | #cssmenu ul ul > li.open::after { | ||
+ | border-top-color: #666666; | ||
} | } | ||
Revision as of 05:49, 14 October 2014