Team:UNITN-Trento/CSS/Styles/Labpost
From 2013.igem.org
(Difference between revisions)
(9 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
.tn-post { | .tn-post { | ||
- | + | position: relative; | |
- | + | width: 600px; | |
- | + | margin: 3em 0; | |
- | + | padding: 8px; | |
- | + | ||
- | + | background: rgba(255,255,255,.8); | |
- | + | border-right: 5px solid #C4221C; | |
- | + | box-shadow: 1px 1px 2px #323232; | |
- | + | ||
+ | font-family: 'Kameron', serif; | ||
+ | text-align: justify; | ||
} | } | ||
.tn-post div.tn-faces { | .tn-post div.tn-faces { | ||
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | left: -86px; | |
+ | |||
+ | border-radius: 5px; | ||
+ | box-shadow: 1px 1px 2px #323232; | ||
} | } | ||
.tn-faces img { | .tn-faces img { | ||
- | + | display: block; | |
- | + | width: 75px; | |
- | + | margin: 0.2em; | |
- | + | ||
- | + | border: 2px solid transparent; | |
+ | border-radius: 5px; | ||
} | } | ||
.tn-postdate { | .tn-postdate { | ||
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | right: -125px; | |
- | + | width: 100px; | |
- | + | ||
- | + | padding: 0 10px 10px 10px; | |
- | + | ||
- | + | background: #05AB9A; | |
- | + | box-shadow: 1px 1px 2px #323232; | |
+ | |||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 25px; | ||
+ | text-align: center; | ||
} | } | ||
.tn-postdate a { | .tn-postdate a { | ||
- | + | text-decoration: none; | |
- | + | ||
- | + | font-style: italic; | |
- | + | line-height: 30px; | |
+ | |||
+ | color: #ffffff; | ||
} | } | ||
.tn-postdate a .yy { | .tn-postdate a .yy { | ||
- | + | font-size: 0.7em; | |
} | } | ||
.tn-postdate a .ddmm { | .tn-postdate a .ddmm { | ||
- | + | font-size: 1.5em; | |
- | + | font-weight: bold; | |
} | } | ||
.tn-posttitle { | .tn-posttitle { | ||
- | + | padding: 0 10px; | |
- | + | padding-right: 100px; | |
- | + | margin: 0.2em 0; | |
- | + | ||
- | + | color: #C4221C; | |
- | + | ||
- | + | font-family: 'Boogaloo', cursive; | |
- | + | font-size: 1.8em; | |
- | + | text-align: justify; | |
} | } | ||
.tn-text { | .tn-text { | ||
- | + | padding: 0 10px; | |
- | + | margin: 0; | |
- | + | text-align: justify; | |
- | + | font-size: 0.9em; | |
- | + | line-height: 1.3em; | |
+ | font-family: 'Cabin', serif; | ||
} | } | ||
.tn-tags { | .tn-tags { | ||
- | + | padding: 0 10px; | |
- | + | margin: 0; | |
- | + | text-align: right; | |
- | + | font-size: 1.2em; | |
} | } | ||
.tn-tags span.tag { | .tn-tags span.tag { | ||
- | + | display: inline-table; | |
- | + | margin: 4px 0 0 4px; | |
- | + | padding: 1px 3px; | |
- | + | font-size: 0.8em; | |
- | + | border: 2px solid #048c7e; | |
- | + | color: #048c7e; | |
} | } | ||
.tn-tags span.tag:hover { | .tn-tags span.tag:hover { | ||
- | + | color: #c01b39; | |
} | } | ||
a.tn-editpost { | a.tn-editpost { | ||
- | + | display: block; | |
- | + | position: absolute; | |
- | + | top: 10px; | |
- | + | right: 0; | |
- | + | width: 50px; | |
- | + | text-align: center; | |
} | } | ||
a.tn-editpost img { | a.tn-editpost img { | ||
- | + | width: 30px; | |
} | } | ||
.tn-text > a { | .tn-text > a { | ||
- | + | text-decoration: none; | |
- | + | ||
- | + | ||
} | } | ||
- | .tn-text > a:link, .tn- | + | .tn-text > a:link, .tn-text > a:visited { |
- | + | color: #2880C5; | |
} | } | ||
.tn-text > a:hover { | .tn-text > a:hover { | ||
- | + | color: #C4221C; | |
} | } | ||
.tn-text img { | .tn-text img { | ||
- | + | max-width: 450px !important; | |
- | + | max-height: 450px !important; | |
+ | } | ||
+ | |||
+ | .tn-text table { | ||
+ | background: none; | ||
+ | margin: 2px; | ||
+ | } | ||
+ | |||
+ | .tn-text table td, .tn-text table th { | ||
+ | padding: 2px; | ||
+ | border: 1px solid; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .tag, | ||
+ | .tn-text .tn-spoiler a { | ||
+ | display: block; | ||
+ | margin: 10px; | ||
+ | padding-left: 1em; | ||
+ | |||
+ | background-color: #f0f0f0 !important; | ||
+ | border-color: #2880C5 !important; | ||
+ | color: #2880C5 !important; | ||
+ | } | ||
+ | |||
+ | .tag:hover, | ||
+ | .tn-text .tn-spoiler a:hover { | ||
+ | background-color: #05AB9A !important; | ||
+ | border-color: #f0f0f0 !important; | ||
+ | color: #f0f0f0 !important; | ||
+ | } | ||
+ | |||
+ | .tn-text .tn-spoiler div { | ||
+ | margin: 15px; | ||
+ | margin-top: 0; | ||
+ | padding: 1em 0; | ||
+ | |||
+ | background-color: #f0f0f0; | ||
+ | border-color: #2880C5; | ||
} | } |
Latest revision as of 09:59, 30 August 2013
.tn-post {
position: relative; width: 600px; margin: 3em 0; padding: 8px; background: rgba(255,255,255,.8); border-right: 5px solid #C4221C; box-shadow: 1px 1px 2px #323232; font-family: 'Kameron', serif; text-align: justify;
}
.tn-post div.tn-faces {
position: absolute; top: 0; left: -86px; border-radius: 5px; box-shadow: 1px 1px 2px #323232;
}
.tn-faces img {
display: block; width: 75px; margin: 0.2em;
border: 2px solid transparent; border-radius: 5px;
}
.tn-postdate {
position: absolute; top: 0; right: -125px; width: 100px; padding: 0 10px 10px 10px; background: #05AB9A; box-shadow: 1px 1px 2px #323232; font-family: Arial, Helvetica, sans-serif; font-size: 25px; text-align: center;
}
.tn-postdate a {
text-decoration: none; font-style: italic; line-height: 30px; color: #ffffff;
}
.tn-postdate a .yy {
font-size: 0.7em;
}
.tn-postdate a .ddmm {
font-size: 1.5em; font-weight: bold;
}
.tn-posttitle {
padding: 0 10px; padding-right: 100px; margin: 0.2em 0; color: #C4221C; font-family: 'Boogaloo', cursive; font-size: 1.8em; text-align: justify;
}
.tn-text {
padding: 0 10px; margin: 0; text-align: justify; font-size: 0.9em; line-height: 1.3em; font-family: 'Cabin', serif;
}
.tn-tags {
padding: 0 10px; margin: 0; text-align: right; font-size: 1.2em;
}
.tn-tags span.tag {
display: inline-table; margin: 4px 0 0 4px; padding: 1px 3px; font-size: 0.8em; border: 2px solid #048c7e; color: #048c7e;
}
.tn-tags span.tag:hover {
color: #c01b39;
}
a.tn-editpost {
display: block; position: absolute; top: 10px; right: 0; width: 50px; text-align: center;
}
a.tn-editpost img {
width: 30px;
}
.tn-text > a {
text-decoration: none;
}
.tn-text > a:link, .tn-text > a:visited {
color: #2880C5;
}
.tn-text > a:hover {
color: #C4221C;
}
.tn-text img {
max-width: 450px !important; max-height: 450px !important;
}
.tn-text table {
background: none; margin: 2px;
}
.tn-text table td, .tn-text table th {
padding: 2px; border: 1px solid; text-align: center;
}
.tag, .tn-text .tn-spoiler a {
display: block; margin: 10px; padding-left: 1em; background-color: #f0f0f0 !important; border-color: #2880C5 !important; color: #2880C5 !important;
}
.tag:hover, .tn-text .tn-spoiler a:hover {
background-color: #05AB9A !important; border-color: #f0f0f0 !important; color: #f0f0f0 !important;
}
.tn-text .tn-spoiler div {
margin: 15px; margin-top: 0; padding: 1em 0; background-color: #f0f0f0; border-color: #2880C5;
}