Use variables to fix style and dark theme issue, fix #380

[jancborchardt]

@axheli this fixes the issues #380 you reported, please review. :)

[AndyXheli]

@jancborchardt

same issue

[jancborchardt]

@axheli did you check out this branch for testing, or did you manually apply the changes? It should absolutely work, as there’s no set white color anywhere anymore.

[AndyXheli]

@jancborchardt Yes i did i applied the setting and rebooted the server and cleared the web cache.

[AndyXheli]

.content {
width: 100%;
}

#logreader-root {
height: calc(100vh - 50px);
width: 100%;
}

#logreader-root > div {
height: 100%;
}

#log-section {
display: none; /** we overwrite this */
}

.log-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.scrollContainer {
height: 100%;
overflow: auto;
}

.highlight-enter {
background-color: var(--color-warning);
}

.highlight-enter.highlight-enter-active {
background-color: var(--color-main-background);
transition: background 1500ms ease-in;
}

[AndyXheli]

.logs {
width: 100%;
white-space: normal;
margin-bottom: 14px;
table-layout: fixed;

th {
color: #888;
}

td, th {
vertical-align: top;
padding: .8em;
text-align: left;
font-weight: normal;
position: relative;
word-wrap: break-word;
border-bottom: 1px solid #eee;
}

th.level.active .log-settings-toggle,
th.level:hover .log-settings-toggle {
opacity: 1;
}

.time {
width: 180px;
}

.time.relative {
width: 100px;
}

.app {
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

td.app, th.app {
@media only screen and (max-width: 1100px) {
display: none;
}
}

.level {
width: 100px;
}

/* warning*/
.level_2 td.level {
border-left: 5px solid #FEEFB3;
}

/error/
.level_3 td.level {
border-left: 5px solid #FFBABA;
}

/fatal/
.level_4 td.level {
border-left: 5px solid #ff8080;
}

div.column {
box-sizing: border-box;
padding: 7px;
}

div.level {
font-weight: bold;
}

div.level, div.app, div.time {
display: inline-block;
width: 33%;
}

div.time {
padding-right: 20px;
}

div.row {
position: relative;
}

div.message {
border-bottom: 1px solid #888;
}

td.copy, th.copy {
position: relative;
width: 42px;
margin: 0;
overflow: visible;

button {
  position: relative;
  opacity: 0;
  transition: opacity 0.5s;
  top: -5px;
  padding: 0;
  background-color: transparent;
  border: none;
  width: 42px;
}

}

tr:hover {
td.copy button {
opacity: 0.5;

  &:hover {
    opacity: 1;
  }
}

}

tr.active td.copy button {
opacity: 1;
}

div.level_1 {

}

div.level_2 {
border-left: 5px solid #FEEFB3;
}

div.level_3 {
border-left: 5px solid #FFBABA;
}

div.level_4 {
border-left: 5px solid #ff8080;
}

tr.empty td {
border-bottom: none;
}
tr.highlight {
background-color: var(--color-background-hover);
}
}

.smallHeader,
th.level {
overflow: visible;

span {
margin: -0.8em;
padding: .8em;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}

.log-settings-toggle {
cursor: pointer;
display: block;
float: right;
margin: 2px;
opacity: 0.5;
transition: opacity 0.2s;
}
}

.smallHeader {
margin-left: 44px;
width: 62px;
padding: 10px;

.log-settings-toggle:hover {
opacity: 1;
}
}

.copyMenu {
right: -10px;
top: 50px;
width: 150px;
}