Commit 834e1715 authored by julientaq's avatar julientaq
Browse files

fix base stylesheet

parent 72796966
......@@ -56,11 +56,11 @@ You can also have a custom configuration for your pagedjs needs`: from custom st
where you can add the following. WARNING: if you want to use this custom make sure to use all the config for now (i’ll improve that asap). To get the default of each of the option, set it as `undefined`.
`content`: is the dom element you want to paginate;
`stylesheet`: a custom stylesheet you want to use;
`button`: the button element you want to use to start the script;
`content`: is the dom element you want to paginate (default is the body);
`stylesheet`: a custom stylesheet you want to use (default will use the the system fonts)
`button`: the button element you want to use to start the script; (default will create a new one);
`features`: the control you want to give to your user. Can be one of more of the following list: , `"pagedSize"`, `"pagedMargins"`, `"fontFamily"`, `"fontSize"`, `"fontLineHeight"`, `"backgroundColor"`, `"textColor`";
`uicolor`: the color for the UI (the left column);
`uicolor`: the color for the left column of the UI;
### styles pagedjs buttons and modal
......
@page {
@media print {
h2 {
string-set: h2title content(text);
}
@page :right {
@bottom-center {
content: string(h2title);
}
@top-center {
content: "lol";
}
}
}
body {
}
\ No newline at end of file
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="css/reset.css">
<script type="module" src="../dist/pagedPreviewer.js"></script>
<!-- <script>
window.pagedMakerConfig = {
......
......@@ -69,10 +69,10 @@ body, html {
}
body {
${pagedMakerConfig.features.includes("fontFamily") ? "font-family: var(--fontBody, sans-serif);" : ""}
${pagedMakerConfig.features.includes("fontSize") ? "font-size: var(--fontSize, 14px);" : ""}
${pagedMakerConfig.features.includes("fontLineHeight") ? "line-height: var(--lineHeight, 1.4);" : ""}
${pagedMakerConfig.features.includes("textColor") ? "color: var(--body-color);" : ""}
${config_default.features.includes("fontFamily") ? "font-family: var(--fontBody, sans-serif);" : ""}
${config_default.features.includes("fontSize") ? "font-size: var(--fontSize, 14px);" : ""}
${config_default.features.includes("fontLineHeight") ? "line-height: var(--lineHeight, 1.4);" : ""}
${config_default.features.includes("textColor") ? "color: var(--body-color);" : ""}
......@@ -80,7 +80,7 @@ body {
}
@page {
${pagedMakerConfig.features.includes("backgroundColor") ? "background: var(--background-color);" : ""}
${config_default.features.includes("backgroundColor") ? "background: var(--background-color);" : ""}
@bottom-right{
content: counter(page) "/" counter(pages);
}
......
import config from './config.js';
// style for the export that include css variable for the UI;
export default `
......@@ -15,19 +17,19 @@ body, html {
}
body {
${pagedMakerConfig.features.includes("fontFamily")
${config.features.includes("fontFamily")
? "font-family: var(--fontBody, sans-serif);"
: ""
}
${pagedMakerConfig.features.includes("fontSize")
${config.features.includes("fontSize")
? "font-size: var(--fontSize, 14px);"
: ""
}
${pagedMakerConfig.features.includes("fontLineHeight")
${config.features.includes("fontLineHeight")
? "line-height: var(--lineHeight, 1.4);"
: ""
}
${pagedMakerConfig.features.includes("textColor")
${config.features.includes("textColor")
? "color: var(--body-color);"
: ""
}
......@@ -38,7 +40,7 @@ body {
}
@page {
${pagedMakerConfig.features.includes("backgroundColor")
${config.features.includes("backgroundColor")
? "background: var(--background-color);"
: ""
}
......
import pagedMakerConfig from './config.js';
import config from './config.js';
import logo from "./pagedjsLogo.js";
// dom to modify the output
export default `
${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''}
${(config.button == undefined) ? '<button class="pagedPreviewer-button-modal">Start pagedjs</button>' : ''}
<div class="pagedPreviewer-modal pagedPreviewer-hidden">
......@@ -14,7 +14,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
<figcaption>paged.js <span>previewer</span></figcaption>
</figure>
<div class="pagedPreviewer-item pagesize ${
pagedMakerConfig.features.includes("pagedSize")
config.features.includes("pagedSize")
? ""
: "pagedMaker-hyde"
}">
......@@ -29,7 +29,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
</div>
<div class="pagedPreviewer-item margins ${
pagedMakerConfig.features.includes("pagedMargins")
config.features.includes("pagedMargins")
? ""
: "pagedMaker-hyde"
}">
......@@ -45,7 +45,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
<div class="pagedPreviewer-item ${
pagedMakerConfig.features.includes("fontFamily")
config.features.includes("fontFamily")
? ""
: "pagedMaker-hyde"
}">
......@@ -57,7 +57,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
</select>
</div>
<div class="pagedPreviewer-item ${
pagedMakerConfig.features.includes("fontSize")
config.features.includes("fontSize")
? ""
: "pagedMaker-hyde"
}">
......@@ -67,7 +67,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
</div>
<div class="pagedPreviewer-item ${
pagedMakerConfig.features.includes("fontLineHeight")
config.features.includes("fontLineHeight")
? ""
: "pagedMaker-hyde"
}">
......@@ -75,7 +75,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
<input class="cssVarUpdate" id="lineHeight" step="0.1" name="lineHeight" data-css-prop="--lineHeight" type="range" min=".8" max="2" >
</div>
<div class="pagedPreviewer-item ${
pagedMakerConfig.features.includes("backgroundColor")
config.features.includes("backgroundColor")
? ""
: "pagedMaker-hyde"
}">
......@@ -84,7 +84,7 @@ ${(pagedMakerConfig.button == undefined) ? '<button class="pagedPreviewer-button
value="#ffffff">
</div>
<div class="pagedPreviewer-item ${
pagedMakerConfig.features.includes("textColor")
config.features.includes("textColor")
? ""
: "pagedMaker-hyde"
}">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment