besogo/css/besogo.css

Embeddable SGF player for the game of Go (aka Weiqi, Baduk)

.besogo-container {
    outline: none;
    display: flex;
    background: #d0fefe;
}

.besogo-container * {
    box-sizing: border-box;
}

.besogo-container button {
    height: 30px;
    width: 30px;
    padding: 0px;
    background: #d8dcd6;
}

.besogo-container input {
    font-size: 12pt;
}

.besogo-container input[type='button'] {
    background: #d8dcd6;
}

.besogo-container input[type='text'] {
    width: 30px;
}

.besogo-container svg { /* Prevent text selection within SVG */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
     user-select: none;
}

.besogo-panels {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 5px;
}

.besogo-panels > * {
    margin: 3px 0px;
}

.besogo-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;

    flex: 0 0 auto;
}

.besogo-names {
    flex: 0 0 auto;
    width: 100%;
}

.besogo-playerInfo {
    display: flex;
    font-family: Tahoma, Geneva, sans-serif;
    white-space: pre-wrap;
}

.besogo-blackInfo {
    flex: 50%;
    color: white;
    background: black;
    text-align: right;
    padding: 5px;
}

.besogo-whiteInfo {
    flex: 50%;
    color: black;
    background: white;
    text-align: left;
    padding: 5px;
}

.besogo-blackCaps {
    float: left;
}

.besogo-whiteCaps {
    float: right;
}

.besogo-comment {
    font-family: Georgia, serif;
    font-size: 12pt;
    white-space: pre-wrap;


    overflow: auto;
    flex: 1 1 60%;
    width: 100%;
}

.besogo-comment input[type='button'] {
    float: right;
}

.besogo-comment textarea {
    height: 100%;
    width: 100%;
}

.besogo-gameInfo {
    padding: 5px;
    border-collapse: collapse;
}

.besogo-gameInfo td, tr {
    border: 1px solid black;
    padding: 3px;
}

.besogo-tool {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;

    flex: 0 0 auto;
}

.besogo-tree {
    overflow: auto;
    flex: 1 1 40%;
    width: 100%;
}

.besogo-file {
    flex: 0 0 auto;
}