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

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