125 lines
3 KiB
CSS
125 lines
3 KiB
CSS
|
:root {
|
||
|
|
--grid-bold: #bfbfbf;
|
||
|
|
--grid-light: #efefef;
|
||
|
|
|
||
|
|
--grid-spacing: 56px;
|
||
|
|
--steps: 5;
|
||
|
|
--grid-position-x: 28px;
|
||
|
|
--grid-position-y: 0px;
|
||
|
|
|
||
|
|
--grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media screen{
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
body.grid .pagedjs_sheet {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
|
||
|
|
background-image:
|
||
|
|
/* Traits bold */
|
||
|
|
repeating-linear-gradient(
|
||
|
|
90deg,
|
||
|
|
var(--grid-bold) 0 1px,
|
||
|
|
transparent 1px var(--grid-spacing)
|
||
|
|
),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
0deg,
|
||
|
|
var(--grid-bold) 0 1px,
|
||
|
|
transparent 1px var(--grid-spacing)
|
||
|
|
),
|
||
|
|
|
||
|
|
/* Traits fins (3 traits → 4 carrés) */
|
||
|
|
repeating-linear-gradient(
|
||
|
|
90deg,
|
||
|
|
var(--grid-light) 0 1px,
|
||
|
|
transparent 1px var(--grid-subdivisions)
|
||
|
|
),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
0deg,
|
||
|
|
var(--grid-light) 0 1px,
|
||
|
|
transparent 1px var(--grid-subdivisions)
|
||
|
|
);
|
||
|
|
|
||
|
|
background-position:
|
||
|
|
var(--grid-position-x) var(--grid-position-y),
|
||
|
|
var(--grid-position-x) var(--grid-position-y),
|
||
|
|
var(--grid-position-x) var(--grid-position-y),
|
||
|
|
var(--grid-position-x) var(--grid-position-y);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.grid-page{
|
||
|
|
--nbr-columns: 8;
|
||
|
|
width: var(--pagedjs-pagebox-width);
|
||
|
|
height: var(--pagedjs-pagebox-height);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(var(--nbr-columns), calc(100%/var(--nbr-columns)));
|
||
|
|
|
||
|
|
box-shadow: 1px 0px 0px 0px var(--grid-color);
|
||
|
|
|
||
|
|
--grid-color: magenta;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagedjs_right_page .grid-page{
|
||
|
|
padding-left: var(--pagedjs-margin-left);
|
||
|
|
padding-right: var(--pagedjs-margin-right);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagedjs_left_page .grid-page{
|
||
|
|
padding-left: var(--pagedjs-margin-left);
|
||
|
|
padding-right: var(--pagedjs-margin-right);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.grid-page .grid-column{
|
||
|
|
box-shadow: 1px 0px 0px 0px var(--grid-color);
|
||
|
|
grid-row: 1/end;
|
||
|
|
width: 100%;
|
||
|
|
justify-self: right;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-column-0{
|
||
|
|
grid-column: 1;
|
||
|
|
box-shadow: -1px 0px 0px 0px var(--grid-color)!important;
|
||
|
|
justify-self: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-column-1{ grid-column: 1; }
|
||
|
|
.grid-column-2{ grid-column: 2; }
|
||
|
|
.grid-column-3{ grid-column: 3; }
|
||
|
|
.grid-column-4{ grid-column: 4; }
|
||
|
|
.grid-column-5{ grid-column: 5; }
|
||
|
|
.grid-column-6{ grid-column: 6; }
|
||
|
|
.grid-column-7{ grid-column: 7; }
|
||
|
|
.grid-column-8{ grid-column: 8; }
|
||
|
|
.grid-column-9{ grid-column: 9; }
|
||
|
|
.grid-column-10{ grid-column: 10; }
|
||
|
|
.grid-column-11{ grid-column: 11; }
|
||
|
|
.grid-column-12{ grid-column: 12; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-grid .grid-page{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|