global.css

/* This file contains CSS rules that extend/overwrite the default rules set in the ximeraServer
 * 
 * As of 2024-11
 *  - this works only on the new (KULeuven-adapted) ximeraServer
 *  - this file (re-)translates labels into English
 *
 * In the (near?) future, this file should
 *   - be renamed xmHtmlStyle.css   (to sync with xmPreamble.tex and xmPrintStyle.sty)
 *   - become (almost) empty by default, because the ximeraServer default settings will becom English again
 */ 
 



/* *************************** Save, then use Ctrl F5 on the webpage whenever you make changes to this file. **********   */


/* ************************************** Changing the Font! ***********************************************   */


/* Adjust overall page sizing and color to match PDF proportions.  Change font size here. */
.main-activity {
    font-size: 22px !important;
    line-height: 1.75 !important;
    color: hsl(0, 0%, 10%) !important;
}

/* Keep paragraphs produced inside problems and theorem-like blocks at the normal lesson size. */
p.noindent,
.problem-environment p,
.problem-environment .noindent,
.theorem-like p,
.theorem-like .noindent {
    font-size: inherit !important;
    line-height: 1.55 !important;
}




/* *********************************** Done changing the font ****************************************** */

.xmhint::before {
    content: "Show hint" counter(hint_number, notfirst);
}
  
.xmhint.ui-state-active::before {
    content: "Hide hint " counter(hint_number, notfirst);
}
  
.xmoplossing::before {
    content: "Show solution";
}

.xmoplossing.ui-state-active::before {
    content: "Hide solution";
}

.xmoplossing-content::before {
    content: "Solution: ";
	font-weight: bold;
}

.xmuitkomst::before {
    content: "Show answer";
}

.xmuitkomst.ui-state-active::before {
    content: "Hide answer";
}

.xmuitkomst-content::before {
    content: "Answer: ";
	font-weight: bold;
}
.exercise::before {
	content: "exercise" attr(numbered) ".";
}
.definition::before {
	content: "definition" attr(numbered) ".";
}
.remark::before {
	content: "remark" attr(numbered) ".";
}
.proposition::before {
	content: "proposition" attr(numbered) ".";
}
.example::before {
	content: "example" attr(numbered) ".";
}
.warning::before {
	content: "warning" attr(numbered) ".";
}
.theorem::before {
     content: "theorem" attr(numbered) ".";
}
.explanation::before {
      content: "explanation" attr(numbered) ".";
}
.exploration::before {
      content: "exploration" attr(numbered) ".";
}
.formula::before {
      content: "formula" attr(numbered) ".";
}
.problem::before {
      content: "problem" attr(numbered) ".";
}
.notation::before {
      content: "notation" attr(numbered) ".";
}

/* Overwrite labels */ 
span.hint-text {
 display: none;
}

button.btn-reveal-hint::after {
 content: "Show hint";
}
button.btn-reveal-hint.oplossing::after {
 content: "Show solution";
}

.xmerase a span.xmhidden-small {
  display: none;
}

.xmerase a::after {
 content: "Clear";
}

span.show-check-text {
  display: none !important;
}

button.btn-ximera-check::after {
  content: "Check answer";
}

span.show-answer-text {
  display: none !important;
}

span.show-answer-large button.btn-ximera-show-answer::after {
  content: "Reveal answer";
}

#math-edit-button span {
  display: none;
}

button#math-edit-button::before {
  content: "Math Editor";
}


/* Vorige/volgende */
a.next-activity::before {
  content: "Next";
}
span#next-activity-label {
  display: none;
}
a.prev-activity::after {
  content: "Previous";
}
span#prev-activity-label {
  display: none;
}

.en-text {
      display: initial;
}
.nl-text {
      display: none;
}


/* Multi-Lingual Formatting */

.multiple-choice[titletext]::before {
	/* Numbered everything in CSS is causing trouble.  TeX should decide the numbering. */
	/* content:"${nameOfClass} " counter($counterToIncrement) ". ";*/
	content:attr(titletext);
}

/*
We setup the problem-environment(s) default display/title text next.
*/

/* Set the problem-environment default(s):
Note that, because there are a number of types, we need a "default" for each type - I don't know how to do this other than hard-code.
Also note: We may want to decide, as a team, what the default text should *actually* be, e.g. capitalize or not, spacing, etc.
*/

.problem::before {
	content:"problem" attr(numbered) ".";
 }

.exploration::before {
	content:"exploration" attr(numbered) ".";
 }

.exercise::before {
	content:"exercise" attr(numbered) ".";
 }

.question::before {
	content:"question" attr(numbered) ".";
 }
/*
If the problem environment(s) have the "titletext" attribute defined, then overwrite the above default with the newly defined default text.
Note: This is used to do automatic translation, but could also be used to change the default text in *any* way we would want,
e.g. use "P1", "Problem 1", "Prob 1", "Exciting Problem 1", etc.
*/
.problem-environment[titletext]::before {
	/* Numbered everything in CSS is causing trouble.  TeX should decide the numbering. */
	/* content:"${nameOfClass} " counter($counterToIncrement) ". ";*/
	content:attr(titletext) attr(numbered) ".";
}

.theorem-like[titletext]::before {
	content:attr(titletext);
}

.feedback[titletext]::before {
	content:attr(titletext) ": ";
}


/* Outcome Formatting */

.outcomeContent {
	/* display: none; */
	color: rgb(51, 0, 181);
}
.outcomeHead {
	text-align: center;
	font-weight: bold;
}
/* 	  
.outcomeHead:hover + .outcomeContent {
	display: block;
} */



/* **************************** Modifications made with the help of AI. ***************************** */
/* **************************** Save, then use CTRL F5 in HTML to apply changes. ***************************** */

/* ==========================================================================
   1. CORE MATH ENVIRONMENT PACING & SIZING
   ========================================================================= */

/* Removes default lavender background for Problem and uses Glaucous Blue */
div[titletext*="Problem"] {
  background-color: #fdfdfd !important;
  border-left: 8px solid #9fb4d3 !important;
  padding: 1.5em !important;
  color: #333 !important;
}

/* Explicit layout container block spacing before and after textbook elements */
.main-activity .problem-environment, 
.main-activity .theorem, .main-activity .definition, .main-activity .procedure, 
.main-activity .exercise, .main-activity .remark, .main-activity .warning, 
.main-activity .example, .main-activity .lemma, .main-activity .corollary, .main-activity .note,
.main-activity .theorem-environment, .main-activity .definition-environment, 
.main-activity .procedure-environment, .main-activity .warning-environment, 
.main-activity .example-environment, .main-activity .note-environment {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

/* Safely push content down after titles without touching global navigation or headings */
.main-activity .theorem > p:first-of-type,
.main-activity .definition > p:first-of-type,
.main-activity .procedure > p:first-of-type,
.main-activity .remark > p:first-of-type,
.main-activity .warning > p:first-of-type,
.main-activity .example > p:first-of-type,
.main-activity .note > p:first-of-type,
.main-activity .theorem-environment > p:first-of-type,
.main-activity .definition-environment > p:first-of-type,
.main-activity .procedure-environment > p:first-of-type {
  margin-top: 1.5rem !important;
  clear: both !important;
}

/* Keep all content at the normal lesson size even when it wraps or uses line breaks */
.problem-environment, 
.problem-environment p, 
.problem-environment .noindent, 
.problem-environment strong, 
.problem-environment em, 
.problem-environment a, 
.problem-environment li {
  font-size: 22px !important;
  line-height: 1.55 !important;
}

/* Let MathJax handle superscripts and degree symbols without clipping them */
.problem-environment .mathjax-inline, 
.problem-environment .mathjax-env, 
.problem-environment .MathJax, 
.problem-environment .MathJax span, 
.problem-environment .mjx-chtml, 
.problem-environment .mjx-container, 
.problem-environment .mjx-math {
  overflow: visible !important;
}

/* Adds consistent spacing AFTER paragraphs globally to keep text readable */
.main-activity p,
.problem-environment p, 
.problem-environment .noindent {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important; /* Space after each paragraph */
}

/* CRITICAL: Ensures the VERY FIRST paragraph inside a Problem stays tight to the title */
.problem-environment > p:first-of-type, 
.problem-environment > .noindent:first-of-type {
  margin-top: 0 !important;
}


/* ==========================================================================
   2. NESTED LISTS & ENUMERATIONS (ALPHA AND INDENTS)
   ========================================================================== */

/* Spacing before and after full lists inside the activity */
.main-activity ol, 
.main-activity ul {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Standard vertical breathing room between normal list items */
.main-activity li {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Force first level of lists inside a problem to use alpha labels: (a), (b), (c) */
.main-activity .problem ol {
  list-style-type: lower-alpha !important;
}
.main-activity .problem ol > li::marker {
  content: "(" counter(list-item, lower-alpha) ") " !important;
}

/* Dedicated vertical spacing separation between sub-parts of a problem (a, b, c...) */
.main-activity .problem ol > li {
  margin-bottom: 2.5rem !important;
}

/* Unstyled indent structures (Removes bullets from itemize nested in enumerations) */
.main-activity ol li ul {
  list-style-type: none !important;
}

/* Remove bullets from itemize lists inside a description environment */
.main-activity .description ul {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 1.5rem !important;
  margin-top: 0 !important;
}
.main-activity .description ul li {
  list-style-type: none !important;
  display: block !important;
}

/* Remove bullets from itemize lists inside any Problem environment */
.main-activity .problem ul {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 1.5rem !important;
}
.main-activity .problem ul li {
  list-style-type: none !important;
}


/* ==========================================================================
   3. MULTIPLE-CHOICE & SELECT-ALL LAYOUT FIXES (SAFE SELECTORS)
   ========================================================================== */

/* Target ONLY the true block container for multiple choice, leaving inline answers alone */
div.multiple-choice,
div.select-all {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  display: block !important;
  clear: both !important;
  text-align: left !important;
}

/* Format the header label inside the actual multiple choice blocks to be bold and small */
div.multiple-choice::before,
div.select-all::before {
  content: "Multiple Choice" !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  display: block !important;
  text-align: left !important;
  margin-bottom: 0.75rem !important;
}
/* For select-all question blocks, make the label match */
div.select-all::before {
  content: "Select All That Apply" !important;
  font-size: 1rem !important;
}

/* Target ONLY the spans that are direct children of the multiple choice block container */
div.multiple-choice > span.choice,
div.select-all > span.choice {
  display: inline-block !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  text-align: left !important;
}

/* Ensure inline verification answer layouts retain their native flexible positioning */
.problem-environment .form-inline,
.problem-environment .answer-container {
  display: inline-flex !important;
  vertical-align: middle !important;
}


/* ==========================================================================
   4. MISC LAYOUT MODULES
   ========================================================================== */

/* Adds spacing to anything inside a center environment */
.main-activity .center {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  display: block !important;
}

/* Adds vertical space before and after TikZ/Image environments */
.main-activity .image-environment {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  display: block !important;
}





/* Keep the title items inline on the same line */
.definition h5, .theorem h5, .procedure h5,
.environment-title, [class*="-title"] {
  display: inline !important;
}

/* Safely push content down after titles without touching global navigation or headings */
.main-activity .theorem > p:first-of-type,
.main-activity .definition > p:first-of-type,
.main-activity .procedure > p:first-of-type,
.main-activity .remark > p:first-of-type,
.main-activity .warning > p:first-of-type,
.main-activity .example > p:first-of-type,
.main-activity .note > p:first-of-type,
.main-activity .theorem-environment > p:first-of-type,
.main-activity .definition-environment > p:first-of-type,
.main-activity .procedure-environment > p:first-of-type {
  margin-top: 1.5rem !important;
  clear: both !important;
}





/* Adds consistent spacing AFTER paragraphs globally to keep text readable */
.main-activity p,
.problem-environment p, 
.problem-environment .noindent {
  margin-top: 0 !important;
  margin-bottom: 1.8rem !important; /* Space after each paragraph */
}



/* TOC CHANGES */

/* Changing color of TOC */
/* 1. THE PART BAR: Simple solid block */
.activity-card.part {
    background-color: #6082b6 !important;
    color: white !important;
    padding: 0.5rem 1.5rem !important; /* Shorter top/bottom padding, keeps wide side padding */
}

/* 2. THE SECTIONS: Glaucous and Orange on Click */
.activity-card.section {
    background-color: #9fb4d3 !important;
}
.activity-card.section.active,
.activity-card.section:active {
    background-color: #DD8A2E !important; 
}

/* 3. THE SUBSECTIONS: White and Orange on Click */
.activity-card.activity {
    background-color: #ffffff !important;
    border: 2px solid #6082b6 !important;
}
.activity-card.activity.active,
.activity-card.activity:active {
    background-color: #DD8A2E !important; 
}

/* 4. THE SIDEBAR: Tiered Blue (No teal) */
.sidebar, .nav-sidebar {
    background-color: #cfd9e9 !important;
}
.nav-sidebar ul.nav, .nav-sidebar .nav-second-level {
    background-color: #9fb4d3 !important;
}
.nav-sidebar li.active > a {
    background-color: #DD8A2E !important;
}


/* Removes the automatic number (1, 2, 3) from Part tiles */
.activity-card.part::before,
.card-sectionheading.part::before,
.part::before {
    content: none !important;
    display: none !important;
}

/* If the '1' is inside the tile text itself */
.activity-card.part .part-counter,
.activity-card.part [data-part-counter] {
    display: none !important;
}

/* ******** TOC Changes (Font and Spacing)  ******************* */

/* ==========================================================================
   TARGET THE ACTIVE ACTIVITY-CARDS TO INCREASE TOC FONT SIZE
   ========================================================================== */

/* 1. Scale up the text size for all structural activity cards in the TOC */
.activity-card,
.activity-card * {
    font-size: 17px !important; /* Forces the text inside the TOC cards up to 18px */
}

/* 2. Re-scale the part labels to match or sit slightly larger if desired */
.activity-card.part,
.activity-card.part * {
    font-size: 22px !important; 
}



/* ==========================================================================
   FORCE SPACE BETWEEN SUBSECTION NUMBERS AND TITLES
   ========================================================================== */

/* 1. Add horizontal padding inside the title anchor tags to separate numbers and text */
.activity-card a {
    padding-left: 12px !important; /* Creates a clean, protective gap between the 1.5.1 numbers and titles */
    display: inline-block !important;
}

/* 2. Alternative fix if the template uses a hidden inline separator span */
.activity-card span {
    margin-right: 10px !important;
}


.activity-title-center {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

.activity-title-center .title {
    display: inline-block !important;
    padding: 0.5rem 2rem !important;
}


/* Turn the entire header into a flexbox */
.main-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
}

/* Keep the logo/title on the left */
.main-title > a,
.main-title > span.title-xourse {
    margin-right: auto !important;
}

/* Order the header tools */
.xmdownload {
    order: 1 !important;
}

.xmsettings {
    order: 2 !important;
}

#math-edit-button {
    order: 3 !important;
}

.xmhelp {
    order: 4 !important; /* Contact LAST */
}


/* Put the arrows on the left and right of the orange bar */
.activity-title-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Keep the orange bar centered */
.activity-title-center {
    flex-grow: 1 !important;
    text-align: center !important;
}

/* Prevent arrows from stacking */
.activity-nav {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}


/* Turn the entire activity title area into a horizontal flexbox */
.activity-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Center the orange bar */
.activity-title-center {
    flex-grow: 1 !important;
    text-align: center !important;
    order: 2 !important;
}

/* Make the whole activity title area a flexbox */
.activity-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}



/* Make the activity title container relative */
.activity-title {
    position: relative !important;
}

/* Center the orange bar */
.activity-title-center {
    text-align: center !important;
}


/* Make the orange bar the positioning container */
.activity-title-center {
    position: relative !important;
    text-align: center !important;
    padding: 0 40px !important; /* space for arrows */
}

/* LEFT ARROW */
.xmprev {
    position: absolute !important;
    left: 0 !important;          /* now relative to the orange bar */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* RIGHT ARROW */
.xmnext {
    position: absolute !important;
    right: 0 !important;         /* now relative to the orange bar */
    top: 50% !important;
    transform: translateY(-50%) !important;
}



/* ******** Done with changes ********************************  */

/* ******** Save file, then use Ctrl F5 on webpage whenever you modify this file. **** */