Initial commit

skills/skill-adapter/assets/visualization_styles.css

@@ -0,0 +1,100 @@
+/*
+  visualization_styles.css - Stylesheet for AI Experiment Logger visualizations.
+
+  This file provides CSS rules to style visualizations generated by the
+  analysis scripts within the AI Experiment Logger plugin.
+
+  Customize these styles to match your desired aesthetic and ensure
+  clarity and readability of your visualizations.
+
+  Remember to link this stylesheet to your HTML files where visualizations
+  are displayed.  Example:
+  <link rel="stylesheet" href="visualization_styles.css">
+*/
+
+/*  General Styles  */
+body {
+  font-family: sans-serif; /* Placeholder: Choose your preferred font */
+  margin: 0;
+  padding: 0;
+}
+
+.visualization-container {
+  /*  Styles for the container holding the entire visualization  */
+  width: 100%; /* Adjust as needed */
+  margin: 10px auto; /* Center horizontally */
+  padding: 15px;
+  border: 1px solid #ddd; /* Light gray border */
+  background-color: #f9f9f9; /* Light background */
+  box-sizing: border-box; /* Include padding and border in element's total width and height */
+}
+
+h2 {
+  /*  Styles for visualization titles  */
+  font-size: 1.5em;
+  margin-bottom: 10px;
+  color: #333; /* Dark gray title color */
+}
+
+/*  Styles for tables  */
+table {
+  width: 100%;
+  border-collapse: collapse; /* Remove spacing between table cells */
+  margin-bottom: 20px;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2; /* Light gray background for header cells */
+  font-weight: bold;
+}
+
+/*  Styles for charts (modify based on your charting library) */
+.chart-container {
+  /*  Placeholder: Styles for containing chart elements  */
+  width: 100%;
+  height: 300px; /* Adjust height as needed */
+  margin-bottom: 20px;
+}
+
+/* Placeholder: Add styles for specific chart elements
+   Example (using a hypothetical chart library):
+   .chart-bar {
+       background-color: steelblue;
+       color: white;
+   }
+*/
+
+/* Styles for labels */
+.label {
+  font-size: 0.8em;
+  color: #777;
+  margin-top: 5px;
+  display: block; /* Ensure label is on its own line */
+}
+
+/* Styles for error messages */
+.error-message {
+    color: red;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+/*  Add more styles as needed for different visualization types and elements  */
+
+/* Example: Styles for a specific type of chart */
+.experiment-comparison-chart {
+  /* Add specific styling for experiment comparison charts here */
+  /* Example:  adjust colors, fonts, etc. */
+}
+
+/* Example: Styles for a specific element within a chart */
+.experiment-comparison-chart .axis-label {
+  font-size: 0.9em;
+  color: #555;
+}