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.

5 files changed, 289 insertions, 6 deletions

diff --git a/.gitignore b/.gitignore
index 4ce94ab6..59f221ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 /data/config.pl
 /data/log/
+/static/s/*/style.css
+/static/s/*/boxbg.png
 /static/cv/
 /static/rg/
 /static/sf/
diff --git a/lib/VNDB/Util/LayoutHTML.pm b/lib/VNDB/Util/LayoutHTML.pm
index e5ced8f6..0c125b35 100644
--- a/lib/VNDB/Util/LayoutHTML.pm
+++ b/lib/VNDB/Util/LayoutHTML.pm
@@ -19,6 +19,7 @@ sub htmlHeader { # %options->{ title, js, noindex, search }
     title $o{title};
     Link rel => 'shortcut icon', href => '/favicon.ico', type => 'image/x-icon';
     Link rel => 'stylesheet', href => $self->{url_static}.'/f/style.css', type => 'text/css', media => 'all';
+    Link rel => 'stylesheet', href => $self->{url_static}.'/s/test/style.css', type => 'text/css', media => 'all';
     if($o{js}) {
       script type => 'text/javascript', src => $self->{url_static}.'/f/forms.js'; end;
     }
diff --git a/static/f/style.css b/static/f/style.css
index 92062a76..cbb012f5 100644
--- a/static/f/style.css
+++ b/static/f/style.css
@@ -116,7 +116,7 @@ optgroup option {
   font-style: normal;
 }
 input.submit {
-  background-color: #123;
+  background: url(/f/boxbg.png) repeat;
   padding: 1px;
 }
 input.text, select {
@@ -229,14 +229,14 @@ b.future {
 #menulist div.menubox {
   margin: 0 0 10px 0;
   border: 1px solid #258;
-  background: url(boxbg.png) repeat;
+  background: url(/f/boxbg.png) repeat;
 }
 #menulist div.menubox div {
   padding: 2px 7px;
 }
 #menulist h2 {
   border-bottom: 1px solid #258;
-  background-color: #234;
+  background: url(/f/boxbg.png) repeat;
   padding: 1px 3px;
 }
 #menulist h2, #menulist h2 a {
@@ -549,7 +549,7 @@ div.vndetails table dd {
   margin-left: 90px;
 }
 .catlvl_0, .catlvl_1, .catlvl_2, .catlvl_3 { font-style: normal; }
-.catlvl_1 { color: #444!important }
+.catlvl_1 { color: #444 }
 .catlvl_2 { color: #777 }
 .catlvl_3 { color: #fff }
 div.vndetails td.relations dt {
@@ -688,7 +688,6 @@ a.help {
   padding-left: 1px;
 }
 #maincontent #jt_box_categories li li a {
-  color: #ccc;
   text-decoration: none;
   display: block;
   width: 160px;
@@ -961,7 +960,6 @@ div.revision div, div.revision table {
   border: 1px solid #258;
   margin: 0 auto;
   width: 90%;
-  /*background: url(/f/boxbg.png) repeat;*/
   background-color: #13273a;
   clear: both;
 }
diff --git a/static/s/test/conf b/static/s/test/conf
new file mode 100644
index 00000000..d7e19420
--- /dev/null
+++ b/static/s/test/conf
@@ -0,0 +1,18 @@
+name        test
+fullname    Testlayout
+bodybg      #000  // main background color
+maintext    #ddd  // primary text color
+alttitle    #fff  // alternative title + menu link color
+link        #7bd  // primary link color
+tabbg       #012  // background color of inactive tabs
+maintitle   #123  // text color of the site title
+footer      #123  // text color of the footer
+border      #258  // primary border color
+standout    #e44  // color of 'stand-out' text
+secbg       #135  // secondary background color (used on input fields and table headers)
+secborder   #35A  // secondary border color (used on input fields)
+statok      #0c0  // generic 'ok' text color (used for vnlist statuses & category browser)
+statnok     #c00  // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
+boxbg       #112233BC   // RGBA, background color of the boxes.
+imglefttop  0 // bg.jpg
+imgrighttop 0 // bgright.jpg
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; }
+
+