jappixmini/jappix/css/tools.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the tools CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 27/08/11
  11
  12 */
  13
  14 #top-content .tools {
  15         background-color: rgb(232,241,243);
  16         background-color: rgba(232,241,243,0.6);
  17         padding: 3px 8px 5px 8px;
  18         min-width: 10px;
  19         height: 17px;
  20         border-bottom-left-radius: 4px;
  21         border-bottom-right-radius: 4px;
  22         -moz-border-radius-bottomleft: 4px;
  23         -moz-border-radius-bottomright: 4px;
  24         -webkit-border-bottom-left-radius: 4px;
  25         -webkit-border-bottom-right-radius: 4px;
  26 }
  27
  28 #top-content .tools a {
  29         color: black;
  30         padding: 0 3px;
  31         margin: 0 1.5px;
  32 }
  33
  34 #top-content .tools a:hover,
  35 #top-content .tools a:focus {
  36         cursor: pointer;
  37         text-decoration: underline;
  38 }
  39
  40 #top-content .tools-logo {
  41         background-position: 9px 2px;
  42         width: 74px;
  43         float: left;
  44 }
  45
  46 #top-content .tools-all {
  47         float: right;
  48         text-align: right;
  49         margin-left: 8px;
  50         font-size: 0.9em;
  51         color: black;
  52 }
  53
  54 #top-content .notifications {
  55         background-position: 7px -1264px;
  56 }
  57
  58 #top-content .music {
  59         background-position: 6px -1286px;
  60 }
  61
  62 #top-content .notifications:hover,
  63 #top-content .music:hover {
  64         cursor: pointer;
  65 }
  66
  67 #top-content .music:hover,
  68 #top-content .notifications:hover,
  69 #top-content .music:focus,
  70 #top-content .notifications:focus {
  71         background-color: rgb(232,241,243);
  72         background-color: rgba(232,241,243,0.7);
  73 }
  74
  75 #top-content .music:active,
  76 #top-content .notifications:active {
  77         background-color: rgb(232,241,243);
  78         background-color: rgba(232,241,243,0.8);
  79 }
  80
  81 #top-content .actived,
  82 #top-content .actived:hover,
  83 #top-content .actived:focus,
  84 #top-content .actived:active {
  85         background-color: rgb(232,241,243) !important;
  86         background-color: rgba(232,241,243,0.9) !important;
  87 }
  88
  89 #top-content .notify {
  90         background-color: #c60505;
  91         color: white;
  92         font-size: 0.7em;
  93         font-weight: bold;
  94         margin-left: -10px;
  95         padding: 1px 4px;
  96         position: absolute;
  97         bottom: -2px;
  98         border-radius: 10px;
  99         -moz-border-radius: 10px;
 100         -webkit-border-radius: 10px;
 101 }
 102
 103 #top-content .tools-content {
 104         display: none;
 105         position: absolute;
 106         top: 25px;
 107         margin-left: -8px;
 108 }
 109
 110 .tools-content-subarrow {
 111         background-position: 0 -241px;
 112         opacity: 0.8;
 113         height: 10px;
 114         width: 18px;
 115         margin-left: 12px;
 116 }
 117
 118 .tools-content-subitem {
 119         background-color: rgb(0,0,0);
 120         background-color: rgba(0,0,0,0.8);
 121         padding: 14px 6px 6px 6px;
 122         border-radius: 5px;
 123         -moz-border-radius: 5px;
 124         -webkit-border-radius: 5px;
 125 }
 126
 127 .notifications-content {
 128         width: 240px;
 129 }
 130
 131 .notifications-content .tools-content-subitem {
 132         max-height: 250px;
 133         color: white;
 134         text-shadow: 0 1px 1px black;
 135         text-align: left;
 136         overflow-x: none;
 137         overflow-y: auto;
 138 }
 139
 140 .notifications-content .empty {
 141         color: white;
 142         font-size: 0.9em;
 143         text-decoration: underline;
 144         margin: -8px 4px 2px 0;
 145         display: none;
 146         float: right;
 147 }
 148
 149 .notifications-content .nothing {
 150         font-size: 0.9em;
 151         margin: 5px;
 152 }
 153
 154 .notifications-content .one-notification {
 155         padding: 6px 4px;
 156         font-size: 0.85em;
 157         clear: both;
 158         border-radius: 2px;
 159         -moz-border-radius: 2px;
 160         -webkit-border-radius: 2px;
 161 }
 162
 163 .notifications-content .one-notification:hover,
 164 .notifications-content .one-notification:focus {
 165         background-color: rgb(255,255,255);
 166         background-color: rgba(255,255,255,0.1);
 167 }
 168
 169 .notifications-content .one-notification:active {
 170         background-color: rgb(255,255,255);
 171         background-color: rgba(255,255,255,0.2);
 172 }
 173
 174 .notifications-content .avatar-container {
 175         float: left;
 176         width: 40px;
 177         height: 40px;
 178         margin: 0 8px 8px 0;
 179         text-align: center;
 180         background-repeat: no-repeat;
 181 }
 182
 183 .notifications-content .avatar {
 184         max-width: 40px;
 185         max-height: 40px;
 186 }
 187
 188 .notifications-content .notification-text,
 189 .notifications-content .notification-actions {
 190         margin-left: 48px;
 191         overflow: hidden;
 192 }
 193
 194 .notifications-content .notification-actions {
 195         margin-top: 3px;
 196 }
 197
 198 .notifications-content .notification-actions a {
 199         color: white;
 200         font-weight: bold;
 201         font-size: 0.9em;
 202         text-decoration: underline;
 203         margin-right: 8px;
 204 }
 205
 206 .notifications-content .one-notification .notification-actions span.talk-images {
 207         background-position: 0 -1828px;
 208         width: 16px;
 209         height: 16px;
 210         margin: -1px 6px 0 0;
 211         float: left;
 212 }
 213
 214 .notifications-content .one-notification[data-type=subscribe] .notification-actions span.talk-images {
 215         background-position: 0 -1796px;
 216 }
 217
 218 .notifications-content .one-notification[data-type=invite_room] .notification-actions span.talk-images {
 219         background-position: 0 -1812px;
 220 }
 221
 222 .notifications-content .one-notification[data-type=send] .notification-actions span.talk-images,
 223 .notifications-content .one-notification[data-type=send_accept] .notification-actions span.talk-images,
 224 .notifications-content .one-notification[data-type=send_reject] .notification-actions span.talk-images,
 225 .notifications-content .one-notification[data-type=send_fail] .notification-actions span.talk-images {
 226         background-position: 0 -1956px;
 227 }
 228
 229 .notifications-content .one-notification[data-type=rosterx] .notification-actions span.talk-images {
 230         background-position: 0 -1844px;
 231 }
 232
 233 .notifications-content .one-notification[data-type=comment] .notification-actions span.talk-images {
 234         background-position: 0 -1860px;
 235 }
 236
 237 .notifications-content .one-notification[data-type=like] .notification-actions span.talk-images {
 238         background-position: 0 -1876px;
 239 }
 240
 241 .notifications-content .one-notification[data-type=quote] .notification-actions span.talk-images {
 242         background-position: 0 -1892px;
 243 }
 244
 245 .notifications-content .one-notification[data-type=wall] .notification-actions span.talk-images {
 246         background-position: 0 -1908px;
 247 }
 248
 249 .notifications-content .one-notification[data-type=photo] .notification-actions span.talk-images {
 250         background-position: 0 -1924px;
 251 }
 252
 253 .notifications-content .one-notification[data-type=video] .notification-actions span.talk-images {
 254         background-position: 0 -1940px;
 255 }
 256
 257 .music-content {
 258         width: 220px;
 259 }
 260
 261 .music-content .tools-content-subitem {
 262         height: 247px;
 263 }
 264
 265 .music-content .player {
 266         background: #b5d5db;
 267         background: -moz-linear-gradient(top, #b5d5db, #adced4);
 268         background: -webkit-gradient(linear, left top, left bottom, from(#b5d5db), to(#adced4));
 269         height: 20px;
 270         padding: 2px 5px;
 271         border-top-right-radius: 4px;
 272         border-top-left-radius: 4px;
 273         -moz-border-radius-topright: 4px;
 274         -moz-border-radius-topleft: 4px;
 275         -webkit-border-top-right-radius: 4px;
 276         -webkit-border-top-left-radius: 4px;
 277 }
 278
 279 .music-content .player a {
 280         margin: 2px;
 281         height: 16px;
 282         width: 16px;
 283         float: left;
 284 }
 285
 286 .music-content .player a:hover,
 287 .music-content .player a:focus {
 288         opacity: 0.8;
 289 }
 290
 291 .music-content .player a:active {
 292         opacity: 0.6;
 293 }
 294
 295 .music-content .stop {
 296         display: none;
 297         background-position: 0 -270px;
 298 }
 299
 300 .music-content .list {
 301         background-color: #e8f1f3;
 302         height: 188px;
 303         padding: 5px;
 304         text-align: left;
 305         overflow-y: auto;
 306         overflow-x: hidden;
 307 }
 308
 309 .music-content p.no-results {
 310         display: none;
 311         color: black;
 312         font-size: 0.9em;
 313 }
 314
 315 .music-content div.special {
 316         padding-bottom: 2px;
 317         margin-bottom: 6px;
 318         border-bottom: 1px solid #c3d4d7;
 319 }
 320
 321 .music-content .song {
 322         display: block;
 323         margin: 3px 0;
 324         font-size: 0.8em;
 325 }
 326
 327 .music-content .playing {
 328         font-weight: bold;
 329 }
 330
 331 .music-content .search {
 332         background-color: #e8f1f3;
 333         height: 25px;
 334         border-bottom-left-radius: 4px;
 335         border-bottom-right-radius: 4px;
 336         -moz-border-radius-bottomleft: 4px;
 337         -moz-border-radius-bottomright: 4px;
 338         -webkit-border-bottom-right-radius: 4px;
 339         -webkit-border-bottom-right-radius: 4px;
 340 }
 341
 342 .music-content .search input {
 343         margin: 2px;
 344         width: 198px;
 345         height: 15px;
 346 }