ADD possibilité d'inverser le sens du chat

[euphorik.git] / css / 1 / pageMinichat.css

diff --git a/css/1/pageMinichat.css b/css/1/pageMinichat.css
index 752ef9c..946c06c 100755 (executable)
--- a/css/1/pageMinichat.css
+++ b/css/1/pageMinichat.css
@@ -66,8 +66,16 @@
 #page.minichat form#posterMessage {
        background-color: #e19671;
        padding-left: 10px;
+}
+
+#page.minichat.orderReverse form#posterMessage {
        padding-bottom: 10px;
 }
+
+#page.minichat.orderChrono form#posterMessage {
+       padding-top: 10px;
+}
+
 #page.minichat form#posterMessage p {
    margin: 0px;
    padding: 0px;
@@ -121,31 +129,32 @@
 /* voir pour l'astuce css "float left" des conversations : http://www.quirksmode.org/css/clearing.html */
 #page.minichat #conversations {        
        overflow: hidden;
-       width: 100%
-}
-#page.minichat #conversations .conversation {
-       border-width: 0px;
-       border-style: solid;
-       border-color: white;
-       float: left;
        width: 100%;
+   border-spacing: 0px;
+   background-color:#E19671;
 }
-#page.minichat #conversations .titre {
+#page.minichat.orderChrono #conversations td
+{
+    vertical-align: bottom
+}
+#page.minichat.orderReverse  #conversations td
+{
+    vertical-align: top
+}
+#page.minichat.orderChrono #conversations .titre {
+   border-bottom: 1px dashed white
+}
+#page.minichat.orderReverse #conversations .titre {
    border-top: 1px dashed white
 }
-#page.minichat #conversations .titre .barre {
+#page.minichat #conversations .titre .nav {
        text-align: center;
        padding-right: 8px;
        background-color: #e19671;
        color: #ffffff;
 }
 
-#page.minichat #conversations .titre .extraire,
-#page.minichat #conversations .titre .extraireCompletement {
-       display: none
-}
-
-#page.minichat #conversations .titre .barre .reduire {
+#page.minichat #conversations .titre .nav .reduire {
        margin-top: 1px;
        margin-left: 5px;
        float: right;
@@ -154,11 +163,11 @@
        background-image: url(../../img/css1/reduire_conv.png);
        cursor: pointer;
 }
-#page.minichat #conversations .titre .barre .reduire:hover {
+#page.minichat #conversations .titre .nav .reduire:hover {
        background-image: url(../../img/css1/reduire_conv_hover.png);
 }      
 
-#page.minichat #conversations .titre .barre .fermer {
+#page.minichat #conversations .titre .nav .fermer {
        margin-top: 1px;
        margin-left: 5px;
        float: right;
@@ -167,10 +176,10 @@
        background-image: url(../../img/css1/fermer_conv.png);
        cursor: pointer;
 }
-#page.minichat #conversations .titre .barre .fermer:hover {
+#page.minichat #conversations .titre .nav .fermer:hover {
        background-image: url(../../img/css1/fermer_conv_hover.png);
 }      
-#page.minichat #conversations .titre .barre .lien {
+#page.minichat #conversations .titre .nav .lien {
        margin-top: 1px;
        margin-left: 5px;
        float: right;
@@ -179,24 +188,24 @@
        background-image: url(../../img/css1/copier_conv.png);
        cursor: pointer;
 }
-#page.minichat #conversations .titre .barre .lien:hover {
+#page.minichat #conversations .titre .nav .lien:hover {
        background-image: url(../../img/css1/copier_conv_hover.png);
 }      
-#page.minichat #conversations .titre .barre .next,
-#page.minichat #conversations .titre .barre .prev {
+#page.minichat #conversations .titre .nav .next,
+#page.minichat #conversations .titre .nav .prev {
        display: none;
 }
-#page.minichat #conversations .titre .barre .next,
-#page.minichat #conversations .titre .barre .prev,
-#page.minichat #conversations .titre .barre .numPage {
+#page.minichat #conversations .titre .nav .next,
+#page.minichat #conversations .titre .nav .prev,
+#page.minichat #conversations .titre .nav .numPage {
        background-color: #841919;
        cursor: pointer;
        padding-right: 5px;
        padding-left: 5px;
 }
-#page.minichat #conversations .titre .barre .next:hover,
-#page.minichat #conversations .titre .barre .prev:hover,
-#page.minichat #conversations .titre .barre .numPage:hover {
+#page.minichat #conversations .titre .nav .next:hover,
+#page.minichat #conversations .titre .nav .prev:hover,
+#page.minichat #conversations .titre .nav .numPage:hover {
        background-color: #cb2626
 }