wgo/dist/style.css

JavaScript library for game of Go

@font-face {
  font-family: 'wgo-icons';
  src: url('data:application/font-woff;base64,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') format('woff');
  font-weight: normal;
  font-style: normal;
}

.wgo-player {
  all: unset;
  display: block;
  font-family: calibri;
  font-size: 15px;
  position: relative;

  --box-content-background: rgba(255, 255, 255, 0.5);
  --box-background: rgba(121, 85, 72, 0.05);
}

.wgo-player__container {
  display: flex;
  max-height: 100%;
}

.wgo-player__container--row {
  flex-direction: row;
}

.wgo-player__container--column {
  flex-direction: column;
}

.wgo-player__container--column .wgo-player__box:last-child {
  flex: 1;
}

.wgo-player__container--row > :nth-child(1) {
  flex: 2;
}

.wgo-player__container--row > :nth-child(2) {
  flex: 1;
}

.wgo-player__box {
  background: var(--box-background);
  padding: 10px 15px;
  overflow: hidden;
}

.wgo-player__container--column > * + * {
  margin-top: 1px;
}

.wgo-player__container--row > * + * {
  margin-left: 1px;
}

.wgo-player__box--content {
  display: flex;
  flex-direction: column;
}

.wgo-player__box__title {
  font-size: 1.5em;
  margin-bottom: 5px;
}

.wgo-player__box__content {
  flex: 1;
  align-self: stretch;
  background-color: var(--box-content-background);
  padding: 5px 7px;
  overflow: auto;
  min-height: 54px;
}

.wgo-player__box__content p {
  margin: 0 0 5px;
}

.wgo-player__player-tag {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.wgo-player__player-tag__name {
  font-size: 1.5em;
}

.wgo-player__player-tag__name__rank {
  font-size: 0.66em;
}

.wgo-player__player-tag__name__rank:not(:empty)::before {
  content: ' (';
}

.wgo-player__player-tag__name__rank:not(:empty)::after {
  content: ')';
}

.wgo-player__player-tag__color {
  margin-left: auto;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid black;
}

.wgo-player__player-tag__color--black {
  background: rgba(64,64,64,1);
  color: white;
}

.wgo-player__player-tag__color--white {
  background: rgba(255,255,255,1);
}

.wgo-player__nick {
  font-weight: bold;
}

.wgo-player__move-link {
  background: rgba(0, 0, 0,0.3);
  color: rgba(255,255,255,1);
  padding: 0 3px;
  border-radius: 3px;
  text-decoration: none;
}

.wgo-player__move-link:hover {
  background: rgba(0, 0, 0, 0.5);
}

.wgo-player__box__game-info {
  border-collapse: collapse;
}

.wgo-player__box__game-info > tr > th {
  text-align: left;
  font-weight: bold;
  padding: 5px 7px;
}

.wgo-player__box__game-info > tr >  td {
  padding: 5px 7px;
}

.wgo-player__box__game-info > tr:not(:last-child) > th,
.wgo-player__box__game-info > tr:not(:last-child) > td {
  padding-bottom: 0;
}

.wgo-player__control-panel {
  display: flex;
  padding: 15px;
  align-items: center;
}

.wgo-player__button {
  display: inline-block;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  padding: 6px;
  font-size: 15px;
  border-radius: 4px;
  user-select: none;
  max-width: 50px;
  box-sizing: border-box;
}

.wgo-player__button:disabled {
  color: rgba(64, 64, 64, 0.5);
  cursor: default;
}

.wgo-player__move-number {
  width: 30px;
  font-variant: tabular-nums;
  max-width: 50px;
  box-sizing: border-box;
}

.wgo-player__button-group {
  font-size: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.wgo-player__button-group > * {
  flex: 1;
}

.wgo-player__button-group > .wgo-player__button:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.wgo-player__button-group > .wgo-player__button:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.wgo-player__button-group > .wgo-player__button:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.wgo-player__button-group .wgo-player__button + .wgo-player__button {
  margin-left: -1px;
}

.wgo-player__button--menu {
  margin-left: 15px;
  width: 40px;
}

.wgo-player__menu-wrapper {
  position: relative;
}

.wgo-player__menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 3px 0;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.wgo-player__menu:focus-within,
.wgo-player__button--menu:focus + .wgo-player__menu {
  opacity: 1;
  pointer-events: all;
}

.wgo-player__menu-item {
  padding: 3px 29px 3px 9px;
  position: relative;
  cursor: pointer;
  user-select: none;
  display: block;
  text-decoration: none;
  color: inherit;
}

.wgo-player__menu-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wgo-player__menu-item--checked:after {
  content: '\e813';
  position: absolute;
  right: 6px;
  top: 6px;
  font-family: "wgo-icons";
}

/* Available icons: */
.wgo-player__icon-fast-forward:before {
  font-family: "wgo-icons";
  content: '\e817';
}

.wgo-player__icon-to-end:before {
  font-family: "wgo-icons";
  content: '\e81a';
  display: inline-block;
}

.wgo-player__icon-play:before {
  font-family: "wgo-icons";
  content: '\e80c';
  display: inline-block;
}

.wgo-player__icon-check:before {
  font-family: "wgo-icons";
  content: '\e813';
  display: inline-block;
}

.wgo-player__icon-menu:before {
  font-family: "wgo-icons";
  content: '\e81b';
  display: inline-block;
}

.wgo-player__icon-comment:before {
  font-family: "wgo-icons";
  content: '\e800';
  display: inline-block;
}

.wgo-player__icon-help-circled:before {
  font-family: "wgo-icons";
  content: '\e80f';
  display: inline-block;
}

.wgo-player__icon-check-empty:before {
  font-family: "wgo-icons";
  content: '\e814';
  display: inline-block;
}

.wgo-player__icon-circle-empty:before {
  font-family: "wgo-icons";
  content: '\e816';
  display: inline-block;
}

.wgo-player__icon-circle:before {
  font-family: "wgo-icons";
  content: '\e815';
  display: inline-block;
}

.wgo-player__icon-info:before {
  font-family: "wgo-icons";
  content: '\e801';
  display: inline-block;
}

.wgo-player__icon--reverse:before {
  transform: scaleX(-1);
}

.wgo-player__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(1px);
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.wgo-player__overlay__close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.wgo-player__modal {
  max-width: 90%;
  max-height: 90%;
  width: 500px;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.wgo-player__modal__content {
  width: 100%;
  height: 100%;
  background: white;
}

.wgo-player__wgo-info {
  padding: 0 15px 10px;
  font-size: 0.933em;
  background: var(--box-background);
}

/* TEMP */

.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
    color: #333333;
    background-color: #ebebeb;
    border-color: #adadad;
}

.btn:active, .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.box {
  display: flex;
  padding: 10px 20px;
  background: rgba(121, 85, 72, 0.05);
  margin: 0 0px 1px 1px;
  flex: 1;
  flex-direction: column;
}

.title {
  font-size: 1.5em;
  margin-bottom: 0.25em;
}

.content {
  background: rgba(255, 255, 255, 0.5);
  flex: 1;
}