summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2019-09-09 11:48:59 +0200
committerYorhel <git@yorhel.nl>2019-09-09 11:49:01 +0200
commitb4be7c249edc6bdb9491059c97079b526cbb53e4 (patch)
tree93d4bca3063ca92b92f661c7de2a3a16508a1585
parent379c6921180b92c24fe6ade058ac083b3da61533 (diff)
CSS: Get rid of boxbg.png and Image::Magick dep in skingen.pl
Should improve page loading time, reduce server load and speed up CSS generation by a totally insignificant amount. I did run into some trouble with the removal of boxbg.png, because apparently there was something magical about that image that made browsers render it in a different color than the one specified upon creation. I've adjusted the boxbg color of the 'angel' skin accordingly, but other skins may also have a slight color difference with this change. Some details are at http://s.blicky.net/19/colortest.html
-rw-r--r--data/style.css40
-rw-r--r--static/s/angel/conf2
-rwxr-xr-xutil/skingen.pl51
3 files changed, 52 insertions, 41 deletions
diff --git a/data/style.css b/data/style.css
index 19c52281..57cbbd30 100644
--- a/data/style.css
+++ b/data/style.css
@@ -14,7 +14,7 @@ a:hover,
table tr.odd,
table.stripe tbody tr:nth-child(odd):not(.nostripe),
-.docs table tbody tr:nth-child(odd) { background: url($_boxbg$) repeat; }
+.docs table tbody tr:nth-child(odd) { background: $boxbg$; }
#bgright { position: absolute; top: 0px; right: 0px; $_bgright$ }
#header { position: absolute; top: 80px; left: 400px; }
@@ -23,7 +23,7 @@ table.stripe tbody tr:nth-child(odd):not(.nostripe),
font-size: 24px;
font-style: italic;
border: none!important;
- $_maintitle$
+ color: $maintitle$;
}
#footer { margin: 15px auto 0 auto; text-align: center; color: $footer$; }
#footer a { color: $footer$; text-decoration: underline; }
@@ -64,7 +64,7 @@ div.warning h2, div.notice h2 { font-size: 12px; font-weight: bold; margin: 0; }
#dd_box li b { display: block; font-weight: normal; padding-left: 5px; }
#dd_box li i { display: block; font-style: normal; padding-left: 10px; padding-right: 5px }
#dd_box li a { display: block; padding-left: 10px; border: 0; padding-right: 5px }
-#dd_box li a:hover { background: url($_boxbg$) repeat }
+#dd_box li a:hover { background: $boxbg$ }
/* dropdown search */
#ds_box {
@@ -77,7 +77,7 @@ div.warning h2, div.notice h2 { font-size: 12px; font-weight: bold; margin: 0; }
z-index: 2
}
#ds_box b { padding: 2px 0 0 10px; }
-#ds_box tr.selected { background: url($_boxbg$) repeat; }
+#ds_box tr.selected { background: $boxbg$; }
#ds_box table { width: 100%; }
@@ -117,7 +117,7 @@ pre {
border: 1px dotted $border$;
border-right: none;
border-left: 1px solid $border$;
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
overflow-x: auto;
}
@@ -136,7 +136,7 @@ input.text, input.submit, select, textarea {
form, fieldset { border: 0; display: block; }
legend { display: none; }
optgroup option { padding-left: 10px; font-style: normal; }
-input.submit { background: url($_boxbg$) repeat; padding: 1px; }
+input.submit { background: $boxbg$; padding: 1px; }
input.text, select { width: 200px; }
fieldset.submit { width: 100%; text-align: center; margin: 5px; }
fieldset.submit input { width: 150px; }
@@ -159,9 +159,9 @@ table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; }
#menulist a { color: $maintext$; text-decoration: none; }
#menulist a:hover { border-bottom: 1px dotted $maintext$; }
#menulist { position: absolute; left: 30px; top: 190px; width: 150px; }
-#menulist div.menubox { margin: 0 0 10px 0; border: 1px solid $border$; background: url($_boxbg$) repeat; }
+#menulist div.menubox { margin: 0 0 10px 0; border: 1px solid $border$; background: $boxbg$; }
#menulist div.menubox div { padding: 2px 7px; }
-#menulist h2 { border-bottom: 1px solid $border$; background: url($_boxbg$) repeat; padding: 1px 3px; }
+#menulist h2 { border-bottom: 1px solid $border$; background: $boxbg$; padding: 1px 3px; }
#menulist h2, #menulist h2 a { font-size: 12px; color: $maintext$; }
#menulist h2 #lang_select { float: right; padding-top: 1px; }
#menulist dt { display: block; float: left; width: 93px; font-style: italic; }
@@ -196,7 +196,7 @@ div.mainbox, table.mainbox td {
border: 1px solid $border$;
margin: 21px 0 -10px 0;
padding: 5px;
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
}
.mainbox h1 { color: $boxtitle$; font-size: 21px; margin: -5px 0 15px 0; }
.mainbox h2.alttitle { color: $alttitle$; margin: -17px 0 15px 15px; font-weight: normal; }
@@ -244,7 +244,7 @@ ul.maintabs li.left b { float: left; margin-left: 0; margin-right: 10
ul.maintabs li b { margin-left: -2px; margin-right: -7px }
ul.maintabs li.left b { margin-left: -7px; margin-right: -2px }
ul.maintabs li.tabselected a,
-ul.maintabs li a:hover { background-color: $_blendbg$; color: $maintext$; padding-bottom: 6px }
+ul.maintabs li a:hover { background: $_blendbg$; color: $maintext$; padding-bottom: 6px }
ul.maintabs.bottom li.tabselected a,
ul.maintabs.bottom li a:hover { padding-bottom: 2px; padding-top: 5px; margin-top: 9px }
ul.maintabs.browsetabs li a { margin-left: 5px; color: $maintext$ }
@@ -288,7 +288,7 @@ p#searchtabs a:hover, p#searchtabs a.sel {
border: 1px solid $secborder$;
border-bottom: none;
padding: 1px 5px 2px 5px;
- background: $secbg$ url($_boxbg$) repeat;
+ background: $boxbg$;
}
#q { width: 600px }
#bq { width: 300px }
@@ -402,7 +402,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.releases table,
#screenshots table { width: 100%; }
.releases tr.lang td,
-#screenshots tr.rel td { background: url($_boxbg$) repeat; font-weight: bold; }
+#screenshots tr.rel td { background: $boxbg$; font-weight: bold; }
.releases td.tc1 { padding-left: 30px; width: 80px; }
.releases td.tc2 { text-align: center; width: 50px; }
.releases td.tc3 { text-align: right; padding: 0; width: 90px; }
@@ -415,7 +415,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.rllinks_dd span { color: $maintext$; padding-right: 10px }
#screenshots p.rel {
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
margin: 0;
padding: 2px;
font-weight: bold;
@@ -432,7 +432,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.summarize_more {
margin-top: 9px; margin-bottom: -10px; padding: 0; height: 15px;
border: 1px solid $border$; border-top: none;
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
text-align: center
}
@@ -497,9 +497,9 @@ div.scr_uploader { visibility: hidden; overflow: hidden; width: 1px; height:
.releases_compare table { margin: 0 auto; }
.releases_compare td { margin: 0 auto; border: 1px solid $border$; }
-.releases_compare td.bg { background: url($_boxbg$) repeat; }
+.releases_compare td.bg { background: $boxbg$; }
.releases_compare td.multi { vertical-align:middle; }
-.releases_compare .key { background: url($_boxbg$) repeat; }
+.releases_compare .key { background: $boxbg$; }
/****** VN browse ********/
@@ -517,7 +517,7 @@ div.scr_uploader { visibility: hidden; overflow: hidden; width: 1px; height:
/***** Producer page/list *******/
#prodrel { width: 100%; }
-#prodrel tr.vn td { background: url($_boxbg$) repeat; font-weight: bold; }
+#prodrel tr.vn td { background: $boxbg$; font-weight: bold; }
#prodrel tr.vn i,
#prodrel tr.vn span { display: none }
#prodrel.collapse tr.vn td { padding: 1px; background: none; font-weight: normal }
@@ -678,7 +678,7 @@ div.charsum_list .name i { float: right }
div.charsum_list .actor { border-top: 1px solid $border$; padding-top: 3px }
div.charsum_list .actor b.grayedout { margin-left: 10px }
div.charsum_list .charsum_bubble {
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
display: inline-block;
text-align: left;
vertical-align: top;
@@ -735,7 +735,7 @@ div.charsum_list .charsum_bubble {
.docs td[colspan]+td,
.docs td[colspan]+td+td { white-space: normal }
.docs p + p { padding-top: 10px }
-.docs ul.index { display: block; float: right; width: 170px; padding: 2px; margin: 0 0 10px 5px; background: url($_boxbg$) repeat; border: 1px solid $border$; }
+.docs ul.index { display: block; float: right; width: 170px; padding: 2px; margin: 0 0 10px 5px; background: $boxbg$; border: 1px solid $border$; }
.docs ul.index li { list-style-type: none; }
.docs ul.index li a { margin: 0 0 0 10px; }
.docs img { margin: 5px }
@@ -886,7 +886,7 @@ div#iv_view {
position: absolute;
top: 0px;
left: 0px;
- background: url($_boxbg$) repeat;
+ background: $boxbg$;
border: 1px solid $border$;
padding: 5px;
text-align: center;
diff --git a/static/s/angel/conf b/static/s/angel/conf
index eb858770..4fe674ac 100644
--- a/static/s/angel/conf
+++ b/static/s/angel/conf
@@ -21,7 +21,7 @@ tabbg #012 // background color of inactive tabs
secbg #0d2741 // secondary background color (used on input fields and table headers)
secborder #35A // secondary border color (used on input fields)
border #258 // primary border color
-boxbg #112233BC // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
+boxbg #071c30bc // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
// images (0 = no image)
imglefttop bg.jpg
diff --git a/util/skingen.pl b/util/skingen.pl
index 6648d6b6..7ed5f47e 100755
--- a/util/skingen.pl
+++ b/util/skingen.pl
@@ -1,12 +1,10 @@
#!/usr/bin/perl
-
package VNDB;
use strict;
use warnings;
use Cwd 'abs_path';
-use Image::Magick;
eval { require CSS::Minifier::XS };
our($ROOT, %S);
@@ -25,6 +23,33 @@ my $iconcss = do {
};
+sub imgsize {
+ open my $IMG, '<', $_[0] or die $!;
+ sysread $IMG, my $buf, 1024 or die $!;
+ $buf =~ /\xFF\xC0...(....)/s ? unpack('nn', $1) : $buf =~ /IHDR(.{8})/s ? unpack('NN', $1) : die;
+}
+
+
+sub rdcolor {
+ length $_[0] == 4 ? map hex($_)/15, $_[0] =~ /#(.)(.)(.)/ : #RGB
+ length $_[0] == 7 ? map hex($_)/255, $_[0] =~ /#(..)(..)(..)/ : #RRGGBB
+ length $_[0] == 9 ? map hex($_)/255, $_[0] =~ /#(..)(..)(..)(..)/ : #RRGGBBAA
+ die;
+}
+
+
+sub blend {
+ my($f, $b) = @_;
+ my @f = rdcolor $f;
+ my @b = rdcolor $b;
+ $f[3] //= 1;
+ sprintf '#%02x%02x%02x',
+ ($f[0] * $f[3] + $b[0] * (1 - $f[3]))*255,
+ ($f[1] * $f[3] + $b[1] * (1 - $f[3]))*255,
+ ($f[2] * $f[3] + $b[2] * (1 - $f[3]))*255;
+}
+
+
sub writeskin { # $name
my $name = shift;
my $skin = SkinFile->new("$ROOT/static/s", $name);
@@ -34,10 +59,8 @@ sub writeskin { # $name
# get the right top image
if($o{imgrighttop}) {
my $path = "/s/$name/$o{imgrighttop}";
- my $img = Image::Magick->new;
- $img->Read("$ROOT/static$path");
- $o{_bgright} = sprintf 'background: url(%s?%s) no-repeat; width: %dpx; height: %dpx',
- $path, $S{version}, $img->Get('width'), $img->Get('height');
+ my($h, $w) = imgsize "$ROOT/static$path";
+ $o{_bgright} = sprintf 'background: url(%s?%s) no-repeat; width: %dpx; height: %dpx', $path, $S{version}, $w, $h;
} else {
$o{_bgright} = 'display: none';
}
@@ -49,20 +72,8 @@ sub writeskin { # $name
$o{_bodybg} = sprintf 'background-color: %s', $o{bodybg};
}
- # main title
- $o{_maintitle} = $o{maintitle} ? "color: ".$o{maintitle} : 'display: none';
-
- # create boxbg.png
- my $img = Image::Magick->new(size => '1x1');
- $img->Read("xc:$o{boxbg}");
- $img->Write(filename => "$ROOT/static/s/$name/boxbg.png");
- $o{_boxbg} = "/s/$name/boxbg.png?$S{version}";
-
- # 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', $_*255), $img->GetPixel(x=>1,y=>1);
+ # boxbg blended with bodybg
+ $o{_blendbg} = blend $o{boxbg}, $o{bodybg};
# version
$o{version} = $S{version};