Team:UNITN-Trento/CSS/Styles/Labpost
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
.tn-post { | .tn-post { | ||
position: relative; | position: relative; | ||
- | |||
- | |||
- | |||
width: 600px; | width: 600px; | ||
- | + | margin: 3em 0; | |
- | + | padding: 8px; | |
- | + | ||
background: rgba(255,255,255,.8); | 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; | position: absolute; | ||
- | top: | + | top: 0; |
left: -86px; | left: -86px; | ||
+ | |||
+ | border-radius: 5px; | ||
+ | box-shadow: 1px 1px 2px #323232; | ||
} | } | ||
Line 21: | Line 26: | ||
width: 75px; | width: 75px; | ||
margin: 0.2em; | margin: 0.2em; | ||
- | + | ||
border: 2px solid transparent; | border: 2px solid transparent; | ||
+ | border-radius: 5px; | ||
} | } | ||
.tn-postdate { | .tn-postdate { | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 0; |
- | right: - | + | right: -125px; |
width: 100px; | width: 100px; | ||
+ | |||
padding: 0 10px 10px 10px; | padding: 0 10px 10px 10px; | ||
- | background: # | + | |
- | + | background: #05AB9A; | |
- | + | box-shadow: 1px 1px 2px #323232; | |
+ | |||
font-family: Arial, Helvetica, sans-serif; | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 25px; | ||
+ | text-align: center; | ||
} | } | ||
.tn-postdate a { | .tn-postdate a { | ||
text-decoration: none; | text-decoration: none; | ||
- | + | ||
font-style: italic; | font-style: italic; | ||
+ | line-height: 30px; | ||
+ | |||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
Line 56: | Line 68: | ||
padding: 0 10px; | padding: 0 10px; | ||
padding-right: 100px; | padding-right: 100px; | ||
- | margin: 0; | + | margin: 0.2em 0; |
+ | |||
+ | color: #C4221C; | ||
+ | |||
font-family: 'Boogaloo', cursive; | font-family: 'Boogaloo', cursive; | ||
font-size: 1.8em; | font-size: 1.8em; | ||
text-align: justify; | text-align: justify; | ||
- | |||
} | } | ||
Line 67: | Line 81: | ||
margin: 0; | margin: 0; | ||
text-align: justify; | text-align: justify; | ||
- | font-size: | + | font-size: 0.9em; |
line-height: 1.3em; | line-height: 1.3em; | ||
- | font-family: ' | + | font-family: 'Cabin', serif; |
} | } | ||
Line 95: | Line 109: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 10px; |
right: 0; | right: 0; | ||
width: 50px; | width: 50px; | ||
Line 107: | Line 121: | ||
.tn-text > a { | .tn-text > a { | ||
text-decoration: none; | text-decoration: none; | ||
- | |||
} | } | ||
.tn-text > a:link, .tn-text > a:visited { | .tn-text > a:link, .tn-text > a:visited { | ||
- | color: | + | color: #2880C5; |
- | + | ||
} | } | ||
.tn-text > a:hover { | .tn-text > a:hover { | ||
- | color: | + | color: #C4221C; |
- | + | ||
} | } | ||
Line 134: | Line 145: | ||
border: 1px solid; | border: 1px solid; | ||
text-align: center; | 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;
}