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
 */ 

 /* Fixes for expandables (hints/solution/...) */

.btn-reveal-hint {
    float: none;
    clear: none;
    margin-top: 0em;
	  display: block;
    margin-left: auto;
    z-index: 1;
    position: relative;
}

 
.xmhint, .xmoplossing, .xmuitkomst  {
	background-color: #1D8DB0;
	color: white;
	font-family: sans-serif;
	font-weight: normal;
	font-size: smaller;
	margin: 1px !important;
	margin-left: auto !important;
	display: block;
	/* max-width: max-content; */
	max-width: 10em !important;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 0px !important;
	font-size: 1rem;
	transition: all 0.2s ease-in-out;
	counter-increment: hint_number;
}

/* increase specificity with double classes ;) */
div.xmhint-content.ui-accordion-content {
	background-color: #00000000; /* transparent; overwrites .ui-widget-content ... */
	border: 1px solid #005000;
	border-top: 1px solid #005000 !important;
	border-left: 3px solid #005000;
	color:   #005000;
	margin-top: 0rem;
	padding: 2px 3rem;
	overflow: visible;    /* set to auto for .ui-accordion .ui-accordion-content in <style> */
}

div.xmhint-content::before {
	 content: "Hint: ";
	 font-weight: bold;
	 margin-left: -3rem;    /* Hack, see padding above ... */
 }
 


div.xmoplossing-content.ui-accordion-content, div.xmuitkomst-content.ui-accordion-content {
	background-color: #00000000; /* transparent; overwrites .ui-widget-content ... */
	background-color: white;
	border: 1px solid black;
	border-left: 3px solid black;
	color:  black;
	margin-top: 0rem;
	padding: 5px;
}
/* 
@counter-style notfirst {
	system: alphabetic;
	symbols: " " "2" "3" "4" "5" "6" "7" "8" "9" "0";
}
  
.example, .exercise, .question {
    counter-reset: hint_number;
}
 */

/* Fixes for language ?? */ 

 
.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(probnum) ".";
}
.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(probnum) ".";
}
.formula::before {
      content: "formula" attr(numbered) ".";
}
.problem::before {
      content: "problem" attr(probnum) ".";
}
.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(probnum) ".";
 }

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

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

.question::before {
	content:"question" attr(probnum) ".";
 }
/*
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(probnum) ".";
}

.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;
} */




 .desmos-placeholder {
    max-width: 100%;
    overflow: scroll;
    display: inline-block;
    vertical-align: middle;
	resize: both;
}
 
.xmdesmos img{
    max-width: 100%;
    overflow: scroll;
    display: inline-block;
    vertical-align: middle;
}


.img-container {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.img-container img {
  display: block;
  max-width: 300px;
  border: 1px solid #ccc;
}

.img-container button.hide-btn,
.img-container button.show-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}

.img-container button.show-btn {
  display: none;
}