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;
}
