src/main/resources/static/css/sone.css

   1 /* Sone Main CSS File */
   2
   3 /* first, override some fproxy rules. */
   4 #sone .post .reply div,#sone .post .time,#sone .post .delete,#sone .post .show-reply-form, input[type=text], textarea {
   5         font: inherit;
   6 }
   7
   8 input[type=text], textarea {
   9         font-size: 90%;
  10         margin: 0.5ex;
  11         margin-left: 0;
  12         border: solid 1px #ccc;
  13         padding: 0.5ex;
  14         height: 1.5em;
  15         width: 50em;
  16         outline: none;
  17 }
  18
  19 textarea {
  20         height: 4em;
  21 }
  22
  23 #sone form {
  24         margin: 0px;
  25 }
  26
  27 /* now for the real stuff. */
  28
  29 #sone {
  30         width: 55em;
  31         margin: auto;
  32 }
  33
  34 #sone .hidden {
  35         display: none;
  36 }
  37
  38 #sone #formPassword {
  39         display: none;
  40 }
  41
  42 #sone a, #sone a:link, #sone a:visited {
  43         color: rgb(28, 131, 191);
  44         font-size: inherit;
  45         text-decoration: none;
  46 }
  47
  48 #sone a:active, #sone a:hover {
  49         color: rgb(255, 172, 0);
  50 }
  51
  52 #sone #notification-area {
  53         margin-bottom: 1em;
  54 }
  55
  56 #sone #notification-area .notification {
  57         padding: 1ex;
  58         border: solid 1px #ccc;
  59         background-color: #ffffa0;
  60         margin-bottom: 1ex;
  61 }
  62
  63 #sone #notification-area .notification > div {
  64         display: inline;
  65 }
  66
  67 #sone #notification-area .notification .post-count {
  68         margin-left: 1ex;
  69 }
  70
  71 #sone #plugin-warning {
  72         border: solid 0.5em red;
  73         padding: 0.5em;
  74         margin-bottom: 1em;
  75 }
  76
  77 #sone #profile {
  78         height: 80px;
  79         margin-bottom: 1ex;
  80 }
  81
  82 #sone .profile-link {
  83         font-weight: bold;
  84         color: rgb(28, 131, 191);
  85 }
  86
  87 #sone #profile.online .picture {
  88         position: absolute;
  89 }
  90
  91 #sone #profile.offline .picture {
  92         position: absolute;
  93 }
  94
  95 #sone #profile.offline .edit-profile-link, #sone #profile.offline .profile-link {
  96         display: none;
  97 }
  98
  99 #sone #profile .edit-profile-link {
 100         font-size: 85%;
 101 }
 102
 103 #sone #home-sone {
 104         margin-top: 1ex;
 105         margin-left: 80px;
 106         padding-left: 1ex;
 107 }
 108
 109 #sone #update-status label {
 110         display: none;
 111 }
 112
 113 #sone #update-status input[type=text] {
 114         width: 45em;
 115 }
 116
 117 #sone #update-status textarea {
 118         width: 45em;
 119 }
 120
 121 #sone #update-status button {
 122         float: right;
 123 }
 124
 125 #sone .nice-name {
 126         font-weight: bold;
 127 }
 128
 129 #sone #main {
 130         padding: 1em;
 131 }
 132
 133 #sone #edit-profile #birth-day, #sone #edit-profile #birth-month, #sone #edit-profile #birth-year {
 134         display: inline;
 135         width: 15em;
 136 }
 137
 138 #sone #edit-profile #birth-day input, #sone #edit-profile #birth-month input, #sone #edit-profile #birth-year input {
 139         width: 4em;
 140         text-align: right;
 141 }
 142
 143 #sone .post {
 144         padding: 1ex 0px;
 145         border-bottom: solid 1px #ccc;
 146         clear: both;
 147 }
 148
 149 #sone .post.new {
 150         background-color: #ffffa0;
 151         padding-left: 1ex;
 152 }
 153
 154 #sone .post.last {
 155         padding: 1ex 0px;
 156         border-bottom: none;
 157 }
 158
 159 #sone .post > .avatar {
 160         position: absolute;
 161 }
 162
 163 #sone .post > .inner-part {
 164         margin-left: 48px;
 165         padding-left: 0.5em;
 166         min-height: 48px;
 167 }
 168
 169 #sone .post .author {
 170         display: inline;
 171         font-weight: bold;
 172 }
 173
 174 #sone .post .text {
 175         display: inline;
 176         white-space: pre-wrap;
 177 }
 178
 179 #sone .post .status-line {
 180         margin-top: 0.5ex;
 181         font-size: 85%;
 182 }
 183
 184 #sone .post .time {
 185         display: inline;
 186         color: #666;
 187 }
 188
 189 #sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike {
 190         display: inline;
 191         font: inherit;
 192 }
 193
 194 #sone .post .likes.hidden {
 195         display: none;
 196 }
 197
 198 #sone .post .like.hidden, #sone .post .unlike.hidden {
 199         display: none;
 200 }
 201
 202 #sone .post .delete button, #sone .post .like button, #sone .post .unlike button {
 203         border: 0px;
 204         background: none;
 205         padding: 0px;
 206         color: rgb(28, 131, 191);
 207 }
 208
 209 #sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover {
 210         border: 0px;
 211         background: none;
 212         padding: 0px;
 213         color: rgb(255, 172, 0);
 214         cursor: pointer;
 215 }
 216
 217 #sone .post .delete:before, #sone .post .likes:before, #sone .post .like:before, #sone .post .unlike:before {
 218         content: ' ‧ ';
 219 }
 220
 221 #sone .post .likes span {
 222         font: inherit;
 223         color: green;
 224 }
 225
 226 #sone .post .replies {
 227         clear: both;
 228         padding-top: 0.2ex;
 229 }
 230
 231 #sone .post .replies .click-to-show {
 232         background-color: #f0f0ff;
 233         font-size: 85%;
 234         padding: 0.5em;
 235         cursor: pointer;
 236 }
 237
 238 #sone .post .replies .click-to-show.new {
 239         background-color: #ffffa0;
 240 }
 241
 242 #sone .post .reply > .avatar {
 243         position: absolute;
 244 }
 245
 246 #sone .post .reply > .inner-part {
 247         margin-left: 36px;
 248         padding-left: 0.5em;
 249         min-height: 36px;
 250 }
 251
 252 #sone .post .reply {
 253         clear: both;
 254         background-color: #f0f0ff;
 255         font-size: 85%;
 256         margin: 1ex 0px;
 257         padding: 1ex;
 258 }
 259
 260 #sone .post .reply.new {
 261         background-color: #ffffa0;
 262 }
 263
 264 #sone .post .reply .time {
 265         float: none;
 266         display: inline;
 267         color: #666;
 268         font-size: inherit;
 269 }
 270
 271 #sone .post .show-reply-form {
 272         display: inline;
 273 }
 274
 275 #sone .post .show-reply-form span {
 276         color: rgb(28, 131, 191);
 277         cursor: pointer;
 278         font: inherit;
 279 }
 280
 281 #sone .post .show-reply-form span:hover {
 282         color: rgb(255, 172, 0);
 283 }
 284
 285 #sone .post .show-reply-form:before {
 286         content: ' ‧ ';
 287 }
 288
 289 #sone .post .reply .status-line .delete {
 290         float: none;
 291         display: inline;
 292 }
 293
 294 #sone .post .reply .status-line .delete:before {
 295         content: ' · ';
 296 }
 297
 298 #sone .post .create-reply {
 299         clear: both;
 300         background-color: #f0f0ff;
 301         padding: 0.5ex;
 302 }
 303
 304 #sone .post .create-reply input[type=text] {
 305         margin-left: 0.5ex;
 306         width: 44em;
 307 }
 308
 309 #sone .post .create-reply textarea {
 310         margin-left: 0.5ex;
 311         width: 44em;
 312         height: 4em;
 313 }
 314
 315 #sone .post .create-reply button {
 316         float: right;
 317 }
 318
 319 #sone .sone {
 320         clear: both;
 321         background-color: #f0f0ff;
 322         border: 1px solid #ccc;
 323         margin-bottom: 0.5ex;
 324         padding: 0.5ex;
 325 }
 326
 327 #sone .sone.local {
 328         background-color: #f0fff0;
 329 }
 330
 331 #sone .sone.new {
 332         background-color: #ffffa0;
 333 }
 334
 335 #sone .sone .id {
 336         display: none;
 337 }
 338
 339 #sone .sone .profile-link {
 340         display: block;
 341 }
 342
 343 #sone .sone .short-request-uri {
 344         clear: both;
 345         float: right;
 346 }
 347
 348 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
 349         display: none;
 350 }
 351
 352 #sone .sone.unknown .unknown-marker, #sone .sone.idle .idle-marker, #sone .sone.downloading .download-marker, #sone .sone.inserting .insert-marker, #sone .sone.modified .modified-marker {
 353         display: inline;
 354         float: right;
 355         border: solid 1px #ccc;
 356         border-right: none;
 357         border-top: none;
 358         padding: 0 0.5ex;
 359         position: relative;
 360         right: -0.5ex;
 361         top: -0.5ex
 362 }
 363
 364 #sone .sone.idle.modified .idle-marker {
 365         display: none;
 366 }
 367
 368 #sone .sone .last-update {
 369         float: right;
 370         display: inline;
 371 }
 372
 373 #sone .sone .modified-marker, #sone .sone .unknown-marker {
 374         color: red;
 375         font-weight: bold;
 376 }
 377
 378 #sone .sone form {
 379         display: inline;
 380         border: solid 1px #ccc;
 381         border-left: none;
 382         border-bottom: none;
 383         padding: 0 0.5ex;
 384         position: relative;
 385         left: -0.5ex;
 386         bottom: -0.5ex
 387 }
 388
 389 #sone .sone form.hidden {
 390         display: none;
 391 }
 392
 393 #sone .sone form.block button, #sone .sone form.unblock button, #sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.blacklist button, #sone .sone form.unblacklist button {
 394         display: inline;
 395         color: rgb(28, 131, 191);
 396         background: none;
 397         border: none;
 398         font: inherit;
 399         padding: 0px;
 400 }
 401
 402 #sone .sone form.block button:hover, #sone .sone form.unblock button:hover, #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover, #sone .sone form.blacklist button:hover, #sone .sone form.unblacklist button:hover {
 403         display: inline;
 404         color: rgb(255, 172, 0);
 405 }
 406
 407 #sone .sone .spacer {
 408         display: inline;
 409 }
 410
 411 #sone #create-sone {
 412
 413 }
 414
 415 #sone #tail {
 416         margin-top: 1em;
 417         border-top: solid 1px #ccc;
 418         padding-top: 2em;
 419         text-align: center;
 420         font-size: 75%;
 421         color: #888;
 422 }
 423
 424 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea {
 425         height: 1.5em;
 426 }
 427
 428 #sone #add-sone button {
 429         position: absolute;
 430 }
 431
 432 #sone .navigation {
 433         text-align: center;
 434 }
 435
 436 #sone .navigation .first a, #sone .navigation .previous a, #sone .navigation .next a, #sone .navigation .last a, #sone .navigation .first span, #sone .navigation .previous span, #sone .navigation .next span, #sone .navigation .last span {
 437         display: block;
 438         height: 1.5em;
 439         padding: 0.5ex;
 440         width: 3em;
 441         border: solid 1px #ccc;
 442         background-color: #f0f0ff;
 443         margin: 1ex 0;
 444 }
 445
 446 #sone .navigation .first, #sone .navigation .previous {
 447         float: left;
 448 }
 449
 450 #sone .navigation .current-page, #sone .navigation .total-pages {
 451         position: relative;
 452         top: 0.5em;
 453         margin-top: 0.5ex;
 454         display: inline;
 455 }
 456
 457 #sone .navigation .total-pages:before {
 458         content: '/ ';
 459 }
 460
 461 #sone .navigation .next, #sone .navigation .last {
 462         float: right;
 463 }
 464
 465 #sone h1 {
 466         font-family: inherit;
 467         font-size: 200%;
 468         font-weight: bold;
 469         clear: both;
 470 }
 471
 472 #sone h2 {
 473         font-family: inherit;
 474         font-size: 150%;
 475         font-weight: bold;
 476         clear: both;
 477 }
 478
 479 #sone .error label {
 480         color: red;
 481         font-weight: bold;
 482 }
 483
 484 #sone input.default {
 485         color: #888;
 486 }
 487
 488 #sone input[type=text].key {
 489         width: 130ex;;
 490         font-size: 75%;
 491 }
 492
 493 #sone .confirm {
 494         font-weight: bold !important;
 495         color: red !important;
 496 }