mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-23 21:50:28 +00:00
a commit message
This commit is contained in:
parent
a9c6316ccb
commit
f9db4792c8
109 changed files with 13549 additions and 1 deletions
2
app.py
2
app.py
|
|
@ -5,7 +5,7 @@ import os
|
|||
app = Flask(__name__)
|
||||
|
||||
# Directory containing EPUB files
|
||||
EPUBS_DIR = './bookshelf/'
|
||||
EPUBS_DIR = './bibi-bookshelf/'
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
|
|
|
|||
Binary file not shown.
BIN
bibi-bookshelf/Teaching.epub
Normal file
BIN
bibi-bookshelf/Teaching.epub
Normal file
Binary file not shown.
BIN
bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR.epub
Normal file
BIN
bibi-bookshelf/__samples/Sample_Pre-Paginated_LtR.epub
Normal file
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
|
||||
<head>
|
||||
<title>Nav</title>
|
||||
</head>
|
||||
<body epub:type="frontmatter">
|
||||
<header>
|
||||
<h1>ToC</h1>
|
||||
</header>
|
||||
<nav epub:type="toc">
|
||||
<ol>
|
||||
<li><a href="p01.png">p.1</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<nav epub:type="page-list">
|
||||
<ol>
|
||||
<li><a href="p01.png">p.1</a></li>
|
||||
<li><a href="p02.png">p.2</a></li>
|
||||
<li><a href="p03.png">p.3</a></li>
|
||||
<li><a href="p04.png">p.4</a></li>
|
||||
<li><a href="p05.png">p.5</a></li>
|
||||
<li><a href="p06.png">p.6</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" prefix="rendition: http://www.idpf.org/vocab/rendition/#" unique-identifier="uid">
|
||||
<metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/">
|
||||
<dc:identifier id="uid">urn:uuid:C3171445-62C6-470B-814B-14D15745BA8E</dc:identifier>
|
||||
<dc:title>Sample: Pre-Paginated LtR</dc:title>
|
||||
<dc:language>ja-jp</dc:language>
|
||||
<dc:creator>Bibi Lalalu</dc:creator>
|
||||
<dc:publisher>bibi.epub.link</dc:publisher>
|
||||
<meta property="dcterms:modified">2020-03-11T12:00:00Z</meta>
|
||||
<meta property="rendition:layout">pre-paginated</meta>
|
||||
<meta property="rendition:orientation">portrait</meta>
|
||||
<meta property="rendition:spread">landscape</meta>
|
||||
<meta name="original-resolution" content="1440x2000" />
|
||||
<meta name="cover" content="cov" />
|
||||
</metadata>
|
||||
<manifest>
|
||||
<item id="nav" media-type="application/xhtml+xml" href="nav.xhtml" properties="nav" />
|
||||
<item id="cov" media-type="image/png" href="cov.png" properties="cover-image" />
|
||||
<item id="p02" media-type="image/png" href="p02.png" />
|
||||
<item id="p03" media-type="image/png" href="p03.png" />
|
||||
<item id="p04" media-type="image/png" href="p04.png" />
|
||||
<item id="p05" media-type="image/png" href="p05.png" />
|
||||
<item id="p06" media-type="image/png" href="p06.png" />
|
||||
<item id="p07" media-type="image/png" href="p07.png" />
|
||||
</manifest>
|
||||
<spine page-progression-direction="ltr">
|
||||
<itemref idref="cov" properties="page-spread-center" />
|
||||
<itemref idref="p02" properties="page-spread-right" />
|
||||
<itemref idref="p03" properties="page-spread-left" />
|
||||
<itemref idref="p04" properties="page-spread-right" />
|
||||
<itemref idref="p05" properties="page-spread-left" />
|
||||
<itemref idref="p06" properties="page-spread-right" />
|
||||
<itemref idref="p07" properties="page-spread-left" />
|
||||
</spine>
|
||||
</package>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">
|
||||
<rootfiles>
|
||||
<rootfile full-path="CONTENT/package.opf" media-type="application/oebps-package+xml" />
|
||||
</rootfiles>
|
||||
</container>
|
||||
|
|
@ -0,0 +1 @@
|
|||
application/epub+zip
|
||||
BIN
bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL.epub
Normal file
BIN
bibi-bookshelf/__samples/Sample_Pre-Paginated_RtL.epub
Normal file
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
|
||||
<head>
|
||||
<title>Nav</title>
|
||||
</head>
|
||||
<body epub:type="frontmatter">
|
||||
<header>
|
||||
<h1>ToC</h1>
|
||||
</header>
|
||||
<nav epub:type="toc">
|
||||
<ol>
|
||||
<li><a href="p01.png">p.1</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<nav epub:type="page-list">
|
||||
<ol>
|
||||
<li><a href="p01.png">p.1</a></li>
|
||||
<li><a href="p02.png">p.2</a></li>
|
||||
<li><a href="p03.png">p.3</a></li>
|
||||
<li><a href="p04.png">p.4</a></li>
|
||||
<li><a href="p05.png">p.5</a></li>
|
||||
<li><a href="p06.png">p.6</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" prefix="rendition: http://www.idpf.org/vocab/rendition/#" unique-identifier="uid">
|
||||
<metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/">
|
||||
<dc:identifier id="uid">urn:uuid:D7F57A3B-8D31-4004-A5BF-543B40DA21E8</dc:identifier>
|
||||
<dc:title>Sample: Pre-Paginated RtL</dc:title>
|
||||
<dc:language>ja-jp</dc:language>
|
||||
<dc:creator>Bibi Lalalu</dc:creator>
|
||||
<dc:publisher>bibi.epub.link</dc:publisher>
|
||||
<meta property="dcterms:modified">2020-03-11T12:00:00Z</meta>
|
||||
<meta property="rendition:layout">pre-paginated</meta>
|
||||
<meta property="rendition:orientation">portrait</meta>
|
||||
<meta property="rendition:spread">landscape</meta>
|
||||
<meta name="original-resolution" content="1440x2000" />
|
||||
<meta name="cover" content="cov" />
|
||||
</metadata>
|
||||
<manifest>
|
||||
<item id="nav" media-type="application/xhtml+xml" href="nav.xhtml" properties="nav" />
|
||||
<item id="cov" media-type="image/png" href="cov.png" properties="cover-image" />
|
||||
<item id="p02" media-type="image/png" href="p02.png" />
|
||||
<item id="p03" media-type="image/png" href="p03.png" />
|
||||
<item id="p04" media-type="image/png" href="p04.png" />
|
||||
<item id="p05" media-type="image/png" href="p05.png" />
|
||||
<item id="p06" media-type="image/png" href="p06.png" />
|
||||
<item id="p07" media-type="image/png" href="p07.png" />
|
||||
</manifest>
|
||||
<spine page-progression-direction="rtl">
|
||||
<itemref idref="cov" properties="page-spread-center" />
|
||||
<itemref idref="p02" properties="page-spread-left" />
|
||||
<itemref idref="p03" properties="page-spread-right" />
|
||||
<itemref idref="p04" properties="page-spread-left" />
|
||||
<itemref idref="p05" properties="page-spread-right" />
|
||||
<itemref idref="p06" properties="page-spread-left" />
|
||||
<itemref idref="p07" properties="page-spread-right" />
|
||||
</spine>
|
||||
</package>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">
|
||||
<rootfiles>
|
||||
<rootfile full-path="CONTENT/package.opf" media-type="application/oebps-package+xml" />
|
||||
</rootfiles>
|
||||
</container>
|
||||
|
|
@ -0,0 +1 @@
|
|||
application/epub+zip
|
||||
BIN
bibi-bookshelf/interact.epub
Normal file
BIN
bibi-bookshelf/interact.epub
Normal file
Binary file not shown.
BIN
bibi-bookshelf/palestine-a-socialist-introduction.epub
Normal file
BIN
bibi-bookshelf/palestine-a-socialist-introduction.epub
Normal file
Binary file not shown.
BIN
bibi-bookshelf/sample.epub
Normal file
BIN
bibi-bookshelf/sample.epub
Normal file
Binary file not shown.
193
bibi/and/jo.js
Normal file
193
bibi/and/jo.js
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
(() => { 'use strict'; if(window['bibi:jo']) return;
|
||||
|
||||
|
||||
|
||||
|
||||
const Jo = window['bibi:jo'] = { 'version': '____Bibi-Version____',
|
||||
CSS: require('./jo.scss'),
|
||||
Status: '',
|
||||
Bibis: [],
|
||||
TrustworthyOrigins: [location.origin],
|
||||
Loaded: 0,
|
||||
};
|
||||
|
||||
const BibiEventRE = /^bibi:[a-z][a-z:_\-]*$/;
|
||||
|
||||
|
||||
|
||||
|
||||
Jo.Bibi = function() { return Jo.callBibi.apply(Jo, arguments); };
|
||||
|
||||
Jo.callBibi = (Love) => {
|
||||
let Anchor = null, Frame = null, Receiver = null, ToReceive = [];
|
||||
try {
|
||||
if(!(Love instanceof HTMLElement)) {
|
||||
if(Love && typeof Love == 'object') {
|
||||
if(!Love['bibi-href']) return null;
|
||||
Anchor = Jo.create('a', { href: Love['bibi-href'] });
|
||||
Frame = Jo.create('iframe');
|
||||
Receiver = Frame;
|
||||
}
|
||||
if(Love['bibi-receive'] instanceof Array) ToReceive = Love['bibi-receive'];
|
||||
} else {
|
||||
if(/^iframe$/i.test(Love.tagName)) {
|
||||
const BibiHref = Love.getAttribute('data-bibi-href');
|
||||
if(!BibiHref) return null;
|
||||
Anchor = Love.parentNode.insertBefore(Jo.create('a', { href: BibiHref }), Love);
|
||||
Frame = Love.parentNode.removeChild(Love);
|
||||
} else if(/^a$/i.test(Love.tagName)) {
|
||||
if(!Love.href) return null;
|
||||
Anchor = Love;
|
||||
Frame = Jo.create('iframe');
|
||||
(BibiClass => BibiClass ? BibiClass.trim().replace(/\s+/, ' ').split(' ').forEach(CN => CN ? Frame.classList.add(CN) : false) : false)(Anchor.getAttribute('data-bibi-class'));
|
||||
(BibiID => BibiID ? Frame.setAttribute('id', BibiID ) : false)(Anchor.getAttribute('data-bibi-id' ));
|
||||
(BibiStyle => BibiStyle ? Frame.setAttribute('style', BibiStyle) : false)(Anchor.getAttribute('data-bibi-style'));
|
||||
}
|
||||
Receiver = Love;
|
||||
let BibiReceive = Receiver.getAttribute('data-bibi-receive');
|
||||
if(BibiReceive && (BibiReceive = BibiReceive.replace(/\s+/, ''))) ToReceive = BibiReceive.split(',');
|
||||
|
||||
}
|
||||
} catch(Err) { return null; } if(!Anchor || !Frame || !Receiver) return null;
|
||||
const Bibi = Anchor.Bibi = Frame.Bibi = { Jo: Jo, Anchor: Anchor, Frame: Frame, Receiver: Receiver, Index: Jo.Bibis.length, Status: '' };
|
||||
Bibi.listen = (EN, fun) => !BibiEventRE.test(EN) ? false : Receiver.addEventListener(EN, Eve => fun.call(Receiver, Eve.detail), false);
|
||||
Bibi.dispatch = (EN, Det = Bibi) => !BibiEventRE.test(EN) ? false : Receiver.dispatchEvent(new CustomEvent(EN, { detail: Det }));
|
||||
Bibi.receive = (EN) => !BibiEventRE.test(EN) ? false : Frame.contentWindow.E.add(EN, Det => Bibi.dispatch(EN, Det));
|
||||
Bibi.post = (EN, V) => !BibiEventRE.test(EN) ? false : Frame.contentWindow.postMessage(`{ "${ EN }" : "${ V }" }`, Anchor.origin);
|
||||
Bibi.listen('bibi:initialized', (Status) => Bibi.Status = Bibi.Initialized = Status); if(ToReceive.length) Bibi.listen('bibi:initialized', () => ToReceive.forEach(EN => Bibi.receive('' + EN.trim())));
|
||||
Bibi.listen('bibi:readied', (Status) => Bibi.Status = Bibi.Readied = Status);
|
||||
Bibi.listen('bibi:prepared', (Status) => Bibi.Status = Bibi.Prepared = Status);
|
||||
Bibi.listen('bibi:opened', (Status) => Bibi.Status = Bibi.Opened = Status);
|
||||
Bibi.listen('bibi:opened', () => {
|
||||
Bibi.move = (Distance) => Bibi.post('bibi:commands:move', Distance);
|
||||
Bibi.focus = (Target) => Bibi.post('bibi:commands:focus', Target);
|
||||
Bibi.changeView = (RVM) => Bibi.post('bibi:commands:change-view', RVM);
|
||||
Bibi.togglePanel = () => Bibi.post('bibi:commands:toggle-panel', '');
|
||||
});
|
||||
Anchor.style.display = 'none';
|
||||
if(!Jo.TrustworthyOrigins.includes(Anchor.origin)) Jo.TrustworthyOrigins.push(Anchor.origin); // It is NOT reflected to S['trustworthy-origins'].
|
||||
Anchor.href += (/#/.test(Anchor.href) ? '&' : '#') + (() => {
|
||||
const Fragments = new Jo.Fragments();
|
||||
Fragments.add('parent-bibi-index', Bibi.Index);
|
||||
[
|
||||
'autostart-embedded', 'autostart',
|
||||
'p',
|
||||
'fix-reader-view-mode', 'fix-view', 'view-unchangeable',
|
||||
'full-breadth-layout-in-scroll',
|
||||
'iipp',
|
||||
'nav',
|
||||
'reader-view-mode', 'rvm', 'view',
|
||||
'start-embedded-in-new-window', 'start-in-new-window'
|
||||
].forEach(K => { let V = '' + (Love.ownerDocument ? Love.getAttribute('data-bibi-' + K) || '' : Love['bibi-' + K]);
|
||||
if(V && (() => { switch(K) {
|
||||
case 'p': return /^(\d*\.)?\d+$/;
|
||||
case 'iipp': return /^(\d*\.)?\d+$/;
|
||||
case 'nav': return /^[1-9][0-9]*$/;
|
||||
case 'rvm': case 'view': K = 'reader-view-mode';
|
||||
case 'reader-view-mode': return /^(paged|horizontal|vertical)$/;
|
||||
case 'autostart': case 'start-in-new-window': K = K.replace('start', 'start-embedded'); break;
|
||||
case 'view-unchangeable': K = 'fix-reader-view-mode'; break;
|
||||
} return /^(true|false|1|0|yes|no|mobile|desktop)$/; })().test(V)) Fragments.add(K, V);
|
||||
});
|
||||
return Fragments.make();
|
||||
})();
|
||||
Frame.classList.add('bibi-frame');
|
||||
Frame.setAttribute('frameborder', '0');
|
||||
Frame.setAttribute('scrolling', 'auto');
|
||||
Frame.setAttribute('allowfullscreen', 'true');
|
||||
Frame.src = Anchor.href;
|
||||
Jo.Bibis.push(Bibi);
|
||||
return Bibi;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
Jo.embed = () => {
|
||||
const BibisToBeLoaded = [], BibisLoaded = [];
|
||||
Array.prototype.forEach.call(document.body.querySelectorAll('*[data-bibi]'), Bed => {
|
||||
if(Bed.getAttribute('data-bibi-processed')) return;
|
||||
Bed.setAttribute('data-bibi-processed', 'true');
|
||||
const Bibi = new Jo.Bibi(Bed);
|
||||
if(Bibi) BibisToBeLoaded.push(Bibi);
|
||||
});
|
||||
if(!BibisToBeLoaded.length) return;
|
||||
//Jo.listen('bibi:jo:embedded', Bibis => console.log(`[Bibi:Jo] Embedded. - ${ Bibis.length } of ${ Jo.Bibis.length }`));
|
||||
BibisToBeLoaded.forEach(Bibi => {
|
||||
const Anchor = Bibi.Anchor, Frame = Bibi.Frame;
|
||||
Bibi.listen('bibi:initialized', () => (BibisLoaded.push(Bibi) < BibisToBeLoaded.length) ? false : Jo.dispatch('bibi:jo:embedded', BibisLoaded));
|
||||
Anchor.parentNode.insertBefore(Frame, Anchor);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', Jo.embed), window.addEventListener('load', Jo.embed);
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('message', Eve => {
|
||||
if(!Eve || !Jo.judge(Eve.data, Eve.origin)) return false; try {
|
||||
Data = JSON.parse(Data);
|
||||
if(typeof Data != 'object' || !Data) return false;
|
||||
for(let EN in Data) Jo.dispatch(EN, Data[EN]);
|
||||
return true; } catch(Err) {} return false;
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
|
||||
// Utility
|
||||
|
||||
Jo.create = (TagName, Properties) => {
|
||||
const Ele = document.createElement(TagName);
|
||||
for(let Attribute in Properties) Ele[Attribute] = Properties[Attribute];
|
||||
return Ele;
|
||||
};
|
||||
|
||||
Jo.encode = (Str) => encodeURIComponent(Str).replace('(', '_BibiKakkoOpen_').replace(')', '_BibiKakkoClose_');
|
||||
|
||||
Jo.Fragments = function() { // constructor
|
||||
this.FragmentKeys = [];
|
||||
this.FragmentKeysAndValues = {};
|
||||
this.add = function(Key, Value) {
|
||||
if(!this.FragmentKeys.includes(Key)) this.FragmentKeys.push(Key);
|
||||
this.FragmentKeysAndValues[Key] = Value;
|
||||
};
|
||||
this.make = function() {
|
||||
if(!this.FragmentKeys.length) return '';
|
||||
const Fragments = [];
|
||||
for(let l = this.FragmentKeys.length, i = 0; i < l; i++) Fragments.push(`${ this.FragmentKeys[i] }=${ Jo.encode(this.FragmentKeysAndValues[this.FragmentKeys[i]]) }`);
|
||||
return `jo(${ Fragments.join('&') })`;
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
||||
Jo.judge = (Msg, Origin) => (Msg && typeof Msg == 'string' && Origin && typeof Origin == 'string' && Jo.TrustworthyOrigins.includes(Origin));
|
||||
|
||||
Jo.listen = (EN, fun) => !BibiEventRE.test(EN) ? false : document.addEventListener(EN, Eve => fun.call(document, Eve.detail));
|
||||
Jo.dispatch = (EN, Det = Jo) => !BibiEventRE.test(EN) ? false : document.dispatchEvent(new CustomEvent(EN, { detail: Det }));
|
||||
|
||||
|
||||
|
||||
|
||||
// Polyfill
|
||||
|
||||
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; };
|
||||
|
||||
if(!window.CustomEvent || (typeof window.CustomEvent !== 'function') && (window.CustomEvent.toString().indexOf('CustomEventConstructor') === -1)) {
|
||||
window.CustomEvent = function(EventName, Arguments) { // constructor
|
||||
Arguments = Arguments || { bubbles: false, cancelable: false, detail: undefined };
|
||||
const Eve = document.createEvent('CustomEvent');
|
||||
Eve.initCustomEvent(EventName, Arguments.bubbles, Arguments.cancelable, Arguments.detail);
|
||||
return Eve;
|
||||
};
|
||||
window.CustomEvent.prototype = window.Event.prototype;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
})();
|
||||
19
bibi/and/jo.scss
Normal file
19
bibi/and/jo.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/*! Bibi Frame Style */
|
||||
|
||||
iframe.bibi-frame {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 1px rgb(222,222,222);
|
||||
border-radius: 1px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
51
bibi/extensions/analytics.js
Normal file
51
bibi/extensions/analytics.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
Bibi.x({
|
||||
|
||||
id: 'Analytics',
|
||||
description: 'Utilities for Tracking and Logging with Google Analytics.',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0-demo'
|
||||
|
||||
})(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
if(typeof this['tracking-id'] != 'string' || !this['tracking-id']) return;
|
||||
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', this['tracking-id'], 'auto', { 'allowLinker': true });
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', (Hosts => S['trustworthy-origins'].reduce((Hosts, Origin) => Hosts.push(Origin.replace(/^\w+:\/\//, '')), []))());
|
||||
|
||||
E.add('bibi:loaded-navigation', () => sML.forEach(I.Panel.BookInfo.Navigation.querySelectorAll('a'))(A => A.addEventListener('click', () => {
|
||||
ga('send', { hitType: 'event',
|
||||
eventCategory: `Bibi: Jumped by Navigation`,
|
||||
eventAction: B.Path,
|
||||
eventLabel: A.innerHTML.replace(/<[^>]*>/g, '') + ` - "${ A.getAttribute('data-bibi-original-href') }"`,
|
||||
eventValue: undefined
|
||||
});
|
||||
})));
|
||||
|
||||
E.add('bibi:played:by-button', () => {
|
||||
ga('send', { hitType: 'event',
|
||||
eventCategory: `Bibi: Played by Button`,
|
||||
eventAction: B.Path,
|
||||
eventLabel: S['parent-uri'] ? `on: ` + S['parent-uri'].replace(/#.+$/, '') : '',
|
||||
eventValue: undefined
|
||||
});
|
||||
});
|
||||
|
||||
E.add('bibi:scrolled', () => {
|
||||
if(R.Current.Percent != 100) return false;
|
||||
ga('send', { hitType: 'event',
|
||||
eventCategory: `Bibi: Read Through`,
|
||||
eventAction: B.Path,
|
||||
eventLabel: (Date.now() - Bibi.TimeOrigin),
|
||||
eventValue: undefined
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
235
bibi/extensions/epubcfi.js
Normal file
235
bibi/extensions/epubcfi.js
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
Bibi.x({
|
||||
|
||||
id: 'EPUBCFI',
|
||||
description: 'Utilities for EPUBCFI', // An Example Is at the Bottom of This Document.
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0-demo'
|
||||
|
||||
})(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
this.CFIString = '';
|
||||
this.Current = 0;
|
||||
this.Log = false;
|
||||
this.LogCorrection = false;
|
||||
this.LogCancelation = false;
|
||||
|
||||
this.parse = (CFIString, Scope) => {
|
||||
if(!CFIString || typeof CFIString != 'string') return null;
|
||||
try { CFIString = decodeURIComponent(CFIString); } catch(Err) { this.log(0, `Unregulated URIEncoding.`); return null; }
|
||||
if(!Scope || typeof Scope != 'string' || typeof this['parse' + Scope] != 'function') Scope = 'Fragment';
|
||||
if(Scope == 'Fragment') CFIString = CFIString.replace(/^(epubcfi\()?/, 'epubcfi(').replace(/(\))?$/, ')');
|
||||
this.CFIString = CFIString, this.Current = 0;
|
||||
if(this.Log) {
|
||||
this.log(1, `Bibi EPUB-CFI`);
|
||||
this.log(2, `parse`);
|
||||
this.log(3, `CFIString: ${ this.CFIString }`);
|
||||
}
|
||||
return this['parse' + Scope]();
|
||||
};
|
||||
|
||||
this.parseFragment = () => {
|
||||
const Foothold = this.Current;
|
||||
if(!this.parseString('epubcfi(')) return this.cancel(Foothold, `Fragment`);
|
||||
const CFI = this.parseCFI();
|
||||
if(CFI === null) return this.cancel(Foothold);
|
||||
if(!this.parseString(')')) return this.cancel(Foothold, `Fragment`);
|
||||
return CFI;
|
||||
};
|
||||
this.parseCFI = () => {
|
||||
const Foothold = this.Current, CFI = { Type: 'CFI', Path: this.parsePath() };
|
||||
if(!CFI.Path) return this.cancel(Foothold, `CFI`);
|
||||
if(this.parseString(',')) {
|
||||
CFI.Start = this.parseLocalPath();
|
||||
if(!CFI.Start.Steps.length && !CFI.Start.TermStep) return this.cancel(Foothold, `CFI > Range`);
|
||||
if(!this.parseString(',')) return this.cancel(Foothold, 'CFI > Range');
|
||||
CFI.End = this.parseLocalPath();
|
||||
if( !CFI.End.Steps.length && !CFI.End.TermStep) return this.cancel(Foothold, `CFI > Range`);
|
||||
}
|
||||
return CFI;
|
||||
};
|
||||
this.parsePath = () => {
|
||||
const Foothold = this.Current, Path = { Type: 'Path', Steps: [this.parseStep()] }, LocalPath = this.parseLocalPath();
|
||||
if(!Path.Steps[0]) return this.cancel(Foothold, `Path`);
|
||||
if(LocalPath) Path.Steps = Path.Steps.concat(LocalPath.Steps);
|
||||
else return this.cancel(Foothold, `Path`);
|
||||
return Path;
|
||||
};
|
||||
this.parseLocalPath = () => {
|
||||
const Foothold = this.Current, LocalPath = { Type: 'LocalPath', Steps: [] };
|
||||
let StepRoot = LocalPath, Step = this.parseStep('Local'), TermStep = null;
|
||||
while(Step !== null) {
|
||||
StepRoot.Steps.push(Step);
|
||||
Step = this.parseStep('Local');
|
||||
if(!Step) break;
|
||||
if(Step.Type == 'IndirectStep') {
|
||||
const IndirectPath = { Type: 'IndirectPath', Steps: [] };
|
||||
StepRoot.Steps.push(IndirectPath);
|
||||
StepRoot = IndirectPath;
|
||||
} else if(Step.Type == 'TermStep') {
|
||||
TermStep = Step;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(TermStep) StepRoot.Steps.push(TermStep);
|
||||
return (LocalPath.Steps.length ? LocalPath : null);
|
||||
};
|
||||
this.parseStep = Local => {
|
||||
const Foothold = this.Current, Step = {};
|
||||
if( this.parseString( '/')) Step.Type = 'Step';
|
||||
else if(Local && this.parseString('!/')) Step.Type = 'IndirectStep';
|
||||
else if(Local && this.parseString( ':')) Step.Type = 'TermStep';
|
||||
else return this.cancel(Foothold, `Step`);
|
||||
Step.Index = this.parseString(/^(0|[1-9][0-9]*)/);
|
||||
if(Step.Index === null) return this.cancel(Foothold, `Step`);
|
||||
Step.Index = parseInt(Step.Index);
|
||||
if(this.parseString('[')) {
|
||||
if(Step.Type != 'TermStep') {
|
||||
Step.ID = this.parseString(/^[a-zA-Z_:][a-zA-Z0-9_:\-\.]+/);
|
||||
if(!Step.ID) return this.cancel(Foothold, `Step > Assertion > ID`);
|
||||
} else {
|
||||
const CSV = [], Side = null, ValueRegExp = /^((\^[\^\[\]\(\)\,\;\=])|[_a-zA-Z0-9%\- ])*/;
|
||||
CSV.push(this.parseString(ValueRegExp));
|
||||
if(this.parseString(',')) CSV.push(this.parseString(ValueRegExp));
|
||||
if(CSV[0]) Step.Preceding = CSV[0];
|
||||
if(CSV[1]) Step.Following = CSV[1];
|
||||
if(this.parseString(/^;s=/)) Side = this.parseString(/^[ab]/);
|
||||
if(Side) Step.Side = Side;
|
||||
if(!Step.Preceding && !Step.Following && !Step.Side) return this.cancel(Foothold, `Step > Assertion > TextLocation`);
|
||||
}
|
||||
if(!this.parseString(']')) return this.cancel(Foothold, `Step > Assertion`);
|
||||
}
|
||||
return Step;
|
||||
};
|
||||
this.parseString = S => {
|
||||
let Correction = null, Matched = false;
|
||||
if(S instanceof RegExp) {
|
||||
const CFIString = this.CFIString.substr(this.Current, this.CFIString.length - this.Current);
|
||||
if(S.test(CFIString)) {
|
||||
Matched = true;
|
||||
S = CFIString.match(S)[0];
|
||||
}
|
||||
} else if(this.CFIString.substr(this.Current, S.length) === S) {
|
||||
Matched = true;
|
||||
}
|
||||
if(Matched) {
|
||||
this.Current += S.length;
|
||||
Correction = S;
|
||||
}
|
||||
return this.correct(Correction);
|
||||
};
|
||||
|
||||
this.correct = Correction => {
|
||||
if(this.Log && this.LogCorrection && Correction) this.log(3, Correction);
|
||||
return Correction;
|
||||
};
|
||||
this.cancel = (Foothold, Parser) => {
|
||||
if(this.Log && this.LogCancelation) this.log(4, `cancel: parse ${ Parser } (${ Foothold }-${ this.Current }/${ this.CFIString.length })`);
|
||||
if(typeof Foothold == 'number') this.Current = Foothold;
|
||||
return null;
|
||||
};
|
||||
this.log = (Lv, Message) => {
|
||||
if(!this.Log) return;
|
||||
if(Lv == 0) Message = `[ERROR] ${ Message }`;
|
||||
else if(Lv == 1) Message = `---------------- ${ Message } ----------------`;
|
||||
else if(Lv == 2) Message = Message;
|
||||
else if(Lv == 3) Message = ` - ${ Message }`;
|
||||
else if(Lv == 4) Message = ` . ${ Message }`;
|
||||
O.log(`EPUBCFI: ${ Message }`);
|
||||
};
|
||||
|
||||
this.getDestination = CFIString => {
|
||||
const CFI = X['EPUBCFI'].parse(CFIString);
|
||||
if(!CFI || CFI.Path.Steps.length < 2 || !CFI.Path.Steps[1].Index || CFI.Path.Steps[1].Index % 2 == 1) return null;
|
||||
const ItemIndexInAll = CFI.Path.Steps[1].Index / 2 - 1;
|
||||
let ElementSelector = null, TextNodeIndex = null, TermStep = null, IndirectPath = null;
|
||||
if(CFI.Path.Steps[2] && CFI.Path.Steps[2].Steps) {
|
||||
ElementSelector = '';
|
||||
CFI.Path.Steps[2].Steps.forEach((Step, i) => {
|
||||
if(Step.Type == 'IndirectPath') { IndirectPath = Step; return false; }
|
||||
if(Step.Type == 'TermStep') { TermStep = Step; return false; }
|
||||
if(Step.Index % 2 == 1) {
|
||||
TextNodeIndex = Step.Index - 1;
|
||||
if(i != CFI.Path.Steps[2].Steps.length - 2) return false;
|
||||
}
|
||||
if(TextNodeIndex === null) ElementSelector = Step.ID ? '#' + Step.ID : ElementSelector + '>*:nth-child(' + (Step.Index / 2) + ')';
|
||||
});
|
||||
if(ElementSelector && /^>/.test(ElementSelector)) ElementSelector = 'html' + ElementSelector;
|
||||
if(!ElementSelector) ElementSelector = null;
|
||||
}
|
||||
return {
|
||||
CFI: CFI,
|
||||
CFIString: CFIString,
|
||||
ItemIndexInAll: ItemIndexInAll,
|
||||
ElementSelector: ElementSelector,
|
||||
TextNodeIndex: TextNodeIndex,
|
||||
TermStep: TermStep,
|
||||
IndirectPath: IndirectPath
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
/* -----------------------------------------------------------------------------------------------------------------
|
||||
|
||||
// EXAMPLE:
|
||||
|
||||
X.EPUBCFI.parse('epubcfi(/6/4!/4/10!/4/2:32[All%20You%20Need%20Is,Love;s=a])'); // returns following object.
|
||||
|
||||
--------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
{
|
||||
Type: 'CFI',
|
||||
Path: {
|
||||
Type: 'Path',
|
||||
Steps: [
|
||||
{
|
||||
Type: 'Step',
|
||||
Index: '6'
|
||||
},
|
||||
{
|
||||
Type: 'Step',
|
||||
Index: '4'
|
||||
},
|
||||
{
|
||||
Type: 'IndirectPath',
|
||||
Steps: [
|
||||
{
|
||||
Type: 'IndirectStep',
|
||||
Index: '4'
|
||||
},
|
||||
{
|
||||
Type: 'Step',
|
||||
Index: '10'
|
||||
},
|
||||
{
|
||||
Type: 'IndirectPath',
|
||||
Steps: [
|
||||
{
|
||||
Type: 'IndirectStep',
|
||||
Index: '4'
|
||||
},
|
||||
{
|
||||
Type: 'Step',
|
||||
Index: '2'
|
||||
}
|
||||
],
|
||||
TermStep: {
|
||||
Type: 'TermStep',
|
||||
Index: '32',
|
||||
Preceding: 'All You Need Is',
|
||||
Following: 'Love',
|
||||
Side: 'a'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
----------------------------------------------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
|
||||
132
bibi/extensions/extractor/at-once.js
Normal file
132
bibi/extensions/extractor/at-once.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import JSZip from 'jszip/dist/jszip.min.js';
|
||||
import JSZipUtils from 'jszip-utils/dist/jszip-utils.min.js';
|
||||
|
||||
Bibi.x({
|
||||
|
||||
id: 'Extractor_at-once',
|
||||
description: 'Utilities for Zipped Books. (Method: at-once)',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0'
|
||||
|
||||
})(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
O.loadZippedBookData = (BookData) => new Promise(resolve => {
|
||||
if(S['autostart']) return resolve(BookData);
|
||||
I.Veil.Cover.Info.innerHTML = [
|
||||
`<strong>${ O.Touch ? 'Tap' : 'Click' } to Open</strong>`,
|
||||
`<small>${ B.Path.replace(/.*?([^\/]+)$/, '$1') }</small>`
|
||||
].join(' ');
|
||||
I.Veil.Cover.classList.add('without-cover-image', 'waiting-for-unzipping');
|
||||
I.Veil.Cover.appendChild(I.getBookIcon());
|
||||
L.wait().then(() => resolve(BookData));
|
||||
})
|
||||
.then(load)
|
||||
.then(extract);
|
||||
|
||||
const load = (BookData) => new Promise((resolve, reject) => // resolve(ArrayBuffer)
|
||||
typeof BookData == 'string' ? JSZipUtils.getBinaryContent(BookData, (Err, ABuf) => Err ? reject(Bibi.ErrorMessages.NotFound) : resolve(ABuf)) :
|
||||
BookData.size && BookData.type ? (() => { const FR = new FileReader(); FR.onerror = () => reject(Bibi.ErrorMessages.DataInvalid); FR.onload = () => resolve(FR.result); FR.readAsArrayBuffer(BookData); })() :
|
||||
reject(Bibi.ErrorMessages.DataInvalid)
|
||||
).then(ArrayBuffer => JSZip.loadAsync(ArrayBuffer).catch(Err => Promise.reject(Bibi.ErrorMessages.DataInvalid)));
|
||||
|
||||
const extract = (BookDataArchive) => new Promise((resolve, reject) => {
|
||||
if(I.Catcher.Input) I.Catcher.style.opacity = 0;
|
||||
const FilesToBeExtract = [];
|
||||
for(let FileName in BookDataArchive.files) {
|
||||
if(
|
||||
BookDataArchive.files[FileName].dir ||
|
||||
/(^|\/)\./.test(FileName) ||
|
||||
/\.(db|php|p[lm]|cgi|r[bu])(\/|$)/i.test(FileName) ||
|
||||
/^mimetype$/i.test(FileName) ||
|
||||
!BookDataArchive.files[FileName]._data.compressedContent
|
||||
) {
|
||||
delete BookDataArchive.files[FileName];
|
||||
continue;
|
||||
}
|
||||
FilesToBeExtract.push(FileName);
|
||||
}
|
||||
if(!FilesToBeExtract.length) return reject(Bibi.ErrorMessages.DataInvalid);
|
||||
let FolderName = '', FolderNameRE = undefined;
|
||||
const PathsToBeChecked = [];
|
||||
if(B.Type != 'Zine') PathsToBeChecked.push(B.Container.Source.Path); // EPUB or unknown.
|
||||
if(B.Type != 'EPUB') PathsToBeChecked.push( B.ZineData.Source.Path); // Zine or unknown.
|
||||
if(!PathsToBeChecked.filter(PathToBeChecked => FilesToBeExtract.includes(PathToBeChecked)).length) {
|
||||
PathsToBeChecked.forEach(PathToBeChecked => {
|
||||
if(!PathToBeChecked) return;
|
||||
if(FolderName) return;
|
||||
const RE = new RegExp('^(.+?\\/)' + PathToBeChecked.replace(/\//g, '\\/').replace(/\./g, '\\.') + '$');
|
||||
for(let l = FilesToBeExtract.length, i = 0; i < l; i++) {
|
||||
const FileName = FilesToBeExtract[i];
|
||||
if(RE.test(FileName)) {
|
||||
FolderName = FileName.replace(RE, '$1');
|
||||
FolderNameRE = new RegExp('^' + FolderName.replace(/\//g, '\\/').replace(/\./g, '\\.'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
let RootFileFound = false;
|
||||
if(B.Type) RootFileFound = FilesToBeExtract.includes(FolderName + PathsToBeChecked[0]);
|
||||
else if(FilesToBeExtract.includes(FolderName + B.Container.Source.Path)) B.Type = 'EPUB', RootFileFound = true;
|
||||
else if(FilesToBeExtract.includes(FolderName + B.ZineData.Source.Path)) B.Type = 'Zine', RootFileFound = true;
|
||||
if(!RootFileFound) return reject(`${ B.Type ? (B.Type == 'EPUB' ? B.Container.Source.Path : B.ZineData.Source.Path).split('/').slice(-1)[0] : '' } Not Contained`);
|
||||
const FileCount = { Particular: 0 };
|
||||
const FileTypesToBeCounted = {
|
||||
'Meta XML': 'xml|opf|ncx',
|
||||
'Meta YAML': 'ya?ml',
|
||||
'HTML': 'html?|xht(ml?)?',
|
||||
'SMIL': 'smil?',
|
||||
'PLS': 'pls',
|
||||
'CSS': 'css',
|
||||
'JavaScript': 'js',
|
||||
'JSON': 'json',
|
||||
'SVG': 'svg',
|
||||
'Bitmap': 'gif|jpe?g|png',
|
||||
'Font': 'woff2?|otf|ttf',
|
||||
'Audio': 'aac|m4a|mp3|ogg',
|
||||
'Video': 'mp4|m4v|webm|ogv',
|
||||
'PDF': 'pdf',
|
||||
'Markdown': 'md',
|
||||
'PlainText': 'txt'
|
||||
};
|
||||
O.log(`Extracting Book Data...`, '<g:>');
|
||||
const Promises = [];
|
||||
FilesToBeExtract.forEach(FileName => {
|
||||
if(FolderNameRE) FileName = FileName.replace(FolderNameRE, '');
|
||||
const IsBin = O.isBin({ Path: FileName });
|
||||
Promises.push(
|
||||
BookDataArchive.file(FolderName + FileName).async(IsBin ? 'blob' : 'string').then(FileContent => {
|
||||
B.Package.Manifest[FileName] = IsBin ?
|
||||
{ Path: FileName, DataType: 'Blob', Content: FileContent } :
|
||||
{ Path: FileName, DataType: 'Text', Content: FileContent.trim() };
|
||||
for(const FileType in FileTypesToBeCounted) {
|
||||
if(new RegExp('\\.(' + FileTypesToBeCounted[FileType] + ')$', 'i').test(FileName)) {
|
||||
if(!FileCount[FileType]) FileCount[FileType] = 1; else FileCount[FileType]++;
|
||||
FileCount.Particular++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
Promise.all(Promises).then(() => {
|
||||
const Total = Promises.length;
|
||||
for(const FileType in FileTypesToBeCounted) {
|
||||
const Count = FileCount[FileType];
|
||||
if(Count) O.log(`${ Count } ${ FileType }${ Count > 1 ? 's' : '' }`);
|
||||
}
|
||||
if(FileCount.Particular < Total) {
|
||||
const Count_Others = Total - FileCount.Particular;
|
||||
O.log(`${ Count_Others } ${ Count_Others > 1 ? 'Others' : 'Another' }`);
|
||||
}
|
||||
O.log(`Extracted. (${ Total } File${ Total > 1 ? 's' : '' })`, '</g>');
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
1
bibi/extensions/extractor/on-the-fly.bibi-zip-loader.js
Normal file
1
bibi/extensions/extractor/on-the-fly.bibi-zip-loader.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
14
bibi/extensions/extractor/on-the-fly.js
Normal file
14
bibi/extensions/extractor/on-the-fly.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
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') });
|
||||
|
||||
Bibi.x({
|
||||
|
||||
id: 'Extractor_on-the-fly',
|
||||
description: 'Utilities for Zipped Books. (Method: on-the-fly)',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0'
|
||||
|
||||
})(function() {
|
||||
|
||||
O.RangeLoader = RangeLoader;
|
||||
|
||||
});
|
||||
37
bibi/extensions/sanitizer.js
Normal file
37
bibi/extensions/sanitizer.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import DOMPurify from 'dompurify/dist/purify.min.js';
|
||||
|
||||
Bibi.x({
|
||||
|
||||
id: 'Sanitizer',
|
||||
description: 'Content Sanitizer.',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0'
|
||||
|
||||
})(function() {
|
||||
|
||||
O.sanitizeItemSource = (Source, Opt) => {
|
||||
if(Source && typeof Source.Content == 'string' && Opt && typeof Opt.As == 'string') {
|
||||
const Settings = O.sanitizeItemSource.Settings[Opt.As];
|
||||
if(Settings) {
|
||||
(pp => pp ? pp(Source) : true)(Settings.preprocess);
|
||||
Source.Content = DOMPurify.sanitize(Source.Content, Settings.Options);
|
||||
(pp => pp ? pp(Source) : true)(Settings.postprocess);
|
||||
//console.log(Source.Content);
|
||||
return Source.Content;
|
||||
}
|
||||
}
|
||||
const ErrorMessage = `Sanitizer: Invalid Arguments.`;
|
||||
I.note(ErrorMessage, 99999999999, 'ERROR');
|
||||
O.error(ErrorMessage);
|
||||
throw new Error(ErrorMessage);
|
||||
};
|
||||
|
||||
O.sanitizeItemSource.Settings = {
|
||||
'HTML': {
|
||||
Options: { WHOLE_DOCUMENT: true, ADD_TAGS: ['link', 'meta'], ADD_ATTR: ['xmlns', 'xmlns:epub', 'charset', 'http-equiv', 'content'] },
|
||||
postprocess: (Source) => Source.Content = Source.Content.replace(/(<head[\s>])/, '\n$1').replace(/(<\/body>)/, '$1\n')
|
||||
},
|
||||
'SVG' : {}
|
||||
};
|
||||
|
||||
});
|
||||
39
bibi/extensions/unaccessibilizer.js
Normal file
39
bibi/extensions/unaccessibilizer.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
Bibi.x({
|
||||
|
||||
id: 'Unaccessibilizer',
|
||||
description: 'What a...',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0'
|
||||
|
||||
})(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
const VPs = ['-webkit-', '-moz-', '-ms-', ''], unaccessibilize = (Item) => {
|
||||
if(this['select-elements'] == 'prevent') {
|
||||
VPs.forEach(Prefix => {
|
||||
['user-select', 'user-drag'].forEach(Property => {
|
||||
Item.Body.style[Prefix + Property] = 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
if(this['save-images'] == 'prevent') {
|
||||
sML.forEach(Item.Body.querySelectorAll('img, svg, image'))(Img => {
|
||||
VPs.forEach(Prefix => {
|
||||
['user-select', 'user-drag'].forEach(Property => {
|
||||
Img.style[Prefix + Property] = 'none';
|
||||
});
|
||||
if(O.Touch) Img.style[Prefix + 'pointer-events'] = 'none';
|
||||
});
|
||||
Img.draggable = false;
|
||||
Img.addEventListener('contextmenu', O.preventDefault);
|
||||
});
|
||||
}
|
||||
if(this['use-contextmenu'] == 'prevent') {
|
||||
Item.contentDocument.addEventListener('contextmenu', O.preventDefault);
|
||||
}
|
||||
};
|
||||
|
||||
E.bind('bibi:postprocessed-item', unaccessibilize);
|
||||
|
||||
});
|
||||
76
bibi/extensions/zine.js
Normal file
76
bibi/extensions/zine.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import jsyaml from 'js-yaml/dist/js-yaml.min.js';
|
||||
|
||||
Bibi.x({
|
||||
|
||||
id: 'Zine',
|
||||
description: 'Utilities for BibiZine.',
|
||||
author: 'Satoru Matsushima (@satorumurmur)',
|
||||
version: '1.2.0'
|
||||
|
||||
})(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
this.loadZineData = () => this.setZineMode().then(this.openYAML).then(this.createPackageDocument).then(L.loadPackage.process);
|
||||
|
||||
this.setZineMode = () => {
|
||||
delete B.Container;
|
||||
B.Package.Source = O.src(B.ZineData.Source);
|
||||
Object.defineProperty(B, 'ZineData', { get: () => B.Package });
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
this.openYAML = () => O.file(B.ZineData.Source).then(() => jsyaml.safeLoad(B.ZineData.Source.Content));
|
||||
|
||||
this.createPackageDocument = (YAML) => {
|
||||
const NS = {
|
||||
OPF: 'http://www.idpf.org/2007/opf',
|
||||
DC: 'http://purl.org/dc/elements/1.1/'
|
||||
};
|
||||
const Doc = document.implementation.createDocument(NS.OPF, 'package');
|
||||
// Package
|
||||
const Package = Doc.documentElement;
|
||||
Package.setAttribute('xmlns', NS.OPF);
|
||||
Package.setAttribute('xmlns:dc', NS.DC);
|
||||
// Metadata
|
||||
const Metadata = Package.appendChild(document.createElementNS(NS.OPF, 'metadata'));
|
||||
['identifier', 'language', 'title', 'creator', 'publisher'].forEach(Pro => {
|
||||
if(!YAML[Pro]) return;
|
||||
const Meta = Metadata.appendChild(document.createElementNS(NS.DC, 'dc:' + Pro));
|
||||
Meta.textContent = YAML[Pro];
|
||||
});
|
||||
['rendition-layout', 'rendition-orientation', 'rendition-spread'].forEach(Pro => {
|
||||
if(!YAML[Pro]) return;
|
||||
const Meta = Metadata.appendChild(document.createElementNS(NS.OPF, 'meta'));
|
||||
Meta.setAttribute('property', Pro.replace('-', ':'));
|
||||
Meta.textContent = YAML[Pro];
|
||||
});
|
||||
// Manifest & Spine
|
||||
const Manifest = Package.appendChild(document.createElementNS(NS.OPF, 'manifest'));
|
||||
['cover-image', 'nav'].forEach(Pro => {
|
||||
if(!YAML[Pro]) return;
|
||||
const Item = Manifest.appendChild(document.createElementNS(NS.OPF, 'item'));
|
||||
Item.setAttribute('id', Pro + '-item');
|
||||
Item.setAttribute('properties', Pro);
|
||||
Item.setAttribute('media-type', O.getContentType(YAML[Pro]));
|
||||
Item.setAttribute('href', YAML[Pro]);
|
||||
});
|
||||
const Spine = Package.appendChild(document.createElementNS(NS.OPF, 'spine'));
|
||||
if(YAML['page-progression-direction']) Spine.setAttribute('page-progression-direction', YAML['page-progression-direction']);
|
||||
YAML['spine'].forEach((ItemRefData, i) => {
|
||||
if(!ItemRefData) return;
|
||||
const ID = 'spine-item-' + (i + 1 + '').padStart(3, 0);
|
||||
const [Href, PageSpread] = ItemRefData.trim().replace(/\s+/, ' ').split(' ');
|
||||
const Item = Manifest.appendChild(document.createElementNS(NS.OPF, 'item'));
|
||||
Item.setAttribute('id', ID);
|
||||
Item.setAttribute('media-type', O.getContentType(Href));
|
||||
Item.setAttribute('href', Href);
|
||||
const ItemRef = Spine.appendChild(document.createElementNS(NS.OPF, 'itemref'));
|
||||
ItemRef.setAttribute('idref', ID);
|
||||
if(PageSpread) ItemRef.setAttribute('properties', 'page-spread-' + PageSpread);
|
||||
});
|
||||
return Promise.resolve(Doc);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
46
bibi/index.html
Normal file
46
bibi/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
|
||||
|
||||
<html id="bibi">
|
||||
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<title>This E-Book is Published with Bibi | EPUB Reader on your website.</title>
|
||||
|
||||
<!-- # Bibi | EPUB Reader on your website. : © Satoru Matsushima - https://bibi.epub.link or https://github.com/satorumurmur/bibi / Licensed under the MIT License - https://github.com/satorumurmur/bibi/blob/master/LICENSE -->
|
||||
|
||||
<!-- 「わたしのことは『ビビ』と呼んでください。『ビビ』はわたしの名前なんです」 —— エレクトラ・パブリケーヌ『ビビのみぎくるぶし』 -->
|
||||
<!-- 「まあ！ それじゃあやっぱり、『ビビ』はわたしの“名前”だったのですね？」 —— ソフィア・パインアイランド『ビビさんたちのこと』 -->
|
||||
<!-- 「このあたりにビビさんという人がいると聞いて来たのですが、あなたですか？」 —— ビビ・ララルー『ポケットに眼鏡』 -->
|
||||
|
||||
<link id="bibi-style" rel="stylesheet" href="resources/styles/bibi.css" />
|
||||
<link id="bibi-dress" rel="stylesheet" href="wardrobe/everyday/bibi.dress.css" />
|
||||
<script id="bibi-script" src="resources/scripts/bibi.js"></script>
|
||||
<script id="bibi-preset" src="presets/default.js" data-bibi-bookshelf=""></script>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body data-bibi-book="">
|
||||
|
||||
<div id="bibi-info">
|
||||
<h1>This E-Book is Published on the Web with Bibi | EPUB Reader on your website.</h1>
|
||||
<ul>
|
||||
<li><a href="https://bibi.epub.link">Bibi | EPUB Reader on your website. (Official Website / Japanese)</a></li>
|
||||
<li><a href="https://github.com/satorumurmur/bibi">Bibi on GitHub (English)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="bibi-book-data" data-bibi-book-mimetype="application/epub+zip" hidden="hidden">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
286
bibi/presets/README.md
Normal file
286
bibi/presets/README.md
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
|
||||
|
||||
|
||||
|
||||
プリセット指定マニュアル
|
||||
====================================================================================================
|
||||
|
||||
|
||||
|
||||
かんたんですが、プリセットについて解説します。今後マニュアルにまとめる計画ですので、読みづらさはしばしご容赦ください。
|
||||
※ ときどき、実際のプリセットファイルの内容に追いついていない場合があります。申し訳ありませんがご容赦ください（もしできればご指摘ください）。
|
||||
|
||||
|
||||
|
||||
プリセットとは / つかいかた
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
プリセットファイルとは、リーダとしてのデフォルト挙動やレイアウトの初期設定を外部化したテキストファイルです。これを編集することでビビの振る舞いをカスタマイズすることができます。
|
||||
|
||||
bibi/presets フォルダに入れて使うのが基本ですが、じつはどこか別の場所でも（余所のサーバでも）かまいません。
|
||||
|
||||
配布状態の bibi/index.html は bibi/presets/default.js を呼び出しています。設定を変更したいときは、この default.js を直接編集してもいいのですが、default.js を複製・リネームして別のプリセットを作成した上で、bibi/index.html から呼び出すファイルをそちらに変更することをお勧めします。
|
||||
|
||||
bibi/index.html も、たとえば bibi/the-great-book.html のように複製・リネームして使い分けることができるので、本ごとに HTML とプリセットの組み合わせを使い分けることができます。
|
||||
|
||||
|
||||
|
||||
カスタマイズについて、はじめに
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
以下、挙動をカスタマイズできる具体的な指定について説明しますが、多くは、対象とする EPUB によって一長一短があります。だからこそ、ビビ側で一律に固定せず、プリセットとして編集可能にしてあるというわけです。
|
||||
|
||||
読者自身が読みながらボタンで変更できる項目もありますが、ご自身で作成した EPUB を読者に見せたい場合や、ご自身で見た目をカスタマイズした Bibi を読者に使ってもらいたい場合など、EPUB に合わせたスタイルやあなたらしいスタイルを予めプリセットで指定しておくと、きっとステキだと思います。
|
||||
|
||||
|
||||
### この文書内で使用される用語の定義
|
||||
|
||||
アイテムとは、表示されるファイルひとつひとつのことです。
|
||||
|
||||
「見開き」とは、アイテムをつつむブロックです。リフロー指定のアイテムはそれ１つだけで「見開き」を構成します。固定レイアウトで左右ペアが作られている場合は、その２つが１つの「見開き」に入ります。
|
||||
|
||||
「長さ」は、進行方向サイズのことです。水平方向に進行しているときは左右幅、垂直なら上下高を指します。同様に「広さ」は、水平進行なら上下高、垂直なら左右幅です。そして、それらの数値が小さい状態を「短い」「狭い」ということにします。
|
||||
|
||||
これらの定義は EPUB もしくは電子書籍について一般に使われているわけではなく、あくまでビビ用語だと思ってください。
|
||||
|
||||
|
||||
|
||||
項目の説明１：基本設定
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
ビビのごく基本的な振る舞いを制御します。
|
||||
|
||||
|
||||
|
||||
### "bookshelf" …… bookshelf ディレクトリまでのパス
|
||||
|
||||
そのプリセットファイルからみた bookshelf ディレクトリのパスです。基本的には、同じウェブサーバ内の bookshelf ディレクトリまでの相対パス・ルート相対パス（"../../bibi-bookshelf/" や "/bibi-bookshelf/" など）を記述します。
|
||||
|
||||
高度な設定として、クロスオリジンリクエストが許可されているサーバの bookshelf ディレクトリを http(s):// から書くこともできます。ただし、そのサーバのオリジンは、この文書の最後に述べる "trustworthy-origins" に含まれていなければなりません。
|
||||
|
||||
|
||||
### "reader-view-mode" …… 表示モードの初期値（ページめくり・横スクロール・縦スクロール）
|
||||
|
||||
* "paged" を指定するとページめくりモード、
|
||||
* "horizontal" なら横スクロールモード、
|
||||
* "vertical" なら縦スクロールモード
|
||||
|
||||
……で表示を開始します。読者は随時変更できるので、あくまで最初にどのモードで表示するか、ということです。
|
||||
|
||||
|
||||
### "fix-reader-view-mode" …… 表示モードを固定して変更を禁止するかどうか
|
||||
|
||||
"yes", "no", "desktop", "mobile" の４つから選べます。
|
||||
|
||||
この項目の初期値は "no" で、そのままにしておくことをオススメします。
|
||||
|
||||
"yes" にするといつも、"desktop" ならパソコンのとき、"mobile" ならスマートフォンのときに、ユーザが表示モードを変更できなくなり、変更ボタンも表示されなくなります。コンテンツの性質によって禁止したほうがユーザ体験を向上させられるときに使います。
|
||||
|
||||
以降、"yes", "no", "desktop", "mobile" の４つから選択する形式の指定がいくつか登場しますが、切り替え条件はすべて同じです
|
||||
|
||||
|
||||
### "single-page-always" …… ２ページの見開きにせず１ページで表示させるかどうか
|
||||
|
||||
"yes", "no", "desktop", "mobile" から選択してください。
|
||||
|
||||
初期値は "no" で、その場合、横書きの本をページめくりモードまたは横スクロールモードで表示したとき、画面の横幅に余裕があれば、１画面あたり２ページの見開きで表示します。
|
||||
|
||||
"yes" にするといつも、"desktop" ならパソコンのとき、"mobile" ならスマートフォンのときに、画面の横幅が広くても常に１画面あたり１ページで表示させます。
|
||||
|
||||
|
||||
### "autostart" …… 貼り付け時、再生ボタンのクリックを待たずに自動的に本を開くかどうか
|
||||
|
||||
ビビはウェブページに埋め込んで使えますが、データ量の大きい本を自動再生すると、親ウェブページの読み込み処理を遅くしてしまう場合があります。とはいえ、軽い本なら自動再生してしまいたいかもしれませんし、パソコンとスマートフォンで挙動を切り替えたいこともあるでしょう。そこでこれも、"yes", "no", "desktop", "mobile" の値で、切り替えられるようにしました。
|
||||
|
||||
"yes" なら、どんなときもいつも自動再生します。"no" は逆に、必ず再生ボタンのクリック／タップを必要とします。"desktop" は、パソコンなら自動再生、スマートフォンでは再生ボタンの操作が必要になります。"mobile" は "desktop" の逆です。
|
||||
|
||||
|
||||
### "start-in-new-window" …… 貼り付け状態で再生ボタンを押したとき、新しいウィンドウで開くかどうか
|
||||
|
||||
貼り付け時、"autostart" の設定によって再生ボタンが表示された場合、その再生ボタンをクリック／タップしたとき、そのまま貼り付け状態で再生するか、新しいウィンドウで開くかどうかの設定です。これも "yes", "no", "desktop", "mobile" の４首から選べるようになっています。
|
||||
|
||||
"yes" はいつも別ウィンドウ、"no" はかならず埋め込み状態、"desktop" はパソコンなら別ウィンドウでスマートフォンなら埋め込み、"mobile" は "desktop" の逆、です。
|
||||
|
||||
ごく最近まで、ビビはいつも "mobile" と同じ挙動でした。スマートフォンでも埋め込んだまま起動したいという要望はちらほらとあったのですが、読むのに十分なパフォーマンスが出なかったためです。
|
||||
|
||||
が、どうやらそろそろまともに動くようになったようなので、任意で選べるようにしました。ただ、スマートフォンの場合、狭い画面内のさらに小さなフレームで開くと読者に不便を強いるかもしれません。よく気をつけて使ってみてください（ユーザは、メニュー内のボタンからいつでも別ウィンドウで開きなおせます。とはいえ）。
|
||||
|
||||
|
||||
### "use-nombre" …… ページ番号・パーセントインジケータを使うか
|
||||
|
||||
ページをめくったときなどに、ビビは現在のページと全体のうちのパーセンテージを表示します。これを使うかどうか決められます。
|
||||
|
||||
これも "yes", "no", "desktop", "mobile" の設定で、初期値は "yes" です。
|
||||
|
||||
|
||||
### "use-slider" …… ページスライダを使うか
|
||||
|
||||
画面の真ん中あたりをクリック／タップすると下端に出てくるページスライダの使用有無です。本の中の好きな位置にジャンプできる便利な UI で、有効になっていると、パソコンではページめくりモードのときに擬似的なスクロールバーの役割も兼ねます。
|
||||
|
||||
これも "yes", "no", "desktop", "mobile" の設定で、初期値は "yes" です。
|
||||
|
||||
|
||||
### "use-arrows" …… 画面端のクリック／タップに反応するページめくり機能を使うか
|
||||
|
||||
ビビは画面左右にページめくり領域を用意して、クリック／タップで操作できるようになっています。ただ、特別なプログラムを組んで埋め込まれた親ページやアプリに独自の UI をつけて不要になったりしたときは、消せるようにしてあります。
|
||||
|
||||
これも "yes", "no", "desktop", "mobile" の設定で、初期値は "yes" です。これがないとめくれなくなってしまう場合がほとんどなので、基本的には "yes" のままをおすすめします。
|
||||
|
||||
|
||||
### "use-keys" …… キーボード操作を受け付けるか
|
||||
|
||||
有効になっていると、キーボードのカーソルキーでもページ移動ができます。
|
||||
|
||||
これも "yes", "no", "desktop", "mobile" の設定で、初期値は "desktop" です。有効にしてもスマートフォンでは使えない機能なので、"desktop" か "no" をおすすめします。
|
||||
|
||||
|
||||
### "use-cookie" …… 状態を Cookie に保存して次回開いたときに再現するか
|
||||
|
||||
有効になっていると、最後に開いていたときの表示モードとページ位置を保存して、次回も同じ本は同じ状態で開始します。
|
||||
|
||||
本の特定には、ビビのディレクトリとEPUB のメタファイルに書かれた本の ID（identifier）の組み合わせが使われます。記録されるのは表示モードとページ位置だけで、この機能によってプライベートな情報が外部に漏れたりはしません。
|
||||
|
||||
これも "yes", "no", "desktop", "mobile" の設定で、初期値は "yes" です。パソコンとスマートフォンで挙動を分ける理由は特にないと思いますので、"yes" か "no" かで選ぶのがよいと思われます。
|
||||
|
||||
|
||||
### "cookie-expires" …… Cookie を保存するときの有効期限（単位：ミリ秒）
|
||||
|
||||
上の "use-cookie" が有効になっている場合に保存される Cookie の有効期限です。
|
||||
|
||||
単位はミリ秒（1/1000 秒）で、初期値は 1000 * 60 * 60 * 24 * 31。これは 1000 × 60 × 60 × 24 × 31 という意味で、最初の 1000 は 1/1000秒が1000なので1秒、つづけて、その60倍で1分、その60倍で1時間、その24倍で1日、その31倍なので、つまり31日間となっています（あらかじめ計算した値の 259200000 と書いておいても同じことですが、バラしたほうがわかりやすいかな、と）。
|
||||
|
||||
どんなに長くても１年以内にしておくのがいいと思います。たとえば読んでいる途中のリロードだけに対応したいなら数分程度でもいいのです。いろいろ試してみてください。
|
||||
|
||||
|
||||
### "ui-font-family" …… 目次やその他の基本 UI のフォント指定
|
||||
|
||||
たとえば、台湾では句読点をボックス中央に配置したフォントが一般的なのでそういうフォントを使いたい、などなどの事情があるとき、デフォルトフォントを指定できます。値は CSS の font-family そのままです。
|
||||
|
||||
これは本文には影響しません。あくまで、ビビの UI として表示される目次などのフォントです。
|
||||
|
||||
|
||||
|
||||
項目の説明２：本の中身の表示カスタマイズ
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
### "book-background" …… 「見開き」の下の背景
|
||||
|
||||
「見開き」の白い箱のうしろに、暗い色のエリアがあります。そのスタイルを変更できます。値は CSS の background そのままです。つまり背景画像なども使えます。
|
||||
|
||||
|
||||
### "spread-gap" …… 「見開き」と「見開き」の間隔
|
||||
|
||||
縦／横スクロールモード表示時の、「見開き」同士の間隔です。単位は px。
|
||||
|
||||
最初と最後の「見開き」とウィンドウ端の距離は、この値にかかわらず、ウィンドウの真ん中に来るようにウィンドウ端との距離が調節されます。
|
||||
|
||||
|
||||
### "spread-margin" …… 「見開き」とウィンドウの間隔
|
||||
|
||||
「見開き」とウィンドウの、「幅」方向（本の進行方向と垂直の軸）の間隔です。単位は px。
|
||||
|
||||
|
||||
### "spread-border-radius" …… 「見開き」のカド丸設定
|
||||
|
||||
「見開き」の白い箱のカドを丸めることができます。CSS の border-radius に適用する値そのままです。
|
||||
|
||||
|
||||
### "spread-box-shadow" …… 「見開き」に影を付けるなら CSS を
|
||||
|
||||
「見開き」の白い箱に影をつけられます。CSS の box-shadow に適用する値そのままです。
|
||||
|
||||
影を付けるとすこしスクロールがもたつくかもしれませんので、ないほうがいいかもしれません。不要なら "none" もしくは "" としてください。
|
||||
|
||||
|
||||
### "item-padding-left" / "****-right" / "****-top" / "****-bottom" …… 各アイテム内の余白
|
||||
|
||||
「見開き」の内側、EPUB 内の各 HTML が描画される領域までの余白です。数値の単位はすべて px（ピクセル）。
|
||||
|
||||
グチですが……ホントは全部 0 でいいはずじゃないかと思うんです。EPUB 内の CSS で作者が制御できるなら、その方がいいはずだから。でも、世間には制御不能な余白をつけるリーディングシステムも多く、そうしたリーディングシステムに合わせて、余白を設定していないか狭めにしている EPUB はかなり多いです。この項目はそのためにあります。
|
||||
|
||||
EPUB 内の HTML に適用された背景色・背景画像もこの余白に反映されるように処理しています。ただし、本が固定レイアウトのときは無視され、ビビによる余白調整は行われません。
|
||||
|
||||
|
||||
|
||||
項目の説明３：エクステンション
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
ビビには、連携プログラムを追加して機能を拡張できる仕組みが用意されています。こういう仕組みは一般にプラグイン、エクステンション、機能拡張などといわれますが、ビビではエクステンションと呼ぶことにしました（ビビは女の子なので、アクセサリっぽいのがいいでしょう？）。
|
||||
|
||||
|
||||
### エクステンションの基本
|
||||
|
||||
たとえば、example という名前のあたらしいエクステンションを手に入れたとします。そのエクステンションが example/script.js というフォルダ構成になっていれば、まず、example フォルダを bibi/extensions/ フォルダに入れます。
|
||||
|
||||
次に、プリセットファイル内の "extensions" で始まる行の次の行に、
|
||||
|
||||
```
|
||||
{ "src": "../extensions/example/script.js" },
|
||||
```
|
||||
|
||||
……と書き足します。"src" に指定するのは、そのプリセットファイルからの相対パスです（bookshelf ディレクトリの項目で説明したのと同じように、bibi/extensions 以外のフォルダに置いたファイルや、許可されていれば別サーバを指定することもできます）
|
||||
|
||||
すると、ビビは起動時にそのエクステンションを追加で読み込み、エクステンションの機能が有効になります。
|
||||
|
||||
配布時にいくつか同梱されていますが、これらはどれも、必要に応じて自動で読み込まれるか、必要だと思う人が自分で有効化すればよいようにデフォルトでは読み込まないようにしてあるか、どちらかです。以下、同梱エクステンションについて説明します。
|
||||
|
||||
|
||||
### "Unzipper" …… 展開していない（＝ Zip アーカイブ済みの）EPUB を扱えるようにする
|
||||
|
||||
必要に応じて自動的に読み込まれる特殊なエクステンションです。
|
||||
|
||||
EPUB は ZIP フォーマットでアーカイブされており、ブラウザはふつうは ZIP アーカイブの内部にあるファイルを扱えませんが、このエクステンションによって、ビビはアーカイブ状態の EPUB も扱えるようになります。
|
||||
|
||||
受信したパソコン／スマートフォンでビビが展開して処理する必要があるため、EPUB のファイルサイズが 10MB を超えるあたりから、読み始められるまでの処理時間の長さが顕著になってきます。そもそも重くて転送時間のかかるファイルを受信した上でにさらに展開処理が発生するので、仕方のないことです。また、古くて非力なスマートフォンなどでは、展開の処理負荷で表示以前にビビが止まってしまうこともあります。
|
||||
|
||||
ただし最近の改善によって、軽い本の場合は、展開済みの各ファイルをバラバラにダウンロードするよりも読み込みが効率化されて、高速・低負荷になる場合もあります。一度表示してしまえば動作速度に大きな差はありません。
|
||||
|
||||
ちょっと前まで、ビビを使って本を公開するときには、あらかじめ展開しておくことをおすすめしていました。が、Internet Explorer でも展開できるようになり、全般的に速度も改善し、場合によっては Zip のままのほうが速いこともあるので、「予め展開しておくほうが速い場合が多いですよ」程度の推奨に緩めることにします。
|
||||
|
||||
数年前のビビ開発初期はむしろアーカイブ状態のままでしか扱えなかったくらいビビの基本的な機能で、また、圧縮ファイルをドラッグ＆ドロップで開けるのも、自作 EPUB のプレビューなどに便利なビビのメリットです。
|
||||
|
||||
|
||||
### "Analytics" …… Google Analytics でユーザの行動を分析できるようになる
|
||||
|
||||
本をウェブで公開するとなると、どれだけの人が再生ボタンをクリックしたか、目次のどの項目がクリックされたか、最後まで読んだか、などなど、気になってくると思います。これらを、Google Analytics のイベントトラッキング機能を使って記録できるようにします。
|
||||
|
||||
Google Analytics の基本機能として同時に記録される OS や アクセス元言語圏などなども合わせて、読まれた状況をさまざまに分析できるようになります。
|
||||
|
||||
有効化する際には、"src" に加えて "tracking-id" という値で Google Analytics のトラッキング ID（書式：UA-XXXXXXXX-X）を書き足す必要があります。
|
||||
|
||||
現在記録されるのは、下に挙げるユーザ行動です。ほかに記録・分析したいことがあれば、作者にご要望をお寄せください。
|
||||
|
||||
* 再生ボタンのクリック／タップ
|
||||
* 目次項目のクリック／タップ
|
||||
* 最後のページの表示
|
||||
|
||||
最近、ビビを使ったお仕事の中で、非常にたくさんの情報を記録する独自拡張を開発しました。そのクライアントのご厚意で、処理自体はオープンソース化するご許可をいただいていますので、そのうち、大きく拡張するかもしれません。
|
||||
|
||||
|
||||
|
||||
### "EPUBCFI" …… EPUBCFI 仕様の位置・範囲指定を利用できるようにする
|
||||
|
||||
EPUBCFI は、複数ファイルで構成される EPUB 内の、特定ファイルの特定段落の何文字目から何文字目、といった位置・範囲を指定することができる仕組みです。「これこれについてはこの本のここにかいてあります」といったリンクで人に伝えたりしやすくなります。論文の引用などにも使えますね。
|
||||
|
||||
EPUB ビューワは EPUBCFI に対応していることが望ましい、ということになっており、実際うまくつかえば便利なのでビビも部分的に対応してみたのですが……書式が「人間の読み書きできるもんじゃねえ」という感じだからか、EPUBCFI 仕様自体があまりつかわれていません。このプラグインも、仕様に用意された機能の完全対応は諦めて、位置の指定のみに対応して開発が止まっています（範囲指定はごく部分的にしか扱えません）。
|
||||
|
||||
ビビには、EPUBCFI を使わなくても本の途中を指定して開く機能を別につけてあります。それは EPUB の基本仕様ではなく独自機能ですが、もうすこしわかりやすく直感的な書式で指定できるようになっています。別途解説予定ですので、おたのしみに（といってぜんぜん解説しないままですみません）
|
||||
|
||||
|
||||
|
||||
項目の説明４：高度な設定（普通の使い方をするかぎり変更しないことをおすすめします）
|
||||
----------------------------------------------------------------------------------------------------
|
||||
|
||||
"trustworthy-origins" …… bookshelf ディレクトリの場所や Message の送信元として許可するオリジン
|
||||
|
||||
必要であれば外部のオリジンを列挙することで、bookshelf を外部サーバに置いたり、別サーバからの Message で動作指示を受け取ったりできるようになります。なにも書かなくても、ビビ自体が置かれたサーバのオリジンは許可されます。
|
||||
|
||||
たとえばここに "https://dl.dropboxusercontent.com" を加えれば、自分のウェブサーバに設置したビビから Dropbox の公開フォルダに置いた EPUB を読み込んだりできるようになります。ただし、このオリジンはどんな Dropbox ユーザの公開フォルダの URL でも共通なので、まったく知らない誰かが、その人の Dropbox 公開フォルダに置いた EPUB を、あなたのビビで、表示させることもできるようになります。
|
||||
|
||||
十分に注意して、ドキュメントルート以下すべてが自分の管理下にあるサーバのみを加えるのがいいと思います（その条件では、Dropbox も除外されます）。
|
||||
|
||||
もちろん、その外部サーバがビビの置かれたサーバまたはすべての外部サーバからのリクエストを許可していなければ、ここに加えても読み込むことはできません。
|
||||
|
||||
206
bibi/presets/default.js
Normal file
206
bibi/presets/default.js
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
Bibi.preset({
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- Bookshelf
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
"bookshelf" : "../../bibi-bookshelf", // Relative path from this preset file to the bookshelf directory. "/" at the end is ignored. (To use a path begins with "http(s)://", read <01> at the bottom of this preset file.)
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- Behavior
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
"reader-view-mode" : "paged", // "paged" or "horizontal" or "vertical" ("paged" is for flipping, "horizontal" and "vertical" are for scrolling)
|
||||
"full-breadth-layout-in-scroll" : "no", // "yes" or "no" or "desktop" or "mobile"
|
||||
"fix-reader-view-mode" : "no", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"keep-settings" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"resume-from-last-position" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"autostart" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"autostart-embedded" : "no", // "yes" or "no" or "desktop" or "mobile" (It takes priority over "autostart" when the book is embedded in a webpage)
|
||||
"start-embedded-in-new-window" : "mobile", // "yes" or "no" or "desktop" or "mobile" (It is used only when "autostart" (or "autostart-embedded") is NOT enabled)
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- UI / Design
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
"use-menubar" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"use-full-height" : "yes", // "yes" or "no" or "desktop" or "mobile". If "use-menubar" is interpreted as "no", "use-full-height" is always treated as "yes".
|
||||
|
||||
"use-arrows" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"flipper-width" : 0.25, // Number of ratio (less than 1) or pixel (1 or greater)
|
||||
|
||||
"use-keys" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"use-slider" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"flip-pages-during-sliding" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"use-nombre" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"use-font-size-changer" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"base-font-size" : "auto", // Number of pixel or "auto"
|
||||
"font-size-scale-per-step" : 1.25, // Number of scale
|
||||
|
||||
"use-loupe" : "desktop", // "yes" or "no" or "desktop" or "mobile" (Note: Loupe buttons will not appear in touch-devices even if it is set "yes" or "mobile".)
|
||||
"loupe-max-scale" : 4, // Number of scale (greater than 1)
|
||||
"loupe-scale-per-step" : 1.6, // Number of scale (greater than 1, less than or equal to "loupe-max-scale")
|
||||
"zoom-out-for-utilities" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"use-history" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"max-history" : 19, // Number (0-19). If larger than 19, treated as 19. If 0, "use-history" is treated as "no".
|
||||
|
||||
"use-bookmarks" : "yes", // "yes" or "no" or "desktop" or "mobile"
|
||||
"max-bookmarks" : 3, // Number (0-9). If larger than 9, treated as 9. If 0, "use-bookmarks" is treated as "no" (but old data is kept in localStorage).
|
||||
|
||||
"orientation-border-ratio" : 1 * 2 / 1.5, // Number (Width per Height)
|
||||
|
||||
"ui-font-family" : "", // CSS font-family value as "'Helvetica', sans-serif" or ""
|
||||
|
||||
"item-padding-left" : 24, // Number of pixel (It affects only for reflowable books.)
|
||||
"item-padding-right" : 24, // Number of pixel (It affects only for reflowable books.)
|
||||
"item-padding-top" : 48, // Number of pixel (It affects only for reflowable books.)
|
||||
"item-padding-bottom" : 24, // Number of pixel (It affects only for reflowable books.)
|
||||
|
||||
"spread-gap" : 48, // Number of pixel (It affects only in paged view mode.)
|
||||
"spread-margin" : 0, // Number of pixel
|
||||
|
||||
"fix-nav-ttb" : "no", // "yes" or "no" or "desktop" or "mobile"
|
||||
|
||||
"on-doubletap" : "",
|
||||
"on-tripletap" : "",
|
||||
|
||||
"content-draggable" : [true, true], // [<TF>, <TF>]
|
||||
"orthogonal-arrow-keys" : ["move", "switch"], // [<S1>, <S2>]
|
||||
"orthogonal-edges" : ["utilities", "utilities"], // [<S1>, <S2>]
|
||||
"orthogonal-touch-moves" : ["move", "switch"], // [<S1>, <S2>]
|
||||
"orthogonal-wheelings" : ["move", "across"], // [<S1>, <S3>]
|
||||
// ^ Each item of the arrays corresponds to the view mode:
|
||||
// * the first is for the "paged" view mode, and
|
||||
// * the second is for the "horizontal"/"vertical" scroll view modes.
|
||||
// ^ Types of the values:
|
||||
// * <TF>: true or false
|
||||
// * <S1>: "" (ignore) or "utilities" or "move"
|
||||
// * <S2>: "" (ignore) or "utilities" or "move" or "switch"
|
||||
// * <S3>: "" (ignore) or "utilities" or "move" or "switch" or "across"
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- Extensions
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
// "src" is relative path from this preset file to the JavaScript file of the extension.
|
||||
// "id" must be defined in each extension file.
|
||||
"extensions": [
|
||||
// { "src": "../extensions/FOLDER-NAME-IF-EXISTS/FILE-NAME.js" }, // <THIS LINE IS AN EXAMPLE>
|
||||
""],
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- Extra
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
"website-name-in-title" : "", // "" or name of your website replaces string "Bibi" in <title>.
|
||||
"website-name-in-menu" : "", // "" or name of your website appears in setting-menu as a link. (Requires "website-href")
|
||||
"website-href" : "", // "" or URL of your website to be used for the link in setting-menu. (Requires "website-name-in-menu")
|
||||
"remove-bibi-website-link" : false, // true or false (if true, the link to Bibi Website is not to be added in setting-menu)
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- System
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
"extract-if-necessary" : [".epub", ".zip"], // File extensions of the book specified in URL, which you want Bibi to try to extract first. (More info is <02> at the bottom of this preset file.)
|
||||
|
||||
"default-page-progression-direction" : "ltr", // "ltr" or "rtl". Most of EPUBs have right property in itself, but....
|
||||
|
||||
"accept-local-file" : "yes", // "yes" or "no" or "desktop" or "mobile". (If it is enabled, Bibi prepares UI for loading files. Conditions for acceptance are <03> at the bottom of this preset file.)
|
||||
"accept-bibizine" : true, // true or false (If true, Bibi accepts EPUB-like bibiZine formated book. If you are interested in it, please contact the author)
|
||||
"accept-blob-converted-data" : true, // true or false (If true, Bibi accepts BLOB object converted from a EPUB File. If you are interested in it, please contact the author)
|
||||
"accept-base64-encoded-data" : true, // true or false (If true, Bibi accepts Base64 string encoded from a EPUB File. If you are interested in it, please contact the author)
|
||||
|
||||
"pagination-method" : "auto", // "auto" or "x". (It affects only for vertical-text reflowable books. More info is <04> at the bottom of this preset file.)
|
||||
"allow-placeholders" : true, // true or false. (true is highly recommended.)
|
||||
"prioritise-fallbacks" : false, // true or false (If true, Bibi uses <item> at the end of the fallback-chain.)
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
//-- DANGER ZONE
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
// If you publish Bibi online,
|
||||
// * keep these options as default, or/and
|
||||
// * keep your Bibi and website not to open files which you can not guarantee its security.
|
||||
//----------------------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/* !!!! BE CAREFUL !!!! */ "allow-scripts-in-content" : false, // true or false (false is recommended).
|
||||
// If you change its value `true`, Bibi does not remove scripts natively-included in EPUB.
|
||||
// It makes Bibi to be able to open EPUBs including useful scripts.
|
||||
// But on the other hand, it may also allow XSS of malicious EPUB in some cases.
|
||||
|
||||
/* !!!! BE CAREFUL !!!! */ "trustworthy-origins" : [], // origins you trust other than where this Bibi is installed. (blank is recommended).
|
||||
// If you add origins to it, Bibi is made to open not only EPUBs in the same origin as Bibi itself is installed but also EPUBs in remote origins.
|
||||
// It is useful for some cases like that you want to set directory on the other storaging server as "bookshelf".
|
||||
// But note that not to set an origin where someone else also can publish files.
|
||||
// If you do so, someone else can publish one's EPUB as it is on your website, and it may also allow XSS of malicious EPUB in some cases.
|
||||
|
||||
|
||||
/*
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
|
||||
|
||||
## <01> You can use a path begins with "http(s)://" for "bookshelf" option in cases of the below:
|
||||
|
||||
* The origin of the path defined in the "bookshelf" option is same as the origin of this Bibi.
|
||||
* [OR] The origin is included in "trustworthy-origins" option.
|
||||
- [AND] The origin allows COR from the origin of this Bibi.
|
||||
|
||||
|
||||
## <02> Bibi tries to extract at first in cases of the below:
|
||||
|
||||
* The "extract-if-necessary" option includes "*".
|
||||
* [OR] The "extract-if-necessary" option includes one or more file extensions.
|
||||
- [AND] The book name specified as a value of the `book` (or `zine`) query in URL has a file extension.
|
||||
- [AND] The file extension of the book name is included in the "extract-if-necessary" option.
|
||||
* [OR] The "extract-if-necessary" option is "".
|
||||
- [AND] The book name specified as a value of the `book` (or `zine`) query in URL has no file extension.
|
||||
|
||||
### Note:
|
||||
* If Bibi failed to extract it, automatically tries to load as a folder (directory).
|
||||
* The "extract-if-necessary" option affects also as conditions for acceptance of local file. Read <03> at the next.
|
||||
|
||||
|
||||
## <03> Bibi accepts user's local file in cases of the below:
|
||||
|
||||
* The file is an EPUB.
|
||||
- [AND] The extension of the file is ".epub".
|
||||
- [AND] The "extract-if-necessary" option includes ".epub" or "*".
|
||||
- [AND] The MIME-Type sent from the browser is "application/epub+zip".
|
||||
* [OR] The file is a bibiZine.
|
||||
- [AND] The extension of the file is ".zip".
|
||||
- [AND] The "extract-if-necessary" includes ".zip" or "*".
|
||||
- [AND] The MIME-Type sent from the browser is "application/zip", "application/x-zip", or "application/x-zip-compressed".
|
||||
|
||||
### Note:
|
||||
* Extension of the file is required even if "extract-if-necessary" is "" (or includes "*").
|
||||
|
||||
|
||||
## <04> Setting "x" for "pagination-method" option
|
||||
|
||||
It affects only for reflowable vertical-text books.
|
||||
If "x" is set for "pagination-method", Bibi tries to use an experimental layout method on modern web-browsers.
|
||||
It realizes more prettier layout for simple books like novels.
|
||||
But sometime causes bad result for some books with figures or floating objects.
|
||||
|
||||
|
||||
//==============================================================================================================================================
|
||||
|
||||
|
||||
*/
|
||||
|
||||
|
||||
"bibi": "EPUB Reader on your website." });
|
||||
65
bibi/resources/scripts/bibi.book.scss
Normal file
65
bibi/resources/scripts/bibi.book.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*! Bibi Book Style */
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none 0;
|
||||
}/*
|
||||
|
||||
html.bibi-vertical-text { &, & body {
|
||||
max-height: 100%;
|
||||
}}
|
||||
|
||||
html.bibi-horizontal-text { &, & body {
|
||||
max-width: 100%;
|
||||
}}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}*/
|
||||
|
||||
html {
|
||||
img.bibi-spine-item-image {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border: none 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
html.bibi-columned {
|
||||
img, svg, video, picture, image, iframe {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
html.bibi-flick-active {
|
||||
&.bibi-flick-hot { user-select: none; }
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.bibi-with-gutters {
|
||||
> head {
|
||||
display: block;
|
||||
> *:not(bibi-neck) { display: none; }
|
||||
> bibi-neck {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: -99999999999;
|
||||
margin: 0;
|
||||
border: none 0;
|
||||
padding: 0;
|
||||
> bibi-throat {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
border: none 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6116
bibi/resources/scripts/bibi.heart.js
Normal file
6116
bibi/resources/scripts/bibi.heart.js
Normal file
File diff suppressed because it is too large
Load diff
39
bibi/resources/scripts/bibi.js
Normal file
39
bibi/resources/scripts/bibi.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import sML from 'sml.js'; self.sML = sML;
|
||||
import * as _ from './bibi.heart.js'; for(const m in _) self[m] = _[m];
|
||||
|
||||
require('./bibi.book.scss');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
Bibi.Script = document.getElementById('bibi-script');
|
||||
(_ => {
|
||||
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);
|
||||
const Polyfills = [], PolyfillsPath = new URL('./polyfills', Bibi.Script.src).href;
|
||||
if(!window.TextDecoder) Polyfills.push(PolyfillsPath + '/encoding.js');
|
||||
if(!window.IntersectionObserver) Polyfills.push(PolyfillsPath + '/intersection-observer.js');
|
||||
if(!Polyfills.length) return _();
|
||||
const Promises = [];
|
||||
Polyfills.forEach(Polyfill => Promises.push(new Promise(resolve => document.head.insertBefore(sML.create('script', { className: 'bibi-polyfill', src: Polyfill, onload: resolve }), Bibi.Script))));
|
||||
Promise.all(Promises).then(_);
|
||||
})(() => {
|
||||
let BookStyleCSS = '', BookStyleElement = Bibi.Script.nextElementSibling;
|
||||
while(BookStyleElement) {
|
||||
if(/^style$/i.test(BookStyleElement.tagName) && /^\/\*! Bibi Book Style \*\//.test(BookStyleElement.textContent)) {
|
||||
BookStyleCSS = BookStyleElement.textContent.replace(/\/*.*?\*\//g, '').trim();
|
||||
BookStyleElement.innerHTML = '';
|
||||
document.head.removeChild(BookStyleElement);
|
||||
break;
|
||||
} else BookStyleElement = BookStyleElement.nextElementSibling;
|
||||
}
|
||||
Bibi.BookStyleURL = O.createBlobURL('Text', BookStyleCSS, 'text/css');
|
||||
if(sML.UA.Trident) {
|
||||
document.documentElement.style.display = 'none';
|
||||
const BibiStyles = Array.prototype.map.call(document.head.querySelectorAll('#bibi-style, #bibi-dress'), _ => { _.HREF = _.getAttribute('href'), _.href = ''; return _; });
|
||||
return setTimeout(() => {
|
||||
BibiStyles.forEach(_ => { _.href = _.HREF; delete _.HREF; });
|
||||
document.documentElement.style.display = '';
|
||||
Bibi.hello();
|
||||
}, 0);
|
||||
}
|
||||
Bibi.hello();
|
||||
});
|
||||
});
|
||||
10
bibi/resources/scripts/polyfills/bundle.js
Normal file
10
bibi/resources/scripts/polyfills/bundle.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import 'classlist-polyfill';
|
||||
import { TextDecoder } from 'text-encoding-utf-8'; self.TextDecoder = TextDecoder;
|
||||
import 'intersection-observer';
|
||||
import 'custom-event-polyfill';
|
||||
import 'current-script-polyfill';
|
||||
import 'es6-object-assign/auto';
|
||||
import 'native-promise-only';
|
||||
import 'polyfill-array-includes';
|
||||
import 'string.padstart';
|
||||
import 'url-polyfill';
|
||||
1
bibi/resources/scripts/polyfills/encoding.js
Normal file
1
bibi/resources/scripts/polyfills/encoding.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
import { TextDecoder } from 'text-encoding-utf-8'; self.TextDecoder = TextDecoder;
|
||||
|
|
@ -0,0 +1 @@
|
|||
import 'intersection-observer';
|
||||
125
bibi/resources/styles/_#globals.scss
Normal file
125
bibi/resources/styles/_#globals.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
// ================================================================================
|
||||
// + MixIns
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
@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); }
|
||||
@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); }
|
||||
@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); }
|
||||
|
||||
@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); }
|
||||
@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); }
|
||||
|
||||
@mixin padding-v($T, $B: $T) { padding-top: $T; padding-bottom: $B; } @mixin padding-tb($T, $B: $T) { @include padding-v($T, $B); }
|
||||
@mixin padding-h($L, $R: $L) { padding-left: $L; padding-right: $R; } @mixin padding-lr($L, $R: $L) { @include padding-h($L, $R); }
|
||||
|
||||
@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); }
|
||||
@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); }
|
||||
@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); }
|
||||
|
||||
@mixin min($Min) { @media screen and (min-width: #{$Min}) { @content; } }
|
||||
@mixin max($Max) { @media screen and (max-width: #{$Max}) { @content; } }
|
||||
@mixin min-max($Min, $Max) { @media screen and (min-width: #{$Min}) and (max-width: #{$Max}) { @content; } }
|
||||
@mixin max-min($Max, $Min) { @include min-max($Min, $Max) { @content; } }
|
||||
|
||||
@mixin keyframes($N) { @-webkit-keyframes #{$N} { @content; } @-epub-keyframes #{$N} { @content; } @-moz-keyframes #{$N} { @content; } @-ms-keyframes #{$N} { @content; } @keyframes #{$N} { @content; } }
|
||||
|
||||
@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; }
|
||||
|
||||
@mixin prefix($P, $V) { -webkit-#{$P}: $V; -epub-#{$P}: $V; -moz-#{$P}: $V; -ms-#{$P}: $V; @content; #{$P}: $V; }
|
||||
|
||||
@mixin writing-mode($V, $D: ltr) {
|
||||
@include prefix(writing-mode, $V) {
|
||||
$V2: null;
|
||||
@if $V == vertical-lr { $V2: tb-lr; }
|
||||
@else if $V == vertical-rl { $V2: tb-rl; }
|
||||
@else if $D == rtl { $V2: rl-tb; }
|
||||
@else { $V2: lr-tb; }
|
||||
@if $V2 != null { -ms-writing-mode: $V2; }
|
||||
}
|
||||
direction: $D;
|
||||
}
|
||||
|
||||
@mixin NonVisual() {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Temporary
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Scrollbars
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$TEMPORARY__Scrollbar-Track_Size: 15px;
|
||||
$TEMPORARY__Scrollbar-Thumb_Size: 8px;
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Invariables
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Z-Indexes
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$INVARIABLE__Main_ZIndex: 1;
|
||||
$INVARIABLE__Main-Book_ZIndex: 1;
|
||||
|
||||
$INVARIABLE__Scrollbar_ZIndex: $INVARIABLE__Main_ZIndex + 1;
|
||||
|
||||
$INVARIABLE__Sub_ZIndex: 10;
|
||||
|
||||
$INVARIABLE__Veil_ZIndex: 100;
|
||||
$INVARIABLE__Veil-Cover_ZIndex: 1;
|
||||
$INVARIABLE__Veil-Play_ZIndex: 10;
|
||||
$INVARIABLE__Veil-ByeBye_ZIndex: 100;
|
||||
|
||||
$INVARIABLE__Catcher_ZIndex: $INVARIABLE__Veil_ZIndex + 1;
|
||||
|
||||
$INVARIABLE__Panel_ZIndex: 1000;
|
||||
|
||||
$INVARIABLE__Slider_ZIndex: 10000;
|
||||
$INVARIABLE__Nombre_ZIndex: $INVARIABLE__Slider_ZIndex + 1;
|
||||
|
||||
$INVARIABLE__Menu_ZIndex: 100000;
|
||||
$INVARIABLE__Arrow_ZIndex: $INVARIABLE__Menu_ZIndex + 1;
|
||||
$INVARIABLE__Subpanel_ZIndex: $INVARIABLE__Menu_ZIndex + 10;
|
||||
|
||||
$INVARIABLE__PoweredBy_ZIndex: 1000000;
|
||||
|
||||
$INVARIABLE__Help_ZIndex: 10000000;
|
||||
|
||||
$INVARIABLE__Notifier_ZIndex: 100000000;
|
||||
|
||||
$INVARIABLE__Spinner_ZIndex: 99999999999;
|
||||
|
||||
|
||||
// - MixIns
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin GLOBAL__FontIcon_BaseStyles($SCOPED__FamilyName, $SCOPED__FontSize: 100%, $SCOPED__LineHeight: 1) {
|
||||
font: #{$SCOPED__FontSize} / #{$SCOPED__LineHeight} $SCOPED__FamilyName;
|
||||
font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "calt"; text-transform: none;
|
||||
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
|
||||
speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
19
bibi/resources/styles/_@parts.scss
Normal file
19
bibi/resources/styles/_@parts.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "stage";
|
||||
@import "main";
|
||||
|
||||
@import "menu";
|
||||
|
||||
@import "slider";
|
||||
|
||||
@import "notifier";
|
||||
@import "veil";
|
||||
@import "help";
|
||||
|
||||
@import "panel";
|
||||
@import "subpanels";
|
||||
|
||||
@import "icons";
|
||||
|
||||
@import "nombre";
|
||||
@import "arrows";
|
||||
@import "spinner";
|
||||
120
bibi/resources/styles/_arrows.scss
Normal file
120
bibi/resources/styles/_arrows.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
// ================================================================================
|
||||
// + Arrows
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div.bibi-arrow {
|
||||
//// Layout
|
||||
& {
|
||||
pointer-events: none;
|
||||
display: none; html.arrows-active & { display: block; }
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Arrow_ZIndex;
|
||||
margin: auto;
|
||||
line-height: 1;
|
||||
&:before, &:after {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
&:before { // icon
|
||||
z-index: 2;
|
||||
// @____Bibi:Dress__('-') @include Arrow-Icon();
|
||||
}
|
||||
&:after { // edge shadow
|
||||
//display: none !important;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
html.appearance-horizontal & {
|
||||
// ←→
|
||||
bottom: auto; width: 0;
|
||||
&:before { top: 0; bottom: 0; }
|
||||
&:after { top: 0; bottom: 0; height: 100%;
|
||||
// @____Bibi:Dress__('-') width: $Arrow-Bar_Width;
|
||||
}
|
||||
}
|
||||
html.appearance-horizontal.book-full-height:not(.slider-opened) & {
|
||||
top: 0;
|
||||
height: 100vh; // TO BE OVERWRITTEN
|
||||
}
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &,
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height) & {
|
||||
// @____Bibi:Dress__('-') top: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height):not(.slider-opened) & {
|
||||
// @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height}); // TO BE OVERWRITTEN
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal.book-full-height.slider-opened &,
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal:not(.book-full-height).slider-opened & {
|
||||
// @____Bibi:Dress__('-') height: calc(100vh - #{$Menu_Height + $Slider_Size});
|
||||
// @____Bibi:Dress__('-') }
|
||||
html.appearance-vertical & {
|
||||
// ↑↓
|
||||
left: 0; right: auto; height: 0;
|
||||
&:before { left: 0; right: 0; }
|
||||
&:after { left: 0; right: 0; width: 100%;
|
||||
// @____Bibi:Dress__('-') height: $Arrow-Bar_Width;
|
||||
}
|
||||
}
|
||||
html.appearance-vertical:not(.slider-opened) & {
|
||||
width: 100vw; // TO BE OVERWRITTEN
|
||||
}
|
||||
// @____Bibi:Dress__('-') html.appearance-vertical.slider-opened & {
|
||||
// @____Bibi:Dress__('-') width: calc(100vw - #{$Slider_Size});
|
||||
// @____Bibi:Dress__('-') }
|
||||
html.busy & {
|
||||
&:before, &:after { opacity: 0 !important; transition: none !important; }
|
||||
}
|
||||
//// Interaction
|
||||
& {
|
||||
&:before, &:after { transition-duration: .4s; }
|
||||
&:before { opacity: 0.00; transform: scale(1.10); transition-timing-function: cubic-bezier(.2, .8, .8, 1.6); }
|
||||
&:after { opacity: 1.00; transition-timing-function: ease-out; }
|
||||
}
|
||||
&.available.hover {
|
||||
cursor: pointer;
|
||||
&:before, &:after { transition-duration: .2s; }
|
||||
&:before { opacity: 1.00; transform: scale(1.10); }
|
||||
}
|
||||
&.available.active {
|
||||
&:before, &:after { transition-duration: .1s; }
|
||||
&:before { opacity: 0.75; transform: scale(1.00); }
|
||||
}
|
||||
&.available.glowing {
|
||||
&:before, &:after { transition-duration: .1s; }
|
||||
&:before { opacity: 1.00; transform: scale(1.10); }
|
||||
}
|
||||
}
|
||||
|
||||
// @____Bibi:Dress__('-') html.appearance-ttb.book-full-height.slider-opened div#bibi-arrow-back,
|
||||
// @____Bibi:Dress__('-') html.appearance-ttb:not(.book-full-height) div#bibi-arrow-back {
|
||||
// @____Bibi:Dress__('-') & {
|
||||
// @____Bibi:Dress__('-') &:before { margin-top: $Menu_Height; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
|
||||
@mixin Arrow-Base($SCOPED__Arrow_Dir, $SCOPED__Arrow_TransformOrigin) {
|
||||
& {
|
||||
#{$SCOPED__Arrow_Dir}: 0;
|
||||
&:before, &:after { transform-origin: $SCOPED__Arrow_TransformOrigin; }
|
||||
&:before { #{$SCOPED__Arrow_Dir}: 8px; }
|
||||
&:after { background: linear-gradient(to $SCOPED__Arrow_Dir, transparent, rgba(black, 0) 25%, rgba(black, 0.1)); opacity: 0; }
|
||||
}
|
||||
&.available.hover, &.available.glowing {
|
||||
&:after { opacity: 1; }
|
||||
}
|
||||
&.available.glowing {
|
||||
&:before { #{$SCOPED__Arrow_Dir}: 8px; }
|
||||
}
|
||||
}
|
||||
|
||||
html.appearance-ltr div#bibi-arrow-back,
|
||||
html.appearance-rtl div#bibi-arrow-forward { /* ← */ @include Arrow-Base(left, 0% 50%); }
|
||||
|
||||
html.appearance-ltr div#bibi-arrow-forward,
|
||||
html.appearance-rtl div#bibi-arrow-back { /* → */ @include Arrow-Base(right, 100% 50%); }
|
||||
|
||||
html.appearance-ttb div#bibi-arrow-back { /* ↑ */ @include Arrow-Base(top, 50% 0%); }
|
||||
|
||||
html.appearance-ttb div#bibi-arrow-forward { /* ↓ */ @include Arrow-Base(bottom, 50% 100%); }
|
||||
45
bibi/resources/styles/_help.scss
Normal file
45
bibi/resources/styles/_help.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// ================================================================================
|
||||
// + Help
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-help {
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Help_ZIndex;
|
||||
@include offset(auto, auto, 0, 0);
|
||||
margin: 0;
|
||||
padding: 0 8px 0 56px;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: .2s linear;
|
||||
bottom: 0;
|
||||
// @____Bibi:Dress__('-') border-top: $Help_BorderTop;
|
||||
// @____Bibi:Dress__('-') height: $Help_Height;
|
||||
// @____Bibi:Dress__('-') background: $Help_Background;
|
||||
// @____Bibi:Dress__('-') html.slider-opened.view-paged &,
|
||||
// @____Bibi:Dress__('-') html.slider-opened.view-horizontal & {
|
||||
// @____Bibi:Dress__('-') bottom: $Slider_Size !important;
|
||||
// @____Bibi:Dress__('-') }
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
// @____Bibi:Dress__('-') line-height: $Help_Height * 1.1;
|
||||
// @____Bibi:Dress__('-') color: $Help-P_Color;
|
||||
small {
|
||||
font-size: .875em;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
display: block;
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @____Bibi:Dress__('-') html.slider-opened:not(.panel-opened).view-vertical div#bibi-help {
|
||||
// @____Bibi:Dress__('-') width: calc(100% - #{$Slider_Size});
|
||||
// @____Bibi:Dress__('-') }
|
||||
37
bibi/resources/styles/_icons.scss
Normal file
37
bibi/resources/styles/_icons.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// ================================================================================
|
||||
// + Base
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon {
|
||||
&,
|
||||
& *,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: none 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
& {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: solid 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
& *,
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bibi-button, .bibi-button-normal, .bibi-button-toggle { &.default, &.active { &.hover, &:hover { .bibi-icon {
|
||||
cursor: pointer;
|
||||
}}}}
|
||||
|
||||
.bibi-button-radio.active .bibi-icon {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
225
bibi/resources/styles/_main.scss
Normal file
225
bibi/resources/styles/_main.scss
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
// ================================================================================
|
||||
// + Main
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
main#bibi-main {
|
||||
& {
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
//box-sizing: border-box;
|
||||
//padding: 35px 0;
|
||||
//transition: .2s ease-out;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Main_ZIndex;
|
||||
//@include offset(-100vh, -100vw);
|
||||
//margin: auto;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
transition:
|
||||
transform .1s ease/*,
|
||||
opacity .15s ease,
|
||||
filter .15s ease*/;
|
||||
transform-origin: 50% 50%;
|
||||
will-change: scroll-position, padding, transform/*, opacity, filter*/;
|
||||
}
|
||||
html.book-full-height & {
|
||||
height: 100%;
|
||||
}
|
||||
html.view-paged & {
|
||||
overflow: hidden;
|
||||
}
|
||||
html.view-horizontal & {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
html.view-vertical & {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
html.appearance-horizontal & {
|
||||
@include offset(0, -100%, auto, -100%);
|
||||
//margin: 0 auto;
|
||||
//@include offset(-100%);
|
||||
margin: auto;
|
||||
}
|
||||
html.appearance-horizontal:not(.book-full-height) & {
|
||||
// @____Bibi:Dress__('-') top: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height});
|
||||
}
|
||||
html.appearance-vertical & {
|
||||
@include offset(-100%, auto, -100%, 0);
|
||||
//margin: auto 0;
|
||||
//@include offset(-100%);
|
||||
margin: auto;
|
||||
}
|
||||
html.appearance-vertical:not(.book-full-height) & {
|
||||
// @____Bibi:Dress__('-') padding-top: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height});
|
||||
}
|
||||
html.laying-out & {
|
||||
//opacity: 0;
|
||||
}
|
||||
html.busy &/*,
|
||||
html.shade-visible &*/ {
|
||||
//opacity: 0.25;
|
||||
//filter: blur(2px);
|
||||
}/*
|
||||
html.panel-opened & {
|
||||
opacity: 0.75;
|
||||
}*/
|
||||
html.slider-opened & {
|
||||
}/*
|
||||
html.page-ltr.flipping-ahead &,
|
||||
html.page-rtl.flipping-astern & {
|
||||
transform: translateX(-100px);
|
||||
opacity: 0;
|
||||
}
|
||||
html.page-ltr.flipping-astern &,
|
||||
html.page-rtl.flipping-ahead & {
|
||||
transform: translateX(100px);
|
||||
opacity: 0;
|
||||
}*/
|
||||
html.subpanel-opened & {
|
||||
// @____Bibi:Dress__('-') @include Main__SubpanelOpened();
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-main-book {
|
||||
box-sizing: content-box;//box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
//align-items: center;
|
||||
position: relative;
|
||||
z-index: $INVARIABLE__Main-Book_ZIndex;
|
||||
@include size(100%);
|
||||
transition:
|
||||
transform 0.5s ease-in-out,
|
||||
opacity .15s ease;
|
||||
will-change: width, height, opacity;
|
||||
html.spread-ltr & { flex-direction: row; }
|
||||
html.spread-rtl & { flex-direction: row-reverse; }
|
||||
html.spread-ttb & { flex-direction: column; }
|
||||
html.resizing &,
|
||||
html.changing-view & {
|
||||
visibility: hidden;
|
||||
}
|
||||
html.subpanel-opened & {
|
||||
// @____Bibi:Dress__('-') @include Main-Book__SubpanelOpened();
|
||||
}
|
||||
}
|
||||
div.spread-box {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
html.spread-horizontal & { height: 100%; }
|
||||
html.spread-vertical & { width: 100%; }
|
||||
html.book-pre-paginated.view-paged.spread-horizontal & { min-width: 100vw; }
|
||||
html.view-paged.spread-vertical & { min-height: 100vh; } // TO BE OVERWRITTEN (if Scrollbars have height)
|
||||
//html.spread-horizontal &:not(.reflowable).spreaded { min-width: 100vw; }
|
||||
//html.spread-horizontal &:not(.reflowable):not(.spreaded) { min-width: 144vw; }
|
||||
html.view-paged.book-pre-paginated:not(.slider-sliding):not(.slider-opened) &:not(.current) {
|
||||
//opacity: 0; transition: opacity .1s linear; will-change: opacity; // <- too heavy
|
||||
//visibility: hidden;
|
||||
}
|
||||
html.view-paged.book-pre-paginated:not(.slider-sliding).slider-opened &:not(.current) {
|
||||
//opacity: .33;
|
||||
}
|
||||
}
|
||||
div.spread {
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
html.page-ltr & { flex-direction: row; }
|
||||
html.page-rtl & { flex-direction: row-reverse; }
|
||||
html.view-vertical div.spread-box:not(.spreaded) & { flex-direction: column; }
|
||||
div.spread-box.single-item-spread-after & { justify-content: flex-end; }
|
||||
div.spread-box.single-item-spread-center & { justify-content: center; }
|
||||
div.spread-box.reflowable & { background: white; }
|
||||
}
|
||||
div.item-box {
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
&.reflowable {
|
||||
display: flex;
|
||||
html.spread-ltr & { flex-direction: row; }
|
||||
html.spread-rtl & { flex-direction: row-reverse; }
|
||||
html.spread-ttb & { flex-direction: column; }
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
html.book-pre-paginated & {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in;
|
||||
}
|
||||
&:not(.placeholder):not(.loaded):after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
iframe.item,
|
||||
span.page {
|
||||
& {
|
||||
box-sizing: content-box;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
iframe.item {
|
||||
& {
|
||||
//overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
@include offset(0);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none 0;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
html.zoomed-in & { will-change: transform; }
|
||||
html.transforming & { will-change: none !important; }
|
||||
transform-origin: 0 0;
|
||||
//html.page-ltr & { transform-origin: 0 0; }
|
||||
//html.page-rtl & { transform-origin: 100% 0; }
|
||||
//&.non-linear-item { display: none; }
|
||||
opacity: 1;
|
||||
div.item-box:not(.loaded) & { visibility: hidden; opacity: 0; }
|
||||
//html.book-pre-paginated.view-paged div.item-box.loaded:not(.current) & { opacity: .125; }
|
||||
div.spread-box.current & { transition: opacity .1s linear; }
|
||||
}
|
||||
}
|
||||
span.page {
|
||||
& {
|
||||
z-index: 1;
|
||||
@include size(100%);
|
||||
}
|
||||
div.item-box.reflowable & {
|
||||
position: relative;
|
||||
//flex-shrink: 0;
|
||||
}
|
||||
div.item-box.pre-paginated & {
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
}
|
||||
}
|
||||
213
bibi/resources/styles/_menu.scss
Normal file
213
bibi/resources/styles/_menu.scss
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
// ================================================================================
|
||||
// + Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-menu {
|
||||
//box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Menu_ZIndex;
|
||||
@include offset(0, 0, auto);
|
||||
left: 0;
|
||||
right: auto;
|
||||
margin: 0;
|
||||
width: 100%; // TO BE OVERWRITTEN ... html.appearance-vertical:not(.veil-opened):not(.slider-opened)
|
||||
// @____Bibi:Dress__('-') html.appearance-vertical.slider-opened & { width: calc(100% - #{$Slider_Size}); }
|
||||
// @____Bibi:Dress__('-') html.appearance-vertical.slider-opened.subpanel-opened & { padding-right: $Slider_Size; }
|
||||
// @____Bibi:Dress__('-') height: $Menu_Height;
|
||||
background: transparent;
|
||||
&, & ul {
|
||||
transition: .125s linear;
|
||||
}
|
||||
// @____Bibi:Dress__('-') .bibi-icon { @include size($Menu-Icon_Size); }
|
||||
}
|
||||
html.without-menubar,
|
||||
html.waiting-file {
|
||||
div#bibi-menu { display: none !important; }
|
||||
}
|
||||
/* @____Bibi:Dress__('-') {
|
||||
html.book-full-height {
|
||||
& div#bibi-menu { background-color: $Menu_BackgroundColor; }
|
||||
& div#bibi-menu.hover,
|
||||
&.panel-opened div#bibi-menu,
|
||||
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Hover; }
|
||||
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Active; box-shadow: $Menu_BoxShadow__Active; }
|
||||
}
|
||||
html:not(.book-full-height) {
|
||||
& div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH; }
|
||||
& div#bibi-menu.hover,
|
||||
&.panel-opened div#bibi-menu,
|
||||
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Hover; }
|
||||
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Active; box-shadow: $Menu_BoxShadow__NotBFH__Active; }
|
||||
}
|
||||
// } */
|
||||
|
||||
|
||||
// - Menu-L & Menu-R
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-menu-l,
|
||||
div#bibi-menu-r {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
color: white;
|
||||
transition: opacity 0.75s linear;
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
// @____Bibi:Dress__('-') padding: $Menu-ButtonGroup_Padding;
|
||||
// @____Bibi:Dress__('-') height: $Menu-Icon_Size;
|
||||
&, &.sticky { opacity: 0; }
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
// @____Bibi:Dress__('-') width: $Menu-ButtonGroup-Separator_Width;
|
||||
// @____Bibi:Dress__('-') background: $Menu-ButtonGroup-Separator_Color;
|
||||
// @____Bibi:Dress__('-') top: $Menu-ButtonGroup_Padding;
|
||||
// @____Bibi:Dress__('-') height: $Menu-Icon_Size;
|
||||
}
|
||||
li {
|
||||
// @____Bibi:Dress__('-') @include size($Menu-Icon_Size);
|
||||
position: relative;
|
||||
z-index: 1; &.hover, &:active { z-index: 10; }
|
||||
.bibi-button {
|
||||
span.bibi-button-label {
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
html.waiting & {
|
||||
&, &.sticky { opacity: 1; }
|
||||
}
|
||||
div#bibi-menu.hover &,
|
||||
//div#bibi-menu.hot &,
|
||||
html.menu-opened &,
|
||||
html.panel-opened &,
|
||||
html.subpanel-opened &,
|
||||
html:not(.book-full-height) & {
|
||||
&, &.sticky { opacity: 1; }
|
||||
}
|
||||
}
|
||||
ul.bibi-buttongroup-tiled {
|
||||
li:not(:first-child):not(:last-child) {
|
||||
.bibi-button {
|
||||
.bibi-button-iconbox {
|
||||
.bibi-icon { border-radius: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-menu-l {
|
||||
float: left;
|
||||
flex-direction: row;
|
||||
ul {
|
||||
flex-direction: row;
|
||||
&:first-child {
|
||||
// @____Bibi:Dress__('-') padding-left: $Menu-ButtonGroup_Padding;
|
||||
&:before { display: none; }
|
||||
}
|
||||
&:not(:first-child) {
|
||||
// @____Bibi:Dress__('-') padding-left: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width;
|
||||
&:before { left: 0; }
|
||||
}
|
||||
li {
|
||||
&:first-child { margin-left: 0; }
|
||||
// @____Bibi:Dress__('-') &:not(:first-child) { margin-left: $Menu-ButtonGroup-Button_Margin; }
|
||||
}
|
||||
}
|
||||
ul.bibi-buttongroup-tiled {
|
||||
li { margin-left: -1px !important; }
|
||||
li:first-child:not(:last-child) {
|
||||
.bibi-button {
|
||||
.bibi-button-iconbox {
|
||||
.bibi-icon {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li:last-child:not(:first-child) {
|
||||
.bibi-button {
|
||||
.bibi-button-iconbox {
|
||||
.bibi-icon {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-menu-r {
|
||||
float: right;
|
||||
flex-direction: row-reverse;
|
||||
ul {
|
||||
flex-direction: row-reverse;
|
||||
&:first-child {
|
||||
// @____Bibi:Dress__('-') padding-right: $Menu-ButtonGroup_Padding;
|
||||
&:before { display: none; }
|
||||
}
|
||||
&:not(:first-child) {
|
||||
// @____Bibi:Dress__('-') padding-right: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width;
|
||||
&:before { right: 0; }
|
||||
}
|
||||
li {
|
||||
&:first-child { margin-right: 0; }
|
||||
// @____Bibi:Dress__('-') &:not(:first-child) { margin-right: $Menu-ButtonGroup-Button_Margin; }
|
||||
}
|
||||
}
|
||||
ul.bibi-buttongroup-tiled {
|
||||
li { margin-right: -1px !important; }
|
||||
li:first-child:not(:last-child) {
|
||||
.bibi-button {
|
||||
.bibi-button-iconbox {
|
||||
.bibi-icon {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li:last-child:not(:first-child) {
|
||||
.bibi-button {
|
||||
.bibi-button-iconbox {
|
||||
.bibi-icon {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Button Behaviors
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
ul#bibi-buttongroup_font-size {
|
||||
html.waiting &,
|
||||
html.book-pre-paginated & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul#bibi-buttongroup_loupe {
|
||||
html.waiting &/*,
|
||||
html.book-reflowable &*/ {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
77
bibi/resources/styles/_nombre.scss
Normal file
77
bibi/resources/styles/_nombre.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
// ================================================================================
|
||||
// + Nombre
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-nombre {
|
||||
& {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Nombre_ZIndex;
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') border-radius: $Nombre_Height * 0.5;
|
||||
// @____Bibi:Dress__('-') @include size($Nombre_Width, $Nombre_Height);
|
||||
// @____Bibi:Dress__('-') line-height: $Nombre_Height;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
// @____Bibi:Dress__('-') background: $Nombre_BackgroundColor;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { background: $Nombre_BackgroundColor__SliderOpened; }
|
||||
opacity: 0;
|
||||
transition: .125s ease-out;
|
||||
}
|
||||
html.busy & { display: none !important; }
|
||||
&.active { display: block; }
|
||||
&.hot { opacity: 1; }
|
||||
html.view-paged &,
|
||||
html.view-horizontal & {
|
||||
top: auto;
|
||||
right: -100%;
|
||||
left: -100%;
|
||||
}
|
||||
html.view-paged & {
|
||||
bottom: 2px;
|
||||
}
|
||||
html.view-horizontal & {
|
||||
bottom: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Height + 2) + "px"
|
||||
}
|
||||
html.view-vertical & {
|
||||
top: -100%;
|
||||
right: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Width + 2) + "px"
|
||||
bottom: -100%;
|
||||
left: auto;
|
||||
// @____Bibi:Dress__('-') transform: rotate(90deg) translateY(($Nombre_Width - $Nombre_Height) * -0.5);
|
||||
}
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { bottom: $Slider_PaddingEnd__SliderOpened !important; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { right: $Slider_PaddingEnd__SliderOpened !important; }
|
||||
span {
|
||||
& {
|
||||
display: inline-block;
|
||||
}
|
||||
&.bibi-nombre-current {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
// @____Bibi:Dress__('-') color: $Nombre-Current_Color;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Current_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-delimiter {
|
||||
margin: 0 0.1em 0 0.2em;
|
||||
// @____Bibi:Dress__('-') color: $Nombre-Delimiter_Color;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Delimiter_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-total {
|
||||
// @____Bibi:Dress__('-') color: $Nombre-Total_Color;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Total_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-percent {
|
||||
margin-left: .25em;
|
||||
// @____Bibi:Dress__('-') color: $Nombre-Percent_Color;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Percent_Color__SliderOpened; }
|
||||
span.unit {
|
||||
margin-left: .125em;
|
||||
font-size: .75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
bibi/resources/styles/_notifier.scss
Normal file
45
bibi/resources/styles/_notifier.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// ================================================================================
|
||||
// + Notifier
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-notifier {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Notifier_ZIndex;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
width: 100%;
|
||||
// @____Bibi:Dress__('-') height: $Notifier_Height;
|
||||
// @____Bibi:Dress__('-') color: $Notifier_Color;
|
||||
// @____Bibi:Dress__('-') background: $Notifier_Background;
|
||||
// @____Bibi:Dress__('-') box-shadow: $Notifier_BoxShadow;
|
||||
transition: .15s linear;
|
||||
transform-origin: 50% 0;
|
||||
p {
|
||||
// @____Bibi:Dress__('-') font-family: $Notifier_FontFamily;
|
||||
font-size: 12px;
|
||||
line-height: 1.25;
|
||||
font-weight: bold;
|
||||
&.error {
|
||||
// @____Bibi:Dress__('-') color: font-family: $Notifier_FontFamily__Error;
|
||||
// @____Bibi:Dress__('-') color: $Notifier_Color__Error;
|
||||
}
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
}
|
||||
& {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);//scaleY(0);
|
||||
transition: .2s linear;
|
||||
}
|
||||
html.notifier-shown & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: .15s linear;
|
||||
}
|
||||
}
|
||||
277
bibi/resources/styles/_panel.scss
Normal file
277
bibi/resources/styles/_panel.scss
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
// ================================================================================
|
||||
// + Panel
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-panel {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
z-index: $INVARIABLE__Panel_ZIndex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@include size(100%);
|
||||
// @____Bibi:Dress__('-') background: $Panel_Background;
|
||||
opacity: 0;
|
||||
transition: 0.15s ease-out;
|
||||
transform: translateY(-100%);
|
||||
html.panel-opened & {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
transition: 0.15s ease-in;
|
||||
user-select: text;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 99999999999;
|
||||
left: 0; right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
// @____Bibi:Dress__('-') height: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') background: $Menu_BackgroundColor__PanelOpened;
|
||||
// @____Bibi:Dress__('-') html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__PanelOpened; }
|
||||
}
|
||||
&:after {
|
||||
bottom: 0;
|
||||
// @____Bibi:Dress__('-') height: $PoweredBy_Height;
|
||||
// @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__PanelOpened;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - BookInfo
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-panel-bookinfo {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
// @____Bibi:Dress__('-') margin-top: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') margin-bottom: $PoweredBy_Height;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{$Menu_Height + $PoweredBy_Height});
|
||||
width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
html.nav-ttb & {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@include writing-mode(horizontal-tb);
|
||||
// @____Bibi:Dress__('-') padding: $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter $Panel_PaddingStart;
|
||||
}
|
||||
html.nav-rtl & {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@include writing-mode(vertical-rl);
|
||||
// @____Bibi:Dress__('-') padding: $Panel_PaddingStart $Panel_PaddingBefore $Panel_PaddingEnd $Panel_PaddingAfter;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// . Navigation
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-panel-bookinfo-navigation {
|
||||
box-sizing: border-box;
|
||||
html.nav-ttb & {
|
||||
>*:first-child,
|
||||
>*:first-child >*:first-child,
|
||||
>*:first-child >*:first-child >*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
html.nav-rtl & {
|
||||
>*:first-child,
|
||||
>*:first-child >*:first-child,
|
||||
>*:first-child >*:first-child >*:first-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
span.tcy {
|
||||
@include text-combine-upright_all();
|
||||
}
|
||||
}
|
||||
nav {
|
||||
$SCOPED__MarginBefore: 2em;
|
||||
$SCOPED__MarginAfter: 1em;
|
||||
line-height: 1.2;
|
||||
font-size: 20px;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
$SCOPED__MarginBefore: 0;
|
||||
$SCOPED__MarginAfter: 1em;
|
||||
font-weight: bold;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
}
|
||||
small {
|
||||
font-size: .8em;
|
||||
}
|
||||
br + small {
|
||||
$SCOPED__MarginStart: 2em;
|
||||
html.nav-ttb & { margin: 0 0 0 $SCOPED__MarginStart; }
|
||||
html.nav-rtl & { margin: $SCOPED__MarginStart 0 0 0; }
|
||||
}
|
||||
ul, ol {
|
||||
$SCOPED__MarginBefore: 0;
|
||||
$SCOPED__MarginAfter: 1em;
|
||||
font-size: .9em;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
li {
|
||||
$SCOPED__MarginBefore: 1em;
|
||||
$SCOPED__MarginAfter: 0;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
ul, ol {
|
||||
position: relative;
|
||||
$SCOPED__MarginBefore: 0;
|
||||
$SCOPED__MarginAfter: 0;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
$SCOPED__OffsetStart: .175em;
|
||||
$SCOPED__OffsetBefore: 0;
|
||||
$SCOPED__Breadth: 4px;
|
||||
$SCOPED__Length: 100%;
|
||||
background: white;
|
||||
html.nav-ttb & { left: $SCOPED__OffsetStart; top: $SCOPED__OffsetBefore; @include size($SCOPED__Breadth, $SCOPED__Length); }
|
||||
html.nav-rtl & { top: $SCOPED__OffsetStart; right: $SCOPED__OffsetBefore; @include size($SCOPED__Length, $SCOPED__Breadth); }
|
||||
}
|
||||
li {
|
||||
$SCOPED__MarginBefore: .5em;
|
||||
$SCOPED__MarginAfter: 0;
|
||||
$SCOPED__MarginStart: 1em;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter $SCOPED__MarginStart; }
|
||||
html.nav-rtl & { margin: $SCOPED__MarginStart $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
// @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor;
|
||||
html.nav-ttb & { border-bottom-width: 1px; padding-bottom: .1em; }
|
||||
html.nav-rtl & { border-right-width: 1px; padding-right: .1em; }
|
||||
// @____Bibi:Dress__('-') color: $Panel-Nav-A_Color;
|
||||
text-decoration: none;
|
||||
transition: linear .15s;
|
||||
&:hover {
|
||||
// @____Bibi:Dress__('-') border-color: $Panel-Nav-A_TextDecorationColor__Hover;
|
||||
// @____Bibi:Dress__('-') color: $Panel-Nav-A_Color__Hover;
|
||||
transition: none;
|
||||
}
|
||||
&.bibi-bookinfo-inactive-link {
|
||||
color: inherit !important;
|
||||
border: none 0 !important;
|
||||
cursor: default !important;
|
||||
&:hover {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav.bibi-nav-landmarks,
|
||||
nav.bibi-nav-page-list {
|
||||
font-size: 16px;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
$SCOPED__MarginBefore: 0;
|
||||
$SCOPED__MarginAfter: .25em;
|
||||
html.nav-ttb & { margin: $SCOPED__MarginBefore 0 $SCOPED__MarginAfter 0; }
|
||||
html.nav-rtl & { margin: 0 $SCOPED__MarginBefore 0 $SCOPED__MarginAfter; }
|
||||
}
|
||||
ul, ol {
|
||||
overflow: hidden;
|
||||
$SCOPED__PaddingAfter: .25em;
|
||||
html.nav-ttb & { padding: 0 0 $SCOPED__PaddingAfter 0; }
|
||||
html.nav-rtl & { padding: 0 0 0 $SCOPED__PaddingAfter; }
|
||||
li {
|
||||
float: left;
|
||||
$SCOPED__PaddingEnd: 1em;
|
||||
html.nav-ttb & { padding: 0 $SCOPED__PaddingEnd 0 0; &:last-child { padding: 0; } }
|
||||
html.nav-rtl & { padding: 0 0 $SCOPED__PaddingEnd 0; &:last-child { padding: 0; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// . Cover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-panel-bookinfo-cover {
|
||||
& {
|
||||
//box-sizing: border-box;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
// @____Bibi:Dress__('-') border-color: $Panel-Cover_BorderColor;
|
||||
@include writing-mode(horizontal-tb);
|
||||
img {
|
||||
display: block;
|
||||
margin-bottom: .75em;
|
||||
max-width: 100%;
|
||||
// @____Bibi:Dress__('-') max-height: calc(#{ 100vh * 0.6 } - #{ ($Menu_Height + $Panel_PaddingBefore + $Panel_PaddingAfter + $PoweredBy_Height) * 0.6 });
|
||||
}
|
||||
p#bibi-panel-bookinfo-cover-info {
|
||||
// @____Bibi:Dress__('-') color: $Panel-Cover-Info_Color;
|
||||
> strong, > em, > span {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 .5rem 0;
|
||||
span {
|
||||
//display: inline-block;
|
||||
}
|
||||
}
|
||||
> strong {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> em {
|
||||
font-size: 14px;
|
||||
}
|
||||
> span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
html.nav-ttb & {
|
||||
// @____Bibi:Dress__('-') margin-top: $Panel-Cover_MarginBefore;
|
||||
// @____Bibi:Dress__('-') padding-top: $Panel-Cover_PaddingBefore;
|
||||
border-top-width: 1px;
|
||||
// @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingStart + $Panel_PaddingEnd});
|
||||
p#bibi-panel-bookinfo-cover-info {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
html.nav-rtl & {
|
||||
// @____Bibi:Dress__('-') margin-right: $Panel-Cover_MarginBefore;
|
||||
// @____Bibi:Dress__('-') padding-right: $Panel-Cover_PaddingBefore;
|
||||
border-right-width: 1px;
|
||||
// @____Bibi:Dress__('-') max-width: calc(100vw - #{$Panel_PaddingAfter * 2});
|
||||
height: 100%;
|
||||
img {
|
||||
@include margin-h(auto);
|
||||
}
|
||||
p#bibi-panel-bookinfo-cover-info {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.without-cover-image {
|
||||
.book-icon {
|
||||
// @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Panel-Cover-Icon_Size__WithoutCoverImage, $Panel-Cover-Icon_OuterColor__WithoutCoverImage, $Panel-Cover-Icon_InnerColor__WithoutCoverImage, relative);
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
}
|
||||
html.nav-rtl &.without-cover-image {
|
||||
.book-icon {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
358
bibi/resources/styles/_slider.scss
Normal file
358
bibi/resources/styles/_slider.scss
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
// ================================================================================
|
||||
// + Slider
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider {
|
||||
& {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Slider_ZIndex;
|
||||
cursor: pointer;
|
||||
// @____Bibi:Dress__('-') box-shadow: $Slider_BoxShadow;
|
||||
will-change: height;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
// @____Bibi:Dress__('-') border-color: $Slider_BorderColor;
|
||||
@include size(100%);
|
||||
// @____Bibi:Dress__('-') background: $Slider_Background;
|
||||
}
|
||||
// @____Bibi:Dress__('-') &, &:after { transition: $Slider_Transition__Close; }
|
||||
}
|
||||
html.appearance-horizontal & {
|
||||
@include offset(auto, 0, 0, 0);
|
||||
@include size(
|
||||
100%,
|
||||
$TEMPORARY__Scrollbar-Track_Size // TO BE OVERWRITTEN
|
||||
);
|
||||
&:after { border-top-width: 1px; }
|
||||
}
|
||||
html.appearance-horizontal.panel-opened & { height: 0; }
|
||||
html.appearance-vertical & {
|
||||
@include offset(0, 0, 0, auto);
|
||||
@include size(
|
||||
$TEMPORARY__Scrollbar-Track_Size, // TO BE OVERWRITTEN
|
||||
100%
|
||||
);
|
||||
&:after { border-left-width: 1px; }
|
||||
}
|
||||
html.appearance-vertical.panel-opened & { width: 0; }
|
||||
html.slider-opened & {
|
||||
overflow: visible;
|
||||
// @____Bibi:Dress__('-') box-shadow: $Slider_BoxShadow__SliderOpened;
|
||||
// @____Bibi:Dress__('-') &:after { background: $Slider_Background__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') &, &:after { transition: $Slider_Transition__Open; }
|
||||
}
|
||||
html.slider-opened.appearance-horizontal & {
|
||||
// @____Bibi:Dress__('-') height: $Slider_Size !important;
|
||||
// @____Bibi:Dress__('-') &:after { border-top-color: $Slider_BorderColor__SliderOpened; }
|
||||
}
|
||||
html.slider-opened.appearance-vertical & {
|
||||
// @____Bibi:Dress__('-') width: $Slider_Size !important;
|
||||
// @____Bibi:Dress__('-') &:after { border-left-color: $Slider_BorderColor__SliderOpened; }
|
||||
}
|
||||
html.slider-sliding &,
|
||||
html.busy & { transition: none; }
|
||||
html.waiting &,
|
||||
html.busy &,
|
||||
html.panel-opened & { display: none; }
|
||||
overscroll-behavior-x: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
|
||||
// - . History
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-history {
|
||||
div#bibi-slider:not(.bibi-slider-with-history) & { display: none; }
|
||||
html:not(.slider-opened) & {
|
||||
transform: scale(0);
|
||||
// @____Bibi:Dress__('-') transition: $Slider_Transition__Close;
|
||||
}
|
||||
html.slider-opened & {
|
||||
// @____Bibi:Dress__('-') transition: $Slider_Transition__Open;
|
||||
}
|
||||
.bibi-buttongroup { // ul
|
||||
.bibi-buttonbox { // li
|
||||
.bibi-button#bibi-slider-history-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') @include size($Slider-History-Button-Icon_Size);
|
||||
html.appearance-vertical & {
|
||||
left: 0; right: 0;
|
||||
bottom: auto;
|
||||
// @____Bibi:Dress__('-') top: $Slider-History-Button-Icon_Margin;
|
||||
}
|
||||
html.appearance-horizontal & {
|
||||
top: 0; bottom: 0;
|
||||
}
|
||||
html.appearance-ltr & {
|
||||
right: auto;
|
||||
// @____Bibi:Dress__('-') left: $Slider-History-Button-Icon_Margin;
|
||||
}
|
||||
html.appearance-rtl & {
|
||||
left: auto;
|
||||
// @____Bibi:Dress__('-') right: $Slider-History-Button-Icon_Margin;
|
||||
}
|
||||
span.bibi-button-label {
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
overflow: hidden;
|
||||
@include size(0);
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - . Thumb
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-thumb {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 100000;
|
||||
html.appearance-horizontal & {
|
||||
top: 0; bottom: 0;
|
||||
height: $TEMPORARY__Scrollbar-Thumb_Size; // TO BE OVERWRITTEN
|
||||
}
|
||||
html.appearance-vertical & {
|
||||
left: 0; right: 0;
|
||||
width: $TEMPORARY__Scrollbar-Thumb_Size; // TO BE OVERWRITTEN
|
||||
}
|
||||
html.slider-opened.appearance-horizontal & { height: 100%; cursor: col-resize; }
|
||||
html.slider-opened.appearance-vertical & { width: 100%; cursor: row-resize; }
|
||||
margin: auto;
|
||||
//pointer-events: none;
|
||||
background: transparent;
|
||||
will-change: width, height, transform, left, top;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') html.slider-opened & { transition: $Slider_Transition__Open; }
|
||||
// @____Bibi:Dress__('-') html:not(.slider-opened) & { transition: $Slider_Transition__Close; }
|
||||
}
|
||||
&:before {
|
||||
@include offset($TEMPORARY__Scrollbar-Thumb_Size * -1); // TO BE OVERWRITTEN
|
||||
@include size(100%);
|
||||
border-radius: $TEMPORARY__Scrollbar-Thumb_Size * 0.5; // TO BE OVERWRITTEN
|
||||
html.appearance-horizontal & { min-width: $TEMPORARY__Scrollbar-Thumb_Size; } // TO BE OVERWRITTEN
|
||||
html.appearance-vertical & { min-height: $TEMPORARY__Scrollbar-Thumb_Size; } // TO BE OVERWRITTEN
|
||||
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor;
|
||||
html.slider-opened & { transform: scale(0); opacity: 0; }
|
||||
}
|
||||
// @____Bibi:Dress__('-') html:not(.slider-opened):not(.touch) &:hover:before { background-color: $Slider-Thumb_BackgroundColor__Hover; }
|
||||
// @____Bibi:Dress__('-') html:not(.slider-opened):not(.touch) &:active:before { background-color: $Slider-Thumb_BackgroundColor__Active; }
|
||||
&:after {
|
||||
// @____Bibi:Dress__('-') @include offset($Slider-Thumb_Size__SliderOpened * -1);
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal & { @include size(100%, $Slider-Thumb_Size__SliderOpened); }
|
||||
// @____Bibi:Dress__('-') html.appearance-vertical & { @include size($Slider-Thumb_Size__SliderOpened, 100%); }
|
||||
// @____Bibi:Dress__('-') @include min-size($Slider-Thumb_Size__SliderOpened);
|
||||
// @____Bibi:Dress__('-') border-radius: $Slider-Thumb_Size__SliderOpened * .5;
|
||||
// @____Bibi:Dress__('-') border: $Slider-Thumb_Border__SliderOpened;
|
||||
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor__SliderOpened;
|
||||
// @____Bibi:Dress__('-') box-shadow: 0 0 0 $Slider-Thumb-Halo_Width__SliderOpened $Slider-Thumb-Halo_Color__SliderOpened;
|
||||
html:not(.slider-opened) & { transform: scale(0); opacity: 0; }
|
||||
}
|
||||
&.min:after {
|
||||
// @____Bibi:Dress__('-') border: $Slider-Thumb_Border__SliderOpened__Min;
|
||||
// @____Bibi:Dress__('-') background: $Slider-Thumb_BackgroundColor__SliderOpened__Min;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - . Rail
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-rail,
|
||||
div#bibi-slider-rail-groove,
|
||||
div#bibi-slider-rail-progress {
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: background-color linear .33s;
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-slider-rail {
|
||||
& {
|
||||
z-index: 10000;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') background: $Slider-Rail-FullLength_Color__SliderOpened;
|
||||
}
|
||||
html.appearance-horizontal & { @include size(100%, 0); }
|
||||
html.appearance-vertical & { @include size(0, 100%); }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { height: $Slider-Rail-FullLength_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-FullLength_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-FullLength_Color__SliderOpened__Hover; }
|
||||
}
|
||||
|
||||
div#bibi-slider-rail-groove,
|
||||
div#bibi-slider-rail-progress {
|
||||
& {
|
||||
@include size(0);
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-slider-rail-groove {
|
||||
& {
|
||||
// @____Bibi:Dress__('-') border-top-color: $Slider-Rail-Groove_Color__SliderOpened;
|
||||
}
|
||||
html.appearance-horizontal & { @include offset(-100%); margin: auto; }
|
||||
html.appearance-vertical & { @include offset(-100%); margin: auto; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { border-top: $Slider-Rail-Groove_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-Groove_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-Groove_Color__SliderOpened__Hover; }
|
||||
}
|
||||
|
||||
div#bibi-slider-rail-progress {
|
||||
& {
|
||||
// @____Bibi:Dress__('-') background: $Slider-Rail-Progress_Color__SliderOpened;
|
||||
will-change: width, height;
|
||||
}
|
||||
html.appearance-rtl & { @include offset(-100%, 0, -100%, auto); margin: auto 0; transform-origin: 100% 50%; }
|
||||
html.appearance-ltr & { @include offset(-100%, auto, -100%, 0); margin: auto 0; transform-origin: 0 50%; }
|
||||
html.appearance-ttb & { @include offset(0, -100%, auto, -100%); margin: 0 auto; transform-origin: 50% 0 ; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { height: $Slider-Rail-Progress_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { width: $Slider-Rail-Progress_Width__SliderOpened; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-ltr & { border-radius: 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5) 0; }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-rtl & { border-radius: ($Slider-Rail-Progress_Width__SliderOpened * .5) 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5); }
|
||||
// @____Bibi:Dress__('-') html.slider-opened.appearance-ttb & { border-radius: 0 0 ($Slider-Rail-Progress_Width__SliderOpened * .5) ($Slider-Rail-Progress_Width__SliderOpened * .5); }
|
||||
// @____Bibi:Dress__('-') div#bibi-slider:hover & { background: $Slider-Rail-Progress_Color__SliderOpened__Hover; }
|
||||
}
|
||||
|
||||
|
||||
// - Edgebar Box
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-edgebar-box {
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
z-index: 10;
|
||||
margin: auto;
|
||||
background: transparent;
|
||||
will-change: width, height;
|
||||
html.appearance-horizontal & {
|
||||
@include offset(1px, 0, auto, 0);
|
||||
height: calc(100% - 1px );
|
||||
width: calc(100% - #{ $TEMPORARY__Scrollbar-Thumb_Size * 0.5 * 2 });
|
||||
}
|
||||
html.appearance-vertical & {
|
||||
@include offset(0, auto, 0, 1px);
|
||||
width: calc(100% - 1px );
|
||||
height: calc(100% - #{ $TEMPORARY__Scrollbar-Thumb_Size * 0.5 * 2 });
|
||||
}
|
||||
html.slider-opened.appearance-horizontal & {
|
||||
// @____Bibi:Dress__('-') top: 1px + $Slider_PaddingStart__SliderOpened;
|
||||
bottom: auto;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened });
|
||||
}
|
||||
html.slider-opened.appearance-ltr & {
|
||||
right: auto;
|
||||
}
|
||||
html.slider-opened.appearance-rtl & {
|
||||
left: auto;
|
||||
}
|
||||
html.slider-opened.appearance-vertical & {
|
||||
// @____Bibi:Dress__('-') left: 1px + $Slider_PaddingStart__SliderOpened;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
// @____Bibi:Dress__('-') width: calc(100% - #{ 1px + $Slider_PaddingStart__SliderOpened + $Slider_PaddingEnd__SliderOpened });
|
||||
}
|
||||
}
|
||||
div#bibi-slider:not(.bibi-slider-with-history) & {
|
||||
html.slider-opened.appearance-horizontal & {
|
||||
// @____Bibi:Dress__('-') width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened });
|
||||
}
|
||||
html.slider-opened.appearance-ltr & {
|
||||
// @____Bibi:Dress__('-') left: $Slider_PaddingBefore__SliderOpened;
|
||||
}
|
||||
html.slider-opened.appearance-rtl & {
|
||||
// @____Bibi:Dress__('-') right: $Slider_PaddingBefore__SliderOpened;
|
||||
}
|
||||
html.slider-opened.appearance-vertical & {
|
||||
// @____Bibi:Dress__('-') top: $Slider_PaddingBefore__SliderOpened;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened + $Slider_PaddingAfter__SliderOpened });
|
||||
}
|
||||
}
|
||||
div#bibi-slider.bibi-slider-with-history & {
|
||||
html.slider-opened.appearance-horizontal & {
|
||||
// @____Bibi:Dress__('-') width: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened });
|
||||
}
|
||||
html.slider-opened.appearance-ltr & {
|
||||
// @____Bibi:Dress__('-') left: $Slider_PaddingBefore__SliderOpened__WithHistory;
|
||||
}
|
||||
html.slider-opened.appearance-rtl & {
|
||||
// @____Bibi:Dress__('-') right: $Slider_PaddingBefore__SliderOpened__WithHistory;
|
||||
}
|
||||
html.slider-opened.appearance-vertical & {
|
||||
// @____Bibi:Dress__('-') top: $Slider_PaddingBefore__SliderOpened__WithHistory;
|
||||
// @____Bibi:Dress__('-') height: calc(100% - #{ $Slider_PaddingBefore__SliderOpened__WithHistory + $Slider_PaddingAfter__SliderOpened });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Edgebar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-edgebar {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
@include offset(0);
|
||||
@include size(100%);
|
||||
margin: auto;
|
||||
will-change: width, height;
|
||||
}
|
||||
|
||||
|
||||
// - Edgebar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-edgebar {
|
||||
// @____Bibi:Dress__('-') background: $Slider-Edgebar_Background;
|
||||
}
|
||||
|
||||
|
||||
// - . History
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-slider-history {
|
||||
ul {
|
||||
li {
|
||||
span.bibi-button {
|
||||
span.bibi-button-iconbox {
|
||||
span.bibi-icon {
|
||||
}
|
||||
span.bibi-icon-historyback {
|
||||
}
|
||||
}
|
||||
span.bibi-button-label {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
bibi/resources/styles/_spinner.scss
Normal file
14
bibi/resources/styles/_spinner.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// ================================================================================
|
||||
// + Spinner
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-spinner {
|
||||
display: none; html.busy & { display: block; }
|
||||
position: fixed;
|
||||
z-index: $INVARIABLE__Spinner_ZIndex;
|
||||
box-sizing: border-box;
|
||||
@include offset(48%, -100%, auto);
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') @include size($Spinner_Size);
|
||||
// @____Bibi:Dress__('-') @include Spiner-Content();
|
||||
}
|
||||
521
bibi/resources/styles/_stage.scss
Normal file
521
bibi/resources/styles/_stage.scss
Normal file
|
|
@ -0,0 +1,521 @@
|
|||
// ================================================================================
|
||||
// + Stage
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Foundation
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none 0;
|
||||
font-size: 100%;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none outside;
|
||||
}
|
||||
|
||||
section, article, nav, aside,
|
||||
header, footer,
|
||||
figure, figcaption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.non-visual { @include NonVisual(); }
|
||||
|
||||
.uppercase { text-transform: uppercase !important; }
|
||||
|
||||
|
||||
// - HTML / Body
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
html {
|
||||
overflow: hidden; &.welcome { overflow: scroll !important; }
|
||||
position: absolute; @include offset(0, 0, auto); // for InAppBrowsers
|
||||
&.InternetExplorer { position: static; }
|
||||
@include size(100%);
|
||||
font-family: sans-serif;
|
||||
// @____Bibi:Dress__('-') &.iOS { font-family: $HTML_FontFamily__iOS; }
|
||||
// @____Bibi:Dress__('-') &.macOS { font-family: $HTML_FontFamily__macOS; }
|
||||
// @____Bibi:Dress__('-') &.Android { font-family: $HTML_FontFamily__Android; }
|
||||
// @____Bibi:Dress__('-') &.Windows { font-family: $HTML_FontFamily__Windows; }
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/*
|
||||
&[data-bibi-cursor="left"] { cursor: w-resize; }
|
||||
&[data-bibi-cursor="right"] { cursor: e-resize; }
|
||||
&[data-bibi-cursor="top"] { cursor: n-resize; }
|
||||
&[data-bibi-cursor="bottom"] { cursor: s-resize; }
|
||||
*/
|
||||
&[data-bibi-cursor="left"],
|
||||
&[data-bibi-cursor="right"],
|
||||
&[data-bibi-cursor="top"],
|
||||
&[data-bibi-cursor="bottom"] { cursor: pointer; }
|
||||
user-select: none;
|
||||
&.Blink { touch-action: none; }
|
||||
// @____Bibi:Dress__('-') background: $HTML_Background;
|
||||
overscroll-behavior-x: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
body {
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(255,255,255,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
position: absolute; @include offset(0, 0, auto);
|
||||
&.InternetExplorer { position: static; }
|
||||
overflow: hidden;
|
||||
@include size(100%);
|
||||
//max-height: 150vw;
|
||||
transition: opacity .25s ease;
|
||||
}
|
||||
|
||||
|
||||
// - Catcher
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-catcher {
|
||||
$SCOPED__CenterLine: 56%;
|
||||
$SCOPED__Transition: .125s cubic-bezier(.2,.8,.8,1.6);
|
||||
& {
|
||||
display: none; html.waiting-file & { display: block; }
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Catcher_ZIndex;
|
||||
@include offset(0);
|
||||
margin: 0;
|
||||
@include size(100%);
|
||||
// @____Bibi:Dress__('-') background: $Catcher_Background;
|
||||
cursor: pointer;
|
||||
transition: $SCOPED__Transition;
|
||||
> .book-icon {
|
||||
// @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Catcher-Icon_Size, $Catcher-Icon_OuterColor, $Catcher-Icon_InnerColor, absolute);
|
||||
z-index: 10;
|
||||
@include offset(auto, 0, $SCOPED__CenterLine);
|
||||
margin: 0 auto;
|
||||
transform: translateX(-4%);
|
||||
&, & * {
|
||||
transition: $SCOPED__Transition;
|
||||
}
|
||||
}
|
||||
> .pgroup {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
@include offset(100% - $SCOPED__CenterLine, 0, auto);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
p {
|
||||
strong, em, span, small {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
transition: $SCOPED__Transition;
|
||||
}
|
||||
strong {
|
||||
box-sizing: border-box;
|
||||
margin-top: 18px;
|
||||
padding: 0 .5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 1.25em;
|
||||
font-size: 16px;
|
||||
// @____Bibi:Dress__('-') color: $Catcher-Button_Color;
|
||||
// @____Bibi:Dress__('-') background: $Catcher-Button_BackgroundColor;
|
||||
}
|
||||
em, span, small {
|
||||
// @____Bibi:Dress__('-') color: $Catcher-Text_Color;
|
||||
}
|
||||
em {
|
||||
margin-top: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
span {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
small {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&[lang="en"] p {
|
||||
strong { text-indent: .125em; }
|
||||
em { margin-right: -.125em; }
|
||||
span { margin-right: -.125em; }
|
||||
small {}
|
||||
}
|
||||
&[lang="ja"] p {
|
||||
strong { text-indent: .5em; }
|
||||
em { margin-right: -.67em; text-indent: -.67em; }
|
||||
span { margin-right: -.67em; text-indent: 0; }
|
||||
small {}
|
||||
}
|
||||
}
|
||||
> input {
|
||||
visibility: hidden;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
transition: $SCOPED__Transition;
|
||||
// @____Bibi:Dress__('-') $SCOPED__Catcher-Area_Margin: 24px;
|
||||
// @____Bibi:Dress__('-') border-radius: $SCOPED__Catcher-Area_Margin;
|
||||
// @____Bibi:Dress__('-') @include size(
|
||||
// @____Bibi:Dress__('-') calc(100% - #{$SCOPED__Catcher-Area_Margin * 2 }),
|
||||
// @____Bibi:Dress__('-') calc(100% - #{$SCOPED__Catcher-Area_Margin * 2 + $PoweredBy_Height})
|
||||
// @____Bibi:Dress__('-') );
|
||||
// @____Bibi:Dress__('-') @include max(768px) { @include size(
|
||||
// @____Bibi:Dress__('-') calc(100% - #{$SCOPED__Catcher-Area_Margin * 0.5 * 2 }),
|
||||
// @____Bibi:Dress__('-') calc(100% - #{$SCOPED__Catcher-Area_Margin * 0.5 * 2 + $PoweredBy_Height})
|
||||
// @____Bibi:Dress__('-') ); }
|
||||
// @____Bibi:Dress__('-') transform: translateY(#{$PoweredBy_Height * -0.5});
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
width: 100%;
|
||||
// @____Bibi:Dress__('-') height: $PoweredBy_Height;
|
||||
// @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__WaitingFile;
|
||||
}
|
||||
}
|
||||
html:not(.iOS):not(.Android) & {
|
||||
// @____Bibi:Dress__('-') &:before { border: $Catcher_Border; }
|
||||
}
|
||||
html.iOS &,
|
||||
html.Android & {
|
||||
// @____Bibi:Dress__('-') &:before { border: $Catcher_Border__TouchDevice; }
|
||||
}
|
||||
html:not(.iOS):not(.Android).dragenter &,
|
||||
html:not(.iOS):not(.Android) &:hover {
|
||||
> .book-icon { transform: translateX(-4%) rotate(-4deg); }
|
||||
> .pgroup {
|
||||
p {
|
||||
strong {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
// @____Bibi:Dress__('-') &:before { border: $Catcher_Border__Hover; }
|
||||
}
|
||||
html:not(.iOS):not(.Android) &:active,
|
||||
html.iOS &:active,
|
||||
html.Android &:active {
|
||||
> .book-icon { transform: translateX(-4%) rotate( 4deg); }
|
||||
> .pgroup {
|
||||
p {
|
||||
strong {
|
||||
transform: scale(.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
html:not(.iOS):not(.Android) &:active {
|
||||
// @____Bibi:Dress__('-') &:before { border: $Catcher_Border__Active; }
|
||||
}
|
||||
html.iOS &:active,
|
||||
html.Android &:active {
|
||||
// @____Bibi:Dress__('-') &:before { border: $Catcher_Border__TouchDevice__Active; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - PoweredBy
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-poweredby {
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__PoweredBy_ZIndex;
|
||||
@include offset(auto, auto, 0, 0);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
// @____Bibi:Dress__('-') height: $PoweredBy_Height;
|
||||
font-size: 14px;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 0);
|
||||
opacity: 0;
|
||||
transition: opacity .5s linear;
|
||||
p {
|
||||
a {
|
||||
$SCOPED__PoweredBy-Logo-Image_OriginalWidth: 14400px;
|
||||
$SCOPED__PoweredBy-Logo-Image_OriginalHeight: 6504px;
|
||||
$SCOPED__PoweredBy-Logo-Image_Height: 14px;
|
||||
$SCOPED__PoweredBy-Logo-Image_Width: $SCOPED__PoweredBy-Logo-Image_Height * ($SCOPED__PoweredBy-Logo-Image_OriginalWidth / $SCOPED__PoweredBy-Logo-Image_OriginalHeight);
|
||||
$SCOPED__PoweredBy-Logo-Box_Left: 4px;
|
||||
$SCOPED__PoweredBy-Logo-Box_PaddingVertical: 6px;
|
||||
$SCOPED__PoweredBy-Logo-Box_PaddingHorizontal: 10px;
|
||||
$SCOPED__PoweredBy-Logo-Box_Height: $SCOPED__PoweredBy-Logo-Image_Height + $SCOPED__PoweredBy-Logo-Box_PaddingVertical * 2;
|
||||
$SCOPED__PoweredBy-Logo-Box_Width: $SCOPED__PoweredBy-Logo-Image_Width + $SCOPED__PoweredBy-Logo-Box_PaddingHorizontal * 2;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: $SCOPED__PoweredBy-Logo-Box_Left;
|
||||
margin: auto 0;
|
||||
border-radius: 2px;
|
||||
@include size($SCOPED__PoweredBy-Logo-Box_Width, $SCOPED__PoweredBy-Logo-Box_Height);
|
||||
font-size: $SCOPED__PoweredBy-Logo-Image_Height;
|
||||
line-height: $SCOPED__PoweredBy-Logo-Box_Height/* + 2px*/;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
&,
|
||||
&:before,
|
||||
&:after {
|
||||
transition: .1s linear;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
margin: 0;
|
||||
@include size(100%);
|
||||
//background: transparent none no-repeat center (($SCOPED__PoweredBy-Logo-Box_Height - $SCOPED__PoweredBy-Logo-Image_Height) / 2 + 2px );
|
||||
background: transparent none no-repeat center center;
|
||||
background-size: $SCOPED__PoweredBy-Logo-Image_Width $SCOPED__PoweredBy-Logo-Image_Height;
|
||||
}
|
||||
&:before { background-image: url(#{$images-path}/Bibi.svg); filter: invert(100%); } // White
|
||||
&:after { background-image: url(#{$images-path}/Bibi.svg); } // Black
|
||||
}
|
||||
}
|
||||
}
|
||||
html.waiting-file &,
|
||||
html.waiting &,
|
||||
html.panel-opened & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
// @____Bibi:Dress__('-') html.veil-opened & {
|
||||
// @____Bibi:Dress__('-') p {
|
||||
// @____Bibi:Dress__('-') a {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__VeilOpened;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') a:hover {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__VeilOpened__Hover;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__VeilOpened__Hover; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__VeilOpened__Hover; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') html.waiting-file & {
|
||||
// @____Bibi:Dress__('-') p {
|
||||
// @____Bibi:Dress__('-') a {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__WaitingFile;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') a:hover {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__WaitingFile__Hover;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__WaitingFile__Hover; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__WaitingFile__Hover; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') html.panel-opened & {
|
||||
// @____Bibi:Dress__('-') p {
|
||||
// @____Bibi:Dress__('-') a {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__PanelOpened;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') a:hover {
|
||||
// @____Bibi:Dress__('-') background-color: $PoweredBy-A_BackgroundColor__PanelOpened__Hover;
|
||||
// @____Bibi:Dress__('-') &:before { opacity: $PoweredBy-A-Logo_OpacityOfWhite__PanelOpened__Hover; }
|
||||
// @____Bibi:Dress__('-') &:after { opacity: $PoweredBy-A-Logo_OpacityOfBlack__PanelOpened__Hover; }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
// @____Bibi:Dress__('-') }
|
||||
}
|
||||
|
||||
|
||||
// - BiB/i Info
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-info {
|
||||
overflow: hidden;
|
||||
@include size(0);
|
||||
}
|
||||
|
||||
|
||||
// - Checker
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-style-checker {
|
||||
@include writing-mode(vertical-rl);
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
// @____Bibi:Dress__('-') left: $Slider_Size * -1; top: $Menu_Height * -1; // left: 0; top: 0;
|
||||
// @____Bibi:Dress__('-') @include size($Slider_Size, $Menu_Height);
|
||||
font-size: 1rem;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Factory / Dev.
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-is-dev-mode {
|
||||
& {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 99999999999;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
padding: 2em;
|
||||
@include size(300px);
|
||||
border-radius: 150px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background: rgba(255,64,0, .9);
|
||||
pointer-events: text;
|
||||
p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
p:nth-of-type(1) {
|
||||
margin-top: -1em;
|
||||
padding-bottom: .4em;
|
||||
border-bottom: solid 1px white;
|
||||
margin-bottom: .6em;
|
||||
font-size: 18px;
|
||||
strong {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
strong:nth-of-type(1) {
|
||||
font-size: .75em;
|
||||
}
|
||||
strong:nth-of-type(2) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(2),
|
||||
p:nth-of-type(3) {
|
||||
font-size: 14px;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(3) {
|
||||
code {
|
||||
display: block;
|
||||
margin: .5em auto 0;
|
||||
@include size(12em, 2em);
|
||||
border-radius: .25em;
|
||||
font-size: 16px;
|
||||
line-height: 2em;
|
||||
background: rgba(black, .75);
|
||||
}
|
||||
}
|
||||
p:nth-of-type(4) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
@include offset(auto, 0, 0, 0);
|
||||
margin: 0 auto;
|
||||
padding: .4em 0 .6em;
|
||||
@include size(100%, auto);
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
background: rgba(white, 0);
|
||||
&:before {
|
||||
font-family: 'Material Icons';
|
||||
content: 'highlight_off';
|
||||
line-height: 1;
|
||||
}
|
||||
em {
|
||||
padding: 0 .5em 0 .25em;
|
||||
font-size: .75em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
transition: .2s linear;
|
||||
&:hover {
|
||||
color: black;
|
||||
background: rgba(white, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
& {
|
||||
transform: translateY(-200%) rotate(-360deg);// scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
&.show {
|
||||
transition: 1s cubic-bezier(.5,0,0,1.5);
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
&.hide {
|
||||
transition: 1s cubic-bezier(1,0,0,1);
|
||||
transform: translateY( 800%) rotate( 360deg);// scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div#__bs_notify__ {
|
||||
box-sizing: border-box !important;
|
||||
display: table-cell !important;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: auto !important;
|
||||
border-radius: 1.5em !important;
|
||||
padding: 0 !important;
|
||||
width: 16em !important;
|
||||
height: 3em !important;
|
||||
line-height: 3em !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold !important;
|
||||
text-indent: -.25em !important;
|
||||
text-shadow: 0 0 2px black !important;
|
||||
background: rgba(black, 0.5) !important;
|
||||
//transform-origin: 0 100% !important;
|
||||
//transform: translateY(-2em) rotate(90deg) !important;
|
||||
}
|
||||
347
bibi/resources/styles/_subpanels.scss
Normal file
347
bibi/resources/styles/_subpanels.scss
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
// ================================================================================
|
||||
// + Subpanel
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div.bibi-subpanel {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Subpanel_ZIndex;
|
||||
// @____Bibi:Dress__('-') &.bibi-subpanel-right, &:not(.bibi-subpanel-left) { right: $Subpanel_Margin; }
|
||||
// @____Bibi:Dress__('-') &.bibi-subpanel-left { left: $Subpanel_Margin; }
|
||||
// @____Bibi:Dress__('-') top: $Menu_Height + $Subpanel_Margin;
|
||||
margin: auto;
|
||||
// @____Bibi:Dress__('-') width: calc(100% - #{$Subpanel_Margin * 2});
|
||||
// @____Bibi:Dress__('-') max-width: 320px - $Subpanel_Margin * 2;
|
||||
// @____Bibi:Dress__('-') html.appearance-horizontal & { max-height: calc(100% - #{$Menu_Height + $Subpanel_Margin * 2}); }
|
||||
// @____Bibi:Dress__('-') html.appearance-vertical & { max-height: calc(100% - #{$Menu_Height + $Subpanel_Margin * 2}); }
|
||||
// @____Bibi:Dress__('-') border-radius: $Subpanel_BorderRadius;
|
||||
// @____Bibi:Dress__('-') background: $Subpanel_BackgroundColor;
|
||||
// @____Bibi:Dress__('-') transform: translateY($Subpanel_Margin * -2) scale(0);
|
||||
opacity: 0.25;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
// @____Bibi:Dress__('-') transition-timing-function: $Subpanel_TransitionTimingFunction__Close;
|
||||
overflow: auto; -webkit-overflow-scrolling: touch;
|
||||
&.opened {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
//transition: transform 0.2s;
|
||||
// @____Bibi:Dress__('-') transition-timing-function: $Subpanel_TransitionTimingFunction__Open;
|
||||
// @____Bibi:Dress__('-') box-shadow: $Subpanel_BoxShadow;
|
||||
}
|
||||
// @____Bibi:Dress__('-') .bibi-icon { @include size($Subpanel-Icon_Size); }
|
||||
}
|
||||
|
||||
|
||||
// - Sub Panel :: Scrollbar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div.bibi-subpanel {
|
||||
&::-webkit-scrollbar {
|
||||
// @____Bibi:Dress__('-') @include size($Subpanel-Scrollbar-Track_Size);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// @____Bibi:Dress__('-') background: $Subpanel-Scrollbar-Track_BackgroundColor;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-style: solid;
|
||||
// @____Bibi:Dress__('-') border-width: ($Subpanel-Scrollbar-Track_Size - $Subpanel-Scrollbar-Thumb_Size) * 0.5;
|
||||
// @____Bibi:Dress__('-') border-color: $Subpanel-Scrollbar-Track_BackgroundColor;
|
||||
// @____Bibi:Dress__('-') border-radius: $Subpanel-Scrollbar-Track_Size * 0.5;
|
||||
// @____Bibi:Dress__('-') background: $Subpanel-Scrollbar-Thumb_BackgroundColor;
|
||||
// @____Bibi:Dress__('-') &:hover { background: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover; }
|
||||
// @____Bibi:Dress__('-') &:active { background: $Subpanel-Scrollbar-Thumb_BackgroundColor__Active; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Sub Panel > Section
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-subpanel-section {
|
||||
@include margin-h(0);
|
||||
// @____Bibi:Dress__('-') @include margin-v($Subpanel-Section_VerticalMargin);
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.bibi-hgroup, .bibi-buttongroup/*, .bibi-pgroup*/ {
|
||||
}
|
||||
.bibi-h, .bibi-buttonbox, //.bibi-p,
|
||||
.bibi-h-label, .bibi-button {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a.bibi-button { text-decoration: none; }
|
||||
.bibi-hgroup {
|
||||
}
|
||||
.bibi-h {
|
||||
}
|
||||
.bibi-h-label {
|
||||
// @____Bibi:Dress__('-') @include padding-h($Subpanel-Heading_HorizontalPadding);
|
||||
line-height: 1.2;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
// @____Bibi:Dress__('-') color: $Subpanel-Heading_Color;
|
||||
>small {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: .2em 0 0 .9em;
|
||||
text-overflow: ellipsis;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
// @____Bibi:Dress__('-') color: lighten($Subpanel-Heading_Color, 12%);
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -.1em;
|
||||
top: .225em;
|
||||
@include GLOBAL__FontIcon_BaseStyles("Material Icons", 1.1em, 1);
|
||||
content: "chevron_right";
|
||||
// @____Bibi:Dress__('-') color: lighten($Subpanel-Heading_Color, 24%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bibi-buttongroup { // ul
|
||||
overflow: hidden;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
// @____Bibi:Dress__('-') border-color: $Subpanel-ButtonGroup_BorderColor;
|
||||
}
|
||||
.bibi-hgroup + .bibi-buttongroup,
|
||||
.bibi-buttongroup + .bibi-buttongroup { // ul
|
||||
// @____Bibi:Dress__('-') margin-top: $Subpanel-ButtonGroup_VerticalMargin;
|
||||
}
|
||||
.bibi-buttonbox { // li
|
||||
//line-height: 1.2;
|
||||
//font-size: 14px;
|
||||
}
|
||||
.bibi-button { // a, span
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: -1px 0;
|
||||
// @____Bibi:Dress__('-') @include padding-h($Subpanel-Button_HorizontalPadding);
|
||||
border-style: solid; &.bibi-button-radio { border-style: dashed; }
|
||||
border-width: 1px 0;
|
||||
// @____Bibi:Dress__('-') min-height: $Subpanel-Button_Height;
|
||||
.bibi-button-iconbox,
|
||||
.bibi-button-label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.bibi-button-iconbox {
|
||||
// @____Bibi:Dress__('-') margin-top: ($Subpanel-Button_Height - $Subpanel-Icon_Size) / 2;
|
||||
// @____Bibi:Dress__('-') margin-right: $Subpanel-Icon_MarginRight;
|
||||
}
|
||||
.bibi-button-label {
|
||||
// @____Bibi:Dress__('-') margin-top: ($Subpanel-Button_Height - $Subpanel-Button-FontSize) / 2 - 0.5px;
|
||||
// @____Bibi:Dress__('-') font-size: $Subpanel-Button-FontSize;
|
||||
line-height: 1.2;
|
||||
small { font-size: .875em; }
|
||||
span.non-visual-in-label { @include NonVisual(); }
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
@include offset(0);
|
||||
@include size(100%);
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
// @____Bibi:Dress__('-') right: $Subpanel-Button_HorizontalPadding;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
margin: auto;
|
||||
@include size(/*20px*/auto, .9em);
|
||||
@include GLOBAL__FontIcon_BaseStyles("Material Icons", 16px, 1);
|
||||
text-align: right;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
&.default,
|
||||
&.disabled,
|
||||
&.disabled.hover {
|
||||
// @____Bibi:Dress__('-') border-color: $Subpanel-Button_BorderColor;
|
||||
// @____Bibi:Dress__('-') color: $Subpanel-Button_Color;
|
||||
// @____Bibi:Dress__('-') background: $Subpanel-Button_BackgroundColor;
|
||||
// @____Bibi:Dress__('-') &:after { color: $Subpanel-Button-Check_Color; }
|
||||
}
|
||||
html:not(.touch) &.default:active,
|
||||
&.active {
|
||||
// @____Bibi:Dress__('-') border-color: $Subpanel-Button_BorderColor__Active;
|
||||
// @____Bibi:Dress__('-') color: $Subpanel-Button_Color__Active;
|
||||
// @____Bibi:Dress__('-') background-color: $Subpanel-Button_BackgroundColor__Active;
|
||||
// @____Bibi:Dress__('-') &:after { color: $Subpanel-Button-Check_Color__Active; }
|
||||
z-index: 2;
|
||||
}
|
||||
&.hover {
|
||||
z-index: 3;
|
||||
}
|
||||
&.default.hover,
|
||||
&.bibi-button-toggle.active.hover {
|
||||
cursor: pointer;
|
||||
border-style: solid; &.bibi-button-radio { border-style: solid; }
|
||||
// @____Bibi:Dress__('-') border-color: $Subpanel-Button_BorderColor__Hover;
|
||||
// @____Bibi:Dress__('-') color: $Subpanel-Button_Color__Hover;
|
||||
// @____Bibi:Dress__('-') background-color: $Subpanel-Button_BackgroundColor__Hover;
|
||||
// @____Bibi:Dress__('-') &:after { color: $Subpanel-Button-Check_Color__Hover; }
|
||||
}
|
||||
&.disabled { &, &.hover {
|
||||
.bibi-button-iconbox,
|
||||
.bibi-button-label { opacity: 0.5 !important; }
|
||||
}}
|
||||
}
|
||||
.bibi-button-toggle,
|
||||
.bibi-button-radio {
|
||||
&.active {
|
||||
.bibi-button-label { font-weight: bold; }
|
||||
}
|
||||
}
|
||||
.bibi-button-link {
|
||||
&:after { content: "chevron_right"; }
|
||||
}
|
||||
.bibi-button-toggle {
|
||||
&:after { font-size: 30px; }
|
||||
&.default:after,
|
||||
html:not(.touch) &.active:active:after {
|
||||
content: "toggle_off"; // content: "check_box_outline_blank";
|
||||
}
|
||||
&.active:after,
|
||||
html:not(.touch) &.default:active:after {
|
||||
content: "toggle_on"; // content: "check_box";
|
||||
}
|
||||
}
|
||||
.bibi-button-radio {
|
||||
&.default:after {
|
||||
content: "radio_button_unchecked";
|
||||
}
|
||||
html:not(.touch) &.default:active:after {
|
||||
content: "check_circle";
|
||||
}
|
||||
&.active:after,
|
||||
html:not(.touch) &.active:active:after {
|
||||
content: "radio_button_checked";
|
||||
}
|
||||
}
|
||||
.bibi-buttongroup-tiled {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
.bibi-buttonbox {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.bibi-button {
|
||||
margin: 0 -1px;
|
||||
border-width: 0 1px;
|
||||
// @____Bibi:Dress__('-') padding-right: $Subpanel-Button_HorizontalPadding / 2;
|
||||
.bibi-button-iconbox {
|
||||
}
|
||||
.bibi-button-label {
|
||||
// @____Bibi:Dress__('-') margin-top: ($Subpanel-Button_Height - 12px) / 2 - 0.5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.bibi-button-link {
|
||||
&:after {
|
||||
margin-right: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .bibi-pgroup {
|
||||
// border: solid 0 rgba(black, 0.1);
|
||||
// overflow: hidden;
|
||||
// color: rgb(64,64,64);
|
||||
// background: white;//rgba(white, 0.9);
|
||||
// }
|
||||
// .bibi-hgroup + .bibi-pgroup,
|
||||
// .bibi-pgroup + .bibi-pgroup,
|
||||
// .bibi-pgroup:first-child {
|
||||
// border-top-width: 1px;
|
||||
// }
|
||||
// .bibi-pgroup:last-child {
|
||||
// border-bottom-width: 1px;
|
||||
// }
|
||||
// .bibi-p {
|
||||
// margin: 4px 0 0;
|
||||
// &:first-child { margin-top: 8px; }
|
||||
// &:last-child { margin-bottom: 6px; }
|
||||
// padding-left: calc(#{$Subpanel-Section-Something_HorizontalPadding} + 2px);
|
||||
// padding-right: $Subpanel-Section-Something_HorizontalPadding;
|
||||
// line-height: 1.4;
|
||||
// font-size: 12px;
|
||||
// text-align: justify;
|
||||
// small {
|
||||
// font-size: 10px;
|
||||
// }
|
||||
// .code {
|
||||
// font-size: 12px;
|
||||
// font-family: monospace;
|
||||
// word-break: break-all;
|
||||
// color: rgb(96,96,96);
|
||||
// }
|
||||
// .block {
|
||||
// box-sizing: border-box;
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// }
|
||||
// input.block {
|
||||
// border: solid 1px rgb(234,234,234);
|
||||
// padding: .5em;
|
||||
// }
|
||||
// strong {
|
||||
// font-weight: bold;
|
||||
// }
|
||||
// em {
|
||||
// background: rgba(black, 0.075);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// - Sub Panel: Bookmarks
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
#bibi-subpanel_bookmarks {
|
||||
#bibi-subpanel-section_put-a-bookmark {
|
||||
}
|
||||
#bibi-subpanel-section_bookmarks {
|
||||
.bibi-buttongroup {
|
||||
.bibi-buttonbox {
|
||||
.bibi-button {
|
||||
// &.bibi-button-bookmark-is-hot, &.bibi-button-bookmark-is-cold { transition: background-color linear .234s; }
|
||||
// @____Bibi:Dress__('-') &.hot { background: $BookmarkSubpanel-Button_BackgroundColor__Hot; }
|
||||
.bibi-button-label {
|
||||
// @____Bibi:Dress__('-') @include BookmarkSubpanel-ButtonLabel();
|
||||
}
|
||||
.bibi-remove-bookmark {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
// @____Bibi:Dress__('-') @include size($Subpanel-Button_Height);
|
||||
// @____Bibi:Dress__('-') color: $BookmarkSubpanel-Button-RemoveBookmark_Color;
|
||||
// @____Bibi:Dress__('-') &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon(); }
|
||||
}
|
||||
&.hover .bibi-remove-bookmark {
|
||||
// @____Bibi:Dress__('-') &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark(); }
|
||||
}
|
||||
.bibi-remove-bookmark:hover {
|
||||
// @____Bibi:Dress__('-') &:before { @include BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover(); }
|
||||
}
|
||||
&.bibi-button-bookmark-is-current.disabled {
|
||||
.bibi-button-iconbox, .bibi-icon:before, .bibi-button-label, .bibi-remove-bookmark { opacity: 1 !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
207
bibi/resources/styles/_veil.scss
Normal file
207
bibi/resources/styles/_veil.scss
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
// ================================================================================
|
||||
// + Veil
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-veil {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Veil_ZIndex;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@include size(100%);
|
||||
font-size: 15px;
|
||||
// @____Bibi:Dress__('-') background: $Veil_Background;
|
||||
opacity: 1;
|
||||
transition: ease-in .5s;
|
||||
&.closed {
|
||||
opacity: 0;
|
||||
transition: ease-out .5s;
|
||||
html.appearance-ltr & { transform: translateX(-240%); }
|
||||
html.appearance-rtl & { transform: translateX( 240%); }
|
||||
html.appearance-ttb & { transform: translateY(-240%); }
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0; right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
// @____Bibi:Dress__('-') height: $Menu_Height;
|
||||
// @____Bibi:Dress__('-') background: $Menu_BackgroundColor__VeilOpened;
|
||||
// @____Bibi:Dress__('-') html:not(.book-full-height) & { background: $Menu_BackgroundColor__NotBFH__VeilOpened; }
|
||||
}
|
||||
&:after {
|
||||
bottom: 0;
|
||||
// @____Bibi:Dress__('-') height: $PoweredBy_Height;
|
||||
// @____Bibi:Dress__('-') background: $PoweredBy_BackgroundColor__VeilOpened;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - ByeBye
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
p#bibi-veil-byebye {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Veil-ByeBye_ZIndex;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
@include size(240px);
|
||||
max-width: calc(100% - #{ 10px * 2 });
|
||||
// @____Bibi:Dress__('-') max-height: calc(100% - #{ $Menu_Height + 10px * 2 + $PoweredBy_Height });
|
||||
line-height: 1.75;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
// @____Bibi:Dress__('-') color: $Veil-ByeBye_Color;
|
||||
// @____Bibi:Dress__('-') background: $Veil-ByeBye_Background;
|
||||
a {
|
||||
color: inherit;
|
||||
transition: .2s linear;
|
||||
&:hover {
|
||||
color: rgb(216,216,216);
|
||||
transition: .1s linear;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
> span + span {
|
||||
margin-top: 1.5em;
|
||||
padding-top: 1.5em;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include offset(0, 0, auto);
|
||||
margin: auto;
|
||||
@include size(2em, 1px);
|
||||
background: rgba(white, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Play
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
p#bibi-veil-play {
|
||||
display: none; html.waiting & { display: flex; }
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Veil-Play_ZIndex;
|
||||
@include offset(0);
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
@include size(100%);
|
||||
// @____Bibi:Dress__('-') background: $Veil-Play_BackgroundColor; &:hover { background-color: $Veil-Play_BackgroundColor__Hover; }
|
||||
cursor: pointer;
|
||||
transition: .2s ease-out;
|
||||
&:before { // Icon
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: .2s cubic-bezier(.2,.8,.8,1.6);
|
||||
// @____Bibi:Dress__('-') @include Veil-Play-Icon();
|
||||
}
|
||||
&,
|
||||
html.appearance-ttb & { // ↓
|
||||
flex-direction: column;
|
||||
&:before { transform: translateY( 0 ) scale(1.0) rotate( 90deg); }
|
||||
&:hover:before { transform: translateY( -5%) scale(1.1) rotate( 90deg); }
|
||||
&:active:before { transform: translateY( 10%) scale(1.1) rotate( 90deg); }
|
||||
}
|
||||
html.appearance-rtl & { // ←
|
||||
flex-direction: row-reverse;
|
||||
&:before { transform: translateX( 0 ) scale(1.0) rotate(180deg); }
|
||||
&:hover:before { transform: translateX( 5%) scale(1.1) rotate(180deg); }
|
||||
&:active:before { transform: translateX(-10%) scale(1.1) rotate(180deg); }
|
||||
}
|
||||
html.appearance-ltr & { // →
|
||||
flex-direction: row;
|
||||
&:before { transform: translateX( 0 ) scale(1.0) rotate( 0 ); }
|
||||
&:hover:before { transform: translateX( -5%) scale(1.1) rotate( 0 ); }
|
||||
&:active:before { transform: translateX( 10%) scale(1.1) rotate( 0 ); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Cover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-veil-cover {
|
||||
$SCOPED__CenterLine: 59%;
|
||||
& {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: $INVARIABLE__Veil-Cover_ZIndex;
|
||||
@include offset(auto, 0, 0);
|
||||
box-sizing: border-box;
|
||||
border: solid transparent;
|
||||
// @____Bibi:Dress__('-') border-width: $Veil-Cover-Image_Margin;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s linear;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
html.book-full-height & { height: 100%; }
|
||||
// @____Bibi:Dress__('-') html:not(.book-full-height) & { height: calc(100% - #{ $Menu_Height }); }
|
||||
&.with-cover-image,
|
||||
&.without-cover-image {
|
||||
opacity: 1;
|
||||
}
|
||||
&.with-cover-image {
|
||||
p { opacity: 0; }
|
||||
}
|
||||
&.without-cover-image {
|
||||
.book-icon,
|
||||
p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.book-icon {
|
||||
// @____Bibi:Dress__('-') @include DEFAULT__SPECIALICON__Book($Veil-Cover-Icon_Size__WithoutCoverImage, $Veil-Cover-Icon_OuterColor__WithoutCoverImage, $Veil-Cover-Icon_InnerColor__WithoutCoverImage, absolute);
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
bottom: 100% - $SCOPED__CenterLine;
|
||||
z-index: 1;
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@include offset($SCOPED__CenterLine, 0, auto);
|
||||
@include size(100%, 4em);
|
||||
line-height: 1.2;
|
||||
font-size: 14px;
|
||||
// @____Bibi:Dress__('-') color: $Veil-Cover-P_Color__WithoutCoverImage;
|
||||
text-align: center;
|
||||
> strong, > em, > small, > span { display: block; }
|
||||
> strong { margin-top: 1.00em; font-size: 1em * 18/14; font-weight: bold; }
|
||||
> em { margin-top: 0.75em; font-size: 1em * 14/14; }
|
||||
> small { margin-top: 0.75em; font-size: 1em * 12/14; }
|
||||
> span { margin-top: 0.75em; font-size: 1em * 12/14; }
|
||||
}
|
||||
}
|
||||
&.without-cover-image.waiting-for-unzipping {
|
||||
.book-icon { opacity: .75; }
|
||||
p {
|
||||
}
|
||||
}
|
||||
}
|
||||
17
bibi/resources/styles/bibi.scss
Normal file
17
bibi/resources/styles/bibi.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/*!
|
||||
* Material Icons by Material Design Authors / Google Inc. - https://material.io/icons
|
||||
* Licensed under the Apache License Version 2.0 - https://www.apache.org/licenses/LICENSE-2.0
|
||||
* // through a package maintained by Ravindra Marella. - https://marella.github.io/material-icons
|
||||
* // Licensed under the Apache License Version 2.0 - https://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
$material-icons-font-path: '~material-icons/iconfont/';
|
||||
@import "~material-icons/iconfont/material-icons.scss";
|
||||
/*!
|
||||
*
|
||||
* # Bibi Style (℠)
|
||||
*
|
||||
*/
|
||||
|
||||
$images-path: './images';
|
||||
@import "#globals";
|
||||
@import "@parts";
|
||||
1
bibi/resources/styles/images/Bibi.svg
Normal file
1
bibi/resources/styles/images/Bibi.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="65.04" viewBox="0 0 144 65.04"><title>Bibi</title><path d="M25.72,64.72l-12.08-.4H4.44a7.13,7.13,0,0,1-3.17-.64C.42,63.25,0,62.73,0,62.1a4,4,0,0,1,.55-2.44A9.25,9.25,0,0,0,3.16,60a11.87,11.87,0,0,0,2.28-.18A3.58,3.58,0,0,0,7,59.08c1.07-.88,1.6-2.39,1.6-4.55V17.46q0-3.37-4.11-4.22a8.48,8.48,0,0,1-3.36-1.18,1.84,1.84,0,0,1-.75-1.4A3.23,3.23,0,0,1,1,8.4a4.74,4.74,0,0,0,1.24.19H13c1.12,0,2.63-.07,4.53-.19s4.56-.18,8-.18a40.57,40.57,0,0,1,9.17.95,20.87,20.87,0,0,1,6.67,2.65,10.54,10.54,0,0,1,5,9.32,13.07,13.07,0,0,1-5.75,11,20.35,20.35,0,0,1-5.49,2.7q10.72.87,13.79,8.22a15.1,15.1,0,0,1,.94,5.62A14,14,0,0,1,48.38,55a13.73,13.73,0,0,1-4.51,5.18Q37.62,64.72,25.72,64.72ZM17.1,33.43l5.49,0H26.5A12.75,12.75,0,0,0,31,32.65a10.72,10.72,0,0,0,3.63-2.2,9.6,9.6,0,0,0,3-7.28q0-5.05-2.48-7.42Q32.19,12.89,25,12.88q-4.87,0-6.06.91a4,4,0,0,0-1.53,2.13,12,12,0,0,0-.34,3.18Zm8.76,4.84q-5.92,0-8.76.07V55.58q0,3.68,4.8,4.12c1,.07,2.38.1,4.15.1a30.47,30.47,0,0,0,5.56-.54,14.44,14.44,0,0,0,5-1.86Q41,54.64,41,48.64,41,38.26,25.86,38.27Z"/><path d="M60.61,64.35q-5.59,0-5.6-2.54a3.22,3.22,0,0,1,.58-2,5.28,5.28,0,0,0,1.6.29q3.39,0,3.31-4.29V31.39a6.46,6.46,0,0,0-.7-3.54,2.9,2.9,0,0,0-2.53-1,8.79,8.79,0,0,0-2.44.32c-.44,0-.75-.29-.95-1a2,2,0,0,1,.29-1.73,7.57,7.57,0,0,1,1.7-1.57,14.6,14.6,0,0,1,2.52-1.43,12.14,12.14,0,0,1,5-1.42,5.85,5.85,0,0,1,3,.58,3.89,3.89,0,0,1,1.48,1.56,12.36,12.36,0,0,1,.8,5.17V56.38c.07,1.92.76,3.08,2.07,3.5A9,9,0,0,0,72,60.2a13,13,0,0,1,1.43.35,3.78,3.78,0,0,1,1,.45,1.8,1.8,0,0,1,.62,1.53,3.18,3.18,0,0,1-.54,2,11.06,11.06,0,0,0-2.33-.18Zm2.22-51.11a6.63,6.63,0,0,1-2.27-.38,5.19,5.19,0,0,1-1.8-1.11,5.41,5.41,0,0,1-1.6-4.11,5.42,5.42,0,0,1,1.89-4.18,6.14,6.14,0,0,1,4.36-1.71,5.55,5.55,0,0,1,4.08,1.52A5.6,5.6,0,0,1,69,7.42,5.52,5.52,0,0,1,67.2,11.6,6.2,6.2,0,0,1,62.83,13.24Z"/><path d="M89.72,25.1A17.47,17.47,0,0,1,101.91,20,15.55,15.55,0,0,1,114,25.14q5.1,5.52,5.1,15.42,0,11.13-7,18A21.5,21.5,0,0,1,96.52,65a27.94,27.94,0,0,1-11.68-2.65,14.09,14.09,0,0,1-3.23-1.93V10.69a6.49,6.49,0,0,0-.51-3.23,3,3,0,0,0-2.69-1.17,7.72,7.72,0,0,0-1.64.17,1.67,1.67,0,0,1-1.06,0A1.7,1.7,0,0,1,75.2,6c-.5-.77.1-1.79,1.82-3A13.3,13.3,0,0,1,84.92,0q4.14,0,4.65,4.47a25.78,25.78,0,0,1,.15,2.84Zm0,5.78v25.5a12.36,12.36,0,0,0,8.18,2.84A11.42,11.42,0,0,0,107.07,55q3.75-4.44,3.75-12.19,0-8.15-3.31-12.26a9.91,9.91,0,0,0-8.24-3.74A13.54,13.54,0,0,0,89.72,30.88Z"/><path d="M129.52,64.35q-5.59,0-5.6-2.54a3.16,3.16,0,0,1,.58-2,5.22,5.22,0,0,0,1.6.29q3.39,0,3.31-4.29V31.39a6.36,6.36,0,0,0-.71-3.54,2.87,2.87,0,0,0-2.52-1,8.79,8.79,0,0,0-2.44.32c-.44,0-.75-.29-.95-1a2,2,0,0,1,.29-1.73,7.71,7.71,0,0,1,1.69-1.57,15.09,15.09,0,0,1,2.53-1.43,12.14,12.14,0,0,1,5-1.42,5.85,5.85,0,0,1,3,.58,3.94,3.94,0,0,1,1.47,1.56,12.2,12.2,0,0,1,.8,5.17V56.38c.08,1.92.77,3.08,2.08,3.5a9.16,9.16,0,0,0,1.34.32,12.7,12.7,0,0,1,1.44.35,3.78,3.78,0,0,1,1,.45,1.82,1.82,0,0,1,.62,1.53,3.12,3.12,0,0,1-.55,2,10.89,10.89,0,0,0-2.32-.18Zm2.22-51.11a6.63,6.63,0,0,1-2.27-.38,5.19,5.19,0,0,1-1.8-1.11,5.41,5.41,0,0,1-1.6-4.11A5.42,5.42,0,0,1,128,3.46a6.14,6.14,0,0,1,4.36-1.71,5.55,5.55,0,0,1,4.08,1.52,5.6,5.6,0,0,1,1.52,4.15,5.51,5.51,0,0,1-1.81,4.18A6.2,6.2,0,0,1,131.74,13.24Z"/></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
325
bibi/wardrobe/README-Dress_ja/01_Introduction.md
Normal file
325
bibi/wardrobe/README-Dress_ja/01_Introduction.md
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
|
||||
ドレス作成・運用ガイド（１）はじめに
|
||||
================================================================================================================================
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスとは
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
一般に「テーマ」や「スキン」と呼ばれるものを、ビビでは「ドレス」と呼んでいます。
|
||||
|
||||
アプリケーションの外観のうち、アプリケーションの基本的な振る舞いに関わる部分を除いたカスタマイズ可能な部分を外部に切り離しておけば、利用者は、安全な範囲でアプリケーションの外観をカスタマイズすることができるようになります。
|
||||
同時に、そのカスタマイズ成果のみをアプリケーション本体とは独立して別の利用者に配布したり、逆に別の利用者が配布しているカスタマイズ成果を自分も利用できるようになります。
|
||||
|
||||
こうした「着せ替え」の仕組みが、一般的に「テーマ機能」「スキン機能」などと呼ばれるものです。また、アプリケーション本体と独立して交換可能なカスタマイズ定義ファイルは、「テーマ」「スキン」などと呼ばれています。そしてビビでは、これらを「ドレス機能」「ドレス」と呼ぶことにしました。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの実体は１点の CSS ファイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
ビビの外観は、bibi/index.html から呼び出される２つのスタイルシートによって定義されています。
|
||||
|
||||
```
|
||||
<link id="bibi-style" rel="stylesheet" href="resources/styles/bibi.css" />
|
||||
<link id="bibi-dress" rel="stylesheet" href="wardrobe/everyday/bibi.dress.css" />
|
||||
```
|
||||
|
||||
１つめの `<link id="bibi-style" rel="stylesheet" href="resources/styles/bibi.css" />` が呼び出している CSS ファイルは、動作やレイアウトの根幹に関わるもので、カスタマイズを推奨できない内容がまとめられています。この CSS の内容についてはここでは触れません。
|
||||
|
||||
２つめの `<link id="bibi-dress" rel="stylesheet" href="wardrobe/everyday/bibi.dress.css" />` が呼び出している CSS ファイルは、ボタンやスライダーといった UI を構成するパーツの色や大きさ、書籍の表示されるエリアの背景など、変更しても動作やレイアウトに影響を与えにくい一方で視覚的にアプリケーションの個性を表現するのに適したデザイン要素のみを切り離したものです。
|
||||
|
||||
２つめに挙げた１点の CSS ファイルが、ドレスの実体ファイル＝ドレスファイルです。
|
||||
|
||||
ドレスファイルは、これから説明する方法で作成することができます。また、自分で作ったドレスも、誰かが作ったドレスも、いくつでも追加しておくことができます。
|
||||
そして、上の２点目のスタイルシート定義部分を変更することで、利用するドレスファイルを切り替え、好きなドレスに着せ替えることができます。
|
||||
|
||||
|
||||
|
||||
|
||||
誰かが作成したドレスファイルを利用するには
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
もし自分でドレスを作ろうとするのでなく、誰かが作ったドレスファイルに着せ替えたいだけの場合は、この項目以降の説明のほとんどは、読まなくても構いません。
|
||||
逆に、自分でドレスをつくろうとする場合は、この項目を読み飛ばして次の項目に進んでください。
|
||||
|
||||
たとえば、次のような構成の special ドレスフォルダを誰かから受け取って、それに着せ替えたい、とします。
|
||||
|
||||
```
|
||||
+ special
|
||||
- bibi.dress.css
|
||||
```
|
||||
|
||||
まず special フォルダを、次のように、サーバに設置したビビの wardrobe ディレクトリ内に設置（アップロード）してください。
|
||||
|
||||
```
|
||||
+ bibi/
|
||||
+ wardrobe/
|
||||
+ special/
|
||||
- bibi.dress.css
|
||||
```
|
||||
|
||||
あとは、このドキュメントの下のほうにある「ドレスの追加・変更 手順４．使用するドレスファイルの切り替え」の手順に従ってサーバ上の bibi/index.html 中の記述を更新するだけで、special ドレスに着せ替えることができます。
|
||||
（special ドレスをサーバに直接設置するのではなく、開発環境に加えたい場合は、これ以降の項目も読んでください。）
|
||||
|
||||
誰かが作成した別のドレスをさらに追加する場合も、同様に bibi/wardrobe/ ディレクトリ下にアップロードします。あとは、`bibi/index.html` 内を書き換えれば、着せるドレスを自由に選ぶことができます。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレス作成に関する技術仕様と事前の注意事項
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
ドレスのソースファイルは SCSS で記述されています。
|
||||
したがって、自分であたらしいドレスを作成するには Sass と CSS に関する若干の知識が必要です。
|
||||
|
||||
ただし、ウェブデザイナーのようにゼロから CSS / SCSS を書くことができるほどの知識は必要ありません。
|
||||
あらかじめテンプレートに変数として列挙してあるカラーコードやピクセルサイズを好きな値に変更するだけで、広範囲のカスタマイズが可能です。
|
||||
より具体的には、「ドレス作成・運用ガイド（２）カスタマイズ編」（02_Customize.md）で概説します。
|
||||
|
||||
SCSS から CSS へのコンパイル機能（変換処理）は、ビビの開発環境にあらかじめ備わっています。
|
||||
ターミナルからコマンドを１行実行するだけで、他のファイルと一緒に、ドレスの CSS ファイルも適切な場所に自動生成されます。
|
||||
|
||||
＊
|
||||
|
||||
ドレス機能はまだ実装されたばかりです。また、ビビ本体も日々進化を続けています。そのため、作成したドレスがビビの将来のバージョンにわたって完全に有効であり続ける保証はできません。
|
||||
ただし、閲覧者の読書の妨げになるような表示崩れや、カスタマイズ成果が完全に無駄になるような事態は、できるだけ抑えられるような設計にしてあります。ビビ本体の開発者も、ドレスの互換性ができるかぎり維持されるように努めます。
|
||||
したがって、もし本体の変更に伴ってドレスの互換性が部分的に失われても、少ない修正で再度有効なドレスに仕立て直すことができるはずです。
|
||||
|
||||
|
||||
|
||||
|
||||
あたらしいドレスの作成に関わるファイル・フォルダ
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
次の構成図は、クローンしたままのビビの構成ファイル・フォルダのうち、ドレスの追加・変更に関係するファイル・フォルダだけを抜き出したものです。
|
||||
|
||||
```
|
||||
+ __src
|
||||
+ bibi/
|
||||
- index.html … 使用するドレスを決定する HTML ファイルです。
|
||||
+ wardrobe/
|
||||
- _dresses.js … 用意しておきたいドレスの名前を列挙しておくファイルです。
|
||||
```
|
||||
|
||||
配布段階でこの構成図に挙げられていないファイル・フォルダは、ドレスの新規作成には関係ないため、別の目的がないかぎり編集する必要はなく、以降の説明でも言及しません。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更手順全体の概要
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
※ この項目は、一度ドレス作りの概要を把握した後の振り返りを助けるために挟んであります。最初は読み飛ばして次に進むことを推奨します。
|
||||
|
||||
1. テンプレートフォルダを生成・リネームして、あらたなドレスのソースフォルダを作る
|
||||
2. _dresses.js にドレス名を追加する
|
||||
3. ビビ全体の生成処理を実行してドレスファイルを生成する
|
||||
4. index.html で読み込むドレスファイルを変更する
|
||||
5. 表示を確認しながらソースフォルダ内を編集してドレス作りを進める
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更 手順１．ドレスのソースフォルダを準備する
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
まず、ターミナルでビビのリポジトリのディレクトリに移動してください。
|
||||
それから、次のコマンドを実行します。
|
||||
|
||||
```
|
||||
npm run make:dress-template
|
||||
```
|
||||
|
||||
すると、さきに挙げた構成図にある wardrobe ディレクトリ（__src/bibi/wardrobe/）に、生成日時を含む DRESS-TEMPLATE-20191218-153045 のような名前のフォルダが生成されます。
|
||||
これがこれから新しく作成するドレスのテンプレートになるフォルダで、中身にはドレスを構成するソースファイルのすべてが含まれています。
|
||||
|
||||
まずは、このフォルダを任意の名称に変えてください。ここでは仮に cocktail という名前にしておきます。
|
||||
このフォルダをソースフォルダと呼びます。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更 手順２．ドレスファイルを生成処理の対象に追加する
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
用意したソースフォルダからドレスファイルを生成するためには、ビビ全体のファイル生成処理を利用します。
|
||||
|
||||
ビビ全体のファイル生成処理は、ドレス以外も含む __src 以下のソースファイルに基づき、実際にサーバに設置して使用できるファイルを __dist 以下に生成します。
|
||||
__src/bibi/wardrobe/ にドレスのソースフォルダを設置し、__src/bibi/wardrobe/_dresses.js にドレス名を記載することで、ビビ全体のファイル生成処理を実行するときにそのドレスも処理対象となり、__dist/bibi/wardrobe/ 内にドレスフォルダ・ドレスファイルが生成されるようになります。
|
||||
|
||||
_dresses.js を開くと、次のような内容になっています。
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
'custom-made': [
|
||||
'everyday'
|
||||
],
|
||||
'ready-made': [
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
everyday というドレスのみが生成処理の対象になっている状態です（everyday ドレスは、デフォルトの外観として用意されている特別なドレスです）。
|
||||
|
||||
これを次のように書き換えます。
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
'custom-made': [
|
||||
'cocktail',
|
||||
'everyday'
|
||||
],
|
||||
'ready-made': [
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
'custom-made' に 'cocktail' を追記しました。
|
||||
これで cocktail ドレスが生成処理の対象に加わります。
|
||||
|
||||
ドレス名は、１文字目が半角英数で、２文字目以降は半角英数・アンダースコア・ハイフンだけから成る必要があります。
|
||||
この書式を充たさない場合、処理対象に加わることなく無視されます。
|
||||
|
||||
＊
|
||||
|
||||
もしも誰かが作成したドレス（special とします）も使いつつ自分でもドレスをつくりたい場合は、まず、special ドレスフォルダを開発環境の wardrobe ディレクトリ（__src/bibi/wardrobe/）に設置してください。
|
||||
次に、special ドレスフォルダ内が bibi.dress.scss ドレスソースファイルなら、cocktail と同じように _dresses.js の 'custom-made' に 'special' を追加します。
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
'custom-made': [
|
||||
'cocktail',
|
||||
'special',
|
||||
'everyday'
|
||||
],
|
||||
'ready-made': [
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
こうすれば special ドレスも生成処理に加わります。
|
||||
ただし、もし special ドレスフォルダ内が既に生成処理を経た bibi.dress.css ドレスファイルなら、次のように、_dresses.js の 'ready-made' に 'special' を加えてください。
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
'custom-made': [
|
||||
'cocktail',
|
||||
'everyday'
|
||||
],
|
||||
'ready-made': [
|
||||
'special'
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
'ready-made' に加えられたドレスは、ファイル生成処理を実行すると、__src/bibi/wardrobe/ から __dist/bibi/wardrobe/ にそのまま複製されます。中身は一切処理されません。
|
||||
__dist/bibi/wardrobe/ 内はファイル生成処理の際に 一旦すべて削除されてしまうため、既成ドレスは直接 __dist/bibi/wardrobe/ に置くのではなく、かならず __src/bibi/wardrobe/ に設置するようにしてください。
|
||||
|
||||
なお、'custom-made' と 'ready-made' に同じ名前のドレスがある場合、'ready-made' にのみ記述されたものとして扱われます。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更 手順３．ドレスファイルの生成を確認
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
先に書いたとおり、ドレスファイルの生成は、ビビ全体のファイル生成処理の中で行われます。
|
||||
|
||||
ターミナルで、さきほどテンプレートフォルダを生成したときからディレクトリを移動していなければそのまま、次のコマンドを実行してください。
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
すると、サーバに設置するビビの構成ファイル群（__dist ディレクトリ以下）が生成され、その中には下の CSS ファイルも生成されているはずです。
|
||||
|
||||
```
|
||||
+ __dist/
|
||||
+ bibi/
|
||||
+ wardrobe/
|
||||
+ cocktail/
|
||||
- bibi.dress.css
|
||||
```
|
||||
|
||||
この bibi.dress.css ファイルが、新しい cocktail ドレスのドレスファイルです。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更 手順４．使用するドレスファイルの切り替え
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
使用するドレスファイルは、この README の最初のほう（「ドレスの実体」の項）にあるとおり、bibi/index.html 内の記述で決まります。
|
||||
__src 以下の開発環境の bibi/index.html は編集内容がそのまま __dist 以下に反映されますので、開発時には __src/bibi/index.html を編集します。
|
||||
|
||||
```
|
||||
+ __src/
|
||||
+ bibi/
|
||||
- index.html
|
||||
```
|
||||
|
||||
この index.html を開くと、中程に次のような記述があります。
|
||||
|
||||
```
|
||||
<link id="bibi-style" rel="stylesheet" href="resources/styles/bibi.css" />
|
||||
<link id="bibi-dress" rel="stylesheet" href="wardrobe/everyday/bibi.dress.css" />
|
||||
```
|
||||
|
||||
ここで２種のスタイルシートを連続して呼び出しているうち、後者がドレスです。
|
||||
デフォルトでは everyday ドレスが使用されていますので、href 属性の値を次のように変更し、cocktail ドレスファイルを呼び出すようにします。
|
||||
具体的には、href 属性値の中の everyday というディレクトリ名を cocktail に置き換えるだけです（cocktail ではない名前でドレスを作成した場合は、もちろんその名前に置き換えます）。
|
||||
|
||||
```
|
||||
<link id="bibi-style" rel="stylesheet" href="resources/styles/bibi.css" />
|
||||
<link id="bibi-dress" rel="stylesheet" href="wardrobe/cocktail/bibi.dress.css" />
|
||||
```
|
||||
|
||||
ドレスの切り替えはこれだけで完了です。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスの追加・変更 手順５．ドレスのカスタマイズ
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
ここまでの段階では、まだ cocktail ドレスはカスタマイズされていないため、everyday ドレスと同じ見た目のままです。
|
||||
ここから、cocktail ドレスを自由にカスタマイズしていきます。
|
||||
具体的な方法は「ドレス作成・運用ガイド（２）カスタマイズ編」（02_Customize.md）を参照してください。
|
||||
|
||||
今後は index.html 内の記述を変えるだけで、いつでも everyday ドレスに戻したり、さらにまた cocktail ドレスにしたり、自由にドレスファイルを切り替えることができます。
|
||||
|
||||
|
||||
|
||||
|
||||
参考）さらに別の自作ドレスを追加して、複数のドレスを管理する
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
もしさらに別のドレスをあらたに作成するときは、cocktail ドレスを作ったときと同様に、まず `npm run make:dress-template` で作成したドレスソースフォルダを任意の名前に変更し、生成処理対象として _dresses.js にドレス名を追記します。
|
||||
|
||||
_dresses.js には、下のように順不同で追加することができます。
|
||||
|
||||
```
|
||||
module.exports = {
|
||||
'custom-made': [
|
||||
'party',
|
||||
'cocktail',
|
||||
'everyday',
|
||||
'wedding'
|
||||
],
|
||||
'ready-made': [
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
_dresses.js に列挙されたドレスは、すべて生成処理の対象になり、個別のドレスファイルが生成されます。
|
||||
既に完成していたり不要になったりして都度の生成処理にかける必要がなくなったドレスは、_dresses.js 内でコメントアウトするなどして、生成処理の対象から外すことができます（everyday ドレスも例外ではなく、もし不要なら生成処理の対象から外しても構いません）。
|
||||
|
||||
|
||||
|
||||
333
bibi/wardrobe/README-Dress_ja/02_Customize.md
Normal file
333
bibi/wardrobe/README-Dress_ja/02_Customize.md
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
|
||||
ドレス作成・運用ガイド ２．カスタマイズ編
|
||||
================================================================================================================================
|
||||
|
||||
この README では、テンプレートからのカスタマイズでオリジナルのドレスを作る人に向けて、ソースフォルダに含まれる各ファイルの役目を概説します。
|
||||
先に「ドレス作成・運用ガイド（１）はじめに」（01_Introduction.md）を読んでおいてください。
|
||||
|
||||
|
||||
|
||||
|
||||
ドレス開発環境の起動
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
「はじめに」（01_Introduction.md）では、次のコマンドでドレスファイルの生成を確認しました。
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
カスタマイズ後も最終的にはこのコマンドでドレスファイルを生成するのですが、カスタマイズの最中は、次の開発用コマンドのほうが便利です。
|
||||
|
||||
```
|
||||
npm start
|
||||
```
|
||||
|
||||
この開発用コマンドを実行すると、ローカルでサーバが立ち上がり、ブラウザでビビが開かれます。
|
||||
この状態でドレスのソースファイルを編集すると、その成果は、ブラウザをリロードしなくとも自動的に画面に反映されます。※1※2
|
||||
|
||||
最後までドレス開発が終わったら、開発用コマンドで実行されている処理を止めたうえで、改めて `npm run build` を実行し、サーバ設置用のドレスファイルを生成するのを忘れないようにしてください。
|
||||
|
||||
開発用コマンドの実行中にもドレスファイルは仮生成されていますが、これは、開発時の詳細な確認には適しているものの最終的には不要なコードが大量に含まれており、容量的にも記述内容的にも非常に重いファイルです。
|
||||
これをそのままサーバに設置して使用するのは避けてください（表面上は問題なく使用できてしまいますが、実用に向かず、閲覧者やネットワークにも迷惑をかけてしまいます）。
|
||||
|
||||
＊
|
||||
|
||||
※1 - ソースファイルを編集してもブラウザ上にスタイルの変更内容が自動反映されないときは、__src/bibi/index.html 内の記述がカスタマイズ中のドレスファイルを使うようになっているか、確認してください
|
||||
※2 - もし `npm start` 後に dresses.js を編集した場合、`npm start` し直すまでその成果は反映されません。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ドレスのソースフォルダ内の構成
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
「はじめに」に引き続き、あたらしく作成するドレスの名前は仮に cocktail であるとしておきます。
|
||||
|
||||
次のファイル構成図は、_template フォルダを複製・リネームして作った cocktail フォルダ（cocktail ドレスのソースフォルダ）内から、編集対象となるファイルのみを挙げたものです。
|
||||
構成図に挙がっていないファイルは、生成処理が利用するためのものなので、編集しないでください。
|
||||
|
||||
```
|
||||
+ dev-bib/
|
||||
+ i/
|
||||
+ res/
|
||||
+ styles/
|
||||
+ wardrobe/
|
||||
+ cocktail/
|
||||
- _arrows.scss
|
||||
- _help.scss
|
||||
- _icons.scss
|
||||
- _main.scss
|
||||
- _menu.scss
|
||||
- _nomble.scss
|
||||
- _notifier.scss
|
||||
- _panel.scss
|
||||
- _slider.scss
|
||||
- _spinner.scss
|
||||
- _stage.scss
|
||||
- _subpanels.scss
|
||||
- _veil.scss
|
||||
- bibi.dress.scss
|
||||
```
|
||||
|
||||
説明と理解の双方の便宜上、この構成図どおりのアルファベット順ではなく、次の順で説明していきます。
|
||||
これを目次として、順次読んでいってください。
|
||||
|
||||
1. bibi.dress.scss … すべてが集約される基幹ファイル（より独自性の強いカスタマイズもここで）
|
||||
2. _stage.scss … ビビ全体に関わるスタイルや、他の細部に継承される大元のスタイル
|
||||
3. _main.scss … 本の表示部分のスタイル
|
||||
4. _menu.scss … 画面上部に固定されている **Menu** UI（メニューバー）のスタイル
|
||||
5. _slider.scss … 画面下部（縦スクロール時は右）にあり、画面中央タップ／クリックで拡張される **Slider** UI のスタイル
|
||||
6. _notifier.scss … 画面上部にあらわれる **Notifier**（通知）UI のスタイル
|
||||
7. _veil.scss … 本が開かれる前に画面全体を覆っている **Veil** UI のスタイル
|
||||
8. _help.scss … UI にマウスカーソルを合わせたときに画面下部にあらわれる **Help** UI のスタイル
|
||||
9. _panel.scss … 左上アイコンから開かれる、目次・ナビゲーション・書誌情報をまとめた **Panel** UI のスタイル
|
||||
10. _subpanels.scss … メニューバーのアイコンから具体的なメニューリストとして開かれる **Subpanel** UI のスタイル
|
||||
11. _icons.scss … メニューバーと Subpanel 内のアイコンそれぞれのスタイル
|
||||
12. _spinner.scss … 時間のかかる処理中に画面中央に表示される **Spinner** UI のスタイル
|
||||
13. _nombre.scss … Slider UI の側に現れる現在の表示位置・ページ数を示す **Nombre**（ノンブル）UI のスタイル
|
||||
14. _arrows.scss … 画面左右端（縦スクロール時は上下端）にあらわれる **Arrow** UI のスタイル
|
||||
|
||||
＊
|
||||
|
||||
なお、具体的なカスタマイズの際には、各ファイル内の個々の変数・ミックスインが具体的に何を司るのかが重要ですが、できるかぎり名前でそれが自明となるように努めてあります。
|
||||
とはいえ、わかりづらそうなものを中心に、いくつかの変数・ミックスインには、各ファイル中でそれぞれの側にコメントを添えてあります。
|
||||
変数・ミックスインには命名規則があり、理解しておくとカスタマイズの助けになると思いますので、このドキュメント末尾の「参考）変数とミックスインの命名規則について」を参考にしてください。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
bibi.dress.scss … すべてが集約される基幹ファイル（より独自性の強いカスタマイズもここで）
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
最終的にはすべてのソースファイルのカスタマイズ成果がこのファイルに集約され、生成結果に出力されます。
|
||||
|
||||
```
|
||||
@import "@";
|
||||
```
|
||||
|
||||
ファイル中にあるこの１行によって、他のソースファイルの読み込みや、それに基づく実際のスタイルの生成など、すべての処理を呼び込んでいます。
|
||||
|
||||
したがって、
|
||||
|
||||
1. この１行を消去しない限りは、基本的に自由に編集できます。
|
||||
2. もし必要であれば、この１行の前で、何度も使う独自の変数やミックスインを定義しておいて、他のソースファイル内で使うこともできます。
|
||||
3. もし必要であれば、この１行の後に、ドレスのカバー範囲を超える内容のスタイルを自由に記述することができます。
|
||||
|
||||
@import 文前後に可能な自由記述では、たとえば、@import 文で任意の Sass モジュールファイルを読み込むこともできます。
|
||||
また、冒頭にある複数行コメントは、削除しても構いませんし、ドレス作成者の情報などを記述するために使うこともできます。
|
||||
|
||||
＊
|
||||
|
||||
なお、この「唯一の @import 文ですべてのスタイルを生成する。したがってその前後に自由記述ができる」という仕様は、将来のバージョンにわたって堅持するつもりでいます。
|
||||
つまり、ドレスに予め用意された仕組みを超えてスタイルを拡張したい場合は、上のルールに沿って、この bibi.dress.scss 内に記述したり、ここを起点に @import したりして編集するのが安全です。そうしておけば、ドレス機能のバージョンアップ時にも各ドレスをそれに併せて更新しやすい状態が維持されます。
|
||||
|
||||
また、今後ドレス機能自体のアップデートがあった場合、ソースフォルダ中の各ソースファイルに用意されたカスタマイズ可能な変数は、増えたり減ったりする可能性があります。
|
||||
そうした場合も、独自拡張を bibi.dress.scss に集約しておけば、他の各ソースファイルを新しいバージョンのテンプレートに基づく内容へと更新しやすいはずです。
|
||||
|
||||
もしドレス機能のバージョンアップで新しく設定可能な変数が増え、そのバージョンのビビで古いドレスを生成処理にかけた場合も、あらたな変数による設定値にはデフォルトが使用されるだけで、問題なくドレスファイルが生成される見込みです。
|
||||
そしてもちろん、新規追加変数の値は、テンプレートに倣ってドレスソースフォルダ内に追加定義すればカスタマイズ可能となります。
|
||||
|
||||
ちなみに変数が減る場合というのは、そこがカスタマイズ可能ではなくなったり、カスタマイズ対象がなくなったりする場合に考えられます。その場合も、仮になくなった変数の定義がドレスに残っていたとしても、生成処理で無視されるだけで、エラーなどは生じません。
|
||||
|
||||
|
||||
|
||||
|
||||
_stage.scss … ビビ全体に関わるスタイルや、他の細部に継承される大元のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
ビビ全体に関わるスタイルが定義されています。
|
||||
|
||||
現在、全体のフォント指定のみが存在していますが、今後増えるかもしれません。
|
||||
|
||||
|
||||
|
||||
|
||||
_main.scss … 本の表示部分のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
書籍を表示する部分全体の背景色や、読み込み中アイテムの背景色や「Loading...」表示などをカスタマイズできます。
|
||||
|
||||
「Loading...」文字列は疑似要素の content で実装されており、これは画像に変えたりすることも可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_menu.scss … 画面上部に固定されている **Menu** UI（メニューバー）のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
メニューバーの高さや閲覧者の操作状況ごとの背景色、内部のアイコンのサイズと閲覧者の操作状況ごとの色、その他構成要素の各スタイルがカスタマイズできます。
|
||||
|
||||
メニューバーは、様々な状況に応じて背景色や透明度を変化させることで、普段は閲覧者の読書を邪魔せず、設定変更したいときにはそれに応えられるようになっています。
|
||||
カスタマイズする場合は、UI としての挙動に一貫性を保ち、閲覧者が快適に読書・操作できるように気をつけてください。
|
||||
|
||||
また、デフォルトでは、これ以降に紹介するいくつかのソースファイル内でメニューバーの高さ設定である $Menu_Height を参照し、様々な要素のレイアウトをメニューバーの高さに揃えています。
|
||||
それぞれの場所で別々の値を上書き指定することもできるようになっていますが、基本的にはメニューバーの高さに合わせたままにしておくことをお勧めします。
|
||||
|
||||
アイコンの、基本サイズと色以外のスタイルは、後述の _icons.scss で、これも後述の Subpanel UI 内に現れるアイコンと統一して行うようにしてあります。
|
||||
_icons.scss 内では、デフォルトのデザインが利用しているのとは異なるアイコンフォントを利用したり、フォントではなくそれぞれ任意の画像に変更したり、抜本的で深いカスタマイズも可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_slider.scss … 画面下部（縦スクロール時は右）にあり、画面中央タップ／クリックで拡張される **Slider** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
Slider は、平常時はスクロールバーを模しており、画面中央のタップ／クリック時には大きくなってデザインを変える UI です。
|
||||
_slider.scss では、それぞれの状態の各パーツの色や大きさ、余白取りなどなど、様々なカスタマイズが可能です。
|
||||
|
||||
Slider は閲覧者の頻繁な操作が想定される繊細な UI なので、様々な操作に矛盾なく応えられるデザインになるよう、とくに細かく注意を払ってください。
|
||||
|
||||
|
||||
|
||||
|
||||
_notifier.scss … 画面上部にあらわれる **Notifier**（通知）UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
最初のローディング時に進捗を表示したり、表示設定の変更時やエラー発生時に通知を行う Notifier の文字色や背景色をカスタマイズできます。
|
||||
|
||||
デフォルトでは _menu.scss 内でメニューバーの高さを指定する変数を参照し、高さをメニューバーに揃えてあります。
|
||||
変更することもできますが、メニューバーと同じかそれ以上の高さを持たせておくことをお勧めします。
|
||||
|
||||
|
||||
|
||||
|
||||
_veil.scss … 本が開かれる前に画面全体を覆っている **Veil** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
読み込み中や、埋め込み状態などでクリック／タップで開かれるのを待っているとき、あるいはドラッグ＆ドロップを待機しているとき、または非対応環境に表示するメッセージなど、本が開かれる前の段階で画面全体を覆っているのが Veil UI です。その表示をカスタマイズできます。
|
||||
|
||||
自動的に本が開かれる設定で使用している場合、Veil は、EPUB に表紙が定義されてあればそれを、なければ簡単な書誌情報を表示してローディング中の画面を覆いますが、そのごく短い間に１度だけ現れます。この背景色などがカスタマイズできます（EPUB に表紙が定義されていない場合に書誌情報に添えて表示されるアイコンは、現在のところ変更できません）。
|
||||
|
||||
また、埋め込み状態など、設定によってクリック／タップで開かれるのを待っている場合は、動画再生アイコンに似たアイコンを表示しています。このアイコンなどもカスタマイズできます。
|
||||
|
||||
設定によってドラッグ＆ドロップによるローカル EPUB ファイルのオープンを許可している場合は、枠線やアイコンが表示されます。この線の色などもカスタマイズ可能です（本のかたちのアイコンは、現在の所変更できません）。
|
||||
|
||||
|
||||
|
||||
|
||||
_help.scss … UI にマウスカーソルを合わせたときに画面下部にあらわれる **Help** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
メニュー項目にカーソルを合わせたときなどに画面下部に現れる Help UI の、文字色や背景色をカスタマイズできます。
|
||||
|
||||
なお、そもそも Help UI を使用するかどうかはプリセットファイルで選択可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_panel.scss … 左上アイコンから開かれる、目次・ナビゲーション・書誌情報をまとめた **Panel** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
Panel 内にある目次の文字色や、表紙画像の側の区切り線の色などがカスタマイズできます。
|
||||
|
||||
なお、書字方向を横書きに固定するなどの制御は、プリセットファイルで可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_subpanels.scss … メニューバーのアイコンから具体的なメニューリストとして開かれる **Subpanel** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
メニュー各項目の文字色などが、閲覧者による設定のオン／オフなどの状況ごとにカスタマイズ可能です。
|
||||
アイコンや文字の色は、UI としての統一性が求められる箇所なので、デフォルトでは、最初に設定できるキーカラーを利用するように記述してあります。
|
||||
文字色などはキーカラー設定を無視して個別に定義し直すこともできますが、その場合はアイコンのデザインとの不統一が閲覧者を混乱させないよう、充分に注意してください。
|
||||
|
||||
Subpanel 内のアイコンも、基本サイズと色以外のスタイルは、メニューバー内のアイコンと同様、デザインの一貫性を保ちやすいよう、次項の _icons.scss 内に記述されています。
|
||||
メニューバー内のアイコン同様、アイコンフォントを変更したりフォントを使わず任意の画像に変更したり、抜本的なカスタマイズが可能になっています。
|
||||
|
||||
|
||||
|
||||
|
||||
_icons.scss … メニューバーと Subpanel 内のアイコンそれぞれのスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
アプリケーションの UI には、利用者が違和感なく利用でき、納得あるフィードバックを得られるような、一貫したマナーに基づくインタラクションが求められます。
|
||||
とくに、閲覧者の捜査結果を反映して外見を変えることも多いボタンや、そこにあしらわれるアイコンでは、この点が非常に重要です。
|
||||
|
||||
したがって、アイコンの現れる場所はメニューバー内であったり Subpanel 内であったりと個別に異なりますが、基本的なスタイルはここでまとめて指定できるようになっています。
|
||||
|
||||
多くのアイコンは、デフォルトでは Material Icons アイコンフォントを利用しています。
|
||||
これを別のアイコンフォントにしたり、あるいはフォントを使用せずに任意の画像に変更したりといった深いカスタマイズにも対応しています（それぞれ、変数ではなく、変更可能な部分に絞った mixin を用意してあります）。
|
||||
|
||||
_menu.scss や _subpanels.scss と行き来して、見て美しく操作して気持ちのよいデザインを作ってください。
|
||||
|
||||
|
||||
|
||||
|
||||
_nombre.scss … Slider UI の側に現れる現在の表示位置・ページ数を示す **Nombre**（ノンブル）UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
背景色と文字色のカスタマイズが可能です。
|
||||
|
||||
なお、画面中央をタップしたとき（Slider が大きくなっているとき）以外は表示しない、あるいはそもそも Nombre を利用しない、といった制御はプリセットファイルで可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_arrows.scss … 画面左右端（縦スクロール時は上下端）にあらわれる **Arrow** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
アイコンの色や大きさを、閲覧者の操作状況ごとにカスタマイズできます。
|
||||
|
||||
Arrow の各アイコンも、他のアイコン系要素同様、デフォルトのアイコンフォント利用をやめて画像にするなどの深いカスタマイズが可能です。
|
||||
|
||||
|
||||
|
||||
|
||||
_spinner.scss … 時間のかかる処理中に画面中央に表示される **Spinner** UI のスタイル
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
やや特殊な内容になっています。
|
||||
|
||||
大きな mixin 内の CSS を自由に編集可能とすることで、たとえば１枚のアニメーション GIF 画像にしてしまうなど、デフォルトのデザインにとらわない自由なデザインのスピナーが利用できるようにしました。
|
||||
|
||||
ビビのデフォルトでは混み入った CSS で特殊なスピナーを構築してあり、それがテンプレート中の mixin の内容ですが、この特殊なスピナー各部の色や形状をカスタマイズできるようにするよりも、独自のスピナーに置き換えられるほうが需要に合うだろう、という判断からです。
|
||||
|
||||
たとえば独自のアニメーション GIF 画像に置き換える場合は、span 要素の display を none にして、:before, :after 各疑似要素は用いず、mixin 直下に背景画像でアニメーション GIF を使用するなどの方法が考えられます（:before 疑似要素の content に画像を入れる方法も考えられます）。
|
||||
|
||||
そうした場合は @keyframes の定義は不要になりますので、コメントアウトしてください（削除しても構いません）。
|
||||
|
||||
|
||||
|
||||
|
||||
参考）変数とミックスインの命名規則について
|
||||
--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
変数定義は、原則として `$[対象要素]_[対象スタイル]: [設定値];` という書式になっています（言い換えると `$[この要素の]_[このスタイルを]: [この値に];` です）。
|
||||
ミックスインの場合は `$[対象要素] { [対象スタイル]: [設定値]; }` です。
|
||||
|
||||
`[対象要素]` 内では、ハイフン繋ぎで要素の親子関係を示している場合があります。
|
||||
|
||||
`[対象スタイル]` は、原則的には CSS プロパティをパスカルケース（アッパーキャメルケース）で表記したものです。
|
||||
いくつかの例外もありますが、その場合も要素の「なんのスタイルか」を示すことには違いありません。各変数に添えられたコメントを参考にしてください。
|
||||
|
||||
`[対象スタイル]` に続けて `__[バリエーション]` が加わる場合があります（`$[対象要素]_[対象スタイル]__[バリエーション]: [設定値];`）。
|
||||
OS の違い、ホバーなどのカーソルアクションの状況の違い、設定変更によるビビの表示状態の違い、などなど、状況を限定する条件を示しています。
|
||||
|
||||
`[設定値]` は、ほとんどすべての場合 CSS プロパティに対する設定値です。先行して設定しておいた変数を参照することもできます。
|
||||
|
||||
````````````````````````````````````````````````````````````````````````````````````````````````
|
||||
// ex.)
|
||||
|
||||
$Subpanel-Button_BackgroundColor: white;
|
||||
// 対象要素： Subpanel-Button（Subpanel 内のボタン）
|
||||
// 対象スタイル： BackgroundColor（background-color プロパティ＝背景色）
|
||||
// 設定値： white
|
||||
|
||||
$Subpanel-Button_BackgroundColor__Active: $Subpanel-Button_BackgroundColor;
|
||||
// 対象要素： Subpanel-Button（Subpanel 内のボタン）
|
||||
// 対象スタイル： BackgroundColor（background-color プロパティ＝背景色）
|
||||
// バリエーション： Active（ボタンがアクティブなとき＝クリック／タップ時・トグル／ラジオボタンの有効表示時）
|
||||
// 設定値： $Subpanel-Button_BackgroundColor（先に設定した値と同値にする目的で参照している＝white）
|
||||
````````````````````````````````````````````````````````````````````````````````````````````````
|
||||
|
||||
ほか、先頭に `DEFAULT__` の付されたミックスインがいくつか存在しています。
|
||||
これは、複数のドレスソースファイルで使用されることを前提に用意された変数で、基本的には _stage.scss 内で定義されています。
|
||||
|
||||
|
||||
|
||||
1
bibi/wardrobe/README-Dress_ja/XX_TLDR.md
Normal file
1
bibi/wardrobe/README-Dress_ja/XX_TLDR.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
（予定：サマリ／クイックリファレンス）
|
||||
1
bibi/wardrobe/_dress-codes/_@.scss
Normal file
1
bibi/wardrobe/_dress-codes/_@.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "../_dress-patterns/@a";
@import "@parts";
@import "../_dress-patterns/@z";
|
||||
19
bibi/wardrobe/_dress-codes/_@parts.scss
Normal file
19
bibi/wardrobe/_dress-codes/_@parts.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "stage";
|
||||
@import "main";
|
||||
|
||||
@import "menu";
|
||||
|
||||
@import "slider";
|
||||
|
||||
@import "notifier";
|
||||
@import "veil";
|
||||
@import "help";
|
||||
|
||||
@import "panel";
|
||||
@import "subpanels";
|
||||
|
||||
@import "icons";
|
||||
|
||||
@import "nombre";
|
||||
@import "arrows";
|
||||
@import "spinner";
|
||||
42
bibi/wardrobe/_dress-codes/_arrows.scss
Normal file
42
bibi/wardrobe/_dress-codes/_arrows.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// ================================================================================
|
||||
// + Arrows
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Arrow-Bar_Width: 40px;
|
||||
$Arrow-Icon_Size: $Arrow-Bar_Width;
|
||||
|
||||
@mixin Arrow-Icon() { // [NOTE] It is for `::before` pseudo element.
|
||||
display: block;
|
||||
margin: auto;
|
||||
@include size($Arrow-Icon_Size);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: white;//rgb(96,96,96);
|
||||
background: black;
|
||||
// --------
|
||||
font: #{$Arrow-Icon_Size} / 1em "Material Icons";
|
||||
-ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none;
|
||||
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
|
||||
speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
|
||||
}
|
||||
|
||||
@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`.
|
||||
content: "chevron_left";
|
||||
text-indent: -.03em;
|
||||
}
|
||||
|
||||
@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`.
|
||||
content: "chevron_right";
|
||||
text-indent:.03em;
|
||||
}
|
||||
|
||||
@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`.
|
||||
content: "expand_less";
|
||||
line-height: $Arrow-Icon_Size * .97;
|
||||
}
|
||||
|
||||
@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`.
|
||||
content: "expand_more";
|
||||
line-height: $Arrow-Icon_Size * 1.03;
|
||||
}
|
||||
10
bibi/wardrobe/_dress-codes/_help.scss
Normal file
10
bibi/wardrobe/_dress-codes/_help.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// ================================================================================
|
||||
// + Help
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Help_Height: $Menu_Height;
|
||||
|
||||
$Help_BorderTop: solid 1px rgb(240,240,240);
|
||||
$Help_Background: rgba(240,240,240,0.96);
|
||||
|
||||
$Help-P_Color: rgb(96,96,96);
|
||||
345
bibi/wardrobe/_dress-codes/_icons.scss
Normal file
345
bibi/wardrobe/_dress-codes/_icons.scss
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
// ================================================================================
|
||||
// + General Icons
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - General Icons' Common Style
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [ja] 場所を問わず、一般アイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__Common() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include size(100%);
|
||||
text-decoration: none;
|
||||
&:before {
|
||||
position: relative;
|
||||
// ----
|
||||
font: 1em / .98em "Material Icons";
|
||||
-ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none;
|
||||
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
|
||||
speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - General Icons in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [ja] メニューバー内のアイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__CommonInMenu() {
|
||||
&:before {
|
||||
font-size: $Menu-Icon_Size * 25/31;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__Config() {
|
||||
&:before {
|
||||
content: "settings";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__ChangeFontSize() {
|
||||
&:before {
|
||||
content: "format_size";
|
||||
top: 1px;
|
||||
text-indent: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// [ja] ３種の拡大／縮小アイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__LoupeCommon() {
|
||||
&:before {
|
||||
text-indent: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__LoupeZoomIn() {
|
||||
&:before {
|
||||
content: "zoom_in";
|
||||
.bibi-button.active &, .bibi-button.active.hover & { transform: scale(1.25) !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__LoupeZoomOut() {
|
||||
&:before {
|
||||
content: "zoom_out";
|
||||
.bibi-button.active &, .bibi-button.active.hover & { transform: scale(0.80) !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__LoupeReset() {
|
||||
&:before {
|
||||
content: "search";
|
||||
.bibi-button.active &, .bibi-button.active.hover & { html.zoomed-in & { transform: scale(0.80) !important; } html.zoomed-out & { transform: scale(1.25) !important; } }
|
||||
}
|
||||
&:after {
|
||||
content: "=";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include offset(22%, auto, auto, 22%);
|
||||
margin: auto;
|
||||
@include size(1em);
|
||||
font-size: 1em * (13px / 18px);
|
||||
line-height: 1;
|
||||
html.macOS.Safari & { top: 16%; }
|
||||
.bibi-button.active &, .bibi-button.active.hover & { transform: translateX(4px) scale(0) !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__ManageBookmarks() {
|
||||
&:before {
|
||||
content: "bookmarks";
|
||||
font-size: $Menu-Icon_Size * 21/31;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - General Icons in Slider
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [ja] Slider 内のアイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__CommonInSlider() {
|
||||
border-radius: 50%;
|
||||
&:before {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__History() {
|
||||
transition: none !important; .bibi-button:hover & { transition: $Slider-Icon_Transition !important; }
|
||||
&:before {
|
||||
content: "history";
|
||||
left: -.01em;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - General Icons in Subpanels
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [ja] Subpanel 内のアイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__CommonInSubpanels() {
|
||||
&:before {
|
||||
font-size: $Subpanel-Icon_Size * 3/4;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__UseFullBreadth() {
|
||||
&:before {
|
||||
content: "settings_overscan";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__ToggleFullscreen() {
|
||||
&:before {
|
||||
content: "fullscreen";
|
||||
html.InternetExplorer & { top: -.05em; }
|
||||
*:fullscreen & {
|
||||
content: "fullscreen_exit";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__OpenNewWindow() {
|
||||
&:before {
|
||||
content: "open_in_new";
|
||||
}
|
||||
}
|
||||
|
||||
// [ja] ５種のフォントサイズ変更アイコンすべてに適用される共通スタイル
|
||||
@mixin GENERALICON__FontSizeCommon() {
|
||||
&:before {
|
||||
content: "title";
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// [ja] ５種のフォントサイズ変更アイコンの font-size 値を同一比率で段階づけするためにここだけで使っている関数。使用しなくても構いません。
|
||||
@function LOCAL__GENERALICON__FontSize_FontSizePow($SCOPED__Size) {
|
||||
$SCOPED__FontSize: 10px; @if $SCOPED__Size > 1 { @for $i from 1 through ($SCOPED__Size - 1) { $SCOPED__FontSize: $SCOPED__FontSize * 1.28; } }
|
||||
@return $SCOPED__FontSize;
|
||||
}
|
||||
|
||||
@mixin GENERALICON__FontSizeXL() {
|
||||
&:before {
|
||||
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__FontSizeL() {
|
||||
&:before {
|
||||
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(4);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__FontSizeM() {
|
||||
&:before {
|
||||
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(3);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__FontSizeS() {
|
||||
&:before {
|
||||
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(2);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__FontSizeXS() {
|
||||
&:before {
|
||||
font-size: LOCAL__GENERALICON__FontSize_FontSizePow(1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__BookmarkCommon() {
|
||||
&:before {
|
||||
font-size: $Subpanel-Icon_Size * .9;
|
||||
top: .05em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__AddABookmark() {
|
||||
&:before {
|
||||
content: "book";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin GENERALICON__ABookmark() {
|
||||
&:before {
|
||||
content: "bookmark_border";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Special Icons
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
/* [ja]
|
||||
* これ以降にあるアイコンは、デフォルトではアイコンフォントや画像を使わず、専用に生成された HTML 要素をスタイリングすることで図形を描画しているものです。
|
||||
* いずれも、１行の @include でデフォルトのデザインを呼び出してあります。
|
||||
* その @include をコメントアウトして独自の CSS を記述することで、たとえば背景画像を利用するなど、独自のデザインに変更することができます（いくつかのプロパティはリセットした方がよいかもしれません）。
|
||||
* 対象となる要素の HTML ソースを添えてありますので、独自デザインを行う際には参考にしてください（例示ソース内部の改行・インデントは、実際の DOM には存在しません）。
|
||||
* いずれの @mixin の展開先セレクタも、添えられた HTML ソースの一番外側の要素です。子要素には入れ子書式でスタイルを適用することができます。
|
||||
*/
|
||||
|
||||
|
||||
// - "Toggle Panel" Icon in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
/* [ja]
|
||||
* バーガーメニューアイコンのスタイルです。
|
||||
* １つめの @mixin は通常時（開くためのボタン）のスタイルです。
|
||||
* ２つめの @mixin はパネルが開いているとき（閉じるためのボタン）のスタイルとして、通常時のスタイルに追加・上書きで適用されるスタイルです。
|
||||
*/
|
||||
|
||||
@mixin SPECIALICON__TogglePanel() {
|
||||
@include DEFAULT__SPECIALICON__TogglePanel();
|
||||
}
|
||||
|
||||
@mixin SPECIALICON__TogglePanel__Active() {
|
||||
@include DEFAULT__SPECIALICON__TogglePanel__Active();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
<span class="bibi-icon bibi-icon-toggle-panel">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
*/
|
||||
|
||||
|
||||
// - "View Xxxx" Icons in Subpanels
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
/* [ja]
|
||||
* 右上のボタンから開く設定メニューの Subpanel 内にある、３つの表示モード（「ページ単位」「横スクロール」「縦スクロール」）を示すアイコンのスタイルです。
|
||||
* １つめの @mixin は、３つに共通して適用されるスタイルです。
|
||||
* 以降３つの @mixin は、順に「ページ単位」「横スクロール」「縦スクロール」アイコンのスタイルとして、共通スタイルに追加・上書きで適用されます。
|
||||
*/
|
||||
|
||||
@mixin SPECIALICON__View_Common() {
|
||||
@include DEFAULT__SPECIALICON__View_Common();
|
||||
}
|
||||
@mixin SPECIALICON__ViewPaged() {
|
||||
@include DEFAULT__SPECIALICON__ViewPaged();
|
||||
}
|
||||
@mixin SPECIALICON__ViewHorizontal() {
|
||||
@include DEFAULT__SPECIALICON__ViewHorizontal();
|
||||
}
|
||||
@mixin SPECIALICON__ViewVertical() {
|
||||
@include DEFAULT__SPECIALICON__ViewVertical();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
// SPECIALICON__ViewPaged
|
||||
<span class="bibi-icon bibi-icon-view bibi-icon-view-paged">
|
||||
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-paged">
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
// SPECIALICON__ViewHorizontal
|
||||
<span class="bibi-icon bibi-icon-view bibi-icon-view-horizontal">
|
||||
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-horizontal">
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
// SPECIALICON__ViewVertical
|
||||
<span class="bibi-icon bibi-icon-view bibi-icon-view-vertical">
|
||||
<span class="bibi-shape bibi-shape-spreads bibi-shape-spreads-vertical">
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
<span class="bibi-shape bibi-shape-spread">
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
<span class="bibi-shape bibi-shape-item"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
22
bibi/wardrobe/_dress-codes/_main.scss
Normal file
22
bibi/wardrobe/_dress-codes/_main.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// ================================================================================
|
||||
// + Main
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin ItemBox-Loading() { // [NOTE] It is for `::before` pseudo element. You can use an image by `background` instead of string.
|
||||
content: "Loading...";
|
||||
@include size(100%, 2em);
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: rgb(192,192,192);
|
||||
}
|
||||
|
||||
@mixin Main__SubpanelOpened() {
|
||||
background: $HTML_Background;
|
||||
filter: brightness(87.5%);
|
||||
}
|
||||
|
||||
@mixin Main-Book__SubpanelOpened() {
|
||||
opacity: .75;
|
||||
}
|
||||
89
bibi/wardrobe/_dress-codes/_menu.scss
Normal file
89
bibi/wardrobe/_dress-codes/_menu.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
// ================================================================================
|
||||
// + Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Menu_Height: 39px;
|
||||
$Menu-Icon_Size: 31px;
|
||||
|
||||
$Menu_BackgroundColor: rgba(white, 0 );
|
||||
$Menu_BackgroundColor__Hover: rgba(white, .9);
|
||||
$Menu_BackgroundColor__Active: rgba(white, 1 );
|
||||
$Menu_BackgroundColor__VeilOpened: rgba(white, .8);
|
||||
$Menu_BackgroundColor__PanelOpened: rgba(white, 1 );
|
||||
$Menu_BoxShadow__Active: 0 0 16px rgba(black, 0.125);
|
||||
|
||||
// Not-BookFullHeight (NotBFH) ... html:not(.book-full-height)
|
||||
$Menu_BackgroundColor__NotBFH: $Menu_BackgroundColor__Active;
|
||||
$Menu_BackgroundColor__NotBFH__Hover: $Menu_BackgroundColor__NotBFH;
|
||||
$Menu_BackgroundColor__NotBFH__Active: $Menu_BackgroundColor__NotBFH;
|
||||
$Menu_BackgroundColor__NotBFH__VeilOpened: $Menu_BackgroundColor__NotBFH;
|
||||
$Menu_BackgroundColor__NotBFH__PanelOpened: $Menu_BackgroundColor__PanelOpened;
|
||||
$Menu_BorderBottomColor__NotBFH: rgba(black, .05);
|
||||
$Menu_BorderBottomColor__NotBFH__Hover: $Menu_BorderBottomColor__NotBFH;
|
||||
$Menu_BorderBottomColor__NotBFH__Active: $Menu_BorderBottomColor__NotBFH__Hover;
|
||||
$Menu_BoxShadow__NotBFH__Active: $Menu_BoxShadow__Active;
|
||||
|
||||
$Menu-ButtonGroup_Padding: ($Menu_Height - $Menu-Icon_Size) / 2;
|
||||
$Menu-ButtonGroup-Button_Margin: ($Menu_Height - $Menu-Icon_Size) / 4;
|
||||
$Menu-ButtonGroup-Separator_Width: 1px;
|
||||
$Menu-ButtonGroup-Separator_Color: rgba(216,216,216, 0.5);
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Icons in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Colors & Interaction
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
$Menu-Icon-Font_PaintColor: rgb(144,144,144);
|
||||
$Menu-Icon-Font_OutlineColor: transparent;
|
||||
$Menu-Icon-Shape_PaintColor: white;
|
||||
$Menu-Icon-Shape_OutlineColor: $Menu-Icon-Font_PaintColor;
|
||||
$Menu-Icon_BackgroundColor: rgba(white, 0.9);
|
||||
$Menu-Icon_BorderColor: rgb(236,236,236);
|
||||
$Menu-Icon_Transform: none;
|
||||
|
||||
// Default:Hover
|
||||
$Menu-Icon-Font_PaintColor__Hover: rgb(64,64,64);
|
||||
$Menu-Icon-Font_OutlineColor__Hover: $Menu-Icon-Font_OutlineColor;
|
||||
$Menu-Icon-Shape_PaintColor__Hover: $Menu-Icon-Shape_PaintColor;
|
||||
$Menu-Icon-Shape_OutlineColor__Hover: $Menu-Icon-Font_PaintColor__Hover;
|
||||
$Menu-Icon_BackgroundColor__Hover: rgba(248,248,248,0.9);//$Menu-Icon_BackgroundColor;
|
||||
$Menu-Icon_BorderColor__Hover: rgb(192,192,192);
|
||||
$Menu-Icon_Transform__Hover: $Menu-Icon_Transform;
|
||||
|
||||
// Active
|
||||
$Menu-Icon-Font_PaintColor__Active: $Menu-Icon_BackgroundColor;
|
||||
$Menu-Icon-Font_OutlineColor__Active: transparent;
|
||||
$Menu-Icon-Shape_PaintColor__Active: $Menu-Icon-Shape_PaintColor;
|
||||
$Menu-Icon-Shape_OutlineColor__Active: $Menu-Icon-Font_PaintColor;
|
||||
$Menu-Icon_BackgroundColor__Active: $Menu-Icon-Font_PaintColor;
|
||||
$Menu-Icon_BorderColor__Active: darken($Menu-Icon_BorderColor, 30%);
|
||||
$Menu-Icon_Transform__Active: rotate(360deg);
|
||||
|
||||
// Active:Hover
|
||||
$Menu-Icon-Font_PaintColor__Active-Hover: $Menu-Icon-Font_PaintColor__Active;
|
||||
$Menu-Icon-Font_OutlineColor__Active-Hover: transparent;
|
||||
$Menu-Icon-Shape_PaintColor__Active-Hover: $Menu-Icon-Shape_PaintColor__Active;
|
||||
$Menu-Icon-Shape_OutlineColor__Active-Hover: lighten($Menu-Icon-Shape_OutlineColor__Active, 10%);
|
||||
$Menu-Icon_BackgroundColor__Active-Hover: rgb(96,96,96);
|
||||
$Menu-Icon_BorderColor__Active-Hover: lighten($Menu-Icon_BorderColor__Active, 10%);
|
||||
$Menu-Icon_Transform__Active-Hover: $Menu-Icon_Transform__Active;
|
||||
|
||||
// Transition
|
||||
$Menu-Icon_Transition:
|
||||
color 0.125s linear,
|
||||
background-color 0.125s linear,
|
||||
border-color 0.125s linear,
|
||||
text-shadow 0.125s linear,
|
||||
box-shadow 0.125s linear,
|
||||
transform 0.25s ease
|
||||
;
|
||||
|
||||
// Disabled
|
||||
$Menu-Icon_Opacity__Disabled: 0.33;
|
||||
21
bibi/wardrobe/_dress-codes/_nombre.scss
Normal file
21
bibi/wardrobe/_dress-codes/_nombre.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
// ================================================================================
|
||||
// + Nombre
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Nombre_Width: 140px;
|
||||
$Nombre_Height: 20px;
|
||||
|
||||
$Nombre_KeyColor: rgb(48,48,48);
|
||||
|
||||
$Nombre-Current_Color: $Nombre_KeyColor;
|
||||
$Nombre-Delimiter_Color: lighten($Nombre_KeyColor, 20%);
|
||||
$Nombre-Total_Color: lighten($Nombre_KeyColor, 10%);
|
||||
$Nombre-Percent_Color: lighten($Nombre_KeyColor, 20%);
|
||||
$Nombre_BackgroundColor: rgba(lighten($Nombre_KeyColor, 77%), .9);
|
||||
|
||||
$Nombre_KeyColor__SliderOpened: $Slider_KeyColor;
|
||||
$Nombre-Current_Color__SliderOpened: $Nombre_KeyColor__SliderOpened;
|
||||
$Nombre-Delimiter_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 20%);
|
||||
$Nombre-Total_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 10%);
|
||||
$Nombre-Percent_Color__SliderOpened: lighten($Nombre_KeyColor__SliderOpened, 20%);
|
||||
$Nombre_BackgroundColor__SliderOpened: transparent;
|
||||
14
bibi/wardrobe/_dress-codes/_notifier.scss
Normal file
14
bibi/wardrobe/_dress-codes/_notifier.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// ================================================================================
|
||||
// + Notifier
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Notifier_Height: $Menu_Height;
|
||||
|
||||
$Notifier_FontFamily: inherit;
|
||||
$Notifier_FontFamily__Error: $Notifier_FontFamily;
|
||||
|
||||
$Notifier_Color: rgb(69,69,69);
|
||||
$Notifier_Color__Error: rgb(192,64,0);
|
||||
|
||||
$Notifier_Background: rgba(252,252,252,0.96);
|
||||
$Notifier_BoxShadow: 0 2px 4px rgba(0,0,0,0.125);
|
||||
33
bibi/wardrobe/_dress-codes/_panel.scss
Normal file
33
bibi/wardrobe/_dress-codes/_panel.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// ================================================================================
|
||||
// + Panel
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
$Panel_PaddingBefore: 20px;
|
||||
$Panel_PaddingAfter: $Panel_PaddingBefore;
|
||||
$Panel_PaddingStart: 20px;
|
||||
$Panel_PaddingEnd: $Panel_PaddingStart;
|
||||
$Panel_Background: rgb(246,246,246);
|
||||
|
||||
|
||||
// . Navigation
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Panel-Nav-A_Color: rgb(64,64,64);
|
||||
$Panel-Nav-A_TextDecorationColor: rgb(216,216,216);
|
||||
$Panel-Nav-A_Color__Hover: steelblue;
|
||||
$Panel-Nav-A_TextDecorationColor__Hover: steelblue;
|
||||
|
||||
|
||||
// . Cover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Panel-Cover_MarginBefore: 20px;
|
||||
$Panel-Cover_PaddingBefore: $Panel-Cover_MarginBefore;
|
||||
$Panel-Cover_BorderColor: rgb(232,232,232);
|
||||
|
||||
$Panel-Cover-Icon_Size__WithoutCoverImage: 144px;
|
||||
$Panel-Cover-Icon_OuterColor__WithoutCoverImage: white;
|
||||
$Panel-Cover-Icon_InnerColor__WithoutCoverImage: rgb(246,246,246);
|
||||
|
||||
$Panel-Cover-Info_Color: rgb(160,160,160);
|
||||
140
bibi/wardrobe/_dress-codes/_slider.scss
Normal file
140
bibi/wardrobe/_dress-codes/_slider.scss
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
// ================================================================================
|
||||
// + Slider
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Slider_Size: 64px;
|
||||
|
||||
$Slider_PaddingStart__SliderOpened: 8px;
|
||||
$Slider_PaddingEnd__SliderOpened: 8px;
|
||||
$Slider_PaddingBefore__SliderOpened: 8px; $Slider_PaddingBefore__SliderOpened__WithHistory: 48px;
|
||||
$Slider_PaddingAfter__SliderOpened: 8px;
|
||||
|
||||
$Slider_Transition__Open: .01s ease;
|
||||
$Slider_Transition__Close: .1s ease;
|
||||
|
||||
$Slider_KeyColor: steelblue;
|
||||
// [ja] └ Slider 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義）※以降の項目で利用できますが、してもしなくても構いません
|
||||
|
||||
$Slider_BorderColor: rgb(232,232,232);
|
||||
$Slider_Background: white;
|
||||
$Slider_BoxShadow: none;
|
||||
|
||||
$Slider_BorderColor__SliderOpened: darken($Slider_Background, 20%);
|
||||
$Slider_Background__SliderOpened: rgb(236,236,236);//rgb(222,222,222);
|
||||
$Slider_BoxShadow__SliderOpened: 0 0 16px rgba(black, 0.125);
|
||||
|
||||
|
||||
// - . History
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Slider-History-Button-Icon_Size: 32px;
|
||||
$Slider-History-Button-Icon_Margin: 8px;
|
||||
$Slider-History-Button-Icon_Margin: 8px;
|
||||
|
||||
|
||||
// - . Thumb
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Slider-Thumb_BackgroundColor: rgb(160,160,160);//rgb(192,192,192);
|
||||
$Slider-Thumb_BackgroundColor__Hover: rgb(128,128,128);
|
||||
$Slider-Thumb_BackgroundColor__Active: rgb(160,160,160);
|
||||
$Slider-Thumb_BorderColor: transparent;//rgb(32,32,32);
|
||||
// [ja] └ 画面中央タップ以前の細い状態（スクロールバーを模した状態）の Slider の、現在位置表示となるサムの色（Slider 以外のスクロールバーは WebKit/Blink 系のみに適用されます）
|
||||
|
||||
$Slider-Thumb_Size__SliderOpened: 11px;
|
||||
|
||||
$Slider-Thumb_Border__SliderOpened: none 0 transparent;//solid 1px rgba($Slider_KeyColor, .1);
|
||||
$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%);
|
||||
|
||||
$Slider-Thumb_Border__SliderOpened__Min: $Slider-Thumb_Border__SliderOpened;//none 0 transparent;
|
||||
$Slider-Thumb_BackgroundColor__SliderOpened__Min: $Slider-Thumb_BackgroundColor__SliderOpened;//$Slider_KeyColor;
|
||||
|
||||
$Slider-Thumb-Halo_Width__SliderOpened: 0;//1px;
|
||||
$Slider-Thumb-Halo_Color__SliderOpened: transparent;//rgba(white, .625);
|
||||
|
||||
|
||||
// - . Rail
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Slider-Rail-FullLength_Width__SliderOpened: 1px;
|
||||
$Slider-Rail-FullLength_Color__SliderOpened: rgb(216,216,216);
|
||||
$Slider-Rail-FullLength_Color__SliderOpened__Hover: $Slider-Rail-FullLength_Color__SliderOpened;
|
||||
|
||||
$Slider-Rail-Groove_Width__SliderOpened: 1px;
|
||||
$Slider-Rail-Groove_Color__SliderOpened: rgb(216,216,216);
|
||||
$Slider-Rail-Groove_Color__SliderOpened__Hover: $Slider-Rail-Groove_Color__SliderOpened;
|
||||
|
||||
$Slider-Rail-Progress_Width__SliderOpened: 3px;
|
||||
$Slider-Rail-Progress_Color__SliderOpened: $Slider_KeyColor;
|
||||
$Slider-Rail-Progress_Color__SliderOpened__Hover: $Slider_KeyColor;
|
||||
|
||||
|
||||
// - Edgebar Box
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Edgebar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Slider-Edgebar_BorderRadius: 2px;//($Slider_Size - $Slider_PaddingStart__SliderOpened - $Slider_PaddingEnd__SliderOpened) * 0.5;
|
||||
$Slider-Edgebar_Background: white;
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Icons in Slider
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Colors & Interaction
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [In Slider] Default
|
||||
$Slider-Icon-Font_PaintColor: rgb(128,128,128);
|
||||
$Slider-Icon-Font_OutlineColor: transparent;
|
||||
$Slider-Icon-Shape_PaintColor: white;
|
||||
$Slider-Icon-Shape_OutlineColor: rgb(128,128,128);
|
||||
$Slider-Icon_BackgroundColor: white;
|
||||
$Slider-Icon_BorderColor: rgb(234,234,234);
|
||||
$Slider-Icon_Transform: none;
|
||||
|
||||
// [In Slider] Default:Hover
|
||||
$Slider-Icon-Font_PaintColor__Hover: white;
|
||||
$Slider-Icon-Font_OutlineColor__Hover: $Slider-Icon-Font_OutlineColor;
|
||||
$Slider-Icon-Shape_PaintColor__Hover: $Slider_KeyColor;
|
||||
$Slider-Icon-Shape_OutlineColor__Hover: white;
|
||||
$Slider-Icon_BackgroundColor__Hover: $Slider_KeyColor;
|
||||
$Slider-Icon_BorderColor__Hover: $Slider_KeyColor;
|
||||
$Slider-Icon_Transform__Hover: $Slider-Icon_Transform;
|
||||
|
||||
// [In Slider] Active
|
||||
$Slider-Icon-Font_PaintColor__Active: $Slider-Icon-Font_PaintColor__Hover;
|
||||
$Slider-Icon-Font_OutlineColor__Active: $Slider-Icon-Font_OutlineColor__Hover;
|
||||
$Slider-Icon-Shape_PaintColor__Active: $Slider-Icon-Shape_PaintColor__Hover;
|
||||
$Slider-Icon-Shape_OutlineColor__Active: $Slider-Icon-Shape_OutlineColor__Hover;
|
||||
$Slider-Icon_BackgroundColor__Active: $Slider-Icon_BackgroundColor__Hover;
|
||||
$Slider-Icon_BorderColor__Active: $Slider-Icon_BorderColor__Hover;
|
||||
$Slider-Icon_Transform__Active: rotate(360deg);
|
||||
|
||||
// [In Slider] Active:Hover
|
||||
$Slider-Icon-Font_PaintColor__Active-Hover: $Slider-Icon-Font_PaintColor__Active;
|
||||
$Slider-Icon-Font_OutlineColor__Active-Hover: $Slider-Icon-Font_OutlineColor__Active;
|
||||
$Slider-Icon-Shape_PaintColor__Active-Hover: $Slider-Icon-Shape_PaintColor__Active;
|
||||
$Slider-Icon-Shape_OutlineColor__Active-Hover: $Slider-Icon-Shape_OutlineColor__Active;
|
||||
$Slider-Icon_BackgroundColor__Active-Hover: $Slider-Icon_BackgroundColor__Active;
|
||||
$Slider-Icon_BorderColor__Active-Hover: $Slider-Icon_BorderColor__Active;
|
||||
$Slider-Icon_Transform__Active-Hover: $Slider-Icon_Transform__Active;
|
||||
|
||||
// [In Slider] Transition
|
||||
$Slider-Icon_Transition:
|
||||
color 0.125s linear,
|
||||
background-color 0.125s linear,
|
||||
border-color 0.125s linear,
|
||||
text-shadow 0.125s linear,
|
||||
box-shadow 0.125s linear,
|
||||
transform 0.25s ease
|
||||
;
|
||||
|
||||
// Disabled
|
||||
$Slider-Icon_Opacity__Disabled: 0.33;
|
||||
78
bibi/wardrobe/_dress-codes/_spinner.scss
Normal file
78
bibi/wardrobe/_dress-codes/_spinner.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// ================================================================================
|
||||
// + Spinner
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Spinner_Size: 56px;
|
||||
|
||||
@keyframes Spinner_Animation-Rotate {
|
||||
0% { transform: rotate( 0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes Spinner_Animation-Beat {
|
||||
0% { transform: scale(1.00); opacity: 0.75; }
|
||||
25% { transform: scale(1.25); opacity: 0.50; }
|
||||
50% { transform: scale(1.00); opacity: 0.75; }
|
||||
75% { transform: scale(0.80); opacity: 1.00; }
|
||||
100% { transform: scale(1.00); opacity: 0.75; }
|
||||
}
|
||||
/*
|
||||
@keyframes Spinner_Animation-Glow {
|
||||
0% { @include size(3px ); opacity: 1.0; }
|
||||
25% { @include size(1px ); }
|
||||
50% { @include size(1px, 6px); opacity: 1.0; }
|
||||
75% { @include size(1px ); }
|
||||
100% { @include size(3px ); opacity: 1.0; }
|
||||
}*/
|
||||
|
||||
@mixin Spiner-Content() {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
opacity: 0.75;
|
||||
}
|
||||
&:before { // Core
|
||||
@include size(24px);
|
||||
background: rgba(192,192,192, 0.75);
|
||||
}
|
||||
&:after { // Halo
|
||||
@include size(32px);
|
||||
border: solid 1.5px rgba(192,192,192, 0.5);
|
||||
}
|
||||
span { // Bits
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
@include size(100%);
|
||||
transform-origin: 50%;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
@include offset(0, 0, auto);
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
@include size(3px);
|
||||
}
|
||||
$SCOPED__Spinner_HowManyBits: 12; // 0-12
|
||||
@if $SCOPED__Spinner_HowManyBits > 0 {
|
||||
@for $i from 1 through $SCOPED__Spinner_HowManyBits {
|
||||
&:nth-child(#{$i}) {
|
||||
transform: rotate(#{360deg / $SCOPED__Spinner_HowManyBits * $i});
|
||||
&:before { background: darken(rgb(255,255,255), (72% / $SCOPED__Spinner_HowManyBits * $i)); }
|
||||
}
|
||||
}
|
||||
@if $SCOPED__Spinner_HowManyBits < 12 { @for $i from $SCOPED__Spinner_HowManyBits + 1 through 12 { &:nth-child(#{$i}) { display: none; } } }
|
||||
}
|
||||
}
|
||||
html.busy & {
|
||||
& { animation: Spinner_Animation-Rotate 1.50s linear 0s infinite normal; }
|
||||
&:before,
|
||||
&:after { animation: Spinner_Animation-Beat 2.25s ease 0s infinite normal; }
|
||||
span { animation: /*Spinner_Animation-Glow 4.00s ease-in-out 0s infinite normal*/ none; }
|
||||
}
|
||||
}
|
||||
74
bibi/wardrobe/_dress-codes/_stage.scss
Normal file
74
bibi/wardrobe/_dress-codes/_stage.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// ================================================================================
|
||||
// + Stage
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Fonts
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$HTML_FontFamily__iOS: "Helvetica", "Trebuchet MS", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", sans-serif;
|
||||
$HTML_FontFamily__macOS: $HTML_FontFamily__iOS;
|
||||
$HTML_FontFamily__Android: sans-serif;
|
||||
$HTML_FontFamily__Windows: "Helvetica", "Trebuchet MS", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
|
||||
// [ja] └ ビビ全体の、OS 別デフォルトフォント設定。html 要素に適用され、基本的にすべての UI に継承されます。
|
||||
|
||||
|
||||
// - Background
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$HTML_Background: white;//linear-gradient(to top, rgb(48,48,48), rgb(80,80,80));//rgb(96,96,96);
|
||||
|
||||
|
||||
// - Catcher
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Catcher_Background: linear-gradient(to bottom, rgb(200,200,200), rgb(240,240,240));
|
||||
|
||||
$Catcher_Border: dashed 4px white;
|
||||
$Catcher_Border__Hover: solid 8px white;
|
||||
$Catcher_Border__Active: solid 16px white;
|
||||
|
||||
$Catcher_Border__TouchDevice: solid 4px white;
|
||||
$Catcher_Border__TouchDevice__Active: solid 8px white;
|
||||
|
||||
$Catcher-Icon_Size: 128px;
|
||||
$Catcher-Icon_OuterColor: white;
|
||||
$Catcher-Icon_InnerColor: rgb(216,216,216);
|
||||
|
||||
$Catcher-Button_Color: rgb(128,128,128);
|
||||
$Catcher-Button_BackgroundColor: white;
|
||||
|
||||
$Catcher-Text_Color: rgb(128,128,128);
|
||||
|
||||
|
||||
// - PoweredBy
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$PoweredBy_Height: 39px;
|
||||
|
||||
// with Veil
|
||||
$PoweredBy_BackgroundColor__VeilOpened: rgba(white, .6);
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__VeilOpened: 0;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__VeilOpened: .69;
|
||||
$PoweredBy-A_BackgroundColor__VeilOpened: rgba(white, .84);
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__VeilOpened__Hover: 0;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__VeilOpened__Hover: .96;
|
||||
$PoweredBy-A_BackgroundColor__VeilOpened__Hover: rgba(white, 1);
|
||||
|
||||
// with Catcher
|
||||
$PoweredBy_BackgroundColor__WaitingFile: white;
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__WaitingFile: 0;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__WaitingFile: .69;
|
||||
$PoweredBy-A_BackgroundColor__WaitingFile: transparent;
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__WaitingFile__Hover: .96;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__WaitingFile__Hover: 0;
|
||||
$PoweredBy-A_BackgroundColor__WaitingFile__Hover: rgba(black, .38);
|
||||
|
||||
// with Panel
|
||||
$PoweredBy_BackgroundColor__PanelOpened: rgba(black, .1);
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__PanelOpened: 0;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__PanelOpened: .56;
|
||||
$PoweredBy-A_BackgroundColor__PanelOpened: transparent;
|
||||
$PoweredBy-A-Logo_OpacityOfWhite__PanelOpened__Hover: .96;
|
||||
$PoweredBy-A-Logo_OpacityOfBlack__PanelOpened__Hover: 0;
|
||||
$PoweredBy-A_BackgroundColor__PanelOpened__Hover: rgba(black, .38);
|
||||
267
bibi/wardrobe/_dress-codes/_subpanels.scss
Normal file
267
bibi/wardrobe/_dress-codes/_subpanels.scss
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
// ================================================================================
|
||||
// + Subpanel
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Subpanel_KeyColor: saturate(steelblue, 20%);
|
||||
// [ja] └ Subpanel 内のキーカラー（アイコンや文字色の一貫性を保つための共通／事前定義）
|
||||
|
||||
$Subpanel-Icon_Size: 21px;
|
||||
// [ja] └ Subpanel 内アイコン寸法（正方形の１辺）
|
||||
|
||||
$Subpanel_Margin: 4px;
|
||||
$Subpanel_BorderRadius: 4px;
|
||||
$Subpanel_BackgroundColor: rgba(252,252,252, 0.96);
|
||||
$Subpanel_BoxShadow: rgba(black, 0.1) 0 2px 2px;
|
||||
$Subpanel_TransitionTimingFunction__Open: cubic-bezier(.2,.8,.8,1.1);
|
||||
$Subpanel_TransitionTimingFunction__Close: ease-out;
|
||||
|
||||
|
||||
// - Sub Panel :: Scrollbar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Subpanel-Scrollbar-Track_Size: 6px;
|
||||
$Subpanel-Scrollbar-Track_BackgroundColor: rgb(248,248,248);
|
||||
|
||||
$Subpanel-Scrollbar-Thumb_Size: 2px;
|
||||
$Subpanel-Scrollbar-Thumb_BackgroundColor: rgb(195,195,195);
|
||||
$Subpanel-Scrollbar-Thumb_BackgroundColor__Hover: rgb(125,125,125);
|
||||
$Subpanel-Scrollbar-Thumb_BackgroundColor__Active: $Subpanel-Scrollbar-Thumb_BackgroundColor__Hover;
|
||||
|
||||
|
||||
// - Sub Panel > Section
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Subpanel-Section_VerticalMargin: 16px;
|
||||
|
||||
$Subpanel-Heading_HorizontalPadding: 8px;
|
||||
$Subpanel-Heading_Color: rgb(64,64,64);
|
||||
|
||||
$Subpanel-ButtonGroup_VerticalMargin: 6px;
|
||||
$Subpanel-ButtonGroup_BorderColor: rgba(black, 0.1);
|
||||
|
||||
$Subpanel-Button_HorizontalPadding: 8px;
|
||||
$Subpanel-Button_Height: 38px;
|
||||
$Subpanel-Button-FontSize: 13px;
|
||||
|
||||
$Subpanel-Button_Color: rgb(64,64,64);
|
||||
$Subpanel-Button-Check_Color: rgb(160,160,160);
|
||||
$Subpanel-Button_BorderColor: rgba(black, 0.1);
|
||||
$Subpanel-Button_BackgroundColor: white;
|
||||
|
||||
$Subpanel-Button_Color__Active: $Subpanel-Button_Color;
|
||||
$Subpanel-Button-Check_Color__Active: $Subpanel_KeyColor;
|
||||
$Subpanel-Button_BorderColor__Active: $Subpanel-Button_BorderColor;
|
||||
$Subpanel-Button_BackgroundColor__Active: $Subpanel-Button_BackgroundColor;
|
||||
|
||||
$Subpanel-Button_Color__Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Button-Check_Color__Hover: rgba($Subpanel_KeyColor, 0.8);
|
||||
$Subpanel-Button_BorderColor__Hover: rgba($Subpanel_KeyColor, 0.1);
|
||||
$Subpanel-Button_BackgroundColor__Hover: rgba(244,248,252, 0.8);
|
||||
|
||||
$Subpanel-Icon_MarginRight: 6px;
|
||||
|
||||
|
||||
// - Sub Panel: Bookmarks
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$BookmarkSubpanel-Button_BackgroundColor__Hot: rgba(gold, .125);
|
||||
|
||||
@mixin BookmarkSubpanel-Button-Label() {
|
||||
.bibi-bookmark-page {
|
||||
.bibi-bookmark-unit {
|
||||
font-size: .9em;
|
||||
}
|
||||
.bibi-bookmark-number {
|
||||
font-size: 1.1em;
|
||||
margin-left: .125em;
|
||||
}
|
||||
}
|
||||
.bibi-bookmark-total-pages {
|
||||
font-size: .8em;
|
||||
margin-left: .25em;
|
||||
opacity: .75;
|
||||
.bibi-bookmark-number {
|
||||
margin-left: .125em;
|
||||
}
|
||||
}
|
||||
.bibi-bookmark-percent {
|
||||
.bibi-bookmark-parenthesis {
|
||||
}
|
||||
.bibi-bookmark-number {
|
||||
}
|
||||
.bibi-bookmark-unit {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
.bibi-bookmark-total-pages + .bibi-bookmark-percent {
|
||||
font-size: .9em;
|
||||
margin-left: .125em;
|
||||
opacity: .75;
|
||||
.bibi-bookmark-parenthesis {
|
||||
}
|
||||
.bibi-bookmark-number {
|
||||
}
|
||||
.bibi-bookmark-unit {
|
||||
}
|
||||
}
|
||||
.bibi-bookmark-is-current {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; right: $Subpanel-Button_Height; bottom: 0; left: 0;
|
||||
width: auto;
|
||||
height: $Subpanel-Button_Height;
|
||||
&:before {
|
||||
$LOCAL__Height: $Subpanel-Icon_Size * .9;
|
||||
content: " Current Page";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: auto;
|
||||
margin: auto;
|
||||
border-radius: $LOCAL__Height * 0.5;
|
||||
padding: 0 .75em;
|
||||
width: auto;
|
||||
height: $LOCAL__Height;
|
||||
line-height: $LOCAL__Height;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
color: $Subpanel_KeyColor;
|
||||
background: rgba($Subpanel_KeyColor, .125);
|
||||
}
|
||||
&.bibi-bookmark-is-current-ja:before {
|
||||
content: " 現在のページ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon() {
|
||||
@include GLOBAL__FontIcon_BaseStyles("Material Icons", $Subpanel-Icon_Size);
|
||||
content: "cancel";
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
margin: auto;
|
||||
width: $Subpanel-Icon_Size;
|
||||
height: $Subpanel-Icon_Size;
|
||||
color: rgba($Subpanel-Button_Color, .75);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__Hover() {
|
||||
color: rgba(255,64,0, .875);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@mixin BookmarkSubpanel-Button-RemoveBookmark-Icon__HoverOnBookmark() {
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Icons in Subpanel
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Colors & Interaction
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// [In Subpanel] Default
|
||||
$Subpanel-Icon-Font_PaintColor: rgb(128,128,128);
|
||||
$Subpanel-Icon-Font_OutlineColor: transparent;
|
||||
$Subpanel-Icon-Shape_PaintColor: white;
|
||||
$Subpanel-Icon-Shape_OutlineColor: rgb(144,144,144);
|
||||
$Subpanel-Icon_BackgroundColor: rgb(248,248,248);
|
||||
$Subpanel-Icon_BorderColor: rgb(192,192,192);
|
||||
$Subpanel-Icon_Transform: none;
|
||||
|
||||
// [In Subpanel] Default:Hover
|
||||
$Subpanel-Icon-Font_PaintColor__Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon-Font_OutlineColor__Hover: transparent;
|
||||
$Subpanel-Icon-Shape_PaintColor__Hover: white;
|
||||
$Subpanel-Icon-Shape_OutlineColor__Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_BackgroundColor__Hover: lighten($Subpanel_KeyColor, 45%);
|
||||
$Subpanel-Icon_BorderColor__Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_Transform__Hover: $Subpanel-Icon_Transform;
|
||||
|
||||
// [In Subpanel] Active
|
||||
$Subpanel-Icon-Font_PaintColor__Active: white;
|
||||
$Subpanel-Icon-Font_OutlineColor__Active: transparent;
|
||||
$Subpanel-Icon-Shape_PaintColor__Active: white;
|
||||
$Subpanel-Icon-Shape_OutlineColor__Active: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_BackgroundColor__Active: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_BorderColor__Active: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_Transform__Active: rotate(360deg);
|
||||
|
||||
// [In Subpanel] Active:Hover
|
||||
$Subpanel-Icon-Font_PaintColor__Active-Hover: white;
|
||||
$Subpanel-Icon-Font_OutlineColor__Active-Hover: transparent;
|
||||
$Subpanel-Icon-Shape_PaintColor__Active-Hover: white;
|
||||
$Subpanel-Icon-Shape_OutlineColor__Active-Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_BackgroundColor__Active-Hover: lighten($Subpanel_KeyColor, 20%);
|
||||
$Subpanel-Icon_BorderColor__Active-Hover: $Subpanel_KeyColor;
|
||||
$Subpanel-Icon_Transform__Active-Hover: $Subpanel-Icon_Transform__Active;
|
||||
|
||||
// [In Subpanel] Transition
|
||||
$Subpanel-Icon_Transition:
|
||||
color 0.125s linear,
|
||||
background-color 0.125s linear,
|
||||
border-color 0.125s linear,
|
||||
text-shadow 0.125s linear,
|
||||
box-shadow 0.125s linear,
|
||||
transform 0.25s ease
|
||||
;
|
||||
|
||||
// Disabled
|
||||
$Subpanel-Icon_Opacity__Disabled: 0.33;
|
||||
|
||||
/*
|
||||
|
||||
<div class="bibi-subpanel opened">
|
||||
<div class="bibi-subpanel-section">
|
||||
<div class="bibi-hgroup">
|
||||
<p class="bibi-h"><span class="bibi-h-label">{ Heading Text }</span></p>
|
||||
</div>
|
||||
<ul class="bibi-buttongroup">
|
||||
<li class="bibi-buttonbox bibi-buttonbox-toggle">
|
||||
<span class="bibi-button bibi-button-toggle active" title="{ Button Text }">
|
||||
<span class="bibi-button-iconbox">
|
||||
<span class="bibi-icon"></span>
|
||||
</span>
|
||||
<span class="bibi-button-label">{ Button Text }</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="bibi-buttonbox bibi-buttonbox-toggle">
|
||||
<span class="bibi-button bibi-button-toggle default" title="{ Button Text }">
|
||||
<span class="bibi-button-iconbox">
|
||||
<span class="bibi-icon"></span>
|
||||
</span>
|
||||
<span class="bibi-button-label">{ Button Text }</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bibi-subpanel-section">
|
||||
<ul class="bibi-buttongroup">
|
||||
<li class="bibi-buttonbox bibi-buttonbox-radio">
|
||||
<span class="bibi-button bibi-button-radio active" title="{ Button Text }">
|
||||
<span class="bibi-button-iconbox">
|
||||
<span class="bibi-icon"></span>
|
||||
</span>
|
||||
<span class="bibi-button-label">{ Button Text }</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="bibi-buttonbox bibi-buttonbox-radio">
|
||||
<span class="bibi-button bibi-button-radio default" title="{ Button Text }">
|
||||
<span class="bibi-button-iconbox">
|
||||
<span class="bibi-icon"></span>
|
||||
</span>
|
||||
<span class="bibi-button-label">{ Button Text }</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
*/
|
||||
44
bibi/wardrobe/_dress-codes/_veil.scss
Normal file
44
bibi/wardrobe/_dress-codes/_veil.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// ================================================================================
|
||||
// + Veil
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$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);
|
||||
// [ja] └ Veil 内の各要素の基本文字色と全体の背景（背景は background プロパティに適用されるため、色以外に画像やグラデーション関数も使用できます）
|
||||
|
||||
|
||||
// - ByeBye
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Veil-ByeBye_Color: white;
|
||||
$Veil-ByeBye_Background: rgba(black, .125);
|
||||
// [ja] └ 非対応環境でのアクセス時などに表示される緊急停止画面の文字色・背景色
|
||||
|
||||
|
||||
// - Play
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Veil-Play_BackgroundColor: rgba(black, 0 );
|
||||
$Veil-Play_BackgroundColor__Hover: rgba(black, 0.4);
|
||||
|
||||
$Veil-Play-Icon_Size: 84px;
|
||||
@mixin Veil-Play-Icon() {
|
||||
font: #{$Veil-Play-Icon_Size}/#{$Veil-Play-Icon_Size} "Material Icons";
|
||||
-ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none;
|
||||
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
|
||||
speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
|
||||
content: "play_circle_filled";
|
||||
color: rgba(white, 0.9);
|
||||
text-shadow: 0 0 12px rgba(128,128,128,.125);
|
||||
}
|
||||
|
||||
|
||||
// - Cover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$Veil-Cover-Image_Margin: 8px;
|
||||
|
||||
$Veil-Cover-Icon_Size__WithoutCoverImage: 144px;
|
||||
$Veil-Cover-Icon_OuterColor__WithoutCoverImage: white;
|
||||
$Veil-Cover-Icon_InnerColor__WithoutCoverImage: rgb(222,222,222);
|
||||
|
||||
$Veil-Cover-P_Color__WithoutCoverImage: rgb(128,128,128);
|
||||
5
bibi/wardrobe/_dress-codes/bibi.dress.scss
Normal file
5
bibi/wardrobe/_dress-codes/bibi.dress.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// You can add some variables or mixins here, as you like.
|
||||
|
||||
@import "@";
|
||||
|
||||
// You can add extra styles after here, as you like.
|
||||
143
bibi/wardrobe/_dress-patterns/_#default.scss
Normal file
143
bibi/wardrobe/_dress-patterns/_#default.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
// ================================================================================
|
||||
// + Special Icons
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Panel Toggler (.bibi-icon-toggle-panel) in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
$DEFAULT__SPECIALICON__TogglePanel-Bar_Width: 19px;
|
||||
$DEFAULT__SPECIALICON__TogglePanel-Bar_Height: 2px;
|
||||
$DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation: 4px;
|
||||
$DEFAULT__SPECIALICON__TogglePanel-Bar_BorderRadius: 1px;
|
||||
|
||||
@mixin DEFAULT__SPECIALICON__TogglePanel() {
|
||||
>span {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
@include size($DEFAULT__SPECIALICON__TogglePanel-Bar_Width, $DEFAULT__SPECIALICON__TogglePanel-Bar_Height);
|
||||
border-radius: $DEFAULT__SPECIALICON__TogglePanel-Bar_BorderRadius;
|
||||
}
|
||||
$DEFAULT__SPECIALICON__TogglePanel-Bars_Top: ($Menu-Icon_Size - ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height * 3 + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation * 2)) / 2 - 1px;
|
||||
>span:nth-child(1) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 0; }
|
||||
>span:nth-child(2) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 1; }
|
||||
>span:nth-child(3) { top: $DEFAULT__SPECIALICON__TogglePanel-Bars_Top + ($DEFAULT__SPECIALICON__TogglePanel-Bar_Height + $DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation) * 2; }
|
||||
>span:nth-child(4),
|
||||
>span:nth-child(5),
|
||||
>span:nth-child(6) { display: none !important; }
|
||||
}
|
||||
|
||||
@mixin DEFAULT__SPECIALICON__TogglePanel__Active() {
|
||||
>span:nth-child(1) { opacity: 1; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * 1) rotate( 135deg); }
|
||||
>span:nth-child(2) { opacity: 0; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * 0) rotate(-360deg); }
|
||||
>span:nth-child(3) { opacity: 1; transform: translateY(($DEFAULT__SPECIALICON__TogglePanel-Bar_Isolation + $DEFAULT__SPECIALICON__TogglePanel-Bar_Height) * -1) rotate( 225deg); }
|
||||
}
|
||||
|
||||
|
||||
// - Shapes of Items and Spreads
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin DEFAULT__SPECIALICON__View_Common() {
|
||||
$SCOPED__SpreadShape_Width : 13px;
|
||||
$SCOPED__SpreadShape_Height: 11px;
|
||||
$SCOPED__ItemShape_Width : ($SCOPED__SpreadShape_Width + 1px) / 2;
|
||||
$SCOPED__ItemShape_Height: $SCOPED__SpreadShape_Height;
|
||||
span.bibi-shape-spreads {
|
||||
@include offset(0);
|
||||
margin: auto;
|
||||
@include size($SCOPED__SpreadShape_Width, $SCOPED__SpreadShape_Height);
|
||||
span.bibi-shape-spread {
|
||||
left: 0; top: 0;
|
||||
@include size(100%);
|
||||
span.bibi-shape-item {
|
||||
top: 0;
|
||||
border: solid 1px;
|
||||
@include size($SCOPED__ItemShape_Width, $SCOPED__ItemShape_Height);
|
||||
&:first-child { left: 0; }
|
||||
&:last-child { right: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin DEFAULT__SPECIALICON__ViewPaged() {
|
||||
span.bibi-shape-spreads-paged {
|
||||
span.bibi-shape-spread {
|
||||
&:first-child { display: none; }
|
||||
&:last-child { display: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin DEFAULT__SPECIALICON__ViewHorizontal() {
|
||||
span.bibi-shape-spreads-horizontal {
|
||||
span.bibi-shape-spread {
|
||||
&:first-child { transform: translateX(-100%); left: -1px; }
|
||||
&:last-child { transform: translateX( 100%); left: 1px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin DEFAULT__SPECIALICON__ViewVertical() {
|
||||
span.bibi-shape-spreads-vertical {
|
||||
span.bibi-shape-spread {
|
||||
&:first-child { transform: translateY(-100%); top: -1px; }
|
||||
&:last-child { transform: translateY( 100%); top: 1px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Book Icon
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin DEFAULT__SPECIALICON__Book($SCOPED__Size, $SCOPED__OuterColor, $SCOPED__InnerColor, $SCOPED__Position: relative) {
|
||||
$SCOPED__Line_Width: $SCOPED__Size * 8/128;
|
||||
$SCOPED__Book_Width: $SCOPED__Size - $SCOPED__Line_Width * 2.5;
|
||||
$SCOPED__Book_Height: $SCOPED__Size;
|
||||
$SCOPED__Cover_Width: $SCOPED__Book_Width - $SCOPED__Line_Width * 2;
|
||||
$SCOPED__Cover_Height: $SCOPED__Book_Height - $SCOPED__Line_Width * 4;
|
||||
$SCOPED__Page_Breadth: $SCOPED__Book_Height - $SCOPED__Line_Width - $SCOPED__Cover_Height;
|
||||
$SCOPED__Book_Breadth: $SCOPED__Page_Breadth + $SCOPED__Line_Width * 2;
|
||||
$SCOPED__OffsetLeft: ($SCOPED__Size - $SCOPED__Book_Width) * 0.5;
|
||||
$SCOPED__OffsetTop: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: $SCOPED__Position;
|
||||
@include size($SCOPED__Size);
|
||||
&:before, &:after,
|
||||
span, span:before, span:after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
span { // Back Cover
|
||||
z-index: 10;
|
||||
left: $SCOPED__OffsetLeft;
|
||||
top: $SCOPED__OffsetTop;
|
||||
border-radius: ($SCOPED__Book_Breadth * 0.5) $SCOPED__Line_Width $SCOPED__Line_Width 0;
|
||||
@include size($SCOPED__Cover_Width + $SCOPED__Line_Width * 2, $SCOPED__Size - $SCOPED__Line_Width * 3);
|
||||
&:before { // Pages
|
||||
z-index: 100;
|
||||
left: ($SCOPED__Book_Breadth * 0.5);
|
||||
top: $SCOPED__Line_Width;
|
||||
border-radius: 0 2px $SCOPED__Line_Width * 3.5 0;
|
||||
@include size($SCOPED__Cover_Width - ($SCOPED__Line_Width + $SCOPED__Page_Breadth * 0.5) + $SCOPED__Line_Width, $SCOPED__Size - $SCOPED__Line_Width);
|
||||
}
|
||||
&:after { // Top of Spine
|
||||
z-index: 1000;
|
||||
left: $SCOPED__Line_Width;
|
||||
top: $SCOPED__Line_Width;
|
||||
border-radius: ($SCOPED__Page_Breadth * 0.5) 0 0 ($SCOPED__Page_Breadth * 0.5);
|
||||
@include size($SCOPED__Page_Breadth/* * 0.5*/, $SCOPED__Page_Breadth);
|
||||
}
|
||||
}
|
||||
&:after { // Front Cover
|
||||
z-index: 10000;
|
||||
left: $SCOPED__OffsetLeft;
|
||||
top: $SCOPED__OffsetTop + ($SCOPED__Size - $SCOPED__Cover_Height);
|
||||
border-radius: 0 $SCOPED__Line_Width $SCOPED__Line_Width ($SCOPED__Book_Breadth * 0.5);
|
||||
@include size($SCOPED__Cover_Width, $SCOPED__Cover_Height);
|
||||
}
|
||||
span, &:after { background: $SCOPED__OuterColor; }
|
||||
span:before, span:after { background: $SCOPED__InnerColor; }
|
||||
}
|
||||
2
bibi/wardrobe/_dress-patterns/_@a.scss
Normal file
2
bibi/wardrobe/_dress-patterns/_@a.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "../../resources/styles/#globals";
|
||||
@import "../_dress-codes/@parts";
|
||||
19
bibi/wardrobe/_dress-patterns/_@parts.scss
Normal file
19
bibi/wardrobe/_dress-patterns/_@parts.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "stage";
|
||||
@import "main";
|
||||
|
||||
@import "menu";
|
||||
|
||||
@import "slider";
|
||||
|
||||
@import "notifier";
|
||||
@import "veil";
|
||||
@import "help";
|
||||
|
||||
@import "panel";
|
||||
@import "subpanels";
|
||||
|
||||
@import "icons";
|
||||
|
||||
@import "nombre";
|
||||
@import "arrows";
|
||||
@import "spinner";
|
||||
1
bibi/wardrobe/_dress-patterns/_@z.scss
Normal file
1
bibi/wardrobe/_dress-patterns/_@z.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "#default";
@import "@parts";
|
||||
55
bibi/wardrobe/_dress-patterns/_arrows.scss
Normal file
55
bibi/wardrobe/_dress-patterns/_arrows.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// ================================================================================
|
||||
// + Arrows
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div.bibi-arrow {
|
||||
//// Layout
|
||||
& {
|
||||
&:before { @include Arrow-Icon(); }
|
||||
}
|
||||
html.appearance-horizontal & {
|
||||
&:after { width: $Arrow-Bar_Width; } // ←→
|
||||
}
|
||||
html.appearance-horizontal.book-full-height.slider-opened &,
|
||||
html.appearance-horizontal:not(.book-full-height) & {
|
||||
top: $Menu_Height;
|
||||
}
|
||||
html.appearance-horizontal:not(.book-full-height):not(.slider-opened) & {
|
||||
height: calc(100vh - #{$Menu_Height}); // TO BE OVERWRITTEN
|
||||
}
|
||||
html.appearance-horizontal.book-full-height.slider-opened &,
|
||||
html.appearance-horizontal:not(.book-full-height).slider-opened & {
|
||||
height: calc(100vh - #{$Menu_Height + $Slider_Size});
|
||||
}
|
||||
html.appearance-vertical & {
|
||||
&:after { height: $Arrow-Bar_Width; } // ↑↓
|
||||
}
|
||||
html.appearance-vertical.slider-opened & {
|
||||
width: calc(100vw - #{$Slider_Size});
|
||||
}
|
||||
}
|
||||
|
||||
html.appearance-ttb.book-full-height.slider-opened div#bibi-arrow-back,
|
||||
html.appearance-ttb:not(.book-full-height) div#bibi-arrow-back {
|
||||
& {
|
||||
&:before { margin-top: $Menu_Height; }
|
||||
}
|
||||
}
|
||||
|
||||
html.appearance-ltr div#bibi-arrow-back,
|
||||
html.appearance-rtl div#bibi-arrow-forward {
|
||||
&:before { @include Arrow-Icon-L(); }; // ←
|
||||
}
|
||||
|
||||
html.appearance-ltr div#bibi-arrow-forward,
|
||||
html.appearance-rtl div#bibi-arrow-back {
|
||||
&:before { @include Arrow-Icon-R(); }; // →
|
||||
}
|
||||
|
||||
html.appearance-ttb div#bibi-arrow-back {
|
||||
&:before { @include Arrow-Icon-T(); }; // ↑
|
||||
}
|
||||
|
||||
html.appearance-ttb div#bibi-arrow-forward {
|
||||
&:before { @include Arrow-Icon-B(); }; // ↓
|
||||
}
|
||||
22
bibi/wardrobe/_dress-patterns/_help.scss
Normal file
22
bibi/wardrobe/_dress-patterns/_help.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// ================================================================================
|
||||
// + Help
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-help {
|
||||
border-top: $Help_BorderTop;
|
||||
height: $Help_Height;
|
||||
background: $Help_Background;
|
||||
html.slider-opened.view-paged &,
|
||||
html.slider-opened.view-horizontal & {
|
||||
bottom: $Slider_Size !important;
|
||||
}
|
||||
p {
|
||||
line-height: $Help_Height * 1.1;
|
||||
color: $Help-P_Color;
|
||||
}
|
||||
}
|
||||
|
||||
html.slider-opened:not(.panel-opened).view-vertical div#bibi-help {
|
||||
width: calc(100% - #{$Slider_Size});
|
||||
}
|
||||
329
bibi/wardrobe/_dress-patterns/_icons.scss
Normal file
329
bibi/wardrobe/_dress-patterns/_icons.scss
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
// ================================================================================
|
||||
// + Base
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - Colors & Interaction: Mix-Ins
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin Icon-OutlineColor($SCOPED__TextOrBox, $SCOPED__Icon-OutlineColor) {
|
||||
#{$SCOPED__TextOrBox}-shadow:
|
||||
-1px -1px 0px $SCOPED__Icon-OutlineColor,
|
||||
0px -1px 0px $SCOPED__Icon-OutlineColor,
|
||||
1px -1px 0px $SCOPED__Icon-OutlineColor,
|
||||
1px 0px 0px $SCOPED__Icon-OutlineColor,
|
||||
1px 1px 0px $SCOPED__Icon-OutlineColor,
|
||||
0px 1px 0px $SCOPED__Icon-OutlineColor,
|
||||
-1px 1px 0px $SCOPED__Icon-OutlineColor,
|
||||
-1px 0px 0px $SCOPED__Icon-OutlineColor,
|
||||
0px 0px 1px $SCOPED__Icon-OutlineColor;
|
||||
}
|
||||
|
||||
@mixin Icon-Colouring($SCOPED__Icon-Font_PaintColor, $SCOPED__Icon-Font_OutlineColor, $SCOPED__Icon-Shape_PaintColor, $SCOPED__Icon-Shape_OutlineColor, $SCOPED__Icon-BackgroundColor, $SCOPED__Icon-BorderColor) {
|
||||
color: $SCOPED__Icon-BorderColor;
|
||||
border-color: $SCOPED__Icon-BorderColor;
|
||||
background-color: $SCOPED__Icon-BackgroundColor;
|
||||
&:before, &:after {
|
||||
color: $SCOPED__Icon-Font_PaintColor;
|
||||
@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("text", $SCOPED__Icon-Font_OutlineColor); }
|
||||
}
|
||||
span.bibi-shape-spreads {
|
||||
span.bibi-shape-spread {
|
||||
span.bibi-shape-item {
|
||||
border-color: $SCOPED__Icon-Shape_OutlineColor;
|
||||
background-color: $SCOPED__Icon-Shape_PaintColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bibi-icon-toggle-panel {
|
||||
>span {
|
||||
background-color: $SCOPED__Icon-Font_PaintColor;
|
||||
@if $SCOPED__Icon-Font_OutlineColor != transparent { @include Icon-OutlineColor("box", $SCOPED__Icon-Font_OutlineColor); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Colors & Interaction: Default
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon {
|
||||
.bibi-button.disabled & {
|
||||
&:before, &:after { opacity: 0.33 !important; }
|
||||
}
|
||||
#bibi-menu & {
|
||||
@include Icon-Colouring(
|
||||
$Menu-Icon-Font_PaintColor,
|
||||
$Menu-Icon-Font_OutlineColor,
|
||||
$Menu-Icon-Shape_PaintColor,
|
||||
$Menu-Icon-Shape_OutlineColor,
|
||||
$Menu-Icon_BackgroundColor,
|
||||
$Menu-Icon_BorderColor
|
||||
);
|
||||
&, &:before, &:after, * { transition: $Menu-Icon_Transition; }
|
||||
&:before, &:after { transform: $Menu-Icon_Transform; }
|
||||
}
|
||||
#bibi-slider & {
|
||||
@include Icon-Colouring(
|
||||
$Slider-Icon-Font_PaintColor,
|
||||
$Slider-Icon-Font_OutlineColor,
|
||||
$Slider-Icon-Shape_PaintColor,
|
||||
$Slider-Icon-Shape_OutlineColor,
|
||||
$Slider-Icon_BackgroundColor,
|
||||
$Slider-Icon_BorderColor
|
||||
);
|
||||
&, &:before, &:after, * { transition: $Slider-Icon_Transition; }
|
||||
&:before, &:after { transform: $Slider-Icon_Transform; }
|
||||
}
|
||||
.bibi-subpanel & {
|
||||
@include Icon-Colouring(
|
||||
$Subpanel-Icon-Font_PaintColor,
|
||||
$Subpanel-Icon-Font_OutlineColor,
|
||||
$Subpanel-Icon-Shape_PaintColor,
|
||||
$Subpanel-Icon-Shape_OutlineColor,
|
||||
$Subpanel-Icon_BackgroundColor,
|
||||
$Subpanel-Icon_BorderColor
|
||||
);
|
||||
&, &:before, &:after, * { transition: $Subpanel-Icon_Transition; }
|
||||
&:before, &:after { transform: $Subpanel-Icon_Transform; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// - Colors & Interaction: Default + Hover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-button.default { &.hover/*, &:hover*/ { .bibi-icon {
|
||||
#bibi-menu & {
|
||||
@include Icon-Colouring(
|
||||
$Menu-Icon-Font_PaintColor__Hover,
|
||||
$Menu-Icon-Font_OutlineColor__Hover,
|
||||
$Menu-Icon-Shape_PaintColor__Hover,
|
||||
$Menu-Icon-Shape_OutlineColor__Hover,
|
||||
$Menu-Icon_BackgroundColor__Hover,
|
||||
$Menu-Icon_BorderColor__Hover
|
||||
);
|
||||
&:before, &:after { transform: $Menu-Icon_Transform__Hover; }
|
||||
}
|
||||
#bibi-slider & {
|
||||
@include Icon-Colouring(
|
||||
$Slider-Icon-Font_PaintColor__Hover,
|
||||
$Slider-Icon-Font_OutlineColor__Hover,
|
||||
$Slider-Icon-Shape_PaintColor__Hover,
|
||||
$Slider-Icon-Shape_OutlineColor__Hover,
|
||||
$Slider-Icon_BackgroundColor__Hover,
|
||||
$Slider-Icon_BorderColor__Hover
|
||||
);
|
||||
&:before, &:after { transform: $Slider-Icon_Transform__Hover; }
|
||||
}
|
||||
.bibi-subpanel & {
|
||||
@include Icon-Colouring(
|
||||
$Subpanel-Icon-Font_PaintColor__Hover,
|
||||
$Subpanel-Icon-Font_OutlineColor__Hover,
|
||||
$Subpanel-Icon-Shape_PaintColor__Hover,
|
||||
$Subpanel-Icon-Shape_OutlineColor__Hover,
|
||||
$Subpanel-Icon_BackgroundColor__Hover,
|
||||
$Subpanel-Icon_BorderColor__Hover
|
||||
);
|
||||
&:before, &:after { transform: $Subpanel-Icon_Transform__Hover; }
|
||||
}
|
||||
}}}
|
||||
|
||||
|
||||
// - Colors & Interaction: Active
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-button.active { .bibi-icon {
|
||||
#bibi-menu & {
|
||||
@include Icon-Colouring(
|
||||
$Menu-Icon-Font_PaintColor__Active,
|
||||
$Menu-Icon-Font_OutlineColor__Active,
|
||||
$Menu-Icon-Shape_PaintColor__Active,
|
||||
$Menu-Icon-Shape_OutlineColor__Active,
|
||||
$Menu-Icon_BackgroundColor__Active,
|
||||
$Menu-Icon_BorderColor__Active
|
||||
);
|
||||
&:before, &:after { transform: $Menu-Icon_Transform__Active; }
|
||||
}
|
||||
#bibi-slider & {
|
||||
@include Icon-Colouring(
|
||||
$Slider-Icon-Font_PaintColor__Active,
|
||||
$Slider-Icon-Font_OutlineColor__Active,
|
||||
$Slider-Icon-Shape_PaintColor__Active,
|
||||
$Slider-Icon-Shape_OutlineColor__Active,
|
||||
$Slider-Icon_BackgroundColor__Active,
|
||||
$Slider-Icon_BorderColor__Active
|
||||
);
|
||||
&:before, &:after { transform: $Slider-Icon_Transform__Active; }
|
||||
}
|
||||
.bibi-subpanel & {
|
||||
@include Icon-Colouring(
|
||||
$Subpanel-Icon-Font_PaintColor__Active,
|
||||
$Subpanel-Icon-Font_OutlineColor__Active,
|
||||
$Subpanel-Icon-Shape_PaintColor__Active,
|
||||
$Subpanel-Icon-Shape_OutlineColor__Active,
|
||||
$Subpanel-Icon_BackgroundColor__Active,
|
||||
$Subpanel-Icon_BorderColor__Active
|
||||
);
|
||||
&:before, &:after { transform: $Subpanel-Icon_Transform__Active; }
|
||||
}
|
||||
}}
|
||||
|
||||
|
||||
// - Colors & Interaction: Active + Hover
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-button-normal, .bibi-button-toggle { &.active { &.hover/*, &:hover*/ { .bibi-icon {
|
||||
#bibi-menu & {
|
||||
@include Icon-Colouring(
|
||||
$Menu-Icon-Font_PaintColor__Active-Hover,
|
||||
$Menu-Icon-Font_OutlineColor__Active-Hover,
|
||||
$Menu-Icon-Shape_PaintColor__Active-Hover,
|
||||
$Menu-Icon-Shape_OutlineColor__Active-Hover,
|
||||
$Menu-Icon_BackgroundColor__Active-Hover,
|
||||
$Menu-Icon_BorderColor__Active-Hover
|
||||
);
|
||||
&:before, &:after { transform: $Menu-Icon_Transform__Active-Hover; }
|
||||
}
|
||||
#bibi-slider & {
|
||||
@include Icon-Colouring(
|
||||
$Slider-Icon-Font_PaintColor__Active-Hover,
|
||||
$Slider-Icon-Font_OutlineColor__Active-Hover,
|
||||
$Slider-Icon-Shape_PaintColor__Active-Hover,
|
||||
$Slider-Icon-Shape_OutlineColor__Active-Hover,
|
||||
$Slider-Icon_BackgroundColor__Active-Hover,
|
||||
$Slider-Icon_BorderColor__Active-Hover
|
||||
);
|
||||
&:before, &:after { transform: $Slider-Icon_Transform__Active-Hover; }
|
||||
}
|
||||
.bibi-subpanel & {
|
||||
@include Icon-Colouring(
|
||||
$Subpanel-Icon-Font_PaintColor__Active-Hover,
|
||||
$Subpanel-Icon-Font_OutlineColor__Active-Hover,
|
||||
$Subpanel-Icon-Shape_PaintColor__Active-Hover,
|
||||
$Subpanel-Icon-Shape_OutlineColor__Active-Hover,
|
||||
$Subpanel-Icon_BackgroundColor__Active-Hover,
|
||||
$Subpanel-Icon_BorderColor__Active-Hover
|
||||
);
|
||||
&:before, &:after { transform: $Subpanel-Icon_Transform__Active-Hover; }
|
||||
}
|
||||
}}}}
|
||||
|
||||
|
||||
// - Colors & Interaction: Disabled
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-button.disabled .bibi-icon {
|
||||
#bibi-menu & { &:before, &:after { opacity: $Menu-Icon_Opacity__Disabled !important; } }
|
||||
#bibi-slider & { &:before, &:after { opacity: $Slider-Icon_Opacity__Disabled !important; } }
|
||||
.bibi-subpanel & { &:before, &:after { opacity: $Subpanel-Icon_Opacity__Disabled !important; } }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + General Icons
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - General Icons' Common Style
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
// -- In Menu
|
||||
.bibi-icon-config,
|
||||
.bibi-icon-change-fontsize,
|
||||
.bibi-icon-loupe,
|
||||
.bibi-icon-manage-bookmarks,
|
||||
// -- In Slider
|
||||
.bibi-icon-history,
|
||||
// -- In Subpanel
|
||||
.bibi-icon-full-breadth-layout,
|
||||
.bibi-icon-toggle-fullscreen,
|
||||
.bibi-icon-open-newwindow,
|
||||
.bibi-icon-fontsize,
|
||||
.bibi-icon-bookmark { @include GENERALICON__Common(); }
|
||||
|
||||
|
||||
// - General Icons in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon-config,
|
||||
.bibi-icon-change-fontsize,
|
||||
.bibi-icon-loupe,
|
||||
.bibi-icon-manage-bookmarks { @include GENERALICON__CommonInMenu(); }
|
||||
|
||||
.bibi-icon-config { @include GENERALICON__Config(); }
|
||||
|
||||
.bibi-icon-change-fontsize { @include GENERALICON__ChangeFontSize(); }
|
||||
|
||||
.bibi-icon-loupe { @include GENERALICON__LoupeCommon();
|
||||
&-zoomin { @include GENERALICON__LoupeZoomIn(); }
|
||||
&-zoomout { @include GENERALICON__LoupeZoomOut(); }
|
||||
&-reset { @include GENERALICON__LoupeReset(); }
|
||||
}
|
||||
|
||||
.bibi-icon-manage-bookmarks { @include GENERALICON__ManageBookmarks(); }
|
||||
|
||||
|
||||
// - General Icons in Slider
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon-history { @include GENERALICON__CommonInSlider(); }
|
||||
|
||||
.bibi-icon-history { @include GENERALICON__History(); }
|
||||
|
||||
|
||||
// - General Icons in Subpanels
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon-full-breadth-layout,
|
||||
.bibi-icon-toggle-fullscreen,
|
||||
.bibi-icon-open-newwindow,
|
||||
.bibi-icon-fontsize,
|
||||
.bibi-icon-bookmark { @include GENERALICON__CommonInSubpanels(); }
|
||||
|
||||
.bibi-icon-full-breadth-layout { @include GENERALICON__UseFullBreadth(); }
|
||||
|
||||
.bibi-icon-toggle-fullscreen { @include GENERALICON__ToggleFullscreen(); }
|
||||
|
||||
.bibi-icon-open-newwindow { @include GENERALICON__OpenNewWindow(); }
|
||||
|
||||
.bibi-icon-fontsize { @include GENERALICON__FontSizeCommon();
|
||||
&-exlarge { @include GENERALICON__FontSizeXL(); }
|
||||
&-large { @include GENERALICON__FontSizeL(); }
|
||||
&-medium { @include GENERALICON__FontSizeM(); }
|
||||
&-small { @include GENERALICON__FontSizeS(); }
|
||||
&-exsmall { @include GENERALICON__FontSizeXS(); }
|
||||
}
|
||||
|
||||
.bibi-icon-bookmark { @include GENERALICON__BookmarkCommon(); }
|
||||
.bibi-icon-add-a-bookmark { @include GENERALICON__AddABookmark(); }
|
||||
.bibi-icon-a-bookmark { @include GENERALICON__ABookmark(); }
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================================================================
|
||||
// + Special Icons
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// - "Toggle Panel" Icon in Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon-toggle-panel {
|
||||
@include SPECIALICON__TogglePanel();
|
||||
.bibi-button.active & { @include SPECIALICON__TogglePanel__Active(); }
|
||||
}
|
||||
|
||||
|
||||
// - "View Xxxx" Icons in Subpanels
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
.bibi-icon-view { @include SPECIALICON__View_Common();
|
||||
&-paged { @include SPECIALICON__ViewPaged(); }
|
||||
&-horizontal { @include SPECIALICON__ViewHorizontal(); }
|
||||
&-vertical { @include SPECIALICON__ViewVertical(); }
|
||||
}
|
||||
|
||||
38
bibi/wardrobe/_dress-patterns/_main.scss
Normal file
38
bibi/wardrobe/_dress-patterns/_main.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// ================================================================================
|
||||
// + Main
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
main#bibi-main {
|
||||
html.appearance-horizontal:not(.book-full-height) & {
|
||||
top: $Menu_Height;
|
||||
height: calc(100% - #{$Menu_Height});
|
||||
}
|
||||
html.appearance-vertical:not(.book-full-height) & {
|
||||
padding-top: $Menu_Height;
|
||||
height: calc(100% - #{$Menu_Height});
|
||||
}
|
||||
html.subpanel-opened & {
|
||||
@include Main__SubpanelOpened();
|
||||
}
|
||||
}
|
||||
div#bibi-main-book {
|
||||
html.subpanel-opened & {
|
||||
@include Main-Book__SubpanelOpened();
|
||||
}
|
||||
}
|
||||
div.spread-box {
|
||||
}
|
||||
div.spread {
|
||||
}
|
||||
div.item-box {
|
||||
html.book-pre-paginated & {
|
||||
&:not(.placeholder):not(.loaded):after {
|
||||
@include ItemBox-Loading();
|
||||
}
|
||||
}
|
||||
}
|
||||
iframe.item {
|
||||
}
|
||||
span.page {
|
||||
}
|
||||
67
bibi/wardrobe/_dress-patterns/_menu.scss
Normal file
67
bibi/wardrobe/_dress-patterns/_menu.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// ================================================================================
|
||||
// + Menu
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-menu {
|
||||
height: $Menu_Height;
|
||||
.bibi-icon { @include size($Menu-Icon_Size); }
|
||||
html.appearance-vertical.slider-opened & { width: calc(100% - #{$Slider_Size}); }
|
||||
html.appearance-vertical.slider-opened.panel-opened &,
|
||||
html.appearance-vertical.slider-opened.subpanel-opened & { padding-right: $Slider_Size; }
|
||||
}
|
||||
html.book-full-height {
|
||||
& div#bibi-menu { background-color: $Menu_BackgroundColor; }
|
||||
& div#bibi-menu.hover,
|
||||
&.panel-opened div#bibi-menu,
|
||||
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Hover; }
|
||||
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__Active; box-shadow: $Menu_BoxShadow__Active; }
|
||||
}
|
||||
html:not(.book-full-height) {
|
||||
& div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH; }
|
||||
& div#bibi-menu.hover,
|
||||
&.panel-opened div#bibi-menu,
|
||||
&.subpanel-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Hover; }
|
||||
&.menu-opened div#bibi-menu { background-color: $Menu_BackgroundColor__NotBFH__Active; box-shadow: $Menu_BoxShadow__NotBFH__Active; }
|
||||
}
|
||||
|
||||
|
||||
// - Menu-L & Menu-R
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-menu-l,
|
||||
div#bibi-menu-r {
|
||||
ul {
|
||||
padding: $Menu-ButtonGroup_Padding;
|
||||
height: $Menu-Icon_Size;
|
||||
&:before {
|
||||
width: $Menu-ButtonGroup-Separator_Width;
|
||||
background: $Menu-ButtonGroup-Separator_Color;
|
||||
top: $Menu-ButtonGroup_Padding;
|
||||
height: $Menu-Icon_Size;
|
||||
}
|
||||
li {
|
||||
@include size($Menu-Icon_Size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-menu-l {
|
||||
ul {
|
||||
&:first-child { padding-left: $Menu-ButtonGroup_Padding; }
|
||||
&:not(:first-child) { padding-left: $Menu-ButtonGroup_Padding$Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; }
|
||||
li {
|
||||
&:not(:first-child) { margin-left: $Menu-ButtonGroup-Button_Margin; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#bibi-menu-r {
|
||||
ul {
|
||||
&:first-child { padding-right: $Menu-ButtonGroup_Padding; }
|
||||
&:not(:first-child) { padding-right: $Menu-ButtonGroup_Padding + $Menu-ButtonGroup-Separator_Width; }
|
||||
li {
|
||||
&:not(:first-child) { margin-right: $Menu-ButtonGroup-Button_Margin; }
|
||||
}
|
||||
}
|
||||
}
|
||||
34
bibi/wardrobe/_dress-patterns/_nombre.scss
Normal file
34
bibi/wardrobe/_dress-patterns/_nombre.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// ================================================================================
|
||||
// + Nombre
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
div#bibi-nombre {
|
||||
& {
|
||||
border-radius: $Nombre_Height * 0.5;
|
||||
@include size($Nombre_Width, $Nombre_Height);
|
||||
line-height: $Nombre_Height;
|
||||
background: $Nombre_BackgroundColor;
|
||||
}
|
||||
html.slider-opened & { background: $Nombre_BackgroundColor__SliderOpened; }
|
||||
html.view-vertical & { transform: rotate(90deg) translateY(($Nombre_Width - $Nombre_Height) * -0.5); }
|
||||
html.slider-opened.appearance-horizontal & { bottom: $Slider_PaddingEnd__SliderOpened !important; }
|
||||
html.slider-opened.appearance-vertical & { right: $Slider_PaddingEnd__SliderOpened !important; }
|
||||
span {
|
||||
&.bibi-nombre-current {
|
||||
color: $Nombre-Current_Color;
|
||||
html.slider-opened & { color: $Nombre-Current_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-delimiter {
|
||||
color: $Nombre-Delimiter_Color;
|
||||
html.slider-opened & { color: $Nombre-Delimiter_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-total {
|
||||
color: $Nombre-Total_Color;
|
||||
html.slider-opened & { color: $Nombre-Total_Color__SliderOpened; }
|
||||
}
|
||||
&.bibi-nombre-percent {
|
||||
color: $Nombre-Percent_Color;
|
||||
html.slider-opened & { color: $Nombre-Percent_Color__SliderOpened; }
|
||||
}
|
||||
}
|
||||
}
|
||||
18
bibi/wardrobe/_dress-patterns/_notifier.scss
Normal file
18
bibi/wardrobe/_dress-patterns/_notifier.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// ================================================================================
|
||||
// + Notifier
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
|
||||
div#bibi-notifier {
|
||||
height: $Notifier_Height;
|
||||
color: $Notifier_Color;
|
||||
background: $Notifier_Background;
|
||||
box-shadow: $Notifier_BoxShadow;
|
||||
p {
|
||||
font-family: $Notifier_FontFamily;
|
||||
&.error {
|
||||
font-family: $Notifier_FontFamily__Error;
|
||||
color: $Notifier_Color__Error;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue