pagedjs.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /* CSS for Paged.js interface – v0.4 */
  2. /* Change the look */
  3. :root {
  4. --color-background: whitesmoke;
  5. --color-pageSheet: #cfcfcf;
  6. --color-pageBox: violet;
  7. --color-paper: white;
  8. --color-marginBox: transparent;
  9. --pagedjs-crop-color: black;
  10. --pagedjs-crop-shadow: white;
  11. --pagedjs-crop-stroke: 1px;
  12. }
  13. /* To define how the book look on the screen: */
  14. @media screen, pagedjs-ignore {
  15. body {
  16. background-color: var(--color-background);
  17. }
  18. .pagedjs_pages {
  19. display: flex;
  20. width: calc(var(--pagedjs-width) * 2);
  21. flex: 0;
  22. flex-wrap: wrap;
  23. margin: 0 auto;
  24. }
  25. .pagedjs_page {
  26. background-color: var(--color-paper);
  27. box-shadow: 0 0 0 1px var(--color-pageSheet);
  28. margin: 0;
  29. flex-shrink: 0;
  30. flex-grow: 0;
  31. margin-top: 10mm;
  32. }
  33. .pagedjs_first_page {
  34. margin-left: var(--pagedjs-width);
  35. }
  36. .pagedjs_page:last-of-type {
  37. margin-bottom: 10mm;
  38. }
  39. .pagedjs_pagebox{
  40. box-shadow: 0 0 0 1px var(--color-pageBox);
  41. }
  42. .pagedjs_left_page{
  43. z-index: 20;
  44. width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
  45. }
  46. .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
  47. border-color: transparent;
  48. }
  49. .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
  50. width: 0;
  51. }
  52. .pagedjs_right_page{
  53. z-index: 10;
  54. position: relative;
  55. left: calc(var(--pagedjs-bleed-left)*-1);
  56. }
  57. /* show the margin-box */
  58. .pagedjs_margin-top-left-corner-holder,
  59. .pagedjs_margin-top,
  60. .pagedjs_margin-top-left,
  61. .pagedjs_margin-top-center,
  62. .pagedjs_margin-top-right,
  63. .pagedjs_margin-top-right-corner-holder,
  64. .pagedjs_margin-bottom-left-corner-holder,
  65. .pagedjs_margin-bottom,
  66. .pagedjs_margin-bottom-left,
  67. .pagedjs_margin-bottom-center,
  68. .pagedjs_margin-bottom-right,
  69. .pagedjs_margin-bottom-right-corner-holder,
  70. .pagedjs_margin-right,
  71. .pagedjs_margin-right-top,
  72. .pagedjs_margin-right-middle,
  73. .pagedjs_margin-right-bottom,
  74. .pagedjs_margin-left,
  75. .pagedjs_margin-left-top,
  76. .pagedjs_margin-left-middle,
  77. .pagedjs_margin-left-bottom {
  78. box-shadow: 0 0 0 1px inset var(--color-marginBox);
  79. }
  80. /* uncomment this part for recto/verso book : ------------------------------------ */
  81. /*
  82. .pagedjs_pages {
  83. flex-direction: column;
  84. width: 100%;
  85. }
  86. .pagedjs_first_page {
  87. margin-left: 0;
  88. }
  89. .pagedjs_page {
  90. margin: 0 auto;
  91. margin-top: 10mm;
  92. }
  93. .pagedjs_left_page{
  94. width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
  95. }
  96. .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
  97. border-color: var(--pagedjs-crop-color);
  98. }
  99. .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
  100. width: var(--pagedjs-cross-size)!important;
  101. }
  102. .pagedjs_right_page{
  103. left: 0;
  104. }
  105. */
  106. /*--------------------------------------------------------------------------------------*/
  107. /* uncomment this par to see the baseline : -------------------------------------------*/
  108. /* .pagedjs_pagebox {
  109. --pagedjs-baseline: 22px;
  110. --pagedjs-baseline-position: 5px;
  111. --pagedjs-baseline-color: cyan;
  112. 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;
  113. background-size: 100% var(--pagedjs-baseline);
  114. background-repeat: repeat-y;
  115. background-position-y: var(--pagedjs-baseline-position);
  116. } */
  117. /*--------------------------------------------------------------------------------------*/
  118. }
  119. /* Marks (to delete when merge in paged.js) */
  120. .pagedjs_marks-crop{
  121. z-index: 999999999999;
  122. }
  123. .pagedjs_bleed-top .pagedjs_marks-crop,
  124. .pagedjs_bleed-bottom .pagedjs_marks-crop{
  125. box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
  126. }
  127. .pagedjs_bleed-top .pagedjs_marks-crop:last-child,
  128. .pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
  129. box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
  130. }
  131. .pagedjs_bleed-left .pagedjs_marks-crop,
  132. .pagedjs_bleed-right .pagedjs_marks-crop{
  133. box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
  134. }
  135. .pagedjs_bleed-left .pagedjs_marks-crop:last-child,
  136. .pagedjs_bleed-right .pagedjs_marks-crop:last-child{
  137. box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
  138. }