styles/1/pageMinichat.css

   1 /* coding: utf-8 */
   2
   3 #page.minichat {
   4         padding: 0px;
   5 }
   6
   7 #page.minichat img {
   8    line-height: normal;
   9         vertical-align: middle;
  10 }
  11
  12 /***** L'aide sur les commandes *****/
  13 #aideCommandes h1 {
  14         font-size: 14px;
  15         font-weight: bold;
  16 }
  17 #aideCommandes .usage {
  18         font-weight: bold;
  19 }
  20 #aideCommandes li {
  21         list-style-type: none;
  22 }
  23
  24 /***** La boite de sélection des smiles *****/
  25 #smiles {
  26         text-align: center;
  27         border: 1px solid;
  28         border-color: #ffffff;
  29         background-color: #f6dfc2;
  30         margin-bottom: 10px;
  31         padding: 1px;
  32         width: 140px;
  33         position: absolute;
  34         display: none
  35 }
  36 #smiles img {
  37         margin: 1px;
  38         cursor: pointer;
  39         opacity: 0.5;
  40 }
  41
  42 /***** La boite permettant de slaper/kicker/bannir une personne *****/
  43 #outilsBan {
  44         border-width: 1px 1px 1px 1px;
  45         border-color: #ffffff;
  46         border-style: dotted;
  47         padding: 2px;
  48         position: absolute;
  49         display: none;
  50 }
  51 #outilsBan img,
  52 #outilsBan form {
  53         float: right;
  54         cursor: pointer
  55 }
  56 #outilsBan p {
  57         font-size: 2px;
  58 }
  59 #outilsBan input {
  60         font-size: 9px;
  61         margin-top: 1px;
  62         margin-left: 1px
  63 }
  64
  65 /***** Le troll courant affiché en haut de la page *****/
  66 #page.minichat #trollCourant {
  67         color: #FFFFFF;
  68         position: absolute;
  69         z-index: 20;
  70         left: 140px;
  71         top: 77px;
  72         line-height: 32px;
  73 }
  74
  75 #page.minichat #trollCourant a:link,  #page.minichat #trollCourant a:visited {
  76         color: #f85b31;
  77 }
  78  #page.minichat #trollCourant a:hover,  #page.minichat #trollCourant a:active {
  79         color: #f87e5d;
  80 }
  81
  82 #page.minichat #trollCourant .troll {
  83         cursor: pointer;
  84         font-style: italic
  85 }
  86
  87 /***** Le formulaire pour poster un message *****/
  88 #page.minichat form#posterMessage {
  89         background-color: #e19671;
  90         padding-left: 10px;
  91 }
  92
  93 #page.minichat form#posterMessage p > input,
  94 #page.minichat form#posterMessage p > span,
  95 #page.minichat form#posterMessage p > button{
  96         vertical-align: middle;
  97 }
  98
  99 #page.minichat.orderReverse form#posterMessage {
 100         padding-bottom: 10px;
 101 }
 102
 103 #page.minichat.orderChrono form#posterMessage {
 104         padding-top: 10px;
 105 }
 106
 107 #page.minichat form#posterMessage p {
 108    margin: 0px;
 109    padding: 0px;
 110 }
 111 #page.minichat form#posterMessage .nick {
 112    margin-right: 5px;
 113    width: 12%
 114 }
 115 #page.minichat form#posterMessage input.message {
 116    margin-right: 5px;
 117    width: 75%
 118 }
 119 #page.minichat form#posterMessage .return {
 120         height: 16px;
 121         width: 32px;
 122         background-image: url(img/return.png);
 123         background-repeat: no-repeat;
 124         background-position: 5px 2px;
 125         margin-right: 5px;
 126 }
 127 #page.minichat form#posterMessage .smiles {
 128         height: 16px;
 129         width: 16px;
 130         background-image: url(../../img/bouton_smiles.png);
 131         background-repeat: no-repeat;
 132         background-position: 2px 2px;
 133         margin-right: 5px;
 134 }
 135 /* La boite montrant les messages auquels l'utilisateur répond */
 136 #page.minichat form#posterMessage #repondA {
 137         background-color: #f0df95;
 138         border: #841919 1px solid;
 139    margin-right: 5px;
 140    padding-right: 2px;
 141    padding-left: 2px;
 142    cursor: pointer;
 143    display: none;
 144 }
 145 #page.minichat form#posterMessage #repondA .messages {
 146    position: absolute;
 147         border: #841919 1px solid;
 148    width: 50%;
 149    display:none;
 150 }
 151 #page.minichat form#posterMessage #repondA .messages div.message:hover #outilsMess {
 152    display: none
 153 }
 154
 155 /***** Les conversations *****/
 156 /* voir pour l'astuce css "float left" des conversations : http://www.quirksmode.org/css/clearing.html */
 157 #page.minichat #conversations {
 158         overflow: hidden;
 159         width: 100%;
 160    border-spacing: 0px;
 161    background-color:#E19671;
 162 }
 163 #page.minichat.orderChrono #conversations td
 164 {
 165     vertical-align: bottom
 166 }
 167 #page.minichat.orderReverse  #conversations td
 168 {
 169     vertical-align: top
 170 }
 171 #page.minichat.orderChrono #conversations .titre {
 172    border-bottom: 1px dashed white
 173 }
 174 #page.minichat.orderReverse #conversations .titre {
 175    border-top: 1px dashed white
 176 }
 177 #page.minichat #conversations .titre .nav {
 178         text-align: center;
 179         padding-right: 8px;
 180         background-color: #e19671;
 181         color: #ffffff;
 182 }
 183 /*#page.minichat #conversations .titre .nav .reduire {
 184         margin-top: 1px;
 185         margin-left: 5px;
 186         float: right;
 187         width: 13px;
 188         height: 13px;
 189         background-image: url(img/reduire_conv.png);
 190         cursor: pointer;
 191 }
 192 #page.minichat #conversations .titre .nav .reduire:hover {
 193         background-image: url(img/reduire_conv_hover.png);
 194 }*/
 195
 196 #page.minichat #conversations .titre .nav .close {
 197         margin-top: 1px;
 198         margin-left: 5px;
 199         float: right;
 200         width: 13px;
 201         height: 13px;
 202         background-image: url(img/close_conv.png);
 203         cursor: pointer;
 204 }
 205 #page.minichat #conversations .titre .nav .close:hover {
 206         background-image: url(img/close_conv_hover.png);
 207 }
 208 #page.minichat #conversations .titre .nav .creerLien {
 209         margin-top: 1px;
 210         margin-left: 5px;
 211         float: right;
 212         width: 13px;
 213         height: 13px;
 214         background-image: url(img/copier_conv.png);
 215         cursor: pointer;
 216 }
 217 #page.minichat #conversations .titre .nav .creerLien:hover {
 218         background-image: url(img/copier_conv_hover.png);
 219 }
 220 #page.minichat #conversations .titre .nav .next,
 221 #page.minichat #conversations .titre .nav .prev {
 222         display: none;
 223 }
 224 #page.minichat #conversations .titre .nav .next,
 225 #page.minichat #conversations .titre .nav .prev,
 226 #page.minichat #conversations .titre .nav .numPage {
 227         background-color: #841919;
 228         cursor: pointer;
 229         padding-right: 5px;
 230         padding-left: 5px;
 231 }
 232 #page.minichat #conversations .titre .nav .next:hover,
 233 #page.minichat #conversations .titre .nav .prev:hover,
 234 #page.minichat #conversations .titre .nav .numPage:hover {
 235         background-color: #cb2626
 236 }
 237
 238 /***** Les messages *****/
 239 #page.minichat div.message {
 240         padding-right: 5px;
 241         cursor: pointer;
 242         min-height: 18px;
 243         line-height: 18px;
 244 }
 245 #page.minichat div.messageImpair {
 246    background-color: #fbeede;
 247 }
 248 #page.minichat div.messagePair {
 249    background-color: #f6dfc2;
 250 }
 251 #page.minichat div.cache {
 252         opacity: 0.3;
 253
 254         /* Hack IE 7 */
 255         filter: alpha(opacity = 30);
 256         zoom: 1
 257 }
 258 #page.minichat div.message.reponse .entete {
 259         background-color: #846c19
 260 }
 261 #page.minichat div.message.reponse .delimitationEntete,
 262 #page.minichat div.message.reponse .repondA {
 263         background-image: url(img/fleche_reponse.png);
 264 }
 265 #page.minichat div.message.repondu .entete {
 266         background-color: #84196c
 267 }
 268 #page.minichat div.message.repondu .delimitationEntete,
 269 #page.minichat div.message.repondu .repondA {
 270         background-image: url(img/fleche_repondu.png);
 271 }
 272 #page.minichat div.message.proprietaire .entete {
 273         background-color: #350a0a
 274 }
 275 #page.minichat div.message.proprietaire .delimitationEntete,
 276 #page.minichat div.message.proprietaire .repondA {
 277         background-image: url(img/fleche_proprietaire.png);
 278 }
 279 #page.minichat div.message.repondEnEvidence {
 280         background-color: #fce476 !important
 281 }
 282 #page.minichat div.message.systeme {
 283         background-color: #f0df95
 284 }
 285 #page.minichat div.message a {
 286         font-weight: bold;
 287 }
 288 #page.minichat div.message .conversationLink {
 289         color: #c62929;
 290         font-weight: bold;
 291         cursor: pointer
 292 }
 293 #page.minichat div.message .conversationLink:hover {
 294         color: #e84747
 295 }
 296 #page.minichat .entete {
 297         z-index: 20;
 298         background-color: #841919;
 299         color: #f6dfc2;
 300         display: block;
 301         float: left;
 302         height: 18px;
 303 }
 304 #page.minichat .delimitationEntete {
 305         z-index: 20;
 306         height: 18px;
 307         width: 7px;
 308         background-image: url(img/fleche.png);
 309         display: block;
 310         float: left;
 311 }
 312 #page.minichat .date {
 313    margin-right: 3px;
 314    margin-left: 3px;
 315 }
 316 #page.minichat div.message .nick,
 317 /* FIXME : entre en conflit avec une règle précédente */
 318 #page.minichat form .nick {
 319    margin-left: 4px;
 320    margin-right: 2px;
 321    font-weight: bold;
 322 }
 323 #page.minichat div.message.ekMasterlight .nick {
 324         color: #f0df95
 325 }
 326 #page.minichat div.message.ekMasterheavy .nick {
 327    color: #fcd82f;
 328    padding-right: 15px;
 329    background: transparent url(img/marque_ek.png) no-repeat scroll right center
 330 }
 331
 332 #page.minichat div.message .nick .login {
 333    margin-left: 2px;
 334    font-size: 8px;
 335 }
 336 #page.minichat .repondA {
 337         z-index: 5;
 338         height: 18px;
 339         margin-left: -7px;
 340         padding-left: 9px;
 341         float: left;
 342         background-color: #cb2626;
 343         color: #ffffff;
 344         display: block;
 345         background-image: url(img/fleche.png);
 346         background-repeat: no-repeat;
 347 }
 348 #page.minichat .delimitationRepondA {
 349         z-index: 20;
 350         height: 18px;
 351         width: 7px;
 352         background-image: url(img/fleche_reponda.png);
 353         display: block;
 354         float: left;
 355 }
 356 #page.minichat .contenu {
 357         margin-left: 5px;
 358 }
 359 #page.minichat #outilsMess {
 360    width: 28px;
 361         position: absolute;
 362         padding-top: 1px;
 363         padding-right: 2px;
 364         display: none;
 365 }
 366 #page.minichat #outilsMess .extraire {
 367         float: right;
 368         width: 13px;
 369         height: 13px;
 370         background-image: url(img/extraction.png);
 371         margin-top: 2px;
 372 }
 373 #page.minichat #outilsMess .extraire:hover {
 374         background-image: url(img/extraction_hover.png);
 375 }
 376 #page.minichat #outilsMess .extraireCompletement {
 377         float: right;
 378         width: 13px;
 379         height: 13px;
 380         background-image: url(img/extraction_complete.png);
 381         margin-top: 2px;
 382     margin-right: 2px;
 383 }
 384 #page.minichat #outilsMess .extraireCompletement:hover {
 385         background-image: url(img/extraction_complete_hover.png);
 386 }