<commit_before>@import "~@blueprintjs/core/dist/blueprint.css";
@import "~@blueprintjs/core/dist/variables.less";

* {
    box-sizing: border-box;
}

// pixel size of each cell (tile or entity) in the map.
@cell-size: 40px;
// A set of common transition properties that should animate smoothly on hover
// of entities. Use this when overriding the transition property on a specific
// component, but you don't want to lose the existing transition effects.
@hover-transition: background 0.1s, transform 0.1s, box-shadow 0.1s;

// A mixin to make a component adhere to the cell-size. Use on tiles, entities,
// and other things that are one cell large.
.rg-map-cell-mixin() {
    width: @cell-size;
    height: @cell-size;
    font-size: @cell-size;
    line-height: 1;
    text-align: center;
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    background: #323134;
    width: 100%;
    height: 100%;
}

.rg-game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rg-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.rg-entity-info {
    color: #f3f4f9;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px;

    .rg-entity-info-name {
        font-weight: bold;
    }

    .rg-entity-info-health {
        padding-left: 10px;
        margin: 0;

        &.good {
            color: green;
        }

        &.ok {
            color: yellow;
        }

        &.bad {
            color: red;
        }
    }

    .rg-entity-info-hunger {
        padding-left: 5px;
    }

    .rg-entity-info-floor {
        float: right;
    }

    .rg-entity-info-item {
        display: inline-block;
        margin: 0 5px;
        padding: 5px;
        border: outset 4px #888;
        background: #444;
        position: relative;
    }
}

.fade.in {
    opacity: 0.95;
}

.rg-entity-popover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .rg-entity-popover-target {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .rg-entity-popover-description {
        font-style: italic;
        font-size: 12px;
        margin-top: 5px;
    }
}

.rg-tile {
    .rg-map-cell-mixin();

    background: white;
    display: inline-block;
    overflow: hidden;
    transition: color 0.1s, @hover-transition;

    &.rg-tile-space {
        color: rgba(1,1,1, 0.20);
    }

    &.rg-tile-remembered {
        opacity: 0.4;
        animation-play-state: paused;
    }

    &.rg-tile-unexplored {
        opacity: 0;

        &::before {
            // add empty content to fix bug where unexplored tiles weren't
            // aligned with the other tiles properly
            content: "";
        }
    }

    &:hover {
        transform: scale(1.0);
        box-shadow: 0 0 5px 8px fade(@black, 15%);
        position: relative;
        z-index: 1;
    }

    &.rg-tile-water {
        animation-name: water-wave;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        &::before {
            content: "~";
        }

        @keyframes water-wave {
            from {
                background: lighten(desaturate(@blue2, 30%), 45%);
                color: lighten(desaturate(@blue1, 30%), 40%);
            }

            to {
                background: lighten(desaturate(@blue5, 20%), 5%);
                color: lighten(desaturate(@blue4, 20%), 0%);
            }
        }
    }
}

// entity container
.rg-entity {
    position: relative;
    transition: @hover-transition;

    &:hover {
        transform: scale(1.2);
        box-shadow: 0 0 1px 5px rgba(79, 136, 177, 0.8);
        // background: white;
        border-radius: 2px;
    }

    &.rg-entity-actor {
        transition: @hover-transition, top 0.05s, left 0.05s;

        animation-name: active;
        animation-duration: 2s;
        animation-timing-function: steps(2);
        animation-iteration-count: infinite;
        @keyframes active {
            from {
                margin-top: -3px;
            }

            to {
                margin-top: 0px;
            }
        }
    }

    .rg-entity-element {
        .rg-map-cell-mixin();
    }

    // place the bottom of the health meter at the top of the container (top of the entity element)
    .rg-health-meter {
        bottom: calc(~"100% + 2px");
        height: 5px;
        opacity: 0.8;
        position: absolute;
        z-index: 1;
        width: 80%;
        margin: 0 10%;
    }
}

.rg-map {
    margin: 0;
    position: relative;
    transform: translate(50%, 50%);
    transition: top 0.05s, left 0.05s;
    white-space: pre;

    // center the square-o in the cell
    .fa-square-o:before {
        position: relative;
        top: 1.2px;
    }

    .rg-row {
        height: @cell-size;
        position: relative;
    }

    // item specific styles while they're on the map
    .rg-entity-item {
        // shrink items a bit to make them appear different than full entities
        transform: scale(0.65);

        // make items bobble up and down on the map
        animation-duration: 1s;
        animation-name: bobble;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;

        @keyframes bobble {
            from {
                margin-top: -5px;
            }

            to {
                margin-top: 3px;
            }
        }
    }

    .rg-entity-user {
        color: red;
    }
}

.rg-screen-user-died {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rg-screen-user-won {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}
<commit_msg>add slight opacity transition<commit_after>@import "~@blueprintjs/core/dist/blueprint.css";
@import "~@blueprintjs/core/dist/variables.less";

* {
    box-sizing: border-box;
}

// pixel size of each cell (tile or entity) in the map.
@cell-size: 40px;
// A set of common transition properties that should animate smoothly on hover
// of entities. Use this when overriding the transition property on a specific
// component, but you don't want to lose the existing transition effects.
@hover-transition: transform 0.1s, box-shadow 0.1s;

// A mixin to make a component adhere to the cell-size. Use on tiles, entities,
// and other things that are one cell large.
.rg-map-cell-mixin() {
    width: @cell-size;
    height: @cell-size;
    font-size: @cell-size;
    line-height: 1;
    text-align: center;
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    background: #323134;
    width: 100%;
    height: 100%;
}

.rg-game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rg-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.rg-entity-info {
    color: #f3f4f9;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px;

    .rg-entity-info-name {
        font-weight: bold;
    }

    .rg-entity-info-health {
        padding-left: 10px;
        margin: 0;

        &.good {
            color: green;
        }

        &.ok {
            color: yellow;
        }

        &.bad {
            color: red;
        }
    }

    .rg-entity-info-hunger {
        padding-left: 5px;
    }

    .rg-entity-info-floor {
        float: right;
    }

    .rg-entity-info-item {
        display: inline-block;
        margin: 0 5px;
        padding: 5px;
        border: outset 4px #888;
        background: #444;
        position: relative;
    }
}

.fade.in {
    opacity: 0.95;
}

.rg-entity-popover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .rg-entity-popover-target {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .rg-entity-popover-description {
        font-style: italic;
        font-size: 12px;
        margin-top: 5px;
    }
}

.rg-tile {
    .rg-map-cell-mixin();

    background: white;
    display: inline-block;
    overflow: hidden;
    transition: color 0.15s, opacity 0.15s, @hover-transition;

    &.rg-tile-space {
        color: rgba(1,1,1, 0.20);
    }

    &.rg-tile-remembered {
        opacity: 0.4;
        animation-play-state: paused;
    }

    &.rg-tile-unexplored {
        opacity: 0;

        &::before {
            // add empty content to fix bug where unexplored tiles weren't
            // aligned with the other tiles properly
            content: "";
        }
    }

    &:hover {
        transform: scale(1.0);
        box-shadow: 0 0 5px 8px fade(@black, 15%);
        position: relative;
        z-index: 1;
    }

    &.rg-tile-water {
        animation-name: water-wave;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        &::before {
            content: "~";
        }

        @keyframes water-wave {
            from {
                background: lighten(desaturate(@blue2, 30%), 45%);
                color: lighten(desaturate(@blue1, 30%), 40%);
            }

            to {
                background: lighten(desaturate(@blue5, 20%), 5%);
                color: lighten(desaturate(@blue4, 20%), 0%);
            }
        }
    }
}

// entity container
.rg-entity {
    position: relative;
    transition: @hover-transition;

    &:hover {
        transform: scale(1.2);
        box-shadow: 0 0 1px 5px rgba(79, 136, 177, 0.8);
        border-radius: 2px;
    }

    &.rg-entity-actor {
        transition: @hover-transition, top 0.05s, left 0.05s;

        animation-name: active;
        animation-duration: 2s;
        animation-timing-function: steps(2);
        animation-iteration-count: infinite;
        @keyframes active {
            from {
                margin-top: -3px;
            }

            to {
                margin-top: 0px;
            }
        }
    }

    .rg-entity-element {
        .rg-map-cell-mixin();
    }

    // place the bottom of the health meter at the top of the container (top of the entity element)
    .rg-health-meter {
        bottom: calc(~"100% + 2px");
        height: 5px;
        opacity: 0.8;
        position: absolute;
        z-index: 1;
        width: 80%;
        margin: 0 10%;
    }
}

.rg-map {
    margin: 0;
    position: relative;
    transform: translate(50%, 50%);
    transition: top 0.05s, left 0.05s;
    white-space: pre;

    // center the square-o in the cell
    .fa-square-o:before {
        position: relative;
        top: 1.2px;
    }

    .rg-row {
        height: @cell-size;
        position: relative;
    }

    // item specific styles while they're on the map
    .rg-entity-item {
        // shrink items a bit to make them appear different than full entities
        transform: scale(0.65);

        // make items bobble up and down on the map
        animation-duration: 1s;
        animation-name: bobble;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;

        @keyframes bobble {
            from {
                margin-top: -5px;
            }

            to {
                margin-top: 3px;
            }
        }
    }

    .rg-entity-user {
        color: red;
    }
}

.rg-screen-user-died {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rg-screen-user-won {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

{'fraction_non_alphanumeric': 0.1250105156894086, 'fraction_numerical': 0.030958189618911416, 'mean_word_length': 1.6744656917885263, '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': '1147675', 'n_tokens_mistral': 4179, 'n_tokens_neox': 3750, 'n_words': 971}