diff --git a/gulpfile.js b/gulpfile.js index 7171d8092..2de291add 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,6 +19,8 @@ "use strict"; var autoprefixer = require("autoprefixer"); +var calc = require("postcss-calc"); +var cssvariables = require("postcss-css-variables"); var fancylog = require("fancy-log"); var fs = require("fs"); var gulp = require("gulp"); @@ -82,6 +84,9 @@ var AUTOPREFIXER_CONFIG = { "not dead", ], }; +var CSS_VARIABLES_CONFIG = { + preserve: true, +}; var DEFINES = { PRODUCTION: true, @@ -765,7 +770,13 @@ gulp.task( gulp.dest(GENERIC_DIR + "web") ), preprocessCSS("web/viewer.css", "generic", defines, true) - .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + cssvariables(CSS_VARIABLES_CONFIG), + calc(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(GENERIC_DIR + "web")), gulp @@ -795,7 +806,13 @@ gulp.task( createComponentsBundle(defines).pipe(gulp.dest(COMPONENTS_DIR)), gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(COMPONENTS_DIR + "images")), preprocessCSS("web/pdf_viewer.css", "components", defines, true) - .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + cssvariables(CSS_VARIABLES_CONFIG), + calc(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(COMPONENTS_DIR)), ]); }) @@ -851,7 +868,13 @@ gulp.task( gulp.dest(MINIFIED_DIR + "web") ), preprocessCSS("web/viewer.css", "minified", defines, true) - .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)])) + .pipe( + postcss([ + cssvariables(CSS_VARIABLES_CONFIG), + calc(), + autoprefixer(AUTOPREFIXER_CONFIG), + ]) + ) .pipe(gulp.dest(MINIFIED_DIR + "web")), gulp diff --git a/package-lock.json b/package-lock.json index 8a80230bc..164086b55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2771,6 +2771,18 @@ "randomfill": "^1.0.3" } }, + "css-unit-converter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz", + "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", + "dev": true + }, + "cssesc": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", + "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", + "dev": true + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -5356,6 +5368,12 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", + "dev": true + }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -10957,6 +10975,51 @@ } } }, + "postcss-calc": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz", + "integrity": "sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==", + "dev": true, + "requires": { + "css-unit-converter": "^1.1.1", + "postcss": "^7.0.5", + "postcss-selector-parser": "^5.0.0-rc.4", + "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } + } + }, + "postcss-css-variables": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz", + "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "escape-string-regexp": "^1.0.3", + "extend": "^3.0.1", + "postcss": "^6.0.8" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + } + } + }, "postcss-load-config": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz", @@ -10967,6 +11030,17 @@ "import-cwd": "^2.0.0" } }, + "postcss-selector-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", + "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", + "dev": true, + "requires": { + "cssesc": "^2.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "postcss-value-parser": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz", @@ -12756,6 +12830,12 @@ "set-value": "^2.0.1" } }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", + "dev": true + }, "unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", diff --git a/package.json b/package.json index 3f0b85a9c..fd622e0db 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,8 @@ "jstransformer-markdown-it": "^2.1.0", "merge-stream": "^1.0.1", "mkdirp": "^0.5.1", + "postcss-calc": "^7.0.1", + "postcss-css-variables": "^0.14.0", "prettier": "^1.19.1", "rimraf": "^2.7.1", "streamqueue": "^1.1.2", diff --git a/web/viewer.css b/web/viewer.css index 3d9fa9fe3..6ff04aecd 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -17,6 +17,8 @@ :root { --sidebar-width: 200px; + --sidebar-transition-duration: 200ms; + --sidebar-transition-timing-function: ease; } * { @@ -96,24 +98,20 @@ select { position: absolute; top: 32px; bottom: 0; - width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility - with older browsers that lack support for CSS variables. */ width: var(--sidebar-width); visibility: hidden; z-index: 100; border-top: 1px solid rgba(51, 51, 51, 1); - transition-duration: 200ms; - transition-timing-function: ease; + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); } html[dir='ltr'] #sidebarContainer { transition-property: left; - left: -200px; - left: calc(-1 * var(--sidebar-width)); + left: calc(0px - var(--sidebar-width)); } html[dir='rtl'] #sidebarContainer { transition-property: right; - right: -200px; - right: calc(-1 * var(--sidebar-width)); + right: calc(0px - var(--sidebar-width)); } .loadingInProgress #sidebarContainer { @@ -176,8 +174,8 @@ html[dir='rtl'] #sidebarContent { outline: none; } #viewerContainer:not(.pdfPresentationMode) { - transition-duration: 200ms; - transition-timing-function: ease; + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); } html[dir='ltr'] #viewerContainer { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05); @@ -193,12 +191,10 @@ html[dir='rtl'] #viewerContainer { html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { transition-property: left; - left: 200px; left: var(--sidebar-width); } html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { transition-property: right; - right: 200px; right: var(--sidebar-width); }