summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJakub Narebski <jnareb@gmail.com>2006-06-20 14:58:12 (GMT)
committerJunio C Hamano <junkio@cox.net>2006-06-20 21:01:13 (GMT)
commit1f1ab5f05b8e8b45545d8a406d64887f772a69da (patch)
treefee0c9857e6ce39fdfba2ef558d2589862ebb975
parent7bedd9fc811df1fd865cebdae016f2f278501cc5 (diff)
downloadgit-1f1ab5f05b8e8b45545d8a406d64887f772a69da.zip
git-1f1ab5f05b8e8b45545d8a406d64887f772a69da.tar.gz
git-1f1ab5f05b8e8b45545d8a406d64887f772a69da.tar.bz2
gitweb: style done with stylesheet
Replace (almost) all 'style' attributes with 'class' attribute and adding rule to CSS file. Some tables use CSS for styling instead of legacy styling attributes. [jc: too many rejects -- hand fixed and reindented]
-rwxr-xr-xgitweb/gitweb.cgi80
-rw-r--r--gitweb/gitweb.css320
2 files changed, 246 insertions, 154 deletions
diff --git a/gitweb/gitweb.cgi b/gitweb/gitweb.cgi
index dd228ba..44896bb 100755
--- a/gitweb/gitweb.cgi
+++ b/gitweb/gitweb.cgi
@@ -252,6 +252,19 @@ sub unquote {
return $str;
}
+# CSS class for given age value (in seconds)
+sub age_class {
+ my $age = shift;
+
+ if ($age < 60*60*2) {
+ return "age0";
+ } elsif ($age < 60*60*24*2) {
+ return "age1";
+ } else {
+ return "age2";
+ }
+}
+
sub git_header_html {
my $status = shift || "200 OK";
my $expires = shift;
@@ -600,13 +613,13 @@ sub git_diff_print {
while (my $line = <$fd>) {
chomp($line);
my $char = substr($line, 0, 1);
- my $color = "";
+ my $diff_class = "";
if ($char eq '+') {
- $color = " style=\"color:#008800;\"";
+ $diff_class = " add";
} elsif ($char eq "-") {
- $color = " style=\"color:#cc0000;\"";
+ $diff_class = " rem";
} elsif ($char eq "@") {
- $color = " style=\"color:#990099;\"";
+ $diff_class = " chunk_header";
} elsif ($char eq "\\") {
# skip errors
next;
@@ -617,7 +630,7 @@ sub git_diff_print {
$line =~ s/\t/$spaces/;
}
}
- print "<div class=\"pre\"$color>" . esc_html($line) . "</div>\n";
+ print "<div class=\"diff$diff_class\">" . esc_html($line) . "</div>\n";
}
}
close $fd;
@@ -849,7 +862,7 @@ sub git_project_list {
close $fd;
print "</div>\n";
}
- print "<table cellspacing=\"0\">\n" .
+ print "<table class=\"project_list\">\n" .
"<tr>\n";
if (!defined($order) || (defined($order) && ($order eq "project"))) {
@projects = sort {$a->{'path'} cmp $b->{'path'}} @projects;
@@ -888,15 +901,7 @@ sub git_project_list {
print "<td>" . $cgi->a({-href => "$my_uri?" . esc_param("p=$pr->{'path'};a=summary"), -class => "list"}, esc_html($pr->{'path'})) . "</td>\n" .
"<td>$pr->{'descr'}</td>\n" .
"<td><i>" . chop_str($pr->{'owner'}, 15) . "</i></td>\n";
- my $colored_age;
- if ($pr->{'commit'}{'age'} < 60*60*2) {
- $colored_age = "<span style =\"color: #009900;\"><b><i>$pr->{'commit'}{'age_string'}</i></b></span>";
- } elsif ($pr->{'commit'}{'age'} < 60*60*24*2) {
- $colored_age = "<span style =\"color: #009900;\"><i>$pr->{'commit'}{'age_string'}</i></span>";
- } else {
- $colored_age = "<i>$pr->{'commit'}{'age_string'}</i>";
- }
- print "<td>$colored_age</td>\n" .
+ print "<td class=\"". age_class($pr->{'commit'}{'age'}) . "\">" . $pr->{'commit'}{'age_string'} . "</td>\n" .
"<td class=\"link\">" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$pr->{'path'};a=summary")}, "summary") .
" | " . $cgi->a({-href => "$my_uri?" . esc_param("p=$pr->{'path'};a=shortlog")}, "shortlog") .
@@ -1240,7 +1245,7 @@ sub git_blame {
print "<div class=\"page_path\"><b>" . esc_html($file_name) . "</b></div>\n";
print "<div class=\"page_body\">\n";
print <<HTML;
-<table style="border-collapse: collapse;">
+<table class="blame">
<tr>
<th>Commit</th>
<th>Age</th>
@@ -1261,7 +1266,7 @@ HTML
my $data;
my $age;
my $age_str;
- my $age_style;
+ my $age_class;
chomp $line;
$line_class_num = ($line_class_num + 1) % $line_class_len;
@@ -1273,16 +1278,14 @@ HTML
$lineno = $4;
$data = $5;
} else {
- print qq( <tr><td colspan="5" style="color: red; background-color: yellow;">Unable to parse: $line</td></tr>\n);
+ print qq( <tr><td colspan="5" class="error">Unable to parse: $line</td></tr>\n);
next;
}
$short_rev = substr ($long_rev, 0, 8);
$age = time () - $time;
$age_str = age_string ($age);
$age_str =~ s/ /&nbsp;/g;
- $age_style = 'font-style: italic;';
- $age_style .= ' color: #009900; background: transparent;' if ($age < 60*60*24*2);
- $age_style .= ' font-weight: bold;' if ($age < 60*60*2);
+ $age_class = age_class($age);
$author = esc_html ($author);
$author =~ s/ /&nbsp;/g;
# escape tabs
@@ -1293,15 +1296,14 @@ HTML
}
}
$data = esc_html ($data);
- $data =~ s/ /&nbsp;/g;
print <<HTML;
<tr class="$line_class[$line_class_num]">
- <td style="font-family: monospace;"><a href="$my_uri?${\esc_param ("p=$project;a=commit;h=$long_rev")}" class="text">$short_rev..</a></td>
- <td style="$age_style">$age_str</td>
+ <td class="sha1"><a href="$my_uri?${\esc_param ("p=$project;a=commit;h=$long_rev")}" class="text">$short_rev..</a></td>
+ <td class="$age_class">$age_str</td>
<td>$author</td>
- <td style="text-align: right;"><a id="$lineno" href="#$lineno" class="linenr">$lineno</a></td>
- <td style="font-family: monospace;">$data</td>
+ <td class="linenr"><a id="$lineno" href="#$lineno" class="linenr">$lineno</a></td>
+ <td class="pre">$data</td>
</tr>
HTML
} # while (my $line = <$fd>)
@@ -1646,7 +1648,7 @@ sub git_tree {
print "<tr class=\"light\">\n";
}
$alternate ^= 1;
- print "<td style=\"font-family:monospace\">" . mode_str($t_mode) . "</td>\n";
+ print "<td class=\"mode\">" . mode_str($t_mode) . "</td>\n";
if ($t_type eq "blob") {
print "<td class=\"list\">" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$t_hash$base_key;f=$base$t_name"), -class => "list"}, esc_html($t_name)) .
@@ -1912,7 +1914,7 @@ sub git_commit {
"<tr>" .
"<td></td><td> $ad{'rfc2822'}";
if ($ad{'hour_local'} < 6) {
- printf(" (<span style=\"color: #cc0000;\">%02d:%02d</span> %s)", $ad{'hour_local'}, $ad{'minute_local'}, $ad{'tz_local'});
+ printf(" (<span class=\"atnight\">%02d:%02d</span> %s)", $ad{'hour_local'}, $ad{'minute_local'}, $ad{'tz_local'});
} else {
printf(" (%02d:%02d %s)", $ad{'hour_local'}, $ad{'minute_local'}, $ad{'tz_local'});
}
@@ -1920,10 +1922,10 @@ sub git_commit {
"</tr>\n";
print "<tr><td>committer</td><td>" . esc_html($co{'committer'}) . "</td></tr>\n";
print "<tr><td></td><td> $cd{'rfc2822'}" . sprintf(" (%02d:%02d %s)", $cd{'hour_local'}, $cd{'minute_local'}, $cd{'tz_local'}) . "</td></tr>\n";
- print "<tr><td>commit</td><td style=\"font-family:monospace\">$co{'id'}</td></tr>\n";
+ print "<tr><td>commit</td><td class=\"sha1\">$co{'id'}</td></tr>\n";
print "<tr>" .
"<td>tree</td>" .
- "<td style=\"font-family:monospace\">" .
+ "<td class=\"sha1\">" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=tree;h=$co{'tree'};hb=$hash"), class => "list"}, $co{'tree'}) .
"</td>" .
"<td class=\"link\">" . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=tree;h=$co{'tree'};hb=$hash")}, "tree") .
@@ -1933,7 +1935,7 @@ sub git_commit {
foreach my $par (@$parents) {
print "<tr>" .
"<td>parent</td>" .
- "<td style=\"font-family:monospace\">" . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=commit;h=$par"), class => "list"}, $par) . "</td>" .
+ "<td class=\"sha1\">" . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=commit;h=$par"), class => "list"}, $par) . "</td>" .
"<td class=\"link\">" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=commit;h=$par")}, "commit") .
" | " . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=commitdiff;h=$hash;hp=$par")}, "commitdiff") .
@@ -1958,7 +1960,7 @@ sub git_commit {
}
if ($line =~ m/^ *(signed[ \-]off[ \-]by[ :]|acked[ \-]by[ :]|cc[ :])/i) {
$signed = 1;
- print "<span style=\"color: #888888\">" . esc_html($line) . "</span><br/>\n";
+ print "<span class=\"signoff\">" . esc_html($line) . "</span><br/>\n";
} else {
$signed = 0;
print format_log_line_html($line) . "<br/>\n";
@@ -1970,7 +1972,7 @@ sub git_commit {
print(($#difftree + 1) . " files changed:\n");
}
print "</div>\n";
- print "<table cellspacing=\"0\">\n";
+ print "<table class=\"diff_tree\">\n";
my $alternate = 0;
foreach my $line (@difftree) {
# ':100644 100644 03b218260e99b78c6df0ed378e59ed9205ccc96d 3b93d5e7cc7f7dd4ebed13a5cc1a4ad976fc94d8 M ls-files.c'
@@ -1998,12 +2000,12 @@ sub git_commit {
}
print "<td>" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$to_id;hb=$hash;f=$file"), -class => "list"}, esc_html($file)) . "</td>\n" .
- "<td><span style=\"color: #008000;\">[new " . file_type($to_mode) . "$mode_chng]</span></td>\n" .
+ "<td><span class=\"file_status new\">[new " . file_type($to_mode) . "$mode_chng]</span></td>\n" .
"<td class=\"link\">" . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$to_id;hb=$hash;f=$file")}, "blob") . "</td>\n";
} elsif ($status eq "D") {
print "<td>" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$from_id;hb=$hash;f=$file"), -class => "list"}, esc_html($file)) . "</td>\n" .
- "<td><span style=\"color: #c00000;\">[deleted " . file_type($from_mode). "]</span></td>\n" .
+ "<td><span class=\"file_status deleted\">[deleted " . file_type($from_mode). "]</span></td>\n" .
"<td class=\"link\">" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$from_id;hb=$hash;f=$file")}, "blob") .
" | " . $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=history;h=$hash;f=$file")}, "history") .
@@ -2011,7 +2013,7 @@ sub git_commit {
} elsif ($status eq "M" || $status eq "T") {
my $mode_chnge = "";
if ($from_mode != $to_mode) {
- $mode_chnge = " <span style=\"color: #777777;\">[changed";
+ $mode_chnge = " <span class=\"file_status mode_chnge\">[changed";
if (((oct $from_mode) & S_IFMT) != ((oct $to_mode) & S_IFMT)) {
$mode_chnge .= " from " . file_type($from_mode) . " to " . file_type($to_mode);
}
@@ -2047,7 +2049,7 @@ sub git_commit {
}
print "<td>" .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$to_id;hb=$hash;f=$to_file"), -class => "list"}, esc_html($to_file)) . "</td>\n" .
- "<td><span style=\"color: #777777;\">[moved from " .
+ "<td><span class=\"file_status moved\">[moved from " .
$cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$from_id;hb=$hash;f=$from_file"), -class => "list"}, esc_html($from_file)) .
" with " . (int $similarity) . "% similarity$mode_chng]</span></td>\n" .
"<td class=\"link\">" .
@@ -2407,7 +2409,7 @@ sub git_search {
my $match = esc_html($2) || "";
my $trail = esc_html($3) || "";
$trail = chop_str($trail, 30, 10);
- my $text = "$lead<span style=\"color:#e00000\">$match</span>$trail";
+ my $text = "$lead<span class=\"match\">$match</span>$trail";
print chop_str($text, 80, 5) . "<br/>\n";
}
}
@@ -2456,7 +2458,7 @@ sub git_search {
while (my $setref = shift @files) {
my %set = %$setref;
print $cgi->a({-href => "$my_uri?" . esc_param("p=$project;a=blob;h=$set{'id'};hb=$co{'id'};f=$set{'file'}"), class => "list"},
- "<span style=\"color:#e00000\">" . esc_html($set{'file'}) . "</span>") .
+ "<span class=\"match\">" . esc_html($set{'file'}) . "</span>") .
"<br/>\n";
}
print "</td>\n" .
diff --git a/gitweb/gitweb.css b/gitweb/gitweb.css
index 4378067..ac6a3c7 100644
--- a/gitweb/gitweb.css
+++ b/gitweb/gitweb.css
@@ -1,230 +1,320 @@
body {
- font-family: sans-serif;
- font-size: 12px;
- border:solid #d9d8d1;
- border-width: 1px;
- margin: 10px;
- background-color: #ffffff;
- color: #000000;
+ font-family: sans-serif;
+ font-size: 12px;
+ border:solid #d9d8d1;
+ border-width: 1px;
+ margin: 10px;
+ background-color: #ffffff;
+ color: #000000;
}
a {
- color: #0000cc;
+ color: #0000cc;
}
a:hover, a:visited, a:active {
- color: #880000;
+ color: #880000;
}
div.page_header {
- height: 25px;
- padding: 8px;
- font-size: 18px;
- font-weight: bold;
- background-color: #d9d8d1;
+ height: 25px;
+ padding: 8px;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #d9d8d1;
}
div.page_header a:visited, a.header {
- color: #0000cc;
+ color: #0000cc;
}
div.page_header a:hover {
- color: #880000;
+ color: #880000;
}
div.page_nav {
- padding:8px;
+ padding:8px;
}
div.page_nav a:visited {
- color: #0000cc;
+ color: #0000cc;
}
div.page_path {
- padding: 8px;
- border: solid #d9d8d1;
- border-width: 0px 0px 1px;
+ padding: 8px;
+ border: solid #d9d8d1;
+ border-width: 0px 0px 1px;
}
div.page_footer {
- height: 17px;
- padding: 4px 8px;
- background-color: #d9d8d1;
+ height: 17px;
+ padding: 4px 8px;
+ background-color: #d9d8d1;
}
div.page_footer_text {
- float: left;
- color: #555555;
- font-style: italic;
+ float: left;
+ color: #555555;
+ font-style: italic;
}
div.page_body {
- padding: 8px;
+ padding: 8px;
}
div.title, a.title {
- display: block;
- padding: 6px 8px;
- font-weight: bold;
- background-color: #edece6;
- text-decoration: none;
- color: #000000;
+ display: block;
+ padding: 6px 8px;
+ font-weight: bold;
+ background-color: #edece6;
+ text-decoration: none;
+ color: #000000;
}
a.title:hover {
- background-color: #d9d8d1;
+ background-color: #d9d8d1;
}
div.title_text {
- padding: 6px 0px;
- border: solid #d9d8d1;
- border-width: 0px 0px 1px;
+ padding: 6px 0px;
+ border: solid #d9d8d1;
+ border-width: 0px 0px 1px;
}
div.log_body {
- padding: 8px 8px 8px 150px;
+ padding: 8px 8px 8px 150px;
}
span.age {
- position: relative;
- float: left;
- width: 142px;
- font-style:italic;
+ position: relative;
+ float: left;
+ width: 142px;
+ font-style: italic;
+}
+
+div.page_body span.signoff {
+ color: #888888;
}
div.log_link {
- padding: 0px 8px;
- font-size: 10px;
- font-family: sans-serif;
- font-style:normal;
- position: relative;
- float: left;
- width: 136px;
+ padding: 0px 8px;
+ font-size: 10px;
+ font-family: sans-serif;
+ font-style: normal;
+ position: relative;
+ float: left;
+ width: 136px;
}
div.list_head {
- padding: 6px 8px 4px;
- border: solid #d9d8d1;
- border-width: 1px 0px 0px;
- font-style: italic;
+ padding: 6px 8px 4px;
+ border: solid #d9d8d1;
+ border-width: 1px 0px 0px;
+ font-style: italic;
}
a.list {
- text-decoration: none;
- color: #000000;
+ text-decoration: none;
+ color: #000000;
}
a.list:hover {
- text-decoration: underline;
- color: #880000;
+ text-decoration: underline;
+ color: #880000;
}
a.text {
- text-decoration: none;
- color: #0000cc;
+ text-decoration: none;
+ color: #0000cc;
}
a.text:visited {
- text-decoration: none;
- color: #880000;
+ text-decoration: none;
+ color: #880000;
}
a.text:hover {
- text-decoration: underline;
- color: #880000;
+ text-decoration: underline;
+ color: #880000;
}
table {
- padding: 8px 4px;
+ padding: 8px 4px;
+}
+
+table.project_list, table.diff_tree {
+ border-spacing: 0;
+}
+
+table.blame {
+ border-collapse: collapse;
}
th {
- padding: 2px 5px;
- font-size: 12px;
- text-align: left;
+ padding: 2px 5px;
+ font-size: 12px;
+ text-align: left;
}
tr.light:hover {
- background-color: #edece6;
+ background-color: #edece6;
}
tr.dark {
- background-color: #f6f6f0;
+ background-color: #f6f6f0;
}
tr.dark:hover {
- background-color: #edece6;
+ background-color: #edece6;
}
-
td {
- padding: 2px 5px;
- font-size: 12px;
- vertical-align:top;
+ padding: 2px 5px;
+ font-size: 12px;
+ vertical-align: top;
}
td.link {
- padding: 2px 5px;
- font-family: sans-serif;
- font-size: 10px;
+ padding: 2px 5px;
+ font-family: sans-serif;
+ font-size: 10px;
+}
+
+td.sha1 {
+ font-family: monospace;
+}
+
+td.error {
+ color: red;
+ background-color: yellow;
+}
+
+table.diff_tree span.file_status.new {
+ color: #008000;
+}
+
+table.diff_tree span.file_status.deleted {
+ color: #c00000;
+}
+
+table.diff_tree span.file_status.moved,
+table.diff_tree span.file_status.mode_chnge {
+ color: #777777;
+}
+
+/* age2: 60*60*24*2 <= age */
+table.project_list td.age2, table.blame td.age2 {
+ font-style: italic;
+}
+
+/* age1: 60*60*2 <= age < 60*60*24*2 */
+table.project_list td.age1 {
+ color: #009900;
+ font-style: italic;
}
-div.pre {
- font-family: monospace;
- font-size: 12px;
- white-space: pre;
+table.blame td.age1 {
+ color: #009900;
+ background: transparent;
+}
+
+/* age0: age < 60*60*2 */
+table.project_list td.age0 {
+ color: #009900;
+ font-style: italic;
+ font-weight: bold;
+}
+
+table.blame td.age0 {
+ color: #009900;
+ background: transparent;
+ font-weight: bold;
+}
+
+td.pre, div.pre, div.diff {
+ font-family: monospace;
+ font-size: 12px;
+ white-space: pre;
+}
+
+td.mode {
+ font-family: monospace;
+}
+
+div.diff.add {
+ color: #008800;
+}
+
+div.diff.rem {
+ color: #cc0000;
+}
+
+div.diff.chunk_header {
+ color: #990099;
}
div.diff_info {
- font-family: monospace;
- color: #000099;
- background-color: #edece6;
- font-style: italic;
+ font-family: monospace;
+ color: #000099;
+ background-color: #edece6;
+ font-style: italic;
}
div.index_include {
- border: solid #d9d8d1;
- border-width: 0px 0px 1px;
- padding: 12px 8px;
+ border: solid #d9d8d1;
+ border-width: 0px 0px 1px;
+ padding: 12px 8px;
}
div.search {
- margin: 4px 8px;
- position: absolute;
- top: 56px;
- right: 12px
+ margin: 4px 8px;
+ position: absolute;
+ top: 56px;
+ right: 12px
+}
+
+td.linenr {
+ text-align: right;
}
a.linenr {
- color: #999999;
- text-decoration: none
+ color: #999999;
+ text-decoration: none
}
a.rss_logo {
- float: right;
- padding: 3px 0px;
- width: 35px;
- line-height: 10px;
- border: 1px solid;
- border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
- color: #ffffff;
- background-color: #ff6600;
- font-weight: bold;
- font-family: sans-serif;
- font-size: 10px;
- text-align: center;
- text-decoration: none;
+ float: right;
+ padding: 3px 0px;
+ width: 35px;
+ line-height: 10px;
+ border: 1px solid;
+ border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
+ color: #ffffff;
+ background-color: #ff6600;
+ font-weight: bold;
+ font-family: sans-serif;
+ font-size: 10px;
+ text-align: center;
+ text-decoration: none;
}
a.rss_logo:hover {
- background-color: #ee5500;
+ background-color: #ee5500;
}
span.tag {
- padding: 0px 4px;
- font-size: 10px;
- font-weight: normal;
- background-color: #ffffaa;
- border: 1px solid;
- border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
+ padding: 0px 4px;
+ font-size: 10px;
+ font-weight: normal;
+ background-color: #ffffaa;
+ border: 1px solid;
+ border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
+}
+
+span.atnight {
+ color: #cc0000;
+}
+
+span.match {
+ color: #e00000;
}