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.orderReverse form#posterMessage {
  94         padding-bottom: 10px;
  95 }
  96
  97 #page.minichat.orderChrono form#posterMessage {
  98         padding-top: 10px;
  99 }
 100
 101 #page.minichat form#posterMessage p {
 102    margin: 0px;
 103    padding: 0px;
 104 }
 105 #page.minichat form#posterMessage .pseudo {
 106    margin-right: 5px;
 107    width: 12%
 108 }
 109 #page.minichat form#posterMessage input.message {
 110    margin-right: 5px;
 111    width: 75%
 112 }
 113 #page.minichat form#posterMessage .return {
 114         height: 16px;
 115         width: 32px;
 116         background-image: url(img/return.png);
 117         background-repeat: no-repeat;
 118         background-position: 5px 2px;
 119         vertical-align: top;
 120         margin-right: 5px;
 121 }
 122 #page.minichat form#posterMessage .smiles {
 123         height: 16px;
 124         width: 16px;
 125         background-image: url(../../img/bouton_smiles.png);
 126         background-repeat: no-repeat;
 127         background-position: 2px 2px;
 128         vertical-align: top;
 129         margin-right: 5px;
 130 }
 131 /* La boite montrant les messages auquels l'utilisateur répond */
 132 #page.minichat form#posterMessage #repondA {
 133         background-color: #f0df95;
 134         border: #841919 1px solid;
 135    margin-right: 5px;
 136    padding-right: 2px;
 137    padding-left: 2px;
 138    cursor: pointer;
 139    display: none;
 140 }
 141 #page.minichat form#posterMessage #repondA .messages {
 142    position: absolute;
 143         border: #841919 1px solid;
 144    width: 50%;
 145    display:none;
 146 }
 147 #page.minichat form#posterMessage #repondA .messages div.message:hover #outilsMess {
 148    display: none
 149 }
 150
 151 /***** Les conversations *****/
 152 /* voir pour l'astuce css "float left" des conversations : http://www.quirksmode.org/css/clearing.html */
 153 #page.minichat #conversations {
 154         overflow: hidden;
 155         width: 100%;
 156    border-spacing: 0px;
 157    background-color:#E19671;
 158 }
 159 #page.minichat.orderChrono #conversations td
 160 {
 161     vertical-align: bottom
 162 }
 163 #page.minichat.orderReverse  #conversations td
 164 {
 165     vertical-align: top
 166 }
 167 #page.minichat.orderChrono #conversations .titre {
 168    border-bottom: 1px dashed white
 169 }
 170 #page.minichat.orderReverse #conversations .titre {
 171    border-top: 1px dashed white
 172 }
 173 #page.minichat #conversations .titre .nav {
 174         text-align: center;
 175         padding-right: 8px;
 176         background-color: #e19671;
 177         color: #ffffff;
 178 }
 179 /*#page.minichat #conversations .titre .nav .reduire {
 180         margin-top: 1px;
 181         margin-left: 5px;
 182         float: right;
 183         width: 13px;
 184         height: 13px;
 185         background-image: url(img/reduire_conv.png);
 186         cursor: pointer;
 187 }
 188 #page.minichat #conversations .titre .nav .reduire:hover {
 189         background-image: url(img/reduire_conv_hover.png);
 190 }*/
 191
 192 #page.minichat #conversations .titre .nav .fermer {
 193         margin-top: 1px;
 194         margin-left: 5px;
 195         float: right;
 196         width: 13px;
 197         height: 13px;
 198         background-image: url(img/fermer_conv.png);
 199         cursor: pointer;
 200 }
 201 #page.minichat #conversations .titre .nav .fermer:hover {
 202         background-image: url(img/fermer_conv_hover.png);
 203 }
 204 #page.minichat #conversations .titre .nav .creerLien {
 205         margin-top: 1px;
 206         margin-left: 5px;
 207         float: right;
 208         width: 13px;
 209         height: 13px;
 210         background-image: url(img/copier_conv.png);
 211         cursor: pointer;
 212 }
 213 #page.minichat #conversations .titre .nav .creerLien:hover {
 214         background-image: url(img/copier_conv_hover.png);
 215 }
 216 #page.minichat #conversations .titre .nav .next,
 217 #page.minichat #conversations .titre .nav .prev {
 218         display: none;
 219 }
 220 #page.minichat #conversations .titre .nav .next,
 221 #page.minichat #conversations .titre .nav .prev,
 222 #page.minichat #conversations .titre .nav .numPage {
 223         background-color: #841919;
 224         cursor: pointer;
 225         padding-right: 5px;
 226         padding-left: 5px;
 227 }
 228 #page.minichat #conversations .titre .nav .next:hover,
 229 #page.minichat #conversations .titre .nav .prev:hover,
 230 #page.minichat #conversations .titre .nav .numPage:hover {
 231         background-color: #cb2626
 232 }
 233
 234 /***** Les messages *****/
 235 #page.minichat div.message {
 236         padding-right: 5px;
 237         cursor: pointer;
 238         min-height: 18px;
 239         line-height: 18px;
 240 }
 241 #page.minichat div.messageImpair {
 242    background-color: #fbeede;
 243 }
 244 #page.minichat div.messagePair {
 245    background-color: #f6dfc2;
 246 }
 247 #page.minichat div.cache {
 248         opacity: 0.3;
 249
 250         /* Hack IE 7 */
 251         filter: alpha(opacity = 30);
 252         zoom: 1
 253 }
 254 #page.minichat div.message.reponse .entete {
 255         background-color: #846c19
 256 }
 257 #page.minichat div.message.reponse .delimitationEntete,
 258 #page.minichat div.message.reponse .repondA {
 259         background-image: url(img/fleche_reponse.png);
 260 }
 261 #page.minichat div.message.repondu .entete {
 262         background-color: #84196c
 263 }
 264 #page.minichat div.message.repondu .delimitationEntete,
 265 #page.minichat div.message.repondu .repondA {
 266         background-image: url(img/fleche_repondu.png);
 267 }
 268 #page.minichat div.message.proprietaire .entete {
 269         background-color: #350a0a
 270 }
 271 #page.minichat div.message.proprietaire .delimitationEntete,
 272 #page.minichat div.message.proprietaire .repondA {
 273         background-image: url(img/fleche_proprietaire.png);
 274 }
 275 #page.minichat div.message.repondEnEvidence {
 276         background-color: #fce476 !important
 277 }
 278 #page.minichat div.message.systeme {
 279         background-color: #f0df95
 280 }
 281 #page.minichat div.message a {
 282         font-weight: bold;
 283 }
 284 #page.minichat div.message .lienConv {
 285         color: #c62929;
 286         font-weight: bold;
 287         cursor: pointer
 288 }
 289 #page.minichat div.message .lienConv:hover {
 290         color: #e84747
 291 }
 292 #page.minichat .entete {
 293         z-index: 20;
 294         background-color: #841919;
 295         color: #f6dfc2;
 296         display: block;
 297         float: left;
 298         height: 18px;
 299 }
 300 #page.minichat .delimitationEntete {
 301         z-index: 20;
 302         height: 18px;
 303         width: 7px;
 304         background-image: url(img/fleche.png);
 305         display: block;
 306         float: left;
 307 }
 308 #page.minichat .date {
 309    margin-right: 3px;
 310    margin-left: 3px;
 311 }
 312 #page.minichat div.message .pseudo,
 313 /* FIXME : entre en conflit avec une règle précédente */
 314 #page.minichat form .pseudo {
 315    margin-left: 4px;
 316    margin-right: 2px;
 317    font-weight: bold;
 318 }
 319 #page.minichat div.message.ekMasterlight .pseudo {
 320         color: #f0df95
 321 }
 322 #page.minichat div.message.ekMasterheavy .pseudo {
 323    color: #fcd82f;
 324    padding-right: 15px;
 325    background: transparent url(img/marque_ek.png) no-repeat scroll right center
 326 }
 327
 328 #page.minichat div.message .pseudo .login {
 329    margin-left: 2px;
 330    font-size: 8px;
 331 }
 332 #page.minichat .repondA {
 333         z-index: 5;
 334         height: 18px;
 335         margin-left: -7px;
 336         padding-left: 9px;
 337         float: left;
 338         background-color: #cb2626;
 339         color: #ffffff;
 340         display: block;
 341         background-image: url(img/fleche.png);
 342         background-repeat: no-repeat;
 343 }
 344 #page.minichat .delimitationRepondA {
 345         z-index: 20;
 346         height: 18px;
 347         width: 7px;
 348         background-image: url(img/fleche_reponda.png);
 349         display: block;
 350         float: left;
 351 }
 352 #page.minichat .contenu {
 353         margin-left: 5px;
 354 }
 355 #page.minichat #outilsMess {
 356    width: 28px;
 357         position: absolute;
 358         padding-top: 1px;
 359         padding-right: 2px;
 360         display: none;
 361 }
 362 #page.minichat #outilsMess .extraire {
 363         float: right;
 364         width: 13px;
 365         height: 13px;
 366         background-image: url(img/extraction.png);
 367         margin-top: 2px;
 368 }
 369 #page.minichat #outilsMess .extraire:hover {
 370         background-image: url(img/extraction_hover.png);
 371 }
 372 #page.minichat #outilsMess .extraireCompletement {
 373         float: right;
 374         width: 13px;
 375         height: 13px;
 376         background-image: url(img/extraction_complete.png);
 377         margin-top: 2px;
 378     margin-right: 2px;
 379 }
 380 #page.minichat #outilsMess .extraireCompletement:hover {
 381         background-image: url(img/extraction_complete_hover.png);
 382 }