ADD début de la réduction des conversations
[euphorik.git] / css / 1 / pageMinichat.css
index 182b9b0..faea35d 100755 (executable)
+#page.minichat {
+       padding: 0px;
+}
 
 #page.minichat img {
        margin: 0px;
-       vertical-align: bottom;
+       vertical-align: middle;
 }
 
-#page.minichat #smiles {
-       border-width: 1px 0px 1px 0px;
-       border-color: #253f18;
-       border-style: solid;
+/***** La boite de sélection des smiles *****/
+#smiles {
+       text-align: center;
+       border: 1px solid;
+       border-color: #ffffff;
+       background-color: #f6dfc2;
        margin-bottom: 10px;
        padding: 1px;
-       height: 100%;
-       background-color: #0c2003;
-}
-\r
-#page.minichat #smiles img {\r
-       cursor: pointer;\r
-       opacity: 0.5;\r
-}\r
+       width: 140px;
+       position: absolute;
+       display: none
+}
+#smiles img {
+       margin: 1px;
+       cursor: pointer;
+       opacity: 0.5;
+}
 
-#page.minichat .titreSmiles:hover {
-       background-color: #2d8800;
-}\r
-\r
-#page.minichat form {\r
-   text-align: left;\r
-   margin-bottom: 15px;\r
-   padding-left: 10px;\r
-}\r
-\r
-#page.minichat form .pseudo {\r
-   margin-right: 5px;\r
-}\r
-\r
-#page.minichat form .message {\r
-   margin-right: 5px;\r
-}\r
-\r
-#page.minichat form .return {\r
-       height: 15px;\r
-       width: 32px;\r
-       background-image: url(../../img/css1/return.png);\r
-       background-repeat: no-repeat;\r
-       background-position: 5px 2px;\r
-       vertical-align: top;\r
+/***** La boite permettant de slaper/kicker/bannir une personne *****/
+#outilsBan {
+       border-width: 1px 1px 1px 1px;
+       border-color: #ffffff;
+       border-style: dotted;
+       padding: 2px;
+       position: absolute;
+       display: none;
+}
+#outilsBan img,
+#outilsBan form {
+       float: right;
+       cursor: pointer
+}
+#outilsBan p {
+       font-size: 2px;
+}
+#outilsBan input {
+       font-size: 9px;
+       margin-top: 1px;
+       margin-left: 1px
+}
+
+/***** Le troll courant affiché en haut de la page *****/
+#page.minichat #trollCourant {
+       color: #FFFFFF;
+       position: absolute;
+       z-index: 20;
+       left: 140px;
+       top: 77px;
+       line-height: 32px;
+}
+#page.minichat #trollCourant .troll {
+       cursor: pointer;
+       font-style: italic
+}
+
+/***** Le formulaire pour poster un message *****/
+#page.minichat form#posterMessage {
+       background-color: #e19671;
+       padding-left: 10px;
+       padding-bottom: 10px;
+}
+#page.minichat form#posterMessage p {
+   margin: 0px;
+   padding: 0px;
+}
+#page.minichat form#posterMessage .pseudo {
+   margin-right: 5px;
+   width: 12%
+}
+#page.minichat form#posterMessage input.message {
+   margin-right: 5px;
+   width: 75%
+}
+#page.minichat form#posterMessage .return {
+       height: 16px;
+       width: 32px;
+       background-image: url(../../img/css1/return.png);
+       background-repeat: no-repeat;
+       background-position: 5px 2px;
+       vertical-align: top;
+       margin-right: 5px;
+}
+#page.minichat form#posterMessage .smiles {
+       height: 16px;
+       width: 16px;
+       background-image: url(../../img/css2/bouton_smiles.png);
+       background-repeat: no-repeat;
+       background-position: 2px 2px;
+       vertical-align: top;
+       margin-right: 5px;
+}
+#page.minichat form#posterMessage #repondA {
+       background-color: #f0df95; 
+       border: #841919 1px solid;
+   margin-right: 5px;
+   padding-right: 2px;
+   padding-left: 2px;
+   cursor: pointer;
+   display: none;
+}
+#page.minichat form#posterMessage #repondA .messages {
+   position: absolute;
+       border: #841919 1px solid;
+   width: 50%;
+   display:none;
+}
+#page.minichat form#posterMessage #repondA .messages div.message:hover .outilsMess {
+   display: none
 }
 
+/***** Les conversations *****/
+/* 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: 2px;
+       border-width: 0px;
        border-style: solid;
-       border-color: white
-}\r
-
-#page.minichat #conversations div.message {    \r
-       border-left-width: 5px;\r
-       border-left-style: solid;\r
-       border-color: transparent;
-       text-align: left;
+       border-color: white;
+       float: left;
+       width: 100%;
+}
+#page.minichat #conversations .titre {
+   border-top: 1px dashed white
+}
+#page.minichat #conversations .titre .barre {
+       text-align: center;
        padding-right: 8px;
-       padding-left: 4px;\r
+       background-color: #e19671;
+       color: #ffffff;
+}
+
+#page.minichat #conversations .titre .extraire,
+#page.minichat #conversations .titre .extraireCompletement {
+       display: none
+}
+
+#page.minichat #conversations .titre .barre .reduire {
+       margin-top: 1px;
+       margin-left: 5px;
+       float: right;
+       width: 13px;
+       height: 13px;
+       background-image: url(../../img/css1/reduire_conv.png);
+       cursor: pointer;
+}
+#page.minichat #conversations .titre .barre .reduire:hover {
+       background-image: url(../../img/css1/reduire_conv_hover.png);
+}      
+
+#page.minichat #conversations .titre .barre .fermer {
+       margin-top: 1px;
+       margin-left: 5px;
+       float: right;
+       width: 13px;
+       height: 13px;
+       background-image: url(../../img/css1/fermer_conv.png);
+       cursor: pointer;
+}
+#page.minichat #conversations .titre .barre .fermer:hover {
+       background-image: url(../../img/css1/fermer_conv_hover.png);
+}      
+#page.minichat #conversations .titre .barre .lien {
+       margin-top: 1px;
+       margin-left: 5px;
+       float: right;
+       width: 13px;
+       height: 13px;
+       background-image: url(../../img/css1/copier_conv.png);
+       cursor: pointer;
+}
+#page.minichat #conversations .titre .barre .lien:hover {
+       background-image: url(../../img/css1/copier_conv_hover.png);
+}      
+#page.minichat #conversations .titre .barre .next,
+#page.minichat #conversations .titre .barre .prev {
+       display: none;
+}
+#page.minichat #conversations .titre .barre .next,
+#page.minichat #conversations .titre .barre .prev,
+#page.minichat #conversations .titre .barre .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 {
+       background-color: #cb2626
+}
+
+/***** Les messages *****/
+#page.minichat div.message {
+       padding-right: 5px;
        cursor: pointer;
+       min-height: 18px;
+       line-height: 18px;
+}
+#page.minichat div.messageImpair {
+   background-color: #fbeede;
+}
+#page.minichat div.messagePair {
+   background-color: #f6dfc2;
 }
-\r
-#page.minichat #conversations div.messageImpair {\r
-   background-color: #05002c;\r
-}\r
-\r
-#page.minichat #conversations div.messagePair {\r
-   background-color: #080047;\r
-}
-\r
-/* Il n'y a plus de mise en evidence
-#page.minichat #conversations div.miseEnEvidenceReponse {
-       background-color: #bd7a11;
-}
-#page.minichat #conversations div.miseEnEvidenceCourant {
-       background-color: #bd1129;
-}
-#page.minichat #conversations div.miseEnEvidenceConversation {
-       background-color: #b711bd;
-}*/\r
+#page.minichat div.cache {
+       opacity: 0.3;
        
-#page.minichat #conversations div.cache {
-       opacity: 0.3;\r
-       \r
-       /* Hack IE 7 */ \r
-       filter: alpha(opacity = 30);\r
+       /* Hack IE 7 */ 
+       filter: alpha(opacity = 30);
        zoom: 1
 }
-\r
-#page.minichat #conversations div.reponse {\r
-       border-color: #bd7a11\r
-}\r
-#page.minichat #conversations div.repondu {\r
-       border-color: #b711bd   \r
-}\r
-#page.minichat #conversations div.proprietaire {\r
-       border-color: #bd1129\r
-}
-#page.minichat #conversations div.systeme {
-       background-color: #555555
-}\r
-\r
-#page.minichat div.message a {\r
-       font-weight: bold;\r
-}\r
-\r
-#page.minichat .date {\r
-   display: inline;\r
-   color: #fd913b;\r
-   margin-right: 3px;\r
-   margin-left: 3px;\r
-}\r
-\r
-#page.minichat div.message .pseudo,\r
-#page.minichat form .pseudo {\r
-   display: inline;\r
-   margin-left: 4px;\r
-   margin-right: 2px;\r
-   font-weight: bold;\r
-   color: #76ff33;\r
+#page.minichat div.message.reponse .entete {
+       background-color: #bf2911
 }
-
-#page.minichat div.systeme .pseudo {
-       color: #CCCCCC
-}\r
-\r
-/* Ca marche pas :(\r
-#page.minichat div.message .pseudo {\r
-       min-width: 50px;\r
-       height:100px;\r
-}*/\r
-
-#page.minichat #conversations .repondA {
-   display: inline;
+#page.minichat div.message.reponse .delimitationEntete,
+#page.minichat div.message.reponse .repondA {
+       background-image: url(../../img/css1/fleche_reponse.png);
+}
+#page.minichat div.message.repondu .entete {
+       background-color: #84196c
+}
+#page.minichat div.message.repondu .delimitationEntete,
+#page.minichat div.message.repondu .repondA {
+       background-image: url(../../img/css1/fleche_repondu.png);
+}
+#page.minichat div.message.proprietaire .entete {
+       background-color: #31732f
+}
+#page.minichat div.message.proprietaire .delimitationEntete,
+#page.minichat div.message.proprietaire .repondA {
+       background-image: url(../../img/css1/fleche_proprietaire.png);
+}
+#page.minichat div.message.repondEnEvidence {
+       background-color: #fce476
+}
+#page.minichat div.message.systeme {
+       background-color: #f0df95
+}
+#page.minichat div.message a {
+       font-weight: bold;
+}
+#page.minichat div.message .lienConv {
+       color: #c62929;
+       font-weight: bold;
+       cursor: pointer
+}
+#page.minichat div.message .lienConv:hover {
+       color: #e84747
+}
+#page.minichat .entete {
+       z-index: 20;
+       background-color: #841919;
+       color: #f6dfc2;
+       display: block;
+       float: left;
+       height: 18px;
+}
+#page.minichat .delimitationEntete {
+       z-index: 20;
+       height: 18px;
+       width: 7px;
+       background-image: url(../../img/css1/fleche.png);
+       display: block;
+       float: left;
+}
+#page.minichat .date {
+   margin-right: 3px;
+   margin-left: 3px;
+}
+#page.minichat div.message .pseudo,
+/* FIXME : entre en conflit avec une règle précédente */
+#page.minichat form .pseudo {
    margin-left: 4px;
-   color: #bd7a11
+   margin-right: 2px;
+   font-weight: bold;
 }
-\r
-#page.minichat #conversations .contenu {\r
-   display: inline;\r
+#page.minichat div.message.ekMaster .pseudo {
+       color: #f0df95
 }
-
-#page.minichat #conversations .extraire {
+#page.minichat div.message .pseudo .login {
+   margin-left: 2px;
+   font-size: 8px; 
+}
+#page.minichat .repondA {
+       z-index: 5;
+       height: 18px;
+       margin-left: -7px;
+       padding-left: 9px;
+       float: left;
+       background-color: #cb2626; 
+       color: #ffffff;
+       display: block;
+       background-image: url(../../img/css1/fleche.png);
+       background-repeat: no-repeat;
+}
+#page.minichat .delimitationRepondA {
+       z-index: 20;
+       height: 18px;
+       width: 7px;
+       background-image: url(../../img/css1/fleche_reponda.png);
+       display: block;
+       float: left;
+}
+#page.minichat .contenu {
+       margin-left: 5px;
+}
+#page.minichat .outilsMess {
        float: right;
-       padding-right: 2px;
-       padding-left: 2px;
-       background-color: #4f5519;
+       display: none;
+}
+#page.minichat div.message:hover .outilsMess {
+       display: block
+}
+#page.minichat .extraire {
+       float: right;
+       width: 13px;
+       height: 13px;
+       background-image: url(../../img/css1/extraction.png);
+       margin-top: 2px;
+}
+#page.minichat .extraire:hover {
+       background-image: url(../../img/css1/extraction_hover.png);
+}
+#page.minichat .extraireCompletement {
+       float: right;
+       width: 13px;
+       height: 13px;
+       background-image: url(../../img/css1/extraction_complete.png);
+       margin-top: 2px;
+   margin-right: 2px;
+}
+#page.minichat .extraireCompletement:hover {
+       background-image: url(../../img/css1/extraction_complete_hover.png);
 }
-
-#page.minichat #conversations .extraire:hover {
-       background-color: #818c27
-}\r
-\r
-#page.minichat #pages {\r
-       margin-top: 10px;\r
-}\r
-\r
-#page.minichat #pages span {\r
-       padding-right : 5px;\r
-       padding-left: 5px;\r
-       color: #7664ff;\r
-       cursor:pointer;\r
-}\r
-\r
-#page.minichat #pages span.pageCourante {\r
-       font-weight: bold;\r
-       font-size: 150%;\r
-}\r
-\r
-#page.minichat #pages span:hover {\r
-       font-size: 150%;\r
-       color: #ffad0f;\r
-}\r
-\r