0.4.17 releases, for #246

Pull/221

.gitignore

@@ -7,3 +7,4 @@ dist/
 .DS_Store
 output/
 venv/
+.vscode/

MANIFEST.in

@@ -1,4 +1,5 @@
 include README.md
 include requirements.txt
 include nhentai/viewer/*
-include nhentai/viewer/default/*
+include nhentai/viewer/default/*
+include nhentai/viewer/minimal/*

README.rst

@@ -50,7 +50,14 @@ Installation (Gentoo)
 
     layman -fa glicOne
     sudo emerge net-misc/nhentai
+    
+=====================
+Installation (NixOs)
+=====================
+.. code-block::
 
+    nix-env -iA nixos.nhentai
+    
 =====
 Usage
 =====
@@ -65,7 +72,10 @@ Set your nhentai cookie against captcha:
 
     nhentai --cookie "YOUR COOKIE FROM nhentai.net"
 
-**NOTE**: The format of the cookie is `"csrftoken=TOKEN; sessionid=ID"`
+**NOTE**
+
+- The format of the cookie is `"csrftoken=TOKEN; sessionid=ID; cf_clearance=CLOUDFLARE"`
+- `cf_clearance` cookie and useragent must be set if you encounter "blocked by cloudflare captcha" error. Make sure you use the same IP and useragent as when you got it
 
 | To get csrftoken and sessionid, first login to your nhentai account in web browser, then:
 | (Chrome) |ve| |ld| More tools    |ld| Developer tools     |ld| Application |ld| Storage |ld| Cookies |ld| https://nhentai.net
@@ -121,6 +131,7 @@ Supported doujinshi folder formatter:
 - %t: Doujinshi name
 - %s: Doujinshi subtitle (translated name)
 - %a: Doujinshi authors' name
+- %p: Doujinshi pretty name
 
 
 Other options:

nhentai/__init__.py

@@ -1,3 +1,3 @@
-__version__ = '0.4.15'
+__version__ = '0.4.17'
 __author__ = 'RicterZ'
 __email__ = 'ricterzheng@gmail.com'

nhentai/cmdline.py

@@ -86,9 +86,10 @@ def cmd_parser():
                       help='slow down between downloading every doujinshi')
     parser.add_option('--proxy', type='string', dest='proxy', action='store',
                       help='store a proxy, for example: -p \'http://127.0.0.1:1080\'')
-    parser.add_option('--file',  '-f', type='string', dest='file', action='store', help='read gallery IDs from file.')
+    parser.add_option('--file', '-f', type='string', dest='file', action='store', help='read gallery IDs from file.')
     parser.add_option('--format', type='string', dest='name_format', action='store',
                       help='format the saved folder name', default='[%i][%a][%t]')
+    parser.add_option('--dry-run', '-r', action='store_true', dest='dryrun', help='Dry run, skip file download.')
 
     # generate options
     parser.add_option('--html', dest='html_viewer', action='store_true',
@@ -103,10 +104,14 @@ def cmd_parser():
                       help='generate PDF file')
     parser.add_option('--rm-origin-dir', dest='rm_origin_dir', action='store_true', default=False,
                       help='remove downloaded doujinshi dir when generated CBZ or PDF file.')
+    parser.add_option('--meta', dest='generate_metadata', action='store_true',
+                      help='generate a metadata file in doujinshi format')
 
     # nhentai options
     parser.add_option('--cookie', type='str', dest='cookie', action='store',
-                      help='set cookie of nhentai to bypass Google recaptcha')
+                      help='set cookie of nhentai to bypass Cloudflare captcha')
+    parser.add_option('--useragent', type='str', dest='useragent', action='store',
+                      help='set useragent to bypass Cloudflare captcha')
     parser.add_option('--language', type='str', dest='language', action='store',
                       help='set default language to parse doujinshis')
     parser.add_option('--clean-language', dest='clean_language', action='store_true', default=False,
@@ -128,7 +133,7 @@ def cmd_parser():
     args, _ = parser.parse_args(sys.argv[1:])
 
     if args.html_viewer:
-        generate_html()
+        generate_html(template=constant.CONFIG['template'])
         exit(0)
 
     if args.main_viewer and not args.id and not args.keyword and not args.favorites:
@@ -145,20 +150,24 @@ def cmd_parser():
     # --- set config ---
     if args.cookie is not None:
         constant.CONFIG['cookie'] = args.cookie
+        write_config()
         logger.info('Cookie saved.')
-        write_config()
         exit(0)
-
-    if args.language is not None:
-        constant.CONFIG['language'] = args.language
-        logger.info('Default language now set to \'{0}\''.format(args.language))
+    elif args.useragent is not None:
+        constant.CONFIG['useragent'] = args.useragent
         write_config()
+        logger.info('Useragent saved.')
+        exit(0)
+    elif args.language is not None:
+        constant.CONFIG['language'] = args.language
+        write_config()
+        logger.info('Default language now set to \'{0}\''.format(args.language))
         exit(0)
         # TODO: search without language
 
     if args.proxy is not None:
         proxy_url = urlparse(args.proxy)
-        if not args.proxy == '' and proxy_url.scheme not in ('http', 'https'):
+        if not args.proxy == '' and proxy_url.scheme not in ('http', 'https', 'socks5', 'socks5h', 'socks4', 'socks4a'):
             logger.error('Invalid protocol \'{0}\' of proxy, ignored'.format(proxy_url.scheme))
             exit(0)
         else:
@@ -203,7 +212,7 @@ def cmd_parser():
         parser.print_help()
         exit(1)
 
-    if not args.keyword and not args.id and not  args.favorites:
+    if not args.keyword and not args.id and not args.favorites:
         parser.print_help()
         exit(1)
 
@@ -214,4 +223,8 @@ def cmd_parser():
         logger.critical('Maximum number of used threads is 15')
         exit(1)
 
+    if args.dryrun and (args.is_cbz or args.is_pdf):
+        logger.critical('Cannot generate PDF or CBZ during dry-run')
+        exit(1)
+
     return args

nhentai/command.py

@@ -13,7 +13,7 @@ from nhentai.doujinshi import Doujinshi
 from nhentai.downloader import Downloader
 from nhentai.logger import logger
 from nhentai.constant import BASE_URL
-from nhentai.utils import generate_html, generate_cbz, generate_main_html, generate_pdf, \
+from nhentai.utils import generate_html, generate_cbz, generate_main_html, generate_pdf, generate_metadata_file, \
     paging, check_cookie, signal_handler, DB
 
 
@@ -89,9 +89,14 @@ def main():
                                 timeout=options.timeout, delay=options.delay)
 
         for doujinshi in doujinshi_list:
+            if not options.dryrun:
+                doujinshi.downloader = downloader
+                doujinshi.download()
+
+            if options.generate_metadata:
+                table = doujinshi.table
+                generate_metadata_file(options.output_dir, table, doujinshi)
 
-            doujinshi.downloader = downloader
-            doujinshi.download()
             if options.is_save_download_history:
                 with DB() as db:
                     db.add_one(doujinshi.id)
@@ -117,6 +122,5 @@ def main():
 
 signal.signal(signal.SIGINT, signal_handler)
 
-
 if __name__ == '__main__':
     main()

nhentai/constant.py

@@ -34,6 +34,7 @@ CONFIG = {
     'cookie': '',
     'language': '',
     'template': '',
+    'useragent': 'nhentai command line client (https://github.com/RicterZ/nhentai)'
 }
 
 LANGUAGEISO ={

nhentai/doujinshi.py

@@ -6,7 +6,6 @@ from nhentai.constant import DETAIL_URL, IMAGE_URL
 from nhentai.logger import logger
 from nhentai.utils import format_filename
 
-
 EXT_MAP = {
     'j': 'jpg',
     'p': 'png',
@@ -26,8 +25,10 @@ class DoujinshiInfo(dict):
 
 
 class Doujinshi(object):
-    def __init__(self, name=None, id=None, img_id=None, ext='', pages=0, name_format='[%i][%a][%t]', **kwargs):
+    def __init__(self, name=None, pretty_name=None, id=None, img_id=None,
+                 ext='', pages=0, name_format='[%i][%a][%t]', **kwargs):
         self.name = name
+        self.pretty_name = pretty_name
         self.id = id
         self.img_id = img_id
         self.ext = ext
@@ -39,14 +40,11 @@ class Doujinshi(object):
         name_format = name_format.replace('%i', str(self.id))
         name_format = name_format.replace('%a', self.info.artists)
         name_format = name_format.replace('%t', self.name)
+        name_format = name_format.replace('%p', self.pretty_name)
         name_format = name_format.replace('%s', self.info.subtitle)
         self.filename = format_filename(name_format)
 
-    def __repr__(self):
-        return '<Doujinshi: {0}>'.format(self.name)
-
-    def show(self):
-        table = [
+        self.table = [
             ["Parodies", self.info.parodies],
             ["Doujinshi", self.name],
             ["Subtitle", self.info.subtitle],
@@ -57,26 +55,25 @@ class Doujinshi(object):
             ["URL", self.url],
             ["Pages", self.pages],
         ]
-        logger.info(u'Print doujinshi information of {0}\n{1}'.format(self.id, tabulate(table)))
+
+    def __repr__(self):
+        return '<Doujinshi: {0}>'.format(self.name)
+
+    def show(self):
+
+        logger.info(u'Print doujinshi information of {0}\n{1}'.format(self.id, tabulate(self.table)))
 
     def download(self):
         logger.info('Starting to download doujinshi: %s' % self.name)
         if self.downloader:
             download_queue = []
-
             if len(self.ext) != self.pages:
                 logger.warning('Page count and ext count do not equal')
 
             for i in range(1, min(self.pages, len(self.ext)) + 1):
-                download_queue.append('%s/%d/%d.%s' % (IMAGE_URL, int(self.img_id), i, self.ext[i-1]))
+                download_queue.append('%s/%d/%d.%s' % (IMAGE_URL, int(self.img_id), i, self.ext[i - 1]))
 
             self.downloader.download(download_queue, self.filename)
-
-            '''
-            for i in range(len(self.ext)):
-                download_queue.append('%s/%d/%d.%s' % (IMAGE_URL, int(self.img_id), i+1, EXT_MAP[self.ext[i]]))
-            '''
-
         else:
             logger.critical('Downloader has not been loaded')
 

nhentai/parser.py

@@ -133,13 +133,16 @@ def doujinshi_parser(id_):
     doujinshi_info = html.find('div', attrs={'id': 'info'})
 
     title = doujinshi_info.find('h1').text
+    pretty_name = doujinshi_info.find('h1').find('span', attrs={'class': 'pretty'}).text
     subtitle = doujinshi_info.find('h2')
 
     doujinshi['name'] = title
+    doujinshi['pretty_name'] = pretty_name
     doujinshi['subtitle'] = subtitle.text if subtitle else ''
 
     doujinshi_cover = html.find('div', attrs={'id': 'cover'})
-    img_id = re.search('/galleries/([\d]+)/cover\.(jpg|png|gif)$', doujinshi_cover.a.img.attrs['data-src'])
+    img_id = re.search('/galleries/([0-9]+)/cover.(jpg|png|gif)$',
+                       doujinshi_cover.a.img.attrs['data-src'])
 
     ext = []
     for i in html.find_all('div', attrs={'class': 'thumb-container'}):

nhentai/serializer.py

@@ -4,6 +4,7 @@ import os
 from xml.sax.saxutils import escape
 from nhentai.constant import LANGUAGEISO
 
+
 def serialize_json(doujinshi, dir):
     metadata = {'title': doujinshi.name,
                 'subtitle': doujinshi.info.subtitle}
@@ -26,12 +27,12 @@ def serialize_json(doujinshi, dir):
     metadata['Pages'] = doujinshi.pages
 
     with open(os.path.join(dir, 'metadata.json'), 'w') as f:
-        json.dump(metadata, f, separators=','':')
+        json.dump(metadata, f, separators=(',', ':'))
 
 
-def serialize_comicxml(doujinshi, dir):
+def serialize_comic_xml(doujinshi, dir):
     from iso8601 import parse_date
-    with open(os.path.join(dir, 'ComicInfo.xml'), 'w') as f:
+    with open(os.path.join(dir, 'ComicInfo.xml'), 'w', encoding="utf-8") as f:
         f.write('<?xml version="1.0" encoding="utf-8"?>\n')
         f.write('<ComicInfo xmlns:xsd="http://www.w3.org/2001/XMLSchema" '
                 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\n')
@@ -45,7 +46,8 @@ def serialize_comicxml(doujinshi, dir):
         xml_write_simple_tag(f, 'NhentaiId', doujinshi.id)
         xml_write_simple_tag(f, 'Genre', doujinshi.info.categories)
 
-        xml_write_simple_tag(f, 'BlackAndWhite', 'No' if doujinshi.info.tags and 'full color' in doujinshi.info.tags else 'Yes')
+        xml_write_simple_tag(f, 'BlackAndWhite', 'No' if doujinshi.info.tags and
+                             'full color' in doujinshi.info.tags else 'Yes')
 
         if doujinshi.info.date:
             dt = parse_date(doujinshi.info.date)
@@ -59,13 +61,13 @@ def serialize_comicxml(doujinshi, dir):
         if doujinshi.info.tags:
             xml_write_simple_tag(f, 'Tags', doujinshi.info.tags)
         if doujinshi.info.artists:
-            xml_write_simple_tag(f, 'Writer', ' & '.join([i.strip() for i in doujinshi.info.artists.split(',')]))
-        # if doujinshi.info.groups:
-        #     metadata['group'] = [i.strip() for i in doujinshi.info.groups.split(',')]
+            xml_write_simple_tag(f, 'Writer', ' & '.join([i.strip() for i in
+                                                          doujinshi.info.artists.split(',')]))
+
         if doujinshi.info.languages:
             languages = [i.strip() for i in doujinshi.info.languages.split(',')]
             xml_write_simple_tag(f, 'Translated', 'Yes' if 'translated' in languages else 'No')
-            [xml_write_simple_tag(f, 'LanguageISO', LANGUAGEISO[i]) for i in languages \
+            [xml_write_simple_tag(f, 'LanguageISO', LANGUAGEISO[i]) for i in languages
                 if (i != 'translated' and i in LANGUAGEISO)]
 
         f.write('</ComicInfo>')
@@ -121,7 +123,7 @@ def serialize_unique(lst):
 def set_js_database():
     with open('data.js', 'w') as f:
         indexed_json = merge_json()
-        unique_json = json.dumps(serialize_unique(indexed_json), separators=','':')
-        indexed_json = json.dumps(indexed_json, separators=','':')
+        unique_json = json.dumps(serialize_unique(indexed_json), separators=(',', ':'))
+        indexed_json = json.dumps(indexed_json, separators=(',', ':'))
         f.write('var data = ' + indexed_json)
         f.write(';\nvar tags = ' + unique_json)

nhentai/utils.py

@@ -10,14 +10,14 @@ import sqlite3
 
 from nhentai import constant
 from nhentai.logger import logger
-from nhentai.serializer import serialize_json, serialize_comicxml, set_js_database
+from nhentai.serializer import serialize_json, serialize_comic_xml, set_js_database
 
 
 def request(method, url, **kwargs):
     session = requests.Session()
     session.headers.update({
         'Referer': constant.LOGIN_URL,
-        'User-Agent': 'nhentai command line client (https://github.com/RicterZ/nhentai)',
+        'User-Agent': constant.CONFIG['useragent'],
         'Cookie': constant.CONFIG['cookie']
     })
 
@@ -28,10 +28,14 @@ def request(method, url, **kwargs):
 
 
 def check_cookie():
-    response = request('get', constant.BASE_URL).text
-    username = re.findall('"/users/\d+/(.*?)"', response)
+    response = request('get', constant.BASE_URL)
+    if response.status_code == 503 and 'cf-browser-verification' in response.text:
+        logger.error('Blocked by Cloudflare captcha, please set your cookie and useragent')
+        exit(-1)
+
+    username = re.findall('"/users/\d+/(.*?)"', response.text)
     if not username:
-        logger.error('Cannot get your username, please check your cookie or use `nhentai --cookie` to set your cookie')
+        logger.warning('Cannot get your username, please check your cookie or use `nhentai --cookie` to set your cookie')
     else:
         logger.info('Login successfully! Your username: {}'.format(username[0]))
 
@@ -74,6 +78,13 @@ def generate_html(output_dir='.', doujinshi_obj=None, template='default'):
     else:
         doujinshi_dir = '.'
 
+    if not os.path.exists(doujinshi_dir):
+        logger.warning('Path \'{0}\' does not exist, creating.'.format(doujinshi_dir))
+        try:
+            os.makedirs(doujinshi_dir)
+        except EnvironmentError as e:
+            logger.critical('{0}'.format(str(e)))
+
     file_list = os.listdir(doujinshi_dir)
     file_list.sort()
 
@@ -81,7 +92,7 @@ def generate_html(output_dir='.', doujinshi_obj=None, template='default'):
         if not os.path.splitext(image)[1] in ('.jpg', '.png'):
             continue
 
-        image_html += '<img src="{0}" class="image-item"/>\n'\
+        image_html += '<img src="{0}" class="image-item"/>\n' \
             .format(image)
     html = readfile('viewer/{}/index.html'.format(template))
     css = readfile('viewer/{}/styles.css'.format(template))
@@ -162,7 +173,7 @@ def generate_main_html(output_dir='./'):
         else:
             with open('./main.html', 'wb') as f:
                 f.write(data.encode('utf-8'))
-        shutil.copy(os.path.dirname(__file__)+'/viewer/logo.png', './')
+        shutil.copy(os.path.dirname(__file__) + '/viewer/logo.png', './')
         set_js_database()
         logger.log(
             15, 'Main Viewer has been written to \'{0}main.html\''.format(output_dir))
@@ -174,7 +185,7 @@ def generate_cbz(output_dir='.', doujinshi_obj=None, rm_origin_dir=False, write_
     if doujinshi_obj is not None:
         doujinshi_dir = os.path.join(output_dir, doujinshi_obj.filename)
         if write_comic_info:
-            serialize_comicxml(doujinshi_obj, doujinshi_dir)
+            serialize_comic_xml(doujinshi_obj, doujinshi_dir)
         cbz_filename = os.path.join(os.path.join(doujinshi_dir, '..'), '{}.cbz'.format(doujinshi_obj.filename))
     else:
         cbz_filename = './doujinshi.cbz'
@@ -198,7 +209,7 @@ def generate_cbz(output_dir='.', doujinshi_obj=None, rm_origin_dir=False, write_
 def generate_pdf(output_dir='.', doujinshi_obj=None, rm_origin_dir=False):
     try:
         import img2pdf
-        
+
         """Write images to a PDF file using img2pdf."""
         if doujinshi_obj is not None:
             doujinshi_dir = os.path.join(output_dir, doujinshi_obj.filename)
@@ -224,10 +235,11 @@ def generate_pdf(output_dir='.', doujinshi_obj=None, rm_origin_dir=False):
             shutil.rmtree(doujinshi_dir, ignore_errors=True)
 
         logger.log(15, 'PDF file has been written to \'{0}\''.format(doujinshi_dir))
-        
+
     except ImportError:
         logger.error("Please install img2pdf package by using pip.")
 
+
 def unicode_truncate(s, length, encoding='utf-8'):
     """https://stackoverflow.com/questions/1809531/truncating-unicode-so-it-fits-a-maximum-size-when-encoded-for-wire-transfer
     """
@@ -244,9 +256,8 @@ def format_filename(s):
     """
     # maybe you can use `--format` to select a suitable filename
     ban_chars = '\\\'/:,;*?"<>|\t'
-    filename = s.translate(str.maketrans(ban_chars, ' '*len(ban_chars))).strip()
+    filename = s.translate(str.maketrans(ban_chars, ' ' * len(ban_chars))).strip()
     filename = ' '.join(filename.split())
-    print(repr(filename))
 
     while filename.endswith('.'):
         filename = filename[:-1]
@@ -275,7 +286,7 @@ def paging(page_string):
             start, end = i.split('-')
             if not (start.isdigit() and end.isdigit()):
                 raise Exception('Invalid page number')
-            page_list.extend(list(range(int(start), int(end)+1)))
+            page_list.extend(list(range(int(start), int(end) + 1)))
         else:
             if not i.isdigit():
                 raise Exception('Invalid page number')
@@ -284,6 +295,34 @@ def paging(page_string):
     return page_list
 
 
+def generate_metadata_file(output_dir, table, doujinshi_obj=None):
+    logger.info('Writing Metadata Info')
+
+    if doujinshi_obj is not None:
+        doujinshi_dir = os.path.join(output_dir, doujinshi_obj.filename)
+    else:
+        doujinshi_dir = '.'
+
+    logger.info(doujinshi_dir)
+
+    f = open(os.path.join(doujinshi_dir, 'info.txt'), 'w', encoding='utf-8')
+
+    fields = ['TITLE', 'ORIGINAL TITLE', 'AUTHOR', 'ARTIST', 'CIRCLE', 'SCANLATOR',
+              'TRANSLATOR', 'PUBLISHER', 'DESCRIPTION', 'STATUS', 'CHAPTERS', 'PAGES',
+              'TAGS', 'TYPE', 'LANGUAGE', 'RELEASED', 'READING DIRECTION', 'CHARACTERS',
+              'SERIES', 'PARODY', 'URL']
+    special_fields = ['PARODY', 'TITLE', 'ORIGINAL TITLE', 'CHARACTERS', 'AUTHOR',
+                      'LANGUAGE', 'TAGS', 'URL', 'PAGES']
+
+    for i in range(len(fields)):
+        f.write('{}: '.format(fields[i]))
+        if fields[i] in special_fields:
+            f.write(str(table[special_fields.index(fields[i])][1]))
+        f.write('\n')
+
+    f.close()
+
+
 class DB(object):
     conn = None
     cur = None

nhentai/viewer/minimal/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover" />
+    <title>{TITLE}</title>
+    <style>
+{STYLES}
+    </style>
+</head>
+<body>
+
+<nav id="list" hidden=true>
+{IMAGES}</nav>
+
+<div id="image-container">
+    <div id="dest"></div>
+    <span id="page-num"></span>
+</div>
+
+<script>
+{SCRIPTS}
+</script>
+</body>
+</html>

nhentai/viewer/minimal/scripts.js

@@ -0,0 +1,79 @@
+const pages = Array.from(document.querySelectorAll('img.image-item'));
+let currentPage = 0;
+
+function changePage(pageNum) {
+    const previous = pages[currentPage];
+    const current = pages[pageNum];
+
+    if (current == null) {
+        return;
+    }
+    
+    previous.classList.remove('current');
+    current.classList.add('current');
+
+    currentPage = pageNum;
+
+    const display = document.getElementById('dest');
+    display.style.backgroundImage = `url("${current.src}")`;
+
+    scroll(0,0)
+
+    document.getElementById('page-num')
+        .innerText = [
+                (pageNum + 1).toLocaleString(),
+                pages.length.toLocaleString()
+            ].join('\u200a/\u200a');
+}
+
+changePage(0);
+
+document.getElementById('image-container').onclick = event => {
+    const width = document.getElementById('image-container').clientWidth;
+    const clickPos = event.clientX / width;
+
+    if (clickPos < 0.5) {
+        changePage(currentPage - 1);
+    } else {
+        changePage(currentPage + 1);
+    }
+};
+
+document.onkeypress = event => {
+    switch (event.key.toLowerCase()) {
+        // Previous Image
+        case 'w':
+	   scrollBy(0, -40);
+	   break;
+        case 'a':
+            changePage(currentPage - 1);
+            break;
+        // Return to previous page
+        case 'q':
+            window.history.go(-1);
+            break;
+        // Next Image
+        case ' ':
+        case 's':
+	    scrollBy(0, 40);
+            break;
+        case 'd':
+            changePage(currentPage + 1);
+            break;
+    }// remove arrow cause it won't work
+};
+
+document.onkeydown = event =>{
+    switch (event.keyCode) {
+        case 37: //left
+            changePage(currentPage - 1);
+            break;
+        case 38: //up
+            break;
+        case 39: //right
+            changePage(currentPage + 1);
+            break;
+        case 40: //down
+            break;
+    }
+};

nhentai/viewer/minimal/styles.css

@@ -0,0 +1,75 @@
+  
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+
+img {
+    vertical-align: middle;
+}
+
+html, body {
+    display: flex;
+    background-color: #e8e6e6;
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-family: sans-serif;
+}
+
+#list {
+    height: 2000px;
+    overflow: scroll;
+    width: 260px;
+    text-align: center;
+}
+
+#list img {
+    width: 200px;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 15px 0;
+    cursor: pointer;
+}
+
+#list img.current {
+    background: #0003;
+}
+
+#image-container {
+    flex: auto;
+    height: 100%;
+    background: rgb(0, 0, 0);
+    color: rgb(100, 100, 100);
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    position: relative;
+}
+
+#image-container #dest {
+    height: 2000px;
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: top;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100vh;
+    margin: auto;
+}
+
+#image-container #page-num {
+    position: static;
+    font-size: 9pt;
+    left: 10px;
+    bottom: 5px;
+    font-weight: bold;
+    opacity: 0.9;
+    text-shadow: /* Duplicate the same shadow to make it very strong */
+        0 0 2px #222,
+        0 0 2px #222,
+        0 0 2px #222;
+}