├── __src ├── bibi │ ├── wardrobe │ │ ├── everyday │ │ │ ├── bibi.dress.scss │ │ │ └── _@.scss │ │ ├── README-Dress_ja │ │ │ └── XX_TLDR.md │ │ ├── _dress-patterns │ │ │ ├── _@z.scss │ │ │ ├── _@a.scss │ │ │ ├── _spinner.scss │ │ │ ├── _@parts.scss │ │ │ ├── _notifier.scss │ │ │ ├── _help.scss │ │ │ ├── _main.scss │ │ │ ├── _nombre.scss │ │ │ ├── _veil.scss │ │ │ ├── _arrows.scss │ │ │ ├── _menu.scss │ │ │ ├── _panel.scss │ │ │ ├── _stage.scss │ │ │ ├── _subpanels.scss │ │ │ ├── _#default.scss │ │ │ └── _slider.scss │ │ ├── _dress-codes │ │ │ ├── _@.scss │ │ │ ├── bibi.dress.scss │ │ │ ├── _@parts.scss │ │ │ ├── _help.scss │ │ │ ├── _notifier.scss │ │ │ ├── _main.scss │ │ │ ├── _nombre.scss │ │ │ ├── _panel.scss │ │ │ ├── _arrows.scss │ │ │ ├── _veil.scss │ │ │ ├── _spinner.scss │ │ │ ├── _stage.scss │ │ │ ├── _menu.scss │ │ │ ├── _slider.scss │ │ │ ├── _subpanels.scss │ │ │ └── _icons.scss │ │ └── _dresses.js │ ├── resources │ │ ├── scripts │ │ │ ├── polyfills │ │ │ │ ├── intersection-observer.js │ │ │ │ ├── encoding.js │ │ │ │ └── bundle.js │ │ │ ├── bibi.book.scss │ │ │ └── bibi.js │ │ └── styles │ │ │ ├── _@parts.scss │ │ │ ├── _spinner.scss │ │ │ ├── bibi.scss │ │ │ ├── _icons.scss │ │ │ ├── _notifier.scss │ │ │ ├── _help.scss │ │ │ ├── _nombre.scss │ │ │ ├── images │ │ │ └── Bibi.svg │ │ │ ├── _arrows.scss │ │ │ ├── _#globals.scss │ │ │ ├── _menu.scss │ │ │ ├── _veil.scss │ │ │ ├── _main.scss │ │ │ └── _panel.scss │ ├── and │ │ ├── jo.scss │ │ └── jo.js │ ├── extensions │ │ ├── extractor │ │ │ ├── on-the-fly.js │ │ │ └── at-once.js │ │ ├── unaccessibilizer.js │ │ ├── sanitizer.js │ │ ├── analytics.js │ │ └── zine.js │ └── index.html ├── bibi-bookshelf │ └── __samples │ │ ├── Sample_Pre-Paginated_LtR │ │ ├── mimetype │ │ ├── CONTENT │ │ │ ├── cov.png │ │ │ ├── p01.png │ │ │ ├── p02.png │ │ │ ├── p03.png │ │ │ ├── p04.png │ │ │ ├── p05.png │ │ │ ├── p06.png │ │ │ ├── p07.png │ │ │ ├── nav.xhtml │ │ │ └── package.opf │ │ └── META-INF │ │ │ └── container.xml │ │ ├── Sample_Pre-Paginated_RtL │ │ ├── mimetype │ │ ├── CONTENT │ │ │ ├── cov.png │ │ │ ├── p01.png │ │ │ ├── p02.png │ │ │ ├── p03.png │ │ │ ├── p04.png │ │ │ ├── p05.png │ │ │ ├── p06.png │ │ │ ├── p07.png │ │ │ ├── nav.xhtml │ │ │ └── package.opf │ │ └── META-INF │ │ │ └── container.xml │ │ ├── Sample_Pre-Paginated_LtR.epub │ │ └── Sample_Pre-Paginated_RtL.epub └── bibi-demo │ └── embedding │ ├── index.scss │ └── index.html ├── .gitignore ├── bs-config.js ├── __src__back-compat ├── bib │ ├── i.js │ └── i │ │ └── index.html └── README.BackCompatKit.md ├── postcss.config.js ├── LICENSE ├── package.json ├── gulpfile.js ├── webpack.config.js └── bibi.info.js /__src/bibi/wardrobe/everyday/bibi.dress.scss: -------------------------------------------------------------------------------- 1 | @import "@"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/README-Dress_ja/XX_TLDR.md: -------------------------------------------------------------------------------- 1 | （予定：サマリ／クイックリファレンス） -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_@z.scss: -------------------------------------------------------------------------------- 1 | @import "#default"; @import "@parts"; -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/mimetype: -------------------------------------------------------------------------------- 1 | application/epub+zip -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/mimetype: -------------------------------------------------------------------------------- 1 | application/epub+zip -------------------------------------------------------------------------------- /__src/bibi/resources/scripts/polyfills/intersection-observer.js: -------------------------------------------------------------------------------- 1 | import 'intersection-observer'; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/everyday/_@.scss: -------------------------------------------------------------------------------- 1 | @import "../_dress-patterns/@a"; @import "../_dress-patterns/@z"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_@.scss: -------------------------------------------------------------------------------- 1 | @import "../_dress-patterns/@a"; @import "@parts"; @import "../_dress-patterns/@z"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_@a.scss: -------------------------------------------------------------------------------- 1 | @import "../../resources/styles/#globals"; 2 | @import "../_dress-codes/@parts"; -------------------------------------------------------------------------------- /__src/bibi/resources/scripts/polyfills/encoding.js: -------------------------------------------------------------------------------- 1 | import { TextDecoder } from 'text-encoding-utf-8'; self.TextDecoder = TextDecoder; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dresses.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'custom-made': [ 3 | 'everyday' 4 | ], 5 | 'ready-made': [ 6 | ] 7 | }; -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR.epub: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR.epub -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL.epub: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL.epub -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/bibi.dress.scss: -------------------------------------------------------------------------------- 1 | // You can add some variables or mixins here, as you like. 2 | 3 | @import "@"; 4 | 5 | // You can add extra styles after here, as you like. -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/cov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/cov.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p01.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p02.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p03.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p04.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p05.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p06.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/p07.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/cov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/cov.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p01.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p02.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p03.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p04.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p05.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p06.png -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/satorumurmur/bibi/HEAD/__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/p07.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /__archives 2 | /__dist 3 | /__src/bibi/wardrobe/DRESS-TEMPLATE-* 4 | 5 | /archives 6 | /bib 7 | /dev-bib 8 | 9 | node_modules 10 | npm-debug.log 11 | 12 | ._* 13 | .DS_Store 14 | Icon 15 | Thumbs.db -------------------------------------------------------------------------------- /bs-config.js: -------------------------------------------------------------------------------- 1 | const Bibi = require('./bibi.info.js'); 2 | 3 | module.exports = { 4 | port: 61671, 5 | ui: { 6 | port: 61672 7 | }, 8 | server: { 9 | baseDir: Bibi.DIST, 10 | index: 'index.html' 11 | }, 12 | startPath: 'bibi/?book=', 13 | ghostMode: false 14 | }; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_spinner.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Spinner 3 | // -------------------------------------------------------------------------------- 4 | 5 | div#bibi-spinner { 6 | @include size($Spinner_Size); 7 | @include Spiner-Content(); 8 | } -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/META-INF/container.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/META-INF/container.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_@parts.scss: -------------------------------------------------------------------------------- 1 | @import "stage"; 2 | @import "main"; 3 | 4 | @import "menu"; 5 | 6 | @import "slider"; 7 | 8 | @import "notifier"; 9 | @import "veil"; 10 | @import "help"; 11 | 12 | @import "panel"; 13 | @import "subpanels"; 14 | 15 | @import "icons"; 16 | 17 | @import "nombre"; 18 | @import "arrows"; 19 | @import "spinner"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_@parts.scss: -------------------------------------------------------------------------------- 1 | @import "stage"; 2 | @import "main"; 3 | 4 | @import "menu"; 5 | 6 | @import "slider"; 7 | 8 | @import "notifier"; 9 | @import "veil"; 10 | @import "help"; 11 | 12 | @import "panel"; 13 | @import "subpanels"; 14 | 15 | @import "icons"; 16 | 17 | @import "nombre"; 18 | @import "arrows"; 19 | @import "spinner"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_@parts.scss: -------------------------------------------------------------------------------- 1 | @import "stage"; 2 | @import "main"; 3 | 4 | @import "menu"; 5 | 6 | @import "slider"; 7 | 8 | @import "notifier"; 9 | @import "veil"; 10 | @import "help"; 11 | 12 | @import "panel"; 13 | @import "subpanels"; 14 | 15 | @import "icons"; 16 | 17 | @import "nombre"; 18 | @import "arrows"; 19 | @import "spinner"; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_help.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Help 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Help_Height: $Menu_Height; 6 | 7 | $Help_BorderTop: solid 1px rgb(240,240,240); 8 | $Help_Background: rgba(240,240,240,0.96); 9 | 10 | $Help-P_Color: rgb(96,96,96); -------------------------------------------------------------------------------- /__src/bibi/resources/scripts/polyfills/bundle.js: -------------------------------------------------------------------------------- 1 | import 'classlist-polyfill'; 2 | import { TextDecoder } from 'text-encoding-utf-8'; self.TextDecoder = TextDecoder; 3 | import 'intersection-observer'; 4 | import 'custom-event-polyfill'; 5 | import 'current-script-polyfill'; 6 | import 'es6-object-assign/auto'; 7 | import 'native-promise-only'; 8 | import 'polyfill-array-includes'; 9 | import 'string.padstart'; 10 | import 'url-polyfill'; 11 | -------------------------------------------------------------------------------- /__src/bibi/and/jo.scss: -------------------------------------------------------------------------------- 1 | /*! Bibi Frame Style */ 2 | 3 | iframe.bibi-frame { 4 | display: inline-block; 5 | box-sizing: border-box; 6 | position: relative; 7 | margin: 0; 8 | padding: 0; 9 | border: solid 1px rgb(222,222,222); 10 | border-radius: 1px; 11 | max-width: 100%; 12 | max-height: 100%; 13 | width: 100%; 14 | height: 100%; 15 | vertical-align: top; 16 | line-height: 1; 17 | text-decoration: none; 18 | background: transparent; 19 | } -------------------------------------------------------------------------------- /__src__back-compat/bib/i.js: -------------------------------------------------------------------------------- 1 | window['bibi:jo'] || (BiBiJS => BiBiJS && BiBiJS.src && /\/bib\/i\.js$/.test(BiBiJS.src) && (JoJS => { JoJS.src = BiBiJS.getAttribute('src').replace(/bib\/i\.js$/, 'bibi/and/jo.js'); JoJS.onload = () => (Jo => Jo.Status || Jo.embed())(window['bibi:jo']); document.head.appendChild(JoJS); })(document.createElement('script')))(document.currentScript || (Scripts => Scripts[Scripts.length - 1])(document.getElementsByTagName('script'))); -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const Config = { 2 | parser: false, 3 | plugins: { 4 | } 5 | }; 6 | 7 | module.exports = ({ file, options, env }) => { 8 | if(options['postcss-cssnext']) Config.plugins['postcss-cssnext'] = options['postcss-cssnext']; 9 | if(options['autoprefixer']) Config.plugins['autoprefixer'] = options['autoprefixer']; 10 | if(options['cssnano']) Config.plugins['cssnano'] = options['cssnano']; 11 | return Config; 12 | }; -------------------------------------------------------------------------------- /__src/bibi/extensions/extractor/on-the-fly.js: -------------------------------------------------------------------------------- 1 | const RangeLoader = new (require('./on-the-fly.bibi-zip-loader.js'))({ url: S['book'], worker: document.currentScript.src.replace(/\.js$/, '.bibi-zip-loader.worker' + (sML.UA.Trident ? '.alt' : '') + '.js') }); 2 | 3 | Bibi.x({ 4 | 5 | id: 'Extractor_on-the-fly', 6 | description: 'Utilities for Zipped Books. (Method: on-the-fly)', 7 | author: 'Satoru Matsushima (@satorumurmur)', 8 | version: '1.2.0' 9 | 10 | })(function() { 11 | 12 | O.RangeLoader = RangeLoader; 13 | 14 | }); 15 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_notifier.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Notifier 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Notifier_Height: $Menu_Height; 6 | 7 | $Notifier_FontFamily: inherit; 8 | $Notifier_FontFamily__Error: $Notifier_FontFamily; 9 | 10 | $Notifier_Color: rgb(69,69,69); 11 | $Notifier_Color__Error: rgb(192,64,0); 12 | 13 | $Notifier_Background: rgba(252,252,252,0.96); 14 | $Notifier_BoxShadow: 0 2px 4px rgba(0,0,0,0.125); -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_spinner.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Spinner 3 | // -------------------------------------------------------------------------------- 4 | 5 | div#bibi-spinner { 6 | display: none; html.busy & { display: block; } 7 | position: fixed; 8 | z-index: $INVARIABLE__Spinner_ZIndex; 9 | box-sizing: border-box; 10 | @include offset(48%, -100%, auto); 11 | margin: auto; 12 | // @____Bibi:Dress__('-') @include size($Spinner_Size); 13 | // @____Bibi:Dress__('-') @include Spiner-Content(); 14 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_notifier.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Notifier 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-notifier { 7 | height: $Notifier_Height; 8 | color: $Notifier_Color; 9 | background: $Notifier_Background; 10 | box-shadow: $Notifier_BoxShadow; 11 | p { 12 | font-family: $Notifier_FontFamily; 13 | &.error { 14 | font-family: $Notifier_FontFamily__Error; 15 | color: $Notifier_Color__Error; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_help.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Help 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-help { 7 | border-top: $Help_BorderTop; 8 | height: $Help_Height; 9 | background: $Help_Background; 10 | html.slider-opened.view-paged &, 11 | html.slider-opened.view-horizontal & { 12 | bottom: $Slider_Size !important; 13 | } 14 | p { 15 | line-height: $Help_Height * 1.1; 16 | color: $Help-P_Color; 17 | } 18 | } 19 | 20 | html.slider-opened:not(.panel-opened).view-vertical div#bibi-help { 21 | width: calc(100% - #{$Slider_Size}); 22 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_main.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Main 3 | // -------------------------------------------------------------------------------- 4 | 5 | @mixin ItemBox-Loading() { // [NOTE] It is for `::before` pseudo element. You can use an image by `background` instead of string. 6 | content: "Loading..."; 7 | @include size(100%, 2em); 8 | text-align: center; 9 | font-family: sans-serif; 10 | font-size: 18px; 11 | font-weight: bold; 12 | color: rgb(192,192,192); 13 | } 14 | 15 | @mixin Main__SubpanelOpened() { 16 | background: $HTML_Background; 17 | filter: brightness(87.5%); 18 | } 19 | 20 | @mixin Main-Book__SubpanelOpened() { 21 | opacity: .75; 22 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/bibi.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Material Icons by Material Design Authors / Google Inc. - https://material.io/icons 3 | * Licensed under the Apache License Version 2.0 - https://www.apache.org/licenses/LICENSE-2.0 4 | * // through a package maintained by Ravindra Marella. - https://marella.github.io/material-icons 5 | * // Licensed under the Apache License Version 2.0 - https://www.apache.org/licenses/LICENSE-2.0 6 | */ 7 | $material-icons-font-path: '~material-icons/iconfont/'; 8 | @import "~material-icons/iconfont/material-icons.scss"; 9 | /*! 10 | * 11 | * # Bibi Style (℠) 12 | * 13 | */ 14 | 15 | $images-path: './images'; 16 | @import "#globals"; 17 | @import "@parts"; -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/nav.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Nav 5 | 6 | 7 |
8 |

ToC

9 |
10 | 15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/nav.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Nav 5 | 6 | 7 |
8 |

ToC

9 |
10 | 15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_icons.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Base 3 | // -------------------------------------------------------------------------------- 4 | 5 | .bibi-icon { 6 | &, 7 | & *, 8 | &:before { 9 | box-sizing: border-box; 10 | display: inline-block; 11 | padding: 0; 12 | border: none 0; 13 | text-align: center; 14 | vertical-align: middle; 15 | text-decoration: none; 16 | } 17 | & { 18 | overflow: hidden; 19 | position: relative; 20 | border: solid 1px; 21 | border-radius: 3px; 22 | } 23 | & *, 24 | &:before { 25 | position: absolute; 26 | margin: 0; 27 | } 28 | } 29 | 30 | .bibi-button, .bibi-button-normal, .bibi-button-toggle { &.default, &.active { &.hover, &:hover { .bibi-icon { 31 | cursor: pointer; 32 | }}}} 33 | 34 | .bibi-button-radio.active .bibi-icon { 35 | cursor: default; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_main.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Main 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | main#bibi-main { 7 | html.appearance-horizontal:not(.book-full-height) & { 8 | top: $Menu_Height; 9 | height: calc(100% - #{$Menu_Height}); 10 | } 11 | html.appearance-vertical:not(.book-full-height) & { 12 | padding-top: $Menu_Height; 13 | height: calc(100% - #{$Menu_Height}); 14 | } 15 | html.subpanel-opened & { 16 | @include Main__SubpanelOpened(); 17 | } 18 | } 19 | div#bibi-main-book { 20 | html.subpanel-opened & { 21 | @include Main-Book__SubpanelOpened(); 22 | } 23 | } 24 | div.spread-box { 25 | } 26 | div.spread { 27 | } 28 | div.item-box { 29 | html.book-pre-paginated & { 30 | &:not(.placeholder):not(.loaded):after { 31 | @include ItemBox-Loading(); 32 | } 33 | } 34 | } 35 | iframe.item { 36 | } 37 | span.page { 38 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Satoru Matsushima 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_nombre.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Nombre 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Nombre_Width: 140px; 6 | $Nombre_Height: 20px; 7 | 8 | $Nombre_KeyColor: rgb(48,48,48); 9 | 10 | $Nombre-Current_Color: $Nombre_KeyColor; 11 | $Nombre-Delimiter_Color: lighten($Nombre_KeyColor, 20%); 12 | $Nombre-Total_Color: lighten($Nombre_KeyColor, 10%); 13 | $Nombre-Percent_Color: lighten($Nombre_KeyColor, 20%); 14 | $Nombre_BackgroundColor: rgba(lighten($Nombre_KeyColor, 77%), .9); 15 | 16 | $Nombre_KeyColor__SliderOpened: $Slider_KeyColor; 17 | $Nombre-Current_Color__SliderOpened: $Nombre_KeyColor__SliderOpened; 18 | $Nombre-Delimiter_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 20%); 19 | $Nombre-Total_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 10%); 20 | $Nombre-Percent_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 20%); 21 | $Nombre_BackgroundColor__SliderOpened: transparent; -------------------------------------------------------------------------------- /__src/bibi/resources/scripts/bibi.book.scss: -------------------------------------------------------------------------------- 1 | /*! Bibi Book Style */ 2 | 3 | html, body { 4 | margin: 0; 5 | padding: 0; 6 | border: none 0; 7 | }/* 8 | 9 | html.bibi-vertical-text { &, & body { 10 | max-height: 100%; 11 | }} 12 | 13 | html.bibi-horizontal-text { &, & body { 14 | max-width: 100%; 15 | }} 16 | 17 | html { 18 | overflow: hidden; 19 | }*/ 20 | 21 | html { 22 | img.bibi-spine-item-image { 23 | display: block; 24 | margin: 0; 25 | border: none 0; 26 | padding: 0; 27 | width: auto; 28 | height: auto; 29 | } 30 | } 31 | 32 | html.bibi-columned { 33 | img, svg, video, picture, image, iframe { 34 | break-inside: avoid; 35 | } 36 | } 37 | 38 | html.bibi-flick-active { 39 | &.bibi-flick-hot { user-select: none; } 40 | img { 41 | pointer-events: none; 42 | } 43 | } 44 | 45 | html.bibi-with-gutters { 46 | > head { 47 | display: block; 48 | > *:not(bibi-neck) { display: none; } 49 | > bibi-neck { 50 | display: block; 51 | position: relative; 52 | z-index: -99999999999; 53 | margin: 0; 54 | border: none 0; 55 | padding: 0; 56 | > bibi-throat { 57 | display: block; 58 | float: left; 59 | margin: 0; 60 | border: none 0; 61 | padding: 0; 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_panel.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Panel 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | $Panel_PaddingBefore: 20px; 7 | $Panel_PaddingAfter: $Panel_PaddingBefore; 8 | $Panel_PaddingStart: 20px; 9 | $Panel_PaddingEnd: $Panel_PaddingStart; 10 | $Panel_Background: rgb(246,246,246); 11 | 12 | 13 | // . Navigation 14 | // -------------------------------------------------------------------------------- 15 | 16 | $Panel-Nav-A_Color: rgb(64,64,64); 17 | $Panel-Nav-A_TextDecorationColor: rgb(216,216,216); 18 | $Panel-Nav-A_Color__Hover: steelblue; 19 | $Panel-Nav-A_TextDecorationColor__Hover: steelblue; 20 | 21 | 22 | // . Cover 23 | // -------------------------------------------------------------------------------- 24 | 25 | $Panel-Cover_MarginBefore: 20px; 26 | $Panel-Cover_PaddingBefore: $Panel-Cover_MarginBefore; 27 | $Panel-Cover_BorderColor: rgb(232,232,232); 28 | 29 | $Panel-Cover-Icon_Size__WithoutCoverImage: 144px; 30 | $Panel-Cover-Icon_OuterColor__WithoutCoverImage: white; 31 | $Panel-Cover-Icon_InnerColor__WithoutCoverImage: rgb(246,246,246); 32 | 33 | $Panel-Cover-Info_Color: rgb(160,160,160); -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_notifier.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Notifier 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-notifier { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | box-sizing: border-box; 11 | position: absolute; 12 | z-index: $INVARIABLE__Notifier_ZIndex; 13 | top: 0; 14 | padding: 0 8px; 15 | width: 100%; 16 | // @____Bibi:Dress__('-') height: $Notifier_Height; 17 | // @____Bibi:Dress__('-') color: $Notifier_Color; 18 | // @____Bibi:Dress__('-') background: $Notifier_Background; 19 | // @____Bibi:Dress__('-') box-shadow: $Notifier_BoxShadow; 20 | transition: .15s linear; 21 | transform-origin: 50% 0; 22 | p { 23 | // @____Bibi:Dress__('-') font-family: $Notifier_FontFamily; 24 | font-size: 12px; 25 | line-height: 1.25; 26 | font-weight: bold; 27 | &.error { 28 | // @____Bibi:Dress__('-') color: font-family: $Notifier_FontFamily__Error; 29 | // @____Bibi:Dress__('-') color: $Notifier_Color__Error; 30 | } 31 | small { 32 | font-size: 0.875em; 33 | } 34 | } 35 | & { 36 | opacity: 0; 37 | transform: translateY(-100%);//scaleY(0); 38 | transition: .2s linear; 39 | } 40 | html.notifier-shown & { 41 | opacity: 1; 42 | transform: none; 43 | transition: .15s linear; 44 | } 45 | } -------------------------------------------------------------------------------- /__src/bibi-demo/embedding/index.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../bibi/resources/styles/#globals"; 3 | 4 | * { 5 | margin: 0; 6 | border: none 0; 7 | padding: 0; 8 | font-size: 100%; 9 | font-weight: inheirt; 10 | font-style: inherit; 11 | } 12 | 13 | html { 14 | font-size: 12px; 15 | @include size(100%); 16 | background: white; 17 | } 18 | 19 | body { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-between; 23 | margin: 10px; 24 | @include size(calc(100% - 20px)); 25 | } 26 | 27 | main { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | align-items: space-between; 32 | @include size(auto, 100%); 33 | > iframe.bibi-frame:nth-of-type(1) { 34 | margin-bottom: 10px; 35 | @include size(100%, calc(50% - 5px)); 36 | box-shadow: 0 0 0 4px rgba(hotpink, 0); animation: FLASH-R .222s linear; 37 | } 38 | > iframe.bibi-frame:nth-of-type(2) { 39 | @include size(calc(50% - 5px)); 40 | box-shadow: 0 0 0 4px rgba(turquoise, 0); animation: FLASH-G .222s linear; 41 | } 42 | > iframe.bibi-frame:nth-of-type(3) { 43 | @include size(calc(50% - 5px)); 44 | box-shadow: 0 0 0 4px rgba(steelblue, 0); animation: FLASH-B .222s linear; 45 | } 46 | } 47 | 48 | @keyframes FLASH-R { 7% { box-shadow: 0 0 0 4px hotpink; } } 49 | @keyframes FLASH-G { 7% { box-shadow: 0 0 0 4px turquoise; } } 50 | @keyframes FLASH-B { 7% { box-shadow: 0 0 0 4px steelblue; } } 51 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_nombre.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Nombre 3 | // -------------------------------------------------------------------------------- 4 | 5 | div#bibi-nombre { 6 | & { 7 | border-radius: $Nombre_Height * 0.5; 8 | @include size($Nombre_Width, $Nombre_Height); 9 | line-height: $Nombre_Height; 10 | background: $Nombre_BackgroundColor; 11 | } 12 | html.slider-opened & { background: $Nombre_BackgroundColor__SliderOpened; } 13 | html.view-vertical & { transform: rotate(90deg) translateY(($Nombre_Width - $Nombre_Height) * -0.5); } 14 | html.slider-opened.appearance-horizontal & { bottom: $Slider_PaddingEnd__SliderOpened !important; } 15 | html.slider-opened.appearance-vertical & { right: $Slider_PaddingEnd__SliderOpened !important; } 16 | span { 17 | &.bibi-nombre-current { 18 | color: $Nombre-Current_Color; 19 | html.slider-opened & { color: $Nombre-Current_Color__SliderOpened; } 20 | } 21 | &.bibi-nombre-delimiter { 22 | color: $Nombre-Delimiter_Color; 23 | html.slider-opened & { color: $Nombre-Delimiter_Color__SliderOpened; } 24 | } 25 | &.bibi-nombre-total { 26 | color: $Nombre-Total_Color; 27 | html.slider-opened & { color: $Nombre-Total_Color__SliderOpened; } 28 | } 29 | &.bibi-nombre-percent { 30 | color: $Nombre-Percent_Color; 31 | html.slider-opened & { color: $Nombre-Percent_Color__SliderOpened; } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /__src/bibi/extensions/unaccessibilizer.js: -------------------------------------------------------------------------------- 1 | Bibi.x({ 2 | 3 | id: 'Unaccessibilizer', 4 | description: 'What a...', 5 | author: 'Satoru Matsushima (@satorumurmur)', 6 | version: '1.2.0' 7 | 8 | })(function() { 9 | 10 | 'use strict'; 11 | 12 | const VPs = ['-webkit-', '-moz-', '-ms-', ''], unaccessibilize = (Item) => { 13 | if(this['select-elements'] == 'prevent') { 14 | VPs.forEach(Prefix => { 15 | ['user-select', 'user-drag'].forEach(Property => { 16 | Item.Body.style[Prefix + Property] = 'none'; 17 | }); 18 | }); 19 | } 20 | if(this['save-images'] == 'prevent') { 21 | sML.forEach(Item.Body.querySelectorAll('img, svg, image'))(Img => { 22 | VPs.forEach(Prefix => { 23 | ['user-select', 'user-drag'].forEach(Property => { 24 | Img.style[Prefix + Property] = 'none'; 25 | }); 26 | if(O.Touch) Img.style[Prefix + 'pointer-events'] = 'none'; 27 | }); 28 | Img.draggable = false; 29 | Img.addEventListener('contextmenu', O.preventDefault); 30 | }); 31 | } 32 | if(this['use-contextmenu'] == 'prevent') { 33 | Item.contentDocument.addEventListener('contextmenu', O.preventDefault); 34 | } 35 | }; 36 | 37 | E.bind('bibi:postprocessed-item', unaccessibilize); 38 | 39 | }); -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_help.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Help 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-help { 7 | box-sizing: border-box; 8 | display: none; 9 | position: absolute; 10 | z-index: $INVARIABLE__Help_ZIndex; 11 | @include offset(auto, auto, 0, 0); 12 | margin: 0; 13 | padding: 0 8px 0 56px; 14 | width: 100%; 15 | opacity: 0; 16 | transition: .2s linear; 17 | bottom: 0; 18 | // @____Bibi:Dress__('-') border-top: $Help_BorderTop; 19 | // @____Bibi:Dress__('-') height: $Help_Height; 20 | // @____Bibi:Dress__('-') background: $Help_Background; 21 | // @____Bibi:Dress__('-') html.slider-opened.view-paged &, 22 | // @____Bibi:Dress__('-') html.slider-opened.view-horizontal & { 23 | // @____Bibi:Dress__('-') bottom: $Slider_Size !important; 24 | // @____Bibi:Dress__('-') } 25 | p { 26 | text-align: center; 27 | font-size: 12px; 28 | font-weight: bold; 29 | // @____Bibi:Dress__('-') line-height: $Help_Height * 1.1; 30 | // @____Bibi:Dress__('-') color: $Help-P_Color; 31 | small { 32 | font-size: .875em; 33 | } 34 | } 35 | &.active { 36 | display: block; 37 | &.shown { 38 | opacity: 1; 39 | } 40 | } 41 | } 42 | 43 | // @____Bibi:Dress__('-') html.slider-opened:not(.panel-opened).view-vertical div#bibi-help { 44 | // @____Bibi:Dress__('-') width: calc(100% - #{$Slider_Size}); 45 | // @____Bibi:Dress__('-') } -------------------------------------------------------------------------------- /__src/bibi/extensions/sanitizer.js: -------------------------------------------------------------------------------- 1 | import DOMPurify from 'dompurify/dist/purify.min.js'; 2 | 3 | Bibi.x({ 4 | 5 | id: 'Sanitizer', 6 | description: 'Content Sanitizer.', 7 | author: 'Satoru Matsushima (@satorumurmur)', 8 | version: '1.2.0' 9 | 10 | })(function() { 11 | 12 | O.sanitizeItemSource = (Source, Opt) => { 13 | if(Source && typeof Source.Content == 'string' && Opt && typeof Opt.As == 'string') { 14 | const Settings = O.sanitizeItemSource.Settings[Opt.As]; 15 | if(Settings) { 16 | (pp => pp ? pp(Source) : true)(Settings.preprocess); 17 | Source.Content = DOMPurify.sanitize(Source.Content, Settings.Options); 18 | (pp => pp ? pp(Source) : true)(Settings.postprocess); 19 | //console.log(Source.Content); 20 | return Source.Content; 21 | } 22 | } 23 | const ErrorMessage = `Sanitizer: Invalid Arguments.`; 24 | I.note(ErrorMessage, 99999999999, 'ERROR'); 25 | O.error(ErrorMessage); 26 | throw new Error(ErrorMessage); 27 | }; 28 | 29 | O.sanitizeItemSource.Settings = { 30 | 'HTML': { 31 | Options: { WHOLE_DOCUMENT: true, ADD_TAGS: ['link', 'meta'], ADD_ATTR: ['xmlns', 'xmlns:epub', 'charset', 'http-equiv', 'content'] }, 32 | postprocess: (Source) => Source.Content = Source.Content.replace(/(])/, '\n$1').replace(/(<\/body>)/, '$1\n') 33 | }, 34 | 'SVG' : {} 35 | }; 36 | 37 | }); 38 | -------------------------------------------------------------------------------- /__src__back-compat/bib/i/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | This E-Book is Published with Bibi | EPUB Reader on your website. 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

This E-Book is Published on the Web with Bibi | EPUB Reader on your website.

34 | 38 |
39 | 40 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /__src/bibi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | This E-Book is Published with Bibi | EPUB Reader on your website. 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

This E-Book is Published on the Web with Bibi | EPUB Reader on your website.

34 | 38 |
39 | 40 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_veil.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Veil 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-veil { 7 | background: $Veil_Background; 8 | &:before { 9 | height: $Menu_Height; 10 | background: $Menu_BackgroundColor__VeilOpened; 11 | html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__VeilOpened; } 12 | } 13 | &:after { 14 | height: $PoweredBy_Height; 15 | background: $PoweredBy_BackgroundColor__VeilOpened; 16 | } 17 | } 18 | 19 | 20 | // - ByeBye 21 | // -------------------------------------------------------------------------------- 22 | 23 | p#bibi-veil-byebye { 24 | max-height: calc(100% - #{ $Menu_Height + 10px * 2 + $PoweredBy_Height }); 25 | color: $Veil-ByeBye_Color; 26 | background: $Veil-ByeBye_Background; 27 | } 28 | 29 | 30 | // - Play 31 | // -------------------------------------------------------------------------------- 32 | 33 | p#bibi-veil-play { 34 | background: $Veil-Play_BackgroundColor; &:hover { background-color: $Veil-Play_BackgroundColor__Hover; } 35 | &:before { 36 | @include Veil-Play-Icon(); 37 | } 38 | } 39 | 40 | 41 | // - Cover 42 | // -------------------------------------------------------------------------------- 43 | 44 | div#bibi-veil-cover { 45 | & { 46 | border-width: $Veil-Cover-Image_Margin; 47 | } 48 | html:not(.book-full-height) & { height: calc(100% - #{ $Menu_Height }); } 49 | &.without-cover-image { 50 | .book-icon { 51 | @include DEFAULT__SPECIALICON__Book($Veil-Cover-Icon_Size__WithoutCoverImage, $Veil-Cover-Icon_OuterColor__WithoutCoverImage, $Veil-Cover-Icon_InnerColor__WithoutCoverImage, absolute); 52 | } 53 | p { 54 | color: $Veil-Cover-P_Color__WithoutCoverImage; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_arrows.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Arrows 3 | // -------------------------------------------------------------------------------- 4 | 5 | div.bibi-arrow { 6 | //// Layout 7 | & { 8 | &:before { @include Arrow-Icon(); } 9 | } 10 | html.appearance-horizontal & { 11 | &:after { width: $Arrow-Bar_Width; } // ←→ 12 | } 13 | html.appearance-horizontal.book-full-height.slider-opened &, 14 | html.appearance-horizontal:not(.book-full-height) & { 15 | top: $Menu_Height; 16 | } 17 | html.appearance-horizontal:not(.book-full-height):not(.slider-opened) & { 18 | height: calc(100vh - #{$Menu_Height}); // TO BE OVERWRITTEN 19 | } 20 | html.appearance-horizontal.book-full-height.slider-opened &, 21 | html.appearance-horizontal:not(.book-full-height).slider-opened & { 22 | height: calc(100vh - #{$Menu_Height + $Slider_Size}); 23 | } 24 | html.appearance-vertical & { 25 | &:after { height: $Arrow-Bar_Width; } // ↑↓ 26 | } 27 | html.appearance-vertical.slider-opened & { 28 | width: calc(100vw - #{$Slider_Size}); 29 | } 30 | } 31 | 32 | html.appearance-ttb.book-full-height.slider-opened div#bibi-arrow-back, 33 | html.appearance-ttb:not(.book-full-height) div#bibi-arrow-back { 34 | & { 35 | &:before { margin-top: $Menu_Height; } 36 | } 37 | } 38 | 39 | html.appearance-ltr div#bibi-arrow-back, 40 | html.appearance-rtl div#bibi-arrow-forward { 41 | &:before { @include Arrow-Icon-L(); }; // ← 42 | } 43 | 44 | html.appearance-ltr div#bibi-arrow-forward, 45 | html.appearance-rtl div#bibi-arrow-back { 46 | &:before { @include Arrow-Icon-R(); }; // → 47 | } 48 | 49 | html.appearance-ttb div#bibi-arrow-back { 50 | &:before { @include Arrow-Icon-T(); }; // ↑ 51 | } 52 | 53 | html.appearance-ttb div#bibi-arrow-forward { 54 | &:before { @include Arrow-Icon-B(); }; // ↓ 55 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_arrows.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Arrows 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Arrow-Bar_Width: 40px; 6 | $Arrow-Icon_Size: $Arrow-Bar_Width; 7 | 8 | @mixin Arrow-Icon() { // [NOTE] It is for `::before` pseudo element. 9 | display: block; 10 | margin: auto; 11 | @include size($Arrow-Icon_Size); 12 | border-radius: 50%; 13 | text-align: center; 14 | vertical-align: middle; 15 | color: white;//rgb(96,96,96); 16 | background: black; 17 | // -------- 18 | font: #{$Arrow-Icon_Size} / 1em "Material Icons"; 19 | -ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none; 20 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; 21 | speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal; 22 | } 23 | 24 | @mixin Arrow-Icon-L() { // [NOTE] It extends Arrow-Icon() for the left direction. You can use an image instead of a font using `content` or `background`. 25 | content: "chevron_left"; 26 | text-indent: -.03em; 27 | } 28 | 29 | @mixin Arrow-Icon-R() { // [NOTE] It extends Arrow-Icon() for the right direction. You can use an image instead of a font using `content` or `background`. 30 | content: "chevron_right"; 31 | text-indent:.03em; 32 | } 33 | 34 | @mixin Arrow-Icon-T() { // [NOTE] It extends Arrow-Icon() for the top direction. You can use an image instead of a font using `content` or `background`. 35 | content: "expand_less"; 36 | line-height: $Arrow-Icon_Size * .97; 37 | } 38 | 39 | @mixin Arrow-Icon-B() { // [NOTE] It extends Arrow-Icon() for the bottom direction. You can use an image instead of a font using `content` or `background`. 40 | content: "expand_more"; 41 | line-height: $Arrow-Icon_Size * 1.03; 42 | } 43 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_veil.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Veil 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Veil_Background: linear-gradient(to bottom, rgb(216,216,216), rgb(232,232,232));//linear-gradient(to bottom, rgb(234,234,234), rgb(248,248,248));//rgb(216,216,216); 6 | // [ja] └ Veil 内の各要素の基本文字色と全体の背景（背景は background プロパティに適用されるため、色以外に画像やグラデーション関数も使用できます） 7 | 8 | 9 | // - ByeBye 10 | // -------------------------------------------------------------------------------- 11 | 12 | $Veil-ByeBye_Color: white; 13 | $Veil-ByeBye_Background: rgba(black, .125); 14 | // [ja] └ 非対応環境でのアクセス時などに表示される緊急停止画面の文字色・背景色 15 | 16 | 17 | // - Play 18 | // -------------------------------------------------------------------------------- 19 | 20 | $Veil-Play_BackgroundColor: rgba(black, 0 ); 21 | $Veil-Play_BackgroundColor__Hover: rgba(black, 0.4); 22 | 23 | $Veil-Play-Icon_Size: 84px; 24 | @mixin Veil-Play-Icon() { 25 | font: #{$Veil-Play-Icon_Size}/#{$Veil-Play-Icon_Size} "Material Icons"; 26 | -ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none; 27 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; 28 | speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal; 29 | content: "play_circle_filled"; 30 | color: rgba(white, 0.9); 31 | text-shadow: 0 0 12px rgba(128,128,128,.125); 32 | } 33 | 34 | 35 | // - Cover 36 | // -------------------------------------------------------------------------------- 37 | 38 | $Veil-Cover-Image_Margin: 8px; 39 | 40 | $Veil-Cover-Icon_Size__WithoutCoverImage: 144px; 41 | $Veil-Cover-Icon_OuterColor__WithoutCoverImage: white; 42 | $Veil-Cover-Icon_InnerColor__WithoutCoverImage: rgb(222,222,222); 43 | 44 | $Veil-Cover-P_Color__WithoutCoverImage: rgb(128,128,128); -------------------------------------------------------------------------------- /__src/bibi/extensions/analytics.js: -------------------------------------------------------------------------------- 1 | Bibi.x({ 2 | 3 | id: 'Analytics', 4 | description: 'Utilities for Tracking and Logging with Google Analytics.', 5 | author: 'Satoru Matsushima (@satorumurmur)', 6 | version: '1.2.0-demo' 7 | 8 | })(function() { 9 | 10 | 'use strict'; 11 | 12 | if(typeof this['tracking-id'] != 'string' || !this['tracking-id']) return; 13 | 14 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 15 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 16 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 17 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 18 | 19 | ga('create', this['tracking-id'], 'auto', { 'allowLinker': true }); 20 | ga('require', 'linker'); 21 | ga('linker:autoLink', (Hosts => S['trustworthy-origins'].reduce((Hosts, Origin) => Hosts.push(Origin.replace(/^\w+:\/\//, '')), []))()); 22 | 23 | E.add('bibi:loaded-navigation', () => sML.forEach(I.Panel.BookInfo.Navigation.querySelectorAll('a'))(A => A.addEventListener('click', () => { 24 | ga('send', { hitType: 'event', 25 | eventCategory: `Bibi: Jumped by Navigation`, 26 | eventAction: B.Path, 27 | eventLabel: A.innerHTML.replace(/<[^>]*>/g, '') + ` - "${ A.getAttribute('data-bibi-original-href') }"`, 28 | eventValue: undefined 29 | }); 30 | }))); 31 | 32 | E.add('bibi:played:by-button', () => { 33 | ga('send', { hitType: 'event', 34 | eventCategory: `Bibi: Played by Button`, 35 | eventAction: B.Path, 36 | eventLabel: S['parent-uri'] ? `on: ` + S['parent-uri'].replace(/#.+$/, '') : '', 37 | eventValue: undefined 38 | }); 39 | }); 40 | 41 | E.add('bibi:scrolled', () => { 42 | if(R.Current.Percent != 100) return false; 43 | ga('send', { hitType: 'event', 44 | eventCategory: `Bibi: Read Through`, 45 | eventAction: B.Path, 46 | eventLabel: (Date.now() - Bibi.TimeOrigin), 47 | eventValue: undefined 48 | }); 49 | }); 50 | 51 | }); -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR/CONTENT/package.opf: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | urn:uuid:C3171445-62C6-470B-814B-14D15745BA8E 5 | Sample: Pre-Paginated LtR 6 | ja-jp 7 | Bibi Lalalu 8 | bibi.epub.link 9 | 2020-03-11T12:00:00Z 10 | pre-paginated 11 | portrait 12 | landscape 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /__src/bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL/CONTENT/package.opf: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | urn:uuid:D7F57A3B-8D31-4004-A5BF-543B40DA21E8 5 | Sample: Pre-Paginated RtL 6 | ja-jp 7 | Bibi Lalalu 8 | bibi.epub.link 9 | 2020-03-11T12:00:00Z 10 | pre-paginated 11 | portrait 12 | landscape 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /__src/bibi/resources/scripts/bibi.js: -------------------------------------------------------------------------------- 1 | import sML from 'sml.js'; self.sML = sML; 2 | import * as _ from './bibi.heart.js'; for(const m in _) self[m] = _[m]; 3 | 4 | require('./bibi.book.scss'); 5 | 6 | document.addEventListener('DOMContentLoaded', () => { 7 | Bibi.Script = document.getElementById('bibi-script'); 8 | (_ => { 9 | if(!window.Promise) return document.head.insertBefore(sML.create('script', { className: 'bibi-polyfill', src: Bibi.Script.src.replace(/\/bibi\.js$/, '/polyfills/bundle.js'), onload: _ }), Bibi.Script); 10 | const Polyfills = [], PolyfillsPath = new URL('./polyfills', Bibi.Script.src).href; 11 | if(!window.TextDecoder) Polyfills.push(PolyfillsPath + '/encoding.js'); 12 | if(!window.IntersectionObserver) Polyfills.push(PolyfillsPath + '/intersection-observer.js'); 13 | if(!Polyfills.length) return _(); 14 | const Promises = []; 15 | Polyfills.forEach(Polyfill => Promises.push(new Promise(resolve => document.head.insertBefore(sML.create('script', { className: 'bibi-polyfill', src: Polyfill, onload: resolve }), Bibi.Script)))); 16 | Promise.all(Promises).then(_); 17 | })(() => { 18 | let BookStyleCSS = '', BookStyleElement = Bibi.Script.nextElementSibling; 19 | while(BookStyleElement) { 20 | if(/^style$/i.test(BookStyleElement.tagName) && /^\/\*! Bibi Book Style \*\//.test(BookStyleElement.textContent)) { 21 | BookStyleCSS = BookStyleElement.textContent.replace(/\/*.*?\*\//g, '').trim(); 22 | BookStyleElement.innerHTML = ''; 23 | document.head.removeChild(BookStyleElement); 24 | break; 25 | } else BookStyleElement = BookStyleElement.nextElementSibling; 26 | } 27 | Bibi.BookStyleURL = O.createBlobURL('Text', BookStyleCSS, 'text/css'); 28 | if(sML.UA.Trident) { 29 | document.documentElement.style.display = 'none'; 30 | const BibiStyles = Array.prototype.map.call(document.head.querySelectorAll('#bibi-style, #bibi-dress'), _ => { _.HREF = _.getAttribute('href'), _.href = ''; return _; }); 31 | return setTimeout(() => { 32 | BibiStyles.forEach(_ => { _.href = _.HREF; delete _.HREF; }); 33 | document.documentElement.style.display = ''; 34 | Bibi.hello(); 35 | }, 0); 36 | } 37 | Bibi.hello(); 38 | }); 39 | }); -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_menu.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Menu 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-menu { 7 | height: $Menu_Height; 8 | .bibi-icon { @include size($Menu-Icon_Size); } 9 | html.appearance-vertical.slider-opened & { width: calc(100% - #{$Slider_Size}); } 10 | html.appearance-vertical.slider-opened.panel-opened &, 11 | html.appearance-vertical.slider-opened.subpanel-opened & { padding-right: $Slider_Size; } 12 | } 13 | html.book-full-height { 14 | & div#bibi-menu { background-color: $Menu_BackgroundColor; } 15 | & div#bibi-menu.hover, 16 | &.panel-opened div#bibi-menu, 17 | &.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Hover; } 18 | &.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Active; box-shadow: $Menu_BoxShadow__Active; } 19 | } 20 | html:not(.book-full-height) { 21 | & div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH; } 22 | & div#bibi-menu.hover, 23 | &.panel-opened div#bibi-menu, 24 | &.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Hover; } 25 | &.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Active; box-shadow: $Menu_BoxShadow__NotBFH__Active; } 26 | } 27 | 28 | 29 | // - Menu-L & Menu-R 30 | // -------------------------------------------------------------------------------- 31 | 32 | div#bibi-menu-l, 33 | div#bibi-menu-r { 34 | ul { 35 | padding: $Menu-ButtonGroup_Padding; 36 | height: $Menu-Icon_Size; 37 | &:before { 38 | width: $Menu-ButtonGroup-Separator_Width; 39 | background: $Menu-ButtonGroup-Separator_Color; 40 | top: $Menu-ButtonGroup_Padding; 41 | height: $Menu-Icon_Size; 42 | } 43 | li { 44 | @include size($Menu-Icon_Size); 45 | } 46 | } 47 | } 48 | 49 | div#bibi-menu-l { 50 | ul { 51 | &:first-child { padding-left: $Menu-ButtonGroup_Padding; } 52 | &:not(:first-child) { padding-left: $Menu-ButtonGroup_Padding$Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; } 53 | li { 54 | &:not(:first-child) { margin-left: $Menu-ButtonGroup-Button_Margin; } 55 | } 56 | } 57 | } 58 | 59 | div#bibi-menu-r { 60 | ul { 61 | &:first-child { padding-right: $Menu-ButtonGroup_Padding; } 62 | &:not(:first-child) { padding-right: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; } 63 | li { 64 | &:not(:first-child) { margin-right: $Menu-ButtonGroup-Button_Margin; } 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_panel.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Panel 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-panel { 7 | background: $Panel_Background; 8 | &:before { 9 | height: $Menu_Height; 10 | background: $Menu_BackgroundColor__PanelOpened; 11 | html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__PanelOpened; } 12 | } 13 | &:after { 14 | height: $PoweredBy_Height; 15 | background: $PoweredBy_BackgroundColor__PanelOpened; 16 | } 17 | } 18 | 19 | 20 | // - BookInfo 21 | // -------------------------------------------------------------------------------- 22 | 23 | div#bibi-panel-bookinfo { 24 | margin-top: $Menu_Height; 25 | margin-bottom: $PoweredBy_Height; 26 | height: calc(100% - #{$Menu_Height + $PoweredBy_Height}); 27 | html.nav-ttb & { padding: $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter $Panel_PaddingStart; } 28 | html.nav-rtl & { padding: $Panel_PaddingStart $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter; } 29 | } 30 | 31 | 32 | // . Navigation 33 | // -------------------------------------------------------------------------------- 34 | 35 | div#bibi-panel-bookinfo-navigation { 36 | nav { 37 | a { 38 | border-color: $Panel-Nav-A_TextDecorationColor; 39 | color: $Panel-Nav-A_Color; 40 | &:hover { 41 | border-color: $Panel-Nav-A_TextDecorationColor__Hover; 42 | color: $Panel-Nav-A_Color__Hover; 43 | } 44 | } 45 | } 46 | } 47 | 48 | 49 | // . Cover 50 | // -------------------------------------------------------------------------------- 51 | 52 | div#bibi-panel-bookinfo-cover { 53 | & { 54 | border-color: $Panel-Cover_BorderColor; 55 | img { 56 | max-height: calc(#{ 100vh * 0.6 } - #{ ($Menu_Height + $Panel_PaddingBefore + $Panel_PaddingAfter + $PoweredBy_Height) * 0.6 }); 57 | } 58 | p#bibi-panel-bookinfo-cover-info { 59 | color: $Panel-Cover-Info_Color; 60 | } 61 | } 62 | &.without-cover-image { 63 | .book-icon { 64 | @include DEFAULT__SPECIALICON__Book($Panel-Cover-Icon_Size__WithoutCoverImage, $Panel-Cover-Icon_OuterColor__WithoutCoverImage, $Panel-Cover-Icon_InnerColor__WithoutCoverImage, relative); 65 | } 66 | } 67 | html.nav-ttb & { 68 | margin-top: $Panel-Cover_MarginBefore; 69 | padding-top: $Panel-Cover_PaddingBefore; 70 | max-width: calc(100vw - #{$Panel_PaddingStart + $Panel_PaddingEnd}); 71 | } 72 | html.nav-rtl & { 73 | margin-right: $Panel-Cover_MarginBefore; 74 | padding-right: $Panel-Cover_PaddingBefore; 75 | max-width: calc(100vw - #{$Panel_PaddingAfter * 2}); 76 | } 77 | } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_spinner.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Spinner 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Spinner_Size: 56px; 6 | 7 | @keyframes Spinner_Animation-Rotate { 8 | 0% { transform: rotate( 0deg); } 9 | 100% { transform: rotate(360deg); } 10 | } 11 | @keyframes Spinner_Animation-Beat { 12 | 0% { transform: scale(1.00); opacity: 0.75; } 13 | 25% { transform: scale(1.25); opacity: 0.50; } 14 | 50% { transform: scale(1.00); opacity: 0.75; } 15 | 75% { transform: scale(0.80); opacity: 1.00; } 16 | 100% { transform: scale(1.00); opacity: 0.75; } 17 | } 18 | /* 19 | @keyframes Spinner_Animation-Glow { 20 | 0% { @include size(3px ); opacity: 1.0; } 21 | 25% { @include size(1px ); } 22 | 50% { @include size(1px, 6px); opacity: 1.0; } 23 | 75% { @include size(1px ); } 24 | 100% { @include size(3px ); opacity: 1.0; } 25 | }*/ 26 | 27 | @mixin Spiner-Content() { 28 | &:before, &:after { 29 | content: ""; 30 | display: block; 31 | position: absolute; 32 | box-sizing: border-box; 33 | @include offset(0); 34 | margin: auto; 35 | border-radius: 50%; 36 | opacity: 0.75; 37 | } 38 | &:before { // Core 39 | @include size(24px); 40 | background: rgba(192,192,192, 0.75); 41 | } 42 | &:after { // Halo 43 | @include size(32px); 44 | border: solid 1.5px rgba(192,192,192, 0.5); 45 | } 46 | span { // Bits 47 | display: block; 48 | position: absolute; 49 | @include offset(0); 50 | margin: auto; 51 | @include size(100%); 52 | transform-origin: 50%; 53 | &:before { 54 | content: ""; 55 | display: block; 56 | @include offset(0, 0, auto); 57 | margin: 0 auto; 58 | border-radius: 50%; 59 | @include size(3px); 60 | } 61 | $SCOPED__Spinner_HowManyBits: 12; // 0-12 62 | @if $SCOPED__Spinner_HowManyBits > 0 { 63 | @for $i from 1 through $SCOPED__Spinner_HowManyBits { 64 | &:nth-child(#{$i}) { 65 | transform: rotate(#{360deg / $SCOPED__Spinner_HowManyBits * $i}); 66 | &:before { background: darken(rgb(255,255,255), (72% / $SCOPED__Spinner_HowManyBits * $i)); } 67 | } 68 | } 69 | @if $SCOPED__Spinner_HowManyBits < 12 { @for $i from $SCOPED__Spinner_HowManyBits + 1 through 12 { &:nth-child(#{$i}) { display: none; } } } 70 | } 71 | } 72 | html.busy & { 73 | & { animation: Spinner_Animation-Rotate 1.50s linear 0s infinite normal; } 74 | &:before, 75 | &:after { animation: Spinner_Animation-Beat 2.25s ease 0s infinite normal; } 76 | span { animation: /*Spinner_Animation-Glow 4.00s ease-in-out 0s infinite normal*/ none; } 77 | } 78 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_nombre.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Nombre 3 | // -------------------------------------------------------------------------------- 4 | 5 | div#bibi-nombre { 6 | & { 7 | display: none; 8 | pointer-events: none; 9 | box-sizing: border-box; 10 | overflow: hidden; 11 | position: absolute; 12 | z-index: $INVARIABLE__Nombre_ZIndex; 13 | margin: auto; 14 | // @____Bibi:Dress__('-') border-radius: $Nombre_Height * 0.5; 15 | // @____Bibi:Dress__('-') @include size($Nombre_Width, $Nombre_Height); 16 | // @____Bibi:Dress__('-') line-height: $Nombre_Height; 17 | font-size: 10px; 18 | text-align: center; 19 | // @____Bibi:Dress__('-') background: $Nombre_BackgroundColor; 20 | // @____Bibi:Dress__('-') html.slider-opened & { background: $Nombre_BackgroundColor__SliderOpened; } 21 | opacity: 0; 22 | transition: .125s ease-out; 23 | } 24 | html.busy & { display: none !important; } 25 | &.active { display: block; } 26 | &.hot { opacity: 1; } 27 | html.view-paged &, 28 | html.view-horizontal & { 29 | top: auto; 30 | right: -100%; 31 | left: -100%; 32 | } 33 | html.view-paged & { 34 | bottom: 2px; 35 | } 36 | html.view-horizontal & { 37 | bottom: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Height + 2) + "px" 38 | } 39 | html.view-vertical & { 40 | top: -100%; 41 | right: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Width + 2) + "px" 42 | bottom: -100%; 43 | left: auto; 44 | // @____Bibi:Dress__('-') transform: rotate(90deg) translateY(($Nombre_Width - $Nombre_Height) * -0.5); 45 | } 46 | // @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { bottom: $Slider_PaddingEnd__SliderOpened !important; } 47 | // @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { right: $Slider_PaddingEnd__SliderOpened !important; } 48 | span { 49 | & { 50 | display: inline-block; 51 | } 52 | &.bibi-nombre-current { 53 | font-size: 1.2em; 54 | font-weight: bold; 55 | // @____Bibi:Dress__('-') color: $Nombre-Current_Color; 56 | // @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Current_Color__SliderOpened; } 57 | } 58 | &.bibi-nombre-delimiter { 59 | margin: 0 0.1em 0 0.2em; 60 | // @____Bibi:Dress__('-') color: $Nombre-Delimiter_Color; 61 | // @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Delimiter_Color__SliderOpened; } 62 | } 63 | &.bibi-nombre-total { 64 | // @____Bibi:Dress__('-') color: $Nombre-Total_Color; 65 | // @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Total_Color__SliderOpened; } 66 | } 67 | &.bibi-nombre-percent { 68 | margin-left: .25em; 69 | // @____Bibi:Dress__('-') color: $Nombre-Percent_Color; 70 | // @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Percent_Color__SliderOpened; } 71 | span.unit { 72 | margin-left: .125em; 73 | font-size: .75em; 74 | } 75 | } 76 | } 77 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/images/Bibi.svg: -------------------------------------------------------------------------------- 1 | Bibi -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_stage.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Stage 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | // - Fonts 7 | // -------------------------------------------------------------------------------- 8 | 9 | $HTML_FontFamily__iOS: "Helvetica", "Trebuchet MS", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", sans-serif; 10 | $HTML_FontFamily__macOS: $HTML_FontFamily__iOS; 11 | $HTML_FontFamily__Android: sans-serif; 12 | $HTML_FontFamily__Windows: "Helvetica", "Trebuchet MS", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif; 13 | // [ja] └ ビビ全体の、OS 別デフォルトフォント設定。html 要素に適用され、基本的にすべての UI に継承されます。 14 | 15 | 16 | // - Background 17 | // -------------------------------------------------------------------------------- 18 | 19 | $HTML_Background: white;//linear-gradient(to top, rgb(48,48,48), rgb(80,80,80));//rgb(96,96,96); 20 | 21 | 22 | // - Catcher 23 | // -------------------------------------------------------------------------------- 24 | 25 | $Catcher_Background: linear-gradient(to bottom, rgb(200,200,200), rgb(240,240,240)); 26 | 27 | $Catcher_Border: dashed 4px white; 28 | $Catcher_Border__Hover: solid 8px white; 29 | $Catcher_Border__Active: solid 16px white; 30 | 31 | $Catcher_Border__TouchDevice: solid 4px white; 32 | $Catcher_Border__TouchDevice__Active: solid 8px white; 33 | 34 | $Catcher-Icon_Size: 128px; 35 | $Catcher-Icon_OuterColor: white; 36 | $Catcher-Icon_InnerColor: rgb(216,216,216); 37 | 38 | $Catcher-Button_Color: rgb(128,128,128); 39 | $Catcher-Button_BackgroundColor: white; 40 | 41 | $Catcher-Text_Color: rgb(128,128,128); 42 | 43 | 44 | // - PoweredBy 45 | // -------------------------------------------------------------------------------- 46 | 47 | $PoweredBy_Height: 39px; 48 | 49 | // with Veil 50 | $PoweredBy_BackgroundColor__VeilOpened: rgba(white, .6); 51 | $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened: 0; 52 | $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened: .69; 53 | $PoweredBy-A_BackgroundColor__VeilOpened: rgba(white, .84); 54 | $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened__Hover: 0; 55 | $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened__Hover: .96; 56 | $PoweredBy-A_BackgroundColor__VeilOpened__Hover: rgba(white, 1); 57 | 58 | // with Catcher 59 | $PoweredBy_BackgroundColor__WaitingFile: white; 60 | $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile: 0; 61 | $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile: .69; 62 | $PoweredBy-A_BackgroundColor__WaitingFile: transparent; 63 | $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile__Hover: .96; 64 | $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile__Hover: 0; 65 | $PoweredBy-A_BackgroundColor__WaitingFile__Hover: rgba(black, .38); 66 | 67 | // with Panel 68 | $PoweredBy_BackgroundColor__PanelOpened: rgba(black, .1); 69 | $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened: 0; 70 | $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened: .56; 71 | $PoweredBy-A_BackgroundColor__PanelOpened: transparent; 72 | $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened__Hover: .96; 73 | $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened__Hover: 0; 74 | $PoweredBy-A_BackgroundColor__PanelOpened__Hover: rgba(black, .38); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bibi", 3 | "version": "1.2.0", 4 | "author": { 5 | "name": "Satoru Matsushima" 6 | }, 7 | "description": "Bibi | EPUB Reader on your website.", 8 | "keywords": [ 9 | "EPUB", 10 | "Reading System", 11 | "Viewer", 12 | "Books-in-Browsers" 13 | ], 14 | "license": "MIT", 15 | "homepage": "https://bibi.epub.link", 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/satorumurmur/bibi.git" 19 | }, 20 | "bugs": "https://github.com/satorumurmur/bibi/issues", 21 | "readmeFilename": "README.md", 22 | "scripts": { 23 | "develop": "gulp reset && webpack --progress --mode development", 24 | "develop+watch": "gulp reset && webpack --progress --mode development --watch", 25 | "develop+bc": "gulp reset --bc && webpack --progress --mode development --bc", 26 | "develop+bc+watch": "gulp reset --bc && webpack --progress --mode development --bc --watch", 27 | "build": "gulp reset && webpack --progress --mode production", 28 | "build+watch": "gulp reset && webpack --progress --mode production --watch", 29 | "build+bc": "gulp reset --bc && webpack --progress --mode production --bc", 30 | "build+bc+watch": "gulp reset --bc && webpack --progress --mode production --bc --watch", 31 | "build+pack": "gulp reset --pack && webpack --progress --mode production --pack", 32 | "make:dress-template": "gulp make:dress-template", 33 | "make:package": "npm run build+pack && gulp make:package && gulp clean --pack", 34 | "make:package+bc": "npm run build+pack && gulp make:package && gulp make:package --bc && gulp clean --pack", 35 | "serve": "browser-sync start --config bs-config.js", 36 | "demo": "npm run build+bc && npm run serve", 37 | "start": "npm run develop+watch", 38 | "postinstall": "" 39 | }, 40 | "devDependencies": { 41 | "@babel/core": "^7.10.4", 42 | "@babel/preset-env": "^7.10.4", 43 | "autoprefixer": "^9.8.4", 44 | "babel-loader": "^8.1.0", 45 | "browser-sync": "^2.26.7", 46 | "browser-sync-webpack-plugin": "^2.2.2", 47 | "copy-webpack-plugin": "^5.1.1", 48 | "core-js": "^3.6.5", 49 | "css-loader": "^3.6.0", 50 | "cssnano": "^4.1.10", 51 | "del": "^5.1.0", 52 | "file-loader": "^6.0.0", 53 | "gulp": "^4.0.2", 54 | "gulp-rename": "^2.0.0", 55 | "gulp-zip": "^5.0.2", 56 | "hard-source-webpack-plugin": "^0.13.1", 57 | "mini-css-extract-plugin": "^0.9.0", 58 | "node-sass": "^4.14.1", 59 | "npm-run-all": "^4.1.5", 60 | "postcss": "^7.0.36", 61 | "postcss-cssnext": "^3.1.0", 62 | "postcss-loader": "^3.0.0", 63 | "sass-loader": "^9.0.1", 64 | "string-replace-webpack-plugin": "^0.1.3", 65 | "style-loader": "^1.2.1", 66 | "terser-webpack-plugin": "^3.0.6", 67 | "url-loader": "^4.1.0", 68 | "webpack": "^4.43.0", 69 | "webpack-cli": "^3.3.12", 70 | "webpack-fix-style-only-entries": "^0.5.1" 71 | }, 72 | "dependencies": { 73 | "bibi-zip-loader": "^0.9.0", 74 | "classlist-polyfill": "^1.2.0", 75 | "current-script-polyfill": "^1.0.0", 76 | "custom-event-polyfill": "^1.0.7", 77 | "dompurify": "^2.0.17", 78 | "es6-object-assign": "^1.1.0", 79 | "intersection-observer": "^0.11.0", 80 | "js-yaml": "^3.14.0", 81 | "jszip": "^3.5.0", 82 | "jszip-utils": "0.1.0", 83 | "material-icons": "^0.3.1", 84 | "native-promise-only": "^0.8.1", 85 | "polyfill-array-includes": "^2.0.0", 86 | "sml.js": "^1.0.28", 87 | "string.padstart": "^0.1.1", 88 | "text-encoding-utf-8": "^1.0.2", 89 | "url-polyfill": "^1.1.9" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /__src/bibi/extensions/zine.js: -------------------------------------------------------------------------------- 1 | import jsyaml from 'js-yaml/dist/js-yaml.min.js'; 2 | 3 | Bibi.x({ 4 | 5 | id: 'Zine', 6 | description: 'Utilities for BibiZine.', 7 | author: 'Satoru Matsushima (@satorumurmur)', 8 | version: '1.2.0' 9 | 10 | })(function() { 11 | 12 | 'use strict'; 13 | 14 | this.loadZineData = () => this.setZineMode().then(this.openYAML).then(this.createPackageDocument).then(L.loadPackage.process); 15 | 16 | this.setZineMode = () => { 17 | delete B.Container; 18 | B.Package.Source = O.src(B.ZineData.Source); 19 | Object.defineProperty(B, 'ZineData', { get: () => B.Package }); 20 | return Promise.resolve(); 21 | }; 22 | 23 | this.openYAML = () => O.file(B.ZineData.Source).then(() => jsyaml.safeLoad(B.ZineData.Source.Content)); 24 | 25 | this.createPackageDocument = (YAML) => { 26 | const NS = { 27 | OPF: 'http://www.idpf.org/2007/opf', 28 | DC: 'http://purl.org/dc/elements/1.1/' 29 | }; 30 | const Doc = document.implementation.createDocument(NS.OPF, 'package'); 31 | // Package 32 | const Package = Doc.documentElement; 33 | Package.setAttribute('xmlns', NS.OPF); 34 | Package.setAttribute('xmlns:dc', NS.DC); 35 | // Metadata 36 | const Metadata = Package.appendChild(document.createElementNS(NS.OPF, 'metadata')); 37 | ['identifier', 'language', 'title', 'creator', 'publisher'].forEach(Pro => { 38 | if(!YAML[Pro]) return; 39 | const Meta = Metadata.appendChild(document.createElementNS(NS.DC, 'dc:' + Pro)); 40 | Meta.textContent = YAML[Pro]; 41 | }); 42 | ['rendition-layout', 'rendition-orientation', 'rendition-spread'].forEach(Pro => { 43 | if(!YAML[Pro]) return; 44 | const Meta = Metadata.appendChild(document.createElementNS(NS.OPF, 'meta')); 45 | Meta.setAttribute('property', Pro.replace('-', ':')); 46 | Meta.textContent = YAML[Pro]; 47 | }); 48 | // Manifest & Spine 49 | const Manifest = Package.appendChild(document.createElementNS(NS.OPF, 'manifest')); 50 | ['cover-image', 'nav'].forEach(Pro => { 51 | if(!YAML[Pro]) return; 52 | const Item = Manifest.appendChild(document.createElementNS(NS.OPF, 'item')); 53 | Item.setAttribute('id', Pro + '-item'); 54 | Item.setAttribute('properties', Pro); 55 | Item.setAttribute('media-type', O.getContentType(YAML[Pro])); 56 | Item.setAttribute('href', YAML[Pro]); 57 | }); 58 | const Spine = Package.appendChild(document.createElementNS(NS.OPF, 'spine')); 59 | if(YAML['page-progression-direction']) Spine.setAttribute('page-progression-direction', YAML['page-progression-direction']); 60 | YAML['spine'].forEach((ItemRefData, i) => { 61 | if(!ItemRefData) return; 62 | const ID = 'spine-item-' + (i + 1 + '').padStart(3, 0); 63 | const [Href, PageSpread] = ItemRefData.trim().replace(/\s+/, ' ').split(' '); 64 | const Item = Manifest.appendChild(document.createElementNS(NS.OPF, 'item')); 65 | Item.setAttribute('id', ID); 66 | Item.setAttribute('media-type', O.getContentType(Href)); 67 | Item.setAttribute('href', Href); 68 | const ItemRef = Spine.appendChild(document.createElementNS(NS.OPF, 'itemref')); 69 | ItemRef.setAttribute('idref', ID); 70 | if(PageSpread) ItemRef.setAttribute('properties', 'page-spread-' + PageSpread); 71 | }); 72 | return Promise.resolve(Doc); 73 | }; 74 | 75 | }); 76 | 77 | -------------------------------------------------------------------------------- /__src__back-compat/README.BackCompatKit.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [en] How to use the same URLs as before v1.0.0 to publish books on the web. 4 | ================================================================================================ 5 | 6 | The folder structure has changed in Bibi v1.0.0, and the URL for publishing books has changed accordingly. 7 | But don't worry. You still can use not only the new style URL but also the same style URL as before. 8 | 9 | Please try this way, if you already have publicated books on the web with BiB/i older than v1.0.0, and want to update Bibi to newer version, but do not want to or can not change the public URLs of the books. 10 | 11 | 1. At first, upload the new "bibi" folder to the same directory of the "bib" directory on your web server. 12 | 2. Next, Replace "index.html" file in the "bib/i" directory on your web server with the one in the new "bib/i" folder (If you haven't customized the "index.html" file, you can simply overwrite with new one). 13 | 14 | Just by that, your Bibi is updated to the newest version, and ready to open your books via the same "https://your.server/bib/i/?book=***" style URL as before. There's no need to move EPUB data out of the "bib/bookshelf" directory. 15 | What's more, you can also use the new "https://your.server/bibi/?book=****" style URL to open books stored in the "bibi-bookshelf" directory (this is the default method since Bibi v1.0.0). 16 | 17 | If you interested in more info, read below too: 18 | * The same new "bibi/presets/default.js" preset file is used in both old and new style URLs. 19 | * If your old BiB/i is using customized old "bib/i/presets/default.js" preset file, and you want new Bibi to behave same as before, edit options one by one in the new preset file (Because the options in the preset file are renewed). 20 | * You can use different preset file in each HTML by editing "src" attribute of script#bibi-preset element. 21 | * You can change the path to the bookshelf directory by editing HTML or the preset file. The data-bibi-bookshelf attribute of script#bibi-preset element in HTML is prior than "bookshelf" option in the preset file. 22 | * By combining these, various ways of installation and operation are possibles (for example, having share the same bookshelf directory with both old and new style URLs, or using different HTML or preset files for each book). 23 | 24 | 25 | -------------------------------------------------------------------------------------------------------------------------------- 26 | 27 | 28 | [ja] v1.0.0 未満と同じ URL で、書籍をウェブ公開するには 29 | ================================================================================================ 30 | 31 | Bibi v1.0.0 でフォルダー構造が変更され、それに伴って書籍を発行するための URL も変更されました。 32 | でもご安心を。新スタイルの URL だけでなく、これまでどおり旧スタイルの URL も使用できます。 33 | 34 | もし、既に v1.0.0 よりも古い BiB/i で書籍をウェブ公開していて、Bibi は新しいバージョンに更新したいけれど、書籍の公開 URL は変更したくない・できない、というときは、この方法を試してください。 35 | 36 | 1. まず、新しい「bibi」フォルダを、ウェブサーバ上の「bib」ディレクトリと同じディレクトリにアップロードします。 37 | 2. 次に、ウェブサーバ上の「bib/i」ディレクトリにある「index.html」ファイルを、新しい「bib/i」フォルダ内にある「index.html」に交換します（「index.html」ファイルをカスタマイズしていなければ、単純に上書きしてかまいません）。 38 | 39 | それだけで、Bibi は最新版に更新され、以前と同じ「https://your.server/bib/i/?book=***」形式の URL で本を開けるようになります。EPUB データを「bib/bookshelf」ディレクトリから移動する必要もありません。 40 | しかも、新しい「https://your.server/bibi/?book=****」形式の URL を使用して「bibi-bookshelf」ディレクトリに保存された本を開くこともできます（これは、Bibi v1.0.0 以降のデフォルトの方法です）。 41 | 42 | もし、より詳細な情報に興味があれば、以下もお読みください。 43 | * 新しい「bibi/presets/default.js」プリセットファイルが、新旧両スタイルの URL で使用されます。 44 | * 古い BiB/i がカスタマイズされた古い「bib/i/presets/default.js」プリセットファイルを使用していて、新しい Bibi にも同じように振る舞ってほしい場合は、新しいプリセットファイルでオプションを１つずつ編集してください（プリセットファイルのオプションが新しくなっているためです）。 45 | * script#bibi-preset 要素の src 属性を編集することにより、各 HTML で異なるプリセットファイルを使用できます。 46 | * HTML またはプリセットファイルを編集して、bookshelf ディレクトリへのパスを変更できます。HTMLの script#bibi-preset 要素の data-bibi-bookshelf 属性は、プリセットファイルの "bookshelf" オプションよりも優先されます。 47 | * これらを組み合わせることで、多様な設置・運用方法が可能になります（たとえば、同じ bookshelf ディレクトリを新旧両スタイルの URL で共有したり、開く本ごとに異なる HTML やプリセットを用意したり）。 48 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_menu.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Menu 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Menu_Height: 39px; 6 | $Menu-Icon_Size: 31px; 7 | 8 | $Menu_BackgroundColor: rgba(white, 0 ); 9 | $Menu_BackgroundColor__Hover: rgba(white, .9); 10 | $Menu_BackgroundColor__Active: rgba(white, 1 ); 11 | $Menu_BackgroundColor__VeilOpened: rgba(white, .8); 12 | $Menu_BackgroundColor__PanelOpened: rgba(white, 1 ); 13 | $Menu_BoxShadow__Active: 0 0 16px rgba(black, 0.125); 14 | 15 | // Not-BookFullHeight (NotBFH) ... html:not(.book-full-height) 16 | $Menu_BackgroundColor__NotBFH: $Menu_BackgroundColor__Active; 17 | $Menu_BackgroundColor__NotBFH__Hover: $Menu_BackgroundColor__NotBFH; 18 | $Menu_BackgroundColor__NotBFH__Active: $Menu_BackgroundColor__NotBFH; 19 | $Menu_BackgroundColor__NotBFH__VeilOpened: $Menu_BackgroundColor__NotBFH; 20 | $Menu_BackgroundColor__NotBFH__PanelOpened: $Menu_BackgroundColor__PanelOpened; 21 | $Menu_BorderBottomColor__NotBFH: rgba(black, .05); 22 | $Menu_BorderBottomColor__NotBFH__Hover: $Menu_BorderBottomColor__NotBFH; 23 | $Menu_BorderBottomColor__NotBFH__Active: $Menu_BorderBottomColor__NotBFH__Hover; 24 | $Menu_BoxShadow__NotBFH__Active: $Menu_BoxShadow__Active; 25 | 26 | $Menu-ButtonGroup_Padding: ($Menu_Height - $Menu-Icon_Size) / 2; 27 | $Menu-ButtonGroup-Button_Margin: ($Menu_Height - $Menu-Icon_Size) / 4; 28 | $Menu-ButtonGroup-Separator_Width: 1px; 29 | $Menu-ButtonGroup-Separator_Color: rgba(216,216,216, 0.5); 30 | 31 | 32 | 33 | 34 | // ================================================================================ 35 | // + Icons in Menu 36 | // -------------------------------------------------------------------------------- 37 | 38 | 39 | // - Colors & Interaction 40 | // -------------------------------------------------------------------------------- 41 | 42 | // Default 43 | $Menu-Icon-Font_PaintColor: rgb(144,144,144); 44 | $Menu-Icon-Font_OutlineColor: transparent; 45 | $Menu-Icon-Shape_PaintColor: white; 46 | $Menu-Icon-Shape_OutlineColor: $Menu-Icon-Font_PaintColor; 47 | $Menu-Icon_BackgroundColor: rgba(white, 0.9); 48 | $Menu-Icon_BorderColor: rgb(236,236,236); 49 | $Menu-Icon_Transform: none; 50 | 51 | // Default:Hover 52 | $Menu-Icon-Font_PaintColor__Hover: rgb(64,64,64); 53 | $Menu-Icon-Font_OutlineColor__Hover: $Menu-Icon-Font_OutlineColor; 54 | $Menu-Icon-Shape_PaintColor__Hover: $Menu-Icon-Shape_PaintColor; 55 | $Menu-Icon-Shape_OutlineColor__Hover: $Menu-Icon-Font_PaintColor__Hover; 56 | $Menu-Icon_BackgroundColor__Hover: rgba(248,248,248,0.9);//$Menu-Icon_BackgroundColor; 57 | $Menu-Icon_BorderColor__Hover: rgb(192,192,192); 58 | $Menu-Icon_Transform__Hover: $Menu-Icon_Transform; 59 | 60 | // Active 61 | $Menu-Icon-Font_PaintColor__Active: $Menu-Icon_BackgroundColor; 62 | $Menu-Icon-Font_OutlineColor__Active: transparent; 63 | $Menu-Icon-Shape_PaintColor__Active: $Menu-Icon-Shape_PaintColor; 64 | $Menu-Icon-Shape_OutlineColor__Active: $Menu-Icon-Font_PaintColor; 65 | $Menu-Icon_BackgroundColor__Active: $Menu-Icon-Font_PaintColor; 66 | $Menu-Icon_BorderColor__Active: darken($Menu-Icon_BorderColor, 30%); 67 | $Menu-Icon_Transform__Active: rotate(360deg); 68 | 69 | // Active:Hover 70 | $Menu-Icon-Font_PaintColor__Active-Hover: $Menu-Icon-Font_PaintColor__Active; 71 | $Menu-Icon-Font_OutlineColor__Active-Hover: transparent; 72 | $Menu-Icon-Shape_PaintColor__Active-Hover: $Menu-Icon-Shape_PaintColor__Active; 73 | $Menu-Icon-Shape_OutlineColor__Active-Hover: lighten($Menu-Icon-Shape_OutlineColor__Active, 10%); 74 | $Menu-Icon_BackgroundColor__Active-Hover: rgb(96,96,96); 75 | $Menu-Icon_BorderColor__Active-Hover: lighten($Menu-Icon_BorderColor__Active, 10%); 76 | $Menu-Icon_Transform__Active-Hover: $Menu-Icon_Transform__Active; 77 | 78 | // Transition 79 | $Menu-Icon_Transition: 80 | color 0.125s linear, 81 | background-color 0.125s linear, 82 | border-color 0.125s linear, 83 | text-shadow 0.125s linear, 84 | box-shadow 0.125s linear, 85 | transform 0.25s ease 86 | ; 87 | 88 | // Disabled 89 | $Menu-Icon_Opacity__Disabled: 0.33; -------------------------------------------------------------------------------- /__src/bibi-demo/embedding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bibi Demo: Embedding 8 | 9 | 10 | 11 |
12 | 13 | 18 | 19 | 25 | 26 |
27 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_stage.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Stage 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | html { 7 | &.iOS { font-family: $HTML_FontFamily__iOS; } 8 | &.macOS { font-family: $HTML_FontFamily__macOS; } 9 | &.Android { font-family: $HTML_FontFamily__Android; } 10 | &.Windows { font-family: $HTML_FontFamily__Windows; } 11 | background: $HTML_Background; 12 | } 13 | 14 | 15 | // - Catcher 16 | // -------------------------------------------------------------------------------- 17 | 18 | div#bibi-catcher { 19 | & { 20 | background: $Catcher_Background; 21 | > .book-icon { 22 | @include DEFAULT__SPECIALICON__Book($Catcher-Icon_Size, $Catcher-Icon_OuterColor, $Catcher-Icon_InnerColor, absolute); 23 | } 24 | > .pgroup { 25 | p { 26 | strong { 27 | color: $Catcher-Button_Color; 28 | background: $Catcher-Button_BackgroundColor; 29 | } 30 | em, span, small { 31 | color: $Catcher-Text_Color; 32 | } 33 | } 34 | } 35 | &:before { 36 | $SCOPED__Catcher-Area_Margin: 20px; 37 | border-radius: $SCOPED__Catcher-Area_Margin; 38 | @include size( 39 | calc(100% - #{$SCOPED__Catcher-Area_Margin * 2 }), 40 | calc(100% - #{$SCOPED__Catcher-Area_Margin * 2 + $PoweredBy_Height}) 41 | ); 42 | @include max(768px) { @include size( 43 | calc(100% - #{$SCOPED__Catcher-Area_Margin * 0.5 * 2 }), 44 | calc(100% - #{$SCOPED__Catcher-Area_Margin * 0.5 * 2 + $PoweredBy_Height}) 45 | ); } 46 | transform: translateY(#{$PoweredBy_Height * -0.5}); 47 | } 48 | &:after { 49 | height: $PoweredBy_Height; 50 | background: $PoweredBy_BackgroundColor__WaitingFile; 51 | } 52 | } 53 | html:not(.iOS):not(.Android) & { 54 | &:before { border: $Catcher_Border; } 55 | } 56 | html.iOS &, 57 | html.Android & { 58 | &:before { border: $Catcher_Border__TouchDevice; } 59 | } 60 | html:not(.iOS):not(.Android).dragenter &, 61 | html:not(.iOS):not(.Android) &:hover { 62 | &:before { border: $Catcher_Border__Hover; } 63 | } 64 | html:not(.iOS):not(.Android) &:active { 65 | &:before { border: $Catcher_Border__Active; } 66 | } 67 | html.iOS &:active, 68 | html.Android &:active { 69 | &:before { border: $Catcher_Border__TouchDevice__Active; } 70 | } 71 | } 72 | 73 | 74 | // - PoweredBy 75 | // -------------------------------------------------------------------------------- 76 | 77 | div#bibi-poweredby { 78 | height: $PoweredBy_Height; 79 | html.veil-opened & { 80 | p { 81 | a { 82 | background-color: $PoweredBy-A_BackgroundColor__VeilOpened; 83 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened; } 84 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened; } 85 | } 86 | a:hover { 87 | background-color: $PoweredBy-A_BackgroundColor__VeilOpened__Hover; 88 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened__Hover; } 89 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened__Hover; } 90 | } 91 | } 92 | } 93 | html.waiting-file & { 94 | p { 95 | a { 96 | background-color: $PoweredBy-A_BackgroundColor__WaitingFile; 97 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile; } 98 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile; } 99 | } 100 | a:hover { 101 | background-color: $PoweredBy-A_BackgroundColor__WaitingFile__Hover; 102 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile__Hover; } 103 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile__Hover; } 104 | } 105 | } 106 | } 107 | html.panel-opened & { 108 | p { 109 | a { 110 | background-color: $PoweredBy-A_BackgroundColor__PanelOpened; 111 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened; } 112 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened; } 113 | } 114 | a:hover { 115 | background-color: $PoweredBy-A_BackgroundColor__PanelOpened__Hover; 116 | &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened__Hover; } 117 | &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened__Hover; } 118 | } 119 | } 120 | } 121 | } 122 | 123 | 124 | // - Checker 125 | // -------------------------------------------------------------------------------- 126 | 127 | div#bibi-style-checker { 128 | left: $Slider_Size * -1; top: $Menu_Height * -1; // left: 0; top: 0; 129 | @include size($Slider_Size, $Menu_Height); 130 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_arrows.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Arrows 3 | // -------------------------------------------------------------------------------- 4 | 5 | div.bibi-arrow { 6 | //// Layout 7 | & { 8 | pointer-events: none; 9 | display: none; html.arrows-active & { display: block; } 10 | position: absolute; 11 | z-index: $INVARIABLE__Arrow_ZIndex; 12 | margin: auto; 13 | line-height: 1; 14 | &:before, &:after { 15 | box-sizing: border-box; 16 | display: block; 17 | position: absolute; 18 | } 19 | &:before { // icon 20 | z-index: 2; 21 | // @____Bibi:Dress__('-') @include Arrow-Icon(); 22 | } 23 | &:after { // edge shadow 24 | //display: none !important; 25 | content: ""; 26 | z-index: 1; 27 | } 28 | } 29 | html.appearance-horizontal & { 30 | // ←→ 31 | bottom: auto; width: 0; 32 | &:before { top: 0; bottom: 0; } 33 | &:after { top: 0; bottom: 0; height: 100%; 34 | // @____Bibi:Dress__('-') width: $Arrow-Bar_Width; 35 | } 36 | } 37 | html.appearance-horizontal.book-full-height:not(.slider-opened) & { 38 | top: 0; 39 | height: 100vh; // TO BE OVERWRITTEN 40 | } 41 | // @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &, 42 | // @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height) & { 43 | // @____Bibi:Dress__('-') top: $Menu_Height; 44 | // @____Bibi:Dress__('-') } 45 | // @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height):not(.slider-opened) & { 46 | // @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height}); // TO BE OVERWRITTEN 47 | // @____Bibi:Dress__('-') } 48 | // @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &, 49 | // @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height).slider-opened & { 50 | // @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height + $Slider_Size}); 51 | // @____Bibi:Dress__('-') } 52 | html.appearance-vertical & { 53 | // ↑↓ 54 | left: 0; right: auto; height: 0; 55 | &:before { left: 0; right: 0; } 56 | &:after { left: 0; right: 0; width: 100%; 57 | // @____Bibi:Dress__('-') height: $Arrow-Bar_Width; 58 | } 59 | } 60 | html.appearance-vertical:not(.slider-opened) & { 61 | width: 100vw; // TO BE OVERWRITTEN 62 | } 63 | // @____Bibi:Dress__('-') html.appearance-vertical.slider-opened & { 64 | // @____Bibi:Dress__('-') width: calc(100vw - #{$Slider_Size}); 65 | // @____Bibi:Dress__('-') } 66 | html.busy & { 67 | &:before, &:after { opacity: 0 !important; transition: none !important; } 68 | } 69 | //// Interaction 70 | & { 71 | &:before, &:after { transition-duration: .4s; } 72 | &:before { opacity: 0.00; transform: scale(1.10); transition-timing-function: cubic-bezier(.2, .8, .8, 1.6); } 73 | &:after { opacity: 1.00; transition-timing-function: ease-out; } 74 | } 75 | &.available.hover { 76 | cursor: pointer; 77 | &:before, &:after { transition-duration: .2s; } 78 | &:before { opacity: 1.00; transform: scale(1.10); } 79 | } 80 | &.available.active { 81 | &:before, &:after { transition-duration: .1s; } 82 | &:before { opacity: 0.75; transform: scale(1.00); } 83 | } 84 | &.available.glowing { 85 | &:before, &:after { transition-duration: .1s; } 86 | &:before { opacity: 1.00; transform: scale(1.10); } 87 | } 88 | } 89 | 90 | // @____Bibi:Dress__('-') html.appearance-ttb.book-full-height.slider-opened div#bibi-arrow-back, 91 | // @____Bibi:Dress__('-') html.appearance-ttb:not(.book-full-height) div#bibi-arrow-back { 92 | // @____Bibi:Dress__('-') & { 93 | // @____Bibi:Dress__('-') &:before { margin-top: $Menu_Height; } 94 | // @____Bibi:Dress__('-') } 95 | // @____Bibi:Dress__('-') } 96 | 97 | @mixin Arrow-Base($SCOPED__Arrow_Dir, $SCOPED__Arrow_TransformOrigin) { 98 | & { 99 | #{$SCOPED__Arrow_Dir}: 0; 100 | &:before, &:after { transform-origin: $SCOPED__Arrow_TransformOrigin; } 101 | &:before { #{$SCOPED__Arrow_Dir}: 8px; } 102 | &:after { background: linear-gradient(to $SCOPED__Arrow_Dir, transparent, rgba(black, 0) 25%, rgba(black, 0.1)); opacity: 0; } 103 | } 104 | &.available.hover, &.available.glowing { 105 | &:after { opacity: 1; } 106 | } 107 | &.available.glowing { 108 | &:before { #{$SCOPED__Arrow_Dir}: 8px; } 109 | } 110 | } 111 | 112 | html.appearance-ltr div#bibi-arrow-back, 113 | html.appearance-rtl div#bibi-arrow-forward { /* ← */ @include Arrow-Base(left, 0% 50%); } 114 | 115 | html.appearance-ltr div#bibi-arrow-forward, 116 | html.appearance-rtl div#bibi-arrow-back { /* → */ @include Arrow-Base(right, 100% 50%); } 117 | 118 | html.appearance-ttb div#bibi-arrow-back { /* ↑ */ @include Arrow-Base(top, 50% 0%); } 119 | 120 | html.appearance-ttb div#bibi-arrow-forward { /* ↓ */ @include Arrow-Base(bottom, 50% 100%); } -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_subpanels.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Subpanel 3 | // -------------------------------------------------------------------------------- 4 | 5 | div.bibi-subpanel { 6 | &.bibi-subpanel-right, &:not(.bibi-subpanel-left) { right: $Subpanel_Margin; } 7 | &.bibi-subpanel-left { left: $Subpanel_Margin; } 8 | top: $Menu_Height + $Subpanel_Margin; 9 | width: calc(100% - #{$Subpanel_Margin * 2}); 10 | max-width: 320px - $Subpanel_Margin * 2; 11 | html.appearance-horizontal & { max-height: calc(100% - #{$Menu_Height + $Subpanel_Margin * 2}); } 12 | html.appearance-vertical & { max-height: calc(100% - #{$Menu_Height + $Subpanel_Margin * 2}); } 13 | border-radius: $Subpanel_BorderRadius; 14 | background: $Subpanel_BackgroundColor; 15 | transform: translateY($Subpanel_Margin * -2) scale(0); 16 | transition-timing-function: $Subpanel_TransitionTimingFunction__Close; 17 | &.opened { 18 | transition-timing-function: $Subpanel_TransitionTimingFunction__Open; 19 | box-shadow: $Subpanel_BoxShadow; 20 | } 21 | .bibi-icon { @include size($Subpanel-Icon_Size); } 22 | } 23 | 24 | 25 | // - Sub Panel :: Scrollbar 26 | // -------------------------------------------------------------------------------- 27 | 28 | div.bibi-subpanel { 29 | &::-webkit-scrollbar { 30 | @include size($Subpanel-Scrollbar-Track_Size); 31 | } 32 | &::-webkit-scrollbar-track { 33 | background: $Subpanel-Scrollbar-Track_BackgroundColor; 34 | } 35 | &::-webkit-scrollbar-thumb { 36 | border-width: ($Subpanel-Scrollbar-Track_Size - $Subpanel-Scrollbar-Thumb_Size) * 0.5; 37 | border-color: $Subpanel-Scrollbar-Track_BackgroundColor; 38 | border-radius: $Subpanel-Scrollbar-Track_Size * 0.5; 39 | background: $Subpanel-Scrollbar-Thumb_BackgroundColor; 40 | &:hover { background: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover; } 41 | &:active { background: $Subpanel-Scrollbar-Thumb_BackgroundColor__Active; } 42 | } 43 | } 44 | 45 | 46 | // - Sub Panel > Section 47 | // -------------------------------------------------------------------------------- 48 | 49 | .bibi-subpanel-section { 50 | @include margin-v($Subpanel-Section_VerticalMargin); 51 | .bibi-hgroup { 52 | } 53 | .bibi-h { 54 | } 55 | .bibi-h-label { 56 | @include padding-h($Subpanel-Heading_HorizontalPadding); 57 | color: $Subpanel-Heading_Color; 58 | >small { 59 | color: lighten($Subpanel-Heading_Color, 12%); 60 | &:before { 61 | color: lighten($Subpanel-Heading_Color, 24%); 62 | } 63 | } 64 | } 65 | .bibi-buttongroup { // ul 66 | border-color: $Subpanel-ButtonGroup_BorderColor; 67 | } 68 | .bibi-hgroup + .bibi-buttongroup, 69 | .bibi-buttongroup + .bibi-buttongroup { // ul 70 | margin-top: $Subpanel-ButtonGroup_VerticalMargin; 71 | } 72 | .bibi-buttonbox { // li 73 | } 74 | .bibi-button { // a, span 75 | @include padding-h($Subpanel-Button_HorizontalPadding); 76 | min-height: $Subpanel-Button_Height; 77 | .bibi-button-iconbox { 78 | margin-top: ($Subpanel-Button_Height - $Subpanel-Icon_Size) / 2; 79 | margin-right: $Subpanel-Icon_MarginRight; 80 | } 81 | .bibi-button-label { 82 | margin-top: ($Subpanel-Button_Height - $Subpanel-Button-FontSize) / 2 - 0.5px; 83 | font-size: $Subpanel-Button-FontSize; 84 | } 85 | &:after { 86 | right: $Subpanel-Button_HorizontalPadding; 87 | } 88 | &.default, 89 | &.disabled, 90 | &.disabled.hover { 91 | border-color: $Subpanel-Button_BorderColor; 92 | color: $Subpanel-Button_Color; 93 | background: $Subpanel-Button_BackgroundColor; 94 | &:after { color: $Subpanel-Button-Check_Color; } 95 | } 96 | html:not(.touch) &.default:active, 97 | &.active { 98 | border-color: $Subpanel-Button_BorderColor__Active; 99 | color: $Subpanel-Button_Color__Active; 100 | background-color: $Subpanel-Button_BackgroundColor__Active; 101 | &:after { color: $Subpanel-Button-Check_Color__Active; } 102 | } 103 | &.default.hover, 104 | &.bibi-button-toggle.active.hover { 105 | border-color: $Subpanel-Button_BorderColor__Hover; 106 | color: $Subpanel-Button_Color__Hover; 107 | background-color: $Subpanel-Button_BackgroundColor__Hover; 108 | &:after { color: $Subpanel-Button-Check_Color__Hover; } 109 | } 110 | } 111 | .bibi-buttongroup-tiled { 112 | .bibi-buttonbox { 113 | .bibi-button { 114 | padding-right: $Subpanel-Button_HorizontalPadding / 2; 115 | .bibi-button-label { 116 | margin-top: ($Subpanel-Button_Height - 12px) / 2 - 0.5px; 117 | } 118 | } 119 | } 120 | } 121 | } 122 | 123 | 124 | // - Sub Panel: Bookmarks 125 | // -------------------------------------------------------------------------------- 126 | 127 | #bibi-subpanel_bookmarks { 128 | #bibi-subpanel-section_bookmarks { 129 | .bibi-buttongroup { 130 | .bibi-buttonbox { 131 | .bibi-button { 132 | // &.bibi-button-bookmark-is-hot { background: $BookmarkSubpanel-Button_BackgroundColor__Hot; } 133 | .bibi-button-label { 134 | @include BookmarkSubpanel-Button-Label(); 135 | } 136 | .bibi-remove-bookmark { 137 | @include size($Subpanel-Button_Height); 138 | &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon(); } 139 | } 140 | // &.bibi-button-bookmark-is-hot .bibi-remove-bookmark, 141 | &.hover .bibi-remove-bookmark { 142 | &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark(); } 143 | } 144 | .bibi-remove-bookmark:hover { 145 | &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover(); } 146 | } 147 | } 148 | } 149 | } 150 | } 151 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * (℠) 3 | * # gulpfile for Bibi 4 | * 5 | */ 6 | 7 | 'use strict'; 8 | 9 | const gulp = require('gulp'), del = require('del'), fs = require('fs'), rename = require('gulp-rename'), zip = require('gulp-zip'); 10 | 11 | const Package = JSON.parse(fs.readFileSync('package.json')); 12 | const Bibi = require('./bibi.info.js'); 13 | 14 | gulp.task('clean', done => { 15 | if(!Bibi.ForPack) { 16 | del.sync([ 17 | '**/.DS_Store', 18 | '**/Thumbs.db', 19 | 'LICENSE', 20 | '*.md', 21 | 'bibi/*.html', 22 | 'bibi/and', 23 | 'bibi/extensions', 24 | 'bibi/presets', 25 | 'bibi/resources', 26 | 'bibi/wardrobe', 27 | 'bib/i/*.html', 28 | 'bib/i.js', 29 | 'bib/i/presets', 30 | 'bibi-bookshelf/__samples', 31 | 'bibi-demo' 32 | ].map( 33 | X => Bibi.DIST + '/' + X 34 | )); 35 | [ 36 | 'bibi-bookshelf', 37 | 'bibi', 38 | 'bib/bookshelf', 39 | 'bib/i', 40 | 'bib' 41 | ].forEach(Dir => { 42 | try { Dir = Bibi.DIST + '/' + Dir ; if(!fs.readdirSync(Dir).length) del.sync(Dir); } catch(E) {} 43 | }); 44 | } 45 | del.sync(Bibi.ARCHIVETMP); 46 | done(); 47 | }); 48 | 49 | gulp.task('initialize', done => { 50 | [ 51 | //'bibi', 52 | //'bibi-bookshelf' 53 | ].concat(!Bibi.WithBCK ? [] : [ 54 | //'bib', 55 | //'bib/i', 56 | 'bib/bookshelf' 57 | ]).forEach(Dir => { 58 | fs.mkdirSync((Bibi.ForPack ? Bibi.ARCHIVETMP : Bibi.DIST) + '/' + Dir, { recursive: true }); 59 | }); 60 | done(); 61 | }); 62 | 63 | gulp.task('reset', gulp.series( 64 | 'clean', 65 | 'initialize' 66 | )); 67 | 68 | gulp.task('make:dress-template', () => { 69 | return gulp.src([ 70 | Bibi.SRC + '/bibi/wardrobe/_dress-codes/**', 71 | ], { 72 | base: Bibi.SRC + '/bibi/wardrobe/_dress-codes' 73 | }).pipe(gulp.dest( 74 | Bibi.SRC + '/bibi/wardrobe/DRESS-TEMPLATE-' + new Date(Date.now() + 1000 * 60 * 60 * (new Date().getTimezoneOffset() / -60)).toISOString().split('.')[0].replace(/[-:]/g, '').replace('T', '-') 75 | )); 76 | }); 77 | 78 | gulp.task('make:package', () => { 79 | const PackageName = (Package.name == 'bibi' ? 'Bibi' : Package.name) + '-v' + Package.version + (Bibi.WithBCK ? '_with_BackCompatKit' : '') + '.zip'; 80 | del.sync([ 81 | Bibi.ARCHIVES + '/' + PackageName 82 | ]); 83 | return gulp.src([ 84 | 'LICENSE', 85 | 'README.md', 86 | 'bibi/*.html', 87 | 'bibi/and/**', 88 | 'bibi/extensions/**', 89 | 'bibi/presets/**', 90 | 'bibi/resources/**', 91 | 'bibi/wardrobe/**', 92 | 'bibi-bookshelf' 93 | ].concat(!Bibi.WithBCK ? [] : [ 94 | 'README.BackCompatKit.md', 95 | 'bib/i/*.html', 96 | 'bib/i.js', 97 | 'bib/i/presets/**', 98 | //'bib/bookshelf' 99 | ]).map( 100 | X => Bibi.ARCHIVETMP + '/' + X 101 | ), { 102 | base: Bibi.ARCHIVETMP 103 | }).pipe(zip( 104 | PackageName 105 | )).pipe(gulp.dest( 106 | Bibi.ARCHIVES 107 | )); 108 | }); 109 | 110 | // const Files = { 111 | // HTMLs: { 112 | // [Bibi.SRC]: [ 113 | // 'bibi/*.html', 114 | // 'bibi-bookshelf/__samples/**/*.epub', 115 | // 'bibi-demo/**/*.html' 116 | // ], 117 | // [Bibi.SRCBC]: [ 118 | // 'bib/i/*.html' 119 | // ] 120 | // }, 121 | // Documents: { 122 | // '.': [ 123 | // 'LICENSE', 124 | // 'README.md' 125 | // ], 126 | // [Bibi.SRCBC]: [ 127 | // 'README.BackCompatKit.md' 128 | // ] 129 | // }, 130 | // Samples: { 131 | // [Bibi.SRC]: [ 132 | // 'bibi-bookshelf/__samples/**/*.epub' 133 | // ] 134 | // } 135 | // }; 136 | // 137 | // const copyFiles = (A, B ) => gulp.src(A[B].map(X => B + '/' + X), { base: B }).pipe(gulp.dest(Bibi.DIST)); 138 | // const watchFiles = (A, B, C) => gulp.watch(A[B].map(X => B + '/' + X), gulp.parallel(C)); 139 | // 140 | // gulp.task('update:htmls', () => copyFiles(Files.HTMLs, Bibi.SRC )); 141 | // gulp.task('update:documents', () => copyFiles(Files.Documents, '.' )); 142 | // gulp.task('update:samples', () => copyFiles(Files.Samples, Bibi.SRC )); 143 | // 144 | // gulp.task('update:htmls-backcompatkit', () => copyFiles(Files.HTMLs, Bibi.SRCBC)); 145 | // gulp.task('update:documents-backcompatkit', () => copyFiles(Files.Documents, Bibi.SRCBC)); 146 | // 147 | // gulp.task('update', gulp.parallel([ 148 | // 'update:htmls', 149 | // 'update:documents', 150 | // 'update:samples' 151 | // ].concat(!Bibi.WithBCK ? [] : [ 152 | // 'update:htmls-backcompatkit', 153 | // 'update:documents-backcompatkit' 154 | // ]))); 155 | // 156 | // gulp.task('watch', done => { 157 | // watchFiles(Files.HTMLs, Bibi.SRC , 'update:htmls' ); 158 | // watchFiles(Files.HTMLs, Bibi.SRCBC, 'update:htmls-backcompatkit' ); 159 | // watchFiles(Files.Samples, Bibi.SRC , 'update:samples' ); 160 | // if(!Bibi.WithBCK) return done(); 161 | // watchFiles(Files.Documents, '.' , 'update:documents' ); 162 | // watchFiles(Files.Documents, Bibi.SRCBC, 'update:documents-backcompatkit'); 163 | // done(); 164 | // }); 165 | -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_#globals.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + MixIns 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | @mixin offset($T: auto, $R: $T, $B: $T, $L: $R) { top: $T; right: $R; bottom: $B; left: $L; } @mixin trbl($T: auto, $R: $T, $B: $T, $L: $R) { @include offset($T, $R, $B, $L); } 7 | @mixin offset-v($T: auto, $B: $T) { top: $T; bottom: $B; } @mixin offset-tb($T: auto, $B: $T) { @include offset-v($T, $B); } @mixin tb($T: auto, $B: $T) { @include offset-v($T, $B); } 8 | @mixin offset-h($L: auto, $R: $L) { left: $L; right: $R; } @mixin offset-lr($L: auto, $R: $L) { @include offset-h($L, $R); } @mixin lr($L: auto, $R: $L) { @include offset-h($L, $R); } 9 | 10 | @mixin margin-v($T: 0, $B: $T) { margin-top: $T; margin-bottom: $B; } @mixin margin-tb($T: 0, $B: $T) { @include margin-v($T, $B); } 11 | @mixin margin-h($L: 0, $R: $L) { margin-left: $L; margin-right: $R; } @mixin margin-lr($L: 0, $R: $L) { @include margin-h($L, $R); } 12 | 13 | @mixin padding-v($T, $B: $T) { padding-top: $T; padding-bottom: $B; } @mixin padding-tb($T, $B: $T) { @include padding-v($T, $B); } 14 | @mixin padding-h($L, $R: $L) { padding-left: $L; padding-right: $R; } @mixin padding-lr($L, $R: $L) { @include padding-h($L, $R); } 15 | 16 | @mixin size($W, $H: $W) { width: $W; height: $H; } @mixin wh($W, $H: $W) { @include size($W, $H); } @mixin hw($H, $W: $H) { @include size($W, $H); } 17 | @mixin max-size($W, $H: $W) { max-width: $W; max-height: $H; } @mixin max-wh($W, $H: $W) { @include max-size($W, $H); } @mixin max-hw($H, $W: $H) { @include max-size($W, $H); } 18 | @mixin min-size($W, $H: $W) { min-width: $W; min-height: $H; } @mixin min-wh($W, $H: $W) { @include min-size($W, $H); } @mixin min-hw($H, $W: $H) { @include min-size($W, $H); } 19 | 20 | @mixin min($Min) { @media screen and (min-width: #{$Min}) { @content; } } 21 | @mixin max($Max) { @media screen and (max-width: #{$Max}) { @content; } } 22 | @mixin min-max($Min, $Max) { @media screen and (min-width: #{$Min}) and (max-width: #{$Max}) { @content; } } 23 | @mixin max-min($Max, $Min) { @include min-max($Min, $Max) { @content; } } 24 | 25 | @mixin keyframes($N) { @-webkit-keyframes #{$N} { @content; } @-epub-keyframes #{$N} { @content; } @-moz-keyframes #{$N} { @content; } @-ms-keyframes #{$N} { @content; } @keyframes #{$N} { @content; } } 26 | 27 | @mixin text-combine-upright_all() { -webkit-text-combine: horizontal; text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-horizontal: all; text-combine-upright: all; } 28 | 29 | @mixin prefix($P, $V) { -webkit-#{$P}: $V; -epub-#{$P}: $V; -moz-#{$P}: $V; -ms-#{$P}: $V; @content; #{$P}: $V; } 30 | 31 | @mixin writing-mode($V, $D: ltr) { 32 | @include prefix(writing-mode, $V) { 33 | $V2: null; 34 | @if $V == vertical-lr { $V2: tb-lr; } 35 | @else if $V == vertical-rl { $V2: tb-rl; } 36 | @else if $D == rtl { $V2: rl-tb; } 37 | @else { $V2: lr-tb; } 38 | @if $V2 != null { -ms-writing-mode: $V2; } 39 | } 40 | direction: $D; 41 | } 42 | 43 | @mixin NonVisual() { 44 | display: block !important; 45 | position: absolute !important; 46 | overflow: hidden !important; 47 | margin: 0 !important; 48 | padding: 0 !important; 49 | border: 0 !important; 50 | left: 0 !important; 51 | top: 0 !important; 52 | width: 0 !important; 53 | height: 0 !important; 54 | background: transparent !important; 55 | } 56 | 57 | 58 | 59 | 60 | // ================================================================================ 61 | // + Temporary 62 | // -------------------------------------------------------------------------------- 63 | 64 | 65 | // - Scrollbars 66 | // -------------------------------------------------------------------------------- 67 | 68 | $TEMPORARY__Scrollbar-Track_Size: 15px; 69 | $TEMPORARY__Scrollbar-Thumb_Size: 8px; 70 | 71 | 72 | 73 | 74 | // ================================================================================ 75 | // + Invariables 76 | // -------------------------------------------------------------------------------- 77 | 78 | 79 | // - Z-Indexes 80 | // -------------------------------------------------------------------------------- 81 | 82 | $INVARIABLE__Main_ZIndex: 1; 83 | $INVARIABLE__Main-Book_ZIndex: 1; 84 | 85 | $INVARIABLE__Scrollbar_ZIndex: $INVARIABLE__Main_ZIndex + 1; 86 | 87 | $INVARIABLE__Sub_ZIndex: 10; 88 | 89 | $INVARIABLE__Veil_ZIndex: 100; 90 | $INVARIABLE__Veil-Cover_ZIndex: 1; 91 | $INVARIABLE__Veil-Play_ZIndex: 10; 92 | $INVARIABLE__Veil-ByeBye_ZIndex: 100; 93 | 94 | $INVARIABLE__Catcher_ZIndex: $INVARIABLE__Veil_ZIndex + 1; 95 | 96 | $INVARIABLE__Panel_ZIndex: 1000; 97 | 98 | $INVARIABLE__Slider_ZIndex: 10000; 99 | $INVARIABLE__Nombre_ZIndex: $INVARIABLE__Slider_ZIndex + 1; 100 | 101 | $INVARIABLE__Menu_ZIndex: 100000; 102 | $INVARIABLE__Arrow_ZIndex: $INVARIABLE__Menu_ZIndex + 1; 103 | $INVARIABLE__Subpanel_ZIndex: $INVARIABLE__Menu_ZIndex + 10; 104 | 105 | $INVARIABLE__PoweredBy_ZIndex: 1000000; 106 | 107 | $INVARIABLE__Help_ZIndex: 10000000; 108 | 109 | $INVARIABLE__Notifier_ZIndex: 100000000; 110 | 111 | $INVARIABLE__Spinner_ZIndex: 99999999999; 112 | 113 | 114 | // - MixIns 115 | // -------------------------------------------------------------------------------- 116 | 117 | @mixin GLOBAL__FontIcon_BaseStyles($SCOPED__FamilyName, $SCOPED__FontSize: 100%, $SCOPED__LineHeight: 1) { 118 | font: #{$SCOPED__FontSize} / #{$SCOPED__LineHeight} $SCOPED__FamilyName; 119 | font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "calt"; text-transform: none; 120 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; 121 | speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal; 122 | } 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_slider.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Slider 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Slider_Size: 64px; 6 | 7 | $Slider_PaddingStart__SliderOpened: 8px; 8 | $Slider_PaddingEnd__SliderOpened: 8px; 9 | $Slider_PaddingBefore__SliderOpened: 8px; $Slider_PaddingBefore__SliderOpened__WithHistory: 48px; 10 | $Slider_PaddingAfter__SliderOpened: 8px; 11 | 12 | $Slider_Transition__Open: .01s ease; 13 | $Slider_Transition__Close: .1s ease; 14 | 15 | $Slider_KeyColor: steelblue; 16 | // [ja] └ Slider 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義）※以降の項目で利用できますが、してもしなくても構いません 17 | 18 | $Slider_BorderColor: rgb(232,232,232); 19 | $Slider_Background: white; 20 | $Slider_BoxShadow: none; 21 | 22 | $Slider_BorderColor__SliderOpened: darken($Slider_Background, 20%); 23 | $Slider_Background__SliderOpened: rgb(236,236,236);//rgb(222,222,222); 24 | $Slider_BoxShadow__SliderOpened: 0 0 16px rgba(black, 0.125); 25 | 26 | 27 | // - . History 28 | // -------------------------------------------------------------------------------- 29 | 30 | $Slider-History-Button-Icon_Size: 32px; 31 | $Slider-History-Button-Icon_Margin: 8px; 32 | $Slider-History-Button-Icon_Margin: 8px; 33 | 34 | 35 | // - . Thumb 36 | // -------------------------------------------------------------------------------- 37 | 38 | $Slider-Thumb_BackgroundColor: rgb(160,160,160);//rgb(192,192,192); 39 | $Slider-Thumb_BackgroundColor__Hover: rgb(128,128,128); 40 | $Slider-Thumb_BackgroundColor__Active: rgb(160,160,160); 41 | $Slider-Thumb_BorderColor: transparent;//rgb(32,32,32); 42 | // [ja] └ 画面中央タップ以前の細い状態（スクロールバーを模した状態）の Slider の、現在位置表示となるサムの色（Slider 以外のスクロールバーは WebKit/Blink 系のみに適用されます） 43 | 44 | $Slider-Thumb_Size__SliderOpened: 11px; 45 | 46 | $Slider-Thumb_Border__SliderOpened: none 0 transparent;//solid 1px rgba($Slider_KeyColor, .1); 47 | $Slider-Thumb_BackgroundColor__SliderOpened: rgba($Slider_KeyColor, .5);//linear-gradient(to left, $Slider_KeyColor 0, $Slider_KeyColor $Slider-Thumb_Size__SliderOpened, rgba($Slider_KeyColor, .25) $Slider-Thumb_Size__SliderOpened, rgba($Slider_KeyColor, .25) 100%); 48 | 49 | $Slider-Thumb_Border__SliderOpened__Min: $Slider-Thumb_Border__SliderOpened;//none 0 transparent; 50 | $Slider-Thumb_BackgroundColor__SliderOpened__Min: $Slider-Thumb_BackgroundColor__SliderOpened;//$Slider_KeyColor; 51 | 52 | $Slider-Thumb-Halo_Width__SliderOpened: 0;//1px; 53 | $Slider-Thumb-Halo_Color__SliderOpened: transparent;//rgba(white, .625); 54 | 55 | 56 | // - . Rail 57 | // -------------------------------------------------------------------------------- 58 | 59 | $Slider-Rail-FullLength_Width__SliderOpened: 1px; 60 | $Slider-Rail-FullLength_Color__SliderOpened: rgb(216,216,216); 61 | $Slider-Rail-FullLength_Color__SliderOpened__Hover: $Slider-Rail-FullLength_Color__SliderOpened; 62 | 63 | $Slider-Rail-Groove_Width__SliderOpened: 1px; 64 | $Slider-Rail-Groove_Color__SliderOpened: rgb(216,216,216); 65 | $Slider-Rail-Groove_Color__SliderOpened__Hover: $Slider-Rail-Groove_Color__SliderOpened; 66 | 67 | $Slider-Rail-Progress_Width__SliderOpened: 3px; 68 | $Slider-Rail-Progress_Color__SliderOpened: $Slider_KeyColor; 69 | $Slider-Rail-Progress_Color__SliderOpened__Hover: $Slider_KeyColor; 70 | 71 | 72 | // - Edgebar Box 73 | // -------------------------------------------------------------------------------- 74 | 75 | 76 | // - Edgebar 77 | // -------------------------------------------------------------------------------- 78 | 79 | $Slider-Edgebar_BorderRadius: 2px;//($Slider_Size - $Slider_PaddingStart__SliderOpened - $Slider_PaddingEnd__SliderOpened) * 0.5; 80 | $Slider-Edgebar_Background: white; 81 | 82 | 83 | 84 | 85 | // ================================================================================ 86 | // + Icons in Slider 87 | // -------------------------------------------------------------------------------- 88 | 89 | 90 | // - Colors & Interaction 91 | // -------------------------------------------------------------------------------- 92 | 93 | // [In Slider] Default 94 | $Slider-Icon-Font_PaintColor: rgb(128,128,128); 95 | $Slider-Icon-Font_OutlineColor: transparent; 96 | $Slider-Icon-Shape_PaintColor: white; 97 | $Slider-Icon-Shape_OutlineColor: rgb(128,128,128); 98 | $Slider-Icon_BackgroundColor: white; 99 | $Slider-Icon_BorderColor: rgb(234,234,234); 100 | $Slider-Icon_Transform: none; 101 | 102 | // [In Slider] Default:Hover 103 | $Slider-Icon-Font_PaintColor__Hover: white; 104 | $Slider-Icon-Font_OutlineColor__Hover: $Slider-Icon-Font_OutlineColor; 105 | $Slider-Icon-Shape_PaintColor__Hover: $Slider_KeyColor; 106 | $Slider-Icon-Shape_OutlineColor__Hover: white; 107 | $Slider-Icon_BackgroundColor__Hover: $Slider_KeyColor; 108 | $Slider-Icon_BorderColor__Hover: $Slider_KeyColor; 109 | $Slider-Icon_Transform__Hover: $Slider-Icon_Transform; 110 | 111 | // [In Slider] Active 112 | $Slider-Icon-Font_PaintColor__Active: $Slider-Icon-Font_PaintColor__Hover; 113 | $Slider-Icon-Font_OutlineColor__Active: $Slider-Icon-Font_OutlineColor__Hover; 114 | $Slider-Icon-Shape_PaintColor__Active: $Slider-Icon-Shape_PaintColor__Hover; 115 | $Slider-Icon-Shape_OutlineColor__Active: $Slider-Icon-Shape_OutlineColor__Hover; 116 | $Slider-Icon_BackgroundColor__Active: $Slider-Icon_BackgroundColor__Hover; 117 | $Slider-Icon_BorderColor__Active: $Slider-Icon_BorderColor__Hover; 118 | $Slider-Icon_Transform__Active: rotate(360deg); 119 | 120 | // [In Slider] Active:Hover 121 | $Slider-Icon-Font_PaintColor__Active-Hover: $Slider-Icon-Font_PaintColor__Active; 122 | $Slider-Icon-Font_OutlineColor__Active-Hover: $Slider-Icon-Font_OutlineColor__Active; 123 | $Slider-Icon-Shape_PaintColor__Active-Hover: $Slider-Icon-Shape_PaintColor__Active; 124 | $Slider-Icon-Shape_OutlineColor__Active-Hover: $Slider-Icon-Shape_OutlineColor__Active; 125 | $Slider-Icon_BackgroundColor__Active-Hover: $Slider-Icon_BackgroundColor__Active; 126 | $Slider-Icon_BorderColor__Active-Hover: $Slider-Icon_BorderColor__Active; 127 | $Slider-Icon_Transform__Active-Hover: $Slider-Icon_Transform__Active; 128 | 129 | // [In Slider] Transition 130 | $Slider-Icon_Transition: 131 | color 0.125s linear, 132 | background-color 0.125s linear, 133 | border-color 0.125s linear, 134 | text-shadow 0.125s linear, 135 | box-shadow 0.125s linear, 136 | transform 0.25s ease 137 | ; 138 | 139 | // Disabled 140 | $Slider-Icon_Opacity__Disabled: 0.33; -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_#default.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Special Icons 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | // - Panel Toggler (.bibi-icon-toggle-panel) in Menu 7 | // -------------------------------------------------------------------------------- 8 | 9 | $DEFAULT__SPECIALICON__TogglePanel-Bar_Width: 19px; 10 | $DEFAULT__SPECIALICON__TogglePanel-Bar_Height: 2px; 11 | $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation: 4px; 12 | $DEFAULT__SPECIALICON__TogglePanel-Bar_BorderRadius: 1px; 13 | 14 | @mixin DEFAULT__SPECIALICON__TogglePanel() { 15 | >span { 16 | left: 0; 17 | right: 0; 18 | margin: auto; 19 | @include size($DEFAULT__SPECIALICON__TogglePanel-Bar_Width, $DEFAULT__SPECIALICON__TogglePanel-Bar_Height); 20 | border-radius: $DEFAULT__SPECIALICON__TogglePanel-Bar_BorderRadius; 21 | } 22 | $DEFAULT__SPECIALICON__TogglePanel-Bars_Top: ($Menu-Icon_Size - ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height * 3 + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation * 2)) / 2 - 1px; 23 | >span:nth-child(1) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 0; } 24 | >span:nth-child(2) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 1; } 25 | >span:nth-child(3) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 2; } 26 | >span:nth-child(4), 27 | >span:nth-child(5), 28 | >span:nth-child(6) { display: none !important; } 29 | } 30 | 31 | @mixin DEFAULT__SPECIALICON__TogglePanel__Active() { 32 | >span:nth-child(1) { opacity: 1; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * 1) rotate( 135deg); } 33 | >span:nth-child(2) { opacity: 0; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * 0) rotate(-360deg); } 34 | >span:nth-child(3) { opacity: 1; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * -1) rotate( 225deg); } 35 | } 36 | 37 | 38 | // - Shapes of Items and Spreads 39 | // -------------------------------------------------------------------------------- 40 | 41 | @mixin DEFAULT__SPECIALICON__View_Common() { 42 | $SCOPED__SpreadShape_Width : 13px; 43 | $SCOPED__SpreadShape_Height: 11px; 44 | $SCOPED__ItemShape_Width : ($SCOPED__SpreadShape_Width + 1px) / 2; 45 | $SCOPED__ItemShape_Height: $SCOPED__SpreadShape_Height; 46 | span.bibi-shape-spreads { 47 | @include offset(0); 48 | margin: auto; 49 | @include size($SCOPED__SpreadShape_Width, $SCOPED__SpreadShape_Height); 50 | span.bibi-shape-spread { 51 | left: 0; top: 0; 52 | @include size(100%); 53 | span.bibi-shape-item { 54 | top: 0; 55 | border: solid 1px; 56 | @include size($SCOPED__ItemShape_Width, $SCOPED__ItemShape_Height); 57 | &:first-child { left: 0; } 58 | &:last-child { right: 0; } 59 | } 60 | } 61 | } 62 | } 63 | @mixin DEFAULT__SPECIALICON__ViewPaged() { 64 | span.bibi-shape-spreads-paged { 65 | span.bibi-shape-spread { 66 | &:first-child { display: none; } 67 | &:last-child { display: none; } 68 | } 69 | } 70 | } 71 | @mixin DEFAULT__SPECIALICON__ViewHorizontal() { 72 | span.bibi-shape-spreads-horizontal { 73 | span.bibi-shape-spread { 74 | &:first-child { transform: translateX(-100%); left: -1px; } 75 | &:last-child { transform: translateX( 100%); left: 1px; } 76 | } 77 | } 78 | } 79 | @mixin DEFAULT__SPECIALICON__ViewVertical() { 80 | span.bibi-shape-spreads-vertical { 81 | span.bibi-shape-spread { 82 | &:first-child { transform: translateY(-100%); top: -1px; } 83 | &:last-child { transform: translateY( 100%); top: 1px; } 84 | } 85 | } 86 | } 87 | 88 | 89 | // - Book Icon 90 | // -------------------------------------------------------------------------------- 91 | 92 | @mixin DEFAULT__SPECIALICON__Book($SCOPED__Size, $SCOPED__OuterColor, $SCOPED__InnerColor, $SCOPED__Position: relative) { 93 | $SCOPED__Line_Width: $SCOPED__Size * 8/128; 94 | $SCOPED__Book_Width: $SCOPED__Size - $SCOPED__Line_Width * 2.5; 95 | $SCOPED__Book_Height: $SCOPED__Size; 96 | $SCOPED__Cover_Width: $SCOPED__Book_Width - $SCOPED__Line_Width * 2; 97 | $SCOPED__Cover_Height: $SCOPED__Book_Height - $SCOPED__Line_Width * 4; 98 | $SCOPED__Page_Breadth: $SCOPED__Book_Height - $SCOPED__Line_Width - $SCOPED__Cover_Height; 99 | $SCOPED__Book_Breadth: $SCOPED__Page_Breadth + $SCOPED__Line_Width * 2; 100 | $SCOPED__OffsetLeft: ($SCOPED__Size - $SCOPED__Book_Width) * 0.5; 101 | $SCOPED__OffsetTop: 0; 102 | box-sizing: border-box; 103 | display: block; 104 | position: $SCOPED__Position; 105 | @include size($SCOPED__Size); 106 | &:before, &:after, 107 | span, span:before, span:after { 108 | content: ""; 109 | box-sizing: border-box; 110 | display: block; 111 | position: absolute; 112 | } 113 | span { // Back Cover 114 | z-index: 10; 115 | left: $SCOPED__OffsetLeft; 116 | top: $SCOPED__OffsetTop; 117 | border-radius: ($SCOPED__Book_Breadth * 0.5) $SCOPED__Line_Width $SCOPED__Line_Width 0; 118 | @include size($SCOPED__Cover_Width + $SCOPED__Line_Width * 2, $SCOPED__Size - $SCOPED__Line_Width * 3); 119 | &:before { // Pages 120 | z-index: 100; 121 | left: ($SCOPED__Book_Breadth * 0.5); 122 | top: $SCOPED__Line_Width; 123 | border-radius: 0 2px $SCOPED__Line_Width * 3.5 0; 124 | @include size($SCOPED__Cover_Width - ($SCOPED__Line_Width + $SCOPED__Page_Breadth * 0.5) + $SCOPED__Line_Width, $SCOPED__Size - $SCOPED__Line_Width); 125 | } 126 | &:after { // Top of Spine 127 | z-index: 1000; 128 | left: $SCOPED__Line_Width; 129 | top: $SCOPED__Line_Width; 130 | border-radius: ($SCOPED__Page_Breadth * 0.5) 0 0 ($SCOPED__Page_Breadth * 0.5); 131 | @include size($SCOPED__Page_Breadth/* * 0.5*/, $SCOPED__Page_Breadth); 132 | } 133 | } 134 | &:after { // Front Cover 135 | z-index: 10000; 136 | left: $SCOPED__OffsetLeft; 137 | top: $SCOPED__OffsetTop + ($SCOPED__Size - $SCOPED__Cover_Height); 138 | border-radius: 0 $SCOPED__Line_Width $SCOPED__Line_Width ($SCOPED__Book_Breadth * 0.5); 139 | @include size($SCOPED__Cover_Width, $SCOPED__Cover_Height); 140 | } 141 | span, &:after { background: $SCOPED__OuterColor; } 142 | span:before, span:after { background: $SCOPED__InnerColor; } 143 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_menu.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Menu 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-menu { 7 | //box-sizing: border-box; 8 | position: absolute; 9 | z-index: $INVARIABLE__Menu_ZIndex; 10 | @include offset(0, 0, auto); 11 | left: 0; 12 | right: auto; 13 | margin: 0; 14 | width: 100%; // TO BE OVERWRITTEN ... html.appearance-vertical:not(.veil-opened):not(.slider-opened) 15 | // @____Bibi:Dress__('-') html.appearance-vertical.slider-opened & { width: calc(100% - #{$Slider_Size}); } 16 | // @____Bibi:Dress__('-') html.appearance-vertical.slider-opened.subpanel-opened & { padding-right: $Slider_Size; } 17 | // @____Bibi:Dress__('-') height: $Menu_Height; 18 | background: transparent; 19 | &, & ul { 20 | transition: .125s linear; 21 | } 22 | // @____Bibi:Dress__('-') .bibi-icon { @include size($Menu-Icon_Size); } 23 | } 24 | html.without-menubar, 25 | html.waiting-file { 26 | div#bibi-menu { display: none !important; } 27 | } 28 | /* @____Bibi:Dress__('-') { 29 | html.book-full-height { 30 | & div#bibi-menu { background-color: $Menu_BackgroundColor; } 31 | & div#bibi-menu.hover, 32 | &.panel-opened div#bibi-menu, 33 | &.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Hover; } 34 | &.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Active; box-shadow: $Menu_BoxShadow__Active; } 35 | } 36 | html:not(.book-full-height) { 37 | & div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH; } 38 | & div#bibi-menu.hover, 39 | &.panel-opened div#bibi-menu, 40 | &.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Hover; } 41 | &.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Active; box-shadow: $Menu_BoxShadow__NotBFH__Active; } 42 | } 43 | // } */ 44 | 45 | 46 | // - Menu-L & Menu-R 47 | // -------------------------------------------------------------------------------- 48 | 49 | div#bibi-menu-l, 50 | div#bibi-menu-r { 51 | box-sizing: border-box; 52 | display: flex; 53 | justify-content: flex-start; 54 | align-items: start; 55 | position: relative; 56 | z-index: 1; 57 | height: 100%; 58 | color: white; 59 | transition: opacity 0.75s linear; 60 | ul { 61 | display: flex; 62 | justify-content: flex-start; 63 | align-items: start; 64 | position: relative; 65 | // @____Bibi:Dress__('-') padding: $Menu-ButtonGroup_Padding; 66 | // @____Bibi:Dress__('-') height: $Menu-Icon_Size; 67 | &, &.sticky { opacity: 0; } 68 | &:before { 69 | content: ""; 70 | display: block; 71 | position: absolute; 72 | // @____Bibi:Dress__('-') width: $Menu-ButtonGroup-Separator_Width; 73 | // @____Bibi:Dress__('-') background: $Menu-ButtonGroup-Separator_Color; 74 | // @____Bibi:Dress__('-') top: $Menu-ButtonGroup_Padding; 75 | // @____Bibi:Dress__('-') height: $Menu-Icon_Size; 76 | } 77 | li { 78 | // @____Bibi:Dress__('-') @include size($Menu-Icon_Size); 79 | position: relative; 80 | z-index: 1; &.hover, &:active { z-index: 10; } 81 | .bibi-button { 82 | span.bibi-button-label { 83 | font-size: 0; 84 | color: transparent; 85 | } 86 | } 87 | } 88 | html.waiting & { 89 | &, &.sticky { opacity: 1; } 90 | } 91 | div#bibi-menu.hover &, 92 | //div#bibi-menu.hot &, 93 | html.menu-opened &, 94 | html.panel-opened &, 95 | html.subpanel-opened &, 96 | html:not(.book-full-height) & { 97 | &, &.sticky { opacity: 1; } 98 | } 99 | } 100 | ul.bibi-buttongroup-tiled { 101 | li:not(:first-child):not(:last-child) { 102 | .bibi-button { 103 | .bibi-button-iconbox { 104 | .bibi-icon { border-radius: 0; } 105 | } 106 | } 107 | } 108 | } 109 | } 110 | 111 | div#bibi-menu-l { 112 | float: left; 113 | flex-direction: row; 114 | ul { 115 | flex-direction: row; 116 | &:first-child { 117 | // @____Bibi:Dress__('-') padding-left: $Menu-ButtonGroup_Padding; 118 | &:before { display: none; } 119 | } 120 | &:not(:first-child) { 121 | // @____Bibi:Dress__('-') padding-left: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; 122 | &:before { left: 0; } 123 | } 124 | li { 125 | &:first-child { margin-left: 0; } 126 | // @____Bibi:Dress__('-') &:not(:first-child) { margin-left: $Menu-ButtonGroup-Button_Margin; } 127 | } 128 | } 129 | ul.bibi-buttongroup-tiled { 130 | li { margin-left: -1px !important; } 131 | li:first-child:not(:last-child) { 132 | .bibi-button { 133 | .bibi-button-iconbox { 134 | .bibi-icon { 135 | border-top-right-radius: 0; 136 | border-bottom-right-radius: 0; 137 | } 138 | } 139 | } 140 | } 141 | li:last-child:not(:first-child) { 142 | .bibi-button { 143 | .bibi-button-iconbox { 144 | .bibi-icon { 145 | border-top-left-radius: 0; 146 | border-bottom-left-radius: 0; 147 | } 148 | } 149 | } 150 | } 151 | } 152 | } 153 | 154 | div#bibi-menu-r { 155 | float: right; 156 | flex-direction: row-reverse; 157 | ul { 158 | flex-direction: row-reverse; 159 | &:first-child { 160 | // @____Bibi:Dress__('-') padding-right: $Menu-ButtonGroup_Padding; 161 | &:before { display: none; } 162 | } 163 | &:not(:first-child) { 164 | // @____Bibi:Dress__('-') padding-right: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; 165 | &:before { right: 0; } 166 | } 167 | li { 168 | &:first-child { margin-right: 0; } 169 | // @____Bibi:Dress__('-') &:not(:first-child) { margin-right: $Menu-ButtonGroup-Button_Margin; } 170 | } 171 | } 172 | ul.bibi-buttongroup-tiled { 173 | li { margin-right: -1px !important; } 174 | li:first-child:not(:last-child) { 175 | .bibi-button { 176 | .bibi-button-iconbox { 177 | .bibi-icon { 178 | border-top-left-radius: 0; 179 | border-bottom-left-radius: 0; 180 | } 181 | } 182 | } 183 | } 184 | li:last-child:not(:first-child) { 185 | .bibi-button { 186 | .bibi-button-iconbox { 187 | .bibi-icon { 188 | border-top-right-radius: 0; 189 | border-bottom-right-radius: 0; 190 | } 191 | } 192 | } 193 | } 194 | } 195 | } 196 | 197 | 198 | // - Button Behaviors 199 | // -------------------------------------------------------------------------------- 200 | 201 | ul#bibi-buttongroup_font-size { 202 | html.waiting &, 203 | html.book-pre-paginated & { 204 | display: none; 205 | } 206 | } 207 | 208 | ul#bibi-buttongroup_loupe { 209 | html.waiting &/*, 210 | html.book-reflowable &*/ { 211 | display: none; 212 | } 213 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_veil.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Veil 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-veil { 7 | box-sizing: border-box; 8 | overflow: hidden; 9 | display: block; 10 | position: absolute; 11 | z-index: $INVARIABLE__Veil_ZIndex; 12 | left: 0; 13 | top: 0; 14 | @include size(100%); 15 | font-size: 15px; 16 | // @____Bibi:Dress__('-') background: $Veil_Background; 17 | opacity: 1; 18 | transition: ease-in .5s; 19 | &.closed { 20 | opacity: 0; 21 | transition: ease-out .5s; 22 | html.appearance-ltr & { transform: translateX(-240%); } 23 | html.appearance-rtl & { transform: translateX( 240%); } 24 | html.appearance-ttb & { transform: translateY(-240%); } 25 | } 26 | &:before, 27 | &:after { 28 | content: ""; 29 | display: block; 30 | position: absolute; 31 | z-index: 0; 32 | left: 0; right: 0; 33 | width: 100%; 34 | } 35 | &:before { 36 | top: 0; 37 | // @____Bibi:Dress__('-') height: $Menu_Height; 38 | // @____Bibi:Dress__('-') background: $Menu_BackgroundColor__VeilOpened; 39 | // @____Bibi:Dress__('-') html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__VeilOpened; } 40 | } 41 | &:after { 42 | bottom: 0; 43 | // @____Bibi:Dress__('-') height: $PoweredBy_Height; 44 | // @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__VeilOpened; 45 | } 46 | } 47 | 48 | 49 | // - ByeBye 50 | // -------------------------------------------------------------------------------- 51 | 52 | p#bibi-veil-byebye { 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: center; 56 | align-items: center; 57 | box-sizing: border-box; 58 | position: absolute; 59 | z-index: $INVARIABLE__Veil-ByeBye_ZIndex; 60 | @include offset(0); 61 | margin: auto; 62 | padding: 10px; 63 | border-radius: 20px; 64 | @include size(240px); 65 | max-width: calc(100% - #{ 10px * 2 }); 66 | // @____Bibi:Dress__('-') max-height: calc(100% - #{ $Menu_Height + 10px * 2 + $PoweredBy_Height }); 67 | line-height: 1.75; 68 | text-align: center; 69 | font-size: 14px; 70 | font-weight: bold; 71 | // @____Bibi:Dress__('-') color: $Veil-ByeBye_Color; 72 | // @____Bibi:Dress__('-') background: $Veil-ByeBye_Background; 73 | a { 74 | color: inherit; 75 | transition: .2s linear; 76 | &:hover { 77 | color: rgb(216,216,216); 78 | transition: .1s linear; 79 | } 80 | } 81 | span { 82 | display: block; 83 | position: relative; 84 | } 85 | > span + span { 86 | margin-top: 1.5em; 87 | padding-top: 1.5em; 88 | &:before { 89 | content: ""; 90 | display: block; 91 | position: absolute; 92 | @include offset(0, 0, auto); 93 | margin: auto; 94 | @include size(2em, 1px); 95 | background: rgba(white, .5); 96 | } 97 | } 98 | } 99 | 100 | 101 | // - Play 102 | // -------------------------------------------------------------------------------- 103 | 104 | p#bibi-veil-play { 105 | display: none; html.waiting & { display: flex; } 106 | justify-content: flex-end; 107 | align-items: center; 108 | box-sizing: border-box; 109 | position: absolute; 110 | z-index: $INVARIABLE__Veil-Play_ZIndex; 111 | @include offset(0); 112 | margin: 0; 113 | padding: 8px; 114 | @include size(100%); 115 | // @____Bibi:Dress__('-') background: $Veil-Play_BackgroundColor; &:hover { background-color: $Veil-Play_BackgroundColor__Hover; } 116 | cursor: pointer; 117 | transition: .2s ease-out; 118 | &:before { // Icon 119 | position: relative; 120 | z-index: 10; 121 | transition: .2s cubic-bezier(.2,.8,.8,1.6); 122 | // @____Bibi:Dress__('-') @include Veil-Play-Icon(); 123 | } 124 | &, 125 | html.appearance-ttb & { // ↓ 126 | flex-direction: column; 127 | &:before { transform: translateY( 0 ) scale(1.0) rotate( 90deg); } 128 | &:hover:before { transform: translateY( -5%) scale(1.1) rotate( 90deg); } 129 | &:active:before { transform: translateY( 10%) scale(1.1) rotate( 90deg); } 130 | } 131 | html.appearance-rtl & { // ← 132 | flex-direction: row-reverse; 133 | &:before { transform: translateX( 0 ) scale(1.0) rotate(180deg); } 134 | &:hover:before { transform: translateX( 5%) scale(1.1) rotate(180deg); } 135 | &:active:before { transform: translateX(-10%) scale(1.1) rotate(180deg); } 136 | } 137 | html.appearance-ltr & { // → 138 | flex-direction: row; 139 | &:before { transform: translateX( 0 ) scale(1.0) rotate( 0 ); } 140 | &:hover:before { transform: translateX( -5%) scale(1.1) rotate( 0 ); } 141 | &:active:before { transform: translateX( 10%) scale(1.1) rotate( 0 ); } 142 | } 143 | } 144 | 145 | 146 | // - Cover 147 | // -------------------------------------------------------------------------------- 148 | 149 | div#bibi-veil-cover { 150 | $SCOPED__CenterLine: 59%; 151 | & { 152 | overflow: hidden; 153 | position: absolute; 154 | z-index: $INVARIABLE__Veil-Cover_ZIndex; 155 | @include offset(auto, 0, 0); 156 | box-sizing: border-box; 157 | border: solid transparent; 158 | // @____Bibi:Dress__('-') border-width: $Veil-Cover-Image_Margin; 159 | width: 100%; 160 | opacity: 0; 161 | transition: opacity 0.5s linear; 162 | background: transparent no-repeat center center; 163 | background-size: contain; 164 | } 165 | html.book-full-height & { height: 100%; } 166 | // @____Bibi:Dress__('-') html:not(.book-full-height) & { height: calc(100% - #{ $Menu_Height }); } 167 | &.with-cover-image, 168 | &.without-cover-image { 169 | opacity: 1; 170 | } 171 | &.with-cover-image { 172 | p { opacity: 0; } 173 | } 174 | &.without-cover-image { 175 | .book-icon, 176 | p { 177 | margin: 0 auto; 178 | } 179 | .book-icon { 180 | // @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Veil-Cover-Icon_Size__WithoutCoverImage, $Veil-Cover-Icon_OuterColor__WithoutCoverImage, $Veil-Cover-Icon_InnerColor__WithoutCoverImage, absolute); 181 | position: absolute; 182 | left: 0; right: 0; 183 | bottom: 100% - $SCOPED__CenterLine; 184 | z-index: 1; 185 | } 186 | p { 187 | position: absolute; 188 | z-index: 2; 189 | @include offset($SCOPED__CenterLine, 0, auto); 190 | @include size(100%, 4em); 191 | line-height: 1.2; 192 | font-size: 14px; 193 | // @____Bibi:Dress__('-') color: $Veil-Cover-P_Color__WithoutCoverImage; 194 | text-align: center; 195 | > strong, > em, > small, > span { display: block; } 196 | > strong { margin-top: 1.00em; font-size: 1em * 18/14; font-weight: bold; } 197 | > em { margin-top: 0.75em; font-size: 1em * 14/14; } 198 | > small { margin-top: 0.75em; font-size: 1em * 12/14; } 199 | > span { margin-top: 0.75em; font-size: 1em * 12/14; } 200 | } 201 | } 202 | &.without-cover-image.waiting-for-unzipping { 203 | .book-icon { opacity: .75; } 204 | p { 205 | } 206 | } 207 | } -------------------------------------------------------------------------------- /__src/bibi/extensions/extractor/at-once.js: -------------------------------------------------------------------------------- 1 | import JSZip from 'jszip/dist/jszip.min.js'; 2 | import JSZipUtils from 'jszip-utils/dist/jszip-utils.min.js'; 3 | 4 | Bibi.x({ 5 | 6 | id: 'Extractor_at-once', 7 | description: 'Utilities for Zipped Books. (Method: at-once)', 8 | author: 'Satoru Matsushima (@satorumurmur)', 9 | version: '1.2.0' 10 | 11 | })(function() { 12 | 13 | 'use strict'; 14 | 15 | O.loadZippedBookData = (BookData) => new Promise(resolve => { 16 | if(S['autostart']) return resolve(BookData); 17 | I.Veil.Cover.Info.innerHTML = [ 18 | `${ O.Touch ? 'Tap' : 'Click' } to Open`, 19 | `${ B.Path.replace(/.*?([^\/]+)$/, '$1') }` 20 | ].join(' '); 21 | I.Veil.Cover.classList.add('without-cover-image', 'waiting-for-unzipping'); 22 | I.Veil.Cover.appendChild(I.getBookIcon()); 23 | L.wait().then(() => resolve(BookData)); 24 | }) 25 | .then(load) 26 | .then(extract); 27 | 28 | const load = (BookData) => new Promise((resolve, reject) => // resolve(ArrayBuffer) 29 | typeof BookData == 'string' ? JSZipUtils.getBinaryContent(BookData, (Err, ABuf) => Err ? reject(Bibi.ErrorMessages.NotFound) : resolve(ABuf)) : 30 | BookData.size && BookData.type ? (() => { const FR = new FileReader(); FR.onerror = () => reject(Bibi.ErrorMessages.DataInvalid); FR.onload = () => resolve(FR.result); FR.readAsArrayBuffer(BookData); })() : 31 | reject(Bibi.ErrorMessages.DataInvalid) 32 | ).then(ArrayBuffer => JSZip.loadAsync(ArrayBuffer).catch(Err => Promise.reject(Bibi.ErrorMessages.DataInvalid))); 33 | 34 | const extract = (BookDataArchive) => new Promise((resolve, reject) => { 35 | if(I.Catcher.Input) I.Catcher.style.opacity = 0; 36 | const FilesToBeExtract = []; 37 | for(let FileName in BookDataArchive.files) { 38 | if( 39 | BookDataArchive.files[FileName].dir || 40 | /(^|\/)\./.test(FileName) || 41 | /\.(db|php|p[lm]|cgi|r[bu])(\/|$)/i.test(FileName) || 42 | /^mimetype$/i.test(FileName) || 43 | !BookDataArchive.files[FileName]._data.compressedContent 44 | ) { 45 | delete BookDataArchive.files[FileName]; 46 | continue; 47 | } 48 | FilesToBeExtract.push(FileName); 49 | } 50 | if(!FilesToBeExtract.length) return reject(Bibi.ErrorMessages.DataInvalid); 51 | let FolderName = '', FolderNameRE = undefined; 52 | const PathsToBeChecked = []; 53 | if(B.Type != 'Zine') PathsToBeChecked.push(B.Container.Source.Path); // EPUB or unknown. 54 | if(B.Type != 'EPUB') PathsToBeChecked.push( B.ZineData.Source.Path); // Zine or unknown. 55 | if(!PathsToBeChecked.filter(PathToBeChecked => FilesToBeExtract.includes(PathToBeChecked)).length) { 56 | PathsToBeChecked.forEach(PathToBeChecked => { 57 | if(!PathToBeChecked) return; 58 | if(FolderName) return; 59 | const RE = new RegExp('^(.+?\\/)' + PathToBeChecked.replace(/\//g, '\\/').replace(/\./g, '\\.') + '$'); 60 | for(let l = FilesToBeExtract.length, i = 0; i < l; i++) { 61 | const FileName = FilesToBeExtract[i]; 62 | if(RE.test(FileName)) { 63 | FolderName = FileName.replace(RE, '$1'); 64 | FolderNameRE = new RegExp('^' + FolderName.replace(/\//g, '\\/').replace(/\./g, '\\.')); 65 | break; 66 | } 67 | } 68 | }); 69 | } 70 | let RootFileFound = false; 71 | if(B.Type) RootFileFound = FilesToBeExtract.includes(FolderName + PathsToBeChecked[0]); 72 | else if(FilesToBeExtract.includes(FolderName + B.Container.Source.Path)) B.Type = 'EPUB', RootFileFound = true; 73 | else if(FilesToBeExtract.includes(FolderName + B.ZineData.Source.Path)) B.Type = 'Zine', RootFileFound = true; 74 | if(!RootFileFound) return reject(`${ B.Type ? (B.Type == 'EPUB' ? B.Container.Source.Path : B.ZineData.Source.Path).split('/').slice(-1)[0] : '' } Not Contained`); 75 | const FileCount = { Particular: 0 }; 76 | const FileTypesToBeCounted = { 77 | 'Meta XML': 'xml|opf|ncx', 78 | 'Meta YAML': 'ya?ml', 79 | 'HTML': 'html?|xht(ml?)?', 80 | 'SMIL': 'smil?', 81 | 'PLS': 'pls', 82 | 'CSS': 'css', 83 | 'JavaScript': 'js', 84 | 'JSON': 'json', 85 | 'SVG': 'svg', 86 | 'Bitmap': 'gif|jpe?g|png', 87 | 'Font': 'woff2?|otf|ttf', 88 | 'Audio': 'aac|m4a|mp3|ogg', 89 | 'Video': 'mp4|m4v|webm|ogv', 90 | 'PDF': 'pdf', 91 | 'Markdown': 'md', 92 | 'PlainText': 'txt' 93 | }; 94 | O.log(`Extracting Book Data...`, ''); 95 | const Promises = []; 96 | FilesToBeExtract.forEach(FileName => { 97 | if(FolderNameRE) FileName = FileName.replace(FolderNameRE, ''); 98 | const IsBin = O.isBin({ Path: FileName }); 99 | Promises.push( 100 | BookDataArchive.file(FolderName + FileName).async(IsBin ? 'blob' : 'string').then(FileContent => { 101 | B.Package.Manifest[FileName] = IsBin ? 102 | { Path: FileName, DataType: 'Blob', Content: FileContent } : 103 | { Path: FileName, DataType: 'Text', Content: FileContent.trim() }; 104 | for(const FileType in FileTypesToBeCounted) { 105 | if(new RegExp('\\.(' + FileTypesToBeCounted[FileType] + ')$', 'i').test(FileName)) { 106 | if(!FileCount[FileType]) FileCount[FileType] = 1; else FileCount[FileType]++; 107 | FileCount.Particular++; 108 | break; 109 | } 110 | } 111 | }) 112 | ); 113 | }); 114 | Promise.all(Promises).then(() => { 115 | const Total = Promises.length; 116 | for(const FileType in FileTypesToBeCounted) { 117 | const Count = FileCount[FileType]; 118 | if(Count) O.log(`${ Count } ${ FileType }${ Count > 1 ? 's' : '' }`); 119 | } 120 | if(FileCount.Particular < Total) { 121 | const Count_Others = Total - FileCount.Particular; 122 | O.log(`${ Count_Others } ${ Count_Others > 1 ? 'Others' : 'Another' }`); 123 | } 124 | O.log(`Extracted. (${ Total } File${ Total > 1 ? 's' : '' })`, ''); 125 | resolve(); 126 | }); 127 | }); 128 | 129 | }); 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-patterns/_slider.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Slider 3 | // -------------------------------------------------------------------------------- 4 | 5 | div#bibi-slider { 6 | & { 7 | box-shadow: $Slider_BoxShadow; 8 | &:after { 9 | border-color: $Slider_BorderColor; 10 | background: $Slider_Background; 11 | } 12 | &, &:after { transition: $Slider_Transition__Close; } 13 | } 14 | html.slider-opened & { 15 | box-shadow: $Slider_BoxShadow__SliderOpened; 16 | &:after { background: $Slider_Background__SliderOpened; } 17 | &, &:after { transition: $Slider_Transition__Open; } 18 | } 19 | html.slider-opened.appearance-horizontal & { 20 | height: $Slider_Size !important; 21 | &:after { border-top-color: $Slider_BorderColor__SliderOpened; } 22 | } 23 | html.slider-opened.appearance-vertical & { 24 | width: $Slider_Size !important; 25 | &:after { border-left-color: $Slider_BorderColor__SliderOpened; } 26 | } 27 | } 28 | 29 | 30 | // - . History 31 | // -------------------------------------------------------------------------------- 32 | 33 | div#bibi-slider-history { 34 | html:not(.slider-opened) & { transition: $Slider_Transition__Close; } 35 | html.slider-opened & { transition: $Slider_Transition__Open; } 36 | .bibi-buttongroup { // ul 37 | .bibi-buttonbox { // li 38 | .bibi-button#bibi-slider-history-button { 39 | @include size($Slider-History-Button-Icon_Size); 40 | html.appearance-vertical & { top: $Slider-History-Button-Icon_Margin; } 41 | html.appearance-ltr & { left: $Slider-History-Button-Icon_Margin; } 42 | html.appearance-rtl & { right: $Slider-History-Button-Icon_Margin; } 43 | } 44 | } 45 | } 46 | } 47 | 48 | 49 | // - . Thumb 50 | // -------------------------------------------------------------------------------- 51 | 52 | div#bibi-slider-thumb { 53 | &:before, 54 | &:after { 55 | html.slider-opened & { transition: $Slider_Transition__Open; } 56 | html:not(.slider-opened) & { transition: $Slider_Transition__Close; } 57 | } 58 | &:before { background: $Slider-Thumb_BackgroundColor; } 59 | html:not(.slider-opened):not(.touch) &:hover:before { background-color: $Slider-Thumb_BackgroundColor__Hover; } 60 | html:not(.slider-opened):not(.touch) &:active:before { background-color: $Slider-Thumb_BackgroundColor__Active; } 61 | &:after { 62 | @include offset($Slider-Thumb_Size__SliderOpened * -1); 63 | @include min-size($Slider-Thumb_Size__SliderOpened); 64 | html.appearance-horizontal & { @include size(100%, $Slider-Thumb_Size__SliderOpened); } 65 | html.appearance-vertical & { @include size($Slider-Thumb_Size__SliderOpened, 100%); } 66 | border-radius: $Slider-Thumb_Size__SliderOpened * .5; 67 | border: $Slider-Thumb_Border__SliderOpened; 68 | background: $Slider-Thumb_BackgroundColor__SliderOpened; 69 | box-shadow: 0 0 0 $Slider-Thumb-Halo_Width__SliderOpened $Slider-Thumb-Halo_Color__SliderOpened; 70 | } 71 | &.min:after { 72 | border: $Slider-Thumb_Border__SliderOpened__Min; 73 | background: $Slider-Thumb_BackgroundColor__SliderOpened__Min; 74 | } 75 | } 76 | 77 | 78 | // - . Rail 79 | // -------------------------------------------------------------------------------- 80 | 81 | div#bibi-slider-rail { 82 | & { 83 | background: $Slider-Rail-FullLength_Color__SliderOpened; 84 | } 85 | html.slider-opened.appearance-horizontal & { height: $Slider-Rail-FullLength_Width__SliderOpened; } 86 | html.slider-opened.appearance-vertical & { width: $Slider-Rail-FullLength_Width__SliderOpened; } 87 | div#bibi-slider:hover & { background: $Slider-Rail-FullLength_Color__SliderOpened__Hover; } 88 | } 89 | 90 | div#bibi-slider-rail-groove { 91 | & { 92 | background: $Slider-Rail-Groove_Color__SliderOpened; 93 | } 94 | html.slider-opened.appearance-horizontal & { height: $Slider-Rail-Groove_Width__SliderOpened; } 95 | html.slider-opened.appearance-vertical & { width: $Slider-Rail-Groove_Width__SliderOpened; } 96 | div#bibi-slider:hover & { background: $Slider-Rail-Groove_Color__SliderOpened__Hover; } 97 | } 98 | 99 | div#bibi-slider-rail-progress { 100 | & { 101 | background: $Slider-Rail-Progress_Color__SliderOpened; 102 | } 103 | html.slider-opened.appearance-horizontal & { height: $Slider-Rail-Progress_Width__SliderOpened; } 104 | html.slider-opened.appearance-vertical & { width: $Slider-Rail-Progress_Width__SliderOpened; } 105 | html.slider-opened.appearance-ltr & { border-radius: 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5) 0; } 106 | html.slider-opened.appearance-rtl & { border-radius: ($Slider-Rail-Progress_Width__SliderOpened * .5) 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5); } 107 | html.slider-opened.appearance-ttb & { border-radius: 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5); } 108 | div#bibi-slider:hover & { background: $Slider-Rail-Progress_Color__SliderOpened__Hover; } 109 | } 110 | 111 | 112 | // - Edgebar Box 113 | // -------------------------------------------------------------------------------- 114 | 115 | div#bibi-slider-edgebar-box { 116 | & { 117 | html.slider-opened.appearance-horizontal & { 118 | top: 1px + $Slider_PaddingStart__SliderOpened; 119 | height: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened }); 120 | } 121 | html.slider-opened.appearance-vertical & { 122 | left: 1px + $Slider_PaddingStart__SliderOpened; 123 | width: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened }); 124 | } 125 | } 126 | div#bibi-slider:not(.bibi-slider-with-history) & { 127 | html.slider-opened.appearance-horizontal & { 128 | width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened }); 129 | } 130 | html.slider-opened.appearance-ltr & { 131 | left: $Slider_PaddingBefore__SliderOpened; 132 | } 133 | html.slider-opened.appearance-rtl & { 134 | right: $Slider_PaddingBefore__SliderOpened; 135 | } 136 | html.slider-opened.appearance-vertical & { 137 | top: $Slider_PaddingBefore__SliderOpened; 138 | height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened }); 139 | } 140 | } 141 | div#bibi-slider.bibi-slider-with-history & { 142 | html.slider-opened.appearance-horizontal & { 143 | width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened }); 144 | } 145 | html.slider-opened.appearance-ltr & { 146 | left: $Slider_PaddingBefore__SliderOpened__WithHistory; 147 | } 148 | html.slider-opened.appearance-rtl & { 149 | right: $Slider_PaddingBefore__SliderOpened__WithHistory; 150 | } 151 | html.slider-opened.appearance-vertical & { 152 | top: $Slider_PaddingBefore__SliderOpened__WithHistory; 153 | height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened }); 154 | } 155 | } 156 | } 157 | 158 | 159 | // - Edgebar 160 | // -------------------------------------------------------------------------------- 161 | 162 | div#bibi-slider-edgebar { 163 | border-radius: $Slider-Edgebar_BorderRadius; 164 | background: $Slider-Edgebar_Background; 165 | } -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_main.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Main 3 | // -------------------------------------------------------------------------------- 4 | 5 | main#bibi-main { 6 | & { 7 | overflow: hidden; 8 | -webkit-overflow-scrolling: touch; 9 | //box-sizing: border-box; 10 | //padding: 35px 0; 11 | //transition: .2s ease-out; 12 | position: absolute; 13 | z-index: $INVARIABLE__Main_ZIndex; 14 | //@include offset(-100vh, -100vw); 15 | //margin: auto; 16 | width: 100%; 17 | background: transparent; 18 | transition: 19 | transform .1s ease/*, 20 | opacity .15s ease, 21 | filter .15s ease*/; 22 | transform-origin: 50% 50%; 23 | will-change: scroll-position, padding, transform/*, opacity, filter*/; 24 | } 25 | html.book-full-height & { 26 | height: 100%; 27 | } 28 | html.view-paged & { 29 | overflow: hidden; 30 | } 31 | html.view-horizontal & { 32 | overflow-x: scroll; 33 | overflow-y: hidden; 34 | } 35 | html.view-vertical & { 36 | overflow-x: hidden; 37 | overflow-y: scroll; 38 | } 39 | html.appearance-horizontal & { 40 | @include offset(0, -100%, auto, -100%); 41 | //margin: 0 auto; 42 | //@include offset(-100%); 43 | margin: auto; 44 | } 45 | html.appearance-horizontal:not(.book-full-height) & { 46 | // @____Bibi:Dress__('-') top: $Menu_Height; 47 | // @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height}); 48 | } 49 | html.appearance-vertical & { 50 | @include offset(-100%, auto, -100%, 0); 51 | //margin: auto 0; 52 | //@include offset(-100%); 53 | margin: auto; 54 | } 55 | html.appearance-vertical:not(.book-full-height) & { 56 | // @____Bibi:Dress__('-') padding-top: $Menu_Height; 57 | // @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height}); 58 | } 59 | html.laying-out & { 60 | //opacity: 0; 61 | } 62 | html.busy &/*, 63 | html.shade-visible &*/ { 64 | //opacity: 0.25; 65 | //filter: blur(2px); 66 | }/* 67 | html.panel-opened & { 68 | opacity: 0.75; 69 | }*/ 70 | html.slider-opened & { 71 | }/* 72 | html.page-ltr.flipping-ahead &, 73 | html.page-rtl.flipping-astern & { 74 | transform: translateX(-100px); 75 | opacity: 0; 76 | } 77 | html.page-ltr.flipping-astern &, 78 | html.page-rtl.flipping-ahead & { 79 | transform: translateX(100px); 80 | opacity: 0; 81 | }*/ 82 | html.subpanel-opened & { 83 | // @____Bibi:Dress__('-') @include Main__SubpanelOpened(); 84 | } 85 | } 86 | 87 | div#bibi-main-book { 88 | box-sizing: content-box;//box-sizing: border-box; 89 | display: flex; 90 | flex-wrap: nowrap; 91 | justify-content: space-between; 92 | //align-items: center; 93 | position: relative; 94 | z-index: $INVARIABLE__Main-Book_ZIndex; 95 | @include size(100%); 96 | transition: 97 | transform 0.5s ease-in-out, 98 | opacity .15s ease; 99 | will-change: width, height, opacity; 100 | html.spread-ltr & { flex-direction: row; } 101 | html.spread-rtl & { flex-direction: row-reverse; } 102 | html.spread-ttb & { flex-direction: column; } 103 | html.resizing &, 104 | html.changing-view & { 105 | visibility: hidden; 106 | } 107 | html.subpanel-opened & { 108 | // @____Bibi:Dress__('-') @include Main-Book__SubpanelOpened(); 109 | } 110 | } 111 | div.spread-box { 112 | box-sizing: border-box; 113 | flex-shrink: 0; 114 | position: relative; 115 | html.spread-horizontal & { height: 100%; } 116 | html.spread-vertical & { width: 100%; } 117 | html.book-pre-paginated.view-paged.spread-horizontal & { min-width: 100vw; } 118 | html.view-paged.spread-vertical & { min-height: 100vh; } // TO BE OVERWRITTEN (if Scrollbars have height) 119 | //html.spread-horizontal &:not(.reflowable).spreaded { min-width: 100vw; } 120 | //html.spread-horizontal &:not(.reflowable):not(.spreaded) { min-width: 144vw; } 121 | html.view-paged.book-pre-paginated:not(.slider-sliding):not(.slider-opened) &:not(.current) { 122 | //opacity: 0; transition: opacity .1s linear; will-change: opacity; // <- too heavy 123 | //visibility: hidden; 124 | } 125 | html.view-paged.book-pre-paginated:not(.slider-sliding).slider-opened &:not(.current) { 126 | //opacity: .33; 127 | } 128 | } 129 | div.spread { 130 | & { 131 | box-sizing: border-box; 132 | overflow: hidden; 133 | position: absolute; 134 | @include offset(0); 135 | margin: auto; 136 | display: flex; 137 | flex-wrap: nowrap; 138 | justify-content: flex-start; 139 | align-items: center; 140 | } 141 | html.page-ltr & { flex-direction: row; } 142 | html.page-rtl & { flex-direction: row-reverse; } 143 | html.view-vertical div.spread-box:not(.spreaded) & { flex-direction: column; } 144 | div.spread-box.single-item-spread-after & { justify-content: flex-end; } 145 | div.spread-box.single-item-spread-center & { justify-content: center; } 146 | div.spread-box.reflowable & { background: white; } 147 | } 148 | div.item-box { 149 | & { 150 | box-sizing: border-box; 151 | flex-shrink: 0; 152 | position: relative; 153 | overflow: hidden; 154 | background: white; 155 | } 156 | &.reflowable { 157 | display: flex; 158 | html.spread-ltr & { flex-direction: row; } 159 | html.spread-rtl & { flex-direction: row-reverse; } 160 | html.spread-ttb & { flex-direction: column; } 161 | flex-wrap: nowrap; 162 | justify-content: space-between; 163 | align-items: center; 164 | } 165 | html.book-pre-paginated & { 166 | &:after { 167 | content: ""; 168 | display: block; 169 | position: absolute; 170 | z-index: 1; 171 | @include offset(0); 172 | margin: auto; 173 | opacity: 0; 174 | transition: opacity 1s ease-in; 175 | } 176 | &:not(.placeholder):not(.loaded):after { 177 | opacity: 1; 178 | } 179 | } 180 | } 181 | iframe.item, 182 | span.page { 183 | & { 184 | box-sizing: content-box; 185 | display: block; 186 | } 187 | } 188 | iframe.item { 189 | & { 190 | //overflow: hidden; 191 | position: absolute; 192 | z-index: 10; 193 | @include offset(0); 194 | margin: 0; 195 | padding: 0; 196 | border: none 0; 197 | line-height: 1; 198 | vertical-align: top; 199 | background: transparent; 200 | html.zoomed-in & { will-change: transform; } 201 | html.transforming & { will-change: none !important; } 202 | transform-origin: 0 0; 203 | //html.page-ltr & { transform-origin: 0 0; } 204 | //html.page-rtl & { transform-origin: 100% 0; } 205 | //&.non-linear-item { display: none; } 206 | opacity: 1; 207 | div.item-box:not(.loaded) & { visibility: hidden; opacity: 0; } 208 | //html.book-pre-paginated.view-paged div.item-box.loaded:not(.current) & { opacity: .125; } 209 | div.spread-box.current & { transition: opacity .1s linear; } 210 | } 211 | } 212 | span.page { 213 | & { 214 | z-index: 1; 215 | @include size(100%); 216 | } 217 | div.item-box.reflowable & { 218 | position: relative; 219 | //flex-shrink: 0; 220 | } 221 | div.item-box.pre-paginated & { 222 | position: absolute; 223 | @include offset(0); 224 | } 225 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * (℠) 3 | * # Webpack Config for Bibi 4 | * 5 | */ 6 | 7 | 'use strict'; 8 | 9 | const Webpack = require('webpack'); 10 | const Path = require('path'), resolvePath = (..._) => Path.resolve(__dirname, _.join('/')); 11 | 12 | const Package = require('./package.json'); 13 | const Bibi = require('./bibi.info.js'); 14 | 15 | const HardSourcePlugin = require('hard-source-webpack-plugin'); 16 | const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); 17 | const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); 18 | const StringReplacePlugin = require('string-replace-webpack-plugin'); 19 | const TerserPlugin = require('terser-webpack-plugin'); 20 | const CopyPlugin = require('copy-webpack-plugin') 21 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 22 | 23 | const BrowsersList = ['last 1 version', 'ie 11']; 24 | 25 | const IsDev = (Bibi.Arguments['mode'] === 'development'); 26 | 27 | const Config = { 28 | mode: IsDev ? 'development' : 'production', 29 | stats: 'errors-warnings',//IsDev ? 'errors-warnings' : 'normal', 30 | performance: { maxEntrypointSize: 1000000, maxAssetSize: 1000000, hints: false }, 31 | optimization: { minimizer: [] }, 32 | output: { path: resolvePath(Bibi.ForPack ? Bibi.ARCHIVETMP : Bibi.DIST), filename: '[name].js' }, 33 | entry: (PathLists => { const Entries = {}; 34 | for(const SrcDir in PathLists) PathLists[SrcDir].forEach(P => Entries[P.replace(/\.js$/, '')] = resolvePath(SrcDir, P.replace(/\.css$/, '.scss'))); 35 | return Entries; 36 | })({ 37 | [Bibi.SRC]: [ 38 | 'bibi/and/jo.js', 39 | 'bibi/extensions/analytics.js', 40 | 'bibi/extensions/epubcfi.js', 41 | 'bibi/extensions/extractor/at-once.js', 42 | 'bibi/extensions/extractor/on-the-fly.js', 43 | 'bibi/extensions/sanitizer.js', 44 | 'bibi/extensions/unaccessibilizer.js', 45 | 'bibi/extensions/zine.js', 46 | 'bibi/resources/scripts/bibi.js', 47 | 'bibi/resources/scripts/polyfills/bundle.js', 48 | 'bibi/resources/scripts/polyfills/encoding.js', 49 | 'bibi/resources/scripts/polyfills/intersection-observer.js', 50 | 'bibi/resources/styles/bibi.css', 51 | 'bibi/resources/scripts/bibi.js', 52 | 'bibi-demo/embedding/index.css' 53 | ].concat(Bibi.Dresses['custom-made'].map(D => 'bibi/wardrobe/' + D + '/bibi.dress.css')), 54 | [Bibi.SRCBC]: !Bibi.WithBCK ? [] : [ 55 | 'bib/i.js' 56 | ] 57 | }), 58 | plugins: (PathLists => { const Patterns = []; 59 | for(const SrcDir in PathLists) if(PathLists[SrcDir].length) PathLists[SrcDir].forEach(P => Patterns.push({ context: resolvePath(SrcDir), from: P, to: '.' })); 60 | return [new CopyPlugin(Patterns)]; // for CopyWebpackPlugin v5.1.1 61 | // return [new CopyPlugin({ patterns: Patterns })]; // for CopyWebpackPlugin v6.x.x 62 | })({ 63 | [Bibi.SRC]: [ 64 | 'bibi/*.html', 65 | 'bibi/extensions/extractor/on-the-fly.bibi-zip-loader.worker.*', 66 | 'bibi/presets/**', 67 | 'bibi-bookshelf/__samples/**/*.epub', 68 | 'bibi-demo/**/*.html' 69 | ], 70 | [Bibi.SRCBC]: !Bibi.WithBCK ? [] : [ 71 | 'bib/i/*.html', 72 | 'README.BackCompatKit.md' 73 | ], 74 | '.': [ 75 | 'LICENSE', 76 | 'README.md' 77 | ] 78 | }).concat([ 79 | new FixStyleOnlyEntriesPlugin({ extensions: ['scss', 'css'] }), 80 | new MiniCSSExtractPlugin({ filename: '[name]' }), 81 | new BrowserSyncPlugin(require('./bs-config.js'), { reload: true, injectCss: true }), 82 | new StringReplacePlugin() 83 | ]), 84 | module: { rules: [{ 85 | test: /\.m?js$/, 86 | use: [ 87 | { loader: 'babel-loader', options: { 88 | babelrc: false, 89 | presets: [ 90 | ['@babel/preset-env', { 91 | targets: BrowsersList, 92 | useBuiltIns: false//, corejs: 3 93 | }] 94 | ] 95 | }} 96 | ] 97 | }, { 98 | include: [ 99 | resolvePath(Bibi.SRC, 'bibi/and/jo.js'), 100 | resolvePath(Bibi.SRC, 'bibi/resources/scripts/bibi.heart.js') 101 | ], 102 | use: [ 103 | StringReplacePlugin.replace({ replacements: [{ 104 | pattern: /____Bibi-Version____/ig, 105 | replacement: () => Bibi.version 106 | }]}) 107 | ] 108 | }]} 109 | }; 110 | 111 | { 112 | if(Bibi.Arguments['watch']) Config.watch = true; 113 | if(IsDev) Config.devtool = 'inline-source-map'; 114 | const getCommonLoadersForCSS = (Opt = {}) => [ 115 | { loader: 'css-loader', options: { 116 | url: Opt.url ? true : false, 117 | import: Opt.import ? true : false, 118 | sourceMap: IsDev, 119 | importLoaders: 2 120 | }}, 121 | { loader: 'postcss-loader', options: { 122 | config: { 123 | ctx: { 124 | 'postcss-cssnext': BrowsersList,//'autoprefixer': { grid: true }, 125 | 'cssnano': { zindex: false } 126 | } 127 | }, 128 | sourceMap: IsDev 129 | }}, 130 | { loader: 'sass-loader', options: { 131 | sourceMap: IsDev 132 | }} 133 | ]; 134 | Config.module.rules.push({ 135 | test: /\.scss$/, 136 | exclude: [ 137 | resolvePath(Bibi.SRC, 'bibi/and/jo.scss'), 138 | resolvePath(Bibi.SRC, 'bibi/resources/scripts/bibi.book.scss') 139 | ], 140 | use: [ 141 | MiniCSSExtractPlugin.loader, 142 | StringReplacePlugin.replace({ replacements: [{ 143 | pattern: IsDev ? null : /@charset \\"UTF-8\\";\\n?/ig, 144 | replacement: () => '' 145 | }]}) 146 | ].concat(getCommonLoadersForCSS({ url: true, import: true })) 147 | }); 148 | Config.module.rules.push({ 149 | include: [ 150 | resolvePath(Bibi.SRC, 'bibi/and/jo.scss'), 151 | resolvePath(Bibi.SRC, 'bibi/resources/scripts/bibi.book.scss') 152 | ], 153 | use: [ 154 | { loader: 'style-loader' } 155 | ].concat(getCommonLoadersForCSS({ url: true, import: true })) 156 | }); 157 | Config.module.rules.push({ 158 | test: /\.(eot|svg|ttf|otf|wof|woff|woff2)$/, 159 | include: [ 160 | resolvePath('node_modules/material-icons/iconfont/MaterialIcons-Regular') 161 | ], 162 | use: [ 163 | { loader: 'file-loader', options: { 164 | outputPath: 'bibi/resources/styles/fonts', 165 | publicPath: './fonts', 166 | name: '[name].[ext]' 167 | }} 168 | ] 169 | }); 170 | Config.module.rules.push({ 171 | test: /\.(gif|png|jpg|svg)$/, 172 | use: [ 173 | { loader: 'url-loader' } 174 | ] 175 | }); 176 | } 177 | 178 | if(IsDev) { 179 | Config.module.rules.push({ 180 | include: [ 181 | resolvePath(Bibi.SRC, 'bibi/resources/scripts/bibi.heart.js') 182 | ], 183 | use: [ 184 | StringReplacePlugin.replace({ replacements: [{ 185 | pattern: /$/, 186 | replacement: () => '\n' + `Bibi.Dev = true;` 187 | }]}) 188 | ] 189 | }); 190 | } else { 191 | for(const B in Bibi.Banners) if(B && Bibi.Banners[B]) Config.plugins.push(new Webpack.BannerPlugin({ test: B, banner: Bibi.Banners[B], raw: true })); 192 | Config.optimization.minimizer.push(new TerserPlugin({ 193 | cache: true, 194 | parallel: true, 195 | extractComments: false, 196 | terserOptions: { 197 | ecma: 5, 198 | compress: true, 199 | output: { 200 | comments: /^\!\n \*( +\(.+\))?\n \* +# +(?!sML)/, 201 | beautify: false 202 | } 203 | } 204 | })); 205 | } 206 | 207 | module.exports = Config; 208 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_subpanels.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Subpanel 3 | // -------------------------------------------------------------------------------- 4 | 5 | $Subpanel_KeyColor: saturate(steelblue, 20%); 6 | // [ja] └ Subpanel 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義） 7 | 8 | $Subpanel-Icon_Size: 21px; 9 | // [ja] └ Subpanel 内アイコン寸法（正方形の１辺） 10 | 11 | $Subpanel_Margin: 4px; 12 | $Subpanel_BorderRadius: 4px; 13 | $Subpanel_BackgroundColor: rgba(252,252,252, 0.96); 14 | $Subpanel_BoxShadow: rgba(black, 0.1) 0 2px 2px; 15 | $Subpanel_TransitionTimingFunction__Open: cubic-bezier(.2,.8,.8,1.1); 16 | $Subpanel_TransitionTimingFunction__Close: ease-out; 17 | 18 | 19 | // - Sub Panel :: Scrollbar 20 | // -------------------------------------------------------------------------------- 21 | 22 | $Subpanel-Scrollbar-Track_Size: 6px; 23 | $Subpanel-Scrollbar-Track_BackgroundColor: rgb(248,248,248); 24 | 25 | $Subpanel-Scrollbar-Thumb_Size: 2px; 26 | $Subpanel-Scrollbar-Thumb_BackgroundColor: rgb(195,195,195); 27 | $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover: rgb(125,125,125); 28 | $Subpanel-Scrollbar-Thumb_BackgroundColor__Active: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover; 29 | 30 | 31 | // - Sub Panel > Section 32 | // -------------------------------------------------------------------------------- 33 | 34 | $Subpanel-Section_VerticalMargin: 16px; 35 | 36 | $Subpanel-Heading_HorizontalPadding: 8px; 37 | $Subpanel-Heading_Color: rgb(64,64,64); 38 | 39 | $Subpanel-ButtonGroup_VerticalMargin: 6px; 40 | $Subpanel-ButtonGroup_BorderColor: rgba(black, 0.1); 41 | 42 | $Subpanel-Button_HorizontalPadding: 8px; 43 | $Subpanel-Button_Height: 38px; 44 | $Subpanel-Button-FontSize: 13px; 45 | 46 | $Subpanel-Button_Color: rgb(64,64,64); 47 | $Subpanel-Button-Check_Color: rgb(160,160,160); 48 | $Subpanel-Button_BorderColor: rgba(black, 0.1); 49 | $Subpanel-Button_BackgroundColor: white; 50 | 51 | $Subpanel-Button_Color__Active: $Subpanel-Button_Color; 52 | $Subpanel-Button-Check_Color__Active: $Subpanel_KeyColor; 53 | $Subpanel-Button_BorderColor__Active: $Subpanel-Button_BorderColor; 54 | $Subpanel-Button_BackgroundColor__Active: $Subpanel-Button_BackgroundColor; 55 | 56 | $Subpanel-Button_Color__Hover: $Subpanel_KeyColor; 57 | $Subpanel-Button-Check_Color__Hover: rgba($Subpanel_KeyColor, 0.8); 58 | $Subpanel-Button_BorderColor__Hover: rgba($Subpanel_KeyColor, 0.1); 59 | $Subpanel-Button_BackgroundColor__Hover: rgba(244,248,252, 0.8); 60 | 61 | $Subpanel-Icon_MarginRight: 6px; 62 | 63 | 64 | // - Sub Panel: Bookmarks 65 | // -------------------------------------------------------------------------------- 66 | 67 | $BookmarkSubpanel-Button_BackgroundColor__Hot: rgba(gold, .125); 68 | 69 | @mixin BookmarkSubpanel-Button-Label() { 70 | .bibi-bookmark-page { 71 | .bibi-bookmark-unit { 72 | font-size: .9em; 73 | } 74 | .bibi-bookmark-number { 75 | font-size: 1.1em; 76 | margin-left: .125em; 77 | } 78 | } 79 | .bibi-bookmark-total-pages { 80 | font-size: .8em; 81 | margin-left: .25em; 82 | opacity: .75; 83 | .bibi-bookmark-number { 84 | margin-left: .125em; 85 | } 86 | } 87 | .bibi-bookmark-percent { 88 | .bibi-bookmark-parenthesis { 89 | } 90 | .bibi-bookmark-number { 91 | } 92 | .bibi-bookmark-unit { 93 | font-size: .8em; 94 | } 95 | } 96 | .bibi-bookmark-total-pages + .bibi-bookmark-percent { 97 | font-size: .9em; 98 | margin-left: .125em; 99 | opacity: .75; 100 | .bibi-bookmark-parenthesis { 101 | } 102 | .bibi-bookmark-number { 103 | } 104 | .bibi-bookmark-unit { 105 | } 106 | } 107 | .bibi-bookmark-is-current { 108 | box-sizing: border-box; 109 | display: block; 110 | position: absolute; 111 | top: 0; right: $Subpanel-Button_Height; bottom: 0; left: 0; 112 | width: auto; 113 | height: $Subpanel-Button_Height; 114 | &:before { 115 | $LOCAL__Height: $Subpanel-Icon_Size * .9; 116 | content: " Current Page"; 117 | display: block; 118 | position: absolute; 119 | top: 0; right: 0; bottom: 0; left: auto; 120 | margin: auto; 121 | border-radius: $LOCAL__Height * 0.5; 122 | padding: 0 .75em; 123 | width: auto; 124 | height: $LOCAL__Height; 125 | line-height: $LOCAL__Height; 126 | font-size: .8em; 127 | font-weight: bold; 128 | color: $Subpanel_KeyColor; 129 | background: rgba($Subpanel_KeyColor, .125); 130 | } 131 | &.bibi-bookmark-is-current-ja:before { 132 | content: " 現在のページ"; 133 | } 134 | } 135 | } 136 | 137 | @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon() { 138 | @include GLOBAL__FontIcon_BaseStyles("Material Icons", $Subpanel-Icon_Size); 139 | content: "cancel"; 140 | position: absolute; 141 | top: 0; right: 0; bottom: 0; left: 0; 142 | margin: auto; 143 | width: $Subpanel-Icon_Size; 144 | height: $Subpanel-Icon_Size; 145 | color: rgba($Subpanel-Button_Color, .75); 146 | opacity: 1; 147 | } 148 | 149 | @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover() { 150 | color: rgba(255,64,0, .875); 151 | opacity: 1; 152 | } 153 | 154 | @mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark() { 155 | opacity: .25; 156 | } 157 | 158 | 159 | 160 | 161 | 162 | // ================================================================================ 163 | // + Icons in Subpanel 164 | // -------------------------------------------------------------------------------- 165 | 166 | 167 | // - Colors & Interaction 168 | // -------------------------------------------------------------------------------- 169 | 170 | // [In Subpanel] Default 171 | $Subpanel-Icon-Font_PaintColor: rgb(128,128,128); 172 | $Subpanel-Icon-Font_OutlineColor: transparent; 173 | $Subpanel-Icon-Shape_PaintColor: white; 174 | $Subpanel-Icon-Shape_OutlineColor: rgb(144,144,144); 175 | $Subpanel-Icon_BackgroundColor: rgb(248,248,248); 176 | $Subpanel-Icon_BorderColor: rgb(192,192,192); 177 | $Subpanel-Icon_Transform: none; 178 | 179 | // [In Subpanel] Default:Hover 180 | $Subpanel-Icon-Font_PaintColor__Hover: $Subpanel_KeyColor; 181 | $Subpanel-Icon-Font_OutlineColor__Hover: transparent; 182 | $Subpanel-Icon-Shape_PaintColor__Hover: white; 183 | $Subpanel-Icon-Shape_OutlineColor__Hover: $Subpanel_KeyColor; 184 | $Subpanel-Icon_BackgroundColor__Hover: lighten($Subpanel_KeyColor, 45%); 185 | $Subpanel-Icon_BorderColor__Hover: $Subpanel_KeyColor; 186 | $Subpanel-Icon_Transform__Hover: $Subpanel-Icon_Transform; 187 | 188 | // [In Subpanel] Active 189 | $Subpanel-Icon-Font_PaintColor__Active: white; 190 | $Subpanel-Icon-Font_OutlineColor__Active: transparent; 191 | $Subpanel-Icon-Shape_PaintColor__Active: white; 192 | $Subpanel-Icon-Shape_OutlineColor__Active: $Subpanel_KeyColor; 193 | $Subpanel-Icon_BackgroundColor__Active: $Subpanel_KeyColor; 194 | $Subpanel-Icon_BorderColor__Active: $Subpanel_KeyColor; 195 | $Subpanel-Icon_Transform__Active: rotate(360deg); 196 | 197 | // [In Subpanel] Active:Hover 198 | $Subpanel-Icon-Font_PaintColor__Active-Hover: white; 199 | $Subpanel-Icon-Font_OutlineColor__Active-Hover: transparent; 200 | $Subpanel-Icon-Shape_PaintColor__Active-Hover: white; 201 | $Subpanel-Icon-Shape_OutlineColor__Active-Hover: $Subpanel_KeyColor; 202 | $Subpanel-Icon_BackgroundColor__Active-Hover: lighten($Subpanel_KeyColor, 20%); 203 | $Subpanel-Icon_BorderColor__Active-Hover: $Subpanel_KeyColor; 204 | $Subpanel-Icon_Transform__Active-Hover: $Subpanel-Icon_Transform__Active; 205 | 206 | // [In Subpanel] Transition 207 | $Subpanel-Icon_Transition: 208 | color 0.125s linear, 209 | background-color 0.125s linear, 210 | border-color 0.125s linear, 211 | text-shadow 0.125s linear, 212 | box-shadow 0.125s linear, 213 | transform 0.25s ease 214 | ; 215 | 216 | // Disabled 217 | $Subpanel-Icon_Opacity__Disabled: 0.33; 218 | 219 | /* 220 | 221 |
222 |
223 |
224 |

{ Heading Text }

225 |
226 |
    227 |
  • 228 | 229 | 230 | 231 | 232 | { Button Text } 233 | 234 |
    • 235 |
  • 236 | 237 | 238 | 239 | 240 | { Button Text } 241 | 242 |
    • 243 |
244 |
245 |
246 |
    247 |
  • 248 | 249 | 250 | 251 | 252 | { Button Text } 253 | 254 |
    • 255 |
  • 256 | 257 | 258 | 259 | 260 | { Button Text } 261 | 262 |
    • 263 |
264 |
265 |
266 | 267 | */ -------------------------------------------------------------------------------- /__src/bibi/resources/styles/_panel.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + Panel 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | div#bibi-panel { 7 | box-sizing: border-box; 8 | overflow: hidden; 9 | z-index: $INVARIABLE__Panel_ZIndex; 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | @include size(100%); 14 | // @____Bibi:Dress__('-') background: $Panel_Background; 15 | opacity: 0; 16 | transition: 0.15s ease-out; 17 | transform: translateY(-100%); 18 | html.panel-opened & { 19 | transform: none; 20 | opacity: 1; 21 | transition: 0.15s ease-in; 22 | user-select: text; 23 | } 24 | &:before, 25 | &:after { 26 | content: ""; 27 | display: block; 28 | position: absolute; 29 | z-index: 99999999999; 30 | left: 0; right: 0; 31 | width: 100%; 32 | } 33 | &:before { 34 | top: 0; 35 | // @____Bibi:Dress__('-') height: $Menu_Height; 36 | // @____Bibi:Dress__('-') background: $Menu_BackgroundColor__PanelOpened; 37 | // @____Bibi:Dress__('-') html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__PanelOpened; } 38 | } 39 | &:after { 40 | bottom: 0; 41 | // @____Bibi:Dress__('-') height: $PoweredBy_Height; 42 | // @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__PanelOpened; 43 | } 44 | } 45 | 46 | 47 | // - BookInfo 48 | // -------------------------------------------------------------------------------- 49 | 50 | div#bibi-panel-bookinfo { 51 | box-sizing: border-box; 52 | position: relative; 53 | // @____Bibi:Dress__('-') margin-top: $Menu_Height; 54 | // @____Bibi:Dress__('-') margin-bottom: $PoweredBy_Height; 55 | // @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height + $PoweredBy_Height}); 56 | width: 100%; 57 | -webkit-overflow-scrolling: touch; 58 | html.nav-ttb & { 59 | overflow-x: hidden; 60 | overflow-y: auto; 61 | @include writing-mode(horizontal-tb); 62 | // @____Bibi:Dress__('-') padding: $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter $Panel_PaddingStart; 63 | } 64 | html.nav-rtl & { 65 | overflow-x: auto; 66 | overflow-y: hidden; 67 | @include writing-mode(vertical-rl); 68 | // @____Bibi:Dress__('-') padding: $Panel_PaddingStart $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter; 69 | } 70 | } 71 | 72 | 73 | // . Navigation 74 | // -------------------------------------------------------------------------------- 75 | 76 | div#bibi-panel-bookinfo-navigation { 77 | box-sizing: border-box; 78 | html.nav-ttb & { 79 | >*:first-child, 80 | >*:first-child >*:first-child, 81 | >*:first-child >*:first-child >*:first-child { 82 | margin-top: 0 !important; 83 | } 84 | } 85 | html.nav-rtl & { 86 | >*:first-child, 87 | >*:first-child >*:first-child, 88 | >*:first-child >*:first-child >*:first-child { 89 | margin-right: 0 !important; 90 | } 91 | span.tcy { 92 | @include text-combine-upright_all(); 93 | } 94 | } 95 | nav { 96 | $SCOPED__MarginBefore: 2em; 97 | $SCOPED__MarginAfter: 1em; 98 | line-height: 1.2; 99 | font-size: 20px; 100 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 101 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 102 | h1, h2, h3, h4, h5, h6 { 103 | $SCOPED__MarginBefore: 0; 104 | $SCOPED__MarginAfter: 1em; 105 | font-weight: bold; 106 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 107 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 108 | } 109 | small { 110 | font-size: .8em; 111 | } 112 | br + small { 113 | $SCOPED__MarginStart: 2em; 114 | html.nav-ttb & { margin: 0 0 0 $SCOPED__MarginStart; } 115 | html.nav-rtl & { margin: $SCOPED__MarginStart 0 0 0; } 116 | } 117 | ul, ol { 118 | $SCOPED__MarginBefore: 0; 119 | $SCOPED__MarginAfter: 1em; 120 | font-size: .9em; 121 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 122 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 123 | li { 124 | $SCOPED__MarginBefore: 1em; 125 | $SCOPED__MarginAfter: 0; 126 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 127 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 128 | ul, ol { 129 | position: relative; 130 | $SCOPED__MarginBefore: 0; 131 | $SCOPED__MarginAfter: 0; 132 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 133 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 134 | &:before { 135 | content: ""; 136 | display: block; 137 | position: absolute; 138 | $SCOPED__OffsetStart: .175em; 139 | $SCOPED__OffsetBefore: 0; 140 | $SCOPED__Breadth: 4px; 141 | $SCOPED__Length: 100%; 142 | background: white; 143 | html.nav-ttb & { left: $SCOPED__OffsetStart; top: $SCOPED__OffsetBefore; @include size($SCOPED__Breadth, $SCOPED__Length); } 144 | html.nav-rtl & { top: $SCOPED__OffsetStart; right: $SCOPED__OffsetBefore; @include size($SCOPED__Length, $SCOPED__Breadth); } 145 | } 146 | li { 147 | $SCOPED__MarginBefore: .5em; 148 | $SCOPED__MarginAfter: 0; 149 | $SCOPED__MarginStart: 1em; 150 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter $SCOPED__MarginStart; } 151 | html.nav-rtl & { margin: $SCOPED__MarginStart $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 152 | } 153 | } 154 | } 155 | } 156 | a { 157 | border-style: solid; 158 | border-width: 0; 159 | // @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor; 160 | html.nav-ttb & { border-bottom-width: 1px; padding-bottom: .1em; } 161 | html.nav-rtl & { border-right-width: 1px; padding-right: .1em; } 162 | // @____Bibi:Dress__('-') color: $Panel-Nav-A_Color; 163 | text-decoration: none; 164 | transition: linear .15s; 165 | &:hover { 166 | // @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor__Hover; 167 | // @____Bibi:Dress__('-') color: $Panel-Nav-A_Color__Hover; 168 | transition: none; 169 | } 170 | &.bibi-bookinfo-inactive-link { 171 | color: inherit !important; 172 | border: none 0 !important; 173 | cursor: default !important; 174 | &:hover { 175 | color: inherit !important; 176 | } 177 | } 178 | } 179 | } 180 | nav.bibi-nav-landmarks, 181 | nav.bibi-nav-page-list { 182 | font-size: 16px; 183 | h1, h2, h3, h4, h5, h6 { 184 | $SCOPED__MarginBefore: 0; 185 | $SCOPED__MarginAfter: .25em; 186 | html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; } 187 | html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; } 188 | } 189 | ul, ol { 190 | overflow: hidden; 191 | $SCOPED__PaddingAfter: .25em; 192 | html.nav-ttb & { padding: 0 0 $SCOPED__PaddingAfter 0; } 193 | html.nav-rtl & { padding: 0 0 0 $SCOPED__PaddingAfter; } 194 | li { 195 | float: left; 196 | $SCOPED__PaddingEnd: 1em; 197 | html.nav-ttb & { padding: 0 $SCOPED__PaddingEnd 0 0; &:last-child { padding: 0; } } 198 | html.nav-rtl & { padding: 0 0 $SCOPED__PaddingEnd 0; &:last-child { padding: 0; } } 199 | } 200 | } 201 | } 202 | } 203 | 204 | 205 | // . Cover 206 | // -------------------------------------------------------------------------------- 207 | 208 | div#bibi-panel-bookinfo-cover { 209 | & { 210 | //box-sizing: border-box; 211 | border-style: solid; 212 | border-width: 0; 213 | // @____Bibi:Dress__('-') border-color: $Panel-Cover_BorderColor; 214 | @include writing-mode(horizontal-tb); 215 | img { 216 | display: block; 217 | margin-bottom: .75em; 218 | max-width: 100%; 219 | // @____Bibi:Dress__('-') max-height: calc(#{ 100vh * 0.6 } - #{ ($Menu_Height + $Panel_PaddingBefore + $Panel_PaddingAfter + $PoweredBy_Height) * 0.6 }); 220 | } 221 | p#bibi-panel-bookinfo-cover-info { 222 | // @____Bibi:Dress__('-') color: $Panel-Cover-Info_Color; 223 | > strong, > em, > span { 224 | display: block; 225 | line-height: 1.2; 226 | margin: 0 0 .5rem 0; 227 | span { 228 | //display: inline-block; 229 | } 230 | } 231 | > strong { 232 | font-size: 16px; 233 | font-weight: bold; 234 | } 235 | > em { 236 | font-size: 14px; 237 | } 238 | > span { 239 | font-size: 12px; 240 | } 241 | } 242 | } 243 | html.nav-ttb & { 244 | // @____Bibi:Dress__('-') margin-top: $Panel-Cover_MarginBefore; 245 | // @____Bibi:Dress__('-') padding-top: $Panel-Cover_PaddingBefore; 246 | border-top-width: 1px; 247 | // @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingStart + $Panel_PaddingEnd}); 248 | p#bibi-panel-bookinfo-cover-info { 249 | text-align: left; 250 | } 251 | } 252 | html.nav-rtl & { 253 | // @____Bibi:Dress__('-') margin-right: $Panel-Cover_MarginBefore; 254 | // @____Bibi:Dress__('-') padding-right: $Panel-Cover_PaddingBefore; 255 | border-right-width: 1px; 256 | // @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingAfter * 2}); 257 | height: 100%; 258 | img { 259 | @include margin-h(auto); 260 | } 261 | p#bibi-panel-bookinfo-cover-info { 262 | text-align: center; 263 | } 264 | } 265 | &.without-cover-image { 266 | .book-icon { 267 | // @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Panel-Cover-Icon_Size__WithoutCoverImage, $Panel-Cover-Icon_OuterColor__WithoutCoverImage, $Panel-Cover-Icon_InnerColor__WithoutCoverImage, relative); 268 | margin-bottom: .75em; 269 | } 270 | } 271 | html.nav-rtl &.without-cover-image { 272 | .book-icon { 273 | margin-left: auto; 274 | margin-right: auto; 275 | } 276 | } 277 | } -------------------------------------------------------------------------------- /__src/bibi/and/jo.js: -------------------------------------------------------------------------------- 1 | (() => { 'use strict'; if(window['bibi:jo']) return; 2 | 3 | 4 | 5 | 6 | const Jo = window['bibi:jo'] = { 'version': '____Bibi-Version____', 7 | CSS: require('./jo.scss'), 8 | Status: '', 9 | Bibis: [], 10 | TrustworthyOrigins: [location.origin], 11 | Loaded: 0, 12 | }; 13 | 14 | const BibiEventRE = /^bibi:[a-z][a-z:_\-]*$/; 15 | 16 | 17 | 18 | 19 | Jo.Bibi = function() { return Jo.callBibi.apply(Jo, arguments); }; 20 | 21 | Jo.callBibi = (Love) => { 22 | let Anchor = null, Frame = null, Receiver = null, ToReceive = []; 23 | try { 24 | if(!(Love instanceof HTMLElement)) { 25 | if(Love && typeof Love == 'object') { 26 | if(!Love['bibi-href']) return null; 27 | Anchor = Jo.create('a', { href: Love['bibi-href'] }); 28 | Frame = Jo.create('iframe'); 29 | Receiver = Frame; 30 | } 31 | if(Love['bibi-receive'] instanceof Array) ToReceive = Love['bibi-receive']; 32 | } else { 33 | if(/^iframe$/i.test(Love.tagName)) { 34 | const BibiHref = Love.getAttribute('data-bibi-href'); 35 | if(!BibiHref) return null; 36 | Anchor = Love.parentNode.insertBefore(Jo.create('a', { href: BibiHref }), Love); 37 | Frame = Love.parentNode.removeChild(Love); 38 | } else if(/^a$/i.test(Love.tagName)) { 39 | if(!Love.href) return null; 40 | Anchor = Love; 41 | Frame = Jo.create('iframe'); 42 | (BibiClass => BibiClass ? BibiClass.trim().replace(/\s+/, ' ').split(' ').forEach(CN => CN ? Frame.classList.add(CN) : false) : false)(Anchor.getAttribute('data-bibi-class')); 43 | (BibiID => BibiID ? Frame.setAttribute('id', BibiID ) : false)(Anchor.getAttribute('data-bibi-id' )); 44 | (BibiStyle => BibiStyle ? Frame.setAttribute('style', BibiStyle) : false)(Anchor.getAttribute('data-bibi-style')); 45 | } 46 | Receiver = Love; 47 | let BibiReceive = Receiver.getAttribute('data-bibi-receive'); 48 | if(BibiReceive && (BibiReceive = BibiReceive.replace(/\s+/, ''))) ToReceive = BibiReceive.split(','); 49 | 50 | } 51 | } catch(Err) { return null; } if(!Anchor || !Frame || !Receiver) return null; 52 | const Bibi = Anchor.Bibi = Frame.Bibi = { Jo: Jo, Anchor: Anchor, Frame: Frame, Receiver: Receiver, Index: Jo.Bibis.length, Status: '' }; 53 | Bibi.listen = (EN, fun) => !BibiEventRE.test(EN) ? false : Receiver.addEventListener(EN, Eve => fun.call(Receiver, Eve.detail), false); 54 | Bibi.dispatch = (EN, Det = Bibi) => !BibiEventRE.test(EN) ? false : Receiver.dispatchEvent(new CustomEvent(EN, { detail: Det })); 55 | Bibi.receive = (EN) => !BibiEventRE.test(EN) ? false : Frame.contentWindow.E.add(EN, Det => Bibi.dispatch(EN, Det)); 56 | Bibi.post = (EN, V) => !BibiEventRE.test(EN) ? false : Frame.contentWindow.postMessage(`{ "${ EN }" : "${ V }" }`, Anchor.origin); 57 | Bibi.listen('bibi:initialized', (Status) => Bibi.Status = Bibi.Initialized = Status); if(ToReceive.length) Bibi.listen('bibi:initialized', () => ToReceive.forEach(EN => Bibi.receive('' + EN.trim()))); 58 | Bibi.listen('bibi:readied', (Status) => Bibi.Status = Bibi.Readied = Status); 59 | Bibi.listen('bibi:prepared', (Status) => Bibi.Status = Bibi.Prepared = Status); 60 | Bibi.listen('bibi:opened', (Status) => Bibi.Status = Bibi.Opened = Status); 61 | Bibi.listen('bibi:opened', () => { 62 | Bibi.move = (Distance) => Bibi.post('bibi:commands:move', Distance); 63 | Bibi.focus = (Target) => Bibi.post('bibi:commands:focus', Target); 64 | Bibi.changeView = (RVM) => Bibi.post('bibi:commands:change-view', RVM); 65 | Bibi.togglePanel = () => Bibi.post('bibi:commands:toggle-panel', ''); 66 | }); 67 | Anchor.style.display = 'none'; 68 | if(!Jo.TrustworthyOrigins.includes(Anchor.origin)) Jo.TrustworthyOrigins.push(Anchor.origin); // It is NOT reflected to S['trustworthy-origins']. 69 | Anchor.href += (/#/.test(Anchor.href) ? '&' : '#') + (() => { 70 | const Fragments = new Jo.Fragments(); 71 | Fragments.add('parent-bibi-index', Bibi.Index); 72 | [ 73 | 'autostart-embedded', 'autostart', 74 | 'p', 75 | 'fix-reader-view-mode', 'fix-view', 'view-unchangeable', 76 | 'full-breadth-layout-in-scroll', 77 | 'iipp', 78 | 'nav', 79 | 'reader-view-mode', 'rvm', 'view', 80 | 'start-embedded-in-new-window', 'start-in-new-window' 81 | ].forEach(K => { let V = '' + (Love.ownerDocument ? Love.getAttribute('data-bibi-' + K) || '' : Love['bibi-' + K]); 82 | if(V && (() => { switch(K) { 83 | case 'p': return /^(\d*\.)?\d+$/; 84 | case 'iipp': return /^(\d*\.)?\d+$/; 85 | case 'nav': return /^[1-9][0-9]*$/; 86 | case 'rvm': case 'view': K = 'reader-view-mode'; 87 | case 'reader-view-mode': return /^(paged|horizontal|vertical)$/; 88 | case 'autostart': case 'start-in-new-window': K = K.replace('start', 'start-embedded'); break; 89 | case 'view-unchangeable': K = 'fix-reader-view-mode'; break; 90 | } return /^(true|false|1|0|yes|no|mobile|desktop)$/; })().test(V)) Fragments.add(K, V); 91 | }); 92 | return Fragments.make(); 93 | })(); 94 | Frame.classList.add('bibi-frame'); 95 | Frame.setAttribute('frameborder', '0'); 96 | Frame.setAttribute('scrolling', 'auto'); 97 | Frame.setAttribute('allowfullscreen', 'true'); 98 | Frame.src = Anchor.href; 99 | Jo.Bibis.push(Bibi); 100 | return Bibi; 101 | }; 102 | 103 | 104 | 105 | 106 | Jo.embed = () => { 107 | const BibisToBeLoaded = [], BibisLoaded = []; 108 | Array.prototype.forEach.call(document.body.querySelectorAll('*[data-bibi]'), Bed => { 109 | if(Bed.getAttribute('data-bibi-processed')) return; 110 | Bed.setAttribute('data-bibi-processed', 'true'); 111 | const Bibi = new Jo.Bibi(Bed); 112 | if(Bibi) BibisToBeLoaded.push(Bibi); 113 | }); 114 | if(!BibisToBeLoaded.length) return; 115 | //Jo.listen('bibi:jo:embedded', Bibis => console.log(`[Bibi:Jo] Embedded. - ${ Bibis.length } of ${ Jo.Bibis.length }`)); 116 | BibisToBeLoaded.forEach(Bibi => { 117 | const Anchor = Bibi.Anchor, Frame = Bibi.Frame; 118 | Bibi.listen('bibi:initialized', () => (BibisLoaded.push(Bibi) < BibisToBeLoaded.length) ? false : Jo.dispatch('bibi:jo:embedded', BibisLoaded)); 119 | Anchor.parentNode.insertBefore(Frame, Anchor); 120 | }); 121 | }; 122 | 123 | 124 | 125 | 126 | document.addEventListener('DOMContentLoaded', Jo.embed), window.addEventListener('load', Jo.embed); 127 | 128 | 129 | 130 | 131 | window.addEventListener('message', Eve => { 132 | if(!Eve || !Jo.judge(Eve.data, Eve.origin)) return false; try { 133 | Data = JSON.parse(Data); 134 | if(typeof Data != 'object' || !Data) return false; 135 | for(let EN in Data) Jo.dispatch(EN, Data[EN]); 136 | return true; } catch(Err) {} return false; 137 | }, false); 138 | 139 | 140 | 141 | 142 | // Utility 143 | 144 | Jo.create = (TagName, Properties) => { 145 | const Ele = document.createElement(TagName); 146 | for(let Attribute in Properties) Ele[Attribute] = Properties[Attribute]; 147 | return Ele; 148 | }; 149 | 150 | Jo.encode = (Str) => encodeURIComponent(Str).replace('(', '_BibiKakkoOpen_').replace(')', '_BibiKakkoClose_'); 151 | 152 | Jo.Fragments = function() { // constructor 153 | this.FragmentKeys = []; 154 | this.FragmentKeysAndValues = {}; 155 | this.add = function(Key, Value) { 156 | if(!this.FragmentKeys.includes(Key)) this.FragmentKeys.push(Key); 157 | this.FragmentKeysAndValues[Key] = Value; 158 | }; 159 | this.make = function() { 160 | if(!this.FragmentKeys.length) return ''; 161 | const Fragments = []; 162 | for(let l = this.FragmentKeys.length, i = 0; i < l; i++) Fragments.push(`${ this.FragmentKeys[i] }=${ Jo.encode(this.FragmentKeysAndValues[this.FragmentKeys[i]]) }`); 163 | return `jo(${ Fragments.join('&') })`; 164 | }; 165 | return this; 166 | }; 167 | 168 | Jo.judge = (Msg, Origin) => (Msg && typeof Msg == 'string' && Origin && typeof Origin == 'string' && Jo.TrustworthyOrigins.includes(Origin)); 169 | 170 | Jo.listen = (EN, fun) => !BibiEventRE.test(EN) ? false : document.addEventListener(EN, Eve => fun.call(document, Eve.detail)); 171 | Jo.dispatch = (EN, Det = Jo) => !BibiEventRE.test(EN) ? false : document.dispatchEvent(new CustomEvent(EN, { detail: Det })); 172 | 173 | 174 | 175 | 176 | // Polyfill 177 | 178 | if(!Array.prototype.includes) Array.prototype.includes = function(I) { for(let l = this.length, i = 0; i < l; i++) if(this[i] == I) return true; return false; }; 179 | 180 | if(!window.CustomEvent || (typeof window.CustomEvent !== 'function') && (window.CustomEvent.toString().indexOf('CustomEventConstructor') === -1)) { 181 | window.CustomEvent = function(EventName, Arguments) { // constructor 182 | Arguments = Arguments || { bubbles: false, cancelable: false, detail: undefined }; 183 | const Eve = document.createEvent('CustomEvent'); 184 | Eve.initCustomEvent(EventName, Arguments.bubbles, Arguments.cancelable, Arguments.detail); 185 | return Eve; 186 | }; 187 | window.CustomEvent.prototype = window.Event.prototype; 188 | } 189 | 190 | 191 | 192 | 193 | })(); -------------------------------------------------------------------------------- /bibi.info.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * (℠) 3 | * # Additional Webpack Config for Bibi 4 | * 5 | */ 6 | 7 | 'use strict'; 8 | 9 | const Bibi = { 10 | 'version': '1.2.0', 11 | 'author': { 12 | 'name': 'Satoru Matsushima' 13 | }, 14 | 'description': 'Bibi | EPUB Reader on your website.', 15 | 'homepage': 'https://bibi.epub.link or https://github.com/satorumurmur/bibi' 16 | }; 17 | 18 | Bibi.Arguments = (() => { 19 | const KRE = /^\-+([\w\d_\-]+)$/; 20 | let CurrentKey = null; 21 | return process.argv.reduce((As, KoV) => { 22 | if(KRE.test(KoV)) CurrentKey = KoV.replace(KRE, '$1'), As[CurrentKey] = true; 23 | else if(CurrentKey) As[CurrentKey] = KoV, CurrentKey = null; 24 | return As; 25 | }, {}); 26 | })(); 27 | 28 | Bibi.ForPack = (Bibi.Arguments['pack']); 29 | Bibi.WithBCK = (Bibi.Arguments['bc'] || Bibi.ForPack); 30 | 31 | Bibi.ARCHIVES = '__archives', Bibi.ARCHIVETMP = Bibi.ARCHIVES + '/.tmp', Bibi.DIST = '__dist', Bibi.SRC = '__src', Bibi.SRCBC = '__src__back-compat'; 32 | 33 | Bibi.Dresses = (_ => { 34 | const Dresses = require('./' + Bibi.SRC + '/bibi/wardrobe/_dresses.js') || {}; 35 | Dresses['custom-made'] = _(Dresses['custom-made']).filter(D => !Dresses['ready-made'].includes(D)); 36 | Dresses[ 'ready-made'] = _(Dresses[ 'ready-made']); 37 | return Dresses; 38 | })(Ds => Ds instanceof Array ? Ds.filter(D => typeof D == 'string' && /^[a-zA-Z0-9][a-zA-Z0-9_\-]*$/.test(D)) : []); 39 | 40 | const _banner = (Opt) => '/*!' + ` 41 | * 42 | * # ${ Opt.Name }` + (!Opt.Mark ? '' : (s => { for(let l = Math.max(69 - (6 + Opt.Name.length) - 4, 1), i = 0; i < l; i++) s = ' ' + s; return s; })(`(℠)`)) + ` 43 | *` + (!Opt.Credit ? '' : (Opt.Credit == Bibi ? ` 44 | * * © ${ Bibi.author.name } - ${ Bibi.homepage } 45 | * * Open source under the MIT License - https://github.com/satorumurmur/bibi/blob/master/LICENSE` : '\n' + Opt.Credit.replace(/^\n|\n$/g, '')) + ` 46 | *`) + (!Opt.Extra ? '' : '\n' + Opt.Extra.replace(/^\n|\n$/g, '') + ` 47 | *`) + '\n */'; 48 | 49 | Bibi.Banners = Object.assign({ 50 | 51 | // ============================================================================================================================= 52 | 53 | 'bibi/resources/scripts/bibi.js': _banner({ Name: `Bibi | EPUB Reader on your website.`, Credit: Bibi, Extra: ` 54 | * * Including: 55 | * - sML.js : © Satoru Matsushima - https://github.com/satorumurmur/sML / Licensed under the MIT License - https://github.com/satorumurmur/sML/blob/master/LICENSE 56 | `, Mark: true }), 57 | 58 | 'bibi/and/jo.js': _banner({ Name: `Jo | Helper for Embedding Bibi-Frames in Webpage.`, Credit: Bibi, Mark: true }), 59 | 60 | 'bib/i.js': _banner({ Name: `bib/i.js (BCK)`, Credit: Bibi, Extra: ` 61 | * * Calling: 62 | * - Jo | Helper for Embedding Bibi-Frames in Webpage. - bibi/and/jo.js 63 | `, Mark: true }), 64 | 65 | // ----------------------------------------------------------------------------------------------------------------------------- 66 | 67 | 'bibi/resources/scripts/polyfills/bundle.js': _banner({ Name: `Polyfill Bundle for Bibi`, Credit: ` 68 | * * Consists of: 69 | * - classlist-polyfill : by Yola Inc. - https://github.com/yola/classlist-polyfill / Released into the public domain under the Unlicense - https://github.com/yola/classlist-polyfill/blob/master/LICENSE 70 | * - text-encoding-utf-8 : by Erik Arvidsson - https://github.com/arv/text-encoding-utf-8 / Released into the public domain under the Unlicense - https://github.com/arv/text-encoding-utf-8/blob/master/LICENSE.md 71 | * - IntersectionObserver polyfill : © W3C - https://github.com/w3c/IntersectionObserver / Licensed under the W3C Software and Document License - https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document 72 | * - custom-event-polyfill : © Evan Krambuhl - https://github.com/kumarharsh/custom-event-polyfill / Licensed under the MIT License - https://github.com/kumarharsh/custom-event-polyfill/blob/master/LICENSE 73 | * - document.currentScript Polyfill : © Adam Miller - https://github.com/amiller-gh/currentScript-polyfill / Licensed under the MIT License - https://github.com/amiller-gh/currentScript-polyfill/blob/master/LICENSE 74 | * - ES6 Object.assign() : © Rubén Norte - https://github.com/rubennorte/es6-object-assign / Licensed under the MIT License - https://github.com/rubennorte/es6-object-assign/blob/master/LICENSE 75 | * - Native Promise Only (NPO) : © Kyle Simpson - https://github.com/getify/native-promise-only / Licensed under the MIT License - https://getify.mit-license.org/ 76 | * - Polyfill Array.prototype.includes : © Kevin Latusinski - https://github.com/latusinski/polyfill-array-includes / Licensed under the MIT License - https://github.com/kevlatus/polyfill-array-includes/blob/master/LICENSE 77 | * - String.prototype.padStart : © Khaled Al-Ansari - https://github.com/KhaledElAnsari/String.prototype.padStart / Licensed under the MIT License - https://github.com/KhaledElAnsari/String.prototype.padStart/blob/master/LICENSE 78 | * - url-polyfill : © Valentin Richard - https://github.com/lifaon74/url-polyfill / Licensed under the MIT License - https://github.com/lifaon74/url-polyfill/blob/master/LICENSE 79 | ` }), 80 | 81 | 'bibi/resources/scripts/polyfills/encoding.js': _banner({ Name: `Polyfill for Bibi: text-encoding-utf-8`, Credit: ` 82 | * * Consists of: 83 | * - text-encoding-utf-8 : by Erik Arvidsson - https://github.com/arv/text-encoding-utf-8 / Released into the public domain under the Unlicense - https://github.com/arv/text-encoding-utf-8/blob/master/LICENSE.md 84 | ` }), 85 | 86 | 'bibi/resources/scripts/polyfills/intersection-observer.js': _banner({ Name: `Polyfill for Bibi: IntersectionObserver polyfill`, Credit: ` 87 | * * Consists of: 88 | * - IntersectionObserver polyfill : © W3C - https://github.com/w3c/IntersectionObserver / Licensed under the W3C Software and Document License - https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document 89 | ` }), 90 | 91 | // ----------------------------------------------------------------------------------------------------------------------------- 92 | 93 | 'bibi/extensions/analytics.js': _banner({ Name: `Bibi Extension: Analytics`, Credit: Bibi, Mark: true }), 94 | 95 | 'bibi/extensions/epubcfi.js': _banner({ Name: `Bibi Extension: EPUBCFI`, Credit: Bibi, Mark: true }), 96 | 97 | 'bibi/extensions/extractor/on-the-fly.js': _banner({ Name: 'Bibi Extension: Extractor (on the fly)', Credit: Bibi, Extra: ` 98 | * * Depends on: 99 | * - Bibi Zip Loader : © Lunascape - https://github.com/lunascape/bibi-zip-loader / Licensed under the MIT License - https://github.com/lunascape/bibi-zip-loader/blob/master/LICENSE 100 | `, Mark: true }), 101 | 102 | 'bibi/extensions/extractor/at-once.js': _banner({ Name: 'Bibi Extension: Extractor (at once)', Credit: Bibi, Extra: ` 103 | * * Depends on: 104 | * - JSZip : © Stuart Knightley - https://stuk.github.io/jszip / Dual licensed under the MIT License or the GPLv3 - https://github.com/Stuk/jszip/blob/master/LICENSE.markdown 105 | * - JSZipUtils : © Stuart Knightley - https://stuk.github.io/jszip-utils / Dual licensed under the MIT License or the GPLv3 - https://github.com/Stuk/jszip-utils/blob/master/LICENSE.markdown 106 | `, Mark: true }), 107 | 108 | 'bibi/extensions/sanitizer.js': _banner({ Name: 'Bibi Extension: Sanitizer', Credit: Bibi, Extra: ` 109 | * * Depends on: 110 | * - DOMPurify : © Mario Heiderich - https://github.com/cure53/DOMPurify / Dual licensed under the Apache License Version 2.0 or the Mozilla Public License Version 2.0 - https://github.com/cure53/DOMPurify/blob/master/LICENSE 111 | `, Mark: true }), 112 | 113 | 'bibi/extensions/unaccessibilizer.js': _banner({ Name: `# Bibi Extension: Unaccessibilizer ("What a...")`, Credit: ` 114 | * * Reluctantly coded by ${ Bibi.author.name } - ${ Bibi.homepage } 115 | * * Released into the public domain under the Unlicense - http://unlicense.org/UNLICENSE 116 | ` }), 117 | 118 | 'bibi/extensions/zine.js': _banner({ Name: 'Bibi Extension: Zine', Credit: Bibi, Extra: ` 119 | * * Depends on: 120 | * - JS-YAML : © Vitaly Puzrin - https://nodeca.github.io/js-yaml / Licensed under the MIT License - https://github.com/nodeca/js-yaml/blob/master/LICENSE 121 | `, Mark: true }) 122 | 123 | // ============================================================================================================================= 124 | 125 | }, [{ 126 | 127 | // ============================================================================================================================= 128 | 129 | 'bibi/resources/styles/bibi.css': _banner({ Name: `Bibi Style`, Credit: Bibi, Extra: ` 130 | * * Including: 131 | * - Material Icons : © Material Design Authors & Google Inc. - https://material.io/resources/icons / Licensed under the Apache License version 2.0 - https://www.apache.org/licenses/LICENSE-2.0.html 132 | `, Mark: true }) 133 | 134 | // ----------------------------------------------------------------------------------------------------------------------------- 135 | 136 | }].concat(Bibi.Dresses['custom-made'].map(D => ({ 137 | 138 | // ----------------------------------------------------------------------------------------------------------------------------- 139 | 140 | [`bibi/wardrobe/${ D }/bibi.dress.css`]: _banner({ Name: `Bibi Dress: "${ D }"`, Credit: D == 'everyday' ? Bibi : ` 141 | * * © The Creator(s) of This Dress 142 | `, Extra: ` 143 | * * Based on: 144 | * - The Bibi Dress Design System : © ${ Bibi.author.name } - ${ Bibi.homepage } / Licensed under the MIT License - https://github.com/satorumurmur/bibi/blob/master/LICENSE 145 | `, Mark: true }) 146 | 147 | // ============================================================================================================================= 148 | 149 | }))).reduce((Bs, B) => { for(const P in B) B[P] = '@charset "utf-8";\n' + B[P]; return Object.assign(Bs, B); }, {})); 150 | 151 | module.exports = Bibi; 152 | -------------------------------------------------------------------------------- /__src/bibi/wardrobe/_dress-codes/_icons.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================ 2 | // + General Icons 3 | // -------------------------------------------------------------------------------- 4 | 5 | 6 | // - General Icons' Common Style 7 | // -------------------------------------------------------------------------------- 8 | 9 | // [ja] 場所を問わず、一般アイコンすべてに適用される共通スタイル 10 | @mixin GENERALICON__Common() { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | @include size(100%); 15 | text-decoration: none; 16 | &:before { 17 | position: relative; 18 | // ---- 19 | font: 1em / .98em "Material Icons"; 20 | -ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none; 21 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; 22 | speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal; 23 | } 24 | } 25 | 26 | 27 | // - General Icons in Menu 28 | // -------------------------------------------------------------------------------- 29 | 30 | // [ja] メニューバー内のアイコンすべてに適用される共通スタイル 31 | @mixin GENERALICON__CommonInMenu() { 32 | &:before { 33 | font-size: $Menu-Icon_Size * 25/31; 34 | } 35 | } 36 | 37 | @mixin GENERALICON__Config() { 38 | &:before { 39 | content: "settings"; 40 | } 41 | } 42 | 43 | @mixin GENERALICON__ChangeFontSize() { 44 | &:before { 45 | content: "format_size"; 46 | top: 1px; 47 | text-indent: -1px; 48 | } 49 | } 50 | 51 | // [ja] ３種の拡大／縮小アイコンすべてに適用される共通スタイル 52 | @mixin GENERALICON__LoupeCommon() { 53 | &:before { 54 | text-indent: 1px; 55 | } 56 | } 57 | 58 | @mixin GENERALICON__LoupeZoomIn() { 59 | &:before { 60 | content: "zoom_in"; 61 | .bibi-button.active &, .bibi-button.active.hover & { transform: scale(1.25) !important; } 62 | } 63 | } 64 | 65 | @mixin GENERALICON__LoupeZoomOut() { 66 | &:before { 67 | content: "zoom_out"; 68 | .bibi-button.active &, .bibi-button.active.hover & { transform: scale(0.80) !important; } 69 | } 70 | } 71 | 72 | @mixin GENERALICON__LoupeReset() { 73 | &:before { 74 | content: "search"; 75 | .bibi-button.active &, .bibi-button.active.hover & { html.zoomed-in & { transform: scale(0.80) !important; } html.zoomed-out & { transform: scale(1.25) !important; } } 76 | } 77 | &:after { 78 | content: "="; 79 | display: block; 80 | position: absolute; 81 | @include offset(22%, auto, auto, 22%); 82 | margin: auto; 83 | @include size(1em); 84 | font-size: 1em * (13px / 18px); 85 | line-height: 1; 86 | html.macOS.Safari & { top: 16%; } 87 | .bibi-button.active &, .bibi-button.active.hover & { transform: translateX(4px) scale(0) !important; } 88 | } 89 | } 90 | 91 | @mixin GENERALICON__ManageBookmarks() { 92 | &:before { 93 | content: "bookmarks"; 94 | font-size: $Menu-Icon_Size * 21/31; 95 | } 96 | } 97 | 98 | 99 | // - General Icons in Slider 100 | // -------------------------------------------------------------------------------- 101 | 102 | // [ja] Slider 内のアイコンすべてに適用される共通スタイル 103 | @mixin GENERALICON__CommonInSlider() { 104 | border-radius: 50%; 105 | &:before { 106 | font-size: 24px; 107 | } 108 | } 109 | 110 | @mixin GENERALICON__History() { 111 | transition: none !important; .bibi-button:hover & { transition: $Slider-Icon_Transition !important; } 112 | &:before { 113 | content: "history"; 114 | left: -.01em; 115 | transform: none !important; 116 | } 117 | } 118 | 119 | 120 | // - General Icons in Subpanels 121 | // -------------------------------------------------------------------------------- 122 | 123 | // [ja] Subpanel 内のアイコンすべてに適用される共通スタイル 124 | @mixin GENERALICON__CommonInSubpanels() { 125 | &:before { 126 | font-size: $Subpanel-Icon_Size * 3/4; 127 | } 128 | } 129 | 130 | @mixin GENERALICON__UseFullBreadth() { 131 | &:before { 132 | content: "settings_overscan"; 133 | } 134 | } 135 | 136 | @mixin GENERALICON__ToggleFullscreen() { 137 | &:before { 138 | content: "fullscreen"; 139 | html.InternetExplorer & { top: -.05em; } 140 | *:fullscreen & { 141 | content: "fullscreen_exit"; 142 | } 143 | } 144 | } 145 | 146 | @mixin GENERALICON__OpenNewWindow() { 147 | &:before { 148 | content: "open_in_new"; 149 | } 150 | } 151 | 152 | // [ja] ５種のフォントサイズ変更アイコンすべてに適用される共通スタイル 153 | @mixin GENERALICON__FontSizeCommon() { 154 | &:before { 155 | content: "title"; 156 | top: 1px; 157 | } 158 | } 159 | 160 | // [ja] ５種のフォントサイズ変更アイコンの font-size 値を同一比率で段階づけするためにここだけで使っている関数。使用しなくても構いません。 161 | @function LOCAL__GENERALICON__FontSize_FontSizePow($SCOPED__Size) { 162 | $SCOPED__FontSize: 10px; @if $SCOPED__Size > 1 { @for $i from 1 through ($SCOPED__Size - 1) { $SCOPED__FontSize: $SCOPED__FontSize * 1.28; } } 163 | @return $SCOPED__FontSize; 164 | } 165 | 166 | @mixin GENERALICON__FontSizeXL() { 167 | &:before { 168 | font-size: LOCAL__GENERALICON__FontSize_FontSizePow(5); 169 | } 170 | } 171 | 172 | @mixin GENERALICON__FontSizeL() { 173 | &:before { 174 | font-size: LOCAL__GENERALICON__FontSize_FontSizePow(4); 175 | } 176 | } 177 | 178 | @mixin GENERALICON__FontSizeM() { 179 | &:before { 180 | font-size: LOCAL__GENERALICON__FontSize_FontSizePow(3); 181 | } 182 | } 183 | 184 | @mixin GENERALICON__FontSizeS() { 185 | &:before { 186 | font-size: LOCAL__GENERALICON__FontSize_FontSizePow(2); 187 | } 188 | } 189 | 190 | @mixin GENERALICON__FontSizeXS() { 191 | &:before { 192 | font-size: LOCAL__GENERALICON__FontSize_FontSizePow(1); 193 | } 194 | } 195 | 196 | @mixin GENERALICON__BookmarkCommon() { 197 | &:before { 198 | font-size: $Subpanel-Icon_Size * .9; 199 | top: .05em; 200 | } 201 | } 202 | 203 | @mixin GENERALICON__AddABookmark() { 204 | &:before { 205 | content: "book"; 206 | } 207 | } 208 | 209 | @mixin GENERALICON__ABookmark() { 210 | &:before { 211 | content: "bookmark_border"; 212 | } 213 | } 214 | 215 | 216 | 217 | 218 | // ================================================================================ 219 | // + Special Icons 220 | // -------------------------------------------------------------------------------- 221 | 222 | /* [ja] 223 | * これ以降にあるアイコンは、デフォルトではアイコンフォントや画像を使わず、専用に生成された HTML 要素をスタイリングすることで図形を描画しているものです。 224 | * いずれも、１行の @include でデフォルトのデザインを呼び出してあります。 225 | * その @include をコメントアウトして独自の CSS を記述することで、たとえば背景画像を利用するなど、独自のデザインに変更することができます（いくつかのプロパティはリセットした方がよいかもしれません）。 226 | * 対象となる要素の HTML ソースを添えてありますので、独自デザインを行う際には参考にしてください（例示ソース内部の改行・インデントは、実際の DOM には存在しません）。 227 | * いずれの @mixin の展開先セレクタも、添えられた HTML ソースの一番外側の要素です。子要素には入れ子書式でスタイルを適用することができます。 228 | */ 229 | 230 | 231 | // - "Toggle Panel" Icon in Menu 232 | // -------------------------------------------------------------------------------- 233 | 234 | /* [ja] 235 | * バーガーメニューアイコンのスタイルです。 236 | * １つめの @mixin は通常時（開くためのボタン）のスタイルです。 237 | * ２つめの @mixin はパネルが開いているとき（閉じるためのボタン）のスタイルとして、通常時のスタイルに追加・上書きで適用されるスタイルです。 238 | */ 239 | 240 | @mixin SPECIALICON__TogglePanel() { 241 | @include DEFAULT__SPECIALICON__TogglePanel(); 242 | } 243 | 244 | @mixin SPECIALICON__TogglePanel__Active() { 245 | @include DEFAULT__SPECIALICON__TogglePanel__Active(); 246 | } 247 | 248 | /* 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | */ 260 | 261 | 262 | // - "View Xxxx" Icons in Subpanels 263 | // -------------------------------------------------------------------------------- 264 | 265 | /* [ja] 266 | * 右上のボタンから開く設定メニューの Subpanel 内にある、３つの表示モード（「ページ単位」「横スクロール」「縦スクロール」）を示すアイコンのスタイルです。 267 | * １つめの @mixin は、３つに共通して適用されるスタイルです。 268 | * 以降３つの @mixin は、順に「ページ単位」「横スクロール」「縦スクロール」アイコンのスタイルとして、共通スタイルに追加・上書きで適用されます。 269 | */ 270 | 271 | @mixin SPECIALICON__View_Common() { 272 | @include DEFAULT__SPECIALICON__View_Common(); 273 | } 274 | @mixin SPECIALICON__ViewPaged() { 275 | @include DEFAULT__SPECIALICON__ViewPaged(); 276 | } 277 | @mixin SPECIALICON__ViewHorizontal() { 278 | @include DEFAULT__SPECIALICON__ViewHorizontal(); 279 | } 280 | @mixin SPECIALICON__ViewVertical() { 281 | @include DEFAULT__SPECIALICON__ViewVertical(); 282 | } 283 | 284 | /* 285 | 286 | // SPECIALICON__ViewPaged 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | // SPECIALICON__ViewHorizontal 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | // SPECIALICON__ViewVertical 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | */ 341 | 342 | 343 | 344 | 345 | 346 | --------------------------------------------------------------------------------