/* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */ /* A Canvas theme designed by Joe Sparano */ /* -- For the University of Nebraska Omaha */ /* -- Division of Innovative & Learning-Centric Initiatives */ /* -- © 2025 */ /* ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ */ /* ======================================== */ /* Variables */ /* ---------------------------------------- */ /* Colors */ /* -- Tinting technique → Temani @ https://stackoverflow.com/a/55330103 */ :root { /* White */ --uno-color--white: #ffffff; /* Black */ /* --uno-color--black: #3f4549; Matches Canvas Theme ‘Main Text Color’ */ --uno-color--black: #1e3556; --uno-color--black-tint: color-mix( in srgb, var(--uno-color--black), white 94.5% ); /* Blue */ --uno-color--blue: #366eb3; --uno-color--blue-tint: color-mix( in srgb, var(--uno-color--blue), white 92.75% ); /* Gold */ --uno-color--gold: #976500; /* More saturated */ --uno-color--gold-tint: #fdf7f0; /* Not using color-mix to add saturation */ /* Green */ --uno-color--green: #237d59; --uno-color--green-tint: color-mix( in srgb, var(--uno-color--green), white 92% ); /* Maroon */ --uno-color--maroon: #690011; --uno-color--maroon-tint: color-mix( in srgb, var(--uno-color--maroon), white 94% ); /* Neutral */ --uno-color--neutral: #533f36; --uno-color--neutral-tint: color-mix( in srgb, var(--uno-color--neutral), white 94.5% ); /* Red */ --uno-color--red: #d71920; /* UNO Red */ /* Unused colors */ --uno-color--teal: #0f8B8d; --uno-color--teal-tint: color-mix( in srgb, var(--uno-color--teal), white 91% ); --uno-color--sienna: #a0522d; --uno-color--sienna-tint: color-mix( in srgb, var(--uno-color--sienna), white 91% ); --uno-color--pink: #ff99c9; --uno-color--pink-tint: color-mix( in srgb, var(--uno-color--pink), white 91% ); --uno-color--rose: #a88fac; --uno-color--rose-tint: color-mix( in srgb, var(--uno-color--rose), white 91% ); } /* ---------------------------------------- */ /* Text Sizes */ :root { font-size: 16px; --uno-font-family--body: "Georgia", serif; --uno-font-family--bold: "Geologica", sans-serif; --uno-font-size--h1: 1.5rem; --uno-font-size--h2: var(--uno-font-size--h1); --uno-font-size--h3: 1.275rem; /* 85% × H2 */ --uno-font-size--h4: 1.14rem; --uno-font-size--p: 1.125rem; } /* ---------------------------------------- */ /* Measurements */ :root { --uno-width--max: 55rem; --uno-line-height--heading: 1.4; --uno-line-height--body: 1.625; --uno-border--radius: .3rem; --uno-border--outline: 1px; --uno-border--underline: 1px; --uno-border--divider: 2px; --uno-border--handle: .45rem; --uno-transition--hover: 0.25s; /* was .15s */ --uno-padding--minimal: clamp( 0.5rem, 1.75%, 1rem ); --uno-padding--slim: clamp( 0.75rem, 2.75%, 1.5rem ); --uno-padding--narrow: clamp( 1rem, 3.75%, 2rem ); --uno-padding--medium: clamp( 1.25rem, 4.375%, 2.5rem ); --uno-padding--wide: clamp( 1.5rem, 5%, 2.75rem ); /* ❌ Padding without clamp */ /* --uno-padding--minimal: 1.75%; --uno-padding--slim: 2.75%; --uno-padding--narrow: 3.75%; --uno-padding--medium: 4.375%; --uno-padding--wide: 5%; */ } /* ======================================== */ /* UNO CSS Wrapper */ /* CSS Reset */ .uno-css * { margin: 0; } /* -- Container */ .uno-css { color: var(--uno-color--black); box-sizing: border-box; container-type: inline-size; /* For Container Queries */ margin-top: 1.5rem; max-width: var(--uno-width--max); } /* -- Container v2 */ .uno-css.v2 { font-family: var(--uno-font-family--body); font-weight: 400; } /* -- Remove margin for all first/last elements */ .uno-css > :first-child { margin-top: 0; } .uno-css > :last-child { margin-bottom: 0; } /* ======================================== */ /* Canvas Elements */ /* ---------------------------------------- */ /* Canvas Elements :: H1 Headings */ h1, h2[data-testid="message_title"] /* Discussion H1 (tagged as H2) */ { font-family: var(--uno-font-family--bold); font-weight: 400 !important; /* Override Canvas default */ font-size: var(--uno-font-size--h2) !important; /* Override Canvas default */ color: var(--uno-color--black) !important; /* Override Canvas default */ } /* ---------------------------------------- */ /* Canvas Elements :: Modules */ /* Canvas Elements :: Modules :: Module Title :: Container */ .context_module .ig-header { background-color: var(--uno-color--neutral-tint) !important; /* Override Canvas default */ border-top-left-radius: var(--uno-border--radius); border-top-right-radius: var(--uno-border--radius); } /* Canvas Elements :: Modules :: Module Title :: Text */ .context_module .ig-header .name { font-family: var(--uno-font-family--bold); font-weight: 800; font-size: 1.02rem; line-height: var(--uno-line-height--heading); color: var(--uno-color--neutral); text-shadow: unset; } /* Canvas Elements :: Modules :: Text Headings (Module Subheads) :: Container */ .context_module_item.context_module_sub_header .ig-row, .context_module_item.context_module_sub_header .ig-row:hover { background-color: color-mix(in srgb, var(--uno-color--neutral), white 97.5%) !important; } /* Canvas Elements :: Modules :: Text Headings (Module Subheads) :: Text */ .context_module_item.context_module_sub_header h3 { font-family: var(--uno-font-family--bold); /* font-weight set below */ font-size: 1.03rem; line-height: var(--uno-line-height--heading); margin: .1rem 0 .1rem .8rem; color: var(--uno-color--neutral); } .context_module_item.context_module_sub_header .locked_title { color: var(--uno-color--neutral); font-weight: 600; /* Necessary for weight to take effect */ font-size: 1.02rem; } /* Canvas Elements :: Modules :: Row :: Hover */ .context_module .ig-row:hover { background-color: unset; /* background-color: color-mix(in srgb, var(--uno-color--neutral), white 97.5%); */ } /* Canvas Elements :: Modules :: Last Row */ .context_module_items .module-item-title { font-size: 1.02rem; } /* Canvas Elements :: Modules :: Last Row */ .context_module_items .context_module_item:last-child .ig-row { border-bottom-left-radius: var(--uno-border--radius); border-bottom-right-radius: var(--uno-border--radius); } /* ---------------------------------------- */ /* Canvas Elements :: Content */ /* Canvas Elements :: Content :: Wrapper */ .ic-Layout-contentMain { padding-top: 2rem !important; } /* Canvas Elements :: Content :: Previous/Next Buttons */ #module_navigation_target { margin-top: 2rem; } /* ---------------------------------------- */ /* Canvas Elements :: Discussions */ /* Canvas Elements :: Discussions :: Content :: Instructions Box */ .userMessage { margin-bottom: 1.25rem; /* Between Instructions and “Reply” button */ } /* ---------------------------------------- */ /* Canvas Elements :: Assignments */ /* Canvas Elements :: Assignments :: Wrapper */ #assignment_show .description.user_content, /* Standard assignment */ #assignment_show + .description.user_content { /* Assignment with H5P embed */ margin: 0 !important; /* Remove unnecessary margin */ overflow: visible; /* Force full height instead of showing scrollbars */ } /* ---------------------------------------- */ /* Canvas Elements :: Assignments :: External Tool */ /* Canvas Elements :: Assignments :: External Tool :: Container */ .tool_content_wrapper { padding: 1.55rem var(--uno-padding--wide) 0; /* Matches Blocks */ border: var(--uno-border--outline) solid color-mix( in srgb, var(--uno-color--black), white 85% ); border-radius: var(--uno-border--radius); margin-top: 1.25rem; /* Matches Blocks */ } /* Canvas Elements :: Assignments :: External Tool :: Heading */ /* -- Adding via JS */ .tool_content_wrapper .uno-css { margin-top: 0; } .tool_content_wrapper h3 { padding-bottom: .45rem; border-bottom: var(--uno-border--divider) dotted color-mix( in srgb, var(--uno-color--black), white 50% ); /* Matching H3s inside Blocks 😎 */ margin-bottom: 1.15rem !important; /* Override margin from `.uno-css > :last-child` */ } /* ---------------------------------------- */ /* Canvas Elements :: Unnecessary Additions */ /* YouTube Thumbnails */ .uno-css .media_comment_thumbnail { display: none; } /* External Link Icon */ .external_link_icon { display: none !important; /* Override inline display property */ } /* ======================================== */ /* Special */ /* Hidden Elements */ .uno-hide { display: none !important; } /* ======================================== */ /* Text */ /* All Headings */ .uno-css :is(h2, h3, h4, h5) { font-family: var(--uno-font-family--bold); font-weight: 800; letter-spacing: -.01em; line-height: var(--uno-line-height--heading); } /* ---------------------------------------- */ /* H2 Headings */ .uno-css h2 { font-size: var(--uno-font-size--h2); margin-top: 1rem; margin-bottom: 1rem; /* Override Canvas default */ clear: both; /* Clear previous floats to force full width */ letter-spacing: -.01em; } /* ---------------------------------------- */ /* H3 Headings */ .uno-css h3 { font-size: var(--uno-font-size--h3); margin-top: 1.95rem; margin-bottom: 1.15rem; } /* ---------------------------------------- */ /* H4 Headings */ .uno-css h4, .uno-css h5 { font-weight: 600; font-size: var(--uno-font-size--h4); margin-top: 1.3rem; margin-bottom: .4rem; } /* ---------------------------------------- */ /* Paragraphs (Default Text) */ .uno-css { font-weight: 400; font-size: var(--uno-font-size--p); line-height: var(--uno-line-height--body); } /* Paragraphs */ .uno-css p { margin-top: .5rem; margin-bottom: .65rem; } /* -- Siblings */ .uno-css p + p { margin-top: .7rem; } .uno-css h4 + p { margin-top: .5rem; } .uno-css h5 + p { margin-top: .5rem; } /* Strong */ .uno-css strong { font-family: var(--uno-font-family--bold); font-weight: 600; font-size: .95em; /* Reduce to match Georgia */ } /* Big Paragraphs */ p.uno-text--big { font-size: var(--uno-font-size--h4); } /* ======================================== */ /* Lists */ /* ---------------------------------------- */ /* -- Specifying .uno-css to avoid styling lists on other areas of the page */ /* -- Containers */ .uno-css :is(ul, ol) { font-size: var(--uno-font-size--p); line-height: calc( var(--uno-line-height--body) * .925 ); /* Tighter than Paragraphs */ margin-top: .6rem; margin-left: 1.5rem; margin-bottom: .75rem; } /* -- Nested */ .uno-css :is(ul, ol) :is(ul, ol) { margin-top: .35rem; margin-left: 1.5rem; margin-bottom: .5rem; } /* ---------------------------------------- */ /* Lists :: Items */ .uno-css li { line-height: var(--uno-line-height--body); } /* Lists :: Space Between Items */ .uno-css li + li { margin-top: .225rem; } /* ---------------------------------------- */ /* Lists :: Unordered List Items */ .uno-css ul li { /* list-style-type: circle; /* Always use hollow bullets */ } /* ---------------------------------------- */ /* Lists :: Ordered List Items */ .uno-css ol li::marker { font-size: .95em; } /* Add space between OL digit and Item */ .uno-css ol { margin-left: 1.5rem; } .uno-css ol li { padding-left: .4em; } /* ---------------------------------------- */ /* Lists :: Variations */ /* Lists in Tables */ .uno-css td :is(ul, ol) { margin-top: 0; margin-left: .5rem; } /* ======================================== */ /* Links */ /* ---------------------------------------- */ /* -- Specifying .uno-css to avoid styling lists on other areas of the page */ .uno-css a:is(:link, :visited) { color: inherit; text-decoration-line: underline; text-decoration-style: dotted !important; /* Override Canvas style */ text-decoration-thickness: var(--uno-border--underline); text-decoration-color: inherit; text-underline-offset: .2em; } .uno-css a:is(:hover, :active) { text-decoration-style: solid !important; /* Override Canvas style */ } /* ======================================== */ /* Horizontal Rules */ .uno-css hr { border: none; /* Unset border */ border-top: var(--uno-border--divider) dotted color-mix( in srgb, var(--uno-color--black), white 85% ); width: 100%; margin: 1rem auto 1.15rem; clear: both; /* Clear previous floats to force full width */ } /* Horizontal Rules :: 1st-Level */ .uno-css > hr { width: 90%; margin: 1.5rem auto; } /* Horizontal Rules :: in Blocks (1st Level) */ .uno-css .uno-block > hr { width: 80%; margin-top: 1.25rem; margin-bottom: 1.6rem; } /* ======================================== */ /* Highlights */ .uno-css mark { background-color: rgb(255 242 128); /* Default color / This can be overwritten with a background-color span assigned in the Canvas editor. */ padding: .125rem .3rem .175rem; border-radius: var(--uno-border--radius); } /* ======================================== */ /* Code */ /* ---------------------------------------- */ /* Code :: All Code */ .uno-css code { font-family: monospace; font-weight: normal; font-size: .9rem; line-height: var(--uno-line-height--body); /* color: var(--uno-color--white); */ color: color-mix( in srgb, var(--uno-color--blue), white 85% ); /* Adding contrast against pure white backgrounds for the Canvas Rich Content Editor */ background-color: var(--uno-color--black); border-radius: var(--uno-border--radius); } /* ---------------------------------------- */ /* Code :: In-Line Code NOT wrapped in a 
 tag */
.uno-css code:not(pre code) {
	padding: .35rem .5rem .35rem .5rem;
	margin-left: .2em;
	margin-right: .2em;
}

/* ---------------------------------------- */
/* Code :: Standalone Code */

.uno-css pre {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	/* Unstyling Canvas Defaults */
	padding: unset;
	border: none;
	background-color: unset;
}
.uno-css pre code {
	/* line-height: var(--uno-line-height--body); */
	display: block;
	white-space: pre;
	padding: .75rem 1rem .75rem 1.25rem;
	box-sizing: border-box;
	overflow-x: auto; /* Scroll only when overflowing */
	clear: both; /* Clear previous floats to force full width */
}

/* Code :: Standalone Code :: Adjacent */
.uno-css pre + pre {
	margin-top: -1rem;
}

/* ======================================== */
/* Canvas Equation Editor (LaTeX/MathJax) */

/* Space Between Paragraph & Equation */
p + .math_equation_latex { margin-top: 1rem; }

/* ======================================== */
/* Step Numbers */

/* Step Numbers :: Container */
.uno-number {
	/* May be adjusted below */
	font-size: .8em; /* May be changed below */
	border: 3px solid; /* Circle outline */
	padding-top: 0; /* Center digit vertically in circle */
	bottom: .1em; /* Center relative to text baseline */
	
	/* Always */
	font-family: var(--uno-font-family--bold); /* Override Canvas font */
	font-weight: 800;
	text-align: center;
	width: 1.75em; height: 1.75em; /* em scales with parent */
	color: inherit;
	box-sizing: border-box;
	border-radius: 50%; /* Circle */
	display: inline-block;
	margin-right: .35em;
	margin-left: -.15em; /* Negative offset for visual alignment */
	position: relative; /* Center relative to adjacent text */
}

/* Step Numbers :: Context Adjustments */
p .uno-number  {
	font-size: .65em;
	bottom: .05em; /* Center relative to text baseline */
}

/* ======================================== */
/* Pull Quotes */

/* -- Container */
[class*="uno-pullquote"] {
	padding: 2.5rem var(--uno-padding--wide) 2.25rem;
	background-color: var(--uno-color--neutral-black-6);
	border-radius: var(--uno-border--radius);
	box-sizing: border-box;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

/* -- Text */
[class*="uno-pullquote"] p {
	font-family: var(--uno-font-family--bold);
	font-weight: 600;
	font-size: var(--uno-font-size--h2);
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
	/* text-indent: -.5em; /* Negative offset to account for “ */
}

/* -- Pull Quote + Horizontal Rule */
[class*="uno-pullquote"] p:last-of-type:after {
	content: "";
	border-bottom: var(--uno-border--divider) dotted; /* Color set via Block colors */
	margin-top: 1.5rem;
	margin-left: auto; margin-right: auto; /* Center */
	width: 4.5rem;
	display: block;
}

/* -- Pull Quotes Sidebars */
[class*="uno-pullquote"][class*="--left"],
[class*="uno-pullquote"][class*="--right"] {
	padding: 2rem var(--uno-padding--medium) 1.65rem;
}
/* -- Smaller text */
[class*="uno-pullquote"][class*="--left"] p,
[class*="uno-pullquote"][class*="--right"] p {
	font-size: var(--uno-font-size--h3);
}

/* ======================================== */
/* Captions */

p.uno-caption {
	font-family: var(--uno-font-family--bold);
	font-weight: 400;
	font-size: .85rem !important; /* Always this size, regardless of context */
	line-height: calc( var(--uno-line-height--body) * .9 ); /* Reduce line height */
	opacity: .75; /* Affecting accessibility contrast ratio */
}

/* -- Margins media and Captions */
/* -- Image + Caption */
img + p.uno-caption { 
	margin-top: .65rem;
}
/* -- Video + Caption */
.uno-video .uno-video__iframe + p.uno-caption { 
	margin-top: .85rem;
}

/* ======================================== */
/* Images */

.uno-css img {
	height: auto; /* Retain proportion */
	box-sizing: border-box; /* Ensure width matches intent */
	display: block; /* block is consistent with other elements → Images are inline by default */
}
/* ❌ Move this into above after converting all courses to v2 */
.uno-css.v2 img {
	width: 100%;
	border-radius: calc( var(--uno-border--radius) * .6 );
}

/* ---------------------------------------- */
/* Reduce whitepoint for images with white borders */
/* -- Automatically differentiate white backgrounds from white borders */

[class*="uno-callout"] > [class*="uno-callout"] img, /* -- Images in nested Callouts */
.uno-accordion__panel > [class*="uno-callout"] img,
.uno-tabs__panel > [class*="uno-callout"] img,

[class*="uno-callout"] .uno-cards__card img, /* -- Images in nested Cards */
.uno-accordion__panel .uno-cards__card img,
.uno-tabs__panel .uno-cards__card img {
	filter: brightness(0.975) contrast(0.975);
}

/* ======================================== */
/* Videos */

/* ---------------------------------------- */
/* Videos :: Container */

.uno-video,
.uno-video--portrait {
	/* background-color: var(--uno-color--black-tint); /* ❌ */
	border-radius: var(--uno-border--radius);
	box-sizing: border-box; /* Ensure width matches intent */
	margin-top: 1.2rem;
}
/* Videos :: Container :: Portrait */
.uno-video--portrait {
	max-width: calc( var(--uno-width--max) * .40 ); /* Ensure portrait videos are a reasonable size */
}

/* ---------------------------------------- */
/* Videos :: Responsive */
/* -- via → W3Schools @ https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
/* -- Padding value changes dynamically with size of Video Container */

/* Videos :: Responsive ::