0
0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-28 00:12:47 +01:00
gitea/templates/devtest/severity-colors.tmpl
silverwind d5a89805d9
Improve severity labels in Actions logs and tweak colors (#36993)
Add support for error, warning, notice, and debug log commands with bold
label prefixes and colored backgrounds matching GitHub's style. Parse
both `##[cmd]` and `::cmd args::` formats.

Also improved the severity colors globally and added a devtest page for
these.

---------

Co-authored-by: Claude (claude-opus-4-6) <noreply@anthropic.com>
2026-03-26 10:18:50 +00:00

81 lines
3.4 KiB
Handlebars

{{template "devtest/devtest-header"}}
<div class="page-content devtest ui container">
<h1>Severity Colors</h1>
<h2>Messages</h2>
<div class="ui error message">
<div class="header">Error Message</div>
<p>This is an error message using --color-error-* variables.</p>
</div>
<div class="ui warning message">
<div class="header">Warning Message</div>
<p>This is a warning message using --color-warning-* variables.</p>
</div>
<div class="ui success message">
<div class="header">Success Message</div>
<p>This is a success message using --color-success-* variables.</p>
</div>
<div class="ui info message">
<div class="header">Info Message</div>
<p>This is an info message using --color-info-* variables.</p>
</div>
<h2>Form Fields</h2>
<div class="ui form">
<div class="field error">
<label>Error Field</label>
<input type="text" value="Invalid input" readonly>
</div>
</div>
<h2>Labels</h2>
<div class="flex-text-block tw-gap-2">
<div class="ui red label">Red</div>
<div class="ui orange label">Orange</div>
<div class="ui yellow label">Yellow</div>
<div class="ui green label">Green</div>
<div class="ui blue label">Blue</div>
<div class="ui violet label">Violet</div>
<div class="ui purple label">Purple</div>
</div>
<h2>Color Swatches</h2>
<h3>Error</h3>
<div class="flex-text-block tw-gap-4">
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg tw-text-error-text tw-border tw-border-error-border">Text</div>
<code>error-bg</code>
</div>
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg-hover tw-text-error-text tw-border tw-border-error-border">Hover</div>
<code>error-bg-hover</code>
</div>
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg-active tw-text-error-text tw-border tw-border-error-border">Active</div>
<code>error-bg-active</code>
</div>
</div>
<h3>Warning</h3>
<div class="flex-text-block tw-gap-4">
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-warning-bg tw-text-warning-text tw-border tw-border-warning-border">Text</div>
<code>warning-bg</code>
</div>
</div>
<h3>Success</h3>
<div class="flex-text-block tw-gap-4">
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-success-bg tw-text-success-text tw-border tw-border-success-border">Text</div>
<code>success-bg</code>
</div>
</div>
<h3>Info</h3>
<div class="flex-text-block tw-gap-4">
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-info-bg tw-text-info-text tw-border tw-border-info-border">Text</div>
<code>info-bg</code>
</div>
</div>
</div>
{{template "devtest/devtest-footer"}}