2021-11-30 14:51:24 +01:00

194 lines
3.3 KiB
HTML

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Artifacts
</title>
<style>
#title{
background-color: #ec407a;
color: white;
padding: 2em;
}
h1 {
margin-bottom: 0em;
}
#subtitle {
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 0.2em;
}
.run-info ul {
list-style: none;
}
.run-info ul li {
display: inline;
margin-right: 6em;
margin-left: -3em;
text-transform: uppercase;
font-size: small;
color: #ec407a;
}
#content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
color: #263238;
font-family: Helvetica, sans-serif;
}
p {
margin: 0;
}
#pipeline-table {
display: flex;
flex-direction: column;
}
.pipeline-row {
display: flex;
align-content: stretch;
background-color: #eceff1;
margin-bottom: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 0.2em;
padding-right: 0.2em;
border-radius: 5px;
}
.first-row {
padding-bottom: 0.5em;
padding-top: 0.5em;
border-radius: 10px;
background-color: #cfd8dc;
margin-top: 2em;
}
.pipeline-progress {
display: flex;
flex-grow: 1;
justify-content: space-between;
margin-left: 1%;
}
.pipeline-stage {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-left: 0.2em;
margin-right: 0.2em;
}
.stage-bar .progress {
height: 1em;
border-radius: 5px;
}
.stage-bar {
height: 1em;
border-radius: 5px;
border: 1px solid #cfd8dc;
}
.fail_ignored .stage-bar .progress:hover{ background-color: #e65100; }
.fail_ignored .stage-bar .progress {
background-color: #ff9800;
}
.fail .stage-bar .progress:hover{ background-color: #b61c1c; }
.fail .stage-bar .progress {
background-color: #f44336;
}
.success .stage-bar .progress:hover{ background-color: #1a237e; }
.success .stage-bar .progress {
background-color: #3f51b5;
}
.pipeline-name {
align-self: center;
text-align: end;
width: 13em;
}
.pipeline-link {
justify-self: center;
align-self: center;
width: 1em;
color: #29b6f6;
}
.pipeline-link p a:hover {
color: #01579b;
}
.pipeline-link p a {
text-decoration: none;
}
.pipeline-header {
justify-content: space-around;
font-weight: bold;
font-variant: small-caps;
text-transform: lowercase;
font-style: italic;
font-size: larger;
color: #26323899;
}
.graphs {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.graphs img {
margin-bottom: 6em;
}
@media (prefers-color-scheme: dark){
body {
color: #babdbe;
background-color: #263238;
}
p {
color: #babdbe;
}
#subtitle {
color: #fff;
}
a {
color: #29b6f6;
}
a:hover {
color: #ec407a;
}
#artifact-list {
color: white;
text-decoration: dotted;
}
}
</style>
</head>
<body>
<div id="content">
<div id="title">
<h1>
Artifacts
</h1>
<p id="subtitle">
Litani CI Dashboard
</p>
</div><!-- id="title" -->
<div id="artifact-list">
<ul>
{% for item in file_list %}
<li>
<a href="{{ item }}">{{ item }}</a>
</li>
{% endfor %}{# item in file_list #}
{% for item in dir_list %}
<li>
<a href="{{ item }}/index.html">{{ item }}/</a>
</li>
{% endfor %}{# item in dir_list #}
</ul>
</div><!-- id="artifact-list" -->
</div><!-- id="content" -->
</body>
</html>