oncode.css

* {
    box-sizing: border-box;
}

.\|\|general {
    color: #b531b5;
}

.\|\|brackets {
    color: orange;
}

.\|\|functions {
    color: #9393d4;
}

.\|\|strings {
    color: #6bd46b;
}

.\|\|tags {
    color: #d45656;
}

.\|\|lesserOrGreaterBrackets {
    color: #77bdc1;
}

.\|\|innerBrackets {
    color: #d26e6e;
}

.\|\|attributes {
    color: #ffeba0;
}

.\|\|selectors {
    color: grey;
}

.\|\|numbers {
    color: lightcoral;
}

.\|\|comments {
    color: #777;
}

[data-editor], [data-highlights] {
    white-space: pre-wrap;
    min-height: 100%;
}

[data-editor] {
    color: transparent;
    caret-color: #fff;
    z-index: 10;
    position: sticky;
    outline: none;
    width: 100%;
}

[data-highlights] {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: inherit;
}

[data-adviser] {
    background: #5e5b6b;
    position: fixed;
    bottom: unset;
    right: unset;
    padding: 0;
}

[data-adviser]:empty, [data-adviser] > a:nth-child(1n + 7) {
    display: none;
}

[data-adviser] > a {
    width: 100%;
    padding: 5px;
    display: block;
    font-weight: normal;
}

[data-adviser] > a[data-active] {
    position: relative;
}

[data-adviser] > a[data-active]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.2;
}