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 a, #sone a:link, #sone a:visited {
  39         color: rgb(28, 131, 191);
  40         font-size: inherit;
  41         text-decoration: none;
  42 }
  43
  44 #sone a:active, #sone a:hover {
  45         color: rgb(255, 172, 0);
  46 }
  47
  48 #sone #profile {
  49         height: 80px;
  50         margin-bottom: 1ex;
  51 }
  52
  53 #sone .profile-link {
  54         font-weight: bold;
  55         color: rgb(28, 131, 191);
  56 }
  57
  58 #sone #profile.online .picture {
  59         position: absolute;
  60         background-image: url("../images/sone.png");
  61         width: 80px;
  62         height: 80px;
  63 }
  64
  65 #sone #profile.offline .picture {
  66         position: absolute;
  67         background-image: url("../images/sone-offline.png");
  68         width: 80px;
  69         height: 80px;
  70 }
  71
  72 #sone #profile.offline .edit-profile-link, #sone #profile.offline .profile-link {
  73         display: none;
  74 }
  75
  76 #sone #profile .edit-profile-link {
  77         font-size: 85%;
  78 }
  79
  80 #sone #home-sone {
  81         margin-top: 1ex;
  82         margin-left: 80px;
  83         padding-left: 1ex;
  84 }
  85
  86 #sone #update-status label {
  87         display: none;
  88 }
  89
  90 #sone #update-status input[type=text] {
  91         width: 45em;
  92 }
  93
  94 #sone #update-status textarea {
  95         width: 45em;
  96 }
  97
  98 #sone #update-status button {
  99         float: right;
 100 }
 101
 102 #sone .nice-name {
 103         font-weight: bold;
 104 }
 105
 106 #sone #main {
 107         padding: 1em;
 108 }
 109
 110 #sone .post {
 111         padding: 1ex 0px;
 112         border-bottom: solid 1px #ccc;
 113         clear: both;
 114 }
 115
 116 #sone .post.last {
 117         padding: 1ex 0px;
 118         border-bottom: none;
 119 }
 120
 121 #sone .post .author {
 122         display: inline;
 123         font-weight: bold;
 124 }
 125
 126 #sone .post .text {
 127         display: inline;
 128         white-space: pre-wrap;
 129 }
 130
 131 #sone .post .status-line {
 132         clear: both;
 133         margin-top: 0.5ex;
 134         font-size: 85%;
 135 }
 136
 137 #sone .post .time {
 138         display: inline;
 139         color: #666;
 140 }
 141
 142 #sone .post .delete {
 143         display: inline;
 144 }
 145
 146 #sone .post .delete button {
 147         font: inherit;
 148         border: 0px;
 149         background: none;
 150         padding: 0px;
 151         color: rgb(28, 131, 191);
 152 }
 153
 154 #sone .post .delete button:hover {
 155         font: inherit;
 156         border: 0px;
 157         background: none;
 158         padding: 0px;
 159         color: rgb(255, 172, 0);
 160         cursor: pointer;
 161 }
 162
 163 #sone .post .delete:before {
 164         content: ' ‧ ';
 165 }
 166
 167 #sone .post .replies {
 168         clear: both;
 169         padding-top: 0.2ex;
 170 }
 171
 172 #sone .post .reply {
 173         clear: both;
 174         background-color: #f0f0ff;
 175         font-size: 85%;
 176         margin: 1ex 0px;
 177         padding: 1ex;
 178 }
 179
 180 #sone .post .reply .time {
 181         float: none;
 182         display: inline;
 183         color: #666;
 184         font-size: inherit;
 185 }
 186
 187 #sone .post .show-reply-form {
 188         display: inline;
 189 }
 190
 191 #sone .post .show-reply-form span {
 192         color: rgb(28, 131, 191);
 193         cursor: pointer;
 194         font: inherit;
 195 }
 196
 197 #sone .post .show-reply-form span:hover {
 198         color: rgb(255, 172, 0);
 199 }
 200
 201 #sone .post .show-reply-form:before {
 202         content: ' ‧ ';
 203 }
 204
 205 #sone .post .reply .status-line .delete {
 206         float: none;
 207         display: inline;
 208 }
 209
 210 #sone .post .reply .status-line .delete:before {
 211         content: ' · ';
 212 }
 213
 214 #sone .post .create-reply {
 215         clear: both;
 216         background-color: #f0f0ff;
 217         padding: 0.5ex;
 218 }
 219
 220 #sone .post .create-reply input[type=text] {
 221         margin-left: 0.5ex;
 222         width: 50em;
 223 }
 224
 225 #sone .post .create-reply textarea {
 226         margin-left: 0.5ex;
 227         width: 50em;
 228         height: 4em;
 229 }
 230
 231 #sone .post .create-reply button {
 232         float: right;
 233 }
 234
 235 #sone .sone {
 236         clear: both;
 237         background-color: #f0f0ff;
 238         border: 1px solid #ccc;
 239         margin-bottom: 0.5ex;
 240         padding: 0.5ex;
 241 }
 242
 243 #sone .sone .id {
 244         display: none;
 245 }
 246
 247 #sone .sone .profile-link {
 248         display: block;
 249 }
 250
 251 #sone .sone .short-request-uri {
 252         clear: both;
 253         float: right;
 254 }
 255
 256 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
 257         display: none;
 258 }
 259
 260 #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 {
 261         display: inline;
 262         float: right;
 263         border: solid 1px #ccc;
 264         border-right: none;
 265         border-top: none;
 266         padding: 0 0.5ex;
 267         position: relative;
 268         right: -0.5ex;
 269         top: -0.5ex
 270 }
 271
 272 #sone .sone .last-update {
 273         float: right;
 274         display: inline;
 275 }
 276
 277 #sone .sone .modified-marker, #sone .sone .unknown-marker {
 278         color: red;
 279         font-weight: bold;
 280 }
 281
 282 #sone .sone form {
 283         display: inline;
 284         border: solid 1px #ccc;
 285         border-left: none;
 286         border-bottom: none;
 287         padding: 0 0.5ex;
 288         position: relative;
 289         left: -0.5ex;
 290         bottom: -0.5ex
 291 }
 292
 293 #sone .sone form.block button, #sone .sone form.unblock button, #sone .sone form.follow button, #sone .sone form.unfollow button {
 294         display: inline;
 295         color: rgb(28, 131, 191);
 296         background: none;
 297         border: none;
 298         font: inherit;
 299         padding: 0px;
 300 }
 301
 302 #sone .sone form.block button:hover, #sone .sone form.unblock button:hover, #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover {
 303         display: inline;
 304         color: rgb(255, 172, 0);
 305 }
 306
 307 #sone .sone .spacer {
 308         display: inline;
 309 }
 310
 311 #sone #create-sone {
 312
 313 }
 314
 315 #sone #tail .import-key, #sone #import-key .import-key {
 316         margin-top: 1em;
 317         border-top: solid 1px #ccc;
 318         padding-top: 1em;
 319         text-align: center;
 320         font-size: 75%;
 321         color: #888;
 322 }
 323
 324 #sone #import-key .import-key {
 325         border-top: none;
 326 }
 327
 328 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea {
 329         height: 1.5em;
 330 }
 331
 332 #sone #add-sone button {
 333         position: absolute;
 334 }
 335
 336 #sone .navigation {
 337         text-align: center;
 338 }
 339
 340 #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 {
 341         display: block;
 342         height: 1.5em;
 343         padding: 0.5ex;
 344         width: 3em;
 345         border: solid 1px #ccc;
 346         background-color: #f0f0ff;
 347 }
 348
 349 #sone .navigation .first, #sone .navigation .previous {
 350         float: left;
 351 }
 352
 353 #sone .navigation .current-page, #sone .navigation .total-pages {
 354         margin-top: 0.5ex;
 355         display: inline;
 356 }
 357
 358 #sone .navigation .total-pages:before {
 359         content: '/ ';
 360 }
 361
 362 #sone .navigation .next, #sone .navigation .last {
 363         float: right;
 364 }
 365
 366 #sone h1 {
 367         font-family: inherit;
 368         font-size: 200%;
 369         font-weight: bold;
 370 }
 371
 372 #sone .error label {
 373         color: red;
 374         font-weight: bold;
 375 }
 376
 377 #sone input.default {
 378         color: #888;
 379 }
 380
 381 #sone input[type=text].key {
 382         width: 130ex;;
 383         font-size: 75%;
 384 }