munchboka-edutools 0.1.0__py3-none-any.whl

munchboka_edutools/static/css/figures.css

@@ -0,0 +1,274 @@
+.figure .caption {
+    text-align: left !important;
+}
+
+/* Prevents equations as svg-files to be clickable links */
+a.no-click {
+    pointer-events: none !important;
+}
+
+  
+.image .caption {
+    text-align: left !important;
+}
+
+
+.inline-image {
+    width: 35px; /* Fixed width */
+    height: auto; /* Maintain aspect ratio */
+    vertical-align: middle; /* Align with text */
+    border: 1px solid #006aff; /* Add a border */
+    border-radius: 8px !important; /* Rounded corners */
+}
+
+[data-mode="light"] .inline-image {
+    filter: invert(0%); /* Normal */
+}
+
+[data-mode="dark"] .inline-image {
+    filter: invert(100%) hue-rotate(180deg) !important; /* Invert colors for dark mode */
+    background-color: inherit !important;
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+    [data-mode="auto"] .inline-image {
+        filter: invert(100%) hue-rotate(180deg) !important; /* Invert colors for dark mode */
+        background-color: inherit !important;
+    }
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] .inline-image {
+        filter: invert(0%) !important; /* Normal */
+    }
+}
+
+
+/* CSS rules for logo */
+.navbar-brand img {
+    width: 150px; /* Adjust the width as needed */
+    height: auto; /* Maintain the aspect ratio */
+    border-radius: 16px;
+}
+
+
+
+/* Base styles for figures */
+.adaptive-figure img,
+.adaptive-figure svg {
+    /* background: transparent !important; 
+    background-color: inherit !important; */
+    transition: filter 0.1s ease; /* Smooth transition between modes */
+    max-width: 100%;
+    /* height: auto; */
+    display: block;
+    /* margin: 1em auto; */
+}
+
+/* Light mode (default) */
+[data-mode="light"] .adaptive-figure img
+[data-mode="light"] .adaptive-figure svg,
+[data-mode="light"] img.adaptive-figure {
+    filter: invert(0%); /* Normal */
+}
+
+/* Dark mode styles */
+[data-mode="dark"] .adaptive-figure img,
+[data-mode="dark"] .adaptive-figure svg,
+[data-mode="dark"] img.adaptive-figure {
+    filter: invert(100%) hue-rotate(180deg) !important;
+    /* background: transparent !important;  */
+    background-color: inherit !important;
+    /* background-color: #f2f2f2 !important; */
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+[data-mode="auto"] .adaptive-figure img ,
+[data-mode="auto"] .adaptive-figure svg,
+[data-mode="auto"] img.adaptive-figure {
+    filter: invert(100%) hue-rotate(180deg) !important;
+    background-color: inherit !important;
+    }
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] .adaptive-figure img
+    [data-mode="auto"] .adaptive-figure svg,
+    [data-mode="auto"] img.adaptive-figure {
+        filter: invert(0%) !important;
+    }
+}
+
+
+
+
+
+
+/* Base styles for manim gifs */
+.manim-figure img,
+.manim-figure svg {
+    background: transparent !important; /* Force transparent background */
+    background-color: inherit !important;
+    transition: filter 0.1s ease; /* Smooth transition between modes */
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1em auto;
+}
+
+/* Light mode (default) */
+[data-mode="light"] .manim-figure img {
+    filter: invert(100%); /* Normal */
+    filter: invert(100%) hue-rotate(180deg) !important; /* Invert colors for dark mode */
+}
+
+/* Dark mode styles */
+[data-mode="dark"] .manim-figure img,
+[data-mode="dark"] .manim-figure svg {
+    filter: invert(0%); /* Normal */
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+[data-mode="auto"] .manim-figure img {
+    filter: invert(0%) !important; /* Normal */
+}
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] .manim-figure img {
+        filter: invert(100%) !important;
+    }
+}
+
+
+
+
+
+
+
+/* Light mode (default) */
+[data-mode="light"] video {
+    filter: invert(0%) !important; /* Invert colors for dark mode */
+}
+
+/* Dark mode styles */
+[data-mode="dark"] video {
+    filter: invert(100%) hue-rotate(220deg); /* Normal */
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+[data-mode="auto"] video {
+    filter: invert(100%) hue-rotate(220deg) !important; /* Normal */
+}
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] video {
+        filter: invert(0%) !important; /* Invert colors for dark mode */
+    }
+}
+
+
+
+/* Light mode (default) */
+[data-mode="light"] video.manim-video {
+    filter: invert(100%) hue-rotate(220deg) !important; /* Invert colors for dark mode */
+}
+
+/* Dark mode styles */
+[data-mode="dark"] video.manim-video {
+    filter: invert(0%); /* Normal */
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+[data-mode="auto"] video.manim-video {
+    filter: invert(0%) !important; /* Normal */
+}
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] video.manim-video {
+        filter: invert(100%) hue-rotate(220deg) !important; /* Invert colors for dark mode */
+    }
+}
+
+
+
+
+.quiz-image-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.quiz-image {
+    max-width: auto;
+}
+
+
+figure.align-right {
+    margin-left: 0px !important;    /* Space between figure and text on the left */
+    margin-right: 0;      /* No margin on the right edge */
+    margin-top: 0;        /* Reduce top margin */
+    margin-bottom: 15px;  /* Some bottom margin for spacing */
+    padding: 0px !important;
+}
+
+
+svg.align-right {
+    margin-left: 0px !important;    /* Space between figure and text on the left */
+    margin-right: 0;      /* No margin on the right edge */
+    margin-top: 0;        /* Reduce top margin */
+    margin-bottom: 15px;  /* Some bottom margin for spacing */
+    padding: 0px !important;
+}
+
+
+
+
+
+
+/* Base styles for polynomial division figures */
+.polydiv-figure img {
+    background: transparent !important; /* Force transparent background */
+    transition: filter 0.3s ease; /* Smooth transition between modes */
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1em auto;
+}
+
+/* Light mode (default) */
+[data-mode="light"] .polydiv-figure img,
+    .polydiv-figure img {
+    filter: invert(0%); /* Normal */
+}
+
+/* Dark mode styles */
+[data-mode="dark"] .polydiv-figure img {
+    filter: invert(100%) hue-rotate(180deg) !important; /* Invert colors for dark mode */
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: dark) {
+[data-mode="auto"] .polydiv-figure img {
+    filter: invert(100%) hue-rotate(180deg) !important;
+}
+}
+
+/* Auto mode with system preference */
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] .polydiv-figure img {
+        filter: invert(0%) !important;
+    }
+}

munchboka_edutools/static/css/general_style.css

@@ -0,0 +1,74 @@
+/* Minimal default styles for munchboka-edutools */
+.quiz-main-container {
+  margin: 1rem 0;
+}
+.quiz-image.adaptive-figure {
+  max-width: 100%;
+  height: auto;
+}
+
+/* --- Figure and graph styles --- */
+
+/* Prevent any anchor marked no-click from being clickable (used by inline SVG figures) */
+a.no-click,
+.no-scaled-link {
+  pointer-events: none !important;
+}
+
+/* Container-level adaptive figure: ensure any contained raster/SVG scales responsively */
+.adaptive-figure img,
+.adaptive-figure svg,
+img.adaptive-figure,
+svg.graph-inline-svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Optional plot figure spacing */
+figure.plot-figure {
+  margin: 1em auto;
+}
+
+/* Theme-aware adjustment for dark mode when the theme sets data-mode on <html> */
+[data-mode="dark"] .adaptive-figure img,
+[data-mode="dark"] .adaptive-figure svg,
+[data-mode="dark"] img.adaptive-figure,
+[data-mode="dark"] svg.graph-inline-svg {
+  /* Invert for dark mode to preserve contrast of typical light-on-white math figures */
+  filter: invert(100%) hue-rotate(180deg) !important;
+  background: transparent !important;
+  background-color: inherit !important;
+}
+
+/* Auto mode follows system preference; keep same background behavior */
+@media (prefers-color-scheme: dark) {
+  [data-mode="auto"] .adaptive-figure img,
+  [data-mode="auto"] .adaptive-figure svg,
+  [data-mode="auto"] img.adaptive-figure,
+  [data-mode="auto"] svg.graph-inline-svg {
+    filter: invert(100%) hue-rotate(180deg) !important;
+    background: transparent !important;
+    background-color: inherit !important;
+  }
+}
+
+/* Explicit light mode (or default) keeps figures normal */
+[data-mode="light"] .adaptive-figure img,
+[data-mode="light"] .adaptive-figure svg,
+[data-mode="light"] img.adaptive-figure,
+[data-mode="light"] svg.graph-inline-svg {
+  filter: invert(0%) !important;
+}
+
+/* Allow opt-out by adding the class no-invert alongside adaptive-figure */
+.adaptive-figure.no-invert img,
+.adaptive-figure.no-invert svg,
+img.adaptive-figure.no-invert,
+svg.graph-inline-svg.no-invert,
+[data-mode="dark"] .adaptive-figure.no-invert img,
+[data-mode="dark"] .adaptive-figure.no-invert svg,
+[data-mode="auto"] .adaptive-figure.no-invert img,
+[data-mode="auto"] .adaptive-figure.no-invert svg {
+  filter: invert(0%) hue-rotate(0deg) !important;
+}

munchboka_edutools/static/css/github-dark-high-contrast.css

@@ -0,0 +1,141 @@
+/* General styles */
+.cm-s-github-dark-high-contrast.CodeMirror {
+    background-color: #0d1117;
+    color: #C9D1D9;
+  }
+  
+  /* Gutter styles */
+  .cm-s-github-dark-high-contrast .CodeMirror-gutters {
+    background: #0d1117;
+    border-right: 1px solid #C9D1D9;
+  }
+  
+  .cm-s-github-dark-high-contrast .CodeMirror-linenumber {
+    color: #6e7781;
+  }
+  
+  .cm-s-github-dark-high-contrast .CodeMirror-cursor {
+    border-left: 1px solid #C9D1D9;
+  }
+  
+  /* Highlighted line */
+  .cm-s-github-dark-high-contrast .CodeMirror-activeline-background {
+    background: #58a6ff70;
+  }
+  
+  /* Selection */
+  .cm-s-github-dark-high-contrast .CodeMirror-selected {
+    background: #58a6ff70;
+  }
+  
+  /* Token styles */
+  .cm-s-github-dark-high-contrast .cm-comment {
+    color: #d9dee3;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-error {
+    color: #ff9492;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-keyword {
+    color: #ff9492;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-atom {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-number {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-def {
+    color: #91cbff;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-variable {
+    color: #dbb7ff;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-variable-2 {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-variable-3 {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-property {
+    color: #91cbff;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-operator {
+    color: #72f088;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-punctuation {
+    color: #C9D1D9;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-string {
+    color: #91cbff;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-string-2 {
+    color: #91cbff;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-meta {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-qualifier {
+    color: #ff9492;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-builtin {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-bracket {
+    color: #C9D1D9;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-tag {
+    color: #72f088;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-attribute {
+    color: #ffb757;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-hr {
+    color: #C9D1D9;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-link {
+    color: #91cbff;
+  }
+  
+  /* Emphasis and Strong */
+  .cm-s-github-dark-high-contrast .cm-em {
+    font-style: italic;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-strong {
+    font-weight: bold;
+  }
+  
+  /* Generic */
+  .cm-s-github-dark-high-contrast .cm-error {
+    color: #ff9492;
+  }
+  
+  .cm-s-github-dark-high-contrast .cm-quote {
+    color: #d9dee3;
+  }
+  
+  /* Specific to f-strings in Python */
+  .cm-s-github-dark-high-contrast .cm-string-2 .cm-operator {
+    color: #C9D1D9; /* Ensure the operator in f-strings has the correct color */
+  }

munchboka_edutools/static/css/github-dark.css

@@ -0,0 +1,112 @@
+/* github-dark theme for CodeMirror */
+.cm-s-github-dark.CodeMirror {
+    background-color: #0d1117;
+    color: #e6edf3;
+  }
+  
+  .cm-s-github-dark .CodeMirror-gutters {
+    background-color: #0d1117;
+    border-right: 1px solid #30363d;
+  }
+  
+  .cm-s-github-dark .CodeMirror-linenumber {
+    color: #6e7681;
+  }
+  
+  .cm-s-github-dark .CodeMirror-cursor {
+    border-left: 1px solid #2f81f7;
+  }
+  
+  .cm-s-github-dark .CodeMirror-selected {
+    background: #6e768166;
+  }
+  
+  /* Token Colors */
+  .cm-s-github-dark .cm-comment {
+    color: #8b949e;
+    /* font-style: italic; */
+  }
+  
+  .cm-s-github-dark .cm-error {
+    color: #f85149;
+  }
+  
+  .cm-s-github-dark .cm-keyword {
+    color: #ff7b72;
+  }
+  
+  .cm-s-github-dark .cm-operator {
+    color: #ff7b72;
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-literal {
+    color: #a5d6ff;
+  }
+  
+  .cm-s-github-dark .cm-variable {
+    color: #e6edf3;
+  }
+  
+  .cm-s-github-dark .cm-punctuation {
+    color: #e6edf3;
+  }
+  
+  .cm-s-github-dark .cm-number {
+    color: #a5d6ff;
+  }
+  
+  .cm-s-github-dark .cm-string {
+    color: #a5d6ff;
+  }
+  
+  .cm-s-github-dark .cm-variable-2 {
+    color: #e6edf3;
+  }
+  
+  .cm-s-github-dark .cm-variable-3 {
+    color: #f0883e;
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-atom {
+    color: #79c0ff;
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-def {
+    color: #d2a8ff;
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-tag {
+    color: #7ee787;
+  }
+  
+  .cm-s-github-dark .cm-string-2 {
+    color: #a5d6ff;
+  }
+  
+  /* Generic Styling */
+  .cm-s-github-dark .cm-em {
+    font-style: italic;
+  }
+  
+  .cm-s-github-dark .cm-strong {
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-header {
+    color: #79c0ff;
+    font-weight: bold;
+  }
+  
+  .cm-s-github-dark .cm-quote {
+    color: #8b949e;
+    font-style: italic;
+  }
+  
+  .cm-s-github-dark .cm-link {
+    color: #79c0ff;
+    text-decoration: underline;
+  }

munchboka_edutools/static/css/github-light.css

@@ -0,0 +1,120 @@
+/* github-light theme for CodeMirror */
+.cm-s-github-light.CodeMirror {
+  background-color: #ffffff;
+  color: #24292f;
+}
+
+.cm-s-github-light .CodeMirror-gutters {
+  background-color: #ffffff;
+  border-right: 1px solid #d1d5da;
+}
+
+.cm-s-github-light .CodeMirror-linenumber {
+  color: #6e7781;
+}
+
+.cm-s-github-light .CodeMirror-cursor {
+  border-left: 1px solid #24292f;
+}
+
+.cm-s-github-light .CodeMirror-selected {
+  background: #0969da4a;
+}
+
+/* Token Colors */
+.cm-s-github-light .cm-comment {
+  color: #6e7781;
+  /* font-style: italic; */
+}
+
+.cm-s-github-light .cm-error {
+  color: #cf222e;
+}
+
+.cm-s-github-light .cm-keyword {
+  color: #cf222e;
+}
+
+.cm-s-github-light .cm-operator {
+  color: #116329;
+  font-weight: bold;
+}
+
+.cm-s-github-light .cm-literal {
+  color: #953800;
+}
+
+.cm-s-github-light .cm-variable {
+  color: #8250df;
+}
+
+.cm-s-github-light .cm-punctuation {
+  color: #24292f;
+}
+
+.cm-s-github-light .cm-number {
+  color: #953800;
+}
+
+.cm-s-github-light .cm-string {
+  color: #0550ae;
+}
+
+.cm-s-github-light .cm-attribute {
+  color: #953800;
+}
+
+.cm-s-github-light .cm-builtin {
+  color: #953800;
+}
+
+.cm-s-github-light .cm-variable-2 {
+  color: #116329;
+}
+
+.cm-s-github-light .cm-variable-3 {
+  color: #0550ae;
+  font-weight: bold;
+}
+
+.cm-s-github-light .cm-atom {
+  color: #0550ae;
+  font-weight: bold;
+}
+
+.cm-s-github-light .cm-def {
+  color: #0550ae;
+  /* font-weight: bold; */
+}
+
+.cm-s-github-light .cm-tag {
+  color: #116329;
+}
+
+.cm-s-github-light .cm-string-2 {
+  color: #0550ae;
+}
+
+/* Generic Styling */
+.cm-s-github-light .cm-em {
+  font-style: italic;
+}
+
+.cm-s-github-light .cm-strong {
+  font-weight: bold;
+}
+
+.cm-s-github-light .cm-header {
+  color: #0550ae;
+  font-weight: bold;
+}
+
+.cm-s-github-light .cm-quote {
+  color: #6e7781;
+  font-style: italic;
+}
+
+.cm-s-github-light .cm-link {
+  color: #116329;
+  text-decoration: underline;
+}