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 }
 114
 115 #sone .post:last-child {
 116         padding: 1ex 0px;
 117         border-bottom: none;
 118 }
 119
 120 #sone .post .author {
 121         display: inline;
 122         font-weight: bold;
 123 }
 124
 125 #sone .post .text {
 126         display: inline;
 127         white-space: pre-wrap;
 128 }
 129
 130 #sone .post .status-line {
 131         clear: both;
 132         margin-top: 0.5ex;
 133         font-size: 85%;
 134 }
 135
 136 #sone .post .time {
 137         display: inline;
 138         color: #666;
 139 }
 140
 141 #sone .post .delete {
 142         display: inline;
 143 }
 144
 145 #sone .post .delete button {
 146         font: inherit;
 147         border: 0px;
 148         background: none;
 149         padding: 0px;
 150         color: rgb(28, 131, 191);
 151 }
 152
 153 #sone .post .delete button:hover {
 154         font: inherit;
 155         border: 0px;
 156         background: none;
 157         padding: 0px;
 158         color: rgb(255, 172, 0);
 159         cursor: pointer;
 160 }
 161
 162 #sone .post .delete:before {
 163         content: ' ‧ ';
 164 }
 165
 166 #sone .post .replies {
 167         clear: both;
 168         padding-top: 0.2ex;
 169 }
 170
 171 #sone .post .reply {
 172         clear: both;
 173         background-color: #f0f0ff;
 174         font-size: 85%;
 175         margin: 1ex 0px;
 176         padding: 1ex;
 177 }
 178
 179 #sone .post .reply .time {
 180         float: none;
 181         display: inline;
 182         color: #666;
 183         font-size: inherit;
 184 }
 185
 186 #sone .post .show-reply-form {
 187         display: inline;
 188 }
 189
 190 #sone .post .show-reply-form span {
 191         color: rgb(28, 131, 191);
 192         cursor: pointer;
 193         font: inherit;
 194 }
 195
 196 #sone .post .show-reply-form span:hover {
 197         color: rgb(255, 172, 0);
 198 }
 199
 200 #sone .post .show-reply-form:before {
 201         content: ' ‧ ';
 202 }
 203
 204 #sone .post .reply .status-line .delete {
 205         float: none;
 206         display: inline;
 207 }
 208
 209 #sone .post .reply .status-line .delete:before {
 210         content: ' · ';
 211 }
 212
 213 #sone .post .create-reply {
 214         clear: both;
 215         background-color: #f0f0ff;
 216         padding: 0.5ex;
 217 }
 218
 219 #sone .post .create-reply input[type=text] {
 220         margin-left: 0.5ex;
 221         width: 50em;
 222 }
 223
 224 #sone .post .create-reply textarea {
 225         margin-left: 0.5ex;
 226         width: 50em;
 227         height: 4em;
 228 }
 229
 230 #sone .post .create-reply button {
 231         float: right;
 232 }
 233
 234 #sone .sone {
 235         clear: both;
 236         background-color: #f0f0ff;
 237         border: 1px solid #ccc;
 238         margin-bottom: 0.5ex;
 239         padding: 0.5ex;
 240 }
 241
 242 #sone .sone .profile-link {
 243         display: block;
 244 }
 245
 246 #sone .sone .short-request-uri {
 247         clear: both;
 248         float: right;
 249 }
 250
 251 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
 252         display: none;
 253 }
 254
 255 #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 {
 256         display: inline;
 257         float: right;
 258         border: solid 1px #ccc;
 259         border-right: none;
 260         border-top: none;
 261         padding: 0 0.5ex;
 262         position: relative;
 263         right: -0.5ex;
 264         top: -0.5ex
 265 }
 266
 267 #sone .sone .last-update {
 268         float: right;
 269         display: inline;
 270 }
 271
 272 #sone .sone .modified-marker, #sone .sone .unknown-marker {
 273         color: red;
 274         font-weight: bold;
 275 }
 276
 277 #sone .sone form {
 278         display: inline;
 279         border: solid 1px #ccc;
 280         border-left: none;
 281         border-bottom: none;
 282         padding: 0 0.5ex;
 283         position: relative;
 284         left: -0.5ex;
 285         bottom: -0.5ex
 286 }
 287
 288 #sone .sone form.block button, #sone .sone form.unblock button, #sone .sone form.follow button, #sone .sone form.unfollow button {
 289         display: inline;
 290         color: rgb(28, 131, 191);
 291         background: none;
 292         border: none;
 293         font: inherit;
 294         padding: 0px;
 295 }
 296
 297 #sone .sone form.block button:hover, #sone .sone form.unblock button:hover, #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover {
 298         display: inline;
 299         color: rgb(255, 172, 0);
 300 }
 301
 302 #sone .sone .spacer {
 303         display: inline;
 304 }
 305
 306 #sone #create-sone {
 307
 308 }
 309
 310 #sone #tail .import-key, #sone #import-key .import-key {
 311         margin-top: 1em;
 312         border-top: solid 1px #ccc;
 313         padding-top: 1em;
 314         text-align: center;
 315         font-size: 75%;
 316         color: #888;
 317 }
 318
 319 #sone #import-key .import-key {
 320         border-top: none;
 321 }
 322
 323 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea {
 324         height: 1.5em;
 325 }
 326
 327 #sone #add-sone button {
 328         position: absolute;
 329 }
 330
 331 #sone h1 {
 332         font-family: inherit;
 333         font-size: 200%;
 334         font-weight: bold;
 335 }
 336
 337 #sone .error label {
 338         color: red;
 339         font-weight: bold;
 340 }
 341
 342 #sone input.default {
 343         color: #888;
 344 }
 345
 346 #sone input[type=text].key {
 347         width: 130ex;;
 348         font-size: 75%;
 349 }