bol/styles/bol.less

@import "flex";
@import "forms";
@import "typography";

@logo-width: 190px;
@logo-height: 115px;
@deco-width: 330px;
@deco-height: 62px;
@attributes-width: 64px;
@attributes-height: 64px;
@footer-height: 30px;
@sidebar-width: 250px;
@colorOlive: #4b4a44;

.bol {
  &.sheet {
    &.actor {
      .window-content {
        background-color: white;
        background-image: url("/systems/bol/ui/logo.webp");
        background-repeat: no-repeat;
        background-size: @logo-width @logo-height;
        height: 100%;
        padding: 5px;
        overflow-y: hidden;

        form {
          height: 100%;

          .sheet-header {
            //background-color: red;
            background-image: url("/systems/bol/ui/banner.webp");
            background-repeat: no-repeat;
            background-size: @deco-width @deco-height;
            background-position-y: -15px;
            background-position-x: right;

            //padding-left: @logo-width;
            //padding-top: @deco-height;
            height: @logo-height;
            min-height: @logo-height;
            max-height: @logo-height;

            overflow: hidden;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items:flex-end;
            padding-bottom: 10px;

            .header-field {
              //background-color: pink;
              //border:1px solid black;

              .header-field-group {
                overflow: hidden;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items:baseline;

                .header-field-label {
                  margin-right: 5px;
                }
                .charname,
                .header-field-value{
                  color: @colorOlive;
                  font-family: 'Contrail One', cursive;
                  font-size: 1.5rem;
                  background-color: #EEE;
                }
                //.charname {
                  ////color: @colorOlive;
                  //font-family: Wolfsbane2Expanded;
                  //height: 50px;
                  //padding: 0px;
                  //margin: -10px 0 10px 0;
                  //color: @colorOlive;
                  //font-family: Wolfsbane2Expanded;
                  //font-family: 'Contrail One', cursive;
                  //font-size: 1.5rem;
                  //background-color: #EEE;
                  //width: 100%;
                  //height: 100%;
                  //margin: 0;
                //}
              }

            }
          }

          .sidebar {
            //background-color: green;
            //background-color: red;
            padding-top: @logo-height;
            min-width: @sidebar-width;
            width: @sidebar-width;
            max-width: @sidebar-width;

            .profile-img {
              cursor: pointer;
              border: none;
              background-color: #EEE;
              height: auto;
              width: calc(@sidebar-width - 10px);
              min-width: calc(@sidebar-width - 10px);
              max-width: calc(@sidebar-width - 10px);
              margin-right: 10px;
            }
          }

          .main {
            //background-color: blue;
            //background-image: url("/systems/bol/ui/border.webp");
            //background-repeat: no-repeat;
            ////background-size: 40px 40px;
            //background-position: top left;

            /* Sheet Tabs */

            .tabs {
              flex: 0 0 40px;
              background-color: black;

              .item {
                line-height: 40px;
                font-weight: bold;
                font-family: CCMeanwhile;
                color: white;
                font-size: 14px;
              }

              .item.active {
                text-decoration: underline;
                text-shadow: none;
              }
            }

            .sheet-body {
              overflow: hidden;

              .tab {
                height: 100%;
                overflow-y: auto;
                /* Items List */

                .items-list {
                  list-style: none;
                  margin: 7px 0;
                  padding: 0;
                  overflow-y: auto;

                  .item {
                    min-height: 30px;
                    line-height: 24px;
                    padding: 3px 0 3px 3px;
                    border-bottom: 1px solid #BBB;
                    align-items: stretch;

                    img {
                      flex: 0 0 30px;
                      margin-right: 5px;
                    }

                    .item-image {
                      margin: 0;
                    }
                    .item-name {
                      margin: 0;
                    }

                    .item-controls {
                      flex: 0 0 36px;
                    }

                    .item-buttons {
                      display: flex;
                      flex-wrap: wrap;
                      flex-direction: row;
                      align-items: center;
                      flex: 2;
                      justify-content: flex-start;
                    }

                    .item-button {
                      line-height: 1;
                      font-size: 11px;
                      flex: none;
                      width: auto;
                    }

                  }

                  .item-header {
                    //background-color: black;
                    //color: white;
                    font-family: CCMeanwhile;
                    //font-size: 1.2rem;
                    //.item-image {
                    //  font-family: Wolfsbane2;
                    //  font-size: 1.5rem;
                    //}
                  }
                }
                .attribute {
                  &.vigor {
                    background-image: url("/systems/bol/ui/attributes/vigor.webp");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: @attributes-width @attributes-height;
                  }

                  &.agility {
                    background-image: url("/systems/bol/ui/attributes/agility.webp");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: @attributes-width @attributes-height;
                  }

                  &.mind {
                    background-image: url("/systems/bol/ui/attributes/mind.webp");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: @attributes-width @attributes-height;
                  }

                  &.appeal {
                    background-image: url("/systems/bol/ui/attributes/appeal.webp");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: @attributes-width @attributes-height;
                  }

                  .stat-value {
                    margin-top:-10px;
                  }
                }
                &.description {
                  .editor, .editor-content {
                    background-color: red;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }

      .stat-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: darkred;
      }

      .stat-roll {
        font-size: 1.5rem;
      }

      .header-field-label,
      .stat-label {
        font-weight: bold;
        font-family: Wolfsbane2Expanded;
        font-size: 2rem;
        font-variant: small-caps;
      }


      .rounded {
        //border : 2px solid black;
        border-radius: 100px;
        width: 4rem;
        height: 4rem;
      }

      .rounded-border {
        border: 3px solid @colorOlive;
        border-radius: 100px;
        width: 4rem;
        height: 4rem;
      }

      .half-rounded {
        border-radius: 100px 100px 0px 0px;
        width: 4rem;
        height: 4rem;
      }

      .half-rounded-border {
        border-radius: 100px 100px 0px 0px;
        border: 3px solid @colorOlive;
        width: 4rem;
        height: 4rem;
      }

      .bol-footer {
        height: @deco-height;
        max-height: @deco-height;
        min-height: @deco-height;

        .footer-left {
          img {
            border: none;
            height: @deco-height;
            max-height: @deco-height;
            min-height: @deco-height;
            transform: scaleX(-1);
          }
        }

        .footer-center {
          margin-top: 20px;
          margin-left: calc(-@deco-width * 2);
          margin-right: calc(-@deco-width * 2);
          height: @footer-height;
          max-height: @footer-height;
          min-height: @footer-height;
          background-color: black;
        }

        .footer-right {
          text-align: right;

          img {
            border: none;
            height: @deco-height;
            max-height: @deco-height;
            min-height: @deco-height;
          }
        }
      }

      min-width: 760px;
      min-height: 700px;
      max-height: 700px;
    }
    &.item {
      .window-content {
        background-color: white;
        background-image: url("/systems/bol/ui/logo.webp");
        background-repeat: no-repeat;
        background-size: @logo-width @logo-height;
        height: 100%;
        padding: 5px;
        overflow-y: hidden;

        form {
          height: 100%;
        }
      }

      min-width: 460px;
      min-height: 400px;
    }
  }
}

.editor, .editor-content {
  height: 100%;
}

.rollable {
  color: @colorOlive;
  cursor: pointer;
}

.malus {
  color: darkred;
}

.bonus {
  color: darkgreen;
}

.chat-message .chat-icon {
  border: 0;
  padding: 2px 6px 2px 2px;
  float: left;
  width: 64px;
  height: 64px;
}