Team:UNITN-Trento/CSS/Project/Datapage
From 2013.igem.org
(Difference between revisions)
(16 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | #tn-content { | + | #tn-content .container { |
- | font-family: " | + | background-color: rgb(127,15,11); |
- | font-size: | + | background-image: url(https://static.igem.org/mediawiki/2013/8/84/Tn-2013-boxbg-Onda-Strawberry.png); |
+ | } | ||
+ | |||
+ | .main-datapage { | ||
+ | display: block; | ||
+ | |||
+ | margin: 2em auto; | ||
+ | width: 960px; | ||
+ | |||
+ | border: 3px solid white; | ||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | } | ||
+ | |||
+ | .tn-doublephoto-wrap a { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .tn-doublephoto-wrap a:link, | ||
+ | .tn-doublephoto-wrap a:visited { | ||
+ | display: inline-block; | ||
+ | border: 3px solid white; | ||
+ | box-shadow: 1px 1px 2px #323232; | ||
+ | } | ||
+ | |||
+ | .tn-doublephoto-wrap a:hover { | ||
+ | border-color: #dadada; | ||
+ | box-shadow: 1px 1px 2px #323232 inset; | ||
+ | } | ||
+ | |||
+ | .tn-doublephoto-wrap a .text { | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | left: 5px; | ||
+ | |||
+ | padding: 0.2em; | ||
+ | |||
+ | background-color: rgba(50,50,50,.3); | ||
+ | border-radius: 0.3em; | ||
+ | |||
+ | color: white; | ||
+ | font-family: "Boogaloo", arial; | ||
+ | font-size: 2em; | ||
+ | text-shadow: 0 0 2px black; | ||
+ | } | ||
+ | |||
+ | .tn-doublephoto-wrap a:hover .text { | ||
+ | background-color: rgba(250,250,250,.5); | ||
+ | border-radius: 0.3em; | ||
+ | |||
+ | color: #323232; | ||
+ | text-shadow: none; | ||
+ | } | ||
+ | |||
+ | /*Navigation arrows*/ | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 { | ||
+ | position: relative; | ||
+ | |||
+ | margin: -1em 0 1em 0; | ||
+ | padding: 0.5em; | ||
+ | |||
+ | background-color: rgba(255,255,255,.6); | ||
+ | |||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev, | ||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next { | ||
+ | position: absolute; | ||
+ | bottom: 0.8em; | ||
+ | |||
+ | width: 174px; | ||
+ | |||
+ | border: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | .container .sheet-2 .tn-arr-prev { | ||
+ | left: 2em; | ||
+ | } | ||
+ | |||
+ | .container .sheet-2 .tn-arr-next { | ||
+ | right: 2em; | ||
+ | } | ||
+ | |||
+ | /*Tour*/ | ||
+ | |||
+ | #tn-central-container { | ||
+ | position: relative; | ||
+ | box-shadow: none; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #tn-header-wrap #tn-header #tn-menu { | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | right: 10px; | ||
+ | |||
+ | width: 320px; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour img { | ||
+ | width: 320px; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour span { | ||
+ | position: absolute; | ||
+ | bottom: 0.5em; | ||
+ | left: 2em; | ||
+ | |||
+ | color: black; | ||
+ | font-family: "Boogaloo", cursive; | ||
+ | font-size: 1.5em; | ||
+ | text-shadow: 0 0 4px white; | ||
+ | } | ||
+ | |||
+ | #tn-sp-tour:hover span { | ||
+ | color: rgb(127,15,11); | ||
+ | } | ||
+ | |||
+ | @media(max-width:1500px) { | ||
+ | #tn-central-container { | ||
+ | padding-bottom: 200px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #tn-central-container #tn-content-wrap #tn-content .container .sheet a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet a:visited { | ||
+ | color:rgb(127,15,11); | ||
+ | } | ||
- | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet a:hover { | |
+ | color:black; | ||
} | } | ||
- | #tn-content . | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:visited { |
- | + | color:rgb(127,15,11); | |
} | } | ||
- | #tn-content | + | #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover { |
- | + | color:black; | |
- | + | ||
} | } |
Latest revision as of 13:21, 29 September 2013
- tn-content .container {
background-color: rgb(127,15,11); background-image: url();
}
.main-datapage {
display: block; margin: 2em auto; width: 960px; border: 3px solid white; box-shadow: 2px 2px 4px #323232;
}
.tn-doublephoto-wrap a {
position: relative;
}
.tn-doublephoto-wrap a:link, .tn-doublephoto-wrap a:visited {
display: inline-block; border: 3px solid white; box-shadow: 1px 1px 2px #323232;
}
.tn-doublephoto-wrap a:hover {
border-color: #dadada; box-shadow: 1px 1px 2px #323232 inset;
}
.tn-doublephoto-wrap a .text {
position: absolute; top: 5px; left: 5px; padding: 0.2em; background-color: rgba(50,50,50,.3); border-radius: 0.3em; color: white; font-family: "Boogaloo", arial; font-size: 2em; text-shadow: 0 0 2px black;
}
.tn-doublephoto-wrap a:hover .text {
background-color: rgba(250,250,250,.5); border-radius: 0.3em;
color: #323232; text-shadow: none;
}
/*Navigation arrows*/
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 {
position: relative; margin: -1em 0 1em 0; padding: 0.5em; background-color: rgba(255,255,255,.6); text-align: center;
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev,
- tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next {
position: absolute; bottom: 0.8em;
width: 174px; border: none; box-shadow: none;
}
.container .sheet-2 .tn-arr-prev {
left: 2em;
}
.container .sheet-2 .tn-arr-next {
right: 2em;
}
/*Tour*/
- tn-central-container {
position: relative; box-shadow: none; z-index: 0;
}
- tn-header-wrap #tn-header #tn-menu {
z-index: 5;
}
- tn-sp-tour {
position: absolute; bottom: 0; right: 10px; width: 320px;
}
- tn-sp-tour img {
width: 320px;
}
- tn-sp-tour span {
position: absolute; bottom: 0.5em; left: 2em; color: black; font-family: "Boogaloo", cursive; font-size: 1.5em; text-shadow: 0 0 4px white;
}
- tn-sp-tour:hover span {
color: rgb(127,15,11);
}
@media(max-width:1500px) {
#tn-central-container { padding-bottom: 200px; }
}
- tn-central-container #tn-content-wrap #tn-content .container .sheet a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet a:visited {
color:rgb(127,15,11); }
- tn-central-container #tn-content-wrap #tn-content .container .sheet a:hover {
color:black; }
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:link, #tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:visited {
color:rgb(127,15,11); }
- tn-central-container #tn-content-wrap #tn-content .container .sheet .tn-effect-link a:hover {
color:black; }