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