- new : template yoga, made by yoDan, helped by chrisaga for integration

  becomes the official template.


git-svn-id: http://piwigo.org/svn/trunk@859 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 175 insertions, 0 deletions

diff --git a/template/yoga/content.css b/template/yoga/content.css
new file mode 100644
index 000000000..ec060a3a0
--- /dev/null
+++ b/template/yoga/content.css
@@ -0,0 +1,175 @@
+/* $Id$ */
+#content {
+    margin-left: 24em;
+    margin-right: 1em;
+    margin-bottom: 1em; /* when it's longer than menu bar */
+}
+BODY#theAdminPage #content {
+    margin-left: 14em;
+}
+
+BODY#theCommentsPage #content,
+BODY#theRegisterPage #content,
+BODY#theIdentificationPage #content,
+BODY#theProfilePage #content,
+BODY#theSearchPage #content,
+BODY#theAboutPage #content,
+BODY#thePopuphelpPage #content,
+BODY#theNotificationPage #content
+{
+  margin: 1em;
+}
+
+#content H2 {
+    margin-bottom: 1ex;
+}
+
+#content H3 {
+    margin-bottom: 1ex;
+}
+
+#content UL.thumbnails {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;	/* to center the whole collection in #content */
+}
+#content UL.thumbnails LI { display: inline }
+
+#content UL.thumbnails SPAN {
+  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 {
+  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 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 {
+  position: relative;
+}
+* html #content UL.thumbnails SPAN.wrap {
+  overflow: visible;
+  position: absolute;
+  top: 50%;
+  left: 0px;		/* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+}
+* html #content UL.thumbnails IMG {
+  position: relative;
+  top: -50%;
+}
+
+
+#content .navigationBar, #content .additional_info {
+    margin: 10px 0;
+    text-align: center;
+}
+
+#content .pageNumberSelected {
+    font-style: italic;
+}
+
+#content .additional_info {
+    font-size: 110%;
+}
+
+#content FORM {
+    text-align: left;
+}
+
+/* content defaults */
+#content dl, dd { margin: 10px; }
+#content dt {
+  margin-bottom: 5px;
+  font-style: italic;
+  font-size: 110%;
+}
+
+/* actions */
+ul.categoryActions {
+  text-align: center;
+  margin: 1px 1px 0 0;
+  padding: 0;
+  text-indent: 0;
+}
+
+#content div.titrePage ul.categoryActions {
+  float: right;
+}
+
+#content ul.categoryActions>li {
+  display: inline;
+}
+
+#content ul.categoryActions a img, ul.categoryActions a {
+  border: none;
+}
+
+/* User comments */
+
+#content DIV.comment {
+  margin: 5px;
+  border: 1px solid gray;
+  min-height: 150px; /* maximum thumbnail height */
+}
+
+#content DIV.comment > A.illustration {
+  display: block;
+  position: absolute;
+  margin: 5px;
+}
+
+#content DIV.comment > A.illustration IMG {
+  border: 1px solid gray;
+}
+
+#content DIV.comment P.commentHeader {
+  text-align: right;
+  margin: 0.5em 0.5em 0 0;
+}
+
+#content DIV.comment UL.actions {
+  text-align: center;
+  margin: 0.2em;
+}
+
+#content DIV.comment > UL.actions > LI {
+  display: inline;
+}
+
+#content DIV.comment BLOCKQUOTE {
+  margin: 1em 1em 1em 150px; /* margin-left corresponds to maximum thumbnail width */
+  border: 1px solid #d3d3d3; 
+  border-left: 2px solid gray;
+  padding: 0.5em;
+}
+