goban.rcss

/*
    full unicode support in the GUI
    simplified chinese example
    download e.g. Noto Sans SC Regular from
    https://fonts.google.com/noto/specimen/Noto+Sans+SC
    and add ./data/fonts/NotoSansSC-Regular.otf" to config.json
*/

.sc {
     //use a font family that contains all required glyphs
     font-family: Noto Sans SC;

     //cherry-pick ideograms used in the GUI
     //see https://barotto.github.io/libRocketDoc/pages/rcss/fonts.html for syntax
     font-charset: U+56f4,U+68cb,U+76e4,U+7070,U+7537,U+5B69;

     //or include the whole range (slows down application load and wastes texture memory)
     //font-charset: U+4E00-9FFF;
}

body, html
{
  width: 100%;
  height: 100%;
  font-family: Delicious;
  font-charset: U+0020-00FF,U+2014;
  font-weight: normal;
  font-style: normal;
  font-size: 25pt;
  color: #ffffff80;
  background-color: #000;
  border-width:0px;
  border-color:#ffffffa0;
  padding: 0px;
  margin: 0px;
  z-index: -1;
  white-space: nowrap;
  overflow: visible;
}

/* uncomment to debug layout */
/*
div {
  border-width: 1px;
  border-color:#ffff00;
}
*/

.padding {
  padding: 0.25rem;
}

div {
  position: static;
}

.menu span {
  padding-right: 0.75rem;
}

select option {
  color:#ffffff80;
}

select option:hover, .cmd:hover {
  color:#fffffff0;
}

select selectbox {
  width: 10rem;
  position:relative;
  left:9.2rem;
  top:-1.75rem;
  border-color: #ffffff00;
  padding: 0.25rem;
  background-color: #00000040;
  border-left: 1rem;
  border-right: 1rem;
  border-bottom: 1rem;
  border-top: 1rem;

}
div.cmd   {
  height: 1.25rem;
  display: block;
}

game {
  display: block;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  position: absolute;
}

.menu {
  width:100%;
  height:2rem;
  border-bottom: 1rem;
  border-color: #00000000;
}


.menu.hoverable:hover {
  background-color: #00000040;
}

.menuitem {
  position:relative;
  padding: 0.25rem;
  width: 0px;
}

.menuitem.hoverable.left {
  float:left;
  position:relative;
}

.menuitem.hoverable.right {
  float:right;
  position:relative;
}

.left .menuitem.show {
  position: absolute;
  width: 10rem;
  top: 1rem;
  left: -1rem;
  background-color: #00000040;
  border-top:1rem;
  border-left:1rem;
  border-right:1rem;
  border-bottom:1rem;
  border-color:#ffff0000;
}

.right .menuitem.show {
  position: absolute;
  width: 10rem;
  top: 1rem;
  right: -1rem;
  background-color: #00000040;
  border-top:1rem;
  border-left:1rem;
  border-right:1rem;
  border-bottom:1rem;
  border-color:#ffff0000;
}

div.selected {  border-right:0.2rem; border-color:#ffffff80; }
div.unselected {  border-right:0.2rem; border-color:#ffffff20; }

div.hide,
.show:hover,
.menu.hoverable:hover .menu:first-child.show,
.menuitem.hoverable:hover .menuitem.show,
.menuitem:hover, .menu:hover,
.hoverable:hover .hide:hover,
.hoverable:hover span
{
  display: block;
  z-index:1;
}

div.show,
.hoverable:hover .hide,
.hoverable span
{
  display: none;
  z-index: 1;
}

.bottom {  position: absolute; bottom: 0px; }
.left   {  position: absolute; left: 0px; text-align: left;  }
.center {  text-align:center; }
.right  { position:absolute; right: 0px;}
.top    {  position: absolute; top: 0px; }

div.hr
{
  display:block;
  margin-top: 0.5rem;
  margin-bottom: -0.15rem;
  border-color:#00000000;
  border-bottom: 0px;
  border-color: #ffffff40;
  font-size: 0.6rem;
}

#blackMoves {
  border-color: #ffffff00;
  border-right: 0.05rem;
}

#lblMessage {
  padding-bottom: 0.25rem;
}
.active {
  text-decoration: underline;
}