Team:TU Eindhoven/Notebook-css
From 2014.igem.org
Rafiqlubken (Talk | contribs) |
|||
(42 intermediate revisions not shown) | |||
Line 43: | Line 43: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.notebookpage{ | .notebookpage{ | ||
height: auto; | height: auto; | ||
width: auto; | width: auto; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.container { | .container { | ||
- | z-index: 1; | + | z-index: -1; |
- | position: | + | position: relative; |
background-color: #fff; | background-color: #fff; | ||
- | + | top:10%; | |
- | + | ||
height: 100%; | height: 100%; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 206: | Line 105: | ||
/* Menu Styles */ | /* Menu Styles */ | ||
- | |||
.menu { | .menu { | ||
width: 100%; | width: 100%; | ||
- | |||
height: auto; | height: auto; | ||
- | background-color: # | + | background-color: #00BAC6; |
- | + | ||
- | + | ||
- | + | ||
z-index: 2; | z-index: 2; | ||
- | padding-bottom:20px; | + | padding-bottom:20px; |
- | + | ||
- | + | ||
} | } | ||
.menu .slider { | .menu .slider { | ||
Line 251: | Line 143: | ||
position: relative; | position: relative; | ||
left: -3px; | left: -3px; | ||
- | background-color: # | + | background-color: #00BAC6; |
} | } | ||
.menu .slider .bar a.knob { | .menu .slider .bar a.knob { | ||
Line 277: | Line 169: | ||
.menu ul li { | .menu ul li { | ||
margin: 0 10px; | margin: 0 10px; | ||
- | font-size: | + | font-size: 0.9em; |
font-weight: bold; | font-weight: bold; | ||
float: left; | float: left; | ||
} | } | ||
- | .menu ul li a { color: # | + | .menu ul li a {color: #c9c9c9; margin: 0; text-decoration:none;} |
+ | |||
+ | .menu ul li:hover a {color: #ffffff} | ||
+ | .menu ul li a:active {color: #ffffff} |
Latest revision as of 19:11, 10 August 2014
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }
.notebookpage{
height: auto; width: auto;
}
.container {
z-index: -1; position: relative; background-color: #fff; top:10%; height: 100%;
}
.btn {
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position: relative; display: inline-block; padding: 10px 20px; height: 50px; background-color: #666; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; line-height: 30px; font-size: 16px; font-weight: bold; text-shadow: 0px 1px 1px #888;
}
a.btn span.btn { position: absolute; top: 4px; left: 0; z-index: -1; width: 100%; background-color: #444; } .btn:active, .btn:active > span.btn{ top: 2px; } .btn.active, .btn.active > span.btn { top: 2px; }
.btn-small {
height: 30px; font-size: 12px; line-height: 10px;
}
a.btn-small span.btn { height: 30px; }
/* Menu Styles */
.menu {
width: 100%; height: auto; background-color: #00BAC6; z-index: 2; padding-bottom:20px;
}
.menu .slider { position: relative; left: 5%; width: 90%; text-align: center;
} .menu .slider .bar, .menu .slider .bar .before { height: 20px; transition: .5s; -webkit-transition: .5s; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } .menu .slider .bar { position: relative; left: 3px; width: 100%; background-color: #777;
} .menu .slider .bar .before { width: 100px; float: left; position: relative; left: -3px; background-color: #00BAC6; } .menu .slider .bar a.knob { position: absolute; top: -5px; left: 0; margin: 0; display: block; width: 30px; height: 30px; background-color: #25758b;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; transition: .5s; -webkit-transition: .5s; } .menu ul { height: 100%; display: inline-block; margin: 20px 0 15px 0; } .menu ul li { margin: 0 10px; font-size: 0.9em; font-weight: bold; float: left; } .menu ul li a {color: #c9c9c9; margin: 0; text-decoration:none;}
.menu ul li:hover a {color: #ffffff} .menu ul li a:active {color: #ffffff}