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