play.css

/*  Play MUME!, a modern web client for MUME using DecafMUD.
    Copyright (C) 2017, Waba.

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License along
    with this program; if not, write to the Free Software Foundation, Inc.,
    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */

/* The following two rules are from Split.js and MIT-licensed:
 * https://github.com/nathancahill/Split.js/ */
.gutter {
    background-color: #888;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

.split {
    box-sizing: border-box;
}

#mume-app {
    display: flex;
    flex-direction: row;
}

.decafmud.interface {
    height: 100vh; /* full-height app instead of the fixed 450px */
    border: none; /* default 1px causes a body scrollbar */
}

#mume-map-panel {
    height: 100vh; /* avoid canvas delayed resize increasing this size past visible window */
    min-width: 0px; /* allow downsizing once the canvas' CSS size is set by PIXI */
}

#mume-map-panel canvas {
    width: 100%; /* allow resizing */
    margin: auto; /* try to center the canvas vert. if it's not exactly fitted. */
}

body {
    padding-bottom: 0; /* Override DecafMUD, not sure what it was for, but it was causing scrolling */
}

html.no-scroll, html.no-scroll body {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: 0;
    margin: 0;
}