arimelody-web/admin/static/logs.css

main {
    width: min(1080px, calc(100% - 2em))!important
}

form#search-form {
    width: calc(100% - 2em);
    margin: 1em 0;
    padding: 1em;
    border-radius: 16px;
    color: var(--fg-0);
    background: var(--bg-2);
    box-shadow: var(--shadow-md);
}

div#search {
    display: flex;
}

#search input {
    margin: 0;
    padding: .3em .8em;
    flex-grow: 1;
    border: none;
    border-radius: 16px;
    color: var(--fg-1);
    background: var(--bg-0);
    box-shadow: var(--shadow-sm);
}

#search button {
    margin-left: .5em;
    padding: 0 .8em;
}

form #filters p {
    margin: .5em 0 0 0;
}
form #filters label {
    color: inherit;
    display: inline;
}
form #filters input {
    margin-right: 1em;
    display: inline;
}

#logs {
    width: 100%;
    overflow: scroll;
}
@media screen and (max-width: 720px) {
    #logs {
        font-size: 12px;
    }
}

#logs table{
    border-collapse: collapse;
}

#logs tr {
}

#logs tr td {
    border-bottom: 1px solid #8888;
}

#logs tr td:nth-child(even) {
    background: #00000004;
}

#logs th, #logs td {
    padding: .4em .8em;
}

#logs .log {
    color: var(--fg-2);
}

td, th {
    width: 1%;
    text-align: left;
    white-space: nowrap;
}
td.log-level,
th.log-level,
td.log-type,
th.log-type {
    text-align: center;
}
td.log-content,
td.log-content {
    width: 100%;
    white-space: collapse;
}

#logs .log:hover {
    background: color-mix(in srgb, var(--fg-3) 10%, transparent);
}

#logs .log.warn {
    color: var(--col-on-warn);
    background: var(--col-warn);
}
#logs .log.warn:hover {
    background: var(--col-warn-hover);
}