css running-page

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; */
   

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%;
 
-    }
+
+      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);
+}

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;