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