100 lines
2.5 KiB
CSS
100 lines
2.5 KiB
CSS
/*
|
|
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;
|
|
} |