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 .trust button {
 260         color: rgb(0, 128, 0);
 261 }
 262
 263 #sone .post .distrust button {
 264         color: rgb(255, 0, 0);
 265 }
 266
 267 #sone .post .untrust button {
 268         color: rgb(64, 64, 64);
 269 }
 270
 271 #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 {
 272         border: 0px;
 273         background: none;
 274         padding: 0px;
 275         color: rgb(255, 172, 0);
 276         cursor: pointer;
 277 }
 278
 279 #sone .post .likes span {
 280         font: inherit;
 281         color: green;
 282 }
 283
 284 #sone .post .replies {
 285         clear: both;
 286         padding-top: 0.2ex;
 287 }
 288
 289 #sone .post .replies .click-to-show {
 290         background-color: #f0f0ff;
 291         font-size: 85%;
 292         padding: 0.5em;
 293         cursor: pointer;
 294 }
 295
 296 #sone .post .replies .click-to-show.new {
 297         background-color: #ffffa0;
 298 }
 299
 300 #sone .post .reply > .avatar {
 301         position: absolute;
 302 }
 303
 304 #sone .post .reply > .inner-part {
 305         margin-left: 36px;
 306         padding-left: 0.5em;
 307         min-height: 36px;
 308 }
 309
 310 #sone .post .reply {
 311         clear: both;
 312         background-color: #f0f0ff;
 313         font-size: 85%;
 314         margin: 1ex 0px;
 315         padding: 1ex;
 316 }
 317
 318 #sone .post .reply.new {
 319         background-color: #ffffa0;
 320 }
 321
 322 #sone .post .reply .time {
 323         float: none;
 324         display: inline;
 325         color: #666;
 326         font-size: inherit;
 327 }
 328
 329 #sone .post .show-reply-form {
 330         display: inline;
 331 }
 332
 333 #sone .post .show-reply-form span {
 334         color: rgb(28, 131, 191);
 335         cursor: pointer;
 336         font: inherit;
 337 }
 338
 339 #sone .post .show-reply-form span:hover {
 340         color: rgb(255, 172, 0);
 341 }
 342
 343 #sone .post .create-reply {
 344         clear: both;
 345         background-color: #f0f0ff;
 346         padding: 0.5ex;
 347 }
 348
 349 #sone .post .create-reply input[type=text] {
 350         margin-left: 0.5ex;
 351         width: 44em;
 352 }
 353
 354 #sone .post .create-reply textarea {
 355         margin-left: 0.5ex;
 356         width: 44em;
 357         height: 4em;
 358 }
 359
 360 #sone .post .create-reply button {
 361         float: right;
 362 }
 363
 364 #sone .sone {
 365         clear: both;
 366         background-color: #f0f0ff;
 367         border: 1px solid #ccc;
 368         margin-bottom: 0.5ex;
 369         padding: 0.5ex;
 370 }
 371
 372 #sone .sone.local {
 373         background-color: #f0fff0;
 374 }
 375
 376 #sone .sone.new {
 377         background-color: #ffffa0;
 378 }
 379
 380 #sone .sone .profile-link {
 381         display: block;
 382 }
 383
 384 #sone .sone .short-request-uri {
 385         clear: both;
 386         float: right;
 387 }
 388
 389 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
 390         display: none;
 391 }
 392
 393 #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 {
 394         display: inline;
 395         float: right;
 396         border: solid 1px #ccc;
 397         border-right: none;
 398         border-top: none;
 399         padding: 0 0.5ex;
 400         position: relative;
 401         right: -0.5ex;
 402         top: -0.5ex
 403 }
 404
 405 #sone .sone.idle.modified .idle-marker {
 406         display: none;
 407 }
 408
 409 #sone .sone .last-update {
 410         float: right;
 411         display: inline;
 412 }
 413
 414 #sone .sone .modified-marker, #sone .sone .unknown-marker {
 415         color: red;
 416         font-weight: bold;
 417 }
 418
 419 #sone .sone form.follow, #sone .sone form.unfollow, #sone .sone form.lock, #sone .sone form.unlock {
 420         display: inline;
 421         border: solid 1px #ccc;
 422         border-left: none;
 423         border-bottom: none;
 424         padding: 0 0.5ex;
 425         position: relative;
 426         left: -0.5ex;
 427         bottom: -0.5ex
 428 }
 429
 430 #sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.lock button, #sone .sone form.unlock button {
 431         display: inline;
 432         color: rgb(28, 131, 191);
 433         background: none;
 434         border: none;
 435         font: inherit;
 436         padding: 0px;
 437 }
 438
 439 #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover, #sone .sone form.lock button:hover, #sone .sone form.unlock button:hover {
 440         display: inline;
 441         color: rgb(255, 172, 0);
 442 }
 443
 444 #sone .sone.locked form.lock, #sone .sone.unlocked form.unlock {
 445         display: none;
 446 }
 447
 448 #sone .sone form.hidden {
 449         display: none;
 450 }
 451
 452 #sone .sone .spacer {
 453         display: inline;
 454 }
 455
 456 #sone .profile-field, #sone #edit-profile button[type=submit], #sone #delete-profile-field {
 457         margin-top: 1em;
 458 }
 459
 460 #sone .profile-field .name {
 461         display: inline;
 462         font-weight: bold;
 463 }
 464
 465 #sone .profile-field .name.hidden {
 466         display: none;
 467 }
 468
 469 #sone .profile-field button.confirm {
 470         font-weight: bold;
 471         color: #080;
 472 }
 473
 474 #sone .profile-field button.cancel {
 475         font-weight: bold;
 476         color: red;
 477 }
 478
 479 #sone .profile-field .value {
 480         margin-left: 2em;
 481 }
 482
 483 #sone #edit-profile .profile-field .value {
 484         margin-left: inherit;
 485 }
 486
 487 #sone .profile-field .edit-field-name, #sone .profile-field .move-up-field, #sone .profile-field .move-down-field, #sone .profile-field .delete-field-name {
 488         float: right;
 489         margin-top: -1ex;
 490 }
 491
 492 #sone #tail {
 493         margin-top: 1em;
 494         border-top: solid 1px #ccc;
 495         padding-top: 2em;
 496         text-align: center;
 497         font-size: 75%;
 498         color: #888;
 499 }
 500
 501 #sone #tail #version-information {
 502         margin-top: 1em;
 503 }
 504
 505 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea {
 506         height: 1.5em;
 507 }
 508
 509 #sone #add-sone button {
 510         position: absolute;
 511 }
 512
 513 #sone .navigation {
 514         text-align: center;
 515 }
 516
 517 #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 {
 518         display: block;
 519         height: 1.5em;
 520         padding: 0.5ex;
 521         width: 3em;
 522         border: solid 1px #ccc;
 523         background-color: #f0f0ff;
 524         margin: 1ex 0;
 525 }
 526
 527 #sone .navigation .first, #sone .navigation .previous {
 528         float: left;
 529 }
 530
 531 #sone .navigation .current-page, #sone .navigation .total-pages {
 532         position: relative;
 533         top: 0.5em;
 534         margin-top: 0.5ex;
 535         display: inline;
 536 }
 537
 538 #sone .navigation .total-pages:before {
 539         content: '/ ';
 540 }
 541
 542 #sone .navigation .next, #sone .navigation .last {
 543         float: right;
 544 }
 545
 546 #sone h1 {
 547         font-family: inherit;
 548         font-size: 200%;
 549         font-weight: bold;
 550         clear: both;
 551 }
 552
 553 #sone h2 {
 554         font-family: inherit;
 555         font-size: 150%;
 556         font-weight: bold;
 557         clear: both;
 558 }
 559
 560 #sone .error label {
 561         color: red;
 562         font-weight: bold;
 563 }
 564
 565 #sone input.default {
 566         color: #888;
 567 }
 568
 569 #sone input[type=text].key {
 570         width: 130ex;;
 571         font-size: 75%;
 572 }
 573
 574 #sone .confirm {
 575         font-weight: bold;
 576         color: red;
 577 }