Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SCSS fails to parse #11703

Open
rgouveiamendes opened this issue Dec 18, 2024 · 3 comments
Open

SCSS fails to parse #11703

rgouveiamendes opened this issue Dec 18, 2024 · 3 comments
Assignees
Labels
enhancement New feature or request themes Related to HTML theming or any other style related issue (like highlight-style)
Milestone

Comments

@rgouveiamendes
Copy link

rgouveiamendes commented Dec 18, 2024

Bug description

I am getting the following erros after compiling a Reveal presentation:

Error adding css vars block Error: Expecting punctuation: "}" (2828:53)
    at InputStream.err (file:///opt/quarto/bin/quarto.js:48871:15)
    at Object.err (file:///opt/quarto/bin/quarto.js:48890:23)
    at TokenStream.err (file:///opt/quarto/bin/quarto.js:48960:27)
    at Object.err (file:///opt/quarto/bin/quarto.js:49127:22)
    at Parser.skip_type (file:///opt/quarto/bin/quarto.js:49185:25)
    at Parser.skip_punctuation (file:///opt/quarto/bin/quarto.js:49189:21)
    at Parser.parse_block (file:///opt/quarto/bin/quarto.js:49376:31)
    at Parser.parse_rule (file:///opt/quarto/bin/quarto.js:49451:28)
    at Parser.parse_node (file:///opt/quarto/bin/quarto.js:49271:59)
    at Parser.parse_stylesheet (file:///opt/quarto/bin/quarto.js:49203:31)
The resulting CSS file will not have SCSS color variables exported as CSS.
This is likely a Quarto bug.
Please consider reporting it at https://github.com/quarto-dev/quarto-cli,
along with the _quarto_internal_scss_error.scss file that can be found in the current working directory.

Steps to reproduce

My CSS tweaks are in a file `personal.scss` such this.

/*-- scss:defaults --*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,300italic,900,900italic");

$main-color: #eb2429;
$highlight-color: #eb2429;
$light-bg-text-color: #ffffff;
$font-family-sans-serif: "Montserrat", "Source Sans Pro", Helvetica, sans-serif;
$presentation-heading-font: "Montserrat", sans-serif !default;
$presentation-font-size-root: 42px;
$presentation-font-smaller: 80%;
$presentation-line-height: 1.3;
$link-color: $main-color;
$presentation-heading-color: $main-color;
$presentation-heading-line-height: 1.1;
$presentation-heading-font-weight: 700;
$presentation-block-margin: 20px;
$presentation-slide-text-align: left;
$presentation-title-slide-text-align: left;
$light-bg-link-color: $main-color;
$dark-bg-link-color: $main-color;

/-- scss:rules --/

.left-column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 48%;
padding-right: 2%;
}

.right-column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 48%;
padding-left: 2%;
}

.cell-output-display {
overflow-y: hidden !important;
}

.boxed {
border-width:4px;
border-style:solid;
border-color:$main-color;
padding: 2.5% 5% 5%;
border-radius: 15px;
overflow: hidden;
margin-top: 0.6em;
margin-bottom: 0.6em;
}

.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: text-bottom;
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
color: $dark-bg-text-color !important;
background-color: $main-color;

a {
    color: $dark-bg-text-color !important;
}

}

.badge.fwd::after {
content: "\25B6";
display: inline-block;
margin-left: 0.5em;
font-size: 60%;
vertical-align: middle;
margin-bottom: 0.2em;
}

.badge.bwd::before {
content: "\25C0";
display: inline-block;
margin-right: 0.5em;
font-size: 60%;
vertical-align: middle;
margin-bottom: 0.2em;
}

.badge:hover {
background-color: mix($main-color, white, 70%)
}

figcaption {
text-align: center;
font-size: 60% !important;
}

pre {
font-size: 0.7em !important;
line-height: 1.5 !important;
}

ol ol {
list-style-type: lower-alpha !important;
}

ol ol ol {
list-style-type: lower-roman !important;
}

ul ul, ol ol {
margin-block-start: -0.2em !important;
font-size: 90% !important;
}

ul ul ul, ol ol ol {
margin-block-start: -0.2em !important;
font-size: 80% !important;
}

ul li, ol li {
padding-top: 0.3em;
margin-left: 0.5em;
}

ul ul li, ol ol li {
padding-top: 0.2em;
margin-left: 0.5em;
}

ul ul ul li, ol ol ol li {
padding-top: 0.1em;
margin-left: 0.5em;
}

li::marker {
font-variant-numeric: normal !important;
color: $main-color;
font-weight: 600;
}

aside {
font-size: 60%;
}

.aside-footnotes > li::marker {
font-weight: normal !important;
color: inherit !important;
}
.aside-footnotes > ul li, ol li, p {
padding-top: 0em !important;
margin-bottom: -0.5em !important;
}

strong {
color: $main-color;
font-size: 110%;
}

del {
text-decoration: none;
font-style: italic;
border-bottom: 4px solid;
border-bottom-color: $highlight-color;
}

figcaption {
color: lighten($body-color,20%);
}

h2, p {
padding-bottom: 0.5em;
}

h3 {
margin-top: -1.3em !important;
padding-bottom: 0.5em;
font-weight: normal!important;
font-style: italic;
font-size: 1em!important;
line-height: 1.2!important;
}

blockquote {
font-size: 80%;
}

img {
margin: 0 !important;
max-width: 100% !important;
max-height: 100% !important;;
}

#title-slide {

color: white;

.title {
    font-size: 2.2em;
    padding-top: 3.0em;
    text-align: left;
    line-height: 1.1 !important;
    color: white;
}
.subtitle {
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    line-height: 1.1 !important;
    margin-top: 0px !important;
    margin-bottom: 0.5em !important;
}
.quarto-title-authors {
    text-align: left;
    justify-content: left !important;
    font-size: 1em;
    line-height: 1.1 !important;
}
.quarto-title-author {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.date{
    text-align: left;
    margin-top: 0.8em;
    line-height: 1.1 !important;
}

}

.slide-number, .footer {
font-family: $font-family-sans-serif !important;
color: $main-color !important;
}

.slide-logo {
max-height: 7.5% !important;
}

.csl-entry {
text-indent: -4em;
margin-left: 3em;
margin-top: 0.6em;
}

.hanged {
text-indent: -3em;
margin-left: 3em;
color: #555;
}

.small {
font-size: 80%;
}

The error may be reproduced with a simple document such as:

---
title: "My Fancy Title"
author: "I, me, myself"
date: ""
format:
    revealjs:
        theme: [default, personal.scss]
---

## Hello World

Hi

Expected behavior

I would expect a no error compilation.

Actual behavior

What I've described above: an error in the compilation log and a scss file generated.

Your environment

  • IDE: VScode 1.96.0
  • OS: Pop!_OS 22.04 LTS, 64-bit

Quarto check output

Quarto 1.6.39
[✓] Checking environment information...
      Quarto cache location: /home/ric/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.6.39
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/local/texlive/2024/bin/x86_64-linux
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.12
      Path: /usr/bin/python3
      Jupyter: 5.7.2
      Kernels: python3, ir

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.4.2
      Path: /usr/lib/R
      LibPaths:
        - /home/ric/R/x86_64-pc-linux-gnu-library/4.4
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK
@rgouveiamendes rgouveiamendes added the bug Something isn't working label Dec 18, 2024
@rgouveiamendes
Copy link
Author

The mentioned `_quarto_internal_scss_error.scss` is here.

```scss // quarto-scss-analysis-annotation { "quarto-version": "1.6.36" }

// quarto-scss-analysis-annotation { "origin": "'use' section from format" }

// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }

@use "sass:color" as quarto-color;
@use "sass:map" as quarto-map;
@use "sass:math" as quarto-math;

// this file is currently intentionally empty

// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }

// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }

// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }

@function colorToRGB($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}

@function colorToRGBA($color) {
@return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
", " + alpha($color) + ")";
}

@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
}
@return $string;
}

@function colorToRGB($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}

@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}

@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}

@function shift-color($color, $weight) {
@return if(
$weight > 0,
shade-color($color, $weight),
tint-color($color, -$weight)
);
}

// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }

// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,300italic,900,900italic");

$main-color: #eb2429;
$highlight-color: #eb2429;
$light-bg-text-color: #ffffff;
$font-family-sans-serif: "Montserrat", "Source Sans Pro", Helvetica, sans-serif;
$presentation-heading-font: "Montserrat", sans-serif !default;
$presentation-font-size-root: 42px;
$presentation-font-smaller: 80%;
$presentation-line-height: 1.3;
$link-color: $main-color;
$presentation-heading-color: $main-color;
$presentation-heading-line-height: 1.1;
$presentation-heading-font-weight: 700;
$presentation-block-margin: 20px;
$presentation-slide-text-align: left;
$presentation-title-slide-text-align: left;
$light-bg-link-color: $main-color;
$dark-bg-link-color: $main-color;

// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }

@import url(./fonts/source-sans-pro/source-sans-pro.css);

// fonts
$font-family-sans-serif: "Source Sans Pro", Helvetica, sans-serif !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !default;
$presentation-font-size-root: 40px !default;
$presentation-font-smaller: 0.7 !default;
$presentation-line-height: 1.3 !default;

// Default variables which exist in bootstrap themes
// and are here to simplify the implementation of _brand.yml and
// user theming customization in general
$font-weight-base: 400 !default;
$code-font-size: 1em !default;
$font-family-monospace-block: $font-family-monospace !default;
$font-family-monospace-inline: $font-family-monospace !default;
$link-weight: $font-weight-base !default;
$link-color-bg: transparent !default;
$link-decoration: inherit !default;
$font-weight-monospace: $font-weight-base !default;
$font-weight-monospace-block: $font-weight-monospace !default;
$font-weight-monospace-inline: $font-weight-monospace !default;

// main colors
$body-bg: #fff !default;
$body-color: #222 !default;
$text-muted: lighten($body-color, 30%) !default;

// grey colors (like in bootstrap)
$gray-200: #e9ecef !default;
$gray-100: #f8f9fa !default;
$gray-900: #212529 !default;

// link colors
$primary: #2a76dd !default;
$link-color: $primary !default;
$link-color-hover: lighten($link-color, 10%) !default;

// selection colors
$selection-bg: lighten($link-color, 25%) !default;
$selection-color: $body-bg !default;

// border colors
$border-color: lighten($body-color, 30%) !default;
$border-width: 1px !default;
$border-radius: 4px !default;

// headings
$presentation-heading-font: $font-family-sans-serif !default;
$presentation-heading-color: $body-color !default;
$presentation-heading-line-height: 1.2 !default;
$presentation-heading-letter-spacing: normal !default;
$presentation-heading-text-transform: none !default;
$presentation-heading-text-shadow: none !default;
$presentation-h1-text-shadow: none !default;
$presentation-heading-font-weight: 600 !default;
$presentation-h1-font-size: 2.5em !default;
$presentation-h2-font-size: 1.6em !default;
$presentation-h3-font-size: 1.3em !default;
$presentation-h4-font-size: 1em !default;

// margins
$presentation-block-margin: 12px !default;

// text alignment
$presentation-slide-text-align: left !default;
$presentation-title-slide-text-align: center !default;
$reveal-slide-text-align: $presentation-slide-text-align !default;
$reveal-title-slide-text-align: $presentation-title-slide-text-align !default;

// Lists
$presentation-list-bullet-color: $body-color !default;

// code blocks
$code-block-bg: $body-bg !default;
$code-block-border-color: lighten($body-color, 60%) !default;
$code-block-font-size: $code-font-size * 0.55 !default;
$code-block-height: 500px !default;
$code-block-theme-dark-threshhold: 40% !default;
$code-block-line-height: $presentation-line-height !default;
$code-block-color: $body-color !default;

// inline code
$code-inline-font-size: $code-font-size * 0.875 !default;
$code-color: var(--quarto-hl-fu-color) !default;
$code-bg: transparent !default;

// tabset
$tabset-border-color: $code-block-border-color !default;

// table
$table-border-color: $code-block-border-color !default;

// input panel
$input-panel-border-color: $code-block-border-color !default;
$input-panel-border-width: $border-width !default;
$input-panel-border-radius: $border-radius !default;
$input-panel-bg: rgba(248, 249, 250, 1) !default;

// Callouts
$callout-border-width: 0.3rem !default;
$callout-border-scale: 0% !default;
$callout-icon-scale: 10% !default;
$callout-margin-top: 1rem !default;
$callout-margin-bottom: 1rem !default;
$callout-color-note: #0d6efd !default;
$callout-color-tip: #198754 !default;
$callout-color-important: #dc3545 !default;
$callout-color-caution: #fd7e14 !default;
$callout-color-warning: #ffc107 !default;

// alternate colors for when the background changes
$light-bg-text-color: #222 !default;
$dark-bg-text-color: #fff !default;
$light-bg-link-color: #2a76dd !default;
$dark-bg-link-color: #42affa !default;
$light-bg-code-color: #4758ab !default;
$dark-bg-code-color: #ffa07a !default;

// KBD variables
$kbd-padding-y: 0.4rem !default;
$kbd-padding-x: 0.4rem !default;
$kbd-font-size: $presentation-font-size-root !default;
$kbd-color: $body-color !default;
$kbd-bg: $gray-100 !default; // like in bootstrap style

// --- derive reveal versions of presentation variables for finer-grained override ---

$revealjs-font-size-root: $presentation-font-size-root !default;
$revealjs-h1-font-size: $presentation-h1-font-size !default;
$revealjs-h2-font-size: $presentation-h2-font-size !default;
$revealjs-h3-font-size: $presentation-h3-font-size !default;
$revealjs-h4-font-size: $presentation-h4-font-size !default;
$revealjs-heading-font: $presentation-heading-font !default;
$revealjs-heading-color: $presentation-heading-color !default;
$revealjs-heading-line-height: $presentation-heading-line-height !default;
$revealjs-heading-letter-spacing: $presentation-heading-letter-spacing !default;
$revealjs-heading-text-transform: $presentation-heading-text-transform !default;
$revealjs-heading-text-shadow: $presentation-heading-text-shadow !default;
$revealjs-h1-text-shadow: $presentation-h1-text-shadow !default;

$revealjs-heading-font-weight: $presentation-heading-font-weight !default;
$revealjs-block-margin: $presentation-block-margin !default;
$revealjs-line-height: $presentation-line-height !default;
$revealjs-list-bullet-color: $presentation-list-bullet-color !default;

$revealjs-code-inline-font-size: $code-inline-font-size !default;
$revealjs-code-block-font-size: $code-block-font-size !default;

// ---- map to reveal scss variables ---
// ---- This is based from the revealjs setting.scss
// -- START setting.scss --
// Background of the presentation
$backgroundColor: $body-bg !default;

// Primary/body text
$mainFont: $font-family-sans-serif !default;
$mainFontSize: $revealjs-font-size-root !default;
$mainColor: $body-color !default;

// Vertical spacing between blocks of text
$blockMargin: $revealjs-block-margin !default;

// Headings
$headingMargin: 0 0 $blockMargin 0 !default;
$headingFont: $revealjs-heading-font !default;
$headingColor: $revealjs-heading-color !default;
$headingLineHeight: $revealjs-heading-line-height !default;
$headingLetterSpacing: $revealjs-heading-letter-spacing !default;
$headingTextTransform: $revealjs-heading-text-transform !default;
$headingTextShadow: $revealjs-heading-text-shadow !default;
$heading1TextShadow: $revealjs-h1-text-shadow !default;
$headingFontWeight: $revealjs-heading-font-weight !default;

$heading1Size: $revealjs-h1-font-size !default;
$heading2Size: $revealjs-h2-font-size !default;
$heading3Size: $revealjs-h3-font-size !default;
$heading4Size: $revealjs-h4-font-size !default;

$codeFont: $font-family-monospace !default;

// Links and actions
$linkColor: $link-color !default;
$linkColorHover: $link-color-hover !default;

// Text selection
$selectionBackgroundColor: $selection-bg !default;
$selectionColor: $selection-color !default;

// Colors used for UI elements that are overlaid on top of
// the presentation
$overlayElementBgColor: 240, 240, 240 !default;
$overlayElementFgColor: 0, 0, 0 !default;

// -- END setting.scss --

$code-copy-selector: "pre.sourceCode:hover > " !default;
$code-white-space: pre !default;
$tbl-cap-location: top !default;
// main colors
$body-bg: #fff !default;
$body-color: #222 !default;
$text-muted: lighten($body-color, 30%) !default;

// border colors
$border-color: lighten($body-color, 30%) !default;
$table-border-color: $border-color !default;
$border-width: 1px !default;
$border-radius: 4px !default;

// code block colors
$btn-code-copy-color: if(
variable-exists(text-muted),
$text-muted,
if(variable-exists(body-color), $body-color, $gray-900)
) !default;

$btn-code-copy-color-active: if(
variable-exists(link-color),
$link-color,
#0d6efd
) !default;

// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }

// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }

@mixin vertical-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
background: linear-gradient( top, $top 0%, $bottom 100% );
}

@mixin horizontal-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
background: linear-gradient( left, $top 0%, $bottom 100% );
}

@mixin radial-gradient( $outer, $inner, $type: circle ) {
background: $outer;
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
}

@mixin light-bg-text-color( $color ) {
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: $color;
}
}
}

@mixin dark-bg-text-color( $color ) {
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: $color;
}
}
}

// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }

@mixin shift_to_dark($property, $colorDark, $colorLight) {
@if (
quarto-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold
) {
#{$property}: $colorDark;
} @else {
#{$property}: $colorLight;
}
}

// Make the font size smaller by a factor of $times
// Useful for font-size defined in px inside smaller font size controled by em
// as they would not be impacted by the smaller font size
@mixin make-smaller-font-size($element, $times: 1) {
font-size: calc(
#{$element} * #{quarto-math.pow($presentation-font-smaller, $times)}
);
}

// Undo the smaller font size
// Useful for font-size in em already that should not be impacted by smaller font size controled by em
@mixin undo-smaller-font-size($element) {
font-size: calc(#{$element} / #{$presentation-font-smaller});
}

// -- START setting.scss --

// Generates the presentation background, can be overridden
// to return a background image or gradient
@mixin bodyBackground() {
background: $backgroundColor;
}

// -- END setting.scss --

// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }

// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }

// Base theme template for reveal.js

/*********************************************

  • GLOBAL STYLES
    *********************************************/

@import "./exposer";

.reveal-viewport {
@include bodyBackground();
background-color: var(--r-background-color);
}

.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}

.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}

.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}

.reveal .slides section,
.reveal .slides section>section {
line-height: 1.3;
font-weight: inherit;
}

/*********************************************

  • HEADERS
    *********************************************/

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);

font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);

text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);

word-wrap: break-word;

}

.reveal h1 {font-size: var(--r-heading1-size); }
.reveal h2 {font-size: var(--r-heading2-size); }
.reveal h3 {font-size: var(--r-heading3-size); }
.reveal h4 {font-size: var(--r-heading4-size); }

.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}

/*********************************************

  • OTHER
    *********************************************/

.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}

/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}

.reveal em {
font-style: italic;
}

.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;

text-align: left;
margin: 0 0 0 1em;

}

.reveal ol {
list-style-type: decimal;
}

.reveal ul {
list-style-type: disc;
}

.reveal ul ul {
list-style-type: square;
}

.reveal ul ul ul {
list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}

.reveal dt {
font-weight: bold;
}

.reveal dd {
margin-left: 40px;
}

.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;

font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);

}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}

.reveal q {
font-style: italic;
}

.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;

text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;

word-wrap: break-word;

box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);

}

.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}

.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}

.reveal .code-wrapper {
white-space: normal;
}

.reveal .code-wrapper code {
white-space: pre;
}

.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}

.reveal table th {
font-weight: bold;
}

.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center;
}

.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}

.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}

.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}

.reveal small * {
vertical-align: top;
}

.reveal img {
margin: var(--r-block-margin) 0;
}

/*********************************************

  • LINKS
    *********************************************/

.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color .15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}

.reveal .roll span:after {
color: #fff;
// background: darken( var(--r-link-color), 15% );
background: var(--r-link-color-dark);

}

/*********************************************

  • Frame helper
    *********************************************/

.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.reveal a .r-frame {
transition: all .15s linear;
}

.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}

/*********************************************

  • NAVIGATION CONTROLS
    *********************************************/

.reveal .controls {
color: var(--r-link-color);
}

/*********************************************

  • PROGRESS BAR
    *********************************************/

.reveal .progress {
background: rgba(0,0,0,0.2);
color: var(--r-link-color);
}

/*********************************************

  • PRINT BACKGROUND
    *********************************************/
    @media print {
    .backgrounds {
    background-color: var(--r-background-color);
    }
    }

// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }

// floating

.top-right {
position: absolute;
top: 1em;
right: 1em;
}

// hidden

// #5403 (comment)
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

.hidden {
display: none !important;
}

.zindex-bottom {
z-index: -1 !important;
}

// layout and figures

figure.figure {
display: block;
}

.quarto-layout-panel {
margin-bottom: 1em;
}

.quarto-layout-panel > figure {
width: 100%;
}
.quarto-layout-panel > figure > figcaption,
.quarto-layout-panel > .panel-caption {
margin-top: 10pt;
}

.quarto-layout-panel > .table-caption {
margin-top: 0px;
}

.table-caption p {
margin-bottom: 0.5em;
}

.quarto-layout-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.quarto-layout-valign-top {
align-items: flex-start;
}
.quarto-layout-valign-bottom {
align-items: flex-end;
}
.quarto-layout-valign-center {
align-items: center;
}
.quarto-layout-cell {
position: relative;
margin-right: 20px;
}
.quarto-layout-cell:last-child {
margin-right: 0;
}
.quarto-layout-cell figure,
.quarto-layout-cell > p {
margin: 0.2em;
}
.quarto-layout-cell img {
max-width: 100%;
}
.quarto-layout-cell .html-widget {
width: 100% !important;
}
.quarto-layout-cell div figure p {
margin: 0;
}
.quarto-layout-cell figure {
display: block;
margin-inline-start: 0;
margin-inline-end: 0;
}
.quarto-layout-cell table {
display: inline-table;
}
.quarto-layout-cell-subref figcaption,
figure .quarto-layout-row figure figcaption {
text-align: center;
font-style: italic;
}
.quarto-figure {
position: relative;
margin-bottom: 1em;
}

.quarto-figure > figure {
width: 100%;
margin-bottom: 0;
}
.quarto-figure-left > figure > p,
.quarto-figure-left > figure > div /* for mermaid and dot diagrams / {
text-align: left;
}
.quarto-figure-center > figure > p,
.quarto-figure-center > figure > div /
for mermaid and dot diagrams / {
text-align: center;
}
.quarto-figure-right > figure > p,
.quarto-figure-right > figure > div /
for mermaid and dot diagrams */ {
text-align: right;
}

.quarto-figure > figure > div.cell-annotation,
.quarto-figure > figure > div code {
text-align: left; /* override align center for code blocks */
}

figure > p:empty {
display: none;
}
figure > p:first-child {
margin-top: 0;
margin-bottom: 0;
}

figure > figcaption.quarto-float-caption-bottom {
margin-bottom: 0.5em;
}
figure > figcaption.quarto-float-caption-top {
margin-top: 0.5em;
}

// anchor

// anchor js

div[id^="tbl-"] {
position: relative;
}

.quarto-figure > .anchorjs-link {
position: absolute;
top: 0.6em;
right: 0.5em;
}

div[id^="tbl-"] > .anchorjs-link {
position: absolute;
top: 0.7em;
right: 0.3em;
}

/* workaround for anchorjs not hitting on generic :hover selector */
.quarto-figure:hover > .anchorjs-link,
div[id^="tbl-"]:hover > .anchorjs-link,
h2:hover > .anchorjs-link,
h3:hover > .anchorjs-link,
h4:hover > .anchorjs-link,
h5:hover > .anchorjs-link,
h6:hover > .anchorjs-link,
.reveal-anchorjs-link > .anchorjs-link {
opacity: 1;
}

#title-block-header {
margin-block-end: 1rem;
position: relative;
margin-top: -1px; // Chrome draws 1px white line between navbar and title block
}

#title-block-header .abstract {
margin-block-start: 1rem;
}

#title-block-header .abstract .abstract-title {
font-weight: 600;
}

#title-block-header a {
text-decoration: none;
}

#title-block-header .author,
#title-block-header .date,
#title-block-header .doi {
margin-block-end: 0.2rem;
}

#title-block-header .quarto-title-block > div {
display: flex;
}

#title-block-header .quarto-title-block > div > h1 {
flex-grow: 1;
}

#title-block-header .quarto-title-block > div > button {
flex-shrink: 0;
height: 2.25rem;
margin-top: 0;
}

#title-block-header .quarto-title-block > div > button {
@if mixin-exists(media-breakpoint-up) {
@include media-breakpoint-up(lg) {
margin-top: 5px;
}
}
}

// (Remove bottom margin from paragraphs in table headers)
tr.header > th > p:last-of-type {
margin-bottom: 0px;
}

table,
table.table {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

caption,
.table-caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
}

figure.quarto-float-tbl figcaption.quarto-float-caption-top {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
text-align: center;
}

figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
padding-top: 0.25rem;
margin-bottom: 0.5rem;
text-align: center;
}

// utterances
.utterances {
max-width: none;
margin-left: -8px;
}

// iframe
iframe {
margin-bottom: 1em;
}

// details
details {
margin-bottom: 1em;
}
details[show] {
margin-bottom: 0;
}

details > summary {
@if variable-exists(text-muted) {
color: $text-muted;
}
}

details > summary > p:only-child {
display: inline;
}

// codeCopy
pre.sourceCode,
code.sourceCode {
position: relative;
}

// Inline code should wrap
// See #2649
dd code:not(.sourceCode),
p code:not(.sourceCode) {
white-space: pre-wrap;
}

// default to scrolling output rather than wrapping, since
// multi-column tabular output (very common for R & Python) is
// unreadable when wrapped.
code {
white-space: pre;
}
@media print {
code {
white-space: pre-wrap;
}
}
pre > code {
display: block;
}

pre > code.sourceCode {
white-space: $code-white-space;
}

pre > code.sourceCode > span > a:first-child::before {
text-decoration: none;
}

pre.code-overflow-wrap > code.sourceCode {
white-space: pre-wrap;
}

pre.code-overflow-scroll > code.sourceCode {
white-space: pre;
}

// code linking (pkgdown style)
code a:any-link {
color: inherit;
text-decoration: none;
}
code a:hover {
color: inherit;
text-decoration: underline;
}

// task lists
ul.task-list {
padding-left: 1em;
}

// tippy

[data-tippy-root] {
display: inline-block;
}

.tippy-content .footnote-back {
display: none;
}

.footnote-back {
margin-left: 0.2em;
}

.tippy-content {
overflow-x: auto;
}

// embedded source code
.quarto-embedded-source-code {
display: none;
}

// unresolved crossrefs
.quarto-unresolved-ref {
font-weight: 600;
}

// html cover image injection
.quarto-cover-image {
max-width: 35%;
float: right;
margin-left: 30px;
}

// provide margin below jupyter widgets
.cell-output-display .widget-subarea {
margin-bottom: 1em;
}

// fix for selectize inputs getting their contents clipped
// this also works for knitr sql cells (see github issue #3497)
.cell-output-display:not(.no-overflow-x),
.knitsql-table:not(.no-overflow-x) {
overflow-x: auto;
}

.panel-input {
margin-bottom: 1em;
}

.panel-input > div,
.panel-input > div > div {
display: inline-block;
vertical-align: top;
padding-right: 12px;
}

.panel-input > p:last-child {
margin-bottom: 0;
}

.layout-sidebar {
margin-bottom: 1em;
}

.layout-sidebar .tab-content {
border: none;
}

.tab-content > .page-columns.active {
display: grid;
}

// default styling for .code-preview=".." iframes
div.sourceCode > iframe {
width: 100%;
height: 300px;

// this negative-margin hack works around the rendering issue with
// iframes and parent elements with rounded corners if the border
// radius for (eg) div.sourceCode is changed, this is likely going
// to need changing as well.
@if variable-exists(code-preview-margin-bottom) {
margin-bottom: $code-preview-margin-bottom;
} @else {
margin-bottom: -0.5em;
}
@if variable-exists(code-preview-border-color) {
border: $code-preview-border-color;
}
}

// link styling
a {
text-underline-offset: 3px;
}

/* Callout styling */

.callout pre.sourceCode {
padding-left: 0;
}

// ansi escaping
div.ansi-escaped-output {
font-family: monospace;
display: block;
}

/*!
*

  • ansi colors from IPython notebook's
  • we also add bright-[color]- synonyms for the -[color]-intense classes since
  • that seems to be what ansi_up emits

/
/
CSS font colors for translated ANSI escape sequences /
/
The color values are a mix of
http://www.xcolors.net/dl/baskerville-ivorylight and
http://www.xcolors.net/dl/euphrasia */
.ansi-black-fg {
color: #3e424d;
}
.ansi-black-bg {
background-color: #3e424d;
}
.ansi-black-intense-black,
.ansi-bright-black-fg {
color: #282c36;
}
.ansi-black-intense-black,
.ansi-bright-black-bg {
background-color: #282c36;
}
.ansi-red-fg {
color: #e75c58;
}
.ansi-red-bg {
background-color: #e75c58;
}
.ansi-red-intense-red,
.ansi-bright-red-fg {
color: #b22b31;
}
.ansi-red-intense-red,
.ansi-bright-red-bg {
background-color: #b22b31;
}
.ansi-green-fg {
color: #00a250;
}
.ansi-green-bg {
background-color: #00a250;
}
.ansi-green-intense-green,
.ansi-bright-green-fg {
color: #007427;
}
.ansi-green-intense-green,
.ansi-bright-green-bg {
background-color: #007427;
}
.ansi-yellow-fg {
color: #ddb62b;
}
.ansi-yellow-bg {
background-color: #ddb62b;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-fg {
color: #b27d12;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-bg {
background-color: #b27d12;
}
.ansi-blue-fg {
color: #208ffb;
}
.ansi-blue-bg {
background-color: #208ffb;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-fg {
color: #0065ca;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-bg {
background-color: #0065ca;
}
.ansi-magenta-fg {
color: #d160c4;
}
.ansi-magenta-bg {
background-color: #d160c4;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-fg {
color: #a03196;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-bg {
background-color: #a03196;
}
.ansi-cyan-fg {
color: #60c6c8;
}
.ansi-cyan-bg {
background-color: #60c6c8;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-fg {
color: #258f8f;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-bg {
background-color: #258f8f;
}
.ansi-white-fg {
color: #c5c1b4;
}
.ansi-white-bg {
background-color: #c5c1b4;
}
.ansi-white-intense-white,
.ansi-bright-white-fg {
color: #a1a6b2;
}
.ansi-white-intense-white,
.ansi-bright-white-bg {
background-color: #a1a6b2;
}
.ansi-default-inverse-fg {
color: #ffffff;
}
.ansi-default-inverse-bg {
background-color: #000000;
}
.ansi-bold {
font-weight: bold;
}
.ansi-underline {
text-decoration: underline;
}

:root {
--quarto-body-bg: #{$body-bg};
--quarto-body-color: #{$body-color};
--quarto-text-muted: #{$text-muted};
--quarto-border-color: #{$table-border-color};
--quarto-border-width: #{$border-width};
@if not variable-exists(enable-rounded) or $enable-rounded == true {
--quarto-border-radius: #{$border-radius};
}
}

/* rules to support GT table styling */
table.gt_table {
color: var(--quarto-body-color);
font-size: 1em;
width: 100%; // to match other table styling
background-color: transparent;
border-top-width: inherit;
border-bottom-width: inherit;
border-color: var(--quarto-border-color);
}

table.gt_table th.gt_column_spanner_outer {
color: var(--quarto-body-color);
background-color: transparent;
border-top-width: inherit;
border-bottom-width: inherit;
border-color: var(--quarto-border-color);
}

table.gt_table th.gt_col_heading {
color: var(--quarto-body-color);
font-weight: bold;
background-color: transparent;
}

table.gt_table thead.gt_col_headings {
border-bottom: 1px solid currentColor;
border-top-width: inherit;
border-top-color: var(--quarto-border-color);
}

table.gt_table thead.gt_col_headings:not(:first-child) {
border-top-width: 1px;
border-top-color: var(--quarto-border-color);
}

table.gt_table td.gt_row {
border-bottom-width: 1px;
border-bottom-color: var(--quarto-border-color);
border-top-width: 0px;
}

table.gt_table tbody.gt_table_body {
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: var(--quarto-border-color);
border-top-color: currentColor;
}

/* restore previous pandoc columns behavior
(too many reports of slide layout breaking)
see jgm/pandoc#8237
*/
div.columns {
display: initial;
gap: initial;
}
div.column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 50%;
}

// Code Annotation LayoutBoot
.code-annotation-tip-content {
word-wrap: break-word;
}

.code-annotation-container-hidden {
display: none !important;
}

dl.code-annotation-container-grid {
display: grid;
grid-template-columns: min-content auto;
dt {
grid-column: 1;
}
dd {
grid-column: 2;
}
}

pre.sourceCode.code-annotation-code {
padding-right: 0;
}

code.sourceCode .code-annotation-anchor {
z-index: 100;
position: relative;
float: right;
background-color: transparent;
}

// Add a bit of margin to the right of a checkbox
// #6627
input[type="checkbox"] {
margin-right: 0.5ch;
}

// Mermaid Theming
// if none come from theme, we need these
$body-color: #222 !default;
$body-bg: #fff !default;
$primary: #468 !default;
$secondary: #999 !default;
$font-family-sans-serif: sans-serif !default;
$font-weight-base: 400 !default;

/* SCSS variables

These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd

Make sure to update the docs if you change these.
*/
$mermaid-bg-color: $body-bg !default;
$mermaid-edge-color: $secondary !default;
$mermaid-node-fg-color: $body-color !default;
$mermaid-fg-color: $body-color !default;
$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
$mermaid-font-family: $font-family-sans-serif !default;
$mermaid-font-weight: $font-weight-base !default;
$mermaid-label-bg-color: $body-bg !default;
$mermaid-label-fg-color: $primary !default;
$mermaid-node-bg-color: rgba($primary, 0.1) !default;
$mermaid-node-fg-color: $primary !default;

/* CSS variables */
:root {
--mermaid-bg-color: #{$mermaid-bg-color};
--mermaid-edge-color: #{$mermaid-edge-color};
--mermaid-node-fg-color: #{$mermaid-node-fg-color};
--mermaid-fg-color: #{$mermaid-fg-color};
--mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
--mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
--mermaid-font-family: #{$mermaid-font-family};
--mermaid-label-bg-color: #{$mermaid-label-bg-color};
--mermaid-label-fg-color: #{$mermaid-label-fg-color};
--mermaid-node-bg-color: #{$mermaid-node-bg-color};
--mermaid-node-fg-color: #{$mermaid-node-fg-color};
}

@media print {
:root {
font-size: 11pt;
}
#quarto-sidebar,
#TOC,
.nav-page {
display: none;
}
.page-columns .content {
grid-column-start: page-start;
}
.fixed-top {
position: relative;
}
.panel-caption,
.figure-caption,
figcaption {
color: #666;
}
}

.code-copy-button {
position: absolute;
top: 0;
right: 0;
border: 0;
margin-top: 5px;
margin-right: 5px;
background-color: transparent;
z-index: 3;
}

.code-copy-button:focus {
outline: none;
}

.code-copy-button-tooltip {
font-size: 0.75em;
}

#{$code-copy-selector} .code-copy-button > .bi::before {
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
vertical-align: -0.125em;
@if variable-exists(btn-code-copy-color) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
background-repeat: no-repeat;
background-size: 1rem 1rem;
}

#{$code-copy-selector} .code-copy-button-checked > .bi::before {
@if variable-exists(btn-code-copy-color) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
}

@if variable-exists(btn-code-copy-color-active) {
#{$code-copy-selector} .code-copy-button:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
#{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
}

$body-bg: #fff !default;
$tabset-border-color: rgb(222, 226, 230) !default;

.panel-tabset [role="tablist"] {
border-bottom: 1px solid $tabset-border-color;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

.panel-tabset [role="tablist"] * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

@media (min-width: 30em) {
.panel-tabset [role="tablist"] li {
display: inline-block;
}
}

.panel-tabset [role="tab"] {
border: 1px solid transparent;
border-top-color: $tabset-border-color;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}

@media (min-width: 30em) {
.panel-tabset [role="tab"] {
border-top-color: transparent;
display: inline-block;
margin-bottom: -1px;
}
}

.panel-tabset [role="tab"][aria-selected="true"] {
background-color: $tabset-border-color;
}

@media (min-width: 30em) {
.panel-tabset [role="tab"][aria-selected="true"] {
background-color: transparent;
border: 1px solid $tabset-border-color;
border-bottom-color: $body-bg;
}
}

@media (min-width: 30em) {
.panel-tabset [role="tab"]:hover:not([aria-selected="true"]) {
border: 1px solid $tabset-border-color;
}
}

.code-with-filename .code-with-filename-file {
margin-bottom: 0;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 0.7em;
border: var(--quarto-border-width) solid var(--quarto-border-color);
border-radius: var(--quarto-border-radius);
border-bottom: 0;
border-bottom-left-radius: 0%;
border-bottom-right-radius: 0%;
}

.code-with-filename div.sourceCode,
.reveal .code-with-filename div.sourceCode {
margin-top: 0;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}

.code-with-filename .code-with-filename-file pre {
margin-bottom: 0;
}

.code-with-filename .code-with-filename-file {
background-color: rgba(219, 219, 219, 0.8);
}

.quarto-dark .code-with-filename .code-with-filename-file {
background-color: #555;
}

.code-with-filename .code-with-filename-file strong {
font-weight: 400;
}

.reveal.center .slide aside,
.reveal.center .slide div.aside {
position: initial;
}

section.has-light-background {
&,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $light-bg-text-color;
}
a,
a:hover {
color: $light-bg-link-color;
}
code {
color: $light-bg-code-color;
}
}

section.has-dark-background {
&,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $dark-bg-text-color;
}
a,
a:hover {
color: $dark-bg-link-color;
}
code {
color: $dark-bg-code-color;
}
}

#title-slide,
/* for when hash-type: number as identifier removed*/
div.reveal div.slides section.quarto-title-block {
text-align: $presentation-title-slide-text-align;
.subtitle {
margin-bottom: 2.5rem;
}
}

.reveal .slides {
text-align: $reveal-slide-text-align;
}

.reveal .title-slide h1 {
font-size: $revealjs-h2-font-size;
}

.reveal[data-navigation-mode="linear"] .title-slide h1 {
font-size: $revealjs-h1-font-size;
}

.reveal div.sourceCode {
border: $border-width solid $code-block-border-color;
border-radius: $border-radius;
}

.reveal pre {
width: 100%;
box-shadow: none;
background-color: $code-block-bg;
border: none;
margin: 0;
font-size: $revealjs-code-block-font-size;
line-height: $code-block-line-height;
font-family: $font-family-monospace-block;

code {
background-color: $body-bg; // Insure we color output and code cell differently
font-size: inherit;
color: $code-block-color;
font-family: inherit;
}

&.sourceCode code {
color: $code-block-color;
font-size: inherit;
background-color: inherit;
white-space: pre;
font-family: inherit;
padding: 6px 9px;
max-height: $code-block-height;
}
}

// Inside code-file-name div, we want to use the same background color as decorated codeblock header
// #9560
.reveal .code-with-filename .code-with-filename-file pre {
background-color: unset;
}

.reveal code {
color: $code-color;
font-size: $revealjs-code-inline-font-size;
background-color: $code-bg;
white-space: pre-wrap;
font-family: $font-family-monospace-inline;
}

.reveal .column-output-location {
display: flex;
align-items: stretch;
}

.reveal .column-output-location .column:first-of-type div.sourceCode {
height: 100%;
background-color: $code-block-bg;
}

.reveal blockquote {
display: block;
position: relative;
color: $border-color;
width: unset;
margin: var(--r-block-margin) auto;
padding: 0.625rem 1.75rem;
border-left: 0.25rem solid $text-muted;
font-style: normal;
background: none;
box-shadow: none;
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: block;
}

.reveal .slide aside,
.reveal .slide div.aside {
position: absolute;
bottom: 20px;
font-size: #{$presentation-font-smaller}em;
color: $text-muted;
}

.reveal .slide sup {
font-size: #{$presentation-font-smaller}em;
}

.reveal .slide.scrollable aside,
.reveal .slide.scrollable div.aside {
position: relative;
margin-top: 1em;
}

.reveal .slide aside .aside-footnotes {
margin-bottom: 0;
}

.reveal .slide aside .aside-footnotes li:first-of-type {
margin-top: 0;
}

$panel-sidebar-width: 270px;
$panel-sidebar-padding: 0.5em;

.reveal .layout-sidebar {
display: flex;
width: 100%;
margin-top: 0.8em;
}

.reveal .layout-sidebar .panel-sidebar {
width: $panel-sidebar-width;
}

.reveal .layout-sidebar-left .panel-sidebar {
margin-right: calc(#{$panel-sidebar-padding} * 2);
}

.reveal .layout-sidebar-right .panel-sidebar {
margin-left: calc(#{$panel-sidebar-padding} * 2);
}

.reveal .layout-sidebar .panel-fill,
.reveal .layout-sidebar .panel-center,
.reveal .layout-sidebar .panel-tabset {
flex: 1;
}

.reveal .panel-input,
.reveal .panel-sidebar {
font-size: 0.5em;
padding: $panel-sidebar-padding;
border-style: solid;
border-color: $input-panel-border-color;
border-width: $input-panel-border-width;
border-radius: $input-panel-border-radius;
background-color: $input-panel-bg;
}

.reveal .panel-sidebar :first-child,
.reveal .panel-fill :first-child {
margin-top: 0;
}

.reveal .panel-sidebar :last-child,
.reveal .panel-fill :last-child {
margin-bottom: 0;
}

.panel-input > div,
.panel-input > div > div {
vertical-align: middle;
padding-right: 1em;
}

.reveal p,
.reveal .slides section,
.reveal .slides section > section {
line-height: $revealjs-line-height;
}

// Smaller font size logic
.reveal {
// When smaller is set globally
&.smaller {
.slides {
// We make the all slide font-size smaller by a factor of $presentation-font-smaller
section {
font-size: #{$presentation-font-smaller}em;

    // avoid applying twice the reduction when using nested section
    section {
      font-size: inherit;
    }
  }

  // But we don't want headers to change size and they are in em
  h1 {
    @include undo-smaller-font-size($revealjs-h1-font-size);
  }
  h2 {
    @include undo-smaller-font-size($revealjs-h2-font-size);
  }
  h3 {
    @include undo-smaller-font-size($revealjs-h3-font-size);
  }
}

}

.slides section {
// when smaller is set on slide
&.smaller {
font-size: #{$presentation-font-smaller}em;

  // But we don't want headers to change size and they are in em
  h1 {
    @include undo-smaller-font-size($revealjs-h1-font-size);
  }
  h2 {
    @include undo-smaller-font-size($revealjs-h2-font-size);
  }
  h3 {
    @include undo-smaller-font-size($revealjs-h3-font-size);
  }
}

// On callout we want to make the font-size smaller too
div.callout {
  font-size: #{$presentation-font-smaller}em;

  // But we don't want headers to change size and they are in em
  h1 {
    @include undo-smaller-font-size($revealjs-h1-font-size);
  }
  h2 {
    @include undo-smaller-font-size($revealjs-h2-font-size);
  }
  h3 {
    @include undo-smaller-font-size($revealjs-h3-font-size);
  }
}

}
}

.reveal .columns > .column > :not(ul, ol) {
margin-left: 0.25rem;
margin-right: 0.25rem;
}

.reveal .columns > .column:first-child > :not(ul, ol) {
margin-right: 0.5rem;
margin-left: 0;
}
.reveal .columns > .column:last-child > :not(ul, ol) {
margin-right: 0;
margin-left: 0.5rem;
}

.reveal .slide-number {
color: $linkColorHover;
background-color: $body-bg;
}

.reveal .footer {
color: $text-muted;

a {
color: $linkColor;
}

&.has-dark-background {
color: quarto-color.scale($dark-bg-text-color, $whiteness: 30%);

a {
  color: quarto-color.scale($dark-bg-link-color, $whiteness: 30%);
}

}

&.has-light-background {
color: quarto-color.scale($light-bg-text-color, $whiteness: 30%);

a {
  color: quarto-color.scale($light-bg-link-color, $whiteness: 30%);
}

}
}

.reveal .slide-number {
color: $text-muted;

&.has-dark-background {
color: quarto-color.scale($dark-bg-text-color, $whiteness: 30%);
}

&.has-light-background {
color: quarto-color.scale($light-bg-text-color, $whiteness: 30%);
}
}

// handle caption for figures
.reveal .slide {
figure > figcaption,
img.stretch + p.caption,
img.r-stretch + p.caption {
font-size: #{$presentation-font-smaller}em;
}
}

@media screen and (min-width: 500px) {
$arrow-spacing: 0.2em;
$control-arrow-spacing: 1.4em;

.reveal .controls[data-controls-layout="edges"] .navigate-left {
left: $arrow-spacing;
}

.reveal .controls[data-controls-layout="edges"] .navigate-right {
right: $arrow-spacing;
}

.reveal .controls[data-controls-layout="edges"] .navigate-up {
top: $arrow-spacing * 2;
}

.reveal .controls[data-controls-layout="edges"] .navigate-down {
bottom: $arrow-spacing - $control-arrow-spacing + 3.5em;
}
}

.tippy-box[data-theme~="light-border"] {
background-color: $backgroundColor;
color: $mainColor;
border-radius: $border-radius;
border: solid $border-width $border-color;
font-size: 0.6em;
}

.tippy-box[data-theme~="light-border"] .tippy-arrow {
color: $border-color;
}

.tippy-box[data-placement^="bottom"] > .tippy-content {
padding: 7px 10px;
z-index: 1;
}

.reveal .panel-tabset [role="tab"] {
padding: 0.25em 0.7em;
}

.reveal .slide-menu-button .fa-bars::before {
background-image: url('data:image/svg+xml,');
}

.reveal .slide-chalkboard-buttons .fa-easel2::before {
background-image: url('data:image/svg+xml,');
}

.reveal .slide-chalkboard-buttons .fa-brush::before {
background-image: url('data:image/svg+xml,');
}

// This is a sentinel value that renderers can use to determine
// whether the theme is dark or light
@if (
quarto-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold
) {
/*! dark /
.reveal div.callout.callout-style-default .callout-title {
color: #222;
}
} @else {
/
! light */
}

/* override theme.scss style for the default styles

Note the need for both the case sensitive flag and the
case-oblivious selectors. This is a workaround for what's
apparently a Chrome and Safari bug:

#1902 (comment)
*/

.reveal ol[type="a"] {
list-style-type: lower-alpha;
}

.reveal ol[type="a" s] {
list-style-type: lower-alpha;
}

.reveal ol[type="A" s] {
list-style-type: upper-alpha;
}

.reveal ol[type="i"] {
list-style-type: lower-roman;
}

.reveal ol[type="i" s] {
list-style-type: lower-roman;
}

.reveal ol[type="I" s] {
list-style-type: upper-roman;
}

.reveal ol[type="1"] {
list-style-type: decimal;
}

// #2834
// temporary workaround while we come up with a pure CSS solution

.reveal ul.task-list {
list-style: none;
}
.reveal ul.task-list li input[type="checkbox"] {
width: 2em;
height: 2em;
margin: 0 1em 0.5em -1.6em;
vertical-align: middle;
}

// #3380

div.cell-output-display div.pagedtable-wrapper table.table {
font-size: 0.6em;
}

.reveal .code-annotation-container-hidden {
display: none;
}

.reveal code.sourceCode button.code-annotation-anchor,
.reveal code.sourceCode .code-annotation-anchor {
font-family: $font-family-monospace;
color: var(--quarto-hl-co-color);
border: solid var(--quarto-hl-co-color) 1px;
border-radius: 50%;
font-size: 0.7em;
line-height: 1.2em;
margin-top: 2px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}

.reveal code.sourceCode button.code-annotation-anchor {
cursor: pointer;
}

.reveal code.sourceCode a.code-annotation-anchor {
text-align: center;
vertical-align: middle;
text-decoration: none;
cursor: default;
height: 1.2em;
width: 1.2em;
}

.reveal code.sourceCode.fragment a.code-annotation-anchor {
left: auto;
}

.reveal #code-annotation-line-highlight-gutter {
width: 100%;
border-top: solid var(--quarto-hl-co-color) 1px;
border-bottom: solid var(--quarto-hl-co-color) 1px;
z-index: 2;
}

.reveal #code-annotation-line-highlight {
margin-left: -8em;
width: calc(100% + 4em);
border-top: solid var(--quarto-hl-co-color) 1px;
border-bottom: solid var(--quarto-hl-co-color) 1px;
z-index: 2;
margin-bottom: -2px;
}

.reveal code.sourceCode .code-annotation-anchor.code-annotation-active {
background-color: var(--quarto-hl-normal-color, #aaaaaa);
border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;
color: rgb(red($code-block-bg), green($code-block-bg), blue($code-block-bg));
font-weight: bolder;
}

.reveal pre.code-annotation-code {
padding-top: 0;
padding-bottom: 0;
code {
z-index: 3;
padding-left: 0px;
}
}

.reveal dl.code-annotation-container-grid {
margin-left: 0.1em;
dt {
margin-top: 0.65rem;
font-family: $font-family-monospace;
border: solid $body-color 1px;
border-radius: 50%;
height: 1.3em;
width: 1.3em;
line-height: 1.3em;
font-size: 0.5em;
text-align: center;
vertical-align: middle;

text-decoration: none;

}

dd {
margin-left: 0.25em;
}
}

/*

#4283

The trick itself is from here:

https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has

*/

.reveal .scrollable ol li:first-child:nth-last-child(n + 10),
.reveal .scrollable ol li:first-child:nth-last-child(n + 10) ~ li {
margin-left: 1em;
}

/* kbd rules */

kbd {
font-family: $font-family-monospace;
font-size: $kbd-font-size;
color: $kbd-color;
@include shift_to_dark(
"background-color",
shift-color($kbd-bg, 70%),
$kbd-bg
);
border: 1px solid;
border-color: $code-block-border-color;
border-radius: 5px;
padding: $kbd-padding-y $kbd-padding-x;
}

:root {
--r-inline-code-font: #{$font-family-monospace-inline};
--r-block-code-font: #{$font-family-monospace-block};
--r-inline-code-font-size: #{$revealjs-code-inline-font-size};
--r-block-code-font-size: #{$revealjs-code-block-font-size};
}

// _brand.yml rules

.reveal a {
font-weight: $link-weight;
background-color: $link-color-bg;
text-decoration: $link-decoration;
}

/* Callout styles */

.reveal div.callout {
margin-top: $callout-margin-top;
margin-bottom: $callout-margin-bottom;
border-radius: $border-radius;
overflow-wrap: break-word;

// Rules for both styles
&.callout-style-simple,
&.callout-style-default {
border-left: $callout-border-width solid #acacac;
border-right: solid 1px $table-border-color;
border-top: solid 1px $table-border-color;
border-bottom: solid 1px $table-border-color;

div {
  &.callout-body,
  &.callout-title {
    // Font size is inherited from the parent div.callout
    // which is scaled down like .smaller
    font-size: inherit;
    border-bottom: none;
    font-weight: 600;
  }

  &.callout-title {
    p {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
  }

  &.callout-title {
    display: flex;
    align-items: center;
  }
}

.callout-icon::before {
  height: 1.25em;
  width: 1.25em;
  background-size: 1.25em 1.25em;
}

&.callout-titled {
  .callout-body {
    > .callout-content {
      > :last-child {
        margin-bottom: var(--r-block-margin);
      }
      > :last-child:not(div.sourceCode) {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
      }
    }
  }
  .callout-icon::before {
    margin-top: 0.25em;
    padding-right: 0.25em;
  }
}

&.no-icon::before {
  display: none !important;
}

}

// Apply only to simple callout style which could have
// - a title or not
// - an icon or not
&.callout-style-simple {
padding: 0em 0.5em;
display: flex;

&.callout-titled {
  .callout-body {
    margin-top: 0.2em;
  }
  &:not(.no-icon) {
    .callout-content {
      padding-left: 1.6em;
    }
  }
  .callout-content {
    p {
      margin-top: 0;
    }
  }
}

&:not(.callout-titled) {
  .callout-body {
    display: flex;
  }
  .callout-icon::before {
    margin-top: var(--r-block-margin);
    padding-right: 0.5em;
  }
  .callout-body {
    > .callout-content {
      // Margin needs to be added when last child is div.sourceCode
      // Other code cell border is mixed with callout border
      > div.sourceCode:last-child {
        margin-bottom: 1rem;
      }
      > :first-child {
        margin-top: var(--r-block-margin);
      }
    }
  }
}

.callout-icon::before {
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
}

div {
  &.callout-title {
    opacity: 75%;
  }
  &.callout-body {
    font-weight: 400;
  }
}

}

// Apply only to default callout style which could have
// - a title (can't have no title)
// - an icon or not
&.callout-style-default {
&.callout-titled {
.callout-content {
p {
margin-top: 0.7em;
}
}
}

.callout-icon::before {
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
}

div {
  &.callout-body {
    font-weight: 400;
  }
  &.callout-title {
    opacity: 85%;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  &.callout-content {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

}

// FIXME: There is no body-container in revealjs so remove but before find what it was suppose to do
.callout-body-container {
flex-grow: 1;
}
}

/* Callout Types */

// Generate per callout type css to customize their appearance
// Define the callouts for which we should define styles
$callouts: (
// NOTE
"note":
(
"color": $callout-color-note,
"icon":
'',
),
// TIP
"tip":
(
"color": $callout-color-tip,
"icon":
'',
),
// WARNING
"warning":
(
"color": $callout-color-warning,
"icon":
'',
),
// CAUTION
"caution":
(
"color": $callout-color-caution,
"icon":
'',
),
// IMPORTANT
"important":
(
"color": $callout-color-important,
"icon":
'',
)
);

@each $name, $info in $callouts {
$shifted-color: #{shift-color(
quarto-map.get($info, "color"),
$callout-icon-scale
)};
$shifted-color-svg: str-replace($shifted-color, "#", "%23");

.reveal div.callout {
&.callout-#{$name} {
border-left-color: shift-color(
quarto-map.get($info, "color"),
$callout-border-scale
);
&.callout-style-default {
.callout-title {
@include shift_to_dark(
"background-color",
shift-color(quarto-map.get($info, "color"), 70%),
shift-color(quarto-map.get($info, "color"), -90%)
);
}
}
.callout-icon::before {
background-image: #{"url('data:image/svg+xml," +
str-replace(
quarto-map.get($info, "icon"),
'fill="currentColor"',
'style="fill: #{$shifted-color-svg}"'
) +
"');"};
}
}
}
}

// quarto-scss-analysis-annotation { "origin": "'rules' section from user-defined SCSS" }

$presentation-author-block-padding-left: if(
$presentation-title-slide-text-align != left,
0.5em,
0
);
$presentation-author-block-padding-right: if(
$presentation-title-slide-text-align != right,
0.5em,
0
);

.reveal {
.quarto-title-block {
.quarto-title-authors {
display: flex;
justify-content: $presentation-title-slide-text-align;

  .quarto-title-author {
    padding-left: $presentation-author-block-padding-left;
    padding-right: $presentation-author-block-padding-right;

    a,
    a:hover,
    a:visited,
    a:active {
      color: inherit;
      text-decoration: none;
    }

    .quarto-title-author-name {
      margin-bottom: 0.1rem;
    }

    .quarto-title-author-email {
      margin-top: 0px;
      margin-bottom: 0.4em;
      font-size: 0.6em;
    }

    .quarto-title-author-orcid {
      img {
        margin-bottom: 4px;
      }
    }

    .quarto-title-affiliation {
      font-size: 0.7em;
      margin-top: 0px;
      margin-bottom: 8px;
    }

    .quarto-title-affiliation:first {
      margin-top: 12px;
    }
  }
}

}
}

.left-column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 48%;
padding-right: 2%;
}

.right-column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 48%;
padding-left: 2%;
}

.cell-output-display {overflow-y:hidden!important;}

.boxed {
border-width:4px;
border-style:solid;
border-color:$main-color;
padding: 2.5% 5% 5%;
border-radius: 15px;
overflow: hidden;
margin-top: 0.6em;
margin-bottom: 0.6em;
}

.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: text-bottom;
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
color: $dark-bg-text-color !important;
background-color: $main-color;

a {
    color: $dark-bg-text-color !important;
}

}

.badge.fwd::after {
content: "\25B6";
display: inline-block;
margin-left: 0.5em;
font-size: 60%;
vertical-align: middle;
margin-bottom: 0.2em;
}

.badge.bwd::before {
content: "\25C0";
display: inline-block;
margin-right: 0.5em;
font-size: 60%;
vertical-align: middle;
margin-bottom: 0.2em;
}

.badge:hover {
background-color: mix($main-color, white, 70%)
}

figcaption {
text-align: center;
font-size: 60% !important;
}

pre {
font-size: 0.7em !important;
line-height: 1.5 !important;
}

ol ol {
list-style-type: lower-alpha !important;
}

ol ol ol {
list-style-type: lower-roman !important;
}

ul ul, ol ol {
margin-block-start: -0.2em !important;
font-size: 90% !important;
}

ul ul ul, ol ol ol {
margin-block-start: -0.2em !important;
font-size: 80% !important;
}

ul li, ol li {
padding-top: 0.3em;
margin-left: 0.5em;
}

ul ul li, ol ol li {
padding-top: 0.2em;
margin-left: 0.5em;
}

ul ul ul li, ol ol ol li {
padding-top: 0.1em;
margin-left: 0.5em;
}

li::marker {
font-variant-numeric: normal !important;
color: $main-color;
font-weight: 600;
}

aside {
font-size: 60%;
}

.aside-footnotes > li::marker {
font-weight: normal !important;
color: inherit !important;
}
.aside-footnotes > ul li, ol li, p {
padding-top: 0em !important;
margin-bottom: -0.5em !important;
}

strong {
color: $main-color;
font-size: 110%;
}

del {
text-decoration: none;
font-style: italic;
border-bottom: 4px solid;
border-bottom-color: $highlight-color;
}

figcaption {
color: lighten($body-color,20%);
}

h2, p {
padding-bottom: 0.5em;
}

h3 {
margin-top: -1.3em !important;
padding-bottom: 0.5em;
font-weight: normal!important;
font-style: italic;
font-size: 1em!important;
line-height: 1.2!important;
}

blockquote {
font-size: 80%;
}

img {
margin: 0 !important;
max-width: 100% !important;
max-height: 100% !important;;
}

#title-slide {

color: white;

.title {
    font-size: 2.2em;
    padding-top: 3.0em;
    text-align: left;
    line-height: 1.1 !important;
    color: white;
}
.subtitle {
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    line-height: 1.1 !important;
    margin-top: 0px !important;
    margin-bottom: 0.5em !important;
}
.quarto-title-authors {
    text-align: left;
    justify-content: left !important;
    font-size: 1em;
    line-height: 1.1 !important;
}
.quarto-title-author {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.date{
    text-align: left;
    margin-top: 0.8em;
    line-height: 1.1 !important;
}

}

.slide-number, .footer {
font-family: $font-family-sans-serif !important;
color: $main-color !important;
}

.slide-logo {
max-height: 7.5% !important;
}

.csl-entry {
text-indent: -4em;
margin-left: 3em;
margin-top: 0.6em;
}

.hanged {
text-indent: -3em;
margin-left: 3em;
color: #555;
}

.small {
font-size: 80%;
}

// quarto-scss-analysis-annotation { "origin": null }

</p>
</details> 

@rgouveiamendes
Copy link
Author

Discovered a misplaced ;. I am sorry!

@mcanouil mcanouil closed this as not planned Won't fix, can't repro, duplicate, stale Dec 18, 2024
@mcanouil mcanouil added support a request for support and removed bug Something isn't working labels Dec 18, 2024
@cscheid cscheid added enhancement New feature or request and removed support a request for support labels Dec 18, 2024
@cscheid cscheid self-assigned this Dec 18, 2024
@cscheid cscheid added this to the v1.7 milestone Dec 18, 2024
@cscheid
Copy link
Collaborator

cscheid commented Dec 18, 2024

I think we need to improve this error message.

@mcanouil mcanouil reopened this Dec 18, 2024
@mcanouil mcanouil added the themes Related to HTML theming or any other style related issue (like highlight-style) label Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request themes Related to HTML theming or any other style related issue (like highlight-style)
Projects
None yet
Development

No branches or pull requests

3 participants