<commit_before>@import "../../base/settings_colours";

.table-conventions {
    width: 100%;
    td, th {
        box-sizing: border-box;
        width: 40%;
        padding: 0.2em 0.6em;
    }
    th {
        background: #837E77;
        color: $white;
        text-align: left;

        &:first-child {
            width: 60%;
        }
    }
    td {
        &:first-child {
            width: 20%;
            font-weight: bold;
        }
        &:nth-child(2) {
            font-size: 0.9em;
        }
        &:nth-child(3) {
            font-family: monospace;
            font-size: 0.8em;
        }
    }
    tr {
        &:nth-child(even) td {
            background: $white;
        }
        &:nth-child(odd) td {
            background: $light-grey;
        }
    }
}

.transcription_conventions\.md.page {
    max-width: none;
    background: #e1e0df;

    .table-conventions {
        display: none;
        width: 100%;
        margin: 0;
        border: none;
        border-bottom: 2px solid #837E77;

        tbody {
            overflow: hidden;
            overflow-y: auto;
            min-height: 80px;
            max-height: 300px;
        }
    }
}

.conventions-page {
    &.sticky {
        z-index: 1200;
        position: relative;
    }

    .page {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s;

        .table-conventions {
            display: table;
        }
    }

    .tab {
        display: block;
        min-width: 260px;
        height: 28px;
        line-height: 28px;
        position: absolute;
        bottom: -50px;
        left: 50%;
        right: 50%;

        white-space: nowrap;
        text-align: center;
        background: $soft-orange;
        color: $black;

        cursor: pointer;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        animation: fadeInDown 1s;
        animation-fill-mode: both;
        animation-delay: 1s;

        &:before {
            content: attr(label-inactive);
        }
        &:hover {
            background: darken($soft-orange, 10%);
        }
    }

    &.active {
        .page {
            max-height: 460px;
        }
        .tab:before {
            content: attr(label-active);
        }
    }
}
<commit_msg>[AM-106] Make conventions sticky (TODO: polyfill)<commit_after>@import "../../base/settings_colours";

.table-conventions {
    width: 100%;
    td, th {
        box-sizing: border-box;
        width: 40%;
        padding: 0.2em 0.6em;
    }
    th {
        background: #837E77;
        color: $white;
        text-align: left;

        &:first-child {
            width: 60%;
        }
    }
    td {
        &:first-child {
            width: 20%;
            font-weight: bold;
        }
        &:nth-child(2) {
            font-size: 0.9em;
        }
        &:nth-child(3) {
            font-family: monospace;
            font-size: 0.8em;
        }
    }
    tr {
        &:nth-child(even) td {
            background: $white;
        }
        &:nth-child(odd) td {
            background: $light-grey;
        }
    }
}

.transcription_conventions\.md.page {
    max-width: none;
    background: #e1e0df;

    .table-conventions {
        display: none;
        width: 100%;
        margin: 0;
        border: none;
        border-bottom: 2px solid #837E77;

        tbody {
            overflow: hidden;
            overflow-y: auto;
            min-height: 80px;
            max-height: 300px;
        }
    }
}

.conventions-page {
    &.sticky {
        z-index: 1200;
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
    }

    .page {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s;

        .table-conventions {
            display: table;
        }
    }

    .tab {
        display: block;
        min-width: 260px;
        height: 28px;
        line-height: 28px;
        position: absolute;
        bottom: -50px;
        left: 50%;
        right: 50%;

        white-space: nowrap;
        text-align: center;
        background: $soft-orange;
        color: $black;

        cursor: pointer;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        animation: fadeInDown 1s;
        animation-fill-mode: both;
        animation-delay: 1s;

        &:before {
            content: attr(label-inactive);
        }
        &:hover {
            background: darken($soft-orange, 10%);
        }
    }

    &.active {
        .page {
            max-height: 460px;
        }
        .tab:before {
            content: attr(label-active);
        }
    }
}

{'fraction_non_alphanumeric': 0.1263909300860802, 'fraction_numerical': 0.03380222548813773, 'mean_word_length': 1.2482302973100519, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5322784', 'n_tokens_mistral': 1694, 'n_tokens_neox': 1529, 'n_words': 311}