summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2021-01-17 10:49:57 +0100
committerYorhel <git@yorhel.nl>2021-01-17 14:01:47 +0100
commit692ef20253a202d4eeb04d4a6491669dc6c30cb5 (patch)
tree6c55208710bdb0b422da090fa722768b42b39f64
parentc940802c172654efa6669cf2ff3161c8588f15b0 (diff)
Use SASS for CSS + static asset reoganization
Had been planning to use a more powerful preprocessor for CSS for a while, so that I can also reorganize and clean up the CSS a bit. The cleanup will come later, this is the first step to reorganize the build system a bit and remove skingen.pl. I moved all generated static assets to static/g/ (for _g_enerated), including icons.png and js files. This simplifies management of static/f/ and static/s/, which are fully in git. Skins are now defined as sass files in css/skins/ with their images in static/s/ using plain directory structure.
-rw-r--r--.gitignore17
-rw-r--r--Dockerfile3
-rw-r--r--Makefile52
-rw-r--r--README.md1
-rw-r--r--css/skins/air.sass40
-rw-r--r--css/skins/angel.sass43
-rw-r--r--css/skins/aselia_01.sass37
-rw-r--r--css/skins/carnevale.sass37
-rw-r--r--css/skins/eiel.sass36
-rw-r--r--css/skins/ever17_01.sass37
-rw-r--r--css/skins/fate_01.sass35
-rw-r--r--css/skins/fate_02.sass35
-rw-r--r--css/skins/grey.sass34
-rw-r--r--css/skins/higanbana.sass40
-rw-r--r--css/skins/higu.sass35
-rw-r--r--css/skins/lb.sass32
-rw-r--r--css/skins/lb_02.sass35
-rw-r--r--css/skins/primitive.sass37
-rw-r--r--css/skins/saya.sass37
-rw-r--r--css/skins/seinarukana.sass35
-rw-r--r--css/skins/taka.sass37
-rw-r--r--css/skins/teal.sass33
-rw-r--r--css/skins/term.sass32
-rw-r--r--css/skins/tsukihime.sass37
-rw-r--r--css/skins/tsukihime_02.sass35
-rw-r--r--css/v2.css (renamed from data/style.css)352
-rw-r--r--lib/VNDB/Config.pm2
-rw-r--r--lib/VNDB/Skins.pm16
-rw-r--r--lib/VNDB/Util/LayoutHTML.pm2
-rw-r--r--lib/VNWeb/HTML.pm6
-rw-r--r--static/s/air-bg.jpg (renamed from static/s/air/bg.jpg)bin78066 -> 78066 bytes
-rw-r--r--static/s/air-right.png (renamed from static/s/air/bgright.png)bin27189 -> 27189 bytes
-rw-r--r--static/s/air/conf32
-rw-r--r--static/s/angel-bg-xmas.jpg (renamed from static/s/angel/bg-xmas.jpg)bin45511 -> 45511 bytes
-rw-r--r--static/s/angel-bg.jpg (renamed from static/s/angel/bg.jpg)bin36419 -> 36419 bytes
-rw-r--r--static/s/angel-right.jpg (renamed from static/s/angel/bgright.jpg)bin4366 -> 4366 bytes
-rw-r--r--static/s/angel/conf37
-rw-r--r--static/s/aselia_01-right.jpg (renamed from static/s/aselia_01/bgright.jpg)bin107272 -> 107272 bytes
-rw-r--r--static/s/aselia_01/conf39
-rw-r--r--static/s/carnevale-right.jpg (renamed from static/s/carnevale/bgright.jpg)bin74285 -> 74285 bytes
-rw-r--r--static/s/carnevale/conf40
-rw-r--r--static/s/eiel-bg.jpg (renamed from static/s/eiel/bg.jpg)bin111656 -> 111656 bytes
-rw-r--r--static/s/eiel/conf40
-rw-r--r--static/s/ever17_01-right.jpg (renamed from static/s/ever17_01/bgright.jpg)bin73060 -> 73060 bytes
-rw-r--r--static/s/ever17_01/conf39
-rw-r--r--static/s/fate_01-bg.jpg (renamed from static/s/fate_01/bg.jpg)bin70918 -> 70918 bytes
-rw-r--r--static/s/fate_01/conf39
-rw-r--r--static/s/fate_02-bg.jpg (renamed from static/s/fate_02/bg.jpg)bin71968 -> 71968 bytes
-rw-r--r--static/s/fate_02/conf39
-rw-r--r--static/s/grey-bg.jpg (renamed from static/s/grey/bg.jpg)bin33434 -> 33434 bytes
-rw-r--r--static/s/grey-right.jpg (renamed from static/s/grey/bgright.jpg)bin3062 -> 3062 bytes
-rw-r--r--static/s/grey/conf37
-rw-r--r--static/s/higanbana-bg.jpg (renamed from static/s/higanbana/bg.jpg)bin71567 -> 71567 bytes
-rw-r--r--static/s/higanbana-right.png (renamed from static/s/higanbana/bgright.png)bin41295 -> 41295 bytes
-rw-r--r--static/s/higanbana/conf32
-rw-r--r--static/s/higu-bg.jpg (renamed from static/s/higu/bg.jpg)bin72231 -> 72231 bytes
-rw-r--r--static/s/higu/conf39
-rw-r--r--static/s/lb-bg.jpg (renamed from static/s/lb/bg.jpg)bin89041 -> 89041 bytes
-rw-r--r--static/s/lb/conf37
-rw-r--r--static/s/lb_02-bg.jpg (renamed from static/s/lb_02/bg.jpg)bin111856 -> 111856 bytes
-rw-r--r--static/s/lb_02/conf38
-rw-r--r--static/s/primitive-right.jpg (renamed from static/s/primitive/bgright.jpg)bin107494 -> 107494 bytes
-rw-r--r--static/s/primitive/conf40
-rw-r--r--static/s/saya-right.jpg (renamed from static/s/saya/bgright.jpg)bin73950 -> 73950 bytes
-rw-r--r--static/s/saya/conf40
-rw-r--r--static/s/seinarukana-bg.jpg (renamed from static/s/seinarukana/bg.jpg)bin70934 -> 70934 bytes
-rw-r--r--static/s/seinarukana/conf38
-rw-r--r--static/s/taka-right.jpg (renamed from static/s/taka/bgright.jpg)bin89059 -> 89059 bytes
-rw-r--r--static/s/taka/conf40
-rw-r--r--static/s/teal/conf34
-rw-r--r--static/s/term/conf37
-rw-r--r--static/s/tsukihime-bg.jpg (renamed from static/s/tsukihime/bg.jpg)bin70806 -> 70806 bytes
-rw-r--r--static/s/tsukihime-right.jpg (renamed from static/s/tsukihime/bgright.jpg)bin71879 -> 71879 bytes
-rw-r--r--static/s/tsukihime/conf39
-rw-r--r--static/s/tsukihime_02-bg.jpg (renamed from static/s/tsukihime_02/bg.jpg)bin103162 -> 103162 bytes
-rw-r--r--static/s/tsukihime_02/conf39
-rwxr-xr-xutil/jsgen.pl2
-rwxr-xr-xutil/skingen.pl99
-rwxr-xr-xutil/spritegen.pl4
79 files changed, 981 insertions, 1129 deletions
diff --git a/.gitignore b/.gitignore
index 1e1bcbdf..a858c2a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,22 +6,7 @@
/data/passwords.dat
/elm/elm-stuff/
/elm/Gen/
-/static/f/js/
-/static/f/icons.png
-/static/f/icons.opt.png
-/static/f/vndb.js
-/static/f/vndb.min.js
-/static/f/vndb.min.js.gz
-/static/f/elm.js
-/static/f/elm.min.js
-/static/f/elm.min.js.gz
-/static/f/plain.js
-/static/f/plain.min.js
-/static/f/plain.min.js.gz
-/static/s/*/style.css
-/static/s/*/style.min.css
-/static/s/*/style.min.css.gz
-/static/s/*/boxbg.png
+/static/g
/static/ch
/static/cv
/static/sf
diff --git a/Dockerfile b/Dockerfile
index 174b2c15..00648960 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,7 +1,7 @@
FROM alpine:3.13
MAINTAINER Yorhel <contact@vndb.org>
-ENV VNDB_DOCKER_VERSION=5
+ENV VNDB_DOCKER_VERSION=6
CMD /var/www/util/docker-init.sh
RUN apk add --no-cache \
@@ -19,6 +19,7 @@ RUN apk add --no-cache \
perl-module-build \
postgresql \
postgresql-dev \
+ sassc \
wget \
zlib-dev \
&& cpanm -nq \
diff --git a/Makefile b/Makefile
index 9f87f2f8..ad99c196 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,6 @@
#
# prod
# Create static assets for production. Requires the following additional dependencies:
-# - CSS::Minifier::XS
# - uglifyjs
# - zopfli
#
@@ -24,32 +23,32 @@
ALL_KEEP=\
static/ch static/cv static/sf static/st \
- data/log static/f www www/api \
+ data/log static/g www www/api \
data/conf.pl \
www/robots.txt static/robots.txt
ALL_CLEAN=\
- static/f/vndb.js \
- static/f/plain.js \
- static/f/elm.js \
+ static/g/vndb.js \
+ static/g/plain.js \
+ static/g/elm.js \
data/icons/icons.css \
sql/editfunc.sql \
- $(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.css/g')
+ $(shell ls css/skins/*.sass | sed -e 's/css\/skins\/\(.\+\)\.sass/static\/g\/\1.css/g')
PROD=\
- static/f/vndb.min.js static/f/vndb.min.js.gz \
- static/f/plain.min.js static/f/plain.min.js.gz \
- static/f/elm.min.js static/f/elm.min.js.gz \
- static/f/icons.opt.png \
- $(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css/g') \
- $(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css.gz/g')
+ static/g/vndb.min.js static/g/vndb.min.js.gz \
+ static/g/plain.min.js static/g/plain.min.js.gz \
+ static/g/elm.min.js static/g/elm.min.js.gz \
+ static/g/icons.opt.png \
+ $(shell ls css/skins/*.sass | sed -e 's/css\/skins\/\(.\+\)\.sass/static\/g\/\1.css.gz/g')
all: ${ALL_KEEP} ${ALL_CLEAN}
prod: all ${PROD}
clean:
rm -f ${ALL_CLEAN} ${PROD}
- rm -f static/f/icons.png
+ rm -f static/g/icons.png
+ rm -f static/f/{vndb,elm,plain}{,.min}.js{,.gz} static/f/icons{,.opt}.png static/s/*/style{,.min}.css{,.gz} static/s/*/boxbg.png
rm -rf elm/Gen/
rm -rf elm/elm-stuff/build-artifacts
$(MAKE) -C sql/c clean
@@ -64,7 +63,7 @@ static/ch static/cv static/sf static/st:
mkdir -p $@;
for i in $$(seq -w 0 1 99); do mkdir -p "$@/$$i"; done
-data/log www www/api static/f:
+data/log www www/api static/g:
mkdir -p $@
data/conf.pl:
@@ -84,29 +83,26 @@ chmod: all
# v2 & v2-rw
-data/icons/icons.css: data/icons/*.png data/icons/*/*.png util/spritegen.pl | static/f
+data/icons/icons.css: data/icons/*.png data/icons/*/*.png util/spritegen.pl | static/g
util/spritegen.pl
-static/f/icons.png: data/icons/icons.css
+static/g/icons.png: data/icons/icons.css
-static/f/icons.opt.png: static/f/icons.png
+static/g/icons.opt.png: static/g/icons.png
rm -f $@
zopflipng -m --lossy_transparent $< $@
-static/s/%/style.css: static/s/%/conf util/skingen.pl data/style.css data/icons/icons.css
- util/skingen.pl $*
-
-static/s/%/style.min.css: static/s/%/style.css
- perl -MCSS::Minifier::XS -e 'undef $$/; print CSS::Minifier::XS::minify(scalar <>)' <$< >$@
+static/g/%.css: css/skins/%.sass css/v2.css data/icons/icons.css | static/g
+ ( echo '$$version: "$(shell git show-ref --head --abbrev -s HEAD)";'; echo '@import "css/skins/$*"' ) | sassc --stdin -I. --style compressed >$@
# v2
-static/f/vndb.js: data/js/*.js lib/VNDB/Types.pm util/jsgen.pl data/conf.pl | static/f
+static/g/vndb.js: data/js/*.js lib/VNDB/Types.pm util/jsgen.pl data/conf.pl | static/g
util/jsgen.pl
-static/f/vndb.min.js: static/f/vndb.js
+static/g/vndb.min.js: static/g/vndb.js
uglifyjs $< --compress --mangle --comments '/(@license|@source|SPDX-)/' -o $@
@@ -118,7 +114,7 @@ static/f/vndb.min.js: static/f/vndb.js
# (This trick will not work if we ever add JS files generated by this Makefile)
JS_FILES=$(shell find elm \! -path 'elm/elm-stuff/*' -name '*.js' -exec sh -c "echo \`grep -Eo '^// *order: *[0-9]+' \"{}\" || echo 4\` \"{}\"" \; | sed -E 's/\/\/ *order: *//' | sort | sed 's/..//')
-static/f/plain.js: ${JS_FILES} | static/f
+static/g/plain.js: ${JS_FILES} | static/f
echo '// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-only' > $@~
echo '// @source: https://code.blicky.net/yorhel/vndb/src/branch/master/elm' >>$@~
echo '// SPDX-License-Identifier: AGPL-3.0-only' >>$@~
@@ -131,7 +127,7 @@ static/f/plain.js: ${JS_FILES} | static/f
echo '// @license-end' >>$@~
mv $@~ $@
-static/f/plain.min.js: static/f/plain.js
+static/g/plain.min.js: static/g/plain.js
uglifyjs $< --comments '/(@license|@source|SPDX-)/' --compress \
'pure_getters,keep_fargs=false,unsafe_comps,unsafe'\
| uglifyjs --mangle --comments all -o $@
@@ -161,11 +157,11 @@ endef
elm/Gen/.generated: lib/VNWeb/*.pm lib/VNWeb/*/*.pm lib/VNDB/Types.pm lib/VNDB/ExtLinks.pm lib/VNDB/Config.pm data/conf.pl
util/vndb.pl elmgen
-static/f/elm.js: ${ELM_FILES} elm/Gen/.generated | static/f
+static/g/elm.js: ${ELM_FILES} elm/Gen/.generated | static/f
cd elm && ELM_HOME=elm-stuff elm make ${ELM_MODULES} --output ../$@
${fix-elm}
-static/f/elm.min.js: ${ELM_FILES} elm/Gen/.generated | static/f
+static/g/elm.min.js: ${ELM_FILES} elm/Gen/.generated | static/f
cd elm && ELM_HOME=elm-stuff elm make --optimize ${ELM_MODULES} --output ../$@
${fix-elm}
uglifyjs $@ --comments '/(@license|@source|SPDX-)/' --compress \
diff --git a/README.md b/README.md
index 8a645431..5225ac37 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ Global requirements:
- Elm 0.19.1
- Graphviz
- ImageMagick
+- sassc
**Perl modules** (core modules are not listed):
diff --git a/css/skins/air.sass b/css/skins/air.sass
new file mode 100644
index 00000000..d1d89f92
--- /dev/null
+++ b/css/skins/air.sass
@@ -0,0 +1,40 @@
+// userid: 13885 name: AIR (sky blue)
+
+////////////////////////////////////////////////////////////////
+// 'AIR' skin for VNDB.org //
+// Created by Yirba <yirba AT spiderlilytranslations DOT com> //
+// Some portions (c)2000 Key/VisualArt's //
+////////////////////////////////////////////////////////////////
+
+$maintext: #222222
+$grayedout: #77a9dd
+$standout: #bb1511
+$link: #226588
+$statok: #33ff38
+$statnok: #ff3833
+$footer: #226588
+$maintitle: #226588
+$boxtitle: #77a9dd
+$alttitle: #000000
+$bodybg: #ffffff
+$tabbg: #ddeeff
+$secbg: #bed8f2
+$secborder: #5677cc
+$border: #77a9dd
+$boxbg: #ccddeebc
+$diffadd: #aaccbc
+$diffdel: #ccaabb
+$warnbg: #ccaabb
+$warnborder: #ff3833
+$noticebg: #aaccbc
+$noticeborder: #33ff38
+
+@mixin bodybg
+ background: $bodybg url(/s/air-bg.jpg) no-repeat;
+
+@mixin bgright
+ background: url(/s/air-right.png) no-repeat
+ width: 197px
+ height: 140px
+
+@import 'css/v2'
diff --git a/css/skins/angel.sass b/css/skins/angel.sass
new file mode 100644
index 00000000..4444291f
--- /dev/null
+++ b/css/skins/angel.sass
@@ -0,0 +1,43 @@
+// userid: 2 name: Angelic Serenade (dark blue)
+// ^ Must be the first line of skin files, read by VNDB::Skins.
+
+// text
+$maintext: #ddd // primary text color (also used for the menu links)
+$grayedout: #37a // color used for grayed-out/non-important things
+$standout: #e44 // color of 'stand-out' text
+$link: #7bd // primary link color (not used for the menu links)
+$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)
+$footer: #247 // text color of the footer
+
+// titles
+$maintitle: #135 // text color of the site title, set to '0' to hide the main title
+$boxtitle: #258 // box titles
+$alttitle: #fff // alternative title
+
+// bg colors
+$bodybg: #000 // main background color
+$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: #071c30bc // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
+
+// misc colors
+$diffadd: #354 // background color of changes in the diff viewer
+$diffdel: #534
+$warnbg: #534 // background color of a warning box
+$warnborder: #c00 // ..border
+$noticebg: #354 // notice box
+$noticeborder: #0c0 // ...and border
+
+// Page backgrounds
+@mixin bodybg
+ background: $bodybg url(/s/angel-bg.jpg) no-repeat
+
+@mixin bgright
+ background: url(/s/angel-right.jpg) no-repeat
+ width: 433px
+ height: 140px
+
+@import 'css/v2'
diff --git a/css/skins/aselia_01.sass b/css/skins/aselia_01.sass
new file mode 100644
index 00000000..6400e607
--- /dev/null
+++ b/css/skins/aselia_01.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Eien no Aselia (falu red)
+
+// Eien no Aselia skin made using Minitokyo.Eien.no.Aselia.Scans_373967
+// created: 09/27/2009 by echomateria
+
+$maintext: #ffffff
+$grayedout: #eee388
+$standout: #e96e73
+$link: #4a2b33
+$statok: #ffcbee
+$statnok: #e96e73
+$footer: #f4f1e6
+$maintitle: #fce5e5
+$boxtitle: #f4e1b5
+$alttitle: #ed9f92
+$bodybg: #8a3c35
+$tabbg: #ac7595
+$secbg: #8a3c35
+$secborder: #e86a76
+$border: #f1c0b2
+$boxbg: #ac759595
+$diffadd: #833d71
+$diffdel: #6c3a55
+$warnbg: #6b3b51
+$warnborder: #e37192
+$noticebg: #cc8487
+$noticeborder: #975352
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/aselia_01-right.jpg) no-repeat
+ width: 1200px
+ height: 719px
+
+@import 'css/v2'
diff --git a/css/skins/carnevale.sass b/css/skins/carnevale.sass
new file mode 100644
index 00000000..ab89f89f
--- /dev/null
+++ b/css/skins/carnevale.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Gekkou no Carnevale (black)
+
+// Gekkou no Carnevale skin made using a wallpaper comes with the game
+// created: 22/01/2009 by echomateria
+
+$maintext: #b9c7ae
+$grayedout: #cfdbc7
+$standout: #eff5f5
+$link: #ffffff
+$statok: #dab0fc
+$statnok: #768b78
+$footer: #b9c7ae
+$maintitle: #b9c7ae
+$boxtitle: #c7d3bf
+$alttitle: #6f8578
+$bodybg: #030708
+$tabbg: #1f272a
+$secbg: #121622
+$secborder: #ffffff
+$border: #b9c7ae
+$boxbg: #12162290
+$diffadd: #76a3b8
+$diffdel: #354554
+$warnbg: #5d182b
+$warnborder: #829076
+$noticebg: #263a45
+$noticeborder: #21343a
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/carnevale-right.jpg) no-repeat
+ width: 1280px
+ height: 768px
+
+@import 'css/v2'
diff --git a/css/skins/eiel.sass b/css/skins/eiel.sass
new file mode 100644
index 00000000..1e844194
--- /dev/null
+++ b/css/skins/eiel.sass
@@ -0,0 +1,36 @@
+// userid: 51 name: Jingai Makyo (peach-orange)
+
+// A skin made using an image I had for a long time without knowing it's source,
+// thankfully this skin finally brought out the answer that it was from Jingai Makyo.
+// created: 24/01/2009 by echomateria
+
+$maintext: #f8cb8a
+$grayedout: #f26a7e
+$standout: #ff435f
+$link: #ffffff
+$statok: #ffcbee
+$statnok: #ff435f
+$footer: #362142
+$maintitle: #676082
+$boxtitle: #ffcbee
+$alttitle: #f26a7e
+$bodybg: #fdd298
+$tabbg: #5a3a49
+$secbg: #584563
+$secborder: #c42b5a
+$border: #362142
+$boxbg: #36214299
+$diffadd: #2bc88b
+$diffdel: #ca4a4d
+$warnbg: #c42b5a
+$warnborder: #f8cb8a
+$noticebg: #b48ab2
+$noticeborder: #f8cb8a
+
+@mixin bodybg
+ background: $bodybg url(/s/eiel-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/ever17_01.sass b/css/skins/ever17_01.sass
new file mode 100644
index 00000000..56766614
--- /dev/null
+++ b/css/skins/ever17_01.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Ever17 (bondi blue)
+
+// Ever 17 skin made using the images from the extras section of the game
+// created: 01/01/2009 by echomateria
+
+$maintext: #3c363f
+$grayedout: #785a5b
+$standout: #966932
+$link: #013f7a
+$statok: #9c4b00
+$statnok: #eb0e4c
+$footer: #e2cfa6
+$maintitle: #f0a260
+$boxtitle: #f0a260
+$alttitle: #ff9013
+$bodybg: #00879b
+$tabbg: #81d5ea
+$secbg: #bcd1e4
+$secborder: #00627e
+$border: #016c80
+$boxbg: #d1ebee77
+$diffadd: #f1a361
+$diffdel: #9a7071
+$warnbg: #c43f5c
+$warnborder: #951924
+$noticebg: #fefbf6
+$noticeborder: #f1a360
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/ever17_01-right.jpg) no-repeat
+ width: 800px
+ height: 800px
+
+@import 'css/v2'
diff --git a/css/skins/fate_01.sass b/css/skins/fate_01.sass
new file mode 100644
index 00000000..37d49c0d
--- /dev/null
+++ b/css/skins/fate_01.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Fate/stay night (seal brown)
+
+// FSN skin skin made using a popular fanart
+// created: 12/31/2008 by echomateria
+
+$maintext: #ab928d
+$grayedout: #916858
+$standout: #72322b
+$link: #eee0da
+$statok: #efdab9
+$statnok: #b07a6b
+$footer: #642924
+$maintitle: #200b0c
+$boxtitle: #d56243
+$alttitle: #d7926e
+$bodybg: #200b0c
+$tabbg: #130504
+$secbg: #7c362f
+$secborder: #33261d
+$border: #9e4a47
+$boxbg: #4d3c3abc
+$diffadd: #4d2c25
+$diffdel: #6f5347
+$warnbg: #882f27
+$warnborder: #fbf1e0
+$noticebg: #882f27
+$noticeborder: #fbf1e0
+
+@mixin bodybg
+ background: $bodybg url(/s/fate_01-bg.jpg) no-repeat;
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/fate_02.sass b/css/skins/fate_02.sass
new file mode 100644
index 00000000..6cf01f25
--- /dev/null
+++ b/css/skins/fate_02.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Fate/stay night (pale carmine)
+
+// FSN skin made using a popular fanart
+// created: 01/01/2009 by echomateria
+
+$maintext: #fcfbfb
+$grayedout: #ff9d82
+$standout: #ffc98f
+$link: #48b2c1
+$statok: #ff7682
+$statnok: #9f72ff
+$footer: #fffed5
+$maintitle: #ffffff
+$boxtitle: #ffffff
+$alttitle: #c4a9a7
+$bodybg: #ac4b47
+$tabbg: #723033
+$secbg: #792447
+$secborder: #a68483
+$border: #452d2c
+$boxbg: #c6093366
+$diffadd: #3d3231
+$diffdel: #01023f
+$warnbg: #772446
+$warnborder: #35152d
+$noticebg: #5c151f
+$noticeborder: #460015
+
+@mixin bodybg
+ background: $bodybg url(/s/fate_02-bg.jpg) no-repeat;
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/grey.sass b/css/skins/grey.sass
new file mode 100644
index 00000000..d85f16dd
--- /dev/null
+++ b/css/skins/grey.sass
@@ -0,0 +1,34 @@
+// userid: 2 name: Touhou (grey)
+
+$maintext: #222
+$grayedout: #666
+$standout: #500
+$link: #005
+$statok: #050
+$statnok: #500
+$footer: #999
+$maintitle: #ccc
+$boxtitle: #444
+$alttitle: #000
+$bodybg: #fff
+$tabbg: #ddd
+$secbg: #ccc
+$secborder: #000
+$border: #999
+$boxbg: #ddddddcc
+$diffadd: #cfc
+$diffdel: #fcc
+$warnbg: #fcc
+$warnborder: #c00
+$noticebg: #cfc
+$noticeborder: #0c0
+
+@mixin bodybg
+ background: $bodybg url(/s/grey-bg.jpg) no-repeat;
+
+@mixin bgright
+ background: url(/s/grey-right.jpg) no-repeat
+ width: 130px
+ height: 120px
+
+@import 'css/v2'
diff --git a/css/skins/higanbana.sass b/css/skins/higanbana.sass
new file mode 100644
index 00000000..978c56d0
--- /dev/null
+++ b/css/skins/higanbana.sass
@@ -0,0 +1,40 @@
+// userid: 13885 name: Higanbana no Saku Yoru ni (maroon)
+
+////////////////////////////////////////////////////////////////
+// 'Higanbana no Saku Yoru ni' skin for VNDB.org //
+// Created by Yirba <yirba AT spiderlilytranslations DOT com> //
+// Some portions (c)2011 Ryukishi07/07th Expansion //
+////////////////////////////////////////////////////////////////
+
+$maintext: #ddd
+$grayedout: #822
+$standout: #ec4
+$link: #d77
+$statok: #0c0
+$statnok: #c00
+$footer: #722
+$maintitle: #511
+$boxtitle: #822
+$alttitle: #fff
+$bodybg: #000
+$tabbg: #200
+$secbg: #410d0d
+$secborder: #a33
+$border: #822
+$boxbg: #331111bc
+$diffadd: #354
+$diffdel: #534
+$warnbg: #534
+$warnborder: #c00
+$noticebg: #354
+$noticeborder: #0c0
+
+@mixin bodybg
+ background: $bodybg url(/s/higanbana-bg.jpg) no-repeat
+
+@mixin bgright
+ background: url(/s/higanbana-right.png) no-repeat
+ width: 197px
+ height: 140px
+
+@import 'css/v2'
diff --git a/css/skins/higu.sass b/css/skins/higu.sass
new file mode 100644
index 00000000..ebf606f2
--- /dev/null
+++ b/css/skins/higu.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Higurashi no Naku Koro ni (orange)
+
+// Higurashi no Naku Koro ni skin made using an image I found in MiniTokyo
+// created: 22/01/2009 by echomateria
+
+$maintext: #2c1a18
+$grayedout: #8c5b3b
+$standout: #c24857
+$link: #3c549c
+$statok: #8c6290
+$statnok: #824e52
+$footer: #2e2536
+$maintitle: #e5d3e1
+$boxtitle: #1b1b51
+$alttitle: #35346d
+$bodybg: #f89e7e
+$tabbg: #9b8587
+$secbg: #f7c7bb
+$secborder: #3c549c
+$border: #2c1a18
+$boxbg: #f7c7bb80
+$diffadd: #c2bcc6
+$diffdel: #8c5b3b
+$warnbg: #ae6866
+$warnborder: #612028
+$noticebg: #9b8587
+$noticeborder: #dc9b7f
+
+@mixin bodybg
+ background: $bodybg url(/s/higu-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/lb.sass b/css/skins/lb.sass
new file mode 100644
index 00000000..6f7a3316
--- /dev/null
+++ b/css/skins/lb.sass
@@ -0,0 +1,32 @@
+// userid: 93 name: Little Busters! (pink)
+
+$maintext: #408
+$grayedout: #670159
+$standout: #e44
+$link: #a2d
+$statok: #0c0
+$statnok: #c00
+$footer: #f76ee2
+$maintitle: #f78de7
+$boxtitle: #670159
+$alttitle: #5328a7
+$bodybg: #fff
+$tabbg: #f78de7
+$secbg: #f78de7
+$secborder: #670159
+$border: #f76ee2
+$boxbg: #f7b6edcc
+$diffadd: #cfc
+$diffdel: #fcc
+$warnbg: #fff
+$warnborder: #c00
+$noticebg: #f7b6ed
+$noticeborder: #670159
+
+@mixin bodybg
+ background: $bodybg url(/s/lb-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/lb_02.sass b/css/skins/lb_02.sass
new file mode 100644
index 00000000..bb80d0f6
--- /dev/null
+++ b/css/skins/lb_02.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Little Busters! (lemon chiffon)
+
+// Little Busters! skin made using the Minitokyo.Little.Busters.Scans_316439
+// created: 09/27/2009 by echomateria
+
+$maintext: #3c363f
+$grayedout: #785a5b
+$standout: #eb0e4c
+$link: #04529b
+$statok: #d87417
+$statnok: #eb0e4c
+$footer: #eb0e4c
+$maintitle: #fffeff
+$boxtitle: #ff9013
+$alttitle: #f0a260
+$bodybg: #fff4d4
+$tabbg: #9aa4d7
+$secbg: #bcd1e4
+$secborder: #966932
+$border: #016c80
+$boxbg: #d1ebee99
+$diffadd: #3689b5
+$diffdel: #b7adc6
+$warnbg: #e97a9a
+$warnborder: #f1a360
+$noticebg: #fefbf6
+$noticeborder: #951924
+
+@mixin bodybg
+ background: $bodybg url(/s/lb_02-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/primitive.sass b/css/skins/primitive.sass
new file mode 100644
index 00000000..44ae6672
--- /dev/null
+++ b/css/skins/primitive.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Primitive Link (pale chestnut)
+
+// Primitive Link skin made using an image that I liked without knowing what it's based on for a long time
+// created: 23/01/2009 by echomateria
+
+$maintext: #f8eacd
+$grayedout: #ff9d8a
+$standout: #642a12
+$link: #ffda63
+$statok: #edc176
+$statnok: #d63f21
+$footer: #935a40
+$maintitle: #f8eacd
+$boxtitle: #f8eacd
+$alttitle: #f19d20
+$bodybg: #ddac9b
+$tabbg: #935a40
+$secbg: #be8f9f
+$secborder: #642a12
+$border: #edc176
+$boxbg: #935a4099
+$diffadd: #bd7f98
+$diffdel: #c6562d
+$warnbg: #7a3313
+$warnborder: #ff392a
+$noticebg: #d4aab4
+$noticeborder: #edc176
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/primitive-right.jpg) no-repeat
+ width: 1024px
+ height: 768px
+
+@import 'css/v2'
diff --git a/css/skins/saya.sass b/css/skins/saya.sass
new file mode 100644
index 00000000..eeec4c9d
--- /dev/null
+++ b/css/skins/saya.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Saya no Uta (dark scarlet)
+
+// Saya no Uta skin made using a criminally cute fanart
+// created: 22/01/2009 by echomateria
+
+$maintext: #ffffff
+$grayedout: #ecbc93
+$standout: #d75f25
+$link: #ffcb3a
+$statok: #a55a3d
+$statnok: #281e14
+$footer: #e07340
+$maintitle: #ebb48b
+$boxtitle: #de9670
+$alttitle: #ebb48b
+$bodybg: #25010f
+$tabbg: #575c51
+$secbg: #437f63
+$secborder: #ffcb3a
+$border: #ebb48b
+$boxbg: #437f6388
+$diffadd: #f59731
+$diffdel: #f2c5a3
+$warnbg: #d45628
+$warnborder: #fbab34
+$noticebg: #c5af88
+$noticeborder: #56714e
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/saya-right.jpg) no-repeat
+ width: 900px
+ height: 537px
+
+@import 'css/v2'
diff --git a/css/skins/seinarukana.sass b/css/skins/seinarukana.sass
new file mode 100644
index 00000000..77cdfee0
--- /dev/null
+++ b/css/skins/seinarukana.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Seinarukana (white)
+
+// Seinarukana skin made using a callendar image
+// created: 12/31/2008 by echomateria
+
+$maintext: #131838
+$grayedout: #fc8e77
+$standout: #e93d71
+$link: #5a5fc7
+$statok: #424d81
+$statnok: #a43462
+$footer: #324978
+$maintitle: #99c9dd
+$boxtitle: #e93d71
+$alttitle: #983666
+$bodybg: #ffffff
+$tabbg: #bfd2e3
+$secbg: #bcd1e4
+$secborder: #7a88a5
+$border: #324978
+$boxbg: #fde9e688
+$diffadd: #3689b5
+$diffdel: #b7adc6
+$warnbg: #ee3970
+$warnborder: #451f4b
+$noticebg: #fdf1e8
+$noticeborder: #d4aba2
+
+@mixin bodybg
+ background: $bodybg url(/s/seinarukana-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/taka.sass b/css/skins/taka.sass
new file mode 100644
index 00000000..1569c586
--- /dev/null
+++ b/css/skins/taka.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Sora no Iro, Mizu no Iro (turquoise)
+
+// A Sora no Iro, Mizu no Iro skin based on a wallpaper named My Perfect Day
+// created: 23/01/2009 by echomateria
+
+$maintext: #fefefc
+$grayedout: #4b2427
+$standout: #ffaa88
+$link: #f4d926
+$statok: #f8a022
+$statnok: #4b2427
+$footer: #f6ffff
+$maintitle: #f6ffff
+$boxtitle: #943048
+$alttitle: #a93f56
+$bodybg: #4bb3ae
+$tabbg: #3c6d69
+$secbg: #48878c
+$secborder: #f4d926
+$border: #48878c
+$boxbg: #48878c92
+$diffadd: #b2f68f
+$diffdel: #5ed8e5
+$warnbg: #008278
+$warnborder: #fcfefd
+$noticebg: #5bdebe
+$noticeborder: #a9fdc1
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ background: url(/s/taka-right.jpg) no-repeat
+ width: 1300px
+ height: 975px
+
+@import 'css/v2'
diff --git a/css/skins/teal.sass b/css/skins/teal.sass
new file mode 100644
index 00000000..7ac70ce9
--- /dev/null
+++ b/css/skins/teal.sass
@@ -0,0 +1,33 @@
+// userid: 163596 name: Teal (teal)
+// by sw1tchbl4d3
+
+$maintext: #ddd
+$grayedout: #007070
+$standout: #e44
+$link: #00c9c9
+$statok: #0c0
+$statnok: #c00
+$footer: #004040
+$maintitle: #003535
+$boxtitle: #007070
+$alttitle: #fff
+$bodybg: #000
+$tabbg: #001010
+$secbg: #003434
+$secborder: #008080
+$border: #007070
+$boxbg: #002525bc
+$diffadd: #354
+$diffdel: #534
+$warnbg: #534
+$warnborder: #c00
+$noticebg: #354
+$noticeborder: #0c0
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/term.sass b/css/skins/term.sass
new file mode 100644
index 00000000..90cf678f
--- /dev/null
+++ b/css/skins/term.sass
@@ -0,0 +1,32 @@
+// userid: 93 name: Neon (black)
+
+$maintext: #0f0
+$grayedout: #aaa
+$standout: #f00
+$link: #ff0
+$statok: #0c0
+$statnok: #c00
+$footer: #fff
+$maintitle: #0f0
+$boxtitle: #0f0
+$alttitle: #0f0
+$bodybg: #000
+$tabbg: #000
+$secbg: #000
+$secborder: #0f0
+$border: #fff
+$boxbg: #000
+$diffadd: #cfc
+$diffdel: #fcc
+$warnbg: #000
+$warnborder: #c00
+$noticebg: #000
+$noticeborder: #0f0
+
+@mixin bodybg
+ background-color: $bodybg
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/css/skins/tsukihime.sass b/css/skins/tsukihime.sass
new file mode 100644
index 00000000..e50c3bf3
--- /dev/null
+++ b/css/skins/tsukihime.sass
@@ -0,0 +1,37 @@
+// userid: 51 name: Tsukihime (midnight blue)
+
+// Tsukihime skin made using an image from the Tsukihime Plus+Disc
+// created: 02/01/2009 by echomateria
+
+$maintext: #ffffff
+$grayedout: #abcdff
+$standout: #ffffff
+$link: #0be0e9
+$statok: #55dfaa
+$statnok: #e30b47
+$footer: #0cacf3
+$maintitle: #a9bbfb
+$boxtitle: #e3ecff
+$alttitle: #c6d7ff
+$bodybg: #29345f
+$tabbg: #5a3a63
+$secbg: #9b8494
+$secborder: #605567
+$border: #b791f3
+$boxbg: #6a4668bb
+$diffadd: #87705c
+$diffdel: #374d77
+$warnbg: #76a1cd
+$warnborder: #decdcd
+$noticebg: #b50439
+$noticeborder: #decdcd
+
+@mixin bodybg
+ background: $bodybg url(/s/tsukihime-bg.jpg) no-repeat
+
+@mixin bgright
+ background: url(/s/tsukihime-right.jpg) no-repeat
+ width: 500px
+ height: 718px
+
+@import 'css/v2'
diff --git a/css/skins/tsukihime_02.sass b/css/skins/tsukihime_02.sass
new file mode 100644
index 00000000..df872e07
--- /dev/null
+++ b/css/skins/tsukihime_02.sass
@@ -0,0 +1,35 @@
+// userid: 51 name: Tsukihime (black)
+
+// Tsukihime skin made with an awesome Akiha artwork from Tsukihime PLUS disc
+// created: 23/01/2009 by echomateria
+
+$maintext: #fa4347
+$grayedout: #54459a
+$standout: #fd3fa9
+$link: #b768aa
+$statok: #d79a7e
+$statnok: #412651
+$footer: #fa4347
+$maintitle: #fa4347
+$boxtitle: #d79a7e
+$alttitle: #c17e61
+$bodybg: #000000
+$tabbg: #2e0106
+$secbg: #2e0106
+$secborder: #b768aa
+$border: #000000
+$boxbg: #35020990
+$diffadd: #d79a7e
+$diffdel: #412651
+$warnbg: #46285a
+$warnborder: #c0959f
+$noticebg: #4f3246
+$noticeborder: #94769a
+
+@mixin bodybg
+ background: $bodybg url(/s/tsukihime_02-bg.jpg) no-repeat
+
+@mixin bgright
+ display: none
+
+@import 'css/v2'
diff --git a/data/style.css b/css/v2.css
index 8303a4ae..b3bc51f7 100644
--- a/data/style.css
+++ b/css/v2.css
@@ -1,32 +1,38 @@
+$blendbg: rgb(
+ (red($boxbg) * alpha($boxbg) + red($bodybg) * (1 - alpha($boxbg))),
+ (green($boxbg) * alpha($boxbg) + green($bodybg) * (1 - alpha($boxbg))),
+ (blue($boxbg) * alpha($boxbg) + blue($bodybg) * (1 - alpha($boxbg)))
+);
+
* { margin: 0; padding: 0; }
body, td { font: 13px "Tahoma", "Arial", sans-serif; }
-body { $_bodybg$; color: $maintext$ }
+body { @include bodybg; color: $maintext }
table { border-collapse: collapse; }
table td,
table th { vertical-align: top; padding: 3px; }
img { border: none; }
a,
-.fake_link { color: $link$; text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent }
+.fake_link { color: $link; text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent }
a:hover,
-.fake_link:hover { border-bottom: 1px dotted $maintext$; }
+.fake_link:hover { border-bottom: 1px dotted $maintext; }
table tr.odd,
table.stripe tbody tr:nth-child(odd):not(.nostripe),
-.docs table tbody tr:nth-child(odd) { background: $boxbg$; }
+.docs table tbody tr:nth-child(odd) { background: $boxbg; }
-#bgright { position: absolute; top: 0px; right: 0px; $_bgright$ }
+#bgright { position: absolute; top: 0px; right: 0px; @include bgright }
#header { position: absolute; top: 80px; left: 400px; }
#header h1, #header h1 a {
font-family: "Futura", "Century New Gothic", "Arial", Serif;
font-size: 24px;
font-style: italic;
border: none!important;
- color: $maintitle$;
+ color: $maintitle;
}
-#footer { margin: 15px auto 0 auto; text-align: center; color: $footer$; }
-#footer a { color: $footer$; text-decoration: underline; }
+#footer { margin: 15px auto 0 auto; text-align: center; color: $footer; }
+#footer a { color: $footer; text-decoration: underline; }
/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.visuallyhidden, .linkradio input {
@@ -39,57 +45,57 @@ table.stripe tbody tr:nth-child(odd):not(.nostripe),
}
/* Warning/Notice Box */
-div.warning, div.notice { margin: 5px 10%; padding: 15px; background-color: $warnbg$; border: 1px solid $warnborder$; }
-div.notice { background-color: $noticebg$; border: 1px solid $noticeborder$; }
+div.warning, div.notice { margin: 5px 10%; padding: 15px; background-color: $warnbg; border: 1px solid $warnborder; }
+div.notice { background-color: $noticebg; border: 1px solid $noticeborder; }
div.warning ul, div.notice ul { margin-left: 0; }
div.warning li, div.notice li { margin-left: 20px; }
div.warning h2, div.notice h2 { font-size: 13px; font-weight: bold; margin: 0; }
/* dropdown box */
-#dd_box { position: absolute; left: 0px; border: 1px solid $border$; background-color: $secbg$; z-index: 2 }
+#dd_box { position: absolute; left: 0px; border: 1px solid $border; background-color: $secbg; z-index: 2 }
#dd_box ul { list-style-type: none; margin: 0; padding: 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: 3px 5px 3px 3px }
-#dd_box li a:hover { background: $boxbg$ }
+#dd_box li a:hover { background: $boxbg }
/* dropdown search */
#ds_box {
position: absolute;
top: 0;
- border: 1px solid $border$;
+ border: 1px solid $border;
border-top: none;
- background-color: $secbg$;
+ background-color: $secbg;
cursor: pointer;
z-index: 2
}
#ds_box b { padding: 2px 0 0 10px; }
-#ds_box tr.selected { background: $boxbg$; }
+#ds_box tr.selected { background: $boxbg; }
#ds_box table { width: 100%; }
/* Elm dropdowns (also in perl: VNWeb::Releases::Lib) */
-.elm_dd > a { color: $maintext$; display: block; border: none; padding-right: 15px; position: relative }
+.elm_dd > a { color: $maintext; display: block; border: none; padding-right: 15px; position: relative }
.elm_dd > a > span:last-child { position: absolute; right: 5px; top: 0; width: 16px; text-align: right; display: block }
.elm_dd > a > span:last-child i { visibility: hidden; font-style: normal }
.elm_dd > a .nowrap { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elm_dd > a:hover > span:last-child > i,
.elm_dd > a:focus > span:last-child > i { visibility: visible }
.elm_dd > div { position: relative; float: right; width: 0; height: 0 }
-.elm_dd > div > div { position: absolute; right: -10px; top: 0; border: 1px solid $border$; background-color: $secbg$; z-index: 1000; margin: 0; padding: 0; max-width: 400px }
+.elm_dd > div > div { position: absolute; right: -10px; top: 0; border: 1px solid $border; background-color: $secbg; z-index: 1000; margin: 0; padding: 0; max-width: 400px }
.elm_dd.search > div { float: left }
.elm_dd.search > div > div { right: auto; left: 0; top: 23px }
.elm_dd ul { width: 100%; list-style-type: none; margin: 0; padding: 0 }
.elm_dd ul li { white-space: nowrap }
.elm_dd ul li a { display: block; border: 0; padding: 3px 5px 3px 3px }
.elm_dd ul li a.active,
-.elm_dd ul li a:hover { background: $boxbg$ }
+.elm_dd ul li a:hover { background: $boxbg }
.elm_dd ul li p { white-space: normal; padding: 3px 5px 3px 3px }
.elm_dd ul li.separator { margin-bottom: 22px }
-.maintabs .elm_dd > a { box-sizing: border-box; height: 21px; padding: 1px 15px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $maintext$ }
+.maintabs .elm_dd > a { box-sizing: border-box; height: 21px; padding: 1px 15px 0 7px; border: 1px solid $border; border-bottom: none; background-color: $tabbg; color: $maintext }
.elm_votedd .elm_dd ul li { text-align: left }
-.elm_dd_input .elm_dd > a { background-color: $secbg$; color: $maintext$; border: 1px solid $secborder$; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 2px; margin: -1px }
-.elm_dd_button .elm_dd > a { background-color: $boxbg$; color: $maintext$; border: 1px solid $secborder$; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 5px; margin: -1px }
+.elm_dd_input .elm_dd > a { background-color: $secbg; color: $maintext; border: 1px solid $secborder; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 2px; margin: -1px }
+.elm_dd_button .elm_dd > a { background-color: $boxbg; color: $maintext; border: 1px solid $secborder; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 5px; margin: -1px }
.elm_dd_input.elm_dd_noarrow .elm_dd > a { padding-right: 2px }
.elm_dd_noarrow .elm_dd > a { padding-right: 0 }
.elm_dd_noarrow .elm_dd > a > span:last-child { display: none }
@@ -97,51 +103,51 @@ div.warning h2, div.notice h2 { font-size: 13px; font-weight: bold; margin: 0; }
.elm_dd_hover .elm_dd:hover > div { display: block }
.elm_dd_left .elm_dd > div { float: left }
.elm_dd_left .elm_dd > div > div { right: 0; top: -20px }
-.elm_dd_relextlink .elm_dd > a { padding-left: 4px; color: $link$ }
+.elm_dd_relextlink .elm_dd > a { padding-left: 4px; color: $link }
.elm_dd_relextlink ul a { text-align: right }
-.elm_dd_relextlink ul span { color: $maintext$; padding-right: 10px }
+.elm_dd_relextlink ul span { color: $maintext; padding-right: 10px }
/* general text formatting */
ul, ol { margin-left: 35px; }
-p.itemmsg { float: right; color: $standout$; font-style: italic; margin: 0!important }
-.grayedout { color: $grayedout$ }
+p.itemmsg { float: right; color: $standout; font-style: italic; margin: 0!important }
+.grayedout { color: $grayedout }
b.grayedout { font-weight: normal }
i.grayedout { font-style: normal }
.underline { text-decoration: underline }
#maincontent h2 b { font: 13px "Tahoma", "Arial", sans-serif; font-weight: normal; }
p.description { margin: 10px 100px!important; }
-b.done { font-weight: normal; color: $statok$ }
-b.todo { font-weight: normal; color: $statnok$ }
+b.done { font-weight: normal; color: $statok }
+b.todo { font-weight: normal; color: $statnok }
b.neutral { font-weight: normal }
p.center { text-align: center; }
-.standout { color: $standout$!important }
+.standout { color: $standout!important }
b.future,
-b.standout { font-weight: normal; color: $standout$; }
+b.standout { font-weight: normal; color: $standout; }
.clearfloat { clear: both; height: 0; }
.hidden { display: none!important }
.invisible { visibility: hidden }
.linethrough { text-decoration: line-through }
b.spoiler, b.spoiler a { color: #000!important; background-color: #000; font-weight: normal; }
-b.spoiler:hover, b.spoiler:focus { color: $maintext$!important; background-color: transparent }
-b.spoiler:hover a, b.spoiler:focus a { color: $link$!important; background-color: transparent }
+b.spoiler:hover, b.spoiler:focus { color: $maintext!important; background-color: transparent }
+b.spoiler:hover a, b.spoiler:focus a { color: $link!important; background-color: transparent }
#maincontent div.quote {
padding: 1px 5px;
margin: 0px 10px;
- color: $grayedout$;
+ color: $grayedout;
border: none;
- border-left: 1px dotted $border$;
+ border-left: 1px dotted $border;
text-align: left;
}
pre {
padding:1px 5px;
margin: 5px 15px;
- border: 1px dotted $border$;
+ border: 1px dotted $border;
border-right: none;
- border-left: 1px solid $border$;
- background: $boxbg$;
+ border-left: 1px solid $border;
+ background: $boxbg;
overflow-x: auto;
}
@@ -151,9 +157,9 @@ pre {
/***** general form markup *****/
input.text, input.submit, select, textarea, button {
- background-color: $secbg$;
- color: $maintext$;
- border: 1px solid $secborder$;
+ background-color: $secbg;
+ color: $maintext;
+ border: 1px solid $secborder;
font: 14px "Tahoma", "Arial", sans-serif;
padding: 0 1px 1px 1px;
margin: 1px;
@@ -161,7 +167,7 @@ input.text, input.submit, select, textarea, button {
form, fieldset { border: 0; display: block }
legend { display: none; }
optgroup option { padding-left: 10px; font-style: normal; }
-input.submit, button { background: $boxbg$; padding: 1px 5px; cursor: pointer }
+input.submit, button { background: $boxbg; padding: 1px 5px; cursor: pointer }
input.text, select { width: 200px; }
input[type=number] { -moz-appearance:textfield }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
@@ -193,13 +199,13 @@ table.formimage h2 { margin: 0 }
* </container>
*/
p.linkradio { padding: 2px }
-.linkradio label { color: $link$; cursor: pointer }
+.linkradio label { color: $link; cursor: pointer }
.linkradio label:before { content: '✗' }
-.linkradio input:checked + label { color: $maintext$ }
+.linkradio input:checked + label { color: $maintext }
.linkradio input:checked + label:before { content: '✓' }
-.linkradio input:focus + label { outline: 1px dotted $link$ }
-.linkradio input:focus:checked + label { outline: 1px dotted $maintext$ }
-.linkradio em { font-weight: normal; font-style: normal; color: $grayedout$ }
+.linkradio input:focus + label { outline: 1px dotted $link }
+.linkradio input:focus:checked + label { outline: 1px dotted $maintext }
+.linkradio em { font-weight: normal; font-style: normal; color: $grayedout }
/* Same styling, but for regular links.
* Usage:
@@ -209,7 +215,7 @@ p.linkradio { padding: 2px }
*/
a.linkradio:before { content: '✗' }
a.linkradio.checked:before { content: '✓' }
-a.checked { color: $maintext$ }
+a.checked { color: $maintext }
/* Spinner, <div class="spinner"></div> for a large one, <span> for a smaller inline-text version */
.spinner { content: ''; box-sizing: border-box; border: 3px solid #9eaebd; border-bottom-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; width: 16px; height: 16px; display: inline-block; margin: auto }
@@ -220,7 +226,7 @@ span.spinner { width: 1em; height: 1em }
.textpreview > span > p { align-self: flex-end; text-align: left }
.textpreview > span > p.right > * { margin-left: 10px; font-style: normal }
.textpreview textarea { width: 100%; box-sizing: border-box }
-.textpreview .preview { width: 100%; box-sizing: border-box; border: 1px solid $secborder$; margin: 1px; padding: 5px; text-align: left }
+.textpreview .preview { width: 100%; box-sizing: border-box; border: 1px solid $secborder; margin: 1px; padding: 5px; text-align: left }
fieldset.submit .textpreview { margin: 0 auto }
/* .compact input elements are smaller and can be embedded in tables/inline text
@@ -229,19 +235,19 @@ fieldset.submit .textpreview { margin: 0 auto }
.compact input.submit { margin: -2px -1px; padding: 1px 3px }
.stealth input, .stealth select { font: inherit; background: none; border: 1px solid transparent; -moz-appearance: none; -webkit-appearance: none; appearance: none }
.stealth input:hover, .stealth input:focus,
-.stealth select:hover, .stealth select:focus { border: 1px solid $secborder$; background: $secbg$ }
+.stealth select:hover, .stealth select:focus { border: 1px solid $secborder; background: $secbg }
/***** menu *****/
-#menulist a { color: $maintext$; text-decoration: none; }
-#menulist a:hover { border-bottom: 1px dotted $maintext$; }
+#menulist a { color: $maintext; text-decoration: none; }
+#menulist a:hover { border-bottom: 1px dotted $maintext; }
#menulist { position: absolute; left: 30px; top: 190px; width: 160px; }
-#menulist div.menubox { margin: 0 0 10px 0; border: 1px solid $border$; background: $boxbg$; }
+#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: $boxbg$; padding: 1px 3px; }
-#menulist h2, #menulist h2 a { font-size: 13px; color: $maintext$; }
+#menulist h2 { border-bottom: 1px solid $border; background: $boxbg; padding: 1px 3px; }
+#menulist h2, #menulist h2 a { font-size: 13px; color: $maintext; }
#menulist h2 #lang_select { float: right; padding-top: 1px; }
#menulist dt { display: block; float: left; width: 97px; font-style: italic; }
#menulist dd { width: 45px; float: left; text-align: right; }
@@ -249,8 +255,8 @@ fieldset.submit .textpreview { margin: 0 auto }
#menulist #search input.text { width: 141px; margin: 0 0 3px 7px }
#menulist #search input.submit { display: none; }
#dd_box abbr { margin: 2px 5px 2px 0!important; }
-#menulist .notifyget { display: inline-block; width: 135px; padding: 4px; background: $warnbg$; border: 1px solid $warnborder$; }
-#menulist .logout { border: 0; background: none; color: $maintext$; cursor: pointer }
+#menulist .notifyget { display: inline-block; width: 135px; padding: 4px; background: $warnbg; border: 1px solid $warnborder; }
+#menulist .logout { border: 0; background: none; color: $maintext; cursor: pointer }
#menulist .logout:hover { text-decoration: underline }
#support { line-height: 0; height: 41px }
@@ -278,14 +284,14 @@ fieldset.submit .textpreview { margin: 0 auto }
font-size: 14px;
}
div.mainbox, div.threelayout > div {
- border: 1px solid $border$;
+ border: 1px solid $border;
margin: 21px 0 -10px 0;
padding: 5px;
- background: $boxbg$;
+ background: $boxbg;
}
div.mainbox-overflow-hack { overflow: hidden; width: 100%; box-sizing: border-box }
-.mainbox h1 { color: $boxtitle$; font-size: 24px; margin: -5px 0 15px 0; }
-.mainbox h2.alttitle { color: $alttitle$; margin: -17px 0 15px 15px; font-weight: normal; }
+.mainbox h1 { color: $boxtitle; font-size: 24px; margin: -5px 0 15px 0; }
+.mainbox h2.alttitle { color: $alttitle; margin: -17px 0 15px 15px; font-weight: normal; }
.mainbox p { margin: 3px 20px; }
.mainbox div p,
.mainbox table p { margin: 0; }
@@ -298,11 +304,11 @@ div.threelayout { display: flex }
div.threelayout > div { flex: 1; padding: 0 2px 10px 2px; margin-left: 5px; margin-right: 5px }
div.threelayout > div:first-child { margin-left: 0 }
div.threelayout > div:last-child { margin-right: 0 }
-.threelayout h1 { margin: 0; font-size: 18px; font-weight: bold; color: $boxtitle$ }
+.threelayout h1 { margin: 0; font-size: 18px; font-weight: bold; color: $boxtitle }
.threelayout h2 { font-size: 14px; margin-top: 3px; }
.threelayout a.right { float: right; }
.threelayout ul { list-style-type: none; margin-left: 10px; }
-.threelayout h1 a { color: $boxtitle$; }
+.threelayout h1 a { color: $boxtitle; }
@@ -317,15 +323,15 @@ div.maintabs > ul { margin: 0; padding: 0; list-style-type: none }
div.maintabs > ul > li { display: inline-block; margin: 0 0 0 10px }
div.maintabs > ul > li:nth-child(1) { margin-left: 0!important }
div.maintabs > ul > li > a,
-div.maintabs > ul > li > div > a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $grayedout$; }
+div.maintabs > ul > li > div > a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border; border-bottom: none; background-color: $tabbg; color: $grayedout; }
div.maintabs > ul > li.tabselected > a,
div.maintabs > ul > li.tabselected > div > a,
div.maintabs > ul > li > div > a:hover,
-div.maintabs > ul > li > a:hover { background: $_blendbg$; color: $maintext$; height: 22px }
-div.maintabs.browsetabs > ul li a { color: $maintext$ }
+div.maintabs > ul > li > a:hover { background: $blendbg; color: $maintext; height: 22px }
+div.maintabs.browsetabs > ul li a { color: $maintext }
div.maintabs.browsetabs > ul li { margin-left: 5px }
div.maintabs.bottom { margin-top: 10px; /* WHY!? */ margin-bottom: -10px }
-div.maintabs.bottom > ul li a { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border$; border-top: none }
+div.maintabs.bottom > ul li a { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border; border-top: none }
div.maintabs.bottom > ul li.tabselected a,
div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px }
@@ -333,7 +339,7 @@ h1.boxtitle, h1.boxtitle a, div.maintabs h1 {
font-family: "Futura", "Century New Gothic", "Arial", Serif;
font-weight: bold;
font-style: italic;
- color: $grayedout$;
+ color: $grayedout;
font-size: 17px;
}
h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 }
@@ -346,7 +352,7 @@ h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 }
p.screenshots { text-align: center; margin-top: 10px; padding: 0; height: 105px; overflow: hidden }
p.screenshots img { margin: 2px; }
li.announcement { margin-bottom: 3px; margin-top: 3px }
-li.announcement a { font-weight: bold; font-size: 15px; color: $maintext$ }
+li.announcement a { font-weight: bold; font-size: 15px; color: $maintext }
.homepage h1 { margin-bottom: 5px }
.homepage > div { overflow: hidden }
.homepage li { display: flex; line-height: 1.1 }
@@ -360,8 +366,8 @@ li.announcement a { font-weight: bold; font-size: 15px; color: $maintext$
.browseopts a, .browseopts button {
padding: 1px 3px;
- color: $maintext$;
- border: 1px solid $border$;
+ color: $maintext;
+ border: 1px solid $border;
margin: 0 2px;
white-space: nowrap;
}
@@ -373,17 +379,17 @@ span.browseopts { text-align: center; padding: 10px; display: in
div.mainbox.browse { padding: 0; }
div.mainbox.browse table { width: 100%; }
div.mainbox.browse table td.tc1 { padding-left: 25px; }
-table thead td, table thead th { font-weight: bold; background-color: $secbg$; }
+table thead td, table thead th { font-weight: bold; background-color: $secbg; }
table thead th { text-align: left }
fieldset.search { display: block; width: 100%; text-align: center; margin: 0 0 10px 0; }
fieldset.search .submit { padding: 0 1px; }
p#searchtabs { height: 13px; padding-right: 70px; }
-p#searchtabs a { padding: 2px 6px 2px 6px; margin: 0 2px; color: $maintext$; }
+p#searchtabs a { padding: 2px 6px 2px 6px; margin: 0 2px; color: $maintext; }
p#searchtabs a:hover, p#searchtabs a.sel {
- border: 1px solid $secborder$;
+ border: 1px solid $secborder;
border-bottom: none;
padding: 1px 5px 2px 5px;
- background: $boxbg$;
+ background: $boxbg;
}
#q { width: 600px }
#bq { width: 300px }
@@ -407,14 +413,14 @@ div.history td.tc4 b { margin-left: 10px }
/* threads page */
#maincontent div.thread { padding: 0; }
div.thread table { width: 100%; table-layout: fixed }
-div.thread tr:not(:last-child) td { border-bottom: 1px solid $border$; }
-div.thread td.tc1 { width: 170px; padding: 5px 10px; border-right: 1px solid $border$; }
+div.thread tr:not(:last-child) td { border-bottom: 1px solid $border; }
+div.thread td.tc1 { width: 170px; padding: 5px 10px; border-right: 1px solid $border; }
div.thread td.tc2 { padding: 10px 20px 10px 10px; }
div.thread tr.deleted td { padding: 1px 10px; }
-div.thread tr:target, div.thread tr.target { outline: 1px dotted $standout$ }
-div.thread i.deleted { font-style: normal; color: $grayedout$; }
-div.thread i.lastmod { float: right; font-size: 11px; color: $grayedout$; margin: 0 -10px -5px 0; }
-div.thread i.edit { float: right; color: $grayedout$; font-style: normal; margin: -10px -10px 0 0; visibility: hidden }
+div.thread tr:target, div.thread tr.target { outline: 1px dotted $standout }
+div.thread i.deleted { font-style: normal; color: $grayedout; }
+div.thread i.lastmod { float: right; font-size: 11px; color: $grayedout; margin: 0 -10px -5px 0; }
+div.thread i.edit { float: right; color: $grayedout; font-style: normal; margin: -10px -10px 0 0; visibility: hidden }
div.thread td:hover i.edit,
div.thread td:active i.edit { visibility: visible }
@@ -422,11 +428,11 @@ div.thread td:active i.edit { visibility: visible }
div.mainbox.discussions td.tc4 { text-align: right; }
div.mainbox.discussions a.locked { text-decoration: line-through; }
div.mainbox.discussions b.boards { padding-left: 10px; font-weight: normal; }
-div.mainbox.discussions b.boards a { color: $grayedout$; }
+div.mainbox.discussions b.boards a { color: $grayedout; }
div.discussions td.tc2 { width: 60px; text-align: right }
div.discussions td.tc3 { width: 110px; }
div.discussions td.tc4 { width: 250px; }
-div.discussions .pollflag { color: $grayedout$; padding-right: 6px; }
+div.discussions .pollflag { color: $grayedout; padding-right: 6px; }
div.postsearch td.tc1_1 { width: 60px; padding-left: 0; padding-right: 0; text-align: right }
div.postsearch td.tc1_2 { width: 25px; padding-left: 0 }
div.postsearch td.tc2 { width: 65px; }
@@ -437,12 +443,12 @@ div.postsearch td.tc3 { width: 90px; }
.releases { width: 100%; }
.releases tr.lang td,
-.releases tr.vn td { background: $boxbg$; font-weight: bold; }
+.releases tr.vn td { background: $boxbg; font-weight: bold; }
.releases td.tc1 { padding-left: 30px; width: 80px; white-space: nowrap }
.releases td.tc2 { text-align: center; width: 50px; white-space: nowrap }
.releases td.tc3 { text-align: right; padding: 0; width: 120px; }
.releases td.tc_icons { padding: 0 4px }
-.releases td.tc_prod { color: $grayedout$; white-space: nowrap; width: 50px }
+.releases td.tc_prod { color: $grayedout; white-space: nowrap; width: 50px }
.releases td.tc5 { width: 70px; text-align: right }
.releases td.tc6 { text-align: right; width: 25px; padding: 0; white-space: nowrap }
@@ -466,15 +472,15 @@ div.vndetails td.anime b { font-size: 10px; font-weight: normal; padding-ri
.ulistvn > span { float: right }
.ulistvn textarea { width: 100% }
-div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $border$; padding: 3px 5% 0 5%; text-align: center; }
+div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $border; padding: 3px 5% 0 5%; text-align: center; }
#vntags span { white-space: nowrap; margin-left: 15px; }
-#vntags b { color: $grayedout$; font-weight: normal; font-size: 10px }
+#vntags b { color: $grayedout; font-weight: normal; font-size: 10px }
#tagops { text-align: right; width: auto; }
-#tagops label { margin: 0 0 0 10px; border: 0; outline: none; color: $link$; cursor: pointer; }
-#tagops label.sec { border-left: 1px solid $border$; padding-left: 10px }
+#tagops label { margin: 0 0 0 10px; border: 0; outline: none; color: $link; cursor: pointer; }
+#tagops label.sec { border-left: 1px solid $border; padding-left: 10px }
#tagops label.lst { margin: 0 30px 0 10px; }
-#tagops input:checked + label { color: $maintext$; }
+#tagops input:checked + label { color: $maintext; }
/* tag filter machinery; the order of declarations is important */
@@ -495,10 +501,10 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
/* end of tag filter machinery */
#screenshots table { width: 100%; }
-#screenshots tr.rel td { background: $boxbg$; font-weight: bold; }
+#screenshots tr.rel td { background: $boxbg; font-weight: bold; }
#screenshots p.rel {
- background: $boxbg$;
+ background: $boxbg;
margin: 0;
padding: 2px;
font-weight: bold;
@@ -507,15 +513,15 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
#screenshots a.scrlnk { margin: 2px; border: none }
#screenshots div.scr { display: block; padding-left: 30px; text-align: center }
#screenshots img { border: 3px solid transparent; }
-#screenshots a.nsfw img { border: 3px solid $statnok$; }
-#screenshots a:hover img { border: 3px solid $border$; }
+#screenshots a.nsfw img { border: 3px solid $statnok; }
+#screenshots a:hover img { border: 3px solid $border; }
#scrhide_s0:checked ~ #screenshots label[for=scrhide_s0],
#scrhide_s1:checked ~ #screenshots label[for=scrhide_s1],
#scrhide_s2:checked ~ #screenshots label[for=scrhide_s2],
#scrhide_v0:checked ~ #screenshots label[for=scrhide_v0],
#scrhide_v1:checked ~ #screenshots label[for=scrhide_v1],
-#scrhide_v2:checked ~ #screenshots label[for=scrhide_v2] { color: $maintext$ }
+#scrhide_v2:checked ~ #screenshots label[for=scrhide_v2] { color: $maintext }
#screenshots .scrlnk { display: none }
#scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline }
@@ -526,22 +532,22 @@ 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: $boxbg$;
+ border: 1px solid $border; border-top: none;
+ background: $boxbg;
text-align: center
}
.reviews { display: flex; justify-content: center; flex-wrap: wrap }
.reviewbox { margin: 10px 12px 30px 12px; flex: 1 1; flex-basis: 450px }
-.reviewbox > div:nth-child(2) > span:first-child { float: right; color: $grayedout$; font-style: normal; margin: -5px 0 0 0; visibility: hidden }
+.reviewbox > div:nth-child(2) > span:first-child { float: right; color: $grayedout; font-style: normal; margin: -5px 0 0 0; visibility: hidden }
.reviewbox > div:nth-child(2):hover > span:first-child,
.reviewbox > div:nth-child(2):active > span:first-child { visibility: visible }
.reviewbox .review_spoil input:checked ~ span { display: none }
.reviewbox .review_spoil input:not(:checked) ~ div { display: none }
-.reviewbox > div:first-child { display: flex; justify-content: space-between; background: $secbg$; font-weight: bold }
+.reviewbox > div:first-child { display: flex; justify-content: space-between; background: $secbg; font-weight: bold }
.reviewbox > div:first-child > span:first-child { font-weight: bold }
-.reviewbox > div:nth-child(2) { box-sizing: border-box; padding: 10px; background: $boxbg$ }
-.reviewbox > div:last-child { display: flex; justify-content: space-between; border-top: 1px solid $border$ }
+.reviewbox > div:nth-child(2) { box-sizing: border-box; padding: 10px; background: $boxbg }
+.reviewbox > div:last-child { display: flex; justify-content: space-between; border-top: 1px solid $border }
.reviewbox .myvote { font-weight: bold; text-decoration: underline }
@@ -551,10 +557,10 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.vntaglist { list-style-type: none; column-width: 400px }
.vntaglist li.tagvnlist-top:not(:first-child) { margin-top: 30px }
.vntaglist li.tagvnlist-parent { margin: 5px 0 3px 0 }
-.vntaglist li.tagvnlist-parent a { color: $maintext$; font-weight: bold }
-.vntaglist li.tagvnlist-inherited a { color: $grayedout$ }
-.vntaglist li:not(.tagvnlist-inherited) b.grayedout { color: $link$ }
-.vntaglist h3 a { color: $maintext$ }
+.vntaglist li.tagvnlist-parent a { color: $maintext; font-weight: bold }
+.vntaglist li.tagvnlist-inherited a { color: $grayedout }
+.vntaglist li:not(.tagvnlist-inherited) b.grayedout { color: $link }
+.vntaglist h3 a { color: $maintext }
.vntaglist li { list-style-type: none; padding-right: 30px }
.vntaglist li .tagscore { margin-right: 10px }
@@ -566,7 +572,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.votegraph { float: left; margin-right: 20px }
.votegraph td { padding: 0 2px }
.votegraph td.number { text-align: right }
-.votegraph td div { float: left; height: 16px; background-color: $border$; margin-right: 2px; padding: 0; }
+.votegraph td div { float: left; height: 16px; background-color: $border; margin-right: 2px; padding: 0; }
.votestats thead td { background: transparent; text-align: center; padding: 2px; }
.votestats tfoot td { text-align: right }
.votestats div { text-align: center; padding-top: 5px; }
@@ -585,7 +591,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.votebooth td.tc1 { padding-right: 20px }
.votebooth td.tc2 { min-width: 240px }
.votebooth td.tc2 div { margin: 2px; }
-.votebooth td.tc2 div.graph { float: left; height: 14px; background-color: $border$; padding: 0; }
+.votebooth td.tc2 div.graph { float: left; height: 14px; background-color: $border; padding: 0; }
.votebooth td.tc3 { text-align: right; padding-right: 16px; }
.votebooth .submit { width: 100px }
.votebooth .option { margin-left: 8px }
@@ -596,8 +602,8 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
/***** VN edit *****/
.vnedit_scr { width: 95%; margin: auto }
-.vnedit_scr > tr:nth-child(odd) > td { background: $boxbg$ }
-.vnedit_scr > tr > td { border-bottom: 1px solid $border$ }
+.vnedit_scr > tr:nth-child(odd) > td { background: $boxbg }
+.vnedit_scr > tr > td { border-bottom: 1px solid $border }
.vnedit_scr > tr > td:nth-child(1) { padding: 10px; width: 136px }
.vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px }
@@ -605,10 +611,10 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
/***** VN Release tab *****/
.releases_compare table { margin: 0 auto; }
-.releases_compare td { margin: 0 auto; border: 1px solid $border$; }
-.releases_compare td.bg { background: $boxbg$; }
+.releases_compare td { margin: 0 auto; border: 1px solid $border; }
+.releases_compare td.bg { background: $boxbg; }
.releases_compare td.multi { vertical-align:middle; }
-.releases_compare .key { background: $boxbg$; }
+.releases_compare .key { background: $boxbg; }
/****** VN browse ********/
@@ -626,7 +632,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.prodvns { list-style-type: none }
.prodvns li span:first-child { display: inline-block; width: 80px; text-align: right; padding-right: 15px }
-.prodvns li span:last-child { color: $grayedout$; padding-left: 15px }
+.prodvns li span:last-child { color: $grayedout; padding-left: 15px }
/***** Producer list ******/
@@ -683,8 +689,8 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo
.imghover div.imghover--visible { position: relative }
.imghover div.imghover--visible a { border-bottom: 0 }
.imghover div.imghover--visible .imghover--overlay { display: none; white-space: nowrap; font-size: 11px }
-.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg$; border: 0 }
-.imghover div.imghover--warning { border: 1px solid $border$; background: $secbg$; box-sizing: border-box; padding: 10px 5px }
+.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg; border: 0 }
+.imghover div.imghover--warning { border: 1px solid $border; background: $secbg; box-sizing: border-box; padding: 10px 5px }
@@ -708,7 +714,7 @@ div.chardetails.charsep { margin-top: 30px }
table.chare_traits .buts { padding: 0 20px }
-table.chare_traits .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border$; margin: 0; float: left }
+table.chare_traits .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border; margin: 0; float: left }
table.chare_traits .buts a.s0 { border: none; background-color: #0f0 }
table.chare_traits .buts a.s1 { border: none; background-color: #f80 }
table.chare_traits .buts a.s2 { border: none; background-color: #f40 }
@@ -721,7 +727,7 @@ div.charb td { white-space: nowrap }
div.charb td.tc1 { text-align: right; width: 40px; padding-left: 0!important; padding-bottom: 0 }
div.charb td.tc2 { overflow: hidden }
div.charb td.tc2 b { margin-left: 10px }
-div.charb td.tc2 b a { color: $grayedout$!important }
+div.charb td.tc2 b a { color: $grayedout!important }
/***** Staff browse *****/
@@ -758,10 +764,10 @@ div.charsum_list { text-align: center }
div.charsum_list .name { white-space: nowrap; display: flex; justify-content: space-between }
div.charsum_list .name span { overflow: hidden; text-overflow: ellipsis; padding-bottom: 1px }
div.charsum_list .name a { font-weight: bold }
-div.charsum_list .actor { border-top: 1px solid $border$; padding-top: 3px }
+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: $boxbg$;
+ background: $boxbg;
display: inline-block;
text-align: left;
vertical-align: top;
@@ -788,7 +794,7 @@ div.charsum_list .charsum_bubble {
.docs h3 { margin: 30px 0 5px; font-size: 16px }
.docs h4 { margin-top: 15px; font-size: 14px }
.docs h3 a:target,
-.docs h4 a:target { color: $standout$ }
+.docs h4 a:target { color: $standout }
.docs dd { margin: 5px 0 5px 120px }
.docs dt { float: left }
.docs ul, .docs ol { margin: 5px 0 5px 20px }
@@ -800,7 +806,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: 190px; padding: 2px; margin: 0 0 10px 5px; background: $boxbg$; border: 1px solid $border$; }
+.docs ul.index { display: block; float: right; width: 190px; 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 }
@@ -858,7 +864,7 @@ div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px }
.ulist .tc_opt { padding: 0 0 5px 70px }
.ulist .tc_opt textarea { width: 500px; height: 18px; border: none }
-.ulist .tc_opt textarea:focus { height: 50px; border: 1px solid $secborder$ }
+.ulist .tc_opt textarea:focus { height: 50px; border: 1px solid $secborder }
.ulist .tc_opt textarea + div { display: inline-block; padding-left: 10px }
.ulist .tc_opt .tco1 { white-space: nowrap; width: 100px }
.ulist .tc_opt .tco2 { white-space: nowrap; width: 100px }
@@ -885,19 +891,19 @@ div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px }
.browse.notifies td.tc1 { width: 14px }
.browse.notifies td.tc3 { width: 100px }
.browse.notifies td.tc4 { width: 75px }
-.browse.notifies tbody td.tc5 a { color: $grayedout$ }
-.browse.notifies td.tc5 i { font-style: normal; color: $maintext$ }
+.browse.notifies tbody td.tc5 a { color: $grayedout }
+.browse.notifies td.tc5 i { font-style: normal; color: $maintext }
.browse.notifies .unread td { font-weight: bold }
.browse.notifies tfoot td { padding: 0 0 0 25px }
/***** Subscription tab thiny (HTML::_maintabs_subscribe_() + elm/Subscribe) ****/
-#subscribe .inactive { color: transparent; text-shadow: 0 0 $grayedout$ }
-#subscribe .active { color: transparent; text-shadow: 0 0 $maintext$ }
+#subscribe .inactive { color: transparent; text-shadow: 0 0 $grayedout }
+#subscribe .active { color: transparent; text-shadow: 0 0 $maintext }
#subscribe > div > a { height: 21px!important /* override :hover change */ }
#subscribe > div > div { position: absolute; width: 1px }
-#subscribe > div > div > div { box-sizing: border-box; padding: 10px; width: 500px; border: 1px solid $border$; background: $secbg$; position: relative; bottom: 0; left: -470px; z-index: 100 }
+#subscribe > div > div > div { box-sizing: border-box; padding: 10px; width: 500px; border: 1px solid $border; background: $secbg; position: relative; bottom: 0; left: -470px; z-index: 100 }
#subscribe p, #subscribe h4, #subscribe label { display: block; margin-bottom: 3px }
@@ -958,9 +964,9 @@ div.uposts td.tc4 b { margin-left: 10px }
.tagscore > span { display: inline-block; width: 25px; text-align: right; padding-right: 3px; font-size: 11px }
.tagscore > div { display: inline-block; height: 13px; background: linear-gradient(90deg, #cf0 0px, #0f0 30px) }
.tagscore.negative > div { background: #f00 }
-.tagscore.negative > span { color: $standout$ }
+.tagscore.negative > span { color: $standout }
.tagscore.ignored > div { background: #222 }
-.tagscore.ignored > span { color: $grayedout$ }
+.tagscore.ignored > span { color: $grayedout }
/***** VN tagmod *****/
@@ -968,26 +974,26 @@ div.uposts td.tc4 b { margin-left: 10px }
table.tgl { margin: 10px 0 0 20px }
table.tgl td { padding: 1px 5px }
table.tgl tfoot td { padding-top: 20px }
-table.tgl .tc_you { border-right: 1px solid $border$; border-left: 1px solid $border$; text-align: center }
-table.tgl .tc_others { border-left: 1px solid $border$; text-align: center }
-table.tgl .tc_tagname { min-width: 200px; border-right: 1px solid $border$ }
+table.tgl .tc_you { border-right: 1px solid $border; border-left: 1px solid $border; text-align: center }
+table.tgl .tc_others { border-left: 1px solid $border; text-align: center }
+table.tgl .tc_tagname { min-width: 200px; border-right: 1px solid $border }
table.tgl tbody .tc_tagname { padding-left: 15px }
table.tgl .tc_myvote { padding: 0 0 0 30px; min-width: 100px }
table.tgl .tc_mynote span { cursor: pointer }
-table.tgl .noteview { position: absolute; max-width: 400px; padding: 0 5px 5px 5px; background: $_blendbg$ }
-table.tgl .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border$; margin: 0; float: left }
-table.tgl .buts a.l0 { border: none; background-color: $border$ }
+table.tgl .noteview { position: absolute; max-width: 400px; padding: 0 5px 5px 5px; background: $blendbg }
+table.tgl .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border; margin: 0; float: left }
+table.tgl .buts a.l0 { border: none; background-color: $border }
table.tgl .buts a.l1 { border: none; background-color: #cf0 }
table.tgl .buts a.l2 { border: none; background-color: #8f0 }
table.tgl .buts a.l3 { border: none; background-color: #0f0 }
table.tgl .buts a.ld { border: none; background-color: #f00 }
table.tgl tbody .tc_myover { padding: 0 5px }
table.tgl .tc_myspoil { padding: 0 30px; min-width: 60px }
-table.tgl .buts a.sn { border: none; background-color: $border$ }
+table.tgl .buts a.sn { border: none; background-color: $border }
table.tgl .buts a.s0 { border: none; background-color: #0f0 }
table.tgl .buts a.s1 { border: none; background-color: #f80 }
table.tgl .buts a.s2 { border: none; background-color: #f40 }
-table.tgl .tc_allvote { border-left: 1px solid $border$; padding: 1px 0 0 30px; }
+table.tgl .tc_allvote { border-left: 1px solid $border; padding: 1px 0 0 30px; }
table.tgl .tc_allvote i { font-style: normal; font-size: 10px }
table.tgl .tc_allspoil { text-align: right; padding-right: 15px }
table.tgl .tagmod_cat td { font-weight: bold; padding-top: 10px }
@@ -998,19 +1004,19 @@ table.tgl .tagmod_cat td { font-weight: bold; padding-top: 10px }
/****** Revision information ******/
div.revision div.rev, div.revision table {
- border: 1px solid $border$;
+ border: 1px solid $border;
margin: 0 auto;
width: 90%;
- background-color: $secbg$;
+ background-color: $secbg;
clear: both;
}
div.revision { padding-bottom: 10px; }
div.revision table thead tr td { background-color: transparent!important; text-align: center; font-weight: normal; }
-div.revision table td { border-right: 1px solid $border$; padding: 5px; }
+div.revision table td { border-right: 1px solid $border; padding: 5px; }
div.revision td.tcval { width: 44%; }
div.revision div.rev { padding: 5px; text-align: center; }
-.diff_add { font-weight: normal; background-color: $diffadd$; }
-.diff_del { font-weight: normal; background-color: $diffdel$; }
+.diff_add { font-weight: normal; background-color: $diffadd; }
+.diff_del { font-weight: normal; background-color: $diffdel; }
div.revision .next { float: right; margin-right: 5%; }
div.revision .prev { float: left; margin-left: 5%; }
div.revision .item { text-align: center; }
@@ -1023,8 +1029,8 @@ div#iv_view {
position: absolute;
top: 0px;
left: 0px;
- background: $boxbg$;
- border: 1px solid $border$;
+ background: $boxbg;
+ border: 1px solid $border;
padding: 5px;
text-align: center;
}
@@ -1056,7 +1062,7 @@ div#iv_view {
* 3 a -> next
* 4 a -> flagging
*/
-.ivview { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center }
+.ivview { position: fixed; background: $boxbg; border: 2px solid $border; padding: 5px; text-align: center }
.ivview img { cursor: pointer }
.ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px }
.ivview > div:nth-child(2) { position: relative }
@@ -1100,17 +1106,17 @@ div#iv_view {
position: absolute;
top: 0px;
left: 0px;
- background: $tabbg$;
- border: 1px solid $border$;
+ background: $tabbg;
+ border: 1px solid $border;
padding: 5px;
width: 600px;
text-align: center;
}
.fil_div a.close { float: right; border: 0; font-weight: bold }
.fil_div p.browseopts { padding: 2px 20px; line-height: 23px }
-.fil_div .browseopts a { outline: none; color: $maintext$ }
+.fil_div .browseopts a { outline: none; color: $maintext }
.fil_div .browseopts a.active { font-weight: bold }
-.fil_div b.ruler { display: block; margin: auto; width: 93%; height: 1px; border-bottom: 1px solid $border$; margin-bottom: 5px }
+.fil_div b.ruler { display: block; margin: auto; width: 93%; height: 1px; border-bottom: 1px solid $border; margin-bottom: 5px }
.fil_div h3 { width: 100%; text-align: center; font-size: 13px }
.fil_div table { width: 93%; text-align: left; margin: 0 auto 5px auto }
.fil_div table td.label label { width: 120px }
@@ -1119,10 +1125,10 @@ div#iv_view {
.fil_div label.active { font-weight: bold }
.fil_div .opts a { border: 0; outline: none }
.fil_div .opts b { margin: 0 7px; font-weight: normal }
-.fil_div .opts a.tsel { color: $maintext$; }
+.fil_div .opts a.tsel { color: $maintext; }
.fil_div table ul { margin: 0 0 0 15px }
.fil_div .slider p { margin: 1px; }
-.fil_div .slider div { margin: 1px; border: 1px solid $secborder$; float: left; height: 12px; }
+.fil_div .slider div { margin: 1px; border: 1px solid $secborder; float: left; height: 12px; }
.fil_div .slider div div { border-top: none; border-bottom: none; cursor: default; position: relative; height: 10px; margin: 1px; }
.fil_div .slider span { margin-left: 5px }
@@ -1152,19 +1158,19 @@ p.filselect i { font-style: normal }
/* Line drawing. This is awful */
.advsearch .advnest > tr > td:nth-child(2) { position: relative; width: 15px; padding: 0 }
-.advsearch .advnest > tr > td:nth-child(2) div { border-left: 1px solid $border$; width: 15px; position: absolute; left: 5px; top: 0; bottom: 0 }
+.advsearch .advnest > tr > td:nth-child(2) div { border-left: 1px solid $border; width: 15px; position: absolute; left: 5px; top: 0; bottom: 0 }
.advsearch .advnest > tr > td:nth-child(2).start { top: 13px }
-.advsearch .advnest > tr > td:nth-child(2).start div { border-top: 1px solid $border$ }
-.advsearch .advnest > tr > td:nth-child(2).start span { display: block; position: absolute; left: -5px; top: 0; width: 15px; border-top: 1px solid $border$; height: 1px }
-.advsearch .advnest > tr > td:nth-child(2).end div { bottom: 13px; border-bottom: 1px solid $border$ }
-.advsearch .advnest > tr > td:nth-child(2).mid span { display: block; position: absolute; left: 5px; top: 13px; width: 15px; border-top: 1px solid $border$; height: 1px }
+.advsearch .advnest > tr > td:nth-child(2).start div { border-top: 1px solid $border }
+.advsearch .advnest > tr > td:nth-child(2).start span { display: block; position: absolute; left: -5px; top: 0; width: 15px; border-top: 1px solid $border; height: 1px }
+.advsearch .advnest > tr > td:nth-child(2).end div { bottom: 13px; border-bottom: 1px solid $border }
+.advsearch .advnest > tr > td:nth-child(2).mid span { display: block; position: absolute; left: 5px; top: 13px; width: 15px; border-top: 1px solid $border; height: 1px }
.advsearch .elm_dd_input { display: inline-block; margin: 5px 4px; width: 150px; vertical-align: middle }
.advsearch .elm_dd_input.short { width: auto }
-.advsearch .advbut { width: 100%; background-color: $_blendbg$; text-align: right; white-space: nowrap }
+.advsearch .advbut { width: 100%; background-color: $blendbg; text-align: right; white-space: nowrap }
.advsearch .advbut > * { display: inline-block; box-sizing: border-box; height: 20px; padding: 3px 5px 0 2px; cursor: pointer; border-bottom: none; font-size: 16px }
-.advsearch .advbut > b { color: $grayedout$; font-style: normal }
-.advsearch .advheader { box-sizing: border-box; background-color: $_blendbg$; padding: 3px; width: 100%; margin-bottom: 2px }
+.advsearch .advbut > b { color: $grayedout; font-style: normal }
+.advsearch .advheader { box-sizing: border-box; background-color: $blendbg; padding: 3px; width: 100%; margin-bottom: 2px }
.advsearch .advheader > h3 { text-align: center; font-weight: bold; font-size: inherit; margin-bottom: 3px }
.advsearch .advheader .opts { display: flex; justify-content: space-between; align-items: flex-end; min-width: 170px }
.advsearch .advheader .opts > * { margin: 0; white-space: nowrap }
@@ -1187,21 +1193,21 @@ p.filselect i { font-style: normal }
.imageflag > ul:nth-child(1) { margin-left: 15px }
.imageflag > div:nth-child(1) { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2px }
.imageflag > div:nth-child(1) span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 20px }
-.imageflag > div:nth-child(2) { border: 1px solid $border$; padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 }
+.imageflag > div:nth-child(2) { border: 1px solid $border; padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 }
.imageflag > div:nth-child(2) a { border: none; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center }
.imageflag > div:nth-child(3) { display: flex; justify-content: space-between; }
.imageflag > div:nth-child(4) { display: flex; margin-bottom: 5px }
.imageflag > div:nth-child(4) p { flex: 1 0; padding-top: 15px }
.imageflag > div:nth-child(4) ul { list-style-type: none; margin: 0 5px 0 0 }
.imageflag > div:nth-child(4) ul li:first-child { text-align: center }
-.imageflag > div:nth-child(4) ul li label { display: inline-block; border: 1px solid $secborder$; padding: 7px; width: 100px; white-space: nowrap; margin: 2px 0; cursor: pointer }
+.imageflag > div:nth-child(4) ul li label { display: inline-block; border: 1px solid $secborder; padding: 7px; width: 100px; white-space: nowrap; margin: 2px 0; cursor: pointer }
.imageflag > div:nth-child(4) ul li.sel label,
-.imageflag > div:nth-child(4) ul li label:hover { background-color: $secbg$ }
+.imageflag > div:nth-child(4) ul li label:hover { background-color: $secbg }
.imageflag > div:nth-child(4) ul li.overrule label { position: relative; left: 80px; border: none; padding: 0 }
.imageflag > div:nth-child(6) { min-height: 200px; padding: 15px 0 }
.imageflag > div:nth-child(6) table { margin: 0 auto }
.imageflag > div:nth-child(6) table tr.ignored td:nth-child(2),
-.imageflag > div:nth-child(6) table tr.ignored td:nth-child(3) { text-decoration: line-through; color: $grayedout$ }
+.imageflag > div:nth-child(6) table tr.ignored td:nth-child(3) { text-decoration: line-through; color: $grayedout }
.imageflag > div:nth-child(6) table td { min-width: 50px }
.imageflag .fullscreen { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #000 }
@@ -1210,19 +1216,19 @@ p.filselect i { font-style: normal }
div.imagebrowse { padding: 0; display: flex; flex-wrap: wrap }
.imagebrowse .imagecard { padding: 2px; display: flex; flex: 1 }
-.imagebrowse .imagecard:hover { background-color: $secbg$ }
+.imagebrowse .imagecard:hover { background-color: $secbg }
.imagebrowse .imagecard > a { flex-shrink: 0; display: block; width: 150px; height: 120px; background-size: contain; background-repeat: no-repeat; background-position: top right; border: none }
.imagebrowse .imagecard > div { padding: 0 0 0 4px }
.imagebrowse .imagecard > div svg { font-size: 11px }
-.imagebrowse .imagecard > div svg .errorbar { stroke: $standout$; stroke-width: 2 }
-.imagebrowse .imagecard > div svg .ruler { stroke: $border$; stroke-width: 1; stroke-dasharray: 3 }
-.imagebrowse .imagecard > div svg rect { fill: $maintext$ }
+.imagebrowse .imagecard > div svg .errorbar { stroke: $standout; stroke-width: 2 }
+.imagebrowse .imagecard > div svg .ruler { stroke: $border; stroke-width: 1; stroke-dasharray: 3 }
+.imagebrowse .imagecard > div svg rect { fill: $maintext }
/****** Icons *******/
.icons {
- background: url(/f/icons.png?$icons_version$) no-repeat;
+ background: url(/g/icons.png??#{$version}) no-repeat;
width: 16px;
height: 14px;
margin: 0 2px 0 0;
@@ -1242,7 +1248,7 @@ div.imagebrowse { padding: 0; display: flex; flex-wrap: wrap }
abbr.icons, abbr.uicons { cursor: default; }
a .icons { cursor: pointer }
.icons.oth { background: none; }
-$iconcss$
+@import 'data/icons/icons';
.release_icons { width: 16px; height: 16px; float: right; margin-left: 4px; }
@@ -1251,11 +1257,11 @@ $iconcss$
.release_icon_voiced4, .release_icon_anim4 { filter: hue-rotate(80deg); }
/* Relation graph colors */
-svg .border { fill: none; stroke: $border$ }
-svg .edge polygon.border { fill: $border$ }
-svg .nodebg { fill: $tabbg$; stroke: $tabbg$ }
-svg text { fill: $maintext$ }
+svg .border { fill: none; stroke: $border }
+svg .edge polygon.border { fill: $border }
+svg .nodebg { fill: $tabbg; stroke: $tabbg }
+svg text { fill: $maintext }
svg .edge text { font: 8px "Tahoma", "Arial", sans-serif }
-#graph_current .border { stroke: $warnborder$ }
-#graph_current .nodebg { stroke: $warnborder$; fill: $warnbg$ }
+#graph_current .border { stroke: $warnborder }
+#graph_current .nodebg { stroke: $warnborder; fill: $warnbg }
diff --git a/lib/VNDB/Config.pm b/lib/VNDB/Config.pm
index 8ed858f1..d360c258 100644
--- a/lib/VNDB/Config.pm
+++ b/lib/VNDB/Config.pm
@@ -17,7 +17,7 @@ my $config = {
},
skin_default => 'angel',
- placeholder_img => 'http://s.vndb.org/s/angel/bg.jpg', # Used in the og:image meta tag
+ placeholder_img => 'https://s.vndb.org/s/angel-bg.jpg', # Used in the og:image meta tag
scrypt_args => [ 65536, 8, 1 ], # N, r, p
scrypt_salt => 'another-random-string',
form_salt => 'a-private-string-here',
diff --git a/lib/VNDB/Skins.pm b/lib/VNDB/Skins.pm
index a0716024..09df652f 100644
--- a/lib/VNDB/Skins.pm
+++ b/lib/VNDB/Skins.pm
@@ -11,18 +11,16 @@ my $skins;
sub skins {
$skins ||= do { +{ map {
- my $skin = /\/([^\/]+)\/conf/ ? $1 : die;
+ my $skin = /\/([^\/]+)\.sass/ ? $1 : die;
my %o;
open my $F, '<:utf8', $_ or die $!;
- while(<$F>) {
- chomp;
- s/\r//g;
- s{[\t\s]*//.+$}{};
- next if !/^([a-z0-9]+)[\t\s]+(.+)$/;
- $o{$1} = $2;
+ if(<$F> !~ qr{^// *userid: *([0-9]+) *name: *(.+)}) {
+ warn "Invalid skin: $skin\n";
+ ()
+ } else {
+ +( $skin, { userid => $1, name => $2 })
}
- +( $skin, \%o )
- } glob "$ROOT/static/s/*/conf" } };
+ } glob "$ROOT/css/skins/*.sass" } };
$skins;
}
diff --git a/lib/VNDB/Util/LayoutHTML.pm b/lib/VNDB/Util/LayoutHTML.pm
index 8ff49af6..a9e0c05f 100644
--- a/lib/VNDB/Util/LayoutHTML.pm
+++ b/lib/VNDB/Util/LayoutHTML.pm
@@ -35,7 +35,7 @@ sub htmlFooter { # %options => { pref_code => 1 }
# Abuse an empty noscript tag for the formcode to update a preference setting, if the page requires one.
noscript id => 'pref_code', title => $self->authGetCode('/xml/prefs.xml'), ''
if $o{pref_code} && $self->authInfo->{id};
- script type => 'text/javascript', src => config->{url_static}.'/f/vndb.js?'.config->{version}, '';
+ script type => 'text/javascript', src => config->{url_static}.'/g/vndb.js?'.config->{version}, '';
VNWeb::HTML::_scripts_({});
end 'body';
end 'html';
diff --git a/lib/VNWeb/HTML.pm b/lib/VNWeb/HTML.pm
index 32b59218..059a103c 100644
--- a/lib/VNWeb/HTML.pm
+++ b/lib/VNWeb/HTML.pm
@@ -164,7 +164,7 @@ sub _head_ {
title_ $o->{title}.' | vndb';
base_ href => tuwf->reqURI();
link_ rel => 'shortcut icon', href => '/favicon.ico', type => 'image/x-icon';
- link_ rel => 'stylesheet', href => config->{url_static}.'/s/'.$skin.'/style.css?'.config->{version}, type => 'text/css', media => 'all';
+ link_ rel => 'stylesheet', href => config->{url_static}.'/g/'.$skin.'.css?'.config->{version}, type => 'text/css', media => 'all';
link_ rel => 'search', type => 'application/opensearchdescription+xml', title => 'VNDB Visual Novel Search', href => tuwf->reqBaseURI().'/opensearch.xml';
style_ type => 'text/css', sub { lit_ _sanitize_css $customcss } if $customcss;
if($o->{feeds}) {
@@ -479,8 +479,8 @@ sub _scripts_ {
# Escaping rules for a JSON <script> context are kinda weird, but more efficient than regular xml_escape().
lit_(JSON::XS->new->canonical->encode(tuwf->req->{pagevars}) =~ s{</}{<\\/}rg =~ s/<!--/<\\u0021--/rg);
} if keys tuwf->req->{pagevars}->%*;
- script_ type => 'application/javascript', src => config->{url_static}.'/f/elm.js?'.config->{version}, '' if tuwf->req->{pagevars}{elm};
- script_ type => 'application/javascript', src => config->{url_static}.'/f/plain.js?'.config->{version}, '' if tuwf->req->{js} || tuwf->req->{pagevars}{elm};
+ script_ type => 'application/javascript', src => config->{url_static}.'/g/elm.js?'.config->{version}, '' if tuwf->req->{pagevars}{elm};
+ script_ type => 'application/javascript', src => config->{url_static}.'/g/plain.js?'.config->{version}, '' if tuwf->req->{js} || tuwf->req->{pagevars}{elm};
}
diff --git a/static/s/air/bg.jpg b/static/s/air-bg.jpg
index 3957d3ba..3957d3ba 100644
--- a/static/s/air/bg.jpg
+++ b/static/s/air-bg.jpg
Binary files differ
diff --git a/static/s/air/bgright.png b/static/s/air-right.png
index 5cee5462..5cee5462 100644
--- a/static/s/air/bgright.png
+++ b/static/s/air-right.png
Binary files differ
diff --git a/static/s/air/conf b/static/s/air/conf
deleted file mode 100644
index 209d1c2b..00000000
--- a/static/s/air/conf
+++ /dev/null
@@ -1,32 +0,0 @@
-////////////////////////////////////////////////////////////////
-// 'AIR' skin for VNDB.org //
-// Created by Yirba <yirba AT spiderlilytranslations DOT com> //
-// Some portions (c)2000 Key/VisualArt's //
-////////////////////////////////////////////////////////////////
-
-name AIR (sky blue)
-userid 13885
-maintext #222222
-grayedout #77a9dd
-standout #bb1511
-link #226588
-statok #33ff38
-statnok #ff3833
-footer #226588
-maintitle #226588
-boxtitle #77a9dd
-alttitle #000000
-bodybg #ffffff
-tabbg #ddeeff
-secbg #bed8f2
-secborder #5677cc
-border #77a9dd
-boxbg #ccddeebc
-imglefttop bg.jpg
-imgrighttop bgright.png
-diffadd #aaccbc
-diffdel #ccaabb
-warnbg #ccaabb
-warnborder #ff3833
-noticebg #aaccbc
-noticeborder #33ff38
diff --git a/static/s/angel/bg-xmas.jpg b/static/s/angel-bg-xmas.jpg
index 66604f8a..66604f8a 100644
--- a/static/s/angel/bg-xmas.jpg
+++ b/static/s/angel-bg-xmas.jpg
Binary files differ
diff --git a/static/s/angel/bg.jpg b/static/s/angel-bg.jpg
index f91e414e..f91e414e 100644
--- a/static/s/angel/bg.jpg
+++ b/static/s/angel-bg.jpg
Binary files differ
diff --git a/static/s/angel/bgright.jpg b/static/s/angel-right.jpg
index e1dff0cd..e1dff0cd 100644
--- a/static/s/angel/bgright.jpg
+++ b/static/s/angel-right.jpg
Binary files differ
diff --git a/static/s/angel/conf b/static/s/angel/conf
deleted file mode 100644
index f0317919..00000000
--- a/static/s/angel/conf
+++ /dev/null
@@ -1,37 +0,0 @@
-name Angelic Serenade (dark blue)
-userid 2
-
-// text
-maintext #ddd // primary text color (also used for the menu links)
-grayedout #37a // color used for grayed-out/non-important things
-standout #e44 // color of 'stand-out' text
-link #7bd // primary link color (not used for the menu links)
-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)
-footer #247 // text color of the footer
-
-// titles
-maintitle #135 // text color of the site title, set to '0' to hide the main title
-boxtitle #258 // box titles
-alttitle #fff // alternative title
-
-// bg colors
-bodybg #000 // main background color
-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 #071c30bc // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #354 // background color of changes in the diff viewer
-diffdel #534
-warnbg #534 // background color of a warning box
-warnborder #c00 // ..border
-noticebg #354 // notice box
-noticeborder #0c0 // ...and border
-
diff --git a/static/s/aselia_01/bgright.jpg b/static/s/aselia_01-right.jpg
index 8040e813..8040e813 100644
--- a/static/s/aselia_01/bgright.jpg
+++ b/static/s/aselia_01-right.jpg
Binary files differ
diff --git a/static/s/aselia_01/conf b/static/s/aselia_01/conf
deleted file mode 100644
index b07657c7..00000000
--- a/static/s/aselia_01/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Eien no Aselia (falu red)
-userid 51
-
-// Eien no Aselia skin made using Minitokyo.Eien.no.Aselia.Scans_373967
-// created: 09/27/2009 by echomateria
-
-// text
-maintext #ffffff // primary text color (also used for the menu links)
-grayedout #eee388 // color used for grayed-out/non-important things
-standout #e96e73 // color of 'stand-out' text
-link #4a2b33 // primary link color (not used for the menu links)
-statok #ffcbee // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #e96e73 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #f4f1e6 // text color of the footer
-
-// titles
-maintitle #fce5e5 // text color of the site title
-boxtitle #f4e1b5 // box titles
-alttitle #ed9f92 // alternative title
-
-// bg colors
-bodybg #8a3c35 // main background color
-tabbg #ac7595 // background color of inactive tabs
-secbg #8a3c35 // secondary background color (used on input fields and table headers)
-secborder #e86a76 // secondary border color (used on input fields)
-border #f1c0b2 // primary border color
-boxbg #ac759595 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #833d71 // background color of changes in the diff viewer
-diffdel #6c3a55
-warnbg #6b3b51 // background color of a warning box
-warnborder #e37192 // ..border
-noticebg #cc8487 // notice box
-noticeborder #975352 // ...and border
diff --git a/static/s/carnevale/bgright.jpg b/static/s/carnevale-right.jpg
index 570e882e..570e882e 100644
--- a/static/s/carnevale/bgright.jpg
+++ b/static/s/carnevale-right.jpg
Binary files differ
diff --git a/static/s/carnevale/conf b/static/s/carnevale/conf
deleted file mode 100644
index 84ba8940..00000000
--- a/static/s/carnevale/conf
+++ /dev/null
@@ -1,40 +0,0 @@
-name Gekkou no Carnevale (black)
-userid 51
-
-// Gekkou no Carnevale skin made using a wallpaper comes with the game
-// created: 22/01/2009 by echomateria
-
-// text
-maintext #b9c7ae // primary text color (also used for the menu links)
-grayedout #cfdbc7 // color used for grayed-out/non-important things
-standout #eff5f5 // color of 'stand-out' text
-link #ffffff // primary link color (not used for the menu links)
-statok #dab0fc //# // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #768b78 //# // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #b9c7ae // text color of the footer
-
-// titles
-maintitle #b9c7ae // text color of the site title
-boxtitle #c7d3bf // box titles
-alttitle #6f8578 //# // alternative title
-
-// bg colors
-bodybg #030708 // main background color
-tabbg #1f272a // background color of inactive tabs
-secbg #121622 // secondary background color (used on input fields and table headers)
-secborder #ffffff // secondary border color (used on input fields)
-border #b9c7ae // primary border color
-boxbg #12162290 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #76a3b8 // background color of changes in the diff viewer
-diffdel #354554
-warnbg #5d182b // background color of a warning box
-warnborder #829076 // ..border
-noticebg #263a45 // notice box
-noticeborder #21343a // ...and border
-
diff --git a/static/s/eiel/bg.jpg b/static/s/eiel-bg.jpg
index 03126d8a..03126d8a 100644
--- a/static/s/eiel/bg.jpg
+++ b/static/s/eiel-bg.jpg
Binary files differ
diff --git a/static/s/eiel/conf b/static/s/eiel/conf
deleted file mode 100644
index fd00320c..00000000
--- a/static/s/eiel/conf
+++ /dev/null
@@ -1,40 +0,0 @@
-name Jingai Makyo (peach-orange)
-userid 51
-
-// A skin made using an image I had for a long time without knowing it's source,
-// thankfully this skin finally brought out the answer that it was from Jingai Makyo.
-// created: 24/01/2009 by echomateria
-
-// text
-maintext #f8cb8a // primary text color (also used for the menu links)
-grayedout #f26a7e // color used for grayed-out/non-important things
-standout #ff435f // color of 'stand-out' text
-link #ffffff // primary link color (not used for the menu links)
-statok #ffcbee //# // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #ff435f //# // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #362142 // text color of the footer
-
-// titles
-maintitle #676082 // text color of the site title
-boxtitle #ffcbee // box titles
-alttitle #f26a7e //# // alternative title
-
-// bg colors
-bodybg #fdd298 // main background color
-tabbg #5a3a49 // background color of inactive tabs
-secbg #584563 // secondary background color (used on input fields and table headers)
-secborder #c42b5a // secondary border color (used on input fields)
-border #362142 // primary border color
-boxbg #36214299 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #2bc88b // background color of changes in the diff viewer
-diffdel #ca4a4d
-warnbg #c42b5a // background color of a warning box
-warnborder #f8cb8a // ..border
-noticebg #b48ab2 // notice box
-noticeborder #f8cb8a // ...and border
-
diff --git a/static/s/ever17_01/bgright.jpg b/static/s/ever17_01-right.jpg
index 4ee43231..4ee43231 100644
--- a/static/s/ever17_01/bgright.jpg
+++ b/static/s/ever17_01-right.jpg
Binary files differ
diff --git a/static/s/ever17_01/conf b/static/s/ever17_01/conf
deleted file mode 100644
index e7c7ff1c..00000000
--- a/static/s/ever17_01/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Ever17 (bondi blue)
-userid 51
-
-// Ever 17 skin made using the images from the extras section of the game
-// created: 01/01/2009 by echomateria
-
-// text
-maintext #3c363f // primary text color (also used for the menu links)
-grayedout #785a5b // color used for grayed-out/non-important things
-standout #966932 // color of 'stand-out' text
-link #013f7a // primary link color (not used for the menu links)
-statok #9c4b00 //#d87417 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #eb0e4c // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #e2cfa6 // text color of the footer
-
-// titles
-maintitle #f0a260 // text color of the site title
-boxtitle #f0a260 // box titles
-alttitle #ff9013 // alternative title
-
-// bg colors
-bodybg #00879b // main background color
-tabbg #81d5ea // background color of inactive tabs
-secbg #bcd1e4 // secondary background color (used on input fields and table headers)
-secborder #00627e // secondary border color (used on input fields)
-border #016c80 // primary border color
-boxbg #d1ebee77 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #f1a361 // background color of changes in the diff viewer
-diffdel #9a7071
-warnbg #c43f5c // background color of a warning box
-warnborder #951924 // ...border
-noticebg #fefbf6 // notice box
-noticeborder #f1a360 // ...and border
diff --git a/static/s/fate_01/bg.jpg b/static/s/fate_01-bg.jpg
index 275adea3..275adea3 100644
--- a/static/s/fate_01/bg.jpg
+++ b/static/s/fate_01-bg.jpg
Binary files differ
diff --git a/static/s/fate_01/conf b/static/s/fate_01/conf
deleted file mode 100644
index f749ed0e..00000000
--- a/static/s/fate_01/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Fate/stay night (seal brown)
-userid 51
-
-// FSN skin skin made using a popular fanart
-// created: 12/31/2008 by echomateria
-
-// text
-maintext #ab928d // primary text color (also used for the menu links)
-grayedout #916858 //#65483d // color used for grayed-out/non-important things
-standout #72322b // color of 'stand-out' text
-link #eee0da // primary link color (not used for the menu links)
-statok #efdab9 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #b07a6b // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #642924 // text color of the footer
-
-// titles
-maintitle #200b0c // text color of the site title
-boxtitle #d56243 // box titles
-alttitle #d7926e // alternative title
-
-// bg colors
-bodybg #200b0c // main background color
-tabbg #130504 // background color of inactive tabs
-secbg #7c362f // secondary background color (used on input fields and table headers)
-secborder #33261d // secondary border color (used on input fields)
-border #9e4a47 // primary border color
-boxbg #4d3c3abc // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #4d2c25 // background color of changes in the diff viewer
-diffdel #6f5347
-warnbg #882f27 // background color of a warning box
-warnborder #fbf1e0 // ..border
-noticebg #882f27 // notice box
-noticeborder #fbf1e0 // ...and border
-
diff --git a/static/s/fate_02/bg.jpg b/static/s/fate_02-bg.jpg
index 83e30554..83e30554 100644
--- a/static/s/fate_02/bg.jpg
+++ b/static/s/fate_02-bg.jpg
Binary files differ
diff --git a/static/s/fate_02/conf b/static/s/fate_02/conf
deleted file mode 100644
index 0c0ddc96..00000000
--- a/static/s/fate_02/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Fate/stay night (pale carmine)
-userid 51
-
-// FSN skin made using a popular fanart
-// created: 01/01/2009 by echomateria
-
-// text
-maintext #fcfbfb // primary text color (also used for the menu links)
-grayedout #ff9d82 // color used for grayed-out/non-important things
-standout #ffc98f // color of 'stand-out' text
-link #48b2c1 // primary link color (not used for the menu links)
-statok #ff7682 //#db6570 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #9f72ff //#7330ff // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #fffed5 // text color of the footer
-
-// titles
-maintitle #ffffff // text color of the site title
-boxtitle #ffffff // box titles
-alttitle #c4a9a7 //#7b6a69 // alternative title
-
-// bg colors
-bodybg #ac4b47 // main background color
-tabbg #723033 // background color of inactive tabs
-secbg #792447 // secondary background color (used on input fields and table headers)
-secborder #a68483 // secondary border color (used on input fields)
-border #452d2c // primary border color
-boxbg #c6093366 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #3d3231 // background color of changes in the diff viewer
-diffdel #01023f
-warnbg #772446 // background color of a warning box
-warnborder #35152d // ..border
-noticebg #5c151f // notice box
-noticeborder #460015 // ...and border
-
diff --git a/static/s/grey/bg.jpg b/static/s/grey-bg.jpg
index 8d61ac55..8d61ac55 100644
--- a/static/s/grey/bg.jpg
+++ b/static/s/grey-bg.jpg
Binary files differ
diff --git a/static/s/grey/bgright.jpg b/static/s/grey-right.jpg
index c52499ea..c52499ea 100644
--- a/static/s/grey/bgright.jpg
+++ b/static/s/grey-right.jpg
Binary files differ
diff --git a/static/s/grey/conf b/static/s/grey/conf
deleted file mode 100644
index ef3ca505..00000000
--- a/static/s/grey/conf
+++ /dev/null
@@ -1,37 +0,0 @@
-name Touhou (grey)
-userid 2
-
-// text
-maintext #222
-grayedout #666
-standout #500
-link #005
-statok #050
-statnok #500
-footer #999
-
-// titles
-maintitle #ccc
-boxtitle #444
-alttitle #000
-
-// bg colors
-bodybg #fff
-tabbg #ddd
-secbg #ccc
-secborder #000
-border #999
-boxbg #ddddddcc
-
-// images (0 = no image)
-imglefttop bg.jpg
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #cfc
-diffdel #fcc
-warnbg #fcc
-warnborder #c00
-noticebg #cfc
-noticeborder #0c0
-
diff --git a/static/s/higanbana/bg.jpg b/static/s/higanbana-bg.jpg
index 1d02e802..1d02e802 100644
--- a/static/s/higanbana/bg.jpg
+++ b/static/s/higanbana-bg.jpg
Binary files differ
diff --git a/static/s/higanbana/bgright.png b/static/s/higanbana-right.png
index ee96f504..ee96f504 100644
--- a/static/s/higanbana/bgright.png
+++ b/static/s/higanbana-right.png
Binary files differ
diff --git a/static/s/higanbana/conf b/static/s/higanbana/conf
deleted file mode 100644
index d7ffb2f1..00000000
--- a/static/s/higanbana/conf
+++ /dev/null
@@ -1,32 +0,0 @@
-////////////////////////////////////////////////////////////////
-// 'Higanbana no Saku Yoru ni' skin for VNDB.org //
-// Created by Yirba <yirba AT spiderlilytranslations DOT com> //
-// Some portions (c)2011 Ryukishi07/07th Expansion //
-////////////////////////////////////////////////////////////////
-
-name Higanbana no Saku Yoru ni (maroon)
-userid 13885
-maintext #ddd
-grayedout #822
-standout #ec4
-link #d77
-statok #0c0
-statnok #c00
-footer #722
-maintitle #511
-boxtitle #822
-alttitle #fff
-bodybg #000
-tabbg #200
-secbg #410d0d
-secborder #a33
-border #822
-boxbg #331111bc
-imglefttop bg.jpg
-imgrighttop bgright.png
-diffadd #354
-diffdel #534
-warnbg #534
-warnborder #c00
-noticebg #354
-noticeborder #0c0
diff --git a/static/s/higu/bg.jpg b/static/s/higu-bg.jpg
index 9430acfb..9430acfb 100644
--- a/static/s/higu/bg.jpg
+++ b/static/s/higu-bg.jpg
Binary files differ
diff --git a/static/s/higu/conf b/static/s/higu/conf
deleted file mode 100644
index 9c860379..00000000
--- a/static/s/higu/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Higurashi no Naku Koro ni (orange)
-userid 51
-
-// Higurashi no Naku Koro ni skin made using an image I found in MiniTokyo
-// created: 22/01/2009 by echomateria
-
-// text
-maintext #2c1a18 // primary text color (also used for the menu links)
-grayedout #8c5b3b // color used for grayed-out/non-important things
-standout #c24857 // color of 'stand-out' text
-link #3c549c // primary link color (not used for the menu links)
-statok #8c6290 //#735d8b // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #824e52 //#522e38 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #2e2536 // text color of the footer
-
-// titles
-maintitle #e5d3e1 // text color of the site title
-boxtitle #1b1b51 // box titles
-alttitle #35346d //#423a73 // alternative title
-
-// bg colors
-bodybg #f89e7e // main background color
-tabbg #9b8587 // background color of inactive tabs
-secbg #f7c7bb // secondary background color (used on input fields and table headers)
-secborder #3c549c // secondary border color (used on input fields)
-border #2c1a18 // primary border color
-boxbg #f7c7bb80 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #c2bcc6 // background color of changes in the diff viewer
-diffdel #8c5b3b
-warnbg #ae6866 // background color of a warning box
-warnborder #612028 // ..border
-noticebg #9b8587 // notice box
-noticeborder #dc9b7f // ...and border
-
diff --git a/static/s/lb/bg.jpg b/static/s/lb-bg.jpg
index 7726f1b7..7726f1b7 100644
--- a/static/s/lb/bg.jpg
+++ b/static/s/lb-bg.jpg
Binary files differ
diff --git a/static/s/lb/conf b/static/s/lb/conf
deleted file mode 100644
index a1e317a0..00000000
--- a/static/s/lb/conf
+++ /dev/null
@@ -1,37 +0,0 @@
-name Little Busters! (pink)
-userid 93
-
-// text
-maintext #408
-grayedout #670159
-standout #e44
-link #a2d
-statok #0c0
-statnok #c00
-footer #f76ee2
-
-// titles
-maintitle #f78de7
-boxtitle #670159
-alttitle #5328a7
-
-// bg colors
-bodybg #fff
-tabbg #f78de7
-secbg #f78de7
-secborder #670159
-border #f76ee2
-boxbg #f7b6edcc
-
-// images (0 = no image)
-imglefttop bg.jpg
-imgrighttop 0
-
-// misc colors
-diffadd #cfc
-diffdel #fcc
-warnbg #fff
-warnborder #c00
-noticebg #f7b6ed
-noticeborder #670159
-
diff --git a/static/s/lb_02/bg.jpg b/static/s/lb_02-bg.jpg
index 4db226b7..4db226b7 100644
--- a/static/s/lb_02/bg.jpg
+++ b/static/s/lb_02-bg.jpg
Binary files differ
diff --git a/static/s/lb_02/conf b/static/s/lb_02/conf
deleted file mode 100644
index e0fd96c2..00000000
--- a/static/s/lb_02/conf
+++ /dev/null
@@ -1,38 +0,0 @@
-name Little Busters! (lemon chiffon)
-userid 51
-
-// Little Busters! skin made using the Minitokyo.Little.Busters.Scans_316439
-// created: 09/27/2009 by echomateria
-
-// text
-maintext #3c363f // primary text color (also used for the menu links)
-grayedout #785a5b // color used for grayed-out/non-important things
-standout #eb0e4c // color of 'stand-out' text
-link #04529b // primary link color (not used for the menu links)
-statok #d87417 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #eb0e4c // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #eb0e4c // text color of the footer
-
-// titles
-maintitle #fffeff // text color of the site title
-boxtitle #ff9013 // box titles
-alttitle #f0a260 // alternative title
-
-// bg colors
-bodybg #fff4d4 // main background color
-tabbg #9aa4d7 // background color of inactive tabs
-secbg #bcd1e4 // secondary background color (used on input fields and table headers)
-secborder #966932 // secondary border color (used on input fields)
-border #016c80 // primary border color
-boxbg #d1ebee99 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #3689b5 // background color of changes in the diff viewer
-diffdel #b7adc6
-warnbg #e97a9a // background color of a warning box
-warnborder #f1a360 // ...border
-noticebg #fefbf6 // notice box
-noticeborder #951924 // ...and border
diff --git a/static/s/primitive/bgright.jpg b/static/s/primitive-right.jpg
index bc00f894..bc00f894 100644
--- a/static/s/primitive/bgright.jpg
+++ b/static/s/primitive-right.jpg
Binary files differ
diff --git a/static/s/primitive/conf b/static/s/primitive/conf
deleted file mode 100644
index 6f3b4b8f..00000000
--- a/static/s/primitive/conf
+++ /dev/null
@@ -1,40 +0,0 @@
-name Primitive Link (pale chestnut)
-userid 51
-
-// Primitive Link skin made using an image that I liked without knowing what it's based on for a long time
-// created: 23/01/2009 by echomateria
-
-// text
-maintext #f8eacd // primary text color (also used for the menu links)
-grayedout #ff9d8a // color used for grayed-out/non-important things
-standout #642a12 // color of 'stand-out' text
-link #ffda63 // primary link color (not used for the menu links)
-statok #edc176 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #d63f21 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #935a40 // text color of the footer
-
-// titles
-maintitle #f8eacd // text color of the site title
-boxtitle #f8eacd // box titles
-alttitle #f19d20 // alternative title
-
-// bg colors
-bodybg #ddac9b // main background color
-tabbg #935a40 // background color of inactive tabs
-secbg #be8f9f // secondary background color (used on input fields and table headers)
-secborder #642a12 // secondary border color (used on input fields)
-border #edc176 // primary border color
-boxbg #935a4099 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #bd7f98 // background color of changes in the diff viewer
-diffdel #c6562d
-warnbg #7a3313 // background color of a warning box
-warnborder #ff392a // ..border
-noticebg #d4aab4 // notice box
-noticeborder #edc176 // ...and border
-
diff --git a/static/s/saya/bgright.jpg b/static/s/saya-right.jpg
index 92f40c5c..92f40c5c 100644
--- a/static/s/saya/bgright.jpg
+++ b/static/s/saya-right.jpg
Binary files differ
diff --git a/static/s/saya/conf b/static/s/saya/conf
deleted file mode 100644
index fd4408d7..00000000
--- a/static/s/saya/conf
+++ /dev/null
@@ -1,40 +0,0 @@
-name Saya no Uta (dark scarlet)
-userid 51
-
-// Saya no Uta skin made using a criminally cute fanart
-// created: 22/01/2009 by echomateria
-
-// text
-maintext #ffffff // primary text color (also used for the menu links)
-grayedout #ecbc93 // color used for grayed-out/non-important things
-standout #d75f25 // color of 'stand-out' text
-link #ffcb3a // primary link color (not used for the menu links)
-statok #a55a3d // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #281e14 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #e07340 // text color of the footer
-
-// titles
-maintitle #ebb48b // text color of the site title
-boxtitle #de9670 // box titles
-alttitle #ebb48b // alternative title
-
-// bg colors
-bodybg #25010f // main background color
-tabbg #575c51 // background color of inactive tabs
-secbg #437f63 // secondary background color (used on input fields and table headers)
-secborder #ffcb3a // secondary border color (used on input fields)
-border #ebb48b // primary border color
-boxbg #437f6388 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #f59731 // background color of changes in the diff viewer
-diffdel #f2c5a3
-warnbg #d45628 // background color of a warning box
-warnborder #fbab34 // ..border
-noticebg #c5af88 // notice box
-noticeborder #56714e // ...and border
-
diff --git a/static/s/seinarukana/bg.jpg b/static/s/seinarukana-bg.jpg
index d49ec9a1..d49ec9a1 100644
--- a/static/s/seinarukana/bg.jpg
+++ b/static/s/seinarukana-bg.jpg
Binary files differ
diff --git a/static/s/seinarukana/conf b/static/s/seinarukana/conf
deleted file mode 100644
index 1a2a833d..00000000
--- a/static/s/seinarukana/conf
+++ /dev/null
@@ -1,38 +0,0 @@
-name Seinarukana (white)
-userid 51
-
-// Seinarukana skin made using a callendar image
-// created: 12/31/2008 by echomateria
-
-// text
-maintext #131838 // primary text color (also used for the menu links)
-grayedout #fc8e77 //#fcdfd9 // color used for grayed-out/non-important things
-standout #e93d71 //#a5e2f2 // color of 'stand-out' text
-link #5a5fc7 //#9fa1c7 // primary link color (not used for the menu links)
-statok #424d81 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #a43462 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #324978 // text color of the footer
-
-// titles
-maintitle #99c9dd // text color of the site title
-boxtitle #e93d71 // box titles
-alttitle #983666 // alternative title
-
-// bg colors
-bodybg #ffffff // main background color
-tabbg #bfd2e3 // background color of inactive tabs
-secbg #bcd1e4 // secondary background color (used on input fields and table headers)
-secborder #7a88a5 // secondary border color (used on input fields)
-border #324978 // primary border color
-boxbg #fde9e688 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #3689b5 // background color of changes in the diff viewer
-diffdel #b7adc6
-warnbg #ee3970 // background color of a warning box
-warnborder #451f4b // ...border
-noticebg #fdf1e8 // notice box
-noticeborder #d4aba2 // ...and border
diff --git a/static/s/taka/bgright.jpg b/static/s/taka-right.jpg
index e88e1876..e88e1876 100644
--- a/static/s/taka/bgright.jpg
+++ b/static/s/taka-right.jpg
Binary files differ
diff --git a/static/s/taka/conf b/static/s/taka/conf
deleted file mode 100644
index 37f0993e..00000000
--- a/static/s/taka/conf
+++ /dev/null
@@ -1,40 +0,0 @@
-name Sora no Iro, Mizu no Iro (turquoise)
-userid 51
-
-// A Sora no Iro, Mizu no Iro skin based on a wallpaper named My Perfect Day
-// created: 23/01/2009 by echomateria
-
-// text
-maintext #fefefc // primary text color (also used for the menu links)
-grayedout #4b2427 // color used for grayed-out/non-important things
-standout #ffaa88 // color of 'stand-out' text
-link #f4d926 // primary link color (not used for the menu links)
-statok #f8a022 //# // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #4b2427 //# // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #f6ffff // text color of the footer
-
-// titles
-maintitle #f6ffff // text color of the site title
-boxtitle #943048 // box titles
-alttitle #a93f56 //# // alternative title
-
-// bg colors
-bodybg #4bb3ae // main background color
-tabbg #3c6d69 // background color of inactive tabs
-secbg #48878c // secondary background color (used on input fields and table headers)
-secborder #f4d926 // secondary border color (used on input fields)
-border #48878c // primary border color
-boxbg #48878c92 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #b2f68f // background color of changes in the diff viewer
-diffdel #5ed8e5
-warnbg #008278 // background color of a warning box
-warnborder #fcfefd // ..border
-noticebg #5bdebe // notice box
-noticeborder #a9fdc1 // ...and border
-
diff --git a/static/s/teal/conf b/static/s/teal/conf
deleted file mode 100644
index 7f8f2ba5..00000000
--- a/static/s/teal/conf
+++ /dev/null
@@ -1,34 +0,0 @@
-// by sw1tchbl4d3
-
-name Teal (teal)
-userid 163596
-
-maintext #ddd
-grayedout #007070
-standout #e44
-link #00c9c9
-statok #0c0
-statnok #c00
-footer #004040
-
-maintitle #003535
-boxtitle #007070
-alttitle #fff
-
-bodybg #000
-tabbg #001010
-secbg #003434
-secborder #008080
-border #007070
-boxbg #002525bc
-
-imglefttop 0
-imgrighttop 0
-
-diffadd #354
-diffdel #534
-warnbg #534
-warnborder #c00
-noticebg #354
-noticeborder #0c0
-
diff --git a/static/s/term/conf b/static/s/term/conf
deleted file mode 100644
index d6fa1d52..00000000
--- a/static/s/term/conf
+++ /dev/null
@@ -1,37 +0,0 @@
-name Neon (black)
-userid 93
-
-// text
-maintext #0f0
-grayedout #aaa
-standout #f00
-link #ff0
-statok #0c0
-statnok #c00
-footer #fff
-
-// titles
-maintitle #0f0
-boxtitle #0f0
-alttitle #0f0
-
-// bg colors
-bodybg #000
-tabbg #000
-secbg #000
-secborder #0f0
-border #fff
-boxbg #000
-
-// images (0 = no image)
-imglefttop 0
-imgrighttop 0
-
-// misc colors
-diffadd #cfc
-diffdel #fcc
-warnbg #000
-warnborder #c00
-noticebg #000
-noticeborder #0f0
-
diff --git a/static/s/tsukihime/bg.jpg b/static/s/tsukihime-bg.jpg
index f1d62635..f1d62635 100644
--- a/static/s/tsukihime/bg.jpg
+++ b/static/s/tsukihime-bg.jpg
Binary files differ
diff --git a/static/s/tsukihime/bgright.jpg b/static/s/tsukihime-right.jpg
index db31821a..db31821a 100644
--- a/static/s/tsukihime/bgright.jpg
+++ b/static/s/tsukihime-right.jpg
Binary files differ
diff --git a/static/s/tsukihime/conf b/static/s/tsukihime/conf
deleted file mode 100644
index c44a063a..00000000
--- a/static/s/tsukihime/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Tsukihime (midnight blue)
-userid 51
-
-// Tsukihime skin made using an image from the Tsukihime Plus+Disc
-// created: 02/01/2009 by echomateria
-
-// text
-maintext #ffffff // primary text color (also used for the menu links)
-grayedout #abcdff // color used for grayed-out/non-important things
-standout #ffffff // color of 'stand-out' text
-link #0be0e9 // primary link color (not used for the menu links)
-statok #55dfaa // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #e30b47 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #0cacf3 // text color of the footer
-
-// titles
-maintitle #a9bbfb // text color of the site title
-boxtitle #e3ecff // box titles
-alttitle #c6d7ff // alternative title
-
-// bg colors
-bodybg #29345f // main background color
-tabbg #5a3a63 // background color of inactive tabs
-secbg #9b8494 // secondary background color (used on input fields and table headers)
-secborder #605567 // secondary border color (used on input fields)
-border #b791f3 // primary border color
-boxbg #6a4668bb // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-imgrighttop bgright.jpg
-
-// misc colors
-diffadd #87705c // background color of changes in the diff viewer
-diffdel #374d77
-warnbg #76a1cd // background color of a warning box
-warnborder #decdcd // ...border
-noticebg #b50439 // notice box
-noticeborder #decdcd // ...and border
diff --git a/static/s/tsukihime_02/bg.jpg b/static/s/tsukihime_02-bg.jpg
index 5e5329f6..5e5329f6 100644
--- a/static/s/tsukihime_02/bg.jpg
+++ b/static/s/tsukihime_02-bg.jpg
Binary files differ
diff --git a/static/s/tsukihime_02/conf b/static/s/tsukihime_02/conf
deleted file mode 100644
index e9866c8d..00000000
--- a/static/s/tsukihime_02/conf
+++ /dev/null
@@ -1,39 +0,0 @@
-name Tsukihime (black)
-userid 51
-
-// Tsukihime skin made with an awesome Akiha artwork from Tsukihime PLUS disc
-// created: 23/01/2009 by echomateria
-
-// text
-maintext #fa4347 // primary text color (also used for the menu links)
-grayedout #54459a // color used for grayed-out/non-important things
-standout #fd3fa9 // color of 'stand-out' text
-link #b768aa // primary link color (not used for the menu links)
-statok #d79a7e //#fc3f46 // generic 'ok' text color (used for vnlist statuses & category browser)
-statnok #412651 //#2e1340 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
-footer #fa4347 // text color of the footer
-
-// titles
-maintitle #fa4347 // text color of the site title
-boxtitle #d79a7e // box titles
-alttitle #c17e61 //#a45548 // alternative title
-
-// bg colors
-bodybg #000000 // main background color
-tabbg #2e0106 // background color of inactive tabs
-secbg #2e0106 // secondary background color (used on input fields and table headers)
-secborder #b768aa // secondary border color (used on input fields)
-border #000000 // primary border color
-boxbg #35020990 // RGBA, background color of the boxes, stacked for menu box titles and odd row numers
-
-// images (0 = no image)
-imglefttop bg.jpg
-
-// misc colors
-diffadd #d79a7e // background color of changes in the diff viewer
-diffdel #412651
-warnbg #46285a // background color of a warning box
-warnborder #c0959f // ..border
-noticebg #4f3246 // notice box
-noticeborder #94769a // ...and border
-
diff --git a/util/jsgen.pl b/util/jsgen.pl
index 84a5c8f1..a4023ff8 100755
--- a/util/jsgen.pl
+++ b/util/jsgen.pl
@@ -59,4 +59,4 @@ sub save {
my $js = readjs;
$js =~ s{/\*VARS\*/}{vars()}eg;
-save "$ROOT/static/f/vndb.js", $js;
+save "$ROOT/static/g/vndb.js", $js;
diff --git a/util/skingen.pl b/util/skingen.pl
deleted file mode 100755
index 2114b7fc..00000000
--- a/util/skingen.pl
+++ /dev/null
@@ -1,99 +0,0 @@
-#!/usr/bin/perl
-
-use v5.12;
-use warnings;
-use Cwd 'abs_path';
-
-our($ROOT, %S);
-BEGIN { ($ROOT = abs_path $0) =~ s{/util/skingen\.pl$}{}; }
-
-use lib "$ROOT/lib";
-use VNDB::Skins;
-
-
-my $iconcss = do {
- open my $F, '<', "$ROOT/data/icons/icons.css" or die $!;
- local $/=undef;
- <$F>;
-};
-
-
-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 mtime($) { [stat("$ROOT/static$_[0]")]->[9] }
-
-
-sub writeskin { # $name
- my $name = shift;
- my %o = skins->{$name}->%*;
- $o{iconcss} = $iconcss;
-
- # get the right top image
- if($o{imgrighttop}) {
- my $path = "/s/$name/$o{imgrighttop}";
- my($h, $w) = imgsize "$ROOT/static$path";
- $o{_bgright} = sprintf 'background: url(%s?%s) no-repeat; width: %dpx; height: %dpx', $path, mtime $path, $w, $h;
- } else {
- $o{_bgright} = 'display: none';
- }
-
- # body background
- if($o{imglefttop}) {
- my $path = "/s/$name/$o{imglefttop}";
- $o{_bodybg} = sprintf 'background: %s url(%s?%s) no-repeat', $o{bodybg}, $path, mtime $path;
- } else {
- $o{_bodybg} = sprintf 'background-color: %s', $o{bodybg};
- }
-
- # boxbg blended with bodybg
- $o{_blendbg} = blend $o{boxbg}, $o{bodybg};
-
- # version
- $o{icons_version} = mtime '/f/icons.png';
-
- # write the CSS
- open my $CSS, '<', "$ROOT/data/style.css" or die $!;
- local $/=undef;
- my $css = <$CSS>;
- close $CSS;
-
- my $f = "$ROOT/static/s/$name/style.css";
- open my $SKIN, '>', "$f~" or die $!;
- print $SKIN $css =~ s{\$([a-z_]+)\$}{$o{$1} // die "Unknown variable $1"}egr;
- close $SKIN;
-
- rename "$f~", $f;
-}
-
-
-if(@ARGV) {
- writeskin($_) for (@ARGV);
-} else {
- writeskin($_) for (keys skins->%*);
-}
-
-
diff --git a/util/spritegen.pl b/util/spritegen.pl
index e88af5ce..c2644883 100755
--- a/util/spritegen.pl
+++ b/util/spritegen.pl
@@ -11,8 +11,8 @@ use lib "$ROOT/lib";
use VNDB::Config;
my $path = "$ROOT/data/icons";
-my $icons = "$ROOT/static/f/icons.png";
-my $ticons = "$ROOT/static/f/icons~.png";
+my $icons = "$ROOT/static/g/icons.png";
+my $ticons = "$ROOT/static/g/icons~.png";
my $css = "$ROOT/data/icons/icons.css";
my @img = map {