X-Git-Url: http://git.euphorik.ch/?p=euphorik.git;a=blobdiff_plain;f=css%2F1%2FpageMinichat.css;h=faea35d2c72142d0f85325f48dc35568ddb6399a;hp=c5602bc0acdd855355b00d88870ec7b74caa6d7f;hb=1f99e21a004d4dd93102bec8248af067c831386b;hpb=23657a6f0b0c17bf0c8b813bd9ac9b1f1fbc35b8 diff --git a/css/1/pageMinichat.css b/css/1/pageMinichat.css index c5602bc..faea35d 100755 --- a/css/1/pageMinichat.css +++ b/css/1/pageMinichat.css @@ -4,9 +4,10 @@ #page.minichat img { margin: 0px; - vertical-align: bottom; + vertical-align: middle; } +/***** La boite de sélection des smiles *****/ #smiles { text-align: center; border: 1px solid; @@ -24,10 +25,11 @@ opacity: 0.5; } +/***** La boite permettant de slaper/kicker/bannir une personne *****/ #outilsBan { border-width: 1px 1px 1px 1px; border-color: #ffffff; - border-style: solid; + border-style: dotted; padding: 2px; position: absolute; display: none; @@ -46,52 +48,48 @@ 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: 88px; + top: 77px; + line-height: 32px; } - #page.minichat #trollCourant .troll { cursor: pointer; font-style: italic } -#page.minichat .titreSmiles:hover { - background-color: #2d8800; -} - -#page.minichat form { +/***** Le formulaire pour poster un message *****/ +#page.minichat form#posterMessage { background-color: #e19671; padding-left: 10px; padding-bottom: 10px; } - -#page.minichat form p { +#page.minichat form#posterMessage p { margin: 0px; padding: 0px; } - -#page.minichat form .pseudo { +#page.minichat form#posterMessage .pseudo { margin-right: 5px; width: 12% } -#page.minichat form .message { +#page.minichat form#posterMessage input.message { margin-right: 5px; width: 75% } -#page.minichat form .return { +#page.minichat form#posterMessage .return { height: 16px; width: 32px; - background-image: url(../../img/css2/return.png); + background-image: url(../../img/css1/return.png); background-repeat: no-repeat; background-position: 5px 2px; vertical-align: top; margin-right: 5px; } -#page.minichat form .smiles { +#page.minichat form#posterMessage .smiles { height: 16px; width: 16px; background-image: url(../../img/css2/bouton_smiles.png); @@ -100,13 +98,31 @@ 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: 0px; border-style: solid; @@ -114,60 +130,134 @@ float: left; width: 100%; } +#page.minichat #conversations .titre { + border-top: 1px dashed white +} +#page.minichat #conversations .titre .barre { + 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 { + 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 +} -#page.minichat #conversations div.message { - border-left-width: 5px; - border-left-style: solid; - border-color: transparent; +/***** Les messages *****/ +#page.minichat div.message { padding-right: 5px; cursor: pointer; min-height: 18px; line-height: 18px; } - -#page.minichat #conversations div.messageImpair { +#page.minichat div.messageImpair { background-color: #fbeede; } - -#page.minichat #conversations div.messagePair { +#page.minichat div.messagePair { background-color: #f6dfc2; } - -#page.minichat #conversations div.cache { +#page.minichat div.cache { opacity: 0.3; /* Hack IE 7 */ filter: alpha(opacity = 30); zoom: 1 } - -#page.minichat #conversations div.reponse { - border-color: #bd7a11 +#page.minichat div.message.reponse .entete { + background-color: #bf2911 +} +#page.minichat div.message.reponse .delimitationEntete, +#page.minichat div.message.reponse .repondA { + background-image: url(../../img/css1/fleche_reponse.png); } -#page.minichat #conversations div.repondu { - border-color: #b711bd +#page.minichat div.message.repondu .entete { + background-color: #84196c } -#page.minichat #conversations div.proprietaire { - border-color: #bd1129 +#page.minichat div.message.repondu .delimitationEntete, +#page.minichat div.message.repondu .repondA { + background-image: url(../../img/css1/fleche_repondu.png); } -#page.minichat #conversations div.systeme { +#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; @@ -176,7 +266,6 @@ float: left; height: 18px; } - #page.minichat .delimitationEntete { z-index: 20; height: 18px; @@ -185,35 +274,25 @@ 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; margin-right: 2px; font-weight: bold; } - #page.minichat div.message.ekMaster .pseudo { color: #f0df95 } - #page.minichat div.message .pseudo .login { margin-left: 2px; - font-size: 8px; + font-size: 8px; } - -/* Ca marche pas :( -#page.minichat div.message .pseudo { - min-width: 50px; - height:100px; -}*/ - -#page.minichat #conversations .repondA { +#page.minichat .repondA { z-index: 5; height: 18px; margin-left: -7px; @@ -225,8 +304,7 @@ background-image: url(../../img/css1/fleche.png); background-repeat: no-repeat; } - -#page.minichat #conversations .delimitationRepondA { +#page.minichat .delimitationRepondA { z-index: 20; height: 18px; width: 7px; @@ -234,70 +312,34 @@ display: block; float: left; } - -#page.minichat #conversations .contenu { +#page.minichat .contenu { margin-left: 5px; } - -#page.minichat #conversations .extraire { +#page.minichat .outilsMess { float: right; - width: 13px; - height: 13px; - background-image: url(../../img/css1/extraction.png); - margin-top: 2px + display: none; } - -#page.minichat #conversations .extraire:hover { - background-image: url(../../img/css1/extraction_hover.png); +#page.minichat div.message:hover .outilsMess { + display: block } - -#page.minichat #conversations .titre { - text-align: center; - padding-right: 8px; - background-color: #e19671; - color: #ffffff; -} - -#page.minichat #conversations .titre .fermer { - margin-top: 1px; - margin-left: 5px; +#page.minichat .extraire { float: right; width: 13px; height: 13px; - background-image: url(../../img/css1/fermer_conv.png); - cursor: pointer; + background-image: url(../../img/css1/extraction.png); + margin-top: 2px; } -#page.minichat #conversations .titre .fermer:hover { - background-image: url(../../img/css1/fermer_conv_hover.png); -} - -#page.minichat #conversations .titre .lien { - margin-top: 1px; +#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/copier_conv.png); - cursor: pointer; -} -#page.minichat #conversations .titre .lien:hover { - background-image: url(../../img/css1/copier_conv_hover.png); -} - -#page.minichat #conversations .titre .next, -#page.minichat #conversations .titre .prev { - display: none; -} -#page.minichat #conversations .titre .next, -#page.minichat #conversations .titre .prev, -#page.minichat #conversations .titre .numPage { - background-color: #841919; - cursor: pointer; - padding-right: 5px; - padding-left: 5px; + background-image: url(../../img/css1/extraction_complete.png); + margin-top: 2px; + margin-right: 2px; } -#page.minichat #conversations .titre .next:hover, -#page.minichat #conversations .titre .prev:hover, -#page.minichat #conversations .titre .numPage:hover { - background-color: #cb2626 +#page.minichat .extraireCompletement:hover { + background-image: url(../../img/css1/extraction_complete_hover.png); } -