summaryrefslogtreecommitdiff
path: root/util
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2008-12-21 11:26:56 +0100
committerYorhel <git@yorhel.nl>2008-12-21 11:26:56 +0100
commit7ad6213b615f925684bd5afd52f064c7e29653fa (patch)
tree5d8fd58812ede4d574c7970e4d414009792e16a9 /util
parent4b89163955f33bfb49b774de48a701daebec374f (diff)
Basic skin generator + example skin for testing
How it works: Create new directory in static/s/ Create a 'conf' file (see the test skin for a template) Run skingen.pl, which will generate a style.css and boxbg.png This process will probably be automated using a simple web interface or something... There's no skin selector yet, so Util/LayoutHTML.pm has to be modified to view the generated skin.
Diffstat (limited to 'util')
-rwxr-xr-xutil/skingen.pl264
1 files changed, 264 insertions, 0 deletions
diff --git a/util/skingen.pl b/util/skingen.pl
new file mode 100755
index 00000000..2c50ac76
--- /dev/null
+++ b/util/skingen.pl
@@ -0,0 +1,264 @@
+#!/usr/bin/perl
+
+use strict;
+use warnings;
+use Cwd 'abs_path';
+use Data::Dumper 'Dumper';
+use Image::Magick;
+
+
+our $ROOT;
+BEGIN { ($ROOT = abs_path $0) =~ s{/util/skingen\.pl$}{}; }
+
+
+if(@ARGV) {
+ writeskin(readskin($_)) for (@ARGV);
+} else {
+ /([^\/]+)$/ && writeskin(readskin($1)) for (glob($ROOT.'/static/s/*'));
+}
+
+
+sub readskin { # skin name
+ my $name = shift;
+ my %o;
+ open my $F, '<', $ROOT.'/static/s/'.$name.'/conf' or die $!;
+ while(<$F>) {
+ chomp;
+ s{[\t\s]*//.+$}{};
+ next if !/^([a-z0-9]+)[\t\s]+(.+)$/;
+ $o{$1} = $2;
+ }
+ close $F;
+ return \%o;
+}
+
+
+sub writeskin { # $obj
+ my $o = shift;
+ open my $F, '>', $ROOT.'/static/s/'.$o->{name}.'/style.css' or die $!;
+
+ # fix image locations
+ $o->{$_} && ($o->{$_} = '/s/'.$o->{name}.'/'.$o->{$_}) for (qw|imglefttop imgrighttop|);
+
+ # get the right top image
+ if($o->{imgrighttop}) {
+ my $img = Image::Magick->new;
+ $img->Read($ROOT.'/static'.$o->{imgrighttop});
+ $o->{_bgright} = sprintf 'background: url(%s) no-repeat; width: %dpx; height: %dpx',
+ $o->{imgrighttop}, $img->Get('width'), $img->Get('height');
+ } else {
+ $o->{_bgright} = 'display: none';
+ }
+
+ # body background
+ if(!$o->{imglefttop}) {
+ $o->{_bodybg} = "background-image: none; background-color: $o->{bodybg}";
+ } else {
+ $o->{_bodybg} = "background: $o->{bodybg} url($o->{imglefttop}) no-repeat";
+ }
+
+ # create boxbg.png
+ my $img = Image::Magick->new(size => '1x1');
+ $img->Read('xc:'.$o->{boxbg});
+ $img->Write(filename => $ROOT.'/static/s/'.$o->{name}.'/boxbg.png');
+ $o->{_boxbg} = '/s/'.$o->{name}.'/boxbg.png';
+
+ # get the blend color
+ $img = Image::Magick->new(size => '1x1');
+ $img->Read('xc:'.$o->{bodybg}, 'xc:'.$o->{boxbg});
+ $img = $img->Flatten();
+ $o->{_blendbg} = '#'.join '', map sprintf('%02x', $_*256), $img->GetPixel(x=>1,y=>1);
+
+ my $d = join '', (<DATA>);
+ $d =~ s/\$$_\$/$o->{$_}/g for (keys %$o);
+ print $F $d;
+ close $F;
+}
+
+
+1;
+
+
+__DATA__
+/* main background image and color */
+body {
+ $_bodybg$
+}
+
+
+/* main text color */
+body,
+#maincontent .releases td.tc5 a,
+#maincontent #jt_box_categories li li a {
+ color: $maintext$; /* maintext */
+}
+
+
+/* menu link and secondary title color */
+a,
+#maincontent p.browseopts a,
+#maincontent h2.alttitle,
+#menulist h2,
+#menulist h2 a,
+#maincontent p.browseopts a {
+ color: $alttitle$; /* alttitle */
+}
+a:hover {
+ border-bottom: 1px dotted $alttitle$; /* alttitle */
+}
+
+
+/* main link color */
+#maincontent div.mainbox a {
+ color: $link$; /* link */
+}
+
+
+/* transparent image (used in multiple layers, so has to be transparent) */
+div#iv_view,
+#jt_box_visual_novels span.odd,
+#jt_box_producers span.odd,
+#ds_box tr.selected,
+.releases tr.lang td,
+#screenshots tr.rel td,
+#menulist div.menubox,
+#maincontent div.mainbox,
+table tr.odd,
+.docs ul.index,
+input.submit,
+#menulist h2 {
+ background: url($_boxbg$) repeat; /* Box BG */
+}
+
+
+/* bg color of the tabs */
+#maincontent ul.maintabs li a {
+ background-color: $tabbg$; /* tabbg */
+}
+
+/* the color you get when blending the transparent image on the body bg */
+#maincontent ul.maintabs li.tabselected a,
+#maincontent ul.maintabs li a:hover {
+ background-color: $_blendbg$; /* blendbg */
+}
+
+
+/* the small image on the top-right (make sure to update the image size) */
+#bgright {
+ $_bgright$
+}
+
+
+/* site title */
+#header h1, #header h1 a {
+ color: $maintitle$; /* maintitle */
+}
+
+
+/* footer text color */
+#footer, #footer a {
+ color: $footer$; /* footer */
+}
+
+
+/* darkened/grayed-out text color */
+#maincontent h1.boxtitle,
+#maincontent h1.boxtitle a,
+div.mainbox.discussions td.tags a,
+div.thread i.edit,
+div.thread i.lastmod,
+div.thread i.deleted,
+div.mainbox.history td.editsum,
+#maincontent h1,
+.docs dt b {
+ color: $border$!important; /* border */
+}
+
+
+/* stand-out text color */
+b.future, p.locked {
+ color: $standout$; /* standout */
+}
+
+
+/* primary border color (usually the same as above) */
+#maincontent div.mainbox,
+#menulist div.menubox,
+#menulist h2,
+#maincontent ul.maintabs li a,
+#maincontent ul.maintabs.bottom li a,
+p.browseopts a,
+div.thread td,
+div.thread td.tc1,
+div.vndescription h2,
+#screenshots td.scr a:hover img,
+#ds_box,
+#scr_table td,
+#advoptions,
+.docs ul.index,
+div.revision div,
+div.revision table,
+div.revision table td,
+div#iv_view {
+ border-color: $border$; /* border */
+}
+
+/* same color is also used for the vote graph */
+.votegraph td div {
+ background-color: $border$; /* border */
+}
+
+
+
+/* secondary bg color */
+table thead td, input.text, input.submit, select, textarea {
+ background-color: $secbg$; /* secbg */
+}
+
+/* secondary border color */
+input.text, input.submit, select, textarea {
+ border: 1px solid $secborder$; /* secborder */
+}
+
+
+/* status colors */
+b.done, ul#catselect li li.inc { color: $statok$ } /* statok */
+b.todo, ul#catselect li li.exc { color: $statnok$ } /* statnok */
+#screenshots td.scr div.nsfw img { border-color: $statnok$ } /* statnok */
+
+
+
+
+
+/****** Not too sure what to do with these *******/
+
+
+
+/* category levels - calculate from maintext? */
+.catlvl_1 { color: #444 }
+.catlvl_2 { color: #777 }
+.catlvl_3 { color: #fff }
+
+
+/* bg color of the dropdown search and revision tables (use an other already existing color?) */
+#ds_box, div.revision div, div.revision table {
+ background-color: #13273a;
+}
+
+
+/* warning and notice boxes - the maintext color must be readable on these... */
+div.warning {
+ background-color: #534;
+ border: 1px solid #C00;
+}
+div.notice {
+ background-color: #354;
+ border: 1px solid #0C0;
+}
+
+
+/* diff colors - calculate from maintext? */
+.diff_add { background-color: #354; }
+.diff_del { background-color: #534; }
+
+