artifactview/resources/content.css

/* Additional stylesheet for artifactview content viewer */

.viewer > pre {
    padding: 10px 20px;
    font-size: 14px;
    overflow-x: auto;
}

pre,
code {
    color: #cccccc;
    background-color: #1c1c1c;
}

.prose {
    margin: 20px 20px 0 20px;
    max-width: 800px;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5 !important;
}
.prose > :first-child {
    margin-top: 0 !important;
}
.prose > :last-child {
    margin-bottom: 0 !important;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 16px;
    line-height: 1.25;
}
.prose h1 tt,
.prose h1 code,
.prose h2 tt,
.prose h2 code,
.prose h3 tt,
.prose h3 code,
.prose h4 tt,
.prose h4 code,
.prose h5 tt,
.prose h5 code,
.prose h6 tt,
.prose h6 code {
    font-size: inherit;
}
.prose h1 {
    border-bottom: 1px solid var(--color-border2);
    padding-bottom: 0.3em;
    font-size: 2em;
}
.prose h2 {
    border-bottom: 1px solid var(--color-border2);
    padding-bottom: 0.3em;
    font-size: 1.5em;
}
.prose h3 {
    font-size: 1.25em;
}
.prose h4 {
    font-size: 1em;
}
.prose h5 {
    font-size: 0.875em;
}
.prose h6 {
    color: var(--color-text-light);
    font-size: 0.85em;
}
.prose p,
.prose blockquote,
.prose details,
.prose ul,
.prose ol,
.prose dl,
.prose table,
.prose pre {
    margin-top: 0;
    margin-bottom: 16px;
}
.prose hr {
    background-color: var(--color-secondary);
    border: 0;
    height: 4px;
    margin: 16px 0;
    padding: 0;
}
.prose ul,
.prose ol {
    padding-left: 2em;
}
.prose ul ul,
.prose ul ol,
.prose ol ol,
.prose ol ul {
    margin-top: 0;
    margin-bottom: 0;
}
.prose ol ol,
.prose ul ol {
    list-style-type: lower-roman;
}
.prose li > p {
    margin-top: 16px;
}
.prose li + li {
    margin-top: 0.25em;
}
.prose dl {
    padding: 0;
}
.prose dl dt {
    font-size: 1em;
    font-style: italic;
    font-weight: 600;
    margin-top: 16px;
    padding: 0;
}
.prose dl dd {
    margin-bottom: 16px;
    padding: 0 16px;
}
.prose blockquote {
    color: var(--color-text-light);
    border-left: 4px solid var(--color-secondary);
    margin-left: 0;
    padding: 0 15px;
}
.prose blockquote > :first-child {
    margin-top: 0;
}
.prose blockquote > :last-child {
    margin-bottom: 0;
}
.prose table {
    width: max-content;
    max-width: 100%;
    display: block;
    overflow: auto;
    border-collapse: collapse;
}
.prose table th {
    font-weight: 600;
}
.prose table th,
.prose table td {
    border: 1px solid var(--color-secondary) !important;
    padding: 6px 13px !important;
}
.prose table tr {
    border-top: 1px solid var(--color-secondary);
}
.prose table tr:nth-child(2n) {
    background-color: var(--color-secondary);
}
.prose img,
.prose video {
    box-sizing: initial;
    max-width: 100%;
}
.prose img[align="right"],
.prose video[align="right"] {
    padding-left: 20px;
}
.prose img[align="left"],
.prose video[align="left"] {
    padding-right: 28px;
}
.prose code {
    white-space: break-spaces;
    border-radius: 4px;
    margin: 0;
    padding: 0.2em 0.4em;
    font-size: 85%;
}
.prose code br {
    display: none;
}
.prose pre {
    border-radius: 4px;
    padding: 8px;
    line-height: 1.45;
    margin-bottom: 16px;
    word-break: normal;
    word-wrap: normal;
}
.prose pre code {
    padding: 0;
}
.prose pre code:before,
.prose pre code:after {
    content: normal;
}
.prose .ui.list .list,
.prose ol.ui.list ol,
.prose ul.ui.list ul {
    padding-left: 2em;
}

/* theme "Monokai++" generated by syntect */
.entity.name.function.preprocessor,
.meta.preprocessor.macro,
.storage.modifier.import,
.storage.type.generic,
.variable.parameter,
.punctuation.section.class.begin,
.punctuation.section.class.end {
    color: #cccccc;
}
.invalid {
    background-color: #e62a19;
}
.comment {
    color: #696d70;
}
.string,
.string.quoted,
.punctuation.definition.string.begin,
.punctuation.definition.string.end {
    color: #e6db74;
}
.string.regexp {
    color: #49e0fd;
}
.constant.language,
.constant.numeric,
.support.variable.magic {
    color: #ae81ff;
}
.constant.character,
.constant.other.placeholder,
.support.other.escape.special.regexp {
    color: #e62a19;
}
.constant.other {
    color: #fd971f;
}
.entity.name.variable.property,
.keyword,
.meta.preprocessor {
    color: #f92672;
}
.storage,
.support.constant,
.punctuation.section.class {
    color: #49e0fd;
}
.keyword.type,
.storage.type,
.support.class,
.support.type,
.entity.name.type {
    color: #2be98a;
}
.variable.language,
.variable.parameter.function.language.special,
.variable.other.member,
.variable.other.readwrite.member,
.entity.other.attribute-name,
.variable.parameter.function-call {
    color: #fd971f;
}
.punctuation.accessor,
.punctuation.section.embedded,
.punctuation.separator,
.punctuation.definition.attribute,
.storage.type.function.arrow,
.punctuation.definition.template-expression,
.punctuation.definition.template-expression.begin,
.punctuation.definition.template-expression.end,
.punctuation.template-string.element.begin,
.punctuation.template-string.element.end {
    color: #f92672;
}
.punctuation.separator.parameters {
    color: #fd971f;
}
.entity.name.tag {
    color: #f92672;
}
.entity.name.function,
.support.function,
.variable.function {
    color: #b0ec38;
}
.markup.heading {
    color: #f92672;
    font-weight: bold;
}
.markup.bold {
    font-weight: bold;
}
.markup.italic {
    font-style: italic;
}
.markup.underline {
    text-decoration: underline;
}
.markup.quote {
    color: #696d70;
}
.markup.inline,
.markup.raw.inline {
    color: #ae81ff;
}
.keyword.operator.dereference.java,
.meta.preprocessor.haskell,
.punctuation.separator.java,
.meta.group.js,
.meta.group.go,
.punctuation.section.class.begin.python,
.support.variable.dom.js,
.constant.character.brace,
.constant.character.end,
.constant.character.paren,
.constant.character.quote,
.support.class.js,
.punctuation.section.group.begin.js,
.punctuation.section.group.end.js,
.meta.template.expression,
.meta.group.braces,
.source.groovy.embedded.source,
.punctuation.section.class.end.groovy,
.variable.other.bracket.shell,
.variable.other.readwrite.shell,
.meta.group.expansion.command.parens.shell,
.variable.other.normal.shell,
.string.interpolated.dollar.shell,
.meta.function.shell .punctuation.section.parens.begin.shell,
.meta.function.shell .punctuation.section.parens.end.shell,
.string.other.math.shell {
    color: #cccccc;
}
.constant.other.symbol.prolog,
.support.function.be.latex,
.support.function.general.tex,
.support.function.section.latex,
.punctuation.dollar.js,
.punctuation.separator.parameters.python,
.support.function.definition.latex,
.constant.language.module.events,
.constant.language.module.http,
.constant.language.directive.module.main,
.constant.language.directive.module.events,
.constant.language.directive.module.http,
.variable.language.this.js,
.variable.parameter.option.shell,
.punctuation.definition.variable.shell,
.punctuation.section.expansion.parameter.begin.shell,
.punctuation.section.expansion.parameter.end.shell,
.punctuation.section.parens.begin.shell,
.punctuation.section.parens.end.shell,
.string.interpolated.dollar.shell .punctuation.definition.string.begin.shell,
.string.interpolated.dollar.shell .punctuation.definition.string.end.shell,
.string.other.math.shell .punctuation.definition.string.begin.shell,
.string.other.math.shell .punctuation.definition.string.end.shell,
.variable.language.special.self.python,
.variable.parameter.function.language.special.self.python {
    color: #f92672;
}
.entity.name.type.go,
.entity.name.type.namespace.php,
.meta.import.scala,
.punctuation.separator.inheritance.php,
.storage.type.js,
.support.other.module.haskell,
.support.other.namespace.use.php,
.variable.other.constant.ruby,
.entity.name.section.puppet,
.entity.name.function.decorator.python,
.keyword.other.rust {
    color: #49e0fd;
}
.keyword.control.def.ruby,
.keyword.declaration.scala,
.keyword.declaration.stable.scala,
.keyword.declaration.volatile.scala,
.keyword.other.fn.rust,
.meta.structure.dictionary.key.json,
.storage.class.std.rust {
    color: #2be98a;
}
.meta.function-call.object.php,
.meta.function-call.static.php,
.variable.other.makefile,
.variable.other.prolog,
.variable.other.property.js,
.support.variable.property.dom.js,
.meta.property.object.js,
.support.variable.property.js,
.variable.other.object.property.js,
.variable.other.property.cpp,
.meta.attribute.python {
    color: #fd971f;
}
.meta.method.groovy,
.punctuation.definition.logical-expression.shell,
.meta.function-call.generic.python {
    color: #b0ec38;
}
.constant.other.boolean.toml {
    color: #ae81ff;
}
.string.other.link.title.markdown,
.string.other.link.description.markdown {
    color: #49e0fd;
}
.beginning.punctuation.definition.list.markdown,
.punctuation.definition.list_item.markdown,
.punctuation.definition.list.markdown,
.punctuation.definition.heading.markdown,
.punctuation.definition.bold.markdown,
.punctuation.definition.italic.markdown,
.punctuation.definition.string.begin.markdown,
.punctuation.definition.string.end.markdown,
.punctuation.definition.bold.begin.markdown,
.punctuation.definition.bold.end.markdown,
.punctuation.definition.italic.begin.markdown,
.punctuation.definition.italic.end.markdown,
.punctuation.definition.heading.begin.markdown,
.punctuation.definition.heading.end.markdown,
.punctuation.definition.raw.begin.markdown,
.punctuation.definition.raw.end.markdown,
.punctuation.definition.metadata.markdown,
.punctuation.definition.raw.markdown,
.markup.underline.link.image.markdown,
.markup.underline.link.markdown {
    color: #696d70;
}
.markup.deleted.diff {
    color: #f92672;
}
.markup.inserted.diff {
    color: #2be98a;
}
.meta.diff.range.unified {
    color: #ae81ff;
}
.markup.deleted.git_gutter {
    color: #f92672;
}
.markup.inserted.git_gutter {
    color: #2be98a;
}
.markup.changed.git_gutter {
    color: #ae81ff;
}
.markup.ignored.git_gutter {
    color: #696d70;
}
.markup.untracked.git_gutter {
    color: #696d70;
}

.junit {
    display: flex;
    overflow: hidden;
}
@media (max-width: 1000px) {
    .junit {
        flex-wrap: wrap;
    }
    #preview-margin {
        display: none;
    }
}
.junit > div:not(:last-child) {
    border-right: solid 1px var(--color-border);
}
#junit-suites,
#junit-cases {
    min-width: 300px;
    width: 300px;
}
#junit-preview {
    flex-grow: 1;
    margin-bottom: 40px;
    overflow-x: auto;
}

#junit-preview h2 {
    border-bottom: 2px solid var(--color-status);
}

#junit-preview h2 i {
    color: var(--color-status);
}

.junit ul {
    list-style-type: none;
}

.junit ul > li,
.colsubtitle {
    border-bottom: 1px dashed var(--color-border2);
}

.colsubtitle > button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
    padding: 4px 8px;
    border: 2px solid var(--color-status, var(--color-btn));
}
.colsubtitle button.active {
    background-color: var(--color-status, var(--color-btn));
    color: #fff;
}

.coltitle {
    font-size: 14px;
    margin: 8px;
}

.colsubtitle {
    padding: 0 8px 8px 8px;
    margin: 0;
}

.junit li > button {
    width: 100%;
    padding: 4px 8px;
    text-align: left;
    background-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
}
.junit li button.active {
    text-decoration: underline;
    color: var(--color-a-hov);
}

#junit-cases.filtered li > button > span {
    display: none;
}

.badges > *:not(:last-child):after {
    content: "•";
    margin: 0 0.4em;
}

.pvcontent {
    display: none;
}

.junit li[data-status="success"] {
    background-color: #00800035;
}
.junit li[data-status="failure"] {
    background-color: #a6000035;
}
.junit li[data-status="error"] {
    background-color: #67000035;
}
.junit li[data-status="skipped"] {
    background-color: #33333335;
}
.junit li[data-status="flaky"] {
    background-color: #d3641a35;
}

[data-status="success"] {
    --color-status: #008000;
}
[data-status="failure"] {
    --color-status: #a60000;
}
[data-status="error"] {
    --color-status: #670000;
}
[data-status="flaky"] {
    --color-status: #d3641a;
}
[data-status="skipped"] {
    --color-status: #333;
}

/* Icons from https://css.gg */
.gg-check-o {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 100px;
}
.gg-check-o::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 10px;
    border-color: currentColor;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

.gg-close-o {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 40px;
}

.gg-close-o::after,
.gg-close-o::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 3px;
}

.gg-close-o::after {
    transform: rotate(-45deg);
}

.gg-block {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-radius: 100%;
}

.gg-block::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 5px;
    transform: rotate(-45deg);
    top: 5px;
    left: 1px;
}

.gg-danger {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 40px;
}

.gg-danger::after,
.gg-danger::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 2px;
    background: currentColor;
    left: 7px;
}

.gg-danger::after {
    top: 2px;
    height: 8px;
}

.gg-danger::before {
    height: 2px;
    bottom: 2px;
}