diff --git a/public/assets/css/editor-ui.css b/public/assets/css/src/editor-ui.scss similarity index 100% rename from public/assets/css/editor-ui.css rename to public/assets/css/src/editor-ui.scss diff --git a/public/assets/css/pagedjs-interface.css b/public/assets/css/src/pagedjs-interface.scss similarity index 100% rename from public/assets/css/pagedjs-interface.css rename to public/assets/css/src/pagedjs-interface.scss diff --git a/public/assets/css/print-styles.css b/public/assets/css/src/print-styles.scss similarity index 100% rename from public/assets/css/print-styles.css rename to public/assets/css/src/print-styles.scss diff --git a/public/assets/css/stylesheet.css b/public/assets/css/src/stylesheet.scss similarity index 100% rename from public/assets/css/stylesheet.css rename to public/assets/css/src/stylesheet.scss diff --git a/public/assets/css/style.css b/public/assets/css/style.css new file mode 100644 index 0000000..e647445 --- /dev/null +++ b/public/assets/css/style.css @@ -0,0 +1,195 @@ +@charset "UTF-8"; +/* CSS for Paged.js interface – v0.4 */ +/* Change the look */ +:root { + --color-background: whitesmoke; + --color-pageSheet: #cfcfcf; + --color-pageBox: violet; + --color-paper: white; + --color-marginBox: transparent; + --pagedjs-crop-color: black; + --pagedjs-crop-shadow: white; + --pagedjs-crop-stroke: 1px; +} + +/* To define how the book look on the screen: */ +@media screen, pagedjs-ignore { + body { + background-color: var(--color-background); + } + .pagedjs_pages { + display: flex; + width: calc(var(--pagedjs-width) * 2); + flex: 0; + flex-wrap: wrap; + margin: 0 auto; + } + .pagedjs_page { + background-color: var(--color-paper); + box-shadow: 0 0 0 1px var(--color-pageSheet); + margin: 0; + flex-shrink: 0; + flex-grow: 0; + margin-top: 10mm; + } + .pagedjs_first_page { + margin-left: var(--pagedjs-width); + } + .pagedjs_page:last-of-type { + margin-bottom: 10mm; + } + .pagedjs_pagebox { + box-shadow: 0 0 0 1px var(--color-pageBox); + } + .pagedjs_left_page { + z-index: 20; + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important; + } + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { + border-color: transparent; + } + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle { + width: 0; + } + .pagedjs_right_page { + z-index: 10; + position: relative; + left: calc(var(--pagedjs-bleed-left) * -1); + } + /* show the margin-box */ + .pagedjs_margin-top-left-corner-holder, + .pagedjs_margin-top, + .pagedjs_margin-top-left, + .pagedjs_margin-top-center, + .pagedjs_margin-top-right, + .pagedjs_margin-top-right-corner-holder, + .pagedjs_margin-bottom-left-corner-holder, + .pagedjs_margin-bottom, + .pagedjs_margin-bottom-left, + .pagedjs_margin-bottom-center, + .pagedjs_margin-bottom-right, + .pagedjs_margin-bottom-right-corner-holder, + .pagedjs_margin-right, + .pagedjs_margin-right-top, + .pagedjs_margin-right-middle, + .pagedjs_margin-right-bottom, + .pagedjs_margin-left, + .pagedjs_margin-left-top, + .pagedjs_margin-left-middle, + .pagedjs_margin-left-bottom { + box-shadow: 0 0 0 1px inset var(--color-marginBox); + } + /* uncomment this part for recto/verso book : ------------------------------------ */ + /* + .pagedjs_pages { + flex-direction: column; + width: 100%; + } + + .pagedjs_first_page { + margin-left: 0; + } + + .pagedjs_page { + margin: 0 auto; + margin-top: 10mm; + } + + .pagedjs_left_page{ + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ + border-color: var(--pagedjs-crop-color); + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: var(--pagedjs-cross-size)!important; + } + + .pagedjs_right_page{ + left: 0; + } + */ + /*--------------------------------------------------------------------------------------*/ + /* uncomment this par to see the baseline : -------------------------------------------*/ + /* .pagedjs_pagebox { + --pagedjs-baseline: 22px; + --pagedjs-baseline-position: 5px; + --pagedjs-baseline-color: cyan; + background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; + background-size: 100% var(--pagedjs-baseline); + background-repeat: repeat-y; + background-position-y: var(--pagedjs-baseline-position); + } */ + /*--------------------------------------------------------------------------------------*/ +} +/* Marks (to delete when merge in paged.js) */ +.pagedjs_marks-crop { + z-index: 999999999999; +} + +.pagedjs_bleed-top .pagedjs_marks-crop, +.pagedjs_bleed-bottom .pagedjs_marks-crop { + box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-top .pagedjs_marks-crop:last-child, +.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child { + box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop, +.pagedjs_bleed-right .pagedjs_marks-crop { + box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop:last-child, +.pagedjs_bleed-right .pagedjs_marks-crop:last-child { + box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); +} + +/* PagedJS print styles */ +@page { + size: A4; + margin: 20mm 15mm 26mm 15mm; +} +h2 { + -moz-column-break-before: page; + break-before: page; +} + +@page { + @bottom-center { + content: string(title); + } +} +.chapter > h2 { + string-set: title content(text); +} + +@page { + size: A4; + margin: 20mm 15mm 26mm 15mm; +} +@page { + @bottom-center { + content: string(title); + } +} +h2 { + -moz-column-break-before: page; + break-before: page; +} + +.chapter > h2 { + string-set: title content(text); +} + +#chapter-2 { + font-size: 2rem; +} + +p { + font-size: 1rem; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map new file mode 100644 index 0000000..76d684b --- /dev/null +++ b/public/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css","src/pagedjs-interface.scss","src/print-styles.scss","src/stylesheet.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,sCAAA;AAEA,oBAAA;AACA;EACE,8BAAA;EACA,0BAAA;EACA,uBAAA;EACA,oBAAA;EACA,8BAAA;EACA,2BAAA;EACA,4BAAA;EACA,0BAAA;ADCF;;ACEA,+CAAA;AACA;EACE;IACE,yCAAA;EDCF;ECEA;IACE,aAAA;IACA,qCAAA;IACA,OAAA;IACA,eAAA;IACA,cAAA;EDAF;ECGA;IACE,oCAAA;IACA,4CAAA;IACA,SAAA;IACA,cAAA;IACA,YAAA;IACA,gBAAA;EDDF;ECIA;IACE,iCAAA;EDFF;ECKA;IACE,mBAAA;EDHF;ECMA;IACE,0CAAA;EDJF;ECOA;IACE,WAAA;IACA,gFAAA;EDLF;ECUA;IACE,yBAAA;EDRF;ECWA;IACE,QAAA;EDTF;ECYA;IACE,WAAA;IACA,kBAAA;IACA,0CAAA;EDVF;ECaA,wBAAA;EAEA;;;;;;;;;;;;;;;;;;;;IAoBE,kDAAA;EDZF;ECeA,oFAAA;EAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA;EAgCA,yFAAA;EAEA,wFAAA;EAEA;;;;;;;;MAAA;EAUA,yFAAA;ADlBF;ACqBA,6CAAA;AAEA;EACE,qBAAA;ADpBF;;ACuBA;;EAEE,sDAAA;ADpBF;;ACuBA;;EAEE,uDAAA;ADpBF;;ACuBA;;EAEE,sDAAA;ADpBF;;ACuBA;;EAEE,uDAAA;ADpBF;;AErJA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AFwJF;AEtJA;EACE,8BAAA;OAAA,kBAAA;AFwJF;;AErJA;EACE;IACE,sBAAA;EFwJF;AACF;AEtJA;EACE,+BAAA;AFwJF;;AGvKA;EACE,QAAA;EACA,2BAAA;AH0KF;AGvKA;EACE;IAAiB,sBAAA;EH0KjB;AACF;AGxKA;EACE,8BAAA;OAAA,kBAAA;AH0KF;;AGvKA;EACE,+BAAA;AH0KF;;AGvKA;EACE,eAAA;AH0KF;;AGvKA;EACE,eAAA;AH0KF","file":"style.css"} \ No newline at end of file diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss new file mode 100644 index 0000000..113c864 --- /dev/null +++ b/public/assets/css/style.scss @@ -0,0 +1,4 @@ +@import "src/editor-ui.scss"; +@import "src/pagedjs-interface.scss"; +@import "src/print-styles.scss"; +@import "src/stylesheet.scss"; diff --git a/src/style.css b/src/style.css index e25f678..699de50 100644 --- a/src/style.css +++ b/src/style.css @@ -1,2 +1 @@ -@import url('/assets/css/pagedjs-interface.css'); -@import url('/assets/css/editor-ui.css'); +@import url('/assets/css/style.css');