pddl-gantt/styles/pddl-gantt.css

Plan visualization for AI-Planning plans. The package includes HTML components for Gantt, swimlane and line plot visualization of plan originating from AI Planning solvers.

div.gantt {
    position: relative;
    margin: 5px;
}

div.planstep {
    position: absolute;
    white-space: pre;
    display: inline-flex;
    font-family: sans-serif;
    align-items: center;
}

div.planstep-bar {
    background-color: darkgray;
    height: 15px;
    margin: 3px;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 1px;
}

div.planstep-bar-relaxed {
    background-color: darkgray;
    height: 15px;
    margin: 3px;
    margin-left: 0px;
}

span.error {
    color: red;
    text-overflow: ellipsis;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

.planSelector {
    margin: 3px;
    width: 50px;
    text-align: center;
    padding: 1px;
    border: transparent 2px solid;
    font-family: sans-serif;
}

.planSelector-selected {
    border: 2px solid lightgray;
}

.planSelector:hover {
    border: 2px solid darkgray;
}

.planMetricBar {
    background-color: lightgreen;
}

.planSelectors {
    margin: 5px;
    display: flex;
    align-items: flex-end;
    overflow: auto;
}

th, td {
    border-bottom: 1px solid #ddd;
    text-align: left;
}

a.action {
    cursor: pointer;
}

td.objectName {
    vertical-align: baseline;
}

th.actionToolTip, td.actionToolTip {
    border-bottom-style: none;
}

/* https://iros.github.io/patternfills/sample_css.html */

.whitecarbon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==");
    background-repeat: repeat;
}

/* CHARTS */

div.lineCharts {
    /* ensure it is visible, when scrolling to it */
    min-height: 100px;
    margin-top: 20px;
    display: inline-block; /* to ensure the loader is considered in viewport even if the plan is wider than the viewport */
}

/* SPINNING LOADER */

.loader {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    opacity: 0.75;
    border-top: 5px solid blue;
    border-right: 5px solid green;
    border-bottom: 5px solid red;
    width: 30px;
    height: 30px;
    display: inline-block; /* to ensure the loader is considered in viewport even if the plan is wider than the viewport */
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* RESOURCE SWIM-LANE BARS */

/* Tooltip container */
.resourceTaskTooltip {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    position: absolute;
}

/* We need to unhide the overflow, so the tooltip has something to show : ( */
.resourceTaskTooltip:hover {
    overflow: visible;
    text-overflow: unset; 
}

/* Tooltip text */
.resourceTaskTooltip .resourceTaskTooltipText {
    visibility: hidden;
    /* width: 120px; */
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
 
    position: absolute;
    z-index: 1;

    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.resourceTaskTooltip .resourceTaskTooltipText::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.resourceTaskTooltip:hover .resourceTaskTooltipText {
    visibility: visible;
}

#diamond-narrow {
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-bottom: 7.5px solid red;
	position: relative;
	top: -3px;
}
#diamond-narrow:after {
	content: '';
	position: absolute;
	left: -3px; top: 7.5px;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-top: 7.5px solid red;
}