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