munchboka-edutools 0.2.3__py3-none-any.whl

munchboka_edutools/static/css/figures.css

@@ -0,0 +1,321 @@
+.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;
+    }
+}
+
+
+/* Plot-specific SVG styles (graph-inline-svg class) */
+svg.graph-inline-svg {
+    transition: filter 0.1s ease; /* Smooth transition between modes */
+    max-width: 100%;
+    display: block;
+}
+
+/* Light mode for plot SVGs */
+[data-mode="light"] svg.graph-inline-svg {
+    filter: invert(0%); /* Normal */
+}
+
+/* Dark mode for plot SVGs - invert colors for better visibility */
+[data-mode="dark"] svg.graph-inline-svg {
+    filter: invert(100%) hue-rotate(180deg) !important;
+    background-color: inherit !important;
+}
+
+/* Auto mode with system preference for plot SVGs */
+@media (prefers-color-scheme: dark) {
+    [data-mode="auto"] svg.graph-inline-svg {
+        filter: invert(100%) hue-rotate(180deg) !important;
+        background-color: inherit !important;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    [data-mode="auto"] svg.graph-inline-svg {
+        filter: invert(0%) !important;
+    }
+}
+
+
+/* Additional specificity for plot figures */
+.plot-figure svg.graph-inline-svg {
+    max-width: 100%;
+    height: auto;
+}
+
+[data-mode="dark"] .plot-figure svg.graph-inline-svg {
+    filter: invert(100%) hue-rotate(180deg) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-mode="auto"] .plot-figure svg.graph-inline-svg {
+        filter: invert(100%) hue-rotate(180deg) !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/flashcards.css

@@ -0,0 +1,219 @@
+:root {
+  --flashcard-bg: #ffffff;
+  --flashcard-border: #d1d5db;
+  --flashcard-shadow: rgba(15, 23, 42, 0.12);
+  --flashcard-text: #111827;
+  --flashcard-muted: #6b7280;
+  --flashcard-accent: #0ea5e9;
+  --flashcard-accent-soft: rgba(14, 165, 233, 0.08);
+  --flashcard-control-bg: #f9fafb;
+  --flashcard-control-border: #d1d5db;
+}
+
+[data-mode="dark"] {
+  --flashcard-bg: #020617;
+  --flashcard-border: #1f2937;
+  --flashcard-shadow: rgba(15, 23, 42, 0.7);
+  --flashcard-text: #e5e7eb;
+  --flashcard-muted: #9ca3af;
+  --flashcard-accent: #38bdf8;
+  --flashcard-accent-soft: rgba(56, 189, 248, 0.15);
+  --flashcard-control-bg: #020617;
+  --flashcard-control-border: #374151;
+}
+
+[data-mode="auto"] {}
+
+@media (prefers-color-scheme: dark) {
+  [data-mode="auto"] {
+    --flashcard-bg: #020617;
+    --flashcard-border: #1f2937;
+    --flashcard-shadow: rgba(15, 23, 42, 0.7);
+    --flashcard-text: #e5e7eb;
+    --flashcard-muted: #9ca3af;
+    --flashcard-accent: #38bdf8;
+    --flashcard-accent-soft: rgba(56, 189, 248, 0.15);
+    --flashcard-control-bg: #020617;
+    --flashcard-control-border: #374151;
+  }
+}
+
+.flashcards-root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+
+.flashcards-card-shell {
+  display: flex;
+  justify-content: center;
+}
+
+.flashcards-card {
+  position: relative;
+  width: min(640px, 100%);
+  min-height: 160px;
+  padding: 1.5rem 1.75rem;
+  border-radius: 0.9rem;
+  border: 1px solid var(--flashcard-border);
+  background: radial-gradient(circle at top left, var(--flashcard-accent-soft), transparent 55%), var(--flashcard-bg);
+  box-shadow: 0 18px 35px -22px var(--flashcard-shadow);
+  color: var(--flashcard-text);
+  overflow: hidden;
+}
+
+.flashcards-root[data-side="back"] .flashcards-card {
+  background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 55%), var(--flashcard-bg);
+}
+
+.flashcards-card-flip {
+  animation: flashcards-flip 0.22s ease-out;
+}
+
+@keyframes flashcards-flip {
+  0% {
+    transform: translateY(0) rotateY(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(-4px) rotateY(7deg);
+    opacity: 0.85;
+  }
+  100% {
+    transform: translateY(0) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flashcards-face {
+  transition: opacity 0.24s ease, transform 0.24s ease;
+}
+
+.flashcards-face.back {
+  display: none;
+}
+
+.flashcards-root[data-side="back"] .flashcards-face.front {
+  display: none;
+}
+
+.flashcards-root[data-side="back"] .flashcards-face.back {
+  display: block;
+}
+
+.flashcards-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--flashcard-muted);
+}
+
+.flashcards-progress {
+  font-weight: 600;
+}
+
+.flashcards-pill {
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid var(--flashcard-border);
+  background-color: rgba(15, 23, 42, 0.02);
+}
+
+.flashcards-body {
+  font-size: 0.98rem;
+  line-height: 1.6;
+}
+
+.flashcards-body pre {
+  margin: 0.5rem 0 0;
+}
+
+.flashcards-body img.flashcard-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.flashcards-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--flashcard-muted);
+}
+
+.flashcards-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.flashcards-btn {
+  border-radius: 999px;
+  border: 1px solid var(--flashcard-control-border);
+  background-color: var(--flashcard-control-bg);
+  color: var(--flashcard-text);
+  font-size: 0.8rem;
+  padding: 0.4rem 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.17s ease, transform 0.1s ease, box-shadow 0.1s ease, border-color 0.17s ease;
+}
+
+.flashcards-btn-primary {
+  background-color: var(--flashcard-accent-soft);
+  border-color: rgba(56, 189, 248, 0.4);
+}
+
+.flashcards-btn:hover {
+  background-color: rgba(15, 23, 42, 0.03);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px -12px var(--flashcard-shadow);
+}
+
+.flashcards-btn:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.flashcards-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+  box-shadow: none;
+}
+
+.flashcards-hotkeys {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .flashcards-hotkeys {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+  }
+
+  .flashcards-hotkey-pill {
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    border: 1px solid rgba(148, 163, 184, 0.8);
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .flashcards-card {
+    padding: 1.15rem 1.25rem;
+  }
+
+  .flashcards-controls {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}

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;
+}