0 Persons are tagged with #888

#888

dredmorbius@joindiaspora.com
Doc Morbius (moved to Glasswings)

OK, what's changed in Diaspora's CSS / classes?

I've got a local stylesheet which bumps up the size of the comment editor while I'm in it, and which should wait 30s to resize it back to normal after navigating out of it.

That asymmetric resizing broke as of yesterday -- the dialog collapses instantly as I navigate out of it. I spent a few minutes trying to suss it out but no dice. Suspect I'll need to re-do my CSS fully. Sigh.

The style I had been using (I think):

#publisher publisher_textarea_wrapper textarea,
form.new_status_message textarea,
form.new_comment textarea,
form.new_message textarea {
    /* Our long delay */
    -webkit-transition-delay: 30s;
    -webkit-transition-duration: 1s;
    -webkit-transition-property: height,background,color;
    background-color: #f0f0e6;
    color: #888;
    font-family: courier;
    font-size: 14pt;
    height: auto;
    max-height: 20em;
    min-height: 2.8em;
    min-width: 630px;
    overflow-y: scroll;
}

Something in that is no longer applying.

#diaspora #help #css

2 Comments
dredmorbius@joindiaspora.com
Doc Morbius (moved to Glasswings)

Some Diaspora #CSS hacks

Those who've followed me from G+ may be aware of my somewhat extensive restyling of the default stylesheet there. A rather thankless task given the 1) frequent changes to the underlying CSS classnames and 2) the utterly unintelligible state of those names. I've largely given up on that.

But there are some tweaks to the Diaspora stylesheet I've been making. The most recent is an automatic embiggening of the default post and comment dialogs on hover. The transitions are Webkit-specific, see the w3c.org transitions page for other browser engines. You can drop this into your Stylebot or Styleish CSS for joindiaspora.com (or other node):

.stream_element .new_comment_form_wrapper {
    width: auto;
    height: auto;
    overflow: visible;
;
}

form.new_status_message textarea, form.new_comment textarea {
    min-width: 640px;
    font-size: 14pt;
    font-family: courier;
    min-height: 2.8em;
    max-height: 20em;
    height: auto;
    overflow-y: scroll;
    background-color: #f0f0e6;
    color: #888;
    _overflow: visible;
}

form.new_status_message:hover textarea, .new_comment_form_wrapper:hover .new_comment textarea {
    height: 31em;
    color: black;
    background-color: white;
    -webkit-transition-property: height,background,color;
    -webkit-transition-duration: 0.75s;
    -webkit-transition-delay: 0.2s
;
}

What this does:

  • Emwidens the dialog by default.
  • Expands the text dialog on hover. There's a delay (1/4 second) and a transition effect (3/4 second) for fun.
  • When not hovered, background and foreground text are both muted slightly.

I'd still like to have a reverse transition which smooths out the transition back to default, but this works for now.

My full present stylesheet follows:

p, li, dd, dt, blockquote {
    font-size: 14pt;
}

.container, .span-24 {
    width: 1400px;
}

.span-13 {
    width: 900px;
}

.span-15 {
    width: 800px;
}

.span-18 {
    width: 800px;
}

.span-6, .span-6 p, .span-6 li, .span-6 dd, .span-6 dt, .span-6 blockquote {
    font-size: 12pt;
}

.rightBar .section .content {
    color: black;
    font-size: 12pt;
}

.info {
    font-size: 100%;
}

.grey, .time, .timeago, .via {
    color: #333;
}

.post-content > div:first-child > div:first-line {
    font-weight: bold;
}

.post-content > div:first-child > div:first-letter {
    float: left;
    color: #903;
    text-transform: uppercase;
    font-size: 50px;
    line-height: 40px;
    padding-top: 4px;
    padding-right: 4px;
    padding-left: 3px;
    font-family: georgia, times, serif;
    text-shadow: 1px 1px 0px #fff, 4px 4px 0 #ccc;
}

#faq .question .answer {
    font-size: 14pt;
}

.stream_element .new_comment_form_wrapper {
    _width: 600px;
    width: auto;
    height: auto;
    overflow: visible;
    _outline: solid 4px red
;
}

form.new_status_message textarea, form.new_comment textarea {
    min-width: 640px;
    font-size: 14pt;
    font-family: courier;
    min-height: 2.8em;
    max-height: 20em;
    height: auto;
    overflow-y: scroll;
    background-color: #f0f0e6;
    color: #888;
    _overflow: visible;
}

form.new_status_message:hover textarea, .new_comment_form_wrapper:hover .new_comment textarea {
    height: 31em;
    color: black;
    background-color: white;
    -webkit-transition-property: height,background,color;
    -webkit-transition-duration: 0.75s;
    -webkit-transition-delay: 0.2s
;
}

h1 {
    font-size: 180%;
}

.row-fluid .span6 {
    width: 38%;
}

div#single-post-interactions.span6 {
    width: 60%;
}

#hovercard {
    height: 140px;
}

#publisher_textarea_wrapper #hide_publisher {
    right: 30px;
}
One person like that
2 Comments