onix-chess-game/dist/css/analyse-game.css

Chess game board

.username {
  color: #666;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username:link, .username:active, .username:visited {
    color: #666;
    border-style: none;
    text-decoration: none; }
  .username:hover {
    color: #666;
    text-decoration: underline; }

.username_bronze, .username.bronze {
  color: #000;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username_bronze:link, .username_bronze:active, .username_bronze:visited, .username.bronze:link, .username.bronze:active, .username.bronze:visited {
    color: #000;
    border-style: none;
    text-decoration: none; }
  .username_bronze:hover, .username.bronze:hover {
    color: #000;
    text-decoration: underline; }

.username_silver, .username.silver {
  color: #006699;
  border-style: none;
  font-weight: 500;
  text-decoration: none; }
  .username_silver:link, .username_silver:active, .username_silver:visited, .username.silver:link, .username.silver:active, .username.silver:visited {
    color: #006699;
    border-style: none;
    text-decoration: none; }
  .username_silver:hover, .username.silver:hover {
    color: #006699;
    text-decoration: underline; }

.username_gold, .username.gold {
  color: #FF9900;
  border-style: none;
  font-weight: 500;
  text-decoration: none; }
  .username_gold:link, .username_gold:active, .username_gold:visited, .username.gold:link, .username.gold:active, .username.gold:visited {
    color: #FF9900;
    border-style: none;
    text-decoration: none; }
  .username_gold:hover, .username.gold:hover {
    color: #FF9900;
    text-decoration: underline; }

.username_engine, .username.engine {
  color: #006600;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username_engine:link, .username_engine:active, .username_engine:visited, .username.engine:link, .username.engine:active, .username.engine:visited {
    color: #006600;
    border-style: none;
    text-decoration: none; }
  .username_engine:hover, .username.engine:hover {
    color: #006600;
    text-decoration: underline; }

.username_admin, .username.admin {
  color: #006600;
  border-style: none;
  font-weight: 500;
  text-decoration: none; }
  .username_admin:link, .username_admin:active, .username_admin:visited, .username.admin:link, .username.admin:active, .username.admin:visited {
    color: #006600;
    border-style: none;
    text-decoration: none; }
  .username_admin:hover, .username.admin:hover {
    color: #006600;
    text-decoration: underline; }

.username_clone, .username.clone {
  color: #DACF6B;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username_clone:link, .username_clone:active, .username_clone:visited, .username.clone:link, .username.clone:active, .username.clone:visited {
    color: #DACF6B;
    border-style: none;
    text-decoration: none; }
  .username_clone:hover, .username.clone:hover {
    color: #DACF6B;
    text-decoration: underline; }

.username_staff, .username.staff {
  color: #006600;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username_staff:link, .username_staff:active, .username_staff:visited, .username.staff:link, .username.staff:active, .username.staff:visited {
    color: #006600;
    border-style: none;
    text-decoration: none; }
  .username_staff:hover, .username.staff:hover {
    color: #006600;
    text-decoration: underline; }

.username_vip, .username.vip {
  color: #000;
  border-style: none;
  font-weight: normal;
  text-decoration: none; }
  .username_vip:link, .username_vip:active, .username_vip:visited, .username.vip:link, .username.vip:active, .username.vip:visited {
    color: #000;
    border-style: none;
    text-decoration: none; }
  .username_vip:hover, .username.vip:hover {
    color: #000;
    text-decoration: underline; }

.username-block {
  max-width: 100%;
  display: inline-flex; }

.upic-wrapper {
  display: inline-block; }

.info-wrapper {
  overflow: hidden; }
  .info-wrapper > div {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .info-wrapper h5 {
    margin-top: 0;
    margin-bottom: 0.35714rem;
    font-weight: 600; }
  .info-wrapper p {
    margin: 0; }

.k-grid .upic, .kv-grid-table .upic {
  display: inline-block;
  background-position: center center;
  vertical-align: middle;
  margin-left: 0.35714rem; }
  .k-grid .upic.rounded, .kv-grid-table .upic.rounded {
    border-radius: 50%;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, 0.2); }
  .k-grid .upic.small, .kv-grid-table .upic.small {
    width: 2.28571rem;
    height: 2.28571rem;
    background-size: 2.28571rem 2.28571rem;
    line-height: 2.28571rem; }
  .k-grid .upic + div, .kv-grid-table .upic + div {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.21429rem; }

.upic-wrapper + .info-wrapper {
  margin-left: 0.71429rem; }
  .upic-wrapper + .info-wrapper::after {
    content: " ";
    display: table; }

.post .upic-wrapper {
  margin-right: 1.14286rem; }

.upic {
  display: inline-block;
  overflow: hidden; }
  .upic img {
    width: 100%;
    height: 100%; }
  .upic.tiny {
    width: 2.28571rem;
    height: 2.28571rem; }
  .upic.small {
    width: 3.42857rem;
    height: 3.42857rem; }
  .upic.medium {
    width: 4.57143rem;
    height: 4.57143rem; }
  .upic.large {
    width: 5.71429rem;
    height: 5.71429rem; }
  .upic.huge {
    width: 11.42857rem;
    height: 11.42857rem; }
  .upic[data-online-mark] {
    box-sizing: border-box;
    border: 3px solid transparent; }
    .upic[data-online-mark].tiny {
      border-width: 0.14286rem; }
      .upic[data-online-mark].tiny img {
        width: 2rem;
        height: 2rem; }
    .upic[data-online-mark].small {
      border-width: 0.21429rem; }
      .upic[data-online-mark].small img {
        width: 3rem;
        height: 3rem; }
    .upic[data-online-mark].medium {
      border-width: 0.21429rem; }
      .upic[data-online-mark].medium img {
        width: 4.14286rem;
        height: 4.14286rem; }
    .upic[data-online-mark].large {
      border-width: 0.21429rem; }
      .upic[data-online-mark].large img {
        width: 5.28571rem;
        height: 5.28571rem; }
    .upic[data-online-mark].huge {
      border-width: 0.28571rem; }
      .upic[data-online-mark].huge img {
        width: 10.85714rem;
        height: 10.85714rem; }
    .upic[data-online-mark][data-online-time="now"] {
      border-color: #ff8719 !important; }
    .upic[data-online-mark][data-online-time="30m"] {
      border-color: #c29008 !important; }
    .upic[data-online-mark][data-online-time="1h"] {
      border-color: #e3c800 !important; }
    .upic[data-online-mark][data-online-time="12h"] {
      border-color: #008a00 !important; }
    .upic[data-online-mark][data-online-time="1d"] {
      border-color: #1ba1e2 !important; }
    .upic[data-online-mark][data-online-time="3d"] {
      border-color: #0050ef !important; }
    .upic[data-online-mark][data-online-time="7d"] {
      border-color: #aa00ff !important; }
    .upic[data-online-mark][data-online-time="30d"] {
      border-color: #0050ef !important; }
    .upic[data-online-mark][data-online-time="none"] {
      border-color: #333 !important; }
  .upic.rounded {
    border-radius: 50% !important; }

.conn-status {
  display: inline-block; }
  .conn-status .status-icon[data-online-time="now"] {
    color: #ff8719 !important; }
  .conn-status .status-icon[data-online-time="30m"] {
    color: #c29008 !important; }
  .conn-status .status-icon[data-online-time="1h"] {
    color: #e3c800 !important; }
  .conn-status .status-icon[data-online-time="12h"] {
    color: #008a00 !important; }
  .conn-status .status-icon[data-online-time="1d"] {
    color: #1ba1e2 !important; }
  .conn-status .status-icon[data-online-time="3d"] {
    color: #0050ef !important; }
  .conn-status .status-icon[data-online-time="7d"] {
    color: #aa00ff !important; }
  .conn-status .status-icon[data-online-time="30d"] {
    color: #9a1616 !important; }
  .conn-status .status-icon[data-online-time="none"] {
    color: #333 !important; }

.username-popup {
  width: 276px; }

.movetimes .recharts-text {
  font-size: .75rem; }

.movetimes .recharts-bar.white .recharts-bar-rectangle {
  fill: #f0d9b5; }

.movetimes .recharts-bar.black .recharts-bar-rectangle {
  fill: #b58863; }

.movetimes .graph-totals {
  max-width: none; }
  .movetimes .graph-totals label {
    font-weight: 500; }
  .movetimes .graph-totals .white {
    background-color: #f0d9b5;
    color: #000; }
    .movetimes .graph-totals .white a {
      color: #000;
      text-decoration: none; }
      .movetimes .graph-totals .white a:hover {
        text-decoration: underline; }
  .movetimes .graph-totals .black {
    background-color: #b58863;
    color: #fff; }
    .movetimes .graph-totals .black a {
      color: #fff;
      text-decoration: none; }
      .movetimes .graph-totals .black a:hover {
        text-decoration: underline; }

@media (min-width: 992px) {
  .movetimes .graph-totals {
    max-width: 12.14286rem; } }

.analyse .recharts-text {
  font-size: .75rem; }

.analyse .graph-totals {
  max-width: none; }
  .analyse .graph-totals label {
    font-weight: 500;
    margin-left: .25rem; }
  .analyse .graph-totals .white {
    background-color: #f0d9b5;
    color: #000; }
    .analyse .graph-totals .white a {
      color: #000;
      text-decoration: none; }
      .analyse .graph-totals .white a:hover {
        text-decoration: underline; }
  .analyse .graph-totals .black {
    background-color: #b58863;
    color: #fff; }
    .analyse .graph-totals .black a {
      color: #fff;
      text-decoration: none; }
      .analyse .graph-totals .black a:hover {
        text-decoration: underline; }

@media (min-width: 992px) {
  .analyse .graph-totals {
    max-width: 15rem; } }