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