use wp-code-300 as definition name

This commit is contained in:
pat-s 2024-12-18 14:33:57 +01:00
parent a527b4d4d7
commit a19c2f16bd
No known key found for this signature in database
GPG key ID: 3C6318841EF78925
3 changed files with 20 additions and 18 deletions

View file

@ -1,17 +1,17 @@
<template>
<div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
<div
class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:mt-0 !md:rounded-md overflow-hidden"
class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box"
@mouseover="showActions = true"
@mouseleave="showActions = false"
>
<div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-bg-100 px-4 py-2">
<span class="text-base font-bold text-wp-code-text-alt-100">
<div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
<span class="font-bold text-base text-wp-code-text-alt-100">
<span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
<span class="md:hidden">{{ step?.name }}</span>
</span>
<div class="flex flex-row items-center ml-auto gap-x-2">
<div class="flex flex-row items-center gap-x-2 ml-auto">
<IconButton
v-if="step?.finished !== undefined && hasLogs"
:is-loading="downloadInProgress"
@ -37,7 +37,7 @@
@click="autoScroll = !autoScroll"
/>
<IconButton
class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
class="!md:hidden !hover:bg-white !hover:bg-opacity-10"
icon="close"
@click="$emit('update:step-id', null)"
/>
@ -47,13 +47,13 @@
<div
v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
ref="consoleElement"
class="w-full max-w-full grid grid-cols-[min-content,minmax(0,1fr),min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto text-xs md:text-sm"
class="flex-grow grid grid-cols-[min-content,minmax(0,1fr),min-content] auto-rows-min p-4 w-full max-w-full text-xs md:text-sm overflow-x-hidden overflow-y-auto"
>
<div v-for="line in log" :key="line.index" class="contents font-mono">
<div v-for="line in log" :key="line.index" class="font-mono contents">
<a
:id="`L${line.number}`"
:href="`#L${line.number}`"
class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
class="text-right pr-6 pl-2 text-wp-code-text-alt-100 whitespace-nowrap select-none"
:class="{
'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@ -65,7 +65,7 @@
</a>
<!-- eslint-disable vue/no-v-html -->
<span
class="align-top whitespace-pre-wrap break-words"
class="align-top break-words whitespace-pre-wrap"
:class="{
'bg-opacity-40 dark:bg-opacity-50 bg-10.168.64.121-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@ -75,7 +75,7 @@
/>
<!-- eslint-enable vue/no-v-html -->
<span
class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pr-1"
class="text-right pr-1 text-wp-code-text-alt-100 whitespace-nowrap select-none"
:class="{
'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@ -87,7 +87,7 @@
</div>
</div>
<div class="m-auto text-xl text-wp-text-alt-100">
<div class="m-auto text-wp-text-alt-100 text-xl">
<span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
<span v-else-if="!step?.started">{{ $t('repo.pipeline.step_not_started') }}</span>
<div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
@ -96,9 +96,9 @@
<div
v-if="step?.finished !== undefined"
class="flex items-center w-full bg-wp-code-bg-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
class="flex items-center bg-wp-code-300 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
>
<PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
<PipelineStatusIcon :status="step.state" class="!w-4 !h-4" />
<span v-if="step?.error" class="px-2">{{ step.error }}</span>
<span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
</div>

View file

@ -39,7 +39,7 @@
--wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
--wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
--wp-code-bg-100: #f0f1f3;
--wp-code-300: #f0f1f3;
--wp-code-text-100: theme('colors.gray.200');
--wp-code-text-alt-100: theme('colors.gray.300');
@ -87,7 +87,6 @@
--wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
--wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
--wp-code-bg-100: #3d444d;
--wp-code-text-100: theme('colors.gray.300');
--wp-code-text-alt-100: theme('colors.gray.400');
@ -147,5 +146,5 @@ body,
.code-box-inline,
code:not(pre > code) {
@apply bg-wp-code-custom px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
@apply bg-wp-code-300 px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
}

View file

@ -193,9 +193,12 @@ export default defineConfig({
200: 'var(--wp-hint-warn-200)',
},
'wp-code-bg': {
100: 'var(--wp-code-bg-100)',
'wp-code': {
100: 'var(--wp-code-100)',
200: 'var(--wp-code-200)',
300: 'var(--wp-code-300)',
},
'wp-code-text': {
100: 'var(--wp-code-text-100)',
},