jappixmini/jappix/css/myinfos.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the my-infos CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 31/08/11
  11
  12 */
  13
  14 #my-infos {
  15         background-color: rgb(20,20,20);
  16         background-color: rgba(20,20,20,0.85);
  17         color: #919191;
  18         margin-top: 8px;
  19         padding: 15px 6px 6px 6px;
  20         border-radius: 4px;
  21         -moz-border-radius: 4px;
  22         -webkit-border-radius: 4px;
  23         box-shadow: 0 0 6px #5c5c5c;
  24         -moz-box-shadow: 0 0 6px #5c5c5c;
  25         -webkit-box-shadow: 0 0 6px #5c5c5c;
  26 }
  27
  28 #my-infos .content {
  29         background: #e8f1f3;
  30         background: -moz-linear-gradient(top, #e4edef, #e8f1f3);
  31         background: -webkit-gradient(linear, left top, left bottom, from(#e4edef), to(#e8f1f3));
  32         color: #919191;
  33         max-height: 140px;
  34         padding: 1px 0;
  35         border-radius: 3px;
  36         -moz-border-radius: 3px;
  37         -webkit-border-radius: 3px;
  38 }
  39
  40 #my-infos .element {
  41         height: 24px;
  42         margin: 6px 0;
  43         position: relative;
  44 }
  45
  46 #my-infos .element .icon {
  47         background-color: white;
  48         border-color: #636363;
  49         border-width: 1px;
  50         border-style: solid;
  51         margin-left: 6px;
  52         height: 22px;
  53         width: 25px;
  54         border-radius: 2px;
  55         -moz-border-radius: 2px;
  56         -webkit-border-radius: 2px;
  57 }
  58
  59 #my-infos .element div.bubble a {
  60         width: 100%;
  61         height: 20px;
  62 }
  63
  64 #my-infos .element .icon:hover,
  65 #my-infos .element div.bubble a:hover {
  66         background-color: #f4f4f4;
  67 }
  68
  69 #my-infos .element .icon:active,
  70 #my-infos .element div.bubble a:active {
  71         background-color: #ededed;
  72 }
  73
  74 #my-infos .f-presence div.bubble a[data-value=available] {
  75         background-position: 4px -167px;
  76 }
  77
  78 #my-infos .f-presence div.bubble a[data-value=away] {
  79         background-position: 4px -183px;
  80 }
  81
  82 #my-infos .f-presence div.bubble a[data-value=xa] {
  83         background-position: 4px -199px;
  84 }
  85
  86 #my-infos .f-mood div.bubble a[data-value=crazy] {
  87         background-position: 4px -296px;
  88 }
  89
  90 #my-infos .f-mood div.bubble a[data-value=excited] {
  91         background-position: 4px -314px;
  92 }
  93
  94 #my-infos .f-mood div.bubble a[data-value=playful] {
  95         background-position: 4px -332px;
  96 }
  97
  98 #my-infos .f-mood div.bubble a[data-value=happy] {
  99         background-position: 4px -350px;
 100 }
 101
 102 #my-infos .f-mood div.bubble a[data-value=shocked] {
 103         background-position: 4px -368px;
 104 }
 105
 106 #my-infos .f-mood div.bubble a[data-value=hot] {
 107         background-position: 4px -386px;
 108 }
 109
 110 #my-infos .f-mood div.bubble a[data-value=sad] {
 111         background-position: 4px -404px;
 112 }
 113
 114 #my-infos .f-mood div.bubble a[data-value=amorous] {
 115         background-position: 4px -422px;
 116 }
 117
 118 #my-infos .f-mood div.bubble a[data-value=confident] {
 119         background-position: 4px -440px;
 120 }
 121
 122 #my-infos .f-mood a[data-value] span {
 123         background-position: 0 -352px;
 124 }
 125
 126 #my-infos .f-mood a[data-value=crazy] span,
 127 .mood-one {
 128         background-position: 0 -298px;
 129 }
 130
 131 #my-infos .f-mood a[data-value=excited] span,
 132 .mood-two {
 133         background-position: 0 -316px;
 134 }
 135
 136 #my-infos .f-mood a[data-value=playful] span,
 137 .mood-three {
 138         background-position: 0 -334px;
 139 }
 140
 141 #my-infos .f-mood a[data-value=happy] span,
 142 .mood-four {
 143         background-position: 0 -352px;
 144 }
 145
 146 #my-infos .f-mood a[data-value=shocked] span,
 147 .mood-five {
 148         background-position: 0 -370px;
 149 }
 150
 151 #my-infos .f-mood a[data-value=hot] span,
 152 .mood-six {
 153         background-position: 0 -388px;
 154 }
 155
 156 #my-infos .f-mood a[data-value=sad] span,
 157 .mood-seven {
 158         background-position: 0 -406px;
 159 }
 160
 161 #my-infos .f-mood a[data-value=amorous] span,
 162 .mood-eight {
 163         background-position: 0 -424px;
 164 }
 165
 166 #my-infos .f-mood a[data-value=confident] span,
 167 .mood-nine {
 168         background-position: 0 -442px;
 169 }
 170
 171 #my-infos .f-activity div.bubble a[data-value=doing_chores] {
 172         background-position: 4px -458px;
 173 }
 174
 175 #my-infos .f-activity div.bubble a[data-value=drinking] {
 176         background-position: 4px -476px;
 177 }
 178
 179 #my-infos .f-activity div.bubble a[data-value=eating] {
 180         background-position: 4px -494px;
 181 }
 182
 183 #my-infos .f-activity div.bubble a[data-value=exercising] {
 184         background-position: 4px -512px;
 185 }
 186
 187 #my-infos .f-activity div.bubble a[data-value=grooming] {
 188         background-position: 4px -548px;
 189 }
 190
 191 #my-infos .f-activity div.bubble a[data-value=having_appointment] {
 192         background-position: 4px -566px;
 193 }
 194
 195 #my-infos .f-activity div.bubble a[data-value=inactive] {
 196         background-position: 4px -530px;
 197 }
 198
 199 #my-infos .f-activity div.bubble a[data-value=relaxing] {
 200         background-position: 4px -620px;
 201 }
 202
 203 #my-infos .f-activity div.bubble a[data-value=talking] {
 204         background-position: 4px -602px;
 205 }
 206
 207 #my-infos .f-activity div.bubble a[data-value=traveling] {
 208         background-position: 4px -584px;
 209 }
 210
 211 #my-infos .f-activity div.bubble a[data-value=working] {
 212         background-position: 4px -638px;
 213 }
 214
 215 #my-infos .f-activity a[data-value] span {
 216         background-position: 0 -514px;
 217 }
 218
 219 #my-infos .f-activity a[data-value=doing_chores] span,
 220 .activity-doing_chores {
 221         background-position: 0 -460px;
 222 }
 223
 224 #my-infos .f-activity a[data-value=drinking] span,
 225 .activity-drinking {
 226         background-position: 0 -478px;
 227 }
 228
 229 #my-infos .f-activity a[data-value=eating] span,
 230 .activity-eating {
 231         background-position: 0 -496px;
 232 }
 233
 234 #my-infos .f-activity a[data-value=exercising] span,
 235 .activity-exercising {
 236         background-position: 0 -514px;
 237 }
 238
 239 #my-infos .f-activity a[data-value=grooming] span,
 240 .activity-grooming {
 241         background-position: 0 -550px;
 242 }
 243
 244 #my-infos .f-activity a[data-value=having_appointment] span,
 245 .activity-having_appointment {
 246         background-position: 0 -568px;
 247 }
 248
 249 #my-infos .f-activity a[data-value=inactive] span,
 250 .activity-inactive {
 251         background-position: 0 -532px;
 252 }
 253
 254 #my-infos .f-activity a[data-value=relaxing] span,
 255 .activity-relaxing {
 256         background-position: 0 -622px;
 257 }
 258
 259 #my-infos .f-activity a[data-value=talking] span,
 260 .activity-talking {
 261         background-position: 0 -604px;
 262 }
 263
 264 #my-infos .f-activity a[data-value=traveling] span,
 265 .activity-traveling {
 266         background-position: 0 -586px;
 267 }
 268
 269 #my-infos .f-activity a[data-value=working] span,
 270 .activity-working {
 271         background-position: 0 -640px;
 272 }
 273
 274 #my-infos .element .icon.picker {
 275         border-width: 1px 0 1px 1px;
 276         border-top-right-radius: 0;
 277         border-bottom-right-radius: 0;
 278         -moz-border-radius-topright: 0;
 279         -moz-border-radius-bottomright: 0;
 280         -webkit-border-top-right-radius: 0;
 281         -webkit-border-bottom-right-radius: 0;
 282 }
 283
 284 #my-infos .element .icon.disabled {
 285         background-color: #f3f3f3;
 286         border-color: #989898;
 287         cursor: default;
 288 }
 289
 290 #my-infos .element div.bubble {
 291         background-color: white;
 292         border-color: #636363;
 293         border-width: 1px 1px 0 1px;
 294         border-style: solid;
 295         width: 25px;
 296         padding: 1px 0;
 297         position: absolute;
 298         bottom: 21px;
 299         left: 6px;
 300         border-top-left-radius: 2px;
 301         border-top-right-radius: 2px;
 302         -moz-border-radius-topleft: 2px;
 303         -moz-border-radius-topright: 2px;
 304         -webkit-border-top-left-radius: 2px;
 305         -webkit-border-top-right-radius: 2px;
 306 }
 307
 308 #my-infos .element a {
 309         float: left;
 310 }
 311
 312 #my-infos .element .icon span {
 313         height: 16px;
 314         width: 16px;
 315         margin: 3px 4px;
 316         display: block;
 317 }
 318
 319 #my-infos .element input {
 320         height: 18px;
 321         width: 190px;
 322         font-size: 0.85em;
 323         padding-left: 4px;
 324         border-top-left-radius: 0;
 325         border-bottom-left-radius: 0;
 326         -moz-border-radius-topleft: 0;
 327         -moz-border-radius-bottomleft: 0;
 328         -webkit-border-top-left-radius: 0;
 329         -webkit-border-top-bottom-radius: 0;
 330 }