From 3cd96f272c0209722108a607e737d736f78eb15d Mon Sep 17 00:00:00 2001 From: mxochicale Date: Sat, 20 Apr 2024 14:00:06 +0100 Subject: [PATCH] adds theme: [css/dark.scss] #28 --- quarto/templates/slides/css/dark.scss | 400 ++++++++++++++++++++++++++ quarto/templates/slides/index00.qmd | 4 +- 2 files changed, 402 insertions(+), 2 deletions(-) create mode 100644 quarto/templates/slides/css/dark.scss diff --git a/quarto/templates/slides/css/dark.scss b/quarto/templates/slides/css/dark.scss new file mode 100644 index 0000000..22989d7 --- /dev/null +++ b/quarto/templates/slides/css/dark.scss @@ -0,0 +1,400 @@ + +/*-- scss:defaults --*/ + +// colors +$dim-text: #777777; +$dim-color: #404040; +$mygrey-000: #1c1c1c; +$mygrey-010: #222222; +$mygrey-020: #282828; +$mygrey-030: #333333; +$mygrey-040: #444444; +$mygrey-050: #555555; +$mygrey-060: #666666; +$mygrey-070: #777777; +$mygrey-080: #888888; +$mygrey-090: #999999; +$mygrey-100: #b8b8b8; +$mygrey-999: #f8f8f8; + +$myred: #FF5252; +$myorange: #FD971F; +$myyellow: #FFFF00; +$mygreen: #63FF5b; +$myblue: #00CCFF; +$mypurple: #AE81FF; +$mypink: #FF67FF; + +// $green-text: #66BB6A; +$green-text: #07B875; +$red-text: #FF5252; +$blue-text: #29B6F6; +$orange-text: #FD971F; +$pink-text: #F06292; + +$body-bg: #1c1c1c; +$dim-text: #666666; +$body-color: #bdbdbd; + +$link-color: #42affa; +$italic-color: #89DDFF; +$strong-color: #FFFFFF; + +$interactive-accent-hsl: #FFFF00; +$text-selection: hsla(var($interactive-accent-hsl), 0.25); + +$selection-bg: rgba(255, 255, 0, 0.5); +$selection-color: #1c1c1c; + +// fonts +$font-family-sans-serif: "IBM Plex Sans", "Source Sans Pro", "Inter", Open Sans, Helvetica, sans-serif !default; +$font-family-monospace: "agave Nerd Font", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; + + +// line height +$presentation-font-family-line-height: 1.0em !default; +$presentation-line-height: 1.0em !default; + +// headings +$heading-color: #efefef; +$presentation-h1-font-size: 1.5em !default; +$presentation-h2-font-size: 1.33em !default; +$presentation-h3-font-size: 1.25em !default; +$presentation-h4-font-size: 1.1em !default; +$presentation-h5-font-size: 1.05em !default; +$presentation-h6-font-size: 1.0em !default; +$presentation-heading-color: $heading-color !default; +// headings +// $presentation-heading-line-height: 1.0em !default; +$presentation-heading-font-weight: 600 !default; +$presentation-h1-text-shadow: none !default; +$presentation-heading-text-shadow: none !default; +$presentation-heading-text-transform: none !default; +$presentation-heading-letter-spacing: normal !default; +$presentation-heading-font: IBM Plex Sans Condensed, Open Sans, Playfair Display, Helvetica, sans-serif, $font-family-sans-serif !default; + +// links +$link-color: #42affa !default; +$link-color-hover: $mypink !default; +$dark-bg-link-color: #42affa !default; + +// code blocks +// $code-block-border-color: lighten($body-color, 60%) !default; +// $dark-bg-code-color: #E599F7 !default; +$dark-bg-code-color: #ff67ff !default; +$code-block-bg: $body-bg !default; +$code-block-border-color: #222222 !default; +$code-block-font-size: 0.75em !default; + +// inline code +// $code-color: var(--quarto-hl-fu-color) !default; +$code-color: $dark-bg-code-color !default; +$code-bg: transparent !default; + +// tabset +// $tabset-border-color: $code-block-border-color !default; + +$presentation-font-size-root: 30px !default; + +$algcolor: #F783AC !default; +$algicon: url('data:image/svg+xml,') !default; +$algbg: #1c1c1c !default; + + +/*-- scss:rules --*/ + +// .reveal .slide aside .aside-footnotes { +// margin-bottom: 1em; +// } +// +// .reveal .slide aside .aside-footnotes li:first-of-type { +// position: absolute!important; +// bottom: 20px!important; +// margin-bottom: unset!important; +// font-size: 0.7em!important; +// color: $dim-text!important; +// } +// +// .reveal .slide aside, .reveal .slide aside .aside-footnotes .reveal .slide div.aside { +// position: absolute!important; +// bottom: 20px!important; +// margin-bottom: unset!important; +// font-size: 0.7em!important; +// color: $dim-text!important; +// } +// +// .reveal .slide aside, +// .reveal .slide aside .aside-footnotes +// .reveal .slide div.aside { +// position: absolute; +// bottom: 20px; +// // display: block; +// // margin: inherit; +// // padding-bottom: 1em!important; +// font-size: 0.7em; +// color: $dim-text; +// } +// .reveal .slide aside { +// position: absolute!important; +// bottom: 20px!important; +// margin-bottom: inherit; +// font-size: 0.7em!important; +// color: $dim-text!important; +// } +// .reveal.center .slide aside, .reveal.center .slide div.aside { +// position: absolute!important; +// bottom: 20px!important; +// font-size: 0.7em!important; +// color: $dim-text!important; +// } +// +// .reveal .slide.scrollable aside,.reveal .slide.scrollable div.aside { +// position: relative; +// margin-top: 1em +// } + +.reveal .slide aside .aside-footnotes { + // position: fixed!important; + // margin-top: 1em!important; + // bottom: 2px!important; + // font-size: 0.7em!important; + color: $dim-text!important; +} + +.reveal .slide sup { + font-size: 0.7em; +} + +.reveal em { + font-style: italic; + color: $italic-color; +} + +.reveal .slide-menu-button .fa-bars::before { + background-image: url('data:image/svg+xml,'); +} + +.reveal .callout.callout-style-simple { + padding: 0em 0.5em; + border-left: solid #acacac .3rem; + border-right: solid 1px silver; + border-top: solid 1px silver; + border-bottom: solid 1px silver; + display: flex; + // box-shadow: #000000 0px 0px 5px 10px; +} + +.reveal .callout.callout-style-simple .callout-body, +.reveal .callout.callout-style-default .callout-body, +.reveal .callout.callout-style-simple div.callout-caption, +.reveal .callout.callout-style-default div.callout-caption { + font-size: inherit; +} + +.reveal .callout.callout-style-default .callout-icon::before, +.reveal .callout.callout-style-simple .callout-icon::before { + height: 2rem; + width: 2rem; + background-size: 2rem 2rem; +} + +.reveal .callout.callout-captioned .callout-caption p { + margin-top: 0.5em; +} + +.reveal .callout.callout-captioned .callout-icon::before { + margin-top: 1rem; +} + +.reveal + .callout.callout-captioned + .callout-body + > .callout-content + > :last-child { + margin-bottom: 1rem; +} + +.reveal .callout.callout-titled .callout-icon::before { + margin-top: unset!important; +} + +.reveal .green-text { + color: $green-text; +} + +.reveal .yellow-text { + color: $myyellow; +} + +.reveal .red-text { + color: $red-text; +} + +.reveal .dim-text { + color: $dim-text; +} + +.reveal .purple-text { + color: $mypurple; +} + +.reveal .blue-text { + color: $blue-text; +} + +.reveal .orange-text { + color: $orange-text; +} + +.reveal .pink-text { + color: $pink-text; +} + +.reveal .note-green { + padding: 1pt 1pt 1pt 1pt; + border:1px solid #66BB6A; + border-radius:8px; + box-shadow: RGBA(0, 0, 0, 0.35) 0px 5px 15px; + background-color:#202020; + max-width: min-content; + min-width: max-content; + text-align:left; + margin-left: auto; + margin-right: auto; +} + +.reveal .callout.callout-style-default div.callout-title{ + font-size: 1.0em!important; +} +.callout-title { + font-size:1.0em!important; +} + +.reveal .callout-caution { + border: 1px solid #E599F7!important; +} + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + // margin: var(--r-block-margin) auto; + margin: inherit; + padding: 5px; + font-style: italic; + background: rgba(255,255,255,.05); + box-shadow: 0px 0px 2px rgba(0,0,0,.2) +} + +.reveal blockquote p:first-child,.reveal blockquote p:last-child { + display: inline-block +} + + +.reveal .callout.callout-titled .callout-icon::before { + height: -webkit-fill-available!important; +} + +.reveal .callout.callout-style-default .callout-icon::before, +.reveal .callout.callout-style-simple .callout-icon::before { + width: 1em!important; + height: 1em!important; + background-size: 1em 1em!important; +} + +.reveal .callout.callout-style-default div.callout-title { + font-size: 1.0em !important; +} + +.reveal small * { + vertical-align: baseline!important; +} + +.reveal blockquote { + border-radius: 4px!important; + display: block; + position: relative; + width: fit-content!important; + /* padding-left: 2pt; */ + /* padding-right: 2pt; */ + font-size: 0.8em; + font-style: italic; + color: $mygrey-080; + background-color: #1c1c1c; + border-left: 4px solid $mygrey-080!important; + // border: 1px solid $mygrey-060!important; + box-shadow: RGBA(0, 0, 0, 0.85) 0px 5px 15px!important; + // margin: var(--r-block-margin) auto; + // padding: 5px; + /* max-width: min-content + 20px; */ + /* min-width: max-content; */ + // margin-left: 5pt!important; + margin-right: revert!important; + padding: 0em 0.1em 0em 0.3em; + // display: -webkit-inline-box; +} + +.reveal .slide figure>figcaption { + text-align:center; +} + +.reveal figure>figcaption { + margin-top: 0.2em; +} + +.reveal boxed { + border-radius: 6px!important; + display: block; + position: relative; + width: fit-content!important; + font-size: 0.9em; + color: $mygrey-080; + background-color: #1c1c1c; + box-shadow: RGBA(0, 0, 0, 0.85) 0px 5px 15px!important; + margin-right: revert!important; + padding: 0em 0.1em 0em 0.3em; +} + +// .reveal .slide ul li, .reveal .slide ol li { +// margin-top: 0.2em!important; +// margin-bottom: 0.1em!important; +// } + +.hanging-indent div.csl-entry { + font-size: 0.9em; + margin-left: 2em; + text-indent: -2em!Important; +} + +.reveal .slide-chalkboard-buttons { + display: none!important; +} + +.slide-chalkboard-buttons.slide-menu-offset { + display: none!important; +} + +.reveal a:hover { + border-bottom: ridge; +} + + +.reveal .slide aside, .reveal .slide div.aside { + position: absolute; + bottom: 20px; + font-size: 0.7em; + color: #777777; +} + +hr { + color: #666666; + display: block; + unicode-bidi: isolate; + margin-block-start: 0.5em; + margin-block-end: 0.5em; + margin-inline-start: auto; + margin-inline-end: auto; + overflow: hidden; + border-style: inset; + border-width: 1px; +} diff --git a/quarto/templates/slides/index00.qmd b/quarto/templates/slides/index00.qmd index fc1359d..b275dac 100644 --- a/quarto/templates/slides/index00.qmd +++ b/quarto/templates/slides/index00.qmd @@ -11,10 +11,10 @@ format: controls-layout: bottom-right preview-links: auto logo: favicon.svg - theme: [default] + #theme: [default] # NOTES. white, beige, blood, league, serif, moon, night, dark, sky seem to work # NOTES. dark, solarized, simple, white seem not be created - theme: [css/syntax-dark.scss, css/dark-slides.scss] + theme: [css/dark.scss] #css: #- css/default.css #- css/callouts-html.css