From 692ef20253a202d4eeb04d4a6491669dc6c30cb5 Mon Sep 17 00:00:00 2001 From: Yorhel Date: Sun, 17 Jan 2021 10:49:57 +0100 Subject: 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. --- .gitignore | 17 +- Dockerfile | 3 +- Makefile | 52 +- README.md | 1 + css/skins/air.sass | 40 ++ css/skins/angel.sass | 43 ++ css/skins/aselia_01.sass | 37 ++ css/skins/carnevale.sass | 37 ++ css/skins/eiel.sass | 36 ++ css/skins/ever17_01.sass | 37 ++ css/skins/fate_01.sass | 35 ++ css/skins/fate_02.sass | 35 ++ css/skins/grey.sass | 34 ++ css/skins/higanbana.sass | 40 ++ css/skins/higu.sass | 35 ++ css/skins/lb.sass | 32 + css/skins/lb_02.sass | 35 ++ css/skins/primitive.sass | 37 ++ css/skins/saya.sass | 37 ++ css/skins/seinarukana.sass | 35 ++ css/skins/taka.sass | 37 ++ css/skins/teal.sass | 33 ++ css/skins/term.sass | 32 + css/skins/tsukihime.sass | 37 ++ css/skins/tsukihime_02.sass | 35 ++ css/v2.css | 1267 ++++++++++++++++++++++++++++++++++++++++ data/style.css | 1261 --------------------------------------- lib/VNDB/Config.pm | 2 +- lib/VNDB/Skins.pm | 16 +- lib/VNDB/Util/LayoutHTML.pm | 2 +- lib/VNWeb/HTML.pm | 6 +- static/s/air-bg.jpg | Bin 0 -> 78066 bytes static/s/air-right.png | Bin 0 -> 27189 bytes static/s/air/bg.jpg | Bin 78066 -> 0 bytes static/s/air/bgright.png | Bin 27189 -> 0 bytes static/s/air/conf | 32 - static/s/angel-bg-xmas.jpg | Bin 0 -> 45511 bytes static/s/angel-bg.jpg | Bin 0 -> 36419 bytes static/s/angel-right.jpg | Bin 0 -> 4366 bytes static/s/angel/bg-xmas.jpg | Bin 45511 -> 0 bytes static/s/angel/bg.jpg | Bin 36419 -> 0 bytes static/s/angel/bgright.jpg | Bin 4366 -> 0 bytes static/s/angel/conf | 37 -- static/s/aselia_01-right.jpg | Bin 0 -> 107272 bytes static/s/aselia_01/bgright.jpg | Bin 107272 -> 0 bytes static/s/aselia_01/conf | 39 -- static/s/carnevale-right.jpg | Bin 0 -> 74285 bytes static/s/carnevale/bgright.jpg | Bin 74285 -> 0 bytes static/s/carnevale/conf | 40 -- static/s/eiel-bg.jpg | Bin 0 -> 111656 bytes static/s/eiel/bg.jpg | Bin 111656 -> 0 bytes static/s/eiel/conf | 40 -- static/s/ever17_01-right.jpg | Bin 0 -> 73060 bytes static/s/ever17_01/bgright.jpg | Bin 73060 -> 0 bytes static/s/ever17_01/conf | 39 -- static/s/fate_01-bg.jpg | Bin 0 -> 70918 bytes static/s/fate_01/bg.jpg | Bin 70918 -> 0 bytes static/s/fate_01/conf | 39 -- static/s/fate_02-bg.jpg | Bin 0 -> 71968 bytes static/s/fate_02/bg.jpg | Bin 71968 -> 0 bytes static/s/fate_02/conf | 39 -- static/s/grey-bg.jpg | Bin 0 -> 33434 bytes static/s/grey-right.jpg | Bin 0 -> 3062 bytes static/s/grey/bg.jpg | Bin 33434 -> 0 bytes static/s/grey/bgright.jpg | Bin 3062 -> 0 bytes static/s/grey/conf | 37 -- static/s/higanbana-bg.jpg | Bin 0 -> 71567 bytes static/s/higanbana-right.png | Bin 0 -> 41295 bytes static/s/higanbana/bg.jpg | Bin 71567 -> 0 bytes static/s/higanbana/bgright.png | Bin 41295 -> 0 bytes static/s/higanbana/conf | 32 - static/s/higu-bg.jpg | Bin 0 -> 72231 bytes static/s/higu/bg.jpg | Bin 72231 -> 0 bytes static/s/higu/conf | 39 -- static/s/lb-bg.jpg | Bin 0 -> 89041 bytes static/s/lb/bg.jpg | Bin 89041 -> 0 bytes static/s/lb/conf | 37 -- static/s/lb_02-bg.jpg | Bin 0 -> 111856 bytes static/s/lb_02/bg.jpg | Bin 111856 -> 0 bytes static/s/lb_02/conf | 38 -- static/s/primitive-right.jpg | Bin 0 -> 107494 bytes static/s/primitive/bgright.jpg | Bin 107494 -> 0 bytes static/s/primitive/conf | 40 -- static/s/saya-right.jpg | Bin 0 -> 73950 bytes static/s/saya/bgright.jpg | Bin 73950 -> 0 bytes static/s/saya/conf | 40 -- static/s/seinarukana-bg.jpg | Bin 0 -> 70934 bytes static/s/seinarukana/bg.jpg | Bin 70934 -> 0 bytes static/s/seinarukana/conf | 38 -- static/s/taka-right.jpg | Bin 0 -> 89059 bytes static/s/taka/bgright.jpg | Bin 89059 -> 0 bytes static/s/taka/conf | 40 -- static/s/teal/conf | 34 -- static/s/term/conf | 37 -- static/s/tsukihime-bg.jpg | Bin 0 -> 70806 bytes static/s/tsukihime-right.jpg | Bin 0 -> 71879 bytes static/s/tsukihime/bg.jpg | Bin 70806 -> 0 bytes static/s/tsukihime/bgright.jpg | Bin 71879 -> 0 bytes static/s/tsukihime/conf | 39 -- static/s/tsukihime_02-bg.jpg | Bin 0 -> 103162 bytes static/s/tsukihime_02/bg.jpg | Bin 103162 -> 0 bytes static/s/tsukihime_02/conf | 39 -- util/jsgen.pl | 2 +- util/skingen.pl | 99 ---- util/spritegen.pl | 4 +- 105 files changed, 2069 insertions(+), 2217 deletions(-) create mode 100644 css/skins/air.sass create mode 100644 css/skins/angel.sass create mode 100644 css/skins/aselia_01.sass create mode 100644 css/skins/carnevale.sass create mode 100644 css/skins/eiel.sass create mode 100644 css/skins/ever17_01.sass create mode 100644 css/skins/fate_01.sass create mode 100644 css/skins/fate_02.sass create mode 100644 css/skins/grey.sass create mode 100644 css/skins/higanbana.sass create mode 100644 css/skins/higu.sass create mode 100644 css/skins/lb.sass create mode 100644 css/skins/lb_02.sass create mode 100644 css/skins/primitive.sass create mode 100644 css/skins/saya.sass create mode 100644 css/skins/seinarukana.sass create mode 100644 css/skins/taka.sass create mode 100644 css/skins/teal.sass create mode 100644 css/skins/term.sass create mode 100644 css/skins/tsukihime.sass create mode 100644 css/skins/tsukihime_02.sass create mode 100644 css/v2.css delete mode 100644 data/style.css create mode 100644 static/s/air-bg.jpg create mode 100644 static/s/air-right.png delete mode 100644 static/s/air/bg.jpg delete mode 100644 static/s/air/bgright.png delete mode 100644 static/s/air/conf create mode 100644 static/s/angel-bg-xmas.jpg create mode 100644 static/s/angel-bg.jpg create mode 100644 static/s/angel-right.jpg delete mode 100644 static/s/angel/bg-xmas.jpg delete mode 100644 static/s/angel/bg.jpg delete mode 100644 static/s/angel/bgright.jpg delete mode 100644 static/s/angel/conf create mode 100644 static/s/aselia_01-right.jpg delete mode 100644 static/s/aselia_01/bgright.jpg delete mode 100644 static/s/aselia_01/conf create mode 100644 static/s/carnevale-right.jpg delete mode 100644 static/s/carnevale/bgright.jpg delete mode 100644 static/s/carnevale/conf create mode 100644 static/s/eiel-bg.jpg delete mode 100644 static/s/eiel/bg.jpg delete mode 100644 static/s/eiel/conf create mode 100644 static/s/ever17_01-right.jpg delete mode 100644 static/s/ever17_01/bgright.jpg delete mode 100644 static/s/ever17_01/conf create mode 100644 static/s/fate_01-bg.jpg delete mode 100644 static/s/fate_01/bg.jpg delete mode 100644 static/s/fate_01/conf create mode 100644 static/s/fate_02-bg.jpg delete mode 100644 static/s/fate_02/bg.jpg delete mode 100644 static/s/fate_02/conf create mode 100644 static/s/grey-bg.jpg create mode 100644 static/s/grey-right.jpg delete mode 100644 static/s/grey/bg.jpg delete mode 100644 static/s/grey/bgright.jpg delete mode 100644 static/s/grey/conf create mode 100644 static/s/higanbana-bg.jpg create mode 100644 static/s/higanbana-right.png delete mode 100644 static/s/higanbana/bg.jpg delete mode 100644 static/s/higanbana/bgright.png delete mode 100644 static/s/higanbana/conf create mode 100644 static/s/higu-bg.jpg delete mode 100644 static/s/higu/bg.jpg delete mode 100644 static/s/higu/conf create mode 100644 static/s/lb-bg.jpg delete mode 100644 static/s/lb/bg.jpg delete mode 100644 static/s/lb/conf create mode 100644 static/s/lb_02-bg.jpg delete mode 100644 static/s/lb_02/bg.jpg delete mode 100644 static/s/lb_02/conf create mode 100644 static/s/primitive-right.jpg delete mode 100644 static/s/primitive/bgright.jpg delete mode 100644 static/s/primitive/conf create mode 100644 static/s/saya-right.jpg delete mode 100644 static/s/saya/bgright.jpg delete mode 100644 static/s/saya/conf create mode 100644 static/s/seinarukana-bg.jpg delete mode 100644 static/s/seinarukana/bg.jpg delete mode 100644 static/s/seinarukana/conf create mode 100644 static/s/taka-right.jpg delete mode 100644 static/s/taka/bgright.jpg delete mode 100644 static/s/taka/conf delete mode 100644 static/s/teal/conf delete mode 100644 static/s/term/conf create mode 100644 static/s/tsukihime-bg.jpg create mode 100644 static/s/tsukihime-right.jpg delete mode 100644 static/s/tsukihime/bg.jpg delete mode 100644 static/s/tsukihime/bgright.jpg delete mode 100644 static/s/tsukihime/conf create mode 100644 static/s/tsukihime_02-bg.jpg delete mode 100644 static/s/tsukihime_02/bg.jpg delete mode 100644 static/s/tsukihime_02/conf delete mode 100755 util/skingen.pl 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 -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 // +// 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 // +// 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/css/v2.css b/css/v2.css new file mode 100644 index 00000000..b3bc51f7 --- /dev/null +++ b/css/v2.css @@ -0,0 +1,1267 @@ +$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 { @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 } + +a:hover, +.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; } + +#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; +} +#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 { + position: absolute !important; + left: 0; + height: 1px; width: 1px; + border: 0; padding: 0; + overflow: hidden; + clip: rect(1px 1px 1px 1px); +} + +/* 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 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 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 } + +/* dropdown search */ +#ds_box { + position: absolute; + top: 0; + border: 1px solid $border; + border-top: none; + background-color: $secbg; + cursor: pointer; + z-index: 2 +} +#ds_box b { padding: 2px 0 0 10px; } +#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 > 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.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 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 } +.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_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 } +.elm_dd_hover .elm_dd > div { display: none } +.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 ul a { text-align: right } +.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 } +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.neutral { font-weight: normal } +p.center { text-align: center; } +.standout { color: $standout!important } +b.future, +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 } + +#maincontent div.quote { + padding: 1px 5px; + margin: 0px 10px; + color: $grayedout; + border: none; + border-left: 1px dotted $border; + text-align: left; +} +pre { + padding:1px 5px; + margin: 5px 15px; + border: 1px dotted $border; + border-right: none; + border-left: 1px solid $border; + background: $boxbg; + overflow-x: auto; +} + + + + +/***** general form markup *****/ + +input.text, input.submit, select, textarea, button { + background-color: $secbg; + color: $maintext; + border: 1px solid $secborder; + font: 14px "Tahoma", "Arial", sans-serif; + padding: 0 1px 1px 1px; + margin: 1px; +} +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.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 } +fieldset.submit { width: 100%; text-align: center; margin: 5px; } +fieldset.submit input[type=submit] { width: 150px; } +fieldset.submit input[type=checkbox] { margin: 0 5px 0 15px; } +fieldset.submit h2 { font-size: 13px!important; } +td.label, td.label label { width: 130px; } +td.label label { display: block; } +td.field label { margin: 0 5px 0 5px; } +table.formtable { margin: 0 20px 20px 20px; } +table.formtable td { padding: 0; } +table.formtable tr.newfield > td { padding-top: 5px; } +table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; } +table.formtable td table td { padding: 1px 15px 1px 0px } +table.formtable td table { margin-bottom: 5px } + +table.formimage > tr > td:nth-child(1) { width: 300px; height: 300px; text-align: center } +table.formimage > tr > td:nth-child(1) img { max-width: 290px; max-height: 500px } +table.formimage h2 { margin: 0 } + +/* Format checkboxes and radio buttons as if they were normal links with unicode icons. + * Usage: + * + * + * + * + * (optional option separator) + * + */ +p.linkradio { padding: 2px } +.linkradio label { color: $link; cursor: pointer } +.linkradio label:before { content: '✗' } +.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 } + +/* Same styling, but for regular links. + * Usage: + * + * Unchecked option + * Checked option + */ +a.linkradio:before { content: '✗' } +a.linkradio.checked:before { content: '✓' } +a.checked { color: $maintext } + +/* Spinner, for a large one, 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 } +span.spinner { width: 1em; height: 1em } +@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } + +.textpreview > span { display: flex; justify-content: space-between; width: 100% } +.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 } +fieldset.submit .textpreview { margin: 0 auto } + +/* .compact input elements are smaller and can be embedded in tables/inline text + * .stealth input elements pretend to be just regular text, but turn into visibile input elements on mouse-over */ +.compact input.text, .compact select, .compact textarea { margin: -2px -1px; padding: 1px 0 } +.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 } + + +/***** menu *****/ + + +#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 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 #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; } +#menulist p { text-align: center; } +#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 .logout:hover { text-decoration: underline } + +#support { line-height: 0; height: 41px } +#support img { height: 19px; object-fit: none } +#support a { opacity: 0.7; border-bottom: none!important; display: inline-block } +#support a:hover { opacity: 1 } +#support a:hover img { position: absolute; left: 0; top: 0; height: 38px; z-index: 99 } + + + + +/***** main content *****/ + +#maincontent { + position: absolute; + top: 169px; + left: 200px; + right: 30px; + margin: 0; + padding-bottom: 50px!important; +} +.mainbox h1, .mainbox h2 { + font-family: "Futura", "Century New Gothic", "Arial", Serif; + font-weight: normal; + font-size: 14px; +} +div.mainbox, div.threelayout > div { + border: 1px solid $border; + margin: 21px 0 -10px 0; + padding: 5px; + 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 p { margin: 3px 20px; } +.mainbox div p, +.mainbox table p { margin: 0; } +.mainbox h2 { font-weight: bold; font-size: 16px; margin: 10px 0 0 5px; } +a.addnew, p.addnew { float: right; margin: 0 } +a.mainopts, p.mainopts { float: right; margin: 0 } +p.mainopts a, p.mainopts label { margin: 0 5px } + +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 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; } + + + + +/***** main tabs *****/ + +div.maintabs { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 } +#maincontent > div:nth-child(1).maintabs { margin-top: 0 } +div.maintabs.right { justify-content: flex-end } +div.maintabs.left { justify-content: flex-start } +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.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.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.tabselected a, +div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px } + +h1.boxtitle, h1.boxtitle a, div.maintabs h1 { + font-family: "Futura", "Century New Gothic", "Arial", Serif; + font-weight: bold; + font-style: italic; + color: $grayedout; + font-size: 17px; +} +h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 } + + + + +/***** Homepage ******/ + +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 } +.homepage h1 { margin-bottom: 5px } +.homepage > div { overflow: hidden } +.homepage li { display: flex; line-height: 1.1 } +.homepage li span { white-space: nowrap; padding-right: 4px; padding-bottom: 3px } +.homepage li span:first-child { overflow: hidden; text-overflow: ellipsis } + + + + +/***** Browsing ******/ + +.browseopts a, .browseopts button { + padding: 1px 3px; + color: $maintext; + border: 1px solid $border; + margin: 0 2px; + white-space: nowrap; +} +p.browseopts { text-align: center; padding: 2px; } +span.browseopts { text-align: center; padding: 10px; display: inline-block } +.browseopts .optselected, +.browseopts a:hover, +.browseopts button:hover { border: 0; padding: 2px 4px; } +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 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:hover, p#searchtabs a.sel { + border: 1px solid $secborder; + border-bottom: none; + padding: 1px 5px 2px 5px; + background: $boxbg; +} +#q { width: 600px } +#bq { width: 300px } + + + +/* history browser */ + +div.history td { white-space: nowrap; padding-left: 15px } +div.history td.tc1_1 { width: 70px; padding-right: 0; text-align: right } +div.history td.tc1_2 { width: 30px; padding-left: 0 } +div.history td.tc2 { width: 140px } +div.history td.tc4 { width: 100% } +div.history td.tc4 b { margin-left: 10px } + + + + +/***** Discussions ******/ + +/* 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 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 td:hover i.edit, +div.thread td:active i.edit { visibility: visible } + +/* threads browser */ +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.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.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; } +div.postsearch td.tc3 { width: 90px; } + + +/***** Release listings on VN & producer pages */ + +.releases { width: 100%; } +.releases tr.lang td, +.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.tc5 { width: 70px; text-align: right } +.releases td.tc6 { text-align: right; width: 25px; padding: 0; white-space: nowrap } + + +/***** VN page *******/ + +div.vndetails { margin: 0 auto; max-width: 820px; } +div.vnimg { float: left; width: 250px; margin: 0 10px; } +div.vnimg p { text-align: center; padding: 0px; margin: 0; } +div.vndetails h2 { margin: 5px 0 0 0; } +.vndesc p { padding: 0 0 0 5px; } +div.vndetails table { float: left; width: 500px; } +div.vndetails table td.key { width: 90px; } +div.vndetails table dt { float: left; font-style: italic; } +div.vndetails table dd { margin-left: 90px; } +div.vndetails td.relations dt { float: none; font-style: normal; } +div.vndetails td.relations dd { margin-left: 15px; } +div.vndetails td.anime b { font-size: 10px; font-weight: normal; padding-right: 4px; } +.ulistvn { padding: 5px 0 0 0 } +.ulistvn > b { font-size: 14px } +.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; } +#vntags span { white-space: nowrap; margin-left: 15px; } +#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.lst { margin: 0 30px 0 10px; } +#tagops input:checked + label { color: $maintext; } + +/* tag filter machinery; the order of declarations is important */ + +#tag_spoil_all:checked ~ #vntags .cut2 { display: none; } +#tag_spoil_some:checked ~ #vntags .cut1 { display: none; } +#tag_spoil_none:checked ~ #vntags .cut0 { display: none; } + +#tag_toggle_all:checked ~ #vntags .cut { display: inline } + +#cat_cont:not(:checked) ~ #vntags .cat_cont { display: none; } +#cat_tech:not(:checked) ~ #vntags .cat_tech { display: none; } +#cat_ero:not(:checked) ~ #vntags .cat_ero { display: none; } + +#tag_spoil_none:checked ~ #vntags .tagspl1 { display: none; } +#tag_spoil_none:checked ~ #vntags .tagspl2 { display: none; } +#tag_spoil_some:checked ~ #vntags .tagspl2 { display: none; } + +/* end of tag filter machinery */ + +#screenshots table { width: 100%; } +#screenshots tr.rel td { background: $boxbg; font-weight: bold; } + +#screenshots p.rel { + background: $boxbg; + margin: 0; + padding: 2px; + font-weight: bold; + text-align: center; +} +#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; } + +#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 } + +#screenshots .scrlnk { display: none } +#scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline } +#scrhide_s1:checked ~ #screenshots .scrlnk_s1 { display: inline } +#scrhide_s2:checked ~ #screenshots .scrlnk { display: inline } +#scrhide_v0:checked ~ #screenshots .scrlnk_v0 { display: none } +#scrhide_v1:checked ~ #screenshots .scrlnk_v1 { display: none } + +.summarize_more { + margin-top: 9px; margin-bottom: -10px; padding: 0; height: 15px; + 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):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 > 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 .myvote { font-weight: bold; text-decoration: underline } + + + +/***** VN tags tab (/v+/tags) *******/ + +.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 { list-style-type: none; padding-right: 30px } +.vntaglist li .tagscore { margin-right: 10px } + + + +/***** Vote stats ****/ + +.votestats { width: 630px; margin: 0 auto; } +.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; } +.votestats thead td { background: transparent; text-align: center; padding: 2px; } +.votestats tfoot td { text-align: right } +.votestats div { text-align: center; padding-top: 5px; } + +.recentvotes { width: 300px } +.recentvotes thead tr td b { font-weight: normal; padding-left: 5px } + + + +/***** Polls ****/ + +.votebooth thead td { font-weight: normal; background: transparent; padding-bottom: 5px; } +.votebooth tfoot td { padding-top: 5px } +.votebooth td { vertical-align: middle; padding: 0 8px; } +.votebooth { margin: 0 30px } +.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.tc3 { text-align: right; padding-right: 16px; } +.votebooth .submit { width: 100px } +.votebooth .option { margin-left: 8px } +.votebooth .option.own { font-weight: bold } + + + +/***** 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 > td:nth-child(1) { padding: 10px; width: 136px } +.vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px } + + +/***** 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.multi { vertical-align:middle; } +.releases_compare .key { background: $boxbg; } + +/****** VN browse ********/ + +.vnbrowse .tc_s { padding-left: 30px; width: 70px } +.vnbrowse .tc2 { text-align: right; padding: 0; } +.vnbrowse .tc3 { padding: 0; } +.vnbrowse .tc5 { text-align: right; padding-right: 10px } +.vnbrowse .tc6 { width: 80px } +.vnbrowse .tc7 { text-align: right; width: 8px; white-space: nowrap } +.vnbrowse .tc7 abbr { display: inline-block; width: 20px; } + + + +/***** Producer page *******/ + +.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 } + + +/***** Producer list ******/ + +.producerbrowse ul { -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; margin-bottom: 10px } +.producerbrowse ul li { list-style-type: none; } +.producerbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } + + + + +/***** Release page *****/ + +.release table { width: 400px; margin: 0 auto; } +.release .key { width: 90px; } + + + +/***** Review page *****/ + +.fullreview td { padding: 0 0 15px 10px } +.fullreview tr > td:first-child { width: 140px; text-align: right; font-weight: bold } +.fullreview tr > td:last-child { max-width: 700px } +.fullreview .myvote { font-weight: bold; text-decoration: underline } + +#reviewspoil:not(:checked) ~ .fullreview .reviewspoil { display: none } +#reviewspoil:checked ~ .fullreview .reviewnotspoil { display: none } + + +/***** Review browser *****/ + +.reviewlist td.tc1 { width: 90px } +.reviewlist td.tc2 { width: 110px; } +.reviewlist td.tc3 { width: 50px; text-align: right } +.reviewlist td.tc4 { width: 50px } +.reviewlist td.tc6 { width: 140px } +.reviewlist td.tc7 { width: 30px; text-align: right } +.reviewlist td.tc8 { width: 250px; text-align: right } + + +/***** Release browser *****/ + +.relbrowse .tc1 { width: 80px } +.relbrowse .tc2 { width: 60px; text-align: center; } +.relbrowse .tc3 { width: 85px; text-align: right; padding: 0; } + + + +/***** Image hover thingy (VNWeb::Images::Lib::images_) ****/ + +.imghover { margin: 0 auto; display: block; text-align: center } +.imghover input:checked ~ div.imghover--warning { display: none } +.imghover input:not(:checked) ~ div.imghover--visible { display: none } +.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 } + + + +/***** Char page (also used on VN page) *****/ + +p.chardetailopts { margin: -10px auto 7px auto; width: 800px; text-align: right } +p.chardetailopts a { margin: 0 5px } +p.chardetailopts a:last-child { margin: 0 0 0 5px } +div.chardetails { margin: 0 auto; width: 800px; } +div.charimg { float: left; width: 250px; margin: 0 10px; text-align: center } +div.charimg p { text-align: center; padding: 0px; margin: 0; } +.chardesc h2 { margin: 0; } +.chardesc p { padding: 0 0 0 5px; } +div.chardetails table { float: left; width: 530px; } +div.chardetails table td.key { width: 100px; } +div.chardetails.charsep { margin-top: 30px } + + + +/***** Char edit *****/ + + +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.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 } + + +/***** Char browse *****/ + +div.charb table { table-layout: fixed } +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 } + + +/***** Staff browse *****/ + +div.staffbrowse { padding-bottom: 10px } +.staffbrowse ul { float: left; margin-top: -5px; margin-left: 3%; width: 28%; } +.staffbrowse ul li { list-style-type: none; margin-bottom: 2px; } +.staffbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } +.staffpage table.stripe { width: 450px; margin: 0 auto; } +.staffpage .key { width: 70px; } +.staffroles td.tc2 { white-space: nowrap; width: 80px } +.staffroles td.tc3 { white-space: nowrap; width: 100px } +.staffroles td.tc4 { white-space: nowrap; padding-right: 10px } +table.aliases td { padding: 0 5px; } +table.aliases td.key { padding: 0 5px 0 0; width: auto } + + +/***** Staff display on VN pages *****/ + +.vnstaff { width: 97%; margin: -15px auto 5px auto; justify-content: space-between } +.vnstaff ul { list-style: none; margin: 0 } +.vnstaff-2 ul { width: 100% } .vnstaff-2 { flex-wrap: wrap } +.vnstaff-3 ul { width: 32% } +.vnstaff-4 ul { width: 24% } +.vnstaff li { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; padding-bottom: 1px } +.vnstaff li.vnstaff_head { font-weight: bold; margin-top: 15px } +.vnstaff li b.grayedout { margin-left: 10px } +@media(min-width: 0px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} } +@media(min-width: 850px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} .vnstaff-2 ul {width:49%} .vnstaff-2{flex-wrap:nowrap} } +@media(min-width:1000px) { .vnstaff-2{display:none} .vnstaff-3{display:flex} .vnstaff-4{display:none} } +@media(min-width:1250px) { .vnstaff-2{display:none} .vnstaff-3{display:none} .vnstaff-4{display:flex} } + +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 b.grayedout { margin-left: 10px } +div.charsum_list .charsum_bubble { + background: $boxbg; + display: inline-block; + text-align: left; + vertical-align: top; + width: 320px; + margin: 3px; + padding: 3px 10px; +} + + +/***** Staff edit *****/ + +.staffedit td.tc_name, +.staffedit td.tc_original { width: 200px } +.staffedit td.tc_name input, +.staffedit td.tc_original input { width: 200px } +.staffedit td.tc_add { width: 40px; text-align: left; white-space: nowrap } +.staffedit table.names td { padding: 1px 2px; vertical-align: middle; } +.staffedit table.names tr.alias_new td { padding-top: 8px } + + +/***** Documentation pages *****/ + +.docs { padding: 0 15% 20px 15%; line-height: 1.4 } +.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 dd { margin: 5px 0 5px 120px } +.docs dt { float: left } +.docs ul, .docs ol { margin: 5px 0 5px 20px } +.docs table { margin: 10px; width: 95% } +.docs td { white-space: nowrap } +.docs td { white-space: nowrap } +.docs td+td+td+td, +.docs td[colspan], +.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 li { list-style-type: none; } +.docs ul.index li a { margin: 0 0 0 10px; } +.docs img { margin: 5px } + + + +/* vote lists */ + +div.votelist td.tc1 { width: 100px; padding-top: 0; padding-bottom: 0 } +div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px } + + +/***** Wishlist browser ******/ + +.wishlist .tc1 { padding-top: 0; padding-bottom: 0; } +.wishlist tfoot td { padding: 0 0 0 25px } + + +/***** New User's VN list *****/ + +.labelfilters { text-align: center } +.labelfilters input.submit { margin-top: 5px } + +.managelabels > div { width: 600px; margin: 10px auto } +.managelabels table { margin: 0 auto } +.managelabels tbody td:nth-child(1) { text-align: right } +.managelabels tbody td:nth-child(4) { padding-left: 10px; width: 300px} +.managelabels select { width: 100% } +.managelabels tfoot div { float: right; text-align: right } + +.savedefault { width: 600px; margin: 10px auto } +.exportlist { width: 600px; margin: 10px auto } + +.ulist .tc1 { white-space: nowrap; width: 70px } +.ulist .tc1 label { cursor: pointer } +.ulist .tc1 input { display: none } +.ulist .tc1 label:before { content: '▸ ' } +.ulist .tc1 input:checked + label:before { content: '▾ ' } +.ulist .tc_title b { margin-left: 10px } +.ulist .tc_vote { white-space: nowrap; width: 60px; text-align: right; padding-right: 10px } +.ulist .tc_vote input { width: 55px; text-align: right } +.ulist .tc_voted, +.ulist .tc_added, +.ulist .tc_modified, +.ulist .tc_started, +.ulist .tc_finished, +.ulist .tc_rdate { white-space: nowrap; width: 100px } +.ulist .tc_rating { white-space: nowrap; width: 80px } + +.ulist .tc_started div, .ulist .tc_finished div { height: 1em; padding-bottom: 4px } +.ulist .tc_started div span, .ulist .tc_finished div span { position: absolute; z-index: 0 } +.ulist .tc_started div input, .ulist .tc_finished div input { position: absolute; z-index: 900; width: 110px; visibility: hidden } +.ulist .tc_started div:hover input, .ulist .tc_finished div:hover input, +.ulist .tc_started div input:focus, .ulist .tc_finished div input:focus { visibility: visible } + +.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 + 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 } +.ulist .tc_opt .tco3 { white-space: nowrap; width: 60px; text-align: right; padding-bottom: 0 } + + +/***** User VN list browser ******/ + +#expandall, .collapse_but { cursor: pointer } +.browse.rlist .tc1 { width: 16px; padding-bottom: 0 } +.browse.rlist .tc2 { width: 16px; padding-bottom: 0 } +.browse.rlist .tc3 { width: 60px } +.browse.rlist .tc3_5 b { margin-left: 10px } +.browse.rlist .tc4 { width: 60px; text-align: right; padding-top: 0; padding-bottom: 0 } +.browse.rlist .tc6 { width: 100px } +.browse.rlist .tc7 { width: 90px } +.browse.rlist .tc8 { width: 70px } +.browse.rlist tfoot select { width: 200px } +.browse.rlist .relhid .tc6 { padding-left: 15px; width: auto } + + +/***** User notifications *****/ + +.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 .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 > 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 p, #subscribe h4, #subscribe label { display: block; margin-bottom: 3px } + + +/***** User list *****/ +.browse.userlist .tc3, +.browse.userlist .tc4, +.browse.userlist .tc5, +.browse.userlist .tc6, +.browse.userlist .tc7, +.browse.userlist .tc8 { text-align: right; padding-right: 10px; padding-left: 0 } + + +/***** Userpage *****/ + +.userpage table { width: 600px; margin: 0 auto; } +.userpage .key { width: 100px; } + + +/***** User posts browser ****/ +div.uposts table { table-layout: fixed } +div.uposts td { white-space: nowrap } +div.uposts td.tc1 { width: 60px; padding-left: 0!important; padding-right: 0; text-align: right } +div.uposts td.tc2 { width: 40px; padding-left: 0 } +div.uposts td.tc3 { width: 80px; } +div.uposts td.tc4 { overflow: hidden } +div.uposts td.tc4 b { margin-left: 10px } + + + + +/***** Tag page *****/ + +.tagtree { margin-left: 20px; margin-top: -20px; list-style-type: none; } +.tagtree li { float: left; width: 230px; margin-top: 10px; } +.tagtree li li { float: none; width: auto; margin-top: 0; } +.tagtree ul { margin-left: 10px; list-style-type: none; } +.tagvnlist .tc1 { width: 105px; } +.tagvnlist .tc1 i { font-style: normal; font-size: 10px } +.tagvnlist .tc3 { text-align: right; padding: 0; } +.tagvnlist .tc4 { padding: 0; } +.tagvnlist .tc6 { text-align: right; padding-right: 10px; } + + +/***** Tag list (/g/list) *****/ + +.browse.taglist .tc1 { width: 120px; white-space: nowrap } +.browse.taglist .tc2 { width: 50px; white-space: nowrap } +.browse.taglist tbody .tc3 a { margin-right: 10px } + + +/***** Tag links *****/ + +.browse.taglinks .tc1 { width: 70px } +.browse.taglinks .tc3 { width: 80px } +.browse.taglinks .setfil { font-size: 10px; padding-right: 3px } + +.tagscore { white-space: nowrap; display: inline-block; width: 58px; } +.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.ignored > div { background: #222 } +.tagscore.ignored > span { color: $grayedout } + + +/***** VN tagmod *****/ + +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 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 .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.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 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 } + + + + +/****** Revision information ******/ + +div.revision div.rev, div.revision table { + border: 1px solid $border; + margin: 0 auto; + width: 90%; + 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 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; } +div.revision .next { float: right; margin-right: 5%; } +div.revision .prev { float: left; margin-left: 5%; } +div.revision .item { text-align: center; } + + + +/****** Image Viewer *****/ + +div#iv_view { + position: absolute; + top: 0px; + left: 0px; + background: $boxbg; + border: 1px solid $border; + padding: 5px; + text-align: center; +} +#iv_view a { border: 0; font-weight: bold; font-size: 14px } +#iv_view img { cursor: pointer } +#ivclose { float: right; padding-left: 10px } +#ivnext { padding-left: 5px; } +#ivprev { padding-right: 5px; } +#ivfull { float: left; padding-right: 10px; } +#ivimgload { + position: absolute; + display: block; + left: 0; + top: 0; + width: 100px; + padding: 3px; + background-color: #f5f5f5; /* no real need to skin this */ + text-align: center; + border: 1px solid #ccc; + color: #000; +} + +/* ivview childs: + * 1 div -> loading + * 2 div -> img + * 3 div -> links + * 1 a -> full + * 2 a -> prev + * 3 a -> next + * 4 a -> flagging + */ +.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 } +.ivview > div:nth-child(2) .left-pane { + position: absolute; + border: none; + height: 100%; + width: 25%; + top: 0; + transition: opacity 0.25s ease-in-out; + opacity: 0; + background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); +} +.ivview > div:nth-child(2) .left-pane:hover { + opacity: 1; +} +.ivview > div:nth-child(2) .right-pane { + position: absolute; + border: none; + height: 100%; + width: 25%; + top: 0; + right: 0; + transition: opacity 0.25s ease-in-out; + opacity: 0; + background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); +} +.ivview > div:nth-child(2) .right-pane:hover { + opacity: 1; +} +.ivview > div:nth-child(3) { width: 100%; display: flex } +.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap } +.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px } +.ivview > div:nth-child(3) > a:nth-child(3) { padding-left: 5px } +.ivview > div:nth-child(3) > a:nth-child(4) { text-align: right; font-size: 11px; font-weight: normal } + + +/****** filter selector *****/ + +.fil_div { + position: absolute; + top: 0px; + left: 0px; + 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.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 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 } +.fil_div table td.label b { display: block; font-weight: normal; padding: 10px 5px 0 0 } +.fil_div table td.check { width: 15px } +.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 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 div { border-top: none; border-bottom: none; cursor: default; position: relative; height: 10px; margin: 1px; } +.fil_div .slider span { margin-left: 5px } + +p.filselect { + text-align: center; + display: block; + margin: 10px auto 3px auto; + border: none; + outline: none; +} +p.filselect a { margin: 0 5px } +p.filselect i { font-style: normal } + + + + +/****** Advanced Search *******/ + +.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center } +.advsearch .advrow > tr > td { padding: 0 2px 0 0 } +.advsearch .advrow > tr > td:first-child { text-align: right; white-space: nowrap; } +.advsearch .advrow > tr > td:first-child > div { width: auto } +.advsearch .advnest > tr > td { padding: 0 2px 0 0 } +.advsearch .advnest > tr > td:first-child { text-align: right; white-space: nowrap; } +.advsearch .advnest > tr > td:first-child > div { width: auto } +.advsearch .advnest > tr > td:first-child > b { display: block; margin: 6px 3px 0 0 } + +/* 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).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 .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 > * { 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 .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 } +.advsearch .advheader .opselect > * { display: inline-block; font-size: 18px; padding: 0 5px } + +.advsearch .optbuttons { margin-top: 5px } +.advsearch .optbuttons > .elm_dd_button { margin-top: 5px; margin-right: 10px; width: 120px; display: inline-block; } + + + +/****** Image flagging *******/ + +/* divs: + * 1: header + * 2: image + * 3: metadata + * 4: vote box + * 6: other user's votes */ +.imageflag { margin: auto } +.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) 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.sel label, +.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 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 } + + +/****** Image browser (/img/browse) ******/ + +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 > 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 } + + +/****** Icons *******/ + +.icons { + background: url(/g/icons.png??#{$version}) no-repeat; + width: 16px; + height: 14px; + margin: 0 2px 0 0; + margin-top: 0px!important; + overflow: hidden; + display:-moz-inline-stack; + display: inline-block; + padding: 0; + border: 0; + text-decoration: none; +} +.icons.lang { width: 13px; height: 11px } +.icons.feed { width: 12px; height: 12px } +.icons.gen { width: 14px; height: 14px } +.icons.gen.b { width: 28px } +.icons.rtcomplete, .icons.rtpartial, .icons.rttrial { width: 11px; } +abbr.icons, abbr.uicons { cursor: default; } +a .icons { cursor: pointer } +.icons.oth { background: none; } +@import 'data/icons/icons'; + + +.release_icons { width: 16px; height: 16px; float: right; margin-left: 4px; } +.release_icon_voiced2, .release_icon_anim2 { filter: hue-rotate(30deg); } +.release_icon_voiced3, .release_icon_anim3 { filter: invert(100%) hue-rotate(240deg); } +.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 .edge text { font: 8px "Tahoma", "Arial", sans-serif } +#graph_current .border { stroke: $warnborder } +#graph_current .nodebg { stroke: $warnborder; fill: $warnbg } + diff --git a/data/style.css b/data/style.css deleted file mode 100644 index 8303a4ae..00000000 --- a/data/style.css +++ /dev/null @@ -1,1261 +0,0 @@ -* { margin: 0; padding: 0; } -body, td { font: 13px "Tahoma", "Arial", sans-serif; } -body { $_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 } - -a:hover, -.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$; } - -#bgright { position: absolute; top: 0px; right: 0px; $_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$; -} -#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 { - position: absolute !important; - left: 0; - height: 1px; width: 1px; - border: 0; padding: 0; - overflow: hidden; - clip: rect(1px 1px 1px 1px); -} - -/* 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 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 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$ } - -/* dropdown search */ -#ds_box { - position: absolute; - top: 0; - border: 1px solid $border$; - border-top: none; - background-color: $secbg$; - cursor: pointer; - z-index: 2 -} -#ds_box b { padding: 2px 0 0 10px; } -#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 > 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.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 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$ } -.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_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 } -.elm_dd_hover .elm_dd > div { display: none } -.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 ul a { text-align: right } -.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$ } -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.neutral { font-weight: normal } -p.center { text-align: center; } -.standout { color: $standout$!important } -b.future, -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 } - -#maincontent div.quote { - padding: 1px 5px; - margin: 0px 10px; - color: $grayedout$; - border: none; - border-left: 1px dotted $border$; - text-align: left; -} -pre { - padding:1px 5px; - margin: 5px 15px; - border: 1px dotted $border$; - border-right: none; - border-left: 1px solid $border$; - background: $boxbg$; - overflow-x: auto; -} - - - - -/***** general form markup *****/ - -input.text, input.submit, select, textarea, button { - background-color: $secbg$; - color: $maintext$; - border: 1px solid $secborder$; - font: 14px "Tahoma", "Arial", sans-serif; - padding: 0 1px 1px 1px; - margin: 1px; -} -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.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 } -fieldset.submit { width: 100%; text-align: center; margin: 5px; } -fieldset.submit input[type=submit] { width: 150px; } -fieldset.submit input[type=checkbox] { margin: 0 5px 0 15px; } -fieldset.submit h2 { font-size: 13px!important; } -td.label, td.label label { width: 130px; } -td.label label { display: block; } -td.field label { margin: 0 5px 0 5px; } -table.formtable { margin: 0 20px 20px 20px; } -table.formtable td { padding: 0; } -table.formtable tr.newfield > td { padding-top: 5px; } -table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; } -table.formtable td table td { padding: 1px 15px 1px 0px } -table.formtable td table { margin-bottom: 5px } - -table.formimage > tr > td:nth-child(1) { width: 300px; height: 300px; text-align: center } -table.formimage > tr > td:nth-child(1) img { max-width: 290px; max-height: 500px } -table.formimage h2 { margin: 0 } - -/* Format checkboxes and radio buttons as if they were normal links with unicode icons. - * Usage: - * - * - * - * - * (optional option separator) - * - */ -p.linkradio { padding: 2px } -.linkradio label { color: $link$; cursor: pointer } -.linkradio label:before { content: '✗' } -.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$ } - -/* Same styling, but for regular links. - * Usage: - * - * Unchecked option - * Checked option - */ -a.linkradio:before { content: '✗' } -a.linkradio.checked:before { content: '✓' } -a.checked { color: $maintext$ } - -/* Spinner, for a large one, 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 } -span.spinner { width: 1em; height: 1em } -@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } - -.textpreview > span { display: flex; justify-content: space-between; width: 100% } -.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 } -fieldset.submit .textpreview { margin: 0 auto } - -/* .compact input elements are smaller and can be embedded in tables/inline text - * .stealth input elements pretend to be just regular text, but turn into visibile input elements on mouse-over */ -.compact input.text, .compact select, .compact textarea { margin: -2px -1px; padding: 1px 0 } -.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$ } - - -/***** menu *****/ - - -#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 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 #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; } -#menulist p { text-align: center; } -#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 .logout:hover { text-decoration: underline } - -#support { line-height: 0; height: 41px } -#support img { height: 19px; object-fit: none } -#support a { opacity: 0.7; border-bottom: none!important; display: inline-block } -#support a:hover { opacity: 1 } -#support a:hover img { position: absolute; left: 0; top: 0; height: 38px; z-index: 99 } - - - - -/***** main content *****/ - -#maincontent { - position: absolute; - top: 169px; - left: 200px; - right: 30px; - margin: 0; - padding-bottom: 50px!important; -} -.mainbox h1, .mainbox h2 { - font-family: "Futura", "Century New Gothic", "Arial", Serif; - font-weight: normal; - font-size: 14px; -} -div.mainbox, div.threelayout > div { - border: 1px solid $border$; - margin: 21px 0 -10px 0; - padding: 5px; - 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 p { margin: 3px 20px; } -.mainbox div p, -.mainbox table p { margin: 0; } -.mainbox h2 { font-weight: bold; font-size: 16px; margin: 10px 0 0 5px; } -a.addnew, p.addnew { float: right; margin: 0 } -a.mainopts, p.mainopts { float: right; margin: 0 } -p.mainopts a, p.mainopts label { margin: 0 5px } - -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 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$; } - - - - -/***** main tabs *****/ - -div.maintabs { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 } -#maincontent > div:nth-child(1).maintabs { margin-top: 0 } -div.maintabs.right { justify-content: flex-end } -div.maintabs.left { justify-content: flex-start } -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.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.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.tabselected a, -div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px } - -h1.boxtitle, h1.boxtitle a, div.maintabs h1 { - font-family: "Futura", "Century New Gothic", "Arial", Serif; - font-weight: bold; - font-style: italic; - color: $grayedout$; - font-size: 17px; -} -h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 } - - - - -/***** Homepage ******/ - -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$ } -.homepage h1 { margin-bottom: 5px } -.homepage > div { overflow: hidden } -.homepage li { display: flex; line-height: 1.1 } -.homepage li span { white-space: nowrap; padding-right: 4px; padding-bottom: 3px } -.homepage li span:first-child { overflow: hidden; text-overflow: ellipsis } - - - - -/***** Browsing ******/ - -.browseopts a, .browseopts button { - padding: 1px 3px; - color: $maintext$; - border: 1px solid $border$; - margin: 0 2px; - white-space: nowrap; -} -p.browseopts { text-align: center; padding: 2px; } -span.browseopts { text-align: center; padding: 10px; display: inline-block } -.browseopts .optselected, -.browseopts a:hover, -.browseopts button:hover { border: 0; padding: 2px 4px; } -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 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:hover, p#searchtabs a.sel { - border: 1px solid $secborder$; - border-bottom: none; - padding: 1px 5px 2px 5px; - background: $boxbg$; -} -#q { width: 600px } -#bq { width: 300px } - - - -/* history browser */ - -div.history td { white-space: nowrap; padding-left: 15px } -div.history td.tc1_1 { width: 70px; padding-right: 0; text-align: right } -div.history td.tc1_2 { width: 30px; padding-left: 0 } -div.history td.tc2 { width: 140px } -div.history td.tc4 { width: 100% } -div.history td.tc4 b { margin-left: 10px } - - - - -/***** Discussions ******/ - -/* 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 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 td:hover i.edit, -div.thread td:active i.edit { visibility: visible } - -/* threads browser */ -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.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.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; } -div.postsearch td.tc3 { width: 90px; } - - -/***** Release listings on VN & producer pages */ - -.releases { width: 100%; } -.releases tr.lang td, -.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.tc5 { width: 70px; text-align: right } -.releases td.tc6 { text-align: right; width: 25px; padding: 0; white-space: nowrap } - - -/***** VN page *******/ - -div.vndetails { margin: 0 auto; max-width: 820px; } -div.vnimg { float: left; width: 250px; margin: 0 10px; } -div.vnimg p { text-align: center; padding: 0px; margin: 0; } -div.vndetails h2 { margin: 5px 0 0 0; } -.vndesc p { padding: 0 0 0 5px; } -div.vndetails table { float: left; width: 500px; } -div.vndetails table td.key { width: 90px; } -div.vndetails table dt { float: left; font-style: italic; } -div.vndetails table dd { margin-left: 90px; } -div.vndetails td.relations dt { float: none; font-style: normal; } -div.vndetails td.relations dd { margin-left: 15px; } -div.vndetails td.anime b { font-size: 10px; font-weight: normal; padding-right: 4px; } -.ulistvn { padding: 5px 0 0 0 } -.ulistvn > b { font-size: 14px } -.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; } -#vntags span { white-space: nowrap; margin-left: 15px; } -#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.lst { margin: 0 30px 0 10px; } -#tagops input:checked + label { color: $maintext$; } - -/* tag filter machinery; the order of declarations is important */ - -#tag_spoil_all:checked ~ #vntags .cut2 { display: none; } -#tag_spoil_some:checked ~ #vntags .cut1 { display: none; } -#tag_spoil_none:checked ~ #vntags .cut0 { display: none; } - -#tag_toggle_all:checked ~ #vntags .cut { display: inline } - -#cat_cont:not(:checked) ~ #vntags .cat_cont { display: none; } -#cat_tech:not(:checked) ~ #vntags .cat_tech { display: none; } -#cat_ero:not(:checked) ~ #vntags .cat_ero { display: none; } - -#tag_spoil_none:checked ~ #vntags .tagspl1 { display: none; } -#tag_spoil_none:checked ~ #vntags .tagspl2 { display: none; } -#tag_spoil_some:checked ~ #vntags .tagspl2 { display: none; } - -/* end of tag filter machinery */ - -#screenshots table { width: 100%; } -#screenshots tr.rel td { background: $boxbg$; font-weight: bold; } - -#screenshots p.rel { - background: $boxbg$; - margin: 0; - padding: 2px; - font-weight: bold; - text-align: center; -} -#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$; } - -#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$ } - -#screenshots .scrlnk { display: none } -#scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline } -#scrhide_s1:checked ~ #screenshots .scrlnk_s1 { display: inline } -#scrhide_s2:checked ~ #screenshots .scrlnk { display: inline } -#scrhide_v0:checked ~ #screenshots .scrlnk_v0 { display: none } -#scrhide_v1:checked ~ #screenshots .scrlnk_v1 { display: none } - -.summarize_more { - margin-top: 9px; margin-bottom: -10px; padding: 0; height: 15px; - 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):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 > 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 .myvote { font-weight: bold; text-decoration: underline } - - - -/***** VN tags tab (/v+/tags) *******/ - -.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 { list-style-type: none; padding-right: 30px } -.vntaglist li .tagscore { margin-right: 10px } - - - -/***** Vote stats ****/ - -.votestats { width: 630px; margin: 0 auto; } -.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; } -.votestats thead td { background: transparent; text-align: center; padding: 2px; } -.votestats tfoot td { text-align: right } -.votestats div { text-align: center; padding-top: 5px; } - -.recentvotes { width: 300px } -.recentvotes thead tr td b { font-weight: normal; padding-left: 5px } - - - -/***** Polls ****/ - -.votebooth thead td { font-weight: normal; background: transparent; padding-bottom: 5px; } -.votebooth tfoot td { padding-top: 5px } -.votebooth td { vertical-align: middle; padding: 0 8px; } -.votebooth { margin: 0 30px } -.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.tc3 { text-align: right; padding-right: 16px; } -.votebooth .submit { width: 100px } -.votebooth .option { margin-left: 8px } -.votebooth .option.own { font-weight: bold } - - - -/***** 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 > td:nth-child(1) { padding: 10px; width: 136px } -.vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px } - - -/***** 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.multi { vertical-align:middle; } -.releases_compare .key { background: $boxbg$; } - -/****** VN browse ********/ - -.vnbrowse .tc_s { padding-left: 30px; width: 70px } -.vnbrowse .tc2 { text-align: right; padding: 0; } -.vnbrowse .tc3 { padding: 0; } -.vnbrowse .tc5 { text-align: right; padding-right: 10px } -.vnbrowse .tc6 { width: 80px } -.vnbrowse .tc7 { text-align: right; width: 8px; white-space: nowrap } -.vnbrowse .tc7 abbr { display: inline-block; width: 20px; } - - - -/***** Producer page *******/ - -.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 } - - -/***** Producer list ******/ - -.producerbrowse ul { -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; margin-bottom: 10px } -.producerbrowse ul li { list-style-type: none; } -.producerbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } - - - - -/***** Release page *****/ - -.release table { width: 400px; margin: 0 auto; } -.release .key { width: 90px; } - - - -/***** Review page *****/ - -.fullreview td { padding: 0 0 15px 10px } -.fullreview tr > td:first-child { width: 140px; text-align: right; font-weight: bold } -.fullreview tr > td:last-child { max-width: 700px } -.fullreview .myvote { font-weight: bold; text-decoration: underline } - -#reviewspoil:not(:checked) ~ .fullreview .reviewspoil { display: none } -#reviewspoil:checked ~ .fullreview .reviewnotspoil { display: none } - - -/***** Review browser *****/ - -.reviewlist td.tc1 { width: 90px } -.reviewlist td.tc2 { width: 110px; } -.reviewlist td.tc3 { width: 50px; text-align: right } -.reviewlist td.tc4 { width: 50px } -.reviewlist td.tc6 { width: 140px } -.reviewlist td.tc7 { width: 30px; text-align: right } -.reviewlist td.tc8 { width: 250px; text-align: right } - - -/***** Release browser *****/ - -.relbrowse .tc1 { width: 80px } -.relbrowse .tc2 { width: 60px; text-align: center; } -.relbrowse .tc3 { width: 85px; text-align: right; padding: 0; } - - - -/***** Image hover thingy (VNWeb::Images::Lib::images_) ****/ - -.imghover { margin: 0 auto; display: block; text-align: center } -.imghover input:checked ~ div.imghover--warning { display: none } -.imghover input:not(:checked) ~ div.imghover--visible { display: none } -.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 } - - - -/***** Char page (also used on VN page) *****/ - -p.chardetailopts { margin: -10px auto 7px auto; width: 800px; text-align: right } -p.chardetailopts a { margin: 0 5px } -p.chardetailopts a:last-child { margin: 0 0 0 5px } -div.chardetails { margin: 0 auto; width: 800px; } -div.charimg { float: left; width: 250px; margin: 0 10px; text-align: center } -div.charimg p { text-align: center; padding: 0px; margin: 0; } -.chardesc h2 { margin: 0; } -.chardesc p { padding: 0 0 0 5px; } -div.chardetails table { float: left; width: 530px; } -div.chardetails table td.key { width: 100px; } -div.chardetails.charsep { margin-top: 30px } - - - -/***** Char edit *****/ - - -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.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 } - - -/***** Char browse *****/ - -div.charb table { table-layout: fixed } -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 } - - -/***** Staff browse *****/ - -div.staffbrowse { padding-bottom: 10px } -.staffbrowse ul { float: left; margin-top: -5px; margin-left: 3%; width: 28%; } -.staffbrowse ul li { list-style-type: none; margin-bottom: 2px; } -.staffbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } -.staffpage table.stripe { width: 450px; margin: 0 auto; } -.staffpage .key { width: 70px; } -.staffroles td.tc2 { white-space: nowrap; width: 80px } -.staffroles td.tc3 { white-space: nowrap; width: 100px } -.staffroles td.tc4 { white-space: nowrap; padding-right: 10px } -table.aliases td { padding: 0 5px; } -table.aliases td.key { padding: 0 5px 0 0; width: auto } - - -/***** Staff display on VN pages *****/ - -.vnstaff { width: 97%; margin: -15px auto 5px auto; justify-content: space-between } -.vnstaff ul { list-style: none; margin: 0 } -.vnstaff-2 ul { width: 100% } .vnstaff-2 { flex-wrap: wrap } -.vnstaff-3 ul { width: 32% } -.vnstaff-4 ul { width: 24% } -.vnstaff li { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; padding-bottom: 1px } -.vnstaff li.vnstaff_head { font-weight: bold; margin-top: 15px } -.vnstaff li b.grayedout { margin-left: 10px } -@media(min-width: 0px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} } -@media(min-width: 850px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} .vnstaff-2 ul {width:49%} .vnstaff-2{flex-wrap:nowrap} } -@media(min-width:1000px) { .vnstaff-2{display:none} .vnstaff-3{display:flex} .vnstaff-4{display:none} } -@media(min-width:1250px) { .vnstaff-2{display:none} .vnstaff-3{display:none} .vnstaff-4{display:flex} } - -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 b.grayedout { margin-left: 10px } -div.charsum_list .charsum_bubble { - background: $boxbg$; - display: inline-block; - text-align: left; - vertical-align: top; - width: 320px; - margin: 3px; - padding: 3px 10px; -} - - -/***** Staff edit *****/ - -.staffedit td.tc_name, -.staffedit td.tc_original { width: 200px } -.staffedit td.tc_name input, -.staffedit td.tc_original input { width: 200px } -.staffedit td.tc_add { width: 40px; text-align: left; white-space: nowrap } -.staffedit table.names td { padding: 1px 2px; vertical-align: middle; } -.staffedit table.names tr.alias_new td { padding-top: 8px } - - -/***** Documentation pages *****/ - -.docs { padding: 0 15% 20px 15%; line-height: 1.4 } -.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 dd { margin: 5px 0 5px 120px } -.docs dt { float: left } -.docs ul, .docs ol { margin: 5px 0 5px 20px } -.docs table { margin: 10px; width: 95% } -.docs td { white-space: nowrap } -.docs td { white-space: nowrap } -.docs td+td+td+td, -.docs td[colspan], -.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 li { list-style-type: none; } -.docs ul.index li a { margin: 0 0 0 10px; } -.docs img { margin: 5px } - - - -/* vote lists */ - -div.votelist td.tc1 { width: 100px; padding-top: 0; padding-bottom: 0 } -div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px } - - -/***** Wishlist browser ******/ - -.wishlist .tc1 { padding-top: 0; padding-bottom: 0; } -.wishlist tfoot td { padding: 0 0 0 25px } - - -/***** New User's VN list *****/ - -.labelfilters { text-align: center } -.labelfilters input.submit { margin-top: 5px } - -.managelabels > div { width: 600px; margin: 10px auto } -.managelabels table { margin: 0 auto } -.managelabels tbody td:nth-child(1) { text-align: right } -.managelabels tbody td:nth-child(4) { padding-left: 10px; width: 300px} -.managelabels select { width: 100% } -.managelabels tfoot div { float: right; text-align: right } - -.savedefault { width: 600px; margin: 10px auto } -.exportlist { width: 600px; margin: 10px auto } - -.ulist .tc1 { white-space: nowrap; width: 70px } -.ulist .tc1 label { cursor: pointer } -.ulist .tc1 input { display: none } -.ulist .tc1 label:before { content: '▸ ' } -.ulist .tc1 input:checked + label:before { content: '▾ ' } -.ulist .tc_title b { margin-left: 10px } -.ulist .tc_vote { white-space: nowrap; width: 60px; text-align: right; padding-right: 10px } -.ulist .tc_vote input { width: 55px; text-align: right } -.ulist .tc_voted, -.ulist .tc_added, -.ulist .tc_modified, -.ulist .tc_started, -.ulist .tc_finished, -.ulist .tc_rdate { white-space: nowrap; width: 100px } -.ulist .tc_rating { white-space: nowrap; width: 80px } - -.ulist .tc_started div, .ulist .tc_finished div { height: 1em; padding-bottom: 4px } -.ulist .tc_started div span, .ulist .tc_finished div span { position: absolute; z-index: 0 } -.ulist .tc_started div input, .ulist .tc_finished div input { position: absolute; z-index: 900; width: 110px; visibility: hidden } -.ulist .tc_started div:hover input, .ulist .tc_finished div:hover input, -.ulist .tc_started div input:focus, .ulist .tc_finished div input:focus { visibility: visible } - -.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 + 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 } -.ulist .tc_opt .tco3 { white-space: nowrap; width: 60px; text-align: right; padding-bottom: 0 } - - -/***** User VN list browser ******/ - -#expandall, .collapse_but { cursor: pointer } -.browse.rlist .tc1 { width: 16px; padding-bottom: 0 } -.browse.rlist .tc2 { width: 16px; padding-bottom: 0 } -.browse.rlist .tc3 { width: 60px } -.browse.rlist .tc3_5 b { margin-left: 10px } -.browse.rlist .tc4 { width: 60px; text-align: right; padding-top: 0; padding-bottom: 0 } -.browse.rlist .tc6 { width: 100px } -.browse.rlist .tc7 { width: 90px } -.browse.rlist .tc8 { width: 70px } -.browse.rlist tfoot select { width: 200px } -.browse.rlist .relhid .tc6 { padding-left: 15px; width: auto } - - -/***** User notifications *****/ - -.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 .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 > 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 p, #subscribe h4, #subscribe label { display: block; margin-bottom: 3px } - - -/***** User list *****/ -.browse.userlist .tc3, -.browse.userlist .tc4, -.browse.userlist .tc5, -.browse.userlist .tc6, -.browse.userlist .tc7, -.browse.userlist .tc8 { text-align: right; padding-right: 10px; padding-left: 0 } - - -/***** Userpage *****/ - -.userpage table { width: 600px; margin: 0 auto; } -.userpage .key { width: 100px; } - - -/***** User posts browser ****/ -div.uposts table { table-layout: fixed } -div.uposts td { white-space: nowrap } -div.uposts td.tc1 { width: 60px; padding-left: 0!important; padding-right: 0; text-align: right } -div.uposts td.tc2 { width: 40px; padding-left: 0 } -div.uposts td.tc3 { width: 80px; } -div.uposts td.tc4 { overflow: hidden } -div.uposts td.tc4 b { margin-left: 10px } - - - - -/***** Tag page *****/ - -.tagtree { margin-left: 20px; margin-top: -20px; list-style-type: none; } -.tagtree li { float: left; width: 230px; margin-top: 10px; } -.tagtree li li { float: none; width: auto; margin-top: 0; } -.tagtree ul { margin-left: 10px; list-style-type: none; } -.tagvnlist .tc1 { width: 105px; } -.tagvnlist .tc1 i { font-style: normal; font-size: 10px } -.tagvnlist .tc3 { text-align: right; padding: 0; } -.tagvnlist .tc4 { padding: 0; } -.tagvnlist .tc6 { text-align: right; padding-right: 10px; } - - -/***** Tag list (/g/list) *****/ - -.browse.taglist .tc1 { width: 120px; white-space: nowrap } -.browse.taglist .tc2 { width: 50px; white-space: nowrap } -.browse.taglist tbody .tc3 a { margin-right: 10px } - - -/***** Tag links *****/ - -.browse.taglinks .tc1 { width: 70px } -.browse.taglinks .tc3 { width: 80px } -.browse.taglinks .setfil { font-size: 10px; padding-right: 3px } - -.tagscore { white-space: nowrap; display: inline-block; width: 58px; } -.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.ignored > div { background: #222 } -.tagscore.ignored > span { color: $grayedout$ } - - -/***** VN tagmod *****/ - -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 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 .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.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 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 } - - - - -/****** Revision information ******/ - -div.revision div.rev, div.revision table { - border: 1px solid $border$; - margin: 0 auto; - width: 90%; - 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 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$; } -div.revision .next { float: right; margin-right: 5%; } -div.revision .prev { float: left; margin-left: 5%; } -div.revision .item { text-align: center; } - - - -/****** Image Viewer *****/ - -div#iv_view { - position: absolute; - top: 0px; - left: 0px; - background: $boxbg$; - border: 1px solid $border$; - padding: 5px; - text-align: center; -} -#iv_view a { border: 0; font-weight: bold; font-size: 14px } -#iv_view img { cursor: pointer } -#ivclose { float: right; padding-left: 10px } -#ivnext { padding-left: 5px; } -#ivprev { padding-right: 5px; } -#ivfull { float: left; padding-right: 10px; } -#ivimgload { - position: absolute; - display: block; - left: 0; - top: 0; - width: 100px; - padding: 3px; - background-color: #f5f5f5; /* no real need to skin this */ - text-align: center; - border: 1px solid #ccc; - color: #000; -} - -/* ivview childs: - * 1 div -> loading - * 2 div -> img - * 3 div -> links - * 1 a -> full - * 2 a -> prev - * 3 a -> next - * 4 a -> flagging - */ -.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 } -.ivview > div:nth-child(2) .left-pane { - position: absolute; - border: none; - height: 100%; - width: 25%; - top: 0; - transition: opacity 0.25s ease-in-out; - opacity: 0; - background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); -} -.ivview > div:nth-child(2) .left-pane:hover { - opacity: 1; -} -.ivview > div:nth-child(2) .right-pane { - position: absolute; - border: none; - height: 100%; - width: 25%; - top: 0; - right: 0; - transition: opacity 0.25s ease-in-out; - opacity: 0; - background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); -} -.ivview > div:nth-child(2) .right-pane:hover { - opacity: 1; -} -.ivview > div:nth-child(3) { width: 100%; display: flex } -.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap } -.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px } -.ivview > div:nth-child(3) > a:nth-child(3) { padding-left: 5px } -.ivview > div:nth-child(3) > a:nth-child(4) { text-align: right; font-size: 11px; font-weight: normal } - - -/****** filter selector *****/ - -.fil_div { - position: absolute; - top: 0px; - left: 0px; - 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.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 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 } -.fil_div table td.label b { display: block; font-weight: normal; padding: 10px 5px 0 0 } -.fil_div table td.check { width: 15px } -.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 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 div { border-top: none; border-bottom: none; cursor: default; position: relative; height: 10px; margin: 1px; } -.fil_div .slider span { margin-left: 5px } - -p.filselect { - text-align: center; - display: block; - margin: 10px auto 3px auto; - border: none; - outline: none; -} -p.filselect a { margin: 0 5px } -p.filselect i { font-style: normal } - - - - -/****** Advanced Search *******/ - -.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center } -.advsearch .advrow > tr > td { padding: 0 2px 0 0 } -.advsearch .advrow > tr > td:first-child { text-align: right; white-space: nowrap; } -.advsearch .advrow > tr > td:first-child > div { width: auto } -.advsearch .advnest > tr > td { padding: 0 2px 0 0 } -.advsearch .advnest > tr > td:first-child { text-align: right; white-space: nowrap; } -.advsearch .advnest > tr > td:first-child > div { width: auto } -.advsearch .advnest > tr > td:first-child > b { display: block; margin: 6px 3px 0 0 } - -/* 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).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 .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 > * { 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 .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 } -.advsearch .advheader .opselect > * { display: inline-block; font-size: 18px; padding: 0 5px } - -.advsearch .optbuttons { margin-top: 5px } -.advsearch .optbuttons > .elm_dd_button { margin-top: 5px; margin-right: 10px; width: 120px; display: inline-block; } - - - -/****** Image flagging *******/ - -/* divs: - * 1: header - * 2: image - * 3: metadata - * 4: vote box - * 6: other user's votes */ -.imageflag { margin: auto } -.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) 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.sel label, -.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 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 } - - -/****** Image browser (/img/browse) ******/ - -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 > 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$ } - - -/****** Icons *******/ - -.icons { - background: url(/f/icons.png?$icons_version$) no-repeat; - width: 16px; - height: 14px; - margin: 0 2px 0 0; - margin-top: 0px!important; - overflow: hidden; - display:-moz-inline-stack; - display: inline-block; - padding: 0; - border: 0; - text-decoration: none; -} -.icons.lang { width: 13px; height: 11px } -.icons.feed { width: 12px; height: 12px } -.icons.gen { width: 14px; height: 14px } -.icons.gen.b { width: 28px } -.icons.rtcomplete, .icons.rtpartial, .icons.rttrial { width: 11px; } -abbr.icons, abbr.uicons { cursor: default; } -a .icons { cursor: pointer } -.icons.oth { background: none; } -$iconcss$ - - -.release_icons { width: 16px; height: 16px; float: right; margin-left: 4px; } -.release_icon_voiced2, .release_icon_anim2 { filter: hue-rotate(30deg); } -.release_icon_voiced3, .release_icon_anim3 { filter: invert(100%) hue-rotate(240deg); } -.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 .edge text { font: 8px "Tahoma", "Arial", sans-serif } -#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