133 lines
2.5 KiB
SCSS
133 lines
2.5 KiB
SCSS
/**
|
|
* Dracula Dark theme for reveal.js.
|
|
* Based on https://draculatheme.com
|
|
*/
|
|
|
|
|
|
// Default mixins and settings -----------------
|
|
@import "../template/mixins";
|
|
@import "../template/settings";
|
|
// ---------------------------------------------
|
|
|
|
|
|
|
|
// Include theme-specific fonts
|
|
$systemFontsSansSerif: -apple-system,
|
|
BlinkMacSystemFont,
|
|
avenir next,
|
|
avenir,
|
|
segoe ui,
|
|
helvetica neue,
|
|
helvetica,
|
|
Cantarell,
|
|
Ubuntu,
|
|
roboto,
|
|
noto,
|
|
arial,
|
|
sans-serif;
|
|
$systemFontsMono: Menlo,
|
|
Consolas,
|
|
Monaco,
|
|
Liberation Mono,
|
|
Lucida Console,
|
|
monospace;
|
|
|
|
/**
|
|
* Dracula colors by Zeno Rocha
|
|
* https://draculatheme.com/contribute
|
|
*/
|
|
html * {
|
|
color-profile: sRGB;
|
|
rendering-intent: auto;
|
|
}
|
|
|
|
$background: #282A36;
|
|
$foreground: #F8F8F2;
|
|
$selection: #44475A;
|
|
$comment: #6272A4;
|
|
$red: #FF5555;
|
|
$orange: #FFB86C;
|
|
$yellow: #F1FA8C;
|
|
$green: #50FA7B;
|
|
$purple: #BD93F9;
|
|
$cyan: #8BE9FD;
|
|
$pink: #FF79C6;
|
|
|
|
|
|
|
|
// Override theme settings (see ../template/settings.scss)
|
|
$mainColor: $foreground;
|
|
$headingColor: $purple;
|
|
$headingTextShadow: none;
|
|
$headingTextTransform: none;
|
|
$backgroundColor: $background;
|
|
$linkColor: $pink;
|
|
$linkColorHover: $cyan;
|
|
$selectionBackgroundColor: $selection;
|
|
$inlineCodeColor: $green;
|
|
$listBulletColor: $cyan;
|
|
|
|
$mainFont: $systemFontsSansSerif;
|
|
$codeFont: "Fira Code", $systemFontsMono;
|
|
|
|
// Change text colors against light slide backgrounds
|
|
@include light-bg-text-color($background);
|
|
|
|
// Theme template ------------------------------
|
|
@import "../template/theme";
|
|
// ---------------------------------------------
|
|
|
|
// Define additional color effects based on Dracula spec
|
|
// https://spec.draculatheme.com/
|
|
:root {
|
|
--r-bold-color: #{$orange};
|
|
--r-italic-color: #{$yellow};
|
|
--r-inline-code-color: #{$inlineCodeColor};
|
|
--r-list-bullet-color: #{$listBulletColor};
|
|
}
|
|
|
|
.reveal strong, .reveal b {
|
|
color: var(--r-bold-color);
|
|
}
|
|
|
|
.reveal em, .reveal i, .reveal blockquote {
|
|
color: var(--r-italic-color);
|
|
}
|
|
|
|
.reveal code {
|
|
color: var(--r-inline-code-color);
|
|
}
|
|
|
|
// Dracula colored list bullets and numbers
|
|
.reveal ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.reveal ul li::before {
|
|
content: "•";
|
|
color: var(--r-list-bullet-color);
|
|
display: inline-block;
|
|
width: 1em;
|
|
margin-left: -1em
|
|
}
|
|
|
|
.reveal ol {
|
|
list-style: none;
|
|
counter-reset: li;
|
|
}
|
|
|
|
.reveal ol li::before {
|
|
content: counter(li) ".";
|
|
color: var(--r-list-bullet-color);
|
|
display: inline-block;
|
|
width: 2em;
|
|
|
|
margin-left: -2.5em;
|
|
margin-right: 0.5em;
|
|
text-align: right;
|
|
}
|
|
|
|
.reveal ol li {
|
|
counter-increment: li
|
|
}
|