munchboka-edutools 0.1.0__py3-none-any.whl

munchboka_edutools/static/css/interactive_code/style.css

@@ -0,0 +1,575 @@
+/* Verbatim copy from source matematikk_r1/_static/interactiveCode/style.css */
+/* CSS rules for CodeMirror */
+
+/* Setter font og fontsize for koden */
+.CodeMirror * {
+	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	font-size: 14px;
+}
+
+.CodeMirror {
+	height: auto !important;
+}
+
+/* Spesiell highlighting på utvalgte fraser i kommentarer */
+.cm-todo {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-fiksmeg {
+	color: rgb(255, 0, 0) !important;
+	font-weight: bold !important;
+}
+
+.cm-note {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-fyllinn {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-ignorer {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-ikkerør {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-fokus {
+	color: rgb(0, 102, 128) !important;
+	font-weight: bold !important;
+}
+
+.cm-forklaring {
+	color: rgb(0, 102, 128) !important;
+	font-weight: bold !important;
+}
+
+.cm-merk {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+.cm-question {
+	color: red !important;
+	font-weight: bold !important;
+}
+
+/* Lager en border rundt kodeboksen for å utheve den */
+
+[data-mode="light"] .CodeMirror {
+	border: 1px solid black; /* Add a black border */
+	border-radius: 4px; /* Optional: Add rounded corners */
+}
+
+@media (prefers-color-scheme: light) {
+	.CodeMirror {
+		border: 1px solid black; /* Add a black border */
+		border-radius: 4px; /* Optional: Add rounded corners */
+	}
+}
+
+[data-mode="dark"] .CodeMirror {
+	border: 1px solid white; /* Add a black border */
+	border-radius: 4px; /* Optional: Add rounded corners */
+}
+
+@media (prefers-color-scheme: dark) {
+	.CodeMirror {
+		border: 1px solid white; /* Add a black border */
+		border-radius: 4px; /* Optional: Add rounded corners */
+	}
+}
+
+.CodeMirror-linenumbers {
+	padding-right: 10px; /* Adjust this value to change the space between line numbers and code */
+}
+
+/* Highlighting for error messages */
+.error-message {
+	white-space: pre-wrap;
+}
+
+.error-type {
+	color: red;
+	font-weight: bold !important;
+}
+
+.error-line {
+	color: red;
+	background-color: rgba(0, 161, 248, 0.305);
+	font-weight: bold !important;
+}
+
+/* General button styles */
+.button {
+	color: teal; /* Button text color */
+	border: none; /* Remove border */
+	padding: 4px 20px !important; /* Padding around text */
+	text-align: center; /* Center text */
+	text-decoration: none; /* Remove underline */
+	display: inline-block; /* Allow setting height and width */
+	font-size: 16px; /* Font size */
+	margin: 4px 2px; /* Margin around button */
+	cursor: pointer; /* Cursor on hover */
+	border-radius: 8px; /* Rounded corners */
+	transition-duration: 0.4s; /* Transition effect on hover */
+}
+
+/* Run button */
+.button-run {
+	background-color: #28a745; /* Green background */
+	color: black; /* Black text */
+}
+
+.button-run:hover {
+	background-color: #218838; /* Darker green on hover */
+}
+
+.button-run:active {
+	background-color: #1e7e34; /* Even darker green on click */
+	box-shadow: 0 5px #666; /* Shadow effect */
+	transform: translateY(4px); /* Move button down */
+}
+
+/* Reset button */
+.button-reset {
+	background-color: #ffc107; /* Orange background */
+	color: black; /* Black text */
+}
+
+.button-reset:hover {
+	background-color: #e0a800; /* Darker orange on hover */
+}
+
+.button-reset:active {
+	background-color: #c69500; /* Even darker orange on click */
+	box-shadow: 0 5px #666; /* Shadow effect */
+	transform: translateY(4px); /* Move button down */
+}
+
+/* Cancel button */
+.button-cancel {
+	background-color: #dc3545; /* Red background */
+	color: black; /* Black text */
+}
+
+.button-cancel:hover {
+	background-color: #c82333; /* Darker red on hover */
+}
+
+.button-cancel:active {
+	background-color: #bd2130; /* Even darker red on click */
+	box-shadow: 0 5px #666; /* Shadow effect */
+	transform: translateY(4px); /* Move button down */
+}
+
+.button:focus {
+	outline: none; /* Remove outline on focus */
+}
+
+.button svg {
+	/* margin-left: 8px;  */
+	vertical-align: middle; /* Align icon vertically with text */
+	width: 20px; /* Icon width */
+	height: 20px; /* Icon height */
+}
+
+.pythonoutput {
+	max-height: 600px;
+	overflow-y: auto;
+}
+
+/* Dynamically highlight error lines in editor */
+.cm-highlight {
+	background-color: rgba(255, 0, 0, 0.2); /* Light red background */
+}
+
+/* Change the background and text color of the highlighted selection */
+.CodeMirror-selected {
+	background-color: #0196bc41 !important;
+}
+
+/* Prediction containers */
+
+/* Style for the prediction input container */
+.prediction-container {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.prediction-container label {
+	display: block;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.prediction-container textarea {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	resize: vertical;
+	font-family: Arial, sans-serif;
+	font-size: 14px;
+}
+
+.button-lock-prediction {
+	margin-top: 10px;
+	background-color: #007bff; /* Blue background */
+	color: #fff; /* White text */
+}
+
+.button-lock-prediction:hover {
+	background-color: #0056b3; /* Darker blue on hover */
+}
+
+.button-lock-prediction:active {
+	background-color: #004080; /* Even darker blue on click */
+	box-shadow: 0 5px #666; /* Shadow effect */
+	transform: translateY(4px); /* Move button down */
+}
+
+/* Style for the prediction and output display container */
+/* Base styles for the prediction and output display container */
+.prediction-output-container {
+	display: flex;
+	flex-direction: row;
+	gap: 20px;
+	margin-top: 20px;
+}
+
+.prediction-display,
+.output-display {
+	flex: 1;
+}
+
+.prediction-display h3,
+.output-display h3 {
+	font-size: 18px;
+	border-bottom: 2px solid;
+	padding-bottom: 5px;
+	margin-bottom: 10px;
+}
+
+.prediction-display pre,
+.output-display pre {
+	padding: 10px;
+	border-radius: 4px;
+	overflow: auto;
+	max-height: 300px;
+	border: 1px solid;
+	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	font-size: 14px;
+}
+
+/* Light mode styles */
+[data-mode="light"] .prediction-display h3,
+[data-mode="light"] .output-display h3 {
+	color: #333333;
+	border-color: #cccccc;
+}
+
+[data-mode="light"] .prediction-display pre,
+[data-mode="light"] .output-display pre {
+	background-color: #f8f9fa;
+	color: #212529;
+	border-color: #cccccc;
+}
+
+/* Dark mode styles */
+[data-mode="dark"] .prediction-display h3,
+[data-mode="dark"] .output-display h3 {
+	color: #f1f1f1;
+	border-color: #444444;
+}
+
+[data-mode="dark"] .prediction-display pre,
+[data-mode="dark"] .output-display pre {
+	background-color: #2b2b2b;
+	color: #e1e1e1;
+	border-color: #444444;
+}
+
+/* Auto mode styles based on system preference */
+@media (prefers-color-scheme: dark) {
+	[data-mode="auto"] .prediction-display h3,
+	[data-mode="auto"] .output-display h3 {
+		color: #f1f1f1;
+		border-color: #444444;
+	}
+	[data-mode="auto"] .prediction-display pre,
+	[data-mode="auto"] .output-display pre {
+		background-color: #2b2b2b;
+		color: #e1e1e1;
+		border-color: #444444;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	[data-mode="auto"] .prediction-display h3,
+	[data-mode="auto"] .output-display h3 {
+		color: #333333;
+		border-color: #cccccc;
+	}
+	[data-mode="auto"] .prediction-display pre,
+	[data-mode="auto"] .output-display pre {
+		background-color: #f8f9fa;
+		color: #212529;
+		border-color: #cccccc;
+	}
+}
+
+/* General styles for the prediction container */
+.prediction-container {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.prediction-container textarea {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+	border-radius: 4px;
+	resize: vertical;
+	font-family: Arial, sans-serif;
+	font-size: 16px;
+	border: 1px solid;
+	background-color: inherit; /* Inherit background for consistency */
+	color: inherit; /* Inherit text color */
+}
+
+/* Light mode styles for the prediction textarea */
+[data-mode="light"] .prediction-container textarea {
+	background-color: #ffffff;
+	color: #212529;
+	border-color: #cccccc;
+}
+
+/* Dark mode styles for the prediction textarea */
+[data-mode="dark"] .prediction-container textarea {
+	background-color: #2b2b2b;
+	color: #e1e1e1;
+	border-color: #444444;
+}
+
+/* Auto mode styles for the prediction textarea */
+@media (prefers-color-scheme: dark) {
+	[data-mode="auto"] .prediction-container textarea {
+		background-color: #2b2b2b;
+		color: #e1e1e1;
+		border-color: #444444;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	[data-mode="auto"] .prediction-container textarea {
+		background-color: #ffffff;
+		color: #212529;
+		border-color: #cccccc;
+	}
+}
+
+/* Style for the placeholder text */
+.prediction-container textarea::placeholder {
+	font-size: 16px;
+	color: #6c757d;
+}
+
+/* Placeholder styles for light mode */
+[data-mode="light"] .prediction-container textarea::placeholder {
+	color: #6c757d;
+}
+
+/* Placeholder styles for dark mode */
+[data-mode="dark"] .prediction-container textarea::placeholder {
+	color: #bbbbbb;
+}
+
+/* Placeholder styles for auto mode */
+@media (prefers-color-scheme: dark) {
+	[data-mode="auto"] .prediction-container textarea::placeholder {
+		color: #bbbbbb;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	[data-mode="auto"] .prediction-container textarea::placeholder {
+		color: #6c757d;
+	}
+}
+
+/* Style for the lock prediction button */
+.button-lock-prediction {
+	margin-top: 10px;
+	background-color: #007bff; /* Blue background */
+	color: #fff; /* White text */
+	border: none;
+	padding: 8px 16px;
+	font-size: 16px;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+/* Button hover and active states */
+.button-lock-prediction:hover {
+	background-color: #0056b3;
+}
+
+.button-lock-prediction:active {
+	background-color: #004080;
+}
+
+/* Adjust button styles for dark mode */
+[data-mode="dark"] .button-lock-prediction {
+	background-color: #1a73e8;
+	color: #fff;
+}
+
+[data-mode="dark"] .button-lock-prediction:hover {
+	background-color: #135aba;
+}
+
+[data-mode="dark"] .button-lock-prediction:active {
+	background-color: #0d3d80;
+}
+
+/* Adjust button styles for auto mode */
+@media (prefers-color-scheme: dark) {
+	[data-mode="auto"] .button-lock-prediction {
+		background-color: #1a73e8;
+		color: #fff;
+	}
+	[data-mode="auto"] .button-lock-prediction:hover {
+		background-color: #135aba;
+	}
+	[data-mode="auto"] .button-lock-prediction:active {
+		background-color: #0d3d80;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	[data-mode="auto"] .button-lock-prediction {
+		background-color: #007bff;
+		color: #fff;
+	}
+	[data-mode="auto"] .button-lock-prediction:hover {
+		background-color: #0056b3;
+	}
+	[data-mode="auto"] .button-lock-prediction:active {
+		background-color: #004080;
+	}
+}
+
+/* Step by step styles */
+
+/* Style for the step controls */
+.step-controls {
+	margin-top: 10px;
+}
+
+.step-controls .button {
+	margin-right: 5px;
+}
+
+/* Style for the visualization panel */
+.visualization-panel {
+	margin-top: 20px;
+	border-top: 1px solid #ccc;
+	padding-top: 10px;
+}
+
+.visualization-panel pre {
+	background-color: #f8f9fa;
+	padding: 10px;
+	border-radius: 4px;
+	overflow: auto;
+	max-height: 300px;
+
+	border: 1px solid #ccc;
+}
+
+/* Highlight current line in editor */
+.CodeMirror .current-line {
+	background-color: #ffffcc !important;
+}
+
+
+
+
+/* Turtle */
+
+/* A top-level container for the entire turtle environment */
+.turtle-env {
+	display: flex;
+	flex-wrap: wrap;   /* Allows wrapping on narrow screens */
+	width: 100%;
+	gap: 0;            /* Adjust gap if you want space between columns */
+  }
+  
+  /* Left column: the code editor, run button, output */
+  .turtle-env .turtle-left {
+	flex: 1;
+	min-width: 400px;
+	display: flex;
+	flex-direction: column;
+	/* Optional: Add a background or border if desired
+	   background: #fafafa;
+	   border: 1px solid #ccc;
+	*/
+  }
+  
+  /* The hidden <textarea> that CodeMirror replaces */
+  .turtle-env .turtle-editor-textarea {
+	display: none; /* CodeMirror will take over */
+  }
+  
+  
+  /* The output <pre> area */
+  .turtle-env .turtle-output {
+	border: 1px solid #ccc;
+	padding: 8px;
+	min-height: 2em;
+	white-space: pre-wrap;
+	/* Optional: background color or font */
+	font-family: monospace;
+	background: #f8f8f8;
+  }
+  
+  /* Right column: container for the turtle 'canvas' <div> */
+  .turtle-env .turtle-right {
+	flex: 1;
+	min-width: 100px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+  }
+  
+  /* The turtle <div> itself */
+  .turtle-env .turtle-canvas {
+	border: 1px solid #ccc;
+	width: 90%;      /* or any other fixed or relative width */
+	height: 400px;   /* you can override or make dynamic */
+	margin-top: 0;
+	/* Optional: background color if desired */
+	/* background: #fff; */
+	background: #007bff;
+  }
+  
+  
+  
+  
+  
+.CodeMirror-hint-active,
+.CodeMirror-hint:hover {
+  background: #d68b00 !important;
+  color: #fff;
+}