mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-25 06:49:23 +01:00
9ba1a0f76a
* Adds healthcheck to status in menu * Fixes bug with crated * Moves colors to vars * Updates icons
63 lines
1.0 KiB
Vue
63 lines
1.0 KiB
Vue
<template>
|
|
<div :class="level" :data-position="position"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { Position } from "@/models/LogEntry";
|
|
|
|
defineProps<{
|
|
level?: string;
|
|
position?: Position;
|
|
}>();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div {
|
|
display: inline-block;
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
border-radius: 0.5em;
|
|
align-self: auto;
|
|
margin-top: 0.4em;
|
|
|
|
&[data-position="start"] {
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
height: 70%;
|
|
margin-bottom: -0.2em;
|
|
margin-top: auto;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
&[data-position="middle"] {
|
|
border-radius: 0;
|
|
height: auto;
|
|
margin: -0.2em 0;
|
|
align-self: auto;
|
|
}
|
|
|
|
&[data-position="end"] {
|
|
border-radius: 0 0 0.5em 0.5em;
|
|
height: 70%;
|
|
margin-top: -0.2em;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
&.debug,
|
|
&.trace {
|
|
background-color: var(--purple-color);
|
|
}
|
|
|
|
&.info {
|
|
background-color: var(--green-color);
|
|
}
|
|
|
|
&.error,
|
|
&.fatal {
|
|
background-color: var(--red-color);
|
|
}
|
|
|
|
&.warn {
|
|
background-color: var(--orange-color);
|
|
}
|
|
}
|
|
</style>
|