aboutsummaryrefslogtreecommitdiffstats
path: root/template/yoga/content.css
diff options
context:
space:
mode:
Diffstat (limited to 'template/yoga/content.css')
-rw-r--r--template/yoga/content.css60
1 files changed, 32 insertions, 28 deletions
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 8ed3d1189..763c78105 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -29,8 +29,29 @@ BODY#theNotificationPage #content
margin-bottom: 1ex;
}
-/* Thumbnail "elastic" layout */
+/* Thumbnails customization */
+#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A {
+ width: 140px; /* max thumbnail width + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+ height: 140px; /* max thumbnail height + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+ border: 1px solid #aaaaaa; /* thumbnails border color and style */
+ -moz-border-radius: 4px; /* round corners with Geko */
+ border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
+}
+#content UL.thumbnails SPAN.wrap2:hover {
+ border-color: yellow; /* thumbnails border color when mouse cursor is over it */
+}
+#content UL.thumbnails SPAN.thumbLegend {
+ font-size: 80%; /* font size */
+ height: 3em; /* max legend height (don't set auto to be Geko friendly)*/
+ display: block; /* display: none; if you don't want legend */
+ overflow: hidden; /* oversized legend is clipped */
+}
+/* Thumbnail "elastic" layout */
#content UL.thumbnails {
margin: 0;
padding: 0;
@@ -39,59 +60,42 @@ BODY#theNotificationPage #content
}
#content UL.thumbnails LI { display: inline }
-#content UL.thumbnails SPAN {
+#content UL.thumbnails SPAN.wrap1 {
margin: 0 5px 5px 5px;
- /*width: 130px; 128px + 2 * 1px if the SPAN has a border of 1px */
- width: 128px; /* we can use the same size as well */
display: table-cell; display: inline-table; display: inline-block;
vertical-align: top; /* OK with Opera and IE6 not Geko */
text-align: center; /* to center the thumbnail and legend in Geko/Opera */
- font-size: 80%;
}
-#content UL.thumbnails SPAN SPAN {
+#content UL.thumbnails SPAN.wrap2 {
margin: 0; /* important reset the margins */
- border: 1px solid #aaaaaa;
- width: 128px; /* fixed size again */
- height: 128px; /* fixed size again */
display: table-cell; /* block prevents vertical-align here */
vertical-align: middle; /* Ok with Opera and Geko not IE6 */
}
-#content UL.thumbnails SPAN.wrap {
- border: none;
- height: auto; /* important for vertical centering */
- display: block; /* important */
- overflow: hidden; /* everridden by specific IE6 rule below */
- margin-top: auto; /* to make vertical-align work in Geko and Opera */
- margin-bottom: auto; /* to make vertical-align work in Geko and Opera */
+#content UL.thumbnails SPAN.wrap2 A {
+ display: block;
+ border-bottom: none;
}
#content UL.thumbnails IMG {
margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
}
-/* fix Geko's lack of good willing in vertical-align: top */
-/* Too dirty : have to find something better */
-/*#content UL.thumbnails>LI>SPAN{*/
-/* height: 170px;*/ /* unfortunately min-height doesn't work here */
-/*}*/
/* fix IE with another layout */
-* html #content UL.thumbnails SPAN {
- overflow: hidden; /* keep it there: not needed by Geko, buggy with Opera */
-}
-* html #content UL.thumbnails SPAN SPAN {
+* html #content UL.thumbnails SPAN.wrap2 {
+ display: block;
position: relative;
+ text-align: left;
}
-* html #content UL.thumbnails SPAN.wrap {
+* html #content UL.thumbnails SPAN.wrap2 A {
overflow: visible;
position: absolute;
top: 50%;
- left: 0px; /* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+ text-align: center;
}
* html #content UL.thumbnails IMG.thumbnail {
position: relative;
top: -50%;
}
-
#content .navigationBar, #content .additional_info {
margin: 10px 0;
text-align: center;