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