From a627a14fa15128919d9be2c6307fc509b374be39 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 24 Nov 2025 17:30:36 +0100 Subject: [PATCH] improve styles --- public/assets/css/pagedjs-interface.css | 171 ++++++++++++++++++++++++ public/assets/css/stylesheet.css | 7 + public/assets/src/_editor-ui.scss | 16 --- public/assets/style.css | 16 --- public/assets/style.css.map | 1 - public/assets/style.scss | 1 - public/site/snippets/header.php | 3 +- 7 files changed, 180 insertions(+), 35 deletions(-) create mode 100644 public/assets/css/pagedjs-interface.css create mode 100644 public/assets/css/stylesheet.css delete mode 100644 public/assets/src/_editor-ui.scss delete mode 100644 public/assets/style.css delete mode 100644 public/assets/style.css.map delete mode 100644 public/assets/style.scss diff --git a/public/assets/css/pagedjs-interface.css b/public/assets/css/pagedjs-interface.css new file mode 100644 index 0000000..bcef24a --- /dev/null +++ b/public/assets/css/pagedjs-interface.css @@ -0,0 +1,171 @@ +/* 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); +} diff --git a/public/assets/css/stylesheet.css b/public/assets/css/stylesheet.css new file mode 100644 index 0000000..98badef --- /dev/null +++ b/public/assets/css/stylesheet.css @@ -0,0 +1,7 @@ +.about { + font-size: 1rem; +} + +#chapter-2 { + font-size: 2rem; +} diff --git a/public/assets/src/_editor-ui.scss b/public/assets/src/_editor-ui.scss deleted file mode 100644 index a5928c4..0000000 --- a/public/assets/src/_editor-ui.scss +++ /dev/null @@ -1,16 +0,0 @@ -#editor-ui { - position: fixed !important; - bottom: 1rem !important; - left: 1rem !important; - z-index: 9999 !important; - background: white; - padding: 0.5rem; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -#increase-margin { - padding: 0.5rem 1rem; - font-size: 1.5rem; - cursor: pointer; -} diff --git a/public/assets/style.css b/public/assets/style.css deleted file mode 100644 index 1fee007..0000000 --- a/public/assets/style.css +++ /dev/null @@ -1,16 +0,0 @@ -#editor-ui { - position: fixed !important; - bottom: 1rem !important; - left: 1rem !important; - z-index: 9999 !important; - background: white; - padding: 0.5rem; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -#increase-margin { - padding: 0.5rem 1rem; - font-size: 1.5rem; - cursor: pointer; -}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/public/assets/style.css.map b/public/assets/style.css.map deleted file mode 100644 index ad0483b..0000000 --- a/public/assets/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/_editor-ui.scss","style.css"],"names":[],"mappings":"AAAA;EACE,0BAAA;EACA,uBAAA;EACA,qBAAA;EACA,wBAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,wCAAA;ACCF;;ADEA;EACE,oBAAA;EACA,iBAAA;EACA,eAAA;ACCF","file":"style.css"} \ No newline at end of file diff --git a/public/assets/style.scss b/public/assets/style.scss deleted file mode 100644 index 0eca77e..0000000 --- a/public/assets/style.scss +++ /dev/null @@ -1 +0,0 @@ -@import "src/_editor-ui.scss"; diff --git a/public/site/snippets/header.php b/public/site/snippets/header.php index 56d7c84..8326578 100644 --- a/public/site/snippets/header.php +++ b/public/site/snippets/header.php @@ -8,7 +8,8 @@ isHomePage() != true, $page->title() . ' - ') . $site->title() ?> - + +