ExplainableAI/slides/_extensions/metropolis-theme/metropolis.scss

/*-- scss:defaults --*/

// fonts
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i);
@import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|JetBrains+Mono&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

$font-family-sans-serif: "Roboto", "Fira Sans", "Droid Serif", serif !default;
$font-family-monospace: "JetBrains Mono", "Fira Code", monospace;
$presentation-font-size-root: 32px;
$presentation-line-height: 1.5em;
$presentation-heading-font-weight: 400;

// colors
$body-bg: #fafafa !default;
$body-color: #000 !default;
// $link-color: #EB811B !default;
$selection-bg: #26351c;

// headings
// $presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
//   FreeSerif, serif !default;
// $presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

.reveal a {
	line-height: 1.5em;
	color: #eb811b;
	font-weight: 300;
}

.reveal .footer a {
	color: #eb811b !important;
}

.reveal p {
	font-weight: 300;
}

.reveal .slide ul li,
.reveal .slide ol li {
	font-weight: 300;
}

// maximum height of code blocks before scrolling is used
.reveal pre.sourceCode code {
	max-height: 700px; // default 500
}

// title slide
.title-slide {
	background-color: #fafafa;
	border-top: 80px solid #fafafa;
}

h1.title {
	color: #1a292c;
	font-size: 45px;
	text-shadow: none;
	font-weight: 400;
	text-align: left;
	margin-left: 15px;
	padding-top: 80px;
}
p.subtitle {
	// margin-top: -10px;
	// padding-bottom: -20px;
	color: #1a292c;
	text-shadow: none;
	font-weight: 300;
	font-size: 40px;
	text-align: left;
	margin-left: 15px;
}
p.author {
	color: #1a292c;
	text-shadow: none;
	font-weight: 300;
	font-size: 30px;
	text-align: left;
	margin-left: 15px;
	margin-bottom: -10px;
	margin-top: 0px;
}

p.date {
	color: #1a292c;
	text-shadow: none;
	font-weight: 300;
	font-size: 30px;
	text-align: left;
	margin-left: 15px;
	// margin-bottom: -30px;
}

p.subtitle:after {
	content: "";
	display: block;
	border: none;
	background-color: #eb811b;
	color: #eb811b;
	height: 1px;
	margin: 25px 0 25px;
}

// Section break slide
hr,
h1::after {
	content: "";
	display: block;
	border: none;
	background-color: #eb811b;
	color: #eb811b;
	height: 1px;
	margin: 1em 10px 0 10px;
}

// Override h1 style for title slide (remove section break slide style)
hr,
h1.title::after {
	content: "";
	display: block;
	border: none;
	background-color: transparent !important;
	color: transparent !important;
	height: 0px;
	margin: 0px !important;
}

h2::after.title {
	margin: 10px 15px 35px 0;
}

.reveal .slide-number a {
	font-size: 120%;
	background-color: #fafafa;
	border-radius: 12px;
	padding: 5px;
}

// inline
.reveal code {
	font-size: 70%;
	background-color: #afb8c133;
	color: #000;
	padding: 4px;
	border-radius: 6px;
}

// code blocks
.reveal div.sourceCode pre code {
	font-size: 100%;
}

// code output
.reveal pre code {
	font-size: 100%;
	padding-top: 15px;
}

.colored-column {
	border: 2px solid red;
	border-radius: 6px !important;
	padding: 10px;
	margin: 5px;
}

.column {
	// #column;
	// border: 2px solid red;
	border-radius: 10px !important;
	padding: 10px;
	margin: 5px;
	// background-color: #ededed;
	background-color: #eeeeee;
}

.reveal h2 {
	background-color: #23373b;
	padding: 5px 0px 5px 10px;
	color: #fafafa;
	border-radius: 12px;
}

.small-font {
	font-size: 70%;
}

iframe {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.center {
	text-align: center;
}

//
.reveal .slide-menu-button .fa-bars::before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(35, 55, 59)" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');
}

.reveal .slide-chalkboard-buttons .fa-easel2::before {
	padding-bottom: 6px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(35, 55, 59)" class="bi bi-easel2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a.5.5 0 0 1 .447.276L8.81 1h4.69A1.5 1.5 0 0 1 15 2.5V11h.5a.5.5 0 0 1 0 1h-2.86l.845 3.379a.5.5 0 0 1-.97.242L12.11 14H3.89l-.405 1.621a.5.5 0 0 1-.97-.242L3.36 12H.5a.5.5 0 0 1 0-1H1V2.5A1.5 1.5 0 0 1 2.5 1h4.691l.362-.724A.5.5 0 0 1 8 0ZM2 11h12V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5V11Zm9.61 1H4.39l-.25 1h7.72l-.25-1Z"/></svg>');
}

.reveal .slide-chalkboard-buttons .fa-brush::before {
	padding-bottom: 6px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(35, 55, 59)" class="bi bi-brush" viewBox="0 0 16 16"><path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"/></svg>');
}

.reveal .progress {
	color: #23373b;
}