From c4ab39cb80953cbb070aa40183926e7a66ed81f9 Mon Sep 17 00:00:00 2001 From: Felipe Curty Date: Sat, 13 Nov 2021 20:01:40 -0300 Subject: [PATCH] Update default.css with last interface.css --- inst/resources/css/default.css | 330 ++++++++++++++++----------------- 1 file changed, 165 insertions(+), 165 deletions(-) diff --git a/inst/resources/css/default.css b/inst/resources/css/default.css index cbbede0c..95d0016e 100644 --- a/inst/resources/css/default.css +++ b/inst/resources/css/default.css @@ -1,180 +1,180 @@ +/* CSS for Paged.js interface – v0.2 */ + +/* Change the look */ :root { - --background: whitesmoke; - --pagedjs-width: 6in; - --pagedjs-height: 9in; - --color-paper: white; - --color-mbox: rgba(0, 0, 0, 0.2); - --running-title-width: 2.5in; - --screen-pages-spacing: 5mm; + --color-background: whitesmoke; + --color-pageSheet: #cfcfcf; + --color-pageBox: violet; + --color-paper: white; + --color-marginBox: transparent; + --pagedjs-crop-color: black; + --pagedjs-crop-shadow: white; + --pagedjs-crop-stroke: 1px; } -html { - line-height: 1.3; -} +/* To define how the book look on the screen: */ +@media screen { + body { + background-color: var(--color-background); + } -/* generated content */ -a[href^="http"]:not([class="uri"])::after { - content: " (" attr(href) ")"; - font-size: 90%; - hyphens: none; - word-break: break-all; -} -.references a[href^=http]:not([class=uri])::after { - content: none; -} -.main a[href^="#"]:not([class^="footnote-"]):not([href*=":"])::after { - content: " (page " target-counter(attr(href), page) ")"; -} -.main a.front-matter-ref[href^="#"]:not([class^="footnote-"]):not([href*=":"])::after { - content: " (page " target-counter(attr(href), page, lower-roman) ")"; -} -/* do not include page references in code blocks */ -.sourceCode a[href^="#"]:not([class^="footnote-"]):not([href*=":"])::after, -.sourceCode a.front-matter-ref[href^="#"]:not([class^="footnote-"]):not([href*=":"])::after { - content: unset; -} + .pagedjs_pages { + display: flex; + width: calc(var(--pagedjs-width) * 2); + flex: 0; + flex-wrap: wrap; + margin: 0 auto; + } -/* TOC, LOT, LOF */ -.toc ul, .lot ul, .lof ul { - list-style: none; - padding-left: 0; - overflow-x: hidden; -} -.toc li li { - padding-left: 1em; -} -.toc a, .lot a, .lof a { - text-decoration: none; - background: white; - padding-right: .33em; -} -.toc a::after, .lot a::after, .lof a::after { - /* content: leader(dotted) target-counter(attr(href), page); */ - content: target-counter(attr(href), page); - float: right; - background: white; -} -.toc a.front-matter-ref::after, .lot a.front-matter-ref::after, .lof a.front-matter-ref::after { - /* content: leader(dotted) target-counter(attr(href), page, lower-roman); */ - content: target-counter(attr(href), page, lower-roman); -} -.toc .leaders::before, .lot .leaders::before, .lof .leaders::before { - float: left; - width: 0; - white-space: nowrap; - content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; -} + .pagedjs_page { + background-color: var(--color-paper); + box-shadow: 0 0 0 1px var(--color-pageSheet); + margin: 0; + flex-shrink: 0; + flex-grow: 0; + margin-top: 10mm; + } -/* Chapter name */ -.chapter > h1 > .header-section-number::before, .chapter-ref > .toc-section-number::before { - content: var(--chapter-name-before, "Chapter "); -} -.chapter > h1 > .header-section-number::after, .chapter-ref > .toc-section-number::after { - content: var(--chapter-name-after, ""); -} + .pagedjs_first_page { + margin-left: var(--pagedjs-width); + } -/* misc elements */ -.subtitle span { - font-size: .9em; -} -img { - max-width: 100%; -} -pre { - padding: 1em; - white-space: pre-wrap; -} -pre[class] { - background: #f9f9f9; -} -abbr { - text-decoration: none; -} + .pagedjs_page:last-of-type { + margin-bottom: 10mm; + } -@media screen { - div.sourceCode { - overflow: visible !important; - } - a.sourceLine::before { - text-decoration: unset !important; - } -} -pre.numberSource a.sourceLine { - left: 0 !important; - text-indent: -5em -} -pre.numberSource { - margin-left: 0 !important; -} -table { - margin: auto; - border-top: 1px solid #666; - border-bottom: 1px solid #666; -} -table thead th { - border-bottom: 1px solid #ddd; -} -thead, tfoot, tr:nth-child(even) { - background: #eee; -} -/* knitr::kables styling, see https://github.com/rstudio/pagedown/issues/214 */ -.kable_wrapper > tbody > tr > td { - vertical-align: top; -} -.footnotes { - font-size: 90%; -} -.footnotes hr::before { - content: "Footnotes:"; -} -.footnotes hr { - border: none; -} -.footnote-break { - width: 1in; -} -body { - hyphens: auto; -} -code { - hyphens: none; + .pagedjs_pagebox{ + box-shadow: 0 0 0 1px var(--color-pageBox); + } + + .pagedjs_left_page{ + z-index: 20; + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { + border-color: transparent; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: 0; + } + + .pagedjs_right_page{ + z-index: 10; + position: relative; + left: calc(var(--pagedjs-bleed-left)*-1); + } + + /* show the margin-box */ + + .pagedjs_margin-top-left-corner-holder, + .pagedjs_margin-top, + .pagedjs_margin-top-left, + .pagedjs_margin-top-center, + .pagedjs_margin-top-right, + .pagedjs_margin-top-right-corner-holder, + .pagedjs_margin-bottom-left-corner-holder, + .pagedjs_margin-bottom, + .pagedjs_margin-bottom-left, + .pagedjs_margin-bottom-center, + .pagedjs_margin-bottom-right, + .pagedjs_margin-bottom-right-corner-holder, + .pagedjs_margin-right, + .pagedjs_margin-right-top, + .pagedjs_margin-right-middle, + .pagedjs_margin-right-bottom, + .pagedjs_margin-left, + .pagedjs_margin-left-top, + .pagedjs_margin-left-middle, + .pagedjs_margin-left-bottom { + box-shadow: 0 0 0 1px inset var(--color-marginBox); + } + + /* uncomment this part for recto/verso book : ------------------------------------ */ + + /* + .pagedjs_pages { + flex-direction: column; + width: 100%; + } + + .pagedjs_first_page { + margin-left: 0; + } + + .pagedjs_page { + margin: 0 auto; + margin-top: 10mm; + } + + .pagedjs_left_page{ + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ + border-color: var(--pagedjs-crop-color); + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: var(--pagedjs-cross-size)!important; + } + + .pagedjs_right_page{ + left: 0; + } + */ + + + + /*--------------------------------------------------------------------------------------*/ + + + + /* uncomment this par to see the baseline : -------------------------------------------*/ + + + /* .pagedjs_pagebox { + --pagedjs-baseline: 22px; + --pagedjs-baseline-position: 5px; + --pagedjs-baseline-color: cyan; + 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; + background-size: 100% var(--pagedjs-baseline); + background-repeat: repeat-y; + background-position-y: var(--pagedjs-baseline-position); + } */ + + + /*--------------------------------------------------------------------------------------*/ } -/* two pages in a row if possible on screen */ -@media screen { - body { - background-color: var(--background); - margin: var(--screen-pages-spacing) auto 0 auto; - } - .pagedjs_pages { - display: flex; - max-width: calc(var(--pagedjs-width) * 2); - flex: 0; - flex-wrap: wrap; - margin: 0 auto; - } - .pagedjs_page { - background-color: var(--color-paper); - box-shadow: 0 0 0 1px var(--color-mbox); - flex-shrink: 0; - flex-grow: 0; - margin: auto auto var(--screen-pages-spacing) auto; - } + + + + +/* Marks (to delete when merge in paged.js) */ + +.pagedjs_marks-crop{ + z-index: 999999999999; + } -/* when a row can hold two pages, start first page on the right */ -@media screen and (min-width: 12.32in) { - .pagedjs_page { - margin: auto 0 var(--screen-pages-spacing) 0; - } - .pagedjs_first_page { - margin-left: var(--pagedjs-width); - } +.pagedjs_bleed-top .pagedjs_marks-crop, +.pagedjs_bleed-bottom .pagedjs_marks-crop{ + box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-top .pagedjs_marks-crop:last-child, +.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{ + box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop, +.pagedjs_bleed-right .pagedjs_marks-crop{ + box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); } -/* use a fixed width body for mobiles */ -@media screen and (max-width:1180px) { - body { - width: calc(var(--pagedjs-width) + 2 * var(--screen-pages-spacing)); - } +.pagedjs_bleed-left .pagedjs_marks-crop:last-child, +.pagedjs_bleed-right .pagedjs_marks-crop:last-child{ + box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); }