Style Code Sheet
/* USER VARIABLES – Change these as desired */
// Textbox header icons
// Change the URLs to your preferred icons
// Note that the image URLs must be enclosed in single or double quotes
$learning-objectives-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/04/Icon_Objectives_White.png’;
$examples-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Team_White.png’;
$exercises-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Link_White.png’;
$key-takeaways-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Documents_White.png’;
$knowledge-check-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/04/Icon_Knowledge_Check_Black.png’;
$video-box-icon: ‘https://ecampusontario.pressbooks.pub/app/uploads/sites/6098/2025/05/Icon_Video_Black.png’;
//———————————————————————
/* STUDIO CONSTANTS & STYLES */
// leave these as is unless you want different styling than the studio defaults
// Border Radius
$border-radius-normal: 1em;
$border-radius-large: 2em;
$border-radius-rounded: 50%;
// Spacing & Padding
$padding-small: 10px;
$padding-medium: 15px;
$padding-large: 20px;$spacing-small: 10px;
$spacing-medium: 15px;
$spacing-large: 20px;// Breakpoints
$breakpoint-small: 576px; // Small devices (phones)
$breakpoint-medium: 768px; // Medium devices (tablets)
$breakpoint-large: 992px; // Large devices (desktops)
$breakpoint-xlarge: 1200px; // Extra-large devices// Box Shadow
$box-shadow-default: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Suppress screaming caps for section headers */
section.chapter header h1,
section.part header h1 {
text-transform: none !important;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
margin: $spacing-large 0 !important;
}
/* Suppress Pressbooks rendering
of chapter titles in screaming caps */
section.chapter header h1, section.part header h1 {
text-transform: none !important;
}
.front-matter header h1 {
text-transform: none !important;
}
.back-matter header h1 {
text-transform: none !important;
}
/* Make headings bold by default */
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
}
/* Underline style for page headings */
section.chapter header:not(.textbox__header),
section.front-matter header:not(.textbox__header),
section.back-matter header:not(.textbox__header) {
border-bottom: 1px solid #373d3f;
margin-bottom: 3.5em;
padding-bottom: 20px !important;
}
section.front-matter header:not(.textbox__header) h1 {
margin-bottom: 0 !important;
}
// Rounded Textboxes
.textbox {
border-radius: $border-radius-large !important;
font-size: inherit !important;
ul, li {
font-size: inherit !important;
}
p {
hyphens: none;
font-size: inherit !important;
}
/* Prevent Firefox from centering accordions inside textboxes */
details {
text-align: left;
padding-left: 0px;
margin-left: 0px;
}
.textbox__header {
border-radius: $border-radius-large $border-radius-large 0 0 !important;
display: flex;
align-items: center;
gap: $spacing-medium;
margin: 0;
}
.textbox__header::before {
content: ”;
display: block;
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
// Remove unnecessary margins for textbox titles
h2.textbox__title, h3.textbox__title, h4.textbox__title,
.textbox__header h2, .textbox__header h3, .textbox__header h4 {
margin: 0 !important;
}}
.textbox–examples .textbox__header::before {
background-image: url($examples-icon);
}
.textbox–exercises .textbox__header::before {
background-image: url($exercises-icon);
}
.textbox–key-takeaways .textbox__header::before {
background-image: url($key-takeaways-icon);
}
.textbox–learning-objectives .textbox__header::before {
background-image: url($learning-objectives-icon);
}
.textbox–knowledge-check .textbox__header::before {
background-image: url($knowledge-check-icon);
}
.textbox–video-box .textbox__header::before {
background-image: url($video-box-icon);
}
/* Knowledge Check Box */
.textbox–knowledge-check {
padding: 0 !important;
border: none !important;
}
.textbox–knowledge-check .textbox__header {
background-color: #ffbe00;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
}
.textbox–knowledge-check .textbox__title {
color: black;
}
.textbox–knowledge-check .textbox__content {
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
background-color: #efefef;
border-radius: 0 0 $border-radius-large $border-radius-large !important;
}
/* End of Knowledge Check Box */
/* Video Box */
.textbox–video-box {
padding: 0 !important;
border: none !important;
}
.textbox–video-box .textbox__header {
background-color: #ffbe00;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
}
.textbox–video-box .textbox__title {
color: black;
}
.textbox–video-box .textbox__content {
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
background-color: #efefef;
border-radius: 0 0 $border-radius-large $border-radius-large !important;
}
/* End of Video Box */
// Table Styles
table {
table-layout: fixed;
li {
font-size: 0.9em !important;
font-weight: normal !important;
line-height: 1 !important;
}
ul, ol {
margin-top: $spacing-large !important;
}td, th {
word-break: normal !important;
overflow-wrap: normal !important;
}
}
// Lightbox Images
.lity-content img {
background-color: white;
}
// Rounded Images
.rounded-image {
border-radius: $border-radius-large;
}
/////////Clean-up Mobile Image Alignments
.alignright,
.alignleft {
@media (max-width: 700px) {
float: none !important;
margin: 15px auto !important;
}}
// Don’t show elements that are print-only
.non-web {
display: none; //CHANGE THIS TO display: block; IN PDF AND EPUB
}
/* END OF STUDIO DEFAULT STYLING */
/* ADD CUSTOM STYLES AND SNIPPETS BELOW*/
//———————————————————-
/*Fancy Accordion*/
.fancy-accordion-wrapper {
margin-bottom: 60px;
position: relative;
}
.fancy-accordion {
margin-bottom: -45px;
border-radius: 15px;
border: 1px solid #0b6396;
background-color: #fff;
color: #000;
padding: 0;
overflow: visible;
}
.fancy-accordion > summary, .fancy-accordion > .summary {
padding: 10px;
font-size: 1.25em;
text-indent: 30px;
background-color: #0b6396;
list-style: none;
color: #fff;
border: none;
cursor: pointer;
border-radius: 10px 10px 10px 10px; }
.fancy-accordion > .summary {
border-radius: 10px 10px 0px 0px;
font-weight: bold;
}
details.fancy-accordion[open] > summary {
border-radius: 10px 10px 0 0;
}
.fancy-accordion > .collapsed {
padding: 20px;
margin-bottom: 10px;
}
details.fancy-accordion > .collapsed {
display: none;
}
details.fancy-accordion[open] > .collapsed {
display: block;
animation: details-show 750ms ease-in-out;
}
// The Rotating Marker
details.fancy-accordion > summary::marker {
display: none;
content: “”; }
details.fancy-accordion > summary::before {
content: “▶”;
left: -0.6em;
position: absolute;
transform: rotate();
transform-origin: 70% 50%;
transition: 0.2s transform ease; }
details.fancy-accordion[open] > summary:before {
transform: rotate(90deg);
transform: ease 1s; }
// The Sliding Summary
@keyframes details-show {
from {
opacity: 0;
transform: var(–details-translate, translateY(-0.5em)); } }
details[open] iframe {
animation: refresh 0.2s;
}
@keyframes refresh {
from {
transform: scale(0.99);
}
to {
transform: scale(1);
}
}
/* End of Fancy Accordion */
/* Step Boxes */
.stepbox {
border: 2px solid #227dac; //Step content border color
padding: 15px;
margin: 30px 0;
display: flex;
flex-direction: column;
border-radius: 10px;
position: relative;
background-color: #efefef; //Step content background color
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.step-number h2, .step-number h3, .step-number h4 {
margin: 0;
}.step-number > :first-child {
font-size: 1.3em; //optionally resize the font
color: white; //heading color
margin: 0 !important;
padding: 0 !important;
}
.step-number {
//font-size: 1.5em; //use this to adjust the font size
color: white;
background-color: #227dac; //Step number background color
width: fit-content;
z-index: 1;
line-height: 40px;
text-align: center;
border-radius: 2em;
display: flex;
align-items: center;
justify-content: center;
margin-top: -32px;
margin-left: -30px;
padding: 2px 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* End of Step Boxes */
/*Box Chart*/
.box-chart {
margin: 0 auto;
margin-top: 10px;
}
.box-chart > .title {
text-align: center;
}
.box-row {
display: flex;
flex-direction: row;
margin-bottom: 10px
}
.box-container-rounded {
padding: 10px;
margin-right: 10px;
flex: 1;
}
@media screen and (max-width: 500px) {
.box-row {
flex-direction: column;
margin-bottom: 0;
}
.box-container-rounded {
margin-right: 0;
margin-bottom: 10px;
}
}
/*End of Box Chart*/
