アトトックラボ

2011年1月05日

Redmine の CSS を Safari 専用にカスタマイズ

Posted by Nobuyuki Sato

1. http://code.grid.in.th/ から Safari Extension の User CSS をダウンロードしてインストールする。
2. 以下の Mac の UI ライクにするコードを Redmine の URL 向け (http://foo-bar/*) にコピペ。

body {
	background-color: #f0f0f0 !important;
	font-family: meiryo !important;
	font-size: 0.8em !important;
}

h1, h2, h3, h4 { font-family: meiryo !important; }

#wrapper {
	border-bottom: 1px solid #cccccc;
	font-family: meiryo !important;
	font-size: 10pt !important;

}

#top-menu {
	border-bottom: 1px solid #646464;
	background: -webkit-gradient(linear, left top, left bottom, from(#bfbfbf), to(#979797)) !important;
	text-shadow: 0 1px 0 #e0e0e0 !important;
}

#top-menu a {
	color: #333333 !important;
}

#loggedas {
	color: #333333 !important;
}

#header {
	height: 100px !important;
	margin: 0 !important;
	padding: 0 !important;
	background-image: url('ロゴファイルのURL') !important;
	background-position: left top !important;
	background-repeat: no-repeat !important;
	background-color: #ffffff !important;
	color: #333333 !important;
}

#header a { color: #333333 !important; }

#header h1 {
	margin: 0 0 0 0px !important;
	padding: 38px 0 0 218px !important;
	font-size: 1.2em !important;
}

#quick-search {
	margin: 0 !important;
	padding: 38px 0 0 0 !important;
}

#main-menu {
	top: 100 !important;
	left: 0 !important;
	width: 100% !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#d9d9d9)) !important;
	border-top: 1px solid #aaa !important;
	border-bottom: 1px solid #aaa !important;
	text-shadow: 0 1px 0 #fff !important;
	color: #666 !important;
}

#main-menu li a {
	color: #666 !important;
}

#main-menu li a.selected, #main-menu li a:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#bfbfbf), to(#979797)) !important;
	text-shadow: 0 1px 0 #e0e0e0 !important;
	color: #333333 !important;
}

ロゴファイルは環境に合わせて変更する必要がありますので悪しからず。