diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css index 33b752c..113067d 100644 --- a/maquette-tests/assets/css/01_var.css +++ b/maquette-tests/assets/css/01_var.css @@ -69,7 +69,7 @@ --sign-size: 16px; --sign-baseline: 18px; --sign-spacing: 0.45rem; - --sign-spacing: 7.2px; + --sign-spacing: 7.5px; --sign-color: var(--red); /* --sign-color: black; */ diff --git a/maquette-tests/assets/css/running-page.css b/maquette-tests/assets/css/running-page.css index 5f1c20f..ba821f9 100644 --- a/maquette-tests/assets/css/running-page.css +++ b/maquette-tests/assets/css/running-page.css @@ -1,4 +1,5 @@ .running-page_container{ + --w-container: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left)*2); font-size: var(--sign-size); color: var(--sign-color); letter-spacing: var(--sign-spacing); @@ -7,4 +8,37 @@ padding-top: var(--running-top); width: 100%; - } \ No newline at end of file + + position: absolute; + left: calc(var(--pagedjs-margin-top)*-1 + 0px); + left: calc(var(--pagedjs-margin-left)*-1); + width: var( --w-container); + overflow: hidden; + /* background-color: red; */ + +} + + +.running-page{ + width: calc(var(--w-container)*2); + padding-left: 7px; + padding-right: 6px; + display: flex; + /* background-color: yellow; */ +} + +.running-page .symbols{ + flex-shrink: 0; + +} +.running-page .dots{ + position: relative; + top: -5px; + left: -10px; +} + +.pagedjs_right_page .running-page_container .running-page{ + position: relative; + /* left: calc(var( --w-container)*-1 + var(--pagedjs-margin-left)*-1 + 2px); */ + left: calc(var( --w-container)*-1 + 10px); +} \ No newline at end of file diff --git a/maquette-tests/js/decor-num-pages.js b/maquette-tests/js/decor-num-pages.js index cb7c842..97e61cc 100644 --- a/maquette-tests/js/decor-num-pages.js +++ b/maquette-tests/js/decor-num-pages.js @@ -26,17 +26,15 @@ export default class itemsDecor extends Handler { symbols.style.width = `${progress}%`; symbols.style.wordBreak = "break-all"; - const pageNum = document.createElement("div"); - pageNum.className = "page-number"; - pageNum.textContent = numPage; - const dots = document.createElement("div"); dots.className = "dots"; dots.textContent = ".".repeat(100); - container.appendChild(symbols); - container.appendChild(pageNum); - container.appendChild(dots); + const runningPage = document.createElement("div"); + runningPage.className = "running-page"; + runningPage.appendChild(symbols); + runningPage.appendChild(dots); + container.appendChild(runningPage); area.appendChild(container); symbols.textContent = this.symbol;