system.scss

/* General styles */

table caption {
	font-weight: bold;
	font-size: larger;
	color: var(--bs-emphasis-color, black);
}

.help-popup {
	cursor: pointer;
}

.font-sm {
	font-size: calc(var(--bs-body-font-size, 0.85rem) * 0.875);
}

.font-xs {
	font-size: calc(var(--bs-body-font-size, 0.85rem) * 0.8);
}

.required-field {
	color: #dc3545;

	[data-bs-theme='dark'] & {
		color: #f85149;
	}
}

.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
	z-index: 21;
}

$masthead-height: 70px !default;
$site-nav-width: 250px !default;

/* Banner */
.masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	height: $masthead-height;
	background-color: var(--bs-primary, #038);
	border-bottom: 1px solid var(--ww-layout-divider-color, #aaa);
	margin: 0;
	padding: 0;
	z-index: 20;

	@media only screen and (max-width: 768px) {
		position: static;
		flex-direction: column;
		height: unset;
	}

	a {
		color: var(--ww-primary-foreground-color, white);

		&:hover {
			text-decoration: none;
		}
	}

	.webwork-logo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 0.5rem;
		gap: 0.25rem;
		background-color: var(--ww-logo-background-color, #104aad);
		z-index: 20;
		width: $site-nav-width;

		img {
			max-height: $masthead-height - 15px;
			max-width: 100%;
		}

		@media only screen and (max-width: 768px) {
			height: 0.75 * $masthead-height;
			position: fixed;
			width: 100%;

			img {
				max-height: 0.75 * $masthead-height - 11px;
			}
		}

		a {
			display: inline-block;
		}
	}

	.institution-logo {
		display: flex;
		flex-grow: 1;
		gap: 2rem;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		max-height: $masthead-height - 1px;

		@media only screen and (max-width: 768px) {
			margin-top: 0.75 * $masthead-height;
		}

		img {
			max-height: $masthead-height - 15px;
			max-width: 100%;
		}

		a {
			display: block;
		}

		#color-scheme-chooser {
			--bs-btn-color: var(--ww-primary-foreground-color, white) !important;
			--bs-btn-hover-color: var(--ww-color-chooser-hover-color, #ccc);
			--bs-btn-active-color: var(--ww-color-chooser-hover-color, #ccc);
			--bs-btn-focus-shadow-rgb: var(--ww-color-chooser-focus-outline-color-rgb, 255, 255, 255);
			text-decoration: none;
		}
	}

	.login-status {
		flex-shrink: 1;
		height: $masthead-height - 1px;
		padding: 4px 10px 4px 0;
		color: var(--ww-primary-foreground-color, white);
		font-size: 0.85em;
		font-weight: normal;

		a {
			color: black;
		}
	}
}

/* Site Navigation */
#site-navigation {
	position: fixed;
	line-height: 1.2rem;
	width: $site-nav-width;
	left: 0;
	margin-top: $masthead-height;
	height: calc(100% - $masthead-height);
	overflow-x: hidden;
	overflow-y: auto;
	transition-property: left, border-right-width;
	transition-duration: 0.3s;
	border-right: 1px solid var(--ww-layout-divider-color, #aaa);
	padding: 2px;

	&.toggle-width {
		left: -20%;
		border-right-width: 0px;
	}

	@media only screen and (max-width: 768px) {
		top: 0;
		width: 40%;
		left: -40%;
		height: 100%;
		z-index: 100;
		background-color: white;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0;

		&.toggle-width {
			left: 0;
			box-shadow: 4px 0 4px 2px rgba(0, 0, 0, 0.2);
		}
	}

	a:not(.btn):focus {
		outline-width: 2px;
	}

	.info-box {
		border-radius: 0;
		border: none;
		border-top: 1px solid var(--ww-layout-divider-color, #aaa);
	}

	.nav {
		li {
			font-size: small;
		}

		.nav-item {
			max-width: 100%;

			.nav-link {
				padding-top: 0.2rem;
				padding-bottom: 0.2rem;

				&.active {
					background-color: var(--ww-site-nav-link-active-background-color, #038);
					color: var(--ww-primary-foreground-color, white);
				}
			}

			.nav-link:focus {
				position: relative;
				z-index: 2;
			}
		}
	}

	ul.nav {
		padding-right: 0;

		li a:hover {
			background: var(--ww-site-nav-link-hover-background-color, #e1e1e1);
		}

		ul.nav {
			padding-left: 0.5rem;
			padding-right: 0.5rem;
		}
	}

	hr.site-nav-separator {
		margin: 3pt 7pt;
		border: 1pt solid;
	}
}

#content {
	margin-left: $site-nav-width;
	transition-property: margin;
	transition-duration: 0.3s;
	margin-top: $masthead-height;
	width: calc(100% - $site-nav-width);

	*[id] {
		scroll-margin-top: $masthead-height;
	}

	&.toggle-width {
		width: 100%;
		margin-left: 0;
	}

	@media only screen and (max-width: 768px) {
		width: 100%;
		margin-top: 0;
		margin-left: auto;

		*[id] {
			scroll-margin-top: 0.75 * $masthead-height;
		}
	}
}

.no-scroll {
	height: 100%;
	overflow-y: hidden;
}

.sidebar-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 99;
	max-width: 100vw;
	max-height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

#toggle-sidebar {
	--bs-navbar-color: rgba(var(--ww-toggle-sidebar-icon-color-rgb, 255, 255, 255), 0.85);
	--bs-navbar-toggler-border-radius: 0.375rem;
	--bs-navbar-toggler-focus-width: 0.25rem;
	--bs-navbar-toggler-padding-x: 0.25rem;
	--bs-navbar-toggler-padding-y: 0.25rem;
	--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;

	&:hover {
		--bs-navbar-color: var(--ww-toggle-sidebar-icon-hover-color, #fff);
	}
}

/* Progress Bar */
.progress.set-progress {
	height: 25px;
	max-width: 100%;
	box-shadow: inset 0 0 3px 2px #000;
	background-color: #ddd;
	border-radius: 5px;
	margin-bottom: 10px;
	align-items: center;

	[data-bs-theme='dark'] & {
		box-shadow:
			inset 0 0 3px 2px #000,
			0 0 2px 1px #fff;
	}

	.progress-bar {
		box-shadow: inset 0 0 3px 2px #000;
		height: 100%;
		color: black;

		&.correct-progress {
			background-color: #8f8; /* same color used as 'correct' */
		}

		&.incorrect-progress {
			background-color: #ff9494; /* same color used as 'incorrect' */
		}

		&.inprogress-progress {
			background-color: #ff0; /* yellow */
		}

		&.unattempted-progress {
			background-color: transparent;
		}

		&:focus {
			outline: 0;
			box-shadow: inset 0 0 3px 2px #333;
			border: 3px solid black;
			z-index: 2;
		}
	}
}

/* Show me another */
div.showMeAnotherBox {
	color: #212529;
	background-color: #ede275;
	border-radius: 5px;
	border: 2px solid #fdd017;
	padding: 3px;
	margin-bottom: 0.5rem;
}

/* Breadcrumb */
#breadcrumb-navigation {
	.breadcrumb {
		display: flex;
		margin-bottom: 0;
		padding-left: 0.5rem;
		min-height: 38px;
		align-items: center;
		border: 1px solid var(--ww-layout-border-color, #e6e6e6);
		border-radius: 4px;
	}
}

/* Main Content */
h1.page-title {
	font-size: 31.5px;
	line-height: 35px;
	display: inline-block;

	& + a {
		font-size: 31.5px;
		line-height: 35px;
		margin-left: 0.5rem;
	}
}

.problem-sub-header {
	margin-top: 0.25rem;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.4;
}

.error-output {
	word-wrap: break-word;
	color: #d63384;
	font-size: 0.875rem;
	direction: ltr;
	font-family: monospace;
	font-size: 9pt;

	[data-bs-theme='dark'] & {
		color: var(--bs-danger-text-emphasis);
	}
}

/* Question nav section */
.sticky-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-content: space-between;
	justify-content: space-between;
	z-index: 19;
	position: sticky;
	top: $masthead-height;
	background-color: var(--bs-body-bg, white);
	margin-bottom: 1rem;
	padding: 0.25rem;
	margin-left: 0;
	width: 100%;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 0.1rem 0.2rem 1px gray;
	box-sizing: border-box;

	@media only screen and (max-width: 768px) {
		top: 0.75 * $masthead-height;
	}

	& > div {
		flex-shrink: 1;
		width: auto;
		margin: 0;
		padding: 0.25rem;
	}
}

.user-nav .student-nav-selector .dropdown-menu {
	max-height: 60vh;
	overflow-y: auto;
}

/* Message section */
.message:not(:empty) {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 0.5rem;

	div {
		margin: 0;
	}
}

.font-visible {
	font-weight: bold;
}
.font-hidden {
	font-style: italic;
}

.admin-messagebox {
	background-color: #ffffcc;
	width: 60%;
	padding: 10px;
	text-align: left;

	[data-bs-theme='dark'] & {
		background-color: #292900;
	}
}

/* Home Page */
ul.courses-list {
	list-style-type: none;
	margin: 0;

	a {
		border: 1px solid var(--ww-layout-border-color, #e6e6e6);
		display: block;
		padding: 0.5em;
		margin-bottom: 0.5em;
		background: #f6f6f6;
		width: 95%;
		font-weight: bold;

		[data-bs-theme='dark'] & {
			background: var(--bs-primary-bg-subtle, black);
			color: var(--bs-primary-text-emphasis, white);
		}

		&:hover {
			text-decoration: none;
			background: var(--bs-primary, #038);
			color: var(--ww-primary-foreground-color, white);
		}
	}
}

/* Instructor Tools page */
#instructor-tools-nav {
	input[name='number_of_students'] {
		max-width: 7em;
	}

	#pills-tabContent input.btn {
		min-width: 7em;
	}

	span.input-group-text {
		white-space: pre;
	}
}

/* past answers page */
.past-answer-table {
	td {
		white-space: nowrap;
		min-width: 20px;

		&.correct {
			color: #060;
		}

		&.incorrect {
			color: #600;
		}

		[data-bs-theme='dark'] & {
			&.correct {
				color: #0b0;
			}

			&.incorrect {
				color: #f66;
			}
		}
	}

	.table-rule {
		border-top: 3px solid var(--ww-layout-divider-color);
	}

	.essay,
	.comment {
		min-width: 400px;
		white-space: normal;
	}
}

/* Problem list and version list pages */
.problem_set_table {
	td a {
		font-weight: bold;
	}

	tr.gw-version td.gw-version {
		padding-left: 40px;
	}

	a.gw-parenthetical {
		font-weight: normal;
	}

	.hardcopy,
	.hardcopy-link {
		text-align: center;
	}

	/* These are for indenting problems on jitar sets */
	.nested-problem-1 {
		margin-left: 10px;
	}

	.nested-problem-2 {
		margin-left: 20px;
	}

	.nested-problem-3 {
		margin-left: 30px;
	}

	.nested-problem-4 {
		margin-left: 40px;
	}

	.nested-problem-5 {
		margin-left: 50px;
	}

	.nested-problem-6 {
		margin-left: 60px;
	}
}

/* These are for indenting problems on jitar sets */
.problem-list {
	.nested-problem-1 {
		padding-left: 20px;
	}

	.nested-problem-2 {
		padding-left: 23px;
	}

	.nested-problem-3 {
		padding-left: 26px;
	}

	.nested-problem-4 {
		padding-left: 29px;
	}

	.nested-problem-5 {
		padding-left: 32px;
	}

	.nested-problem-6 {
		padding-left: 35px;
	}
}

/* Info Box */
.info-box {
	padding: 0.5em;
	border-radius: 8px;
	border: 1px solid var(--ww-layout-border-color, #e6e6e6);

	h2,
	h3,
	h4,
	h5,
	h6 {
		background: var(--bs-primary, #038);
		border-radius: 8px;
		color: var(--ww-primary-foreground-color, white);
		margin: 0 0 0.5em 0;
		padding: 0;
		line-height: 30px;
		font-size: 1.1em;
		text-align: center;
	}

	dl {
		margin: 1ex 0.5em 1ex 1ex;
		padding: 0;
		font-size: 80%;
	}

	li,
	dt {
		line-height: 1.2rem;
	}

	dt {
		font-weight: bold;
	}

	dd {
		line-height: 1.2rem;
	}

	dd p {
		margin-top: 0;
	}

	a.more {
		float: left;
		font-size: 80%;
		font-style: italic;
		margin-bottom: 1ex;
		margin-right: 0.5em;
	}

	form {
		margin-bottom: 0;
	}
}

/* Library Browser */
.library-browser-table {
	.InfoPanel {
		text-align: center;
	}

	#library_sets {
		max-width: 50%;
	}

	.browse-lib-btn,
	.library-action-btn {
		width: 9.3rem;
	}

	.library-panel-btn {
		max-width: 9rem;
	}
}

.lb-problem-row div.card {
	background-color: #f5f5f5;
	margin-top: 10px;
	margin-bottom: 0;

	[data-bs-theme='dark'] & {
		background-color: var(--bs-primary-bg-subtle, 'black');
	}
}

.lb-mlt-group {
	border: 2px solid black;
	width: 100%;
	margin-top: 10px;

	div:first-child.lb-problem-row > div.card {
		margin-top: 0;
	}
}

.lb-problem-icons {
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 27.85px;
		height: 27.85px;

		img {
			max-height: 15px;
			max-width: 15px;
		}
	}
}

// Do not delete this.  Although it is a duplicate of the rule in PG's problem.scss file, webwork2 adds these author
// comments to the page (in the PG problem editor and the library browser) when the PG problems are in iframes and the
// comments are outside of the iframes.  Thus the styles in the problem.scss file do not apply.
div.AuthorComment {
	background-color: #00e0e0;
	color: black;
	padding: 0.25rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
}

/* Footer */
#footer {
	font-size: 0.8em;
	color: #767676;
	text-align: center;
	padding: 1em;
	margin-top: 1em;

	a {
		color: #555;
	}

	[data-bs-theme='dark'] & {
		color: #c6c6c6;

		a {
			color: #999;
		}
	}
}

input.changed[type='text'] {
	/* orange */
	border-color: #ca5000;
	outline: 0;
	outline: thin dotted \9;
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 8px rgba(202, 80, 0, 0.6);
	color: inherit;
}

.results-popover {
	cursor: pointer;
}

/* Styles for the instructor comment box */
.answerComments {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	padding: 2px 5px 2px 5px;
	max-width: 80%;
	background-color: #e8e8e8;
	border-style: outset;
	border-width: 1px;
	border-spacing: 2px;
	border-color: gray;
	border-radius: 0.25rem;

	[data-bs-theme='dark'] & {
		background-color: #4a4a4a;
		border-color: #939393;
	}
}

.submit-buttons-container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.25rem;
	row-gap: 0.25rem;
}

.visually-hidden-unfocusable {
	visibility: hidden;
	position: absolute;
	left: -9999px;
}

/* Styles used when editing a temporary file */
.temporaryFile {
	font-style: italic;
	color: #ca5000;
	background-color: inherit;

	[data-bs-theme='dark'] & {
		color: #ca8253;
	}
}

/* Text colors for Auditing, Current, and Dropped students */
.Audit {
	font-style: normal;
	color: purple;
}
.Enrolled {
	font-weight: normal;
}
.Drop {
	font-style: italic;
	color: #555;
}
.Observer {
	font-style: normal;
	color: green;
}

[data-bs-theme='dark'] {
	.Audit {
		color: #f400f4;
	}
	.Drop {
		color: #958888;
	}
	.Observer {
		color: #04a404;
	}
}

/* Styles for the PGProblemEditor Page */

#editor {
	.tab-content {
		min-height: 140px;
	}
}

#pgedit-render-area {
	border: 1px solid var(--ww-layout-border-color, #ddd);
	min-height: 400px;
	height: 600px;
	resize: vertical;
	display: flex;
	flex-direction: column;

	@media only screen and (max-width: 992px) {
		min-height: 200px;
		height: 300px;
	}

	#pgedit-render-iframe {
		flex-grow: 1;
		border: none;
		width: 100%;
	}
}

// Fix the style of the save file path input group.
// It is forced to be ltr, but the bootstrap rtl style makes that look wrong.
/* rtl:raw:
.editor-save-path.input-group > :first-child:not(.dropdown-toggle):not(.dropdown-menu) {
	border-bottom-left-radius: 0.2rem;
	border-top-left-radius: 0.2rem;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.editor-save-path.input-group >
:last-child:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0.2rem;
	border-top-right-radius: 0.2rem;
}
*/

/* Problem Set Detail */
#problem_set_form {
	input[name='add_n_problems'] {
		flex-basis: 50px;
	}
}

.problem_detail_row {
	background-color: #f5f5f5;

	.pdr_block_1 {
		row-gap: 0.25rem;

		.accordion-button {
			box-shadow: none;
			background-color: unset;
			padding: 0 0 0 0.5rem;
		}
	}

	.table {
		--bs-table-bg: #f5f5f5;
	}

	[data-bs-theme='dark'] & {
		background-color: var(--bs-primary-bg-subtle, 'black');

		.table {
			--bs-table-bg: var(--bs-primary-bg-subtle, 'black');
		}
	}
}

.pdr_placeholder {
	height: 50px;
	width: 100%;
	background-color: #e0e0e0;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
	margin-bottom: 1rem;
}

.pdr_handle {
	font-size: large;
}

.pdr_collapse {
	cursor: pointer;
	font-size: large;

	& > i {
		transition: 0.2s;
	}

	&:not(.collapsed) > i {
		transform: rotate(90deg);
	}
}

#psd_list {
	padding-left: 0;
	padding-bottom: 0.25rem;
	margin-bottom: 0;

	.psd_list_item {
		list-style-type: none;

		&.sortable-ghost {
			opacity: 0.5;
		}
	}

	&:not(.disable_renumber) .pdr_handle {
		cursor: move;
		touch-action: none;
	}

	ol.sortable-branch {
		padding-left: 0;
		margin-left: 2rem;
	}
}

.rpc_render_area_container {
	background-color: #f5f5f5;

	[data-bs-theme='dark'] & {
		background-color: var(--bs-primary-bg-subtle, 'black');
	}
}

.rpc_render_area iframe {
	width: 100%;
	border-radius: 5px;
}

/* Grades */
.grade-table {
	.grades-course-total,
	.grades-course-total th {
		font-weight: bold;
		font-size: 105%;
	}

	.problem-data {
		min-width: 2.5em;
		text-align: center;
	}

	span {
		&.correct {
			color: inherit;
			background-color: #8f8;
		}

		&.incorrect {
			color: #bf5454; /* red */
			background-color: inherit;
		}

		&.unattempted {
			color: inherit;
			background-color: #88ecff;
		}

		[data-bs-theme='dark'] & {
			&.correct {
				color: black;
			}

			&.incorrect {
				color: white;
				background-color: #bf5454;
			}

			&.unattempted {
				color: black;
			}
		}
	}
}

/* Course Configuration */
.config-tabs {
	button {
		&.nav-link {
			font-weight: bold;
			color: inherit;
			border-radius: 0;

			&:focus-visible {
				box-shadow: 0 0 0 0.25rem var(--ww-course-config-tab-link-focus-outline-color, #00338840);
			}
		}

		&:not(.active) {
			background-color: #f6f6f6;
		}

		&:not(.active):hover {
			background-color: #e1e1e1;
			color: inherit;
		}

		[data-bs-theme='dark'] & {
			&:not(.active) {
				background-color: #565656;
			}

			&:not(.active):hover {
				background-color: #414141;
			}
		}

		&:focus {
			z-index: 2;
		}
	}
}

/* Stats */

[data-bs-theme='dark'] .stats-image {
	text {
		fill: white;
	}
}

/* File manager */
.file-manager-btn {
	margin-bottom: 0.25rem;
	margin-top: 0.25rem;
}

.file-manager-editor {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

/* Problem set list */
.set_table .input-group .form-control {
	max-width: 10rem;
}

/* Problem graders */

#problem-grader-form {
	.needs-grading {
		background-color: #fff3cd;

		[data-bs-theme='dark'] & {
			background-color: #261d00;
		}

		div {
			font-weight: bold;
		}
	}

	.alt-source {
		background-color: #e6e7e9;

		[data-bs-theme='dark'] & {
			background-color: #555;
		}
	}

	.problem-grader-legend-key span {
		border: 1px solid var(--ww-layout-border-color);
	}

	.past-answer {
		&:not(:last-child) {
			border-bottom: 1px solid var(--bs-table-border-color);
			margin-bottom: 2px;
			padding-bottom: 5px;
		}

		&.correct {
			color: #060;
		}

		&.incorrect {
			color: #600;
		}

		[data-bs-theme='dark'] & {
			&.correct {
				color: #0b0;
			}

			&.incorrect {
				color: #f66;
			}
		}
	}

	.restricted-width-col {
		width: 0.1%;
	}

	.grader-comment-col {
		min-width: 300px;
	}
}

.problem-grader.accordion {
	.accordion-header {
		.accordion-button {
			--bs-accordion-btn-padding-x: 0.75rem;
			--bs-accordion-btn-padding-y: 0.375rem;
			--bs-accordion-btn-bg: var(--bs-primary, #038);
			--bs-accordion-btn-color: var(--ww-primary-foreground-color, white);
		}
	}
}

.problem-grader-table {
	.col-fixed {
		width: 11rem;
		min-width: 11rem;
		white-space: nowrap;
	}

	.problem-grader-message {
		font-weight: bold;
		transition: 3s ease-in all;
		padding-left: 0.5rem;
		padding-right: 0.5rem;

		&.alert-success,
		&.alert-danger {
			transition: none;
			border-radius: 3px;
			color: var(--bs-alert-color);
			background-color: var(--bs-alert-bg);
		}
	}

	.problem-score,
	.problem-points,
	.answer-part-score {
		width: 5.5rem;
	}
}

#problem-grader-form,
.problem-grader-table {
	.mv-container .mv-inner-container,
	.mq-latex-editor-container .mq-latex-editor-inner-container {
		width: 100%;
	}
}

mjx-help-background {
	z-index: 1055;
}

[data-bs-theme='dark'] .flatpickr-confirm {
	svg {
		fill: white;
	}
}