Skip to content

Instantly share code, notes, and snippets.

@CrBoy
Created September 12, 2011 06:31
Show Gist options
  • Save CrBoy/1210693 to your computer and use it in GitHub Desktop.
Save CrBoy/1210693 to your computer and use it in GitHub Desktop.
Plurk CSS (original by howar31)
這個 CSS 樣式表最初由 howar31 製作, CrBoy 為了記錄改寫的過程所以放上 gist.github。
This stylesheet is originally made by howar31. CrBoy put it on gist.github for modifying and improving.
/* Design by Howar31 http://about.me/howar31 */
/* 喜歡本佈景的噗友歡迎使用並自行做小修改以符合個人需求,但希望能保留原作者Howar31的署名,感謝:D */
/* Welcome to use and modify this CSS theme. Please do not remove the name of designer, Howar31. Thanks. :D */
/* 本佈景在 Ubuntu 11.04 Eclipse 3.7.0 底下開發完成,Chrome 15.0.865.0 dev 完整測試 */
/* 因使用大量CSS3語法,各家瀏覽器支援度不同: Chrome可以顯示本佈景所有的功能,Firefox或Opera僅有極少部份不支援,而IE瀏覽器完全沒測試且不支援大部分功能 */
body {
width: 100% !important;
min-width: 800px !important;
min-height: 600px !important;
}
/* 頂端左上角和右上角的連結顏色 */
#top_login a,
#top_bar a {
color: #EEEEEE !important;
}
#top_login a:hover,
#top_bar a:hover {
color: #CC0000 !important;
background: none !important;
text-shadow: 0px 0px 10px white;
}
/* 噗浪怪物,可以換成自己的Logo */
#dynamic_logo, #logo {
/* 圖檔網址 */
background: url("");
/* 請依序輸入 圖檔寬度 圖檔高度 */
background-size: 0px 0px;
/* width是圖檔寬度 */
width: 0px !important;
/* height是圖檔高度 */
height: 0px !important;
position: absolute !important;
/* top請輸入: (600 - 圖檔高度) */
top: 0px !important;
right: 0px !important;
left: auto !important;
}
/* 河道 */
/* 河道主框架,可以換成自己的背景 */
#timeline_holder {
/* 圖檔位置 */
background-image: none;
background-color: #EEEEEE;
/* 漸層背景只有webkit支援 */
background: -webkit-gradient(linear, 50% 60%, 50% 100%, from(#EEEEEE), to(#AAAAAA));
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
/* 河道內整體噗浪框架 */
#timeline_cnt {
top: 100px !important;
height: 500px !important;
}
.div_inner {
height: 580px !important;
}
.small_timeline,
.small_timeline #timeline_holder {
height: 600px !important;
}
#timeline_bg .day_start {
width: 0px !important;
height: 0px !important;
overflow: hidden !important;
}
#timeline_holder,
#timeline_bg {
height: 600px !important;
}
/* 底部時間條 */
#bottom_line {
top: 602px !important;
background: rgba(0,0,0,0.1);
z-index: 100;
border-top: 1px solid #888888 !important;
border-bottom: 1px solid #999999 !important;
}
/* 浮動噗浪時間 */
.evening, .night, .day, .morning {
top: 603px !important;
border: 1px solid #888888 !important;
border-bottom: none !important;
background: #999999;
-moz-box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.8);
box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.8);
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#time_show span {
color: white !important;
}
/* 時間條時間 */
.div_bottom * {
color: #444444 !important;
z-index: 800;
}
/* 噗浪過濾按鈕 */
#filter_tab a.off_tab {
color: white !important;
border: 1px solid #888888 !important;
border-top: none !important;
background: #999999;
font-weight: bold;
text-shadow: 0px 0px 3px black;
-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#filter_tab a.off_tab:hover {
background: #666666;
font-weight: bold;
text-decoration:none;
color: white !important;
border: 1px solid #888888 !important;
border-top: none !important;
}
/* 噗浪過濾按鈕(選中) */
#filter_tab a.filter_selected {
color: black !important;
border: 1px solid #888888 !important;
border-top: none !important;
background: white;
font-weight: bold;
text-shadow: 0px 0px 3px #888888;
-moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.8);
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.8);
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 噗浪單體 */
.plurk .plurk_cnt {
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.6;
z-index: 825;
width: 110%;
}
.plurk_cnt:hover {
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
opacity:1;
}
.plurk_cnt .text_holder {
}
/* 噗浪者姓名 */
.plurk_cnt .name {
position: relative !important;
top: 22px;
font-size: 1.1em;
text-shadow: 0px 0px 3px white;
z-index: 855;
}
.list .plurk_cnt .name {
position: static !important;
}
/* 噗浪者頭像 */
.p_img {
position: relative !important;
top: -15px;
left: 15px;
z-index: 850;
}
.p_img img {
width: 35px !important;
height: 35px !important;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* 未讀噗浪 */
.new .plurk_cnt {
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
opacity: 1;
border: 1px solid #888888 !important;
}
/* 噗浪回文 */
.plurk_box {
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}
.plurk_box .caption {
color: white !important;
text-shadow: 0px 0px 3px black;
background-color: #CCCCCC !important;
font-weight: bold;
}
.plurk_box .plurk_cnt {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
opacity: 1;
}
.plurk {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* 噗浪右邊的點點點 */
.dots .inner {
background: none;
border: none;
color: black !important;
}
/* 回應計數 */
.response_count {
border: none !important;
background: none !important;
color: #EEEEEE !important;
position: relative !important;
top: -10px;
left: 10px;
text-shadow: 0px 0px 5px black;
font-size: 2em;
}
.new .response_count {
color: #EE0000 !important;
text-shadow: 0px 0px 5px white;
}
.plurk_icon {
z-index: 860;
}
/* 通知 */
#updater, #music_player {
top: 555px !important;
border: 1px solid #222222;
background: rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
#updater *, #music_player * {
color: white !important;
}
/* 向左向右回到最前按鈕 */
.browse_button {
top: 470px;
}
/* 發文訊息面板 */
.plurkaction.pane textarea {
max-height: 380px !important;
}
.plurkaction.pane {
position: fixed !important;
top: 30px !important;
right: 10px !important;
z-index: 910 !important;
overflow: hidden !important;
border: none !important;
max-height: 40px;
max-width: 170px;
background-image: none;
background-color: rgba(230,230,230,0.8);
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: max-height 1.0s ease-out 0.1s,
max-width 1.0s ease-out 0.1s;
-moz-transition: max-height 1.0s ease-out 0.2s,
max-width 1.0s ease-out 0.1s;
-o-transition: max-height 1.0s ease-out 0.1s,
max-width 1.0s ease-out 0.1s;
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.8);
}
.plurkaction.pane:hover {
max-height: 600px !important;
max-width: 900px !important;
}
textarea#input_big, #more_options .auto_ta, #more_options select, .clipboard {
border: 1px solid black;
}
/* 私噗設定面板 */
#more_options_link {
background-image: none;
background-color: rgba(200,200,200,0);
color: black !important;
border: none !important;
}
#more_options #more_options_holder {
background-image: none;
background-color: rgba(0,0,0,0.1);
color: black;
}
#more_options #more_options_holder .advert {
height: 0px !important;
width: 0px !important;
overflow: hidden;
}
.qual_menu:not(.mini_menu) {
top: 20px !important;
}
/* 個人資訊面板 */
#dashboard_holder {
width: 950px !important;
height: 0px !important;
}
#plurk-dashboard {
z-index: 900;
position: fixed !important;
left: -120px;
top: 25px;
height: auto;
width: auto;
overflow: visible;
background: none;
border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: left 0.5s ease-out 2s;
-moz-transition: left 0.5s ease-out 2s;
-o-transition: left 0.5s ease-out 2s;
}
#plurk-dashboard .dash-segment {
width: 250px;
padding: 5px;
min-height: 20px;
height: auto !important;
clear: both !important;
}
/* 資訊欄縮排 */
.dash-segment:nth-child(1)
{
position: relative !important;
width: 300px !important;
left: -60px;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
}
/* 卡馬欄縮排 */
.dash-segment:nth-child(2)
{
position: relative !important;
left: -25px;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
}
/* 好友粉絲欄縮排 */
.dash-segment:nth-child(3),
.dash-segment:nth-child(4)
{
position: relative !important;
left: -50px;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
}
.dash-segment:nth-child(1):hover,
.dash-segment:nth-child(2):hover,
.dash-segment:nth-child(3):hover,
.dash-segment:nth-child(4):hover
{
position: relative !important;
left: 120px;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
}
/* 各欄總設定 */
.segment-content {
font-size: 0.9em;
color: white !important;
padding: 3px 10px !important;
margin: 2px;
background-color: #AAAAAA;
background-color: rgba(150,150,150,0.8);
-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* 各欄標題 */
.segment-content h2 {
position: relative !important;
left: 160px;
color: #DDDDDD !important;
background: none !important;
font-size: 1.3em !important;
font-weight: bold;
text-shadow: 0px 0px 5px black;
}
/* 各欄內連結 */
.segment-content a {
color: #CC0000 !important;
text-decoration:none !important;
}
.segment-content a:hover {
color: #FF0000 !important;
}
/* 個人簡介欄 */
#dash-profile {
position: absolute;
margin-left: 175px;
height: 230px;
-webkit-transition: height 0.5s ease-out 0.5s;
-moz-transition: height 0.5s ease-out 0.5s;
-o-transition: height 0.5s ease-out 0.5s;
}
.profile-pic {
height: 100px;
width: 100px;
}
#dash-additional-info {
position: absolute;
top: 0px;
left: 10px;
width: 160px;
}
#relationship_container {
position: relative !important;
top: -10px;
}
/* 傳送私噗按鈕 */
#private_plurk {
position: relative !important;
top: -10px;
left: 0px;
height: 90% !important;
white-space:nowrap;
}
/* 卡馬狀態欄 */
#dash-stats {
height: 55px;
-webkit-transition: height 0.5s ease-out 0.5s;
-moz-transition: height 0.5s ease-out 0.5s;
-o-transition: height 0.5s ease-out 0.5s;
}
#dash-stats:hover {
height: 350px !important;
-webkit-transition: height 0.5s ease-out 0.5s;
-moz-transition: height 0.5s ease-out 0.5s;
-o-transition: height 0.5s ease-out 0.5s;
}
/* 卡馬 */
#dash-stats h3 {
margin: 0px 0px 0px 30px;
padding: 0px;
font-size: 2em;
white-space:nowrap !important;
}
#dash-stats h3 #karma_holder {
margin: 0px 0px 0px 30px;
font-size: 1.2em;
}
#dash-stats h3 #karma_holder #karma {
color: black !important;
text-shadow: 0px 0px 10px white;
font-weight: bold;
}
#dash-stats h3 #karma_holder #karma:hover {
color: white !important;
text-shadow: 0px 0px 10px yellow;
font-weight: bold;
}
/* 狀態數值 */
#dash-stats table td {
color: white !important;
font-weight: bold;
}
/* 卡馬趨勢圖 */
.karma_tooltip {
position: fixed !important;
top: 280px !important;
left: 280px !important;
}
/* 好友欄 */
/* 粉絲欄 */
#dash-friends,
#dash-fans {
height: 20px;
-webkit-transition: height 0.5s ease-out 0.5s;
-moz-transition: height 0.5s ease-out 0.5s;
-o-transition: height 0.5s ease-out 0.5s;
overflow: hidden !important;
}
#dash-friends:hover,
#dash-fans:hover {
height: 260px !important;
-webkit-transition: height 0.5s ease-out 0.5s;
-moz-transition: height 0.5s ease-out 0.5s;
-o-transition: height 0.5s ease-out 0.5s;
}
/* 社交按鈕群 */
.friend_man.private_plurk,
.friend_man.add_friend,
.friend_man.add_follow,
.friend_man.remove,
.friend_man.pending,
.friend_man.block
{
background: none !important;
border: none !important;
position: relative !important;
margin: 0px;
padding: 0px;
color: #DDDDDD !important;
}
/* 加入好友按鈕 */
/* 追蹤按鈕 */
#friend_managment,
#fan_managment {
position: relative !important;
top: 210px;
left: 0px;
width: 160px !important;
margin: 0px 0px !important;
}
/* 好友照片 */
#dash-friends-pics {
position: relative !important;
top: -10px;
}
/* 粉絲照片 */
#dash-fans-pics {
position: relative !important;
top: 0px;
}
/* 加入黑名單按鈕 */
.friend_man.block {
position: relative !important;
top: 225px;
}
/* 底部footer語言選擇版權宣告 */
#footer
{
width: auto !important;
position: fixed !important;
bottom: -70px;
right: 10px;
-webkit-transition: bottom 0.5s ease-out;
-moz-transition: bottom 0.5s ease-out;
-o-transition: bottom 0.5s ease-out;
}
#footer:hover {
bottom: -30px;
-webkit-transition: bottom 0.5s ease-out 3s;
-moz-transition: bottom 0.5s ease-out 3s;
-o-transition: bottom 0.5s ease-out 3s;
}
#footer * {
color: #444444 !important;
}
#footer #languge_selector {
position: absolute !important;
right: 10px;
top: -20px;
}
/* 噗浪內建視窗 */
/* 視窗標題 */
.GB_Window .header {
color: black !important;
border: 1px solid black !important;
}
.GB_Window .close,
.GB_Window .header td.caption {
background-color: rgba(0,0,0,0.8) !important;
}
/* 視窗內容 */
.GB_Window,
.GB_window,
.GB_Gallery .iframe_holder {
border: 1px solid #CCCCCC !important;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.GB_window .content {
border: none !important;
}
/* 噗浪單頁 */
div.bigplurk h1.content {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.8);
}
div.bigplurk div.time {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
}
/* 噗浪單頁導航 */
#plurk_nav {
position: absolute !important;
top: 20px;
width: 98%;
}
#plurk_nav a {
color: black;
border: 1px solid #AAAAAA;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
#plurk_nav a:hover {
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
/* 噗浪單頁回覆 */
#plurk_responses {
position: relative !important;
top: -300px;
}
#plurk_responses h2 {
text-shadow: 0px 0px 3px black;
font-weight: bold;
color: #EEEEEE !important;
background: none !important;
}
#plurk_responses ul.responses {
border: none !important;
background: none !important;
padding: 0px !important;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
#plurk_responses,
#plurk_responses .feed-link a {
background: none !important;
}
/* 噗浪單頁回覆表單 */
#reply #reply_box,
#reply #reply_box_holder {
background: none !important;
border: none;
}
#reply #reply_box .qual_holder {
color: #EEEEEE !important;
text-shadow: 0px 0px 3px black;
font-weight: bold;
}
/* 隱藏垃圾 */
#logo *,
#dynamic_logo *,
#dash-stats .link_arrow,
#dashboard-invite,
#dashboard-invite .cmp_invite,
#sharePlurk,
#sign_up,
#toggle_tab,
#tw_help,
#plurk_responses h2 a,
.adsense,
.dash-icon
{
position: fixed !important;
top: -1000px !important;
left: -1000px !important;
width: 0px !important;
height: 0px !important;
overflow: hidden;
}
/* 動畫設定,只有webkit和moz引擎支援 */
@-webkit-keyframes FADEIN{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes FADEIN{
0% { opacity: 0; }
100% { opacity: 1; }
}
body,
.plurk_box,
.AmiMenu,
.GB_window,
.GB_Window,
.plurkaction,
.plurk{
-webkit-animation-name: FADEIN;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 0.5s;
-moz-animation-name: FADEIN;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 0.5s;
}
/* 捲軸設定,只有webkit引擎支援 */
::-webkit-scrollbar {
background-color:#FFFFFF;
}
::-webkit-scrollbar-track {
background-color:#FEFEFE;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
-webkit-border-radius:10px;
}
::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb{
background-color: #EFEFEF;
-webkit-border-radius:10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.7);
}
::-webkit-scrollbar-thumb:active{
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* Welcome to use and modify this CSS theme. Please do not remove the name of designer, Howar31. Thanks. :D */
/* 喜歡本佈景的噗友歡迎使用並自行做小修改以符合個人需求,但希望能保留原作者Howar31的署名,感謝:D */
/* Design by Howar31 http://about.me/howar31 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment