TwitterのuserContent.cssとか書いた

f:id:dzfl:20100129190114p:image

某eqeがWindows7でAeroアロエ言ってて妬ましくてやった。無駄な時間だったと思っている。

背景はid:cho45の写真を使わせてもらった。ありがとう。cho45++

CSSこんな感じ。Firefoxは3.6とかで。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://twitter.com/"),
url("https://twitter.com/") {

a,a:visited {
color : #fff !important;
text-decoration:none !important;
}
a:hover {
color : #fff !important;
text-decoration:underline !important;
}
a#more{
color:#000 !important;
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.2) 40%) !important;
}

body{
color : #EDEDED;
text-align:center;
font:.75em 'Lucida Grande',sans-serif;
background:#000 !important;
background-image: url(http://img.f.hatena.ne.jp/images/fotolife/d/dzfl/20100129/20100129190117_original.png), url(http://img.f.hatena.ne.jp/images/fotolife/d/dzfl/20100129/20100129190116_original.png), url(http://img.f.hatena.ne.jp/images/fotolife/d/dzfl/20100129/20100129190115_original.png) !important;
background-repeat: no-repeat, repeat-x, repeat !important;
background-position: top center, top center, top center !important;
background-attachment: fixed, fixed, fixed !important;
}

#container{
}

#side{
color : #EDEDED;
}
.column,
.round-right,
#side_base{
color : #fff;
background: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(27,27,27,0.4) 40%) !important;
border:rgba(255,255,255,0.2) solid;
border-width:1px 1px 1px 0;
}

#footer,
.top-navigation{
background: rgba(0,0,0,0.7) !important;
border:rgba(255,255,255,0.3) solid 1px;
}
.top-navigation>li>a{
font-weight:bold !important;
text-shadow: black 2px 2px 2px !important;
}

#content{
color : #fff;
background-image: url(http://img.f.hatena.ne.jp/images/fotolife/d/dzfl/20100129/20100129190118_original.png) !important;
background-repeat: no-repeat !important;
background-position: top center !important;
background-attachment: fixed !important;
border:rgba(255,255,255,0.2) solid !important;
border-width:1px 0 1px 1px !important;
-moz-border-radius-topleft:10px !important;
}

.wrapper{
background: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(27,27,27,0.4) 40%) !important;
border-width:0 !important;
-moz-border-radius-topleft:10px !important;
}

.content-bubble-arrow{
opacity:0.2;
}

.profile-pic{
opacity:0.7;
}
.share-text,
ol.statuses li:hover,ol.statuses li.perma-hover,ol.statuses li.hover{
background: rgba(0,0,0,0.4) !important;
}

ol.statuses li.status,ol.statuses li.direct_message{
border:rgba(255,255,255,0.2) solid !important;
border-width:0 0 1px 0 !important;
}

.bar h3 label{
color:#ffffff !important;
text-shadow: #000 2px 2px 2px !important;
}

input,textarea{
color:#ffffff !important;
background: rgba(0,0,0,0.4) !important;
}
textarea{
-moz-border-radius:10px;
}

a#results_update{
background-color:rgba(255,255,170,0.4) !important;
border:rgba(255,255,170,0.7) solid !important;
border-width: 1px 0 !important;
}
a#results_update:hover{
background-color:rgba(255,255,170,0.7) !important;
}

body,
ul#tabMenu li a, #side .section h1,
#side .stat a,
#side .stats a span.stats_count,
#side div.section-header h1,
#side div.user_icon a,
#side div.user_icon a:hover,
#side div.section-header h3.faq-header,
ul.sidebar-menu li.active a,
li.verified-profile a,
#side .promotion a,
body #content .list-header h2,
p.list-numbers a,
.bar h3 label,
body.timeline #content h1,
.list-header h2 a span,
#content .tabMenu li.active a,
body#direct_messages #content .tabMenu #inbox_tab a,
body#inbox #content .tabMenu #inbox_tab a,
body#sent #content .tabMenu #sent_tab a,
body#direct_messages #content .tabMenu #inbox_tab a,
body#retweets_by_others #content .tabMenu #retweets_by_others_tab a,
body#retweets #content .tabMenu #retweets_tab a,
body#retweeted_by_others #content .tabMenu #retweeted_by_others_tab a,
body#retweeted_of_mine #content .tabMenu #retweeted_of_mine_tab a,
.translator-profile a,
#owners_lists h2 a,
body#show #content .meta a.screen-name,
#content .shared-content .screen-name,
#content .meta .byline a,
a,
#content tr.hentry:hover a,
body#profile #content div.hentry:hover a,
#side .stats a:hover span.stats_count,
#side div.user_icon a:hover,
li.verified-profile a:hover,
#side .promotion .definition strong,
p.list-numbers a:hover,
#side div.user_icon a:hover span,
#content .tabMenu li a,
.translator-profile a:hover,
#local_trend_locations li a,
.modal-content .list-slug {
  color: #fff !important;
}

}

何がむかつくってtwitterのHTML/CSSがそびえ立つ糞なことですかね。もっと書き方あるだろう!と。twitterに倣って整理された書き方とかはしてない。場当たり指向で。大体できたから細かいとこはドウデモイイ精神で。所詮自分しか見ないし。

にしてもCSS3すごいね。パワフルだね。multiple backgroud-imageとかlinear-gradientとかもう馬鹿じゃねーのって感じですね! あぁだめだ。CSS3が現役になったらもうついていけない絶対。

一徹してこんなん書いてるけど職探し中なんだぜコイツ……。