Smart FriendFeed Theme CSS

sukkiri-friendfeed.css

@-moz-document domain("friendfeed.com") {
/****  friendfeedをシンプルにするあれ ****/
/*既知の問題:  [todo] autopagerizeでサムネイル画像が消える件 */

/** 投稿欄を見えなくする(できればjsで要素をなくしたい) **/
.sharebox {
   display: none !important;
}

/** 上下幅を弄るにはまずこれ **/
/* これだけでも手軽に詰められるっぽい */
.entry {
  line-height: 1.2em !important; 
}

/* 投稿を細くする */
.entry {
    /* 縦の余白を少なく */
    padding-top: 2px  !important;
    padding-bottom: 4px  !important;
}


/*** ポストをすっきりさせる ***/
div.info .l_comment,  /* 「コメント」をなくす */
div.info span.like,       /* 「お気に入り」をなくす */
div.info .l_share,        /* 「共有」をなくす */
div.info .l_hideone      /* 「非表示」をなくす */
 {
   display: none !important;
}
/* 付加情報の余計なものの色を見えなくする。
CSSですでに色が設定されているものは視えるはず */
div.info {
   color: white !important;
}


/* アイコン小さく */
.l_profile img.picture {
    width: 32px  !important;
    height: 32px  !important;
}
/* アイコン小さくした分 左に寄せる */
.entry .body {
    margin-left: 41px;
}

/*  複数行のところを 1行にしたい */
div.ebody .name {
  /* 左寄せ */
  float: left !important;
}
div.ebody .title {
  /* 左寄せ */
/*  float: left !important;  画像が右にずれる */
  /* 寄せると勝手に小さくなるのでスペースを確保 */
/*  width: 100% !important; 画像が表示されなくなる？？？ */
}

/* 回りこみ解除したい */
div.entry:after {
   /* 上手く行っていない気がする */
    clear: both !important; 
}
div.info:after {
  clear: right !important; 
}
div.entry {
  /* 箱からはみ出るのを防止したい */
  overflow:hidden; 
}


/* 「～からのエントリー その他x件 」と 「コメント」のズレを防止 */
.clusterlink, .comments {
  /* 左寄せされているときに右にずれるので解除 */
  clear: left !important; 
  /* ちょっとインデント */ 
  margin-left: 1.0em  !important;
}


/* 詰まりすぎなので位置調整系 */
/* 名前 */
.entry .title .name {
  margin-right: 8px !important; 
}


/* 境界線をぎりぎりまで薄く */
.entry {
   /* 微妙にディスプレイによりけり #f9f9f9 とかだと薄くなる */
    border-bottom: 1px solid #f0f0f0 !important;
}


/* 1行にしたら視認性が悪いので、日付やフィード元の表示を目立つように */
div.info {
  /* background-color: #f6f6f6 !important; 隠れた情報が見えてしまうのでヤメ */
}
div.info > :first-child {
  /* 左側詰まり過ぎなので少し空ける */
  /* margin-left: 8px !important; 一行でないならしなくてよいのでは？ */
}
div.info .date, div.info .service {
  background-color: #f2f2f2 !important; 
  /* 角丸っぽく */
  border-radius: 4px !important; 
  padding-right: 4px !important; 
  padding-left: 4px !important; 
}



/*** ヘッダーをすっきり化 ***/
/* ロゴ消し */
#header .logo {
  display: none !important;
}

/* ヘッダーを上下詰める */
#header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 検索欄を広く */ 
#header > table {
  /* 上手くいかない */
  widht: 80% !important;
}

/***  サイドバーを隠しておいて折りたたみ ***/
#sidebar {
/*  width: 20px !important; */
/*  margin: 50px 0px 0px 0px !important;*/
/*  padding: 5px 0px 0px 0px !important;*/
  width: 180px !important;
  margin-right: -200px !important;
  padding: 16px !important;
  padding-left: 32px !important;
  padding-right: 16px !important;
  /* hoverで位置が変わるのを防ぐ */
  position: absolute !important;
  /* position: fixed !important; メニューが長いといまいち*/
  /* position:abosolute だと左によるので右に配置 */
  right: 0px !important;
  top: 8px !important;
  /* 背景が透けるので塗りつぶし*/
  background: #fff !important;
  /* 外枠に影つけるとよいのでは */
  box-shadow: 0 0 4px #eee !important; 


  /* やっぱり常に表示*/
  padding-left: 16px !important;
  margin-right: 0px !important;

  /* 少しだけ丸くしたい年頃*/
  border-radius: 4px !important; 
  /* position: fixed だと画面外になるので、スクロールできるように */
  /* overflow: scroll !important;  position: fixedだとだめぽい */
}
/*#sidebar:hover { */ /* マウスを乗せると大きく表示 */
#sidebar:hover{
/*  width: 200px !important;*/
  padding-left: 16px !important;
  margin-right: 0px !important;
  z-index: 50 !important;
  /* 外枠に影つけるとよいのでは */
  box-shadow: 0 0 16px #888 !important; 
}
/* メインコンテンツを広く */
#body {
/*  margin-right: 40px !important; メニューを隠す場合はこちら*/
  margin-right: 210px !important;
}

#container {
  /* */
  min-width: 90% !important;
  padding-left: 2em !important;
}

/* サイドバーのプロフィール邪魔なので整理 */
/* アイコン外す */
#sidebar #profile td.image{
  display: none !important;
}
/* 名前外す */
#sidebar #profile .name{
  display: none !important;
}

/* サイドバーを上下幅を詰める */
#sidebar .box , #sidebar #profile { 
  margin-bottom: 2px !important;
}

}