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