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