roll20-character-sheets/Prose Descriptive Qualities (hbCyber)/sheet.css

/* -- tailwind utilities ---------------------------------------------------- */

.sheet-flex {
  display: flex !important;
}

.sheet-flex-row {
  flex-direction: row !important;
}

.sheet-flex-no-wrap {
  flex-wrap: nowrap !important;
}

.sheet-items-center {
  align-items: center !important;
}

.sheet-justify-between {
  justify-content: space-between !important;
}

.sheet-flex-1 {
  flex: 1 1 0% !important;
}

.sheet-flex-none {
  flex: none !important;
}

.sheet-font-mono {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.sheet-font-bold {
  font-weight: 700 !important;
}

.sheet-h-20 {
  height: 5rem !important;
}

.sheet-leading-none {
  line-height: 1 !important;
}

.sheet-mb-0 {
  margin-bottom: 0 !important;
}

.sheet-mr-2 {
  margin-right: 0.5rem !important;
}

.sheet-mb-2 {
  margin-bottom: 0.5rem !important;
}

.sheet-mr-3 {
  margin-right: 0.75rem !important;
}

.sheet-mt-8 {
  margin-top: 2rem !important;
}

.sheet-py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.sheet-pr-4 {
  padding-right: 1rem !important;
}

.sheet-absolute {
  position: absolute !important;
}

.sheet-relative {
  position: relative !important;
}

.sheet-top-0 {
  top: 0 !important;
}

.sheet-bottom-0 {
  bottom: 0 !important;
}

.sheet-left-0 {
  left: 0 !important;
}

.sheet-text-center {
  text-align: center !important;
}

.sheet-text-right {
  text-align: right !important;
}

.sheet-text-red-700 {
  color: #c53030 !important;
}

.sheet-text-green-700 {
  color: #2f855a !important;
}

.sheet-text-xs {
  font-size: 0.875rem !important;
}

.sheet-text-sm {
  font-size: 1.125rem !important;
}

.sheet-text-xl {
  font-size: 1.9rem !important;
}

.sheet-w-full {
  width: 100% !important;
}

.sheet-col-span-1 {
  grid-column: span 1 / span 1 !important;
}

/* -- styling --------------------------------------------------------------- */

/* -- sheet wrapper --------------------------------------------------------- */

.sheet-wrapper { width: 100%; box-sizing: border-box; padding-right: 2.5rem;
}

/* -- tab ------------------------------------------------------------------- */

/* -- button ---------------------------------------------------------------- */

.sheet-button {
  border-width: 1px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 1.9rem;
  height: 2.1rem;
  padding: 2px 3px;
  font-size: 1.3em;
}

/* When the button is hidden for purposes of spacing, we set its height to 0
        to avoid increasing the container's height. */

.sheet-button.sheet-button--hidden {
    visibility: hidden !important;
    height: 0 !important;
  }

/* Utility styling which makes action buttons look similar to roll buttons. */

.sheet-button.sheet-button--action-roll {
    background-color: rgb(245, 245, 245);
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border-radius: 4px;
    border-style: solid;
    border-top-color: rgb(204, 204, 204);
    border-right-color: rgb(204, 204, 204);
    border-bottom-color: rgb(187, 187, 187);
    border-left-color: rgb(204, 204, 204);
  }

.sheet-button.sheet-button--action-roll:hover {
      color: #333;
      text-decoration: none;
      background-color: #e6e6e6;
      background-position: 0 -15px;
      transition: background-position .1s linear;
    }

.sheet-button.sheet-button--action-roll:active {
      background-image: none;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      background-color: #e6e6e6;
    }

/* Icons */

.sheet-button.sheet-button--chat::before {
    font-family: 'Pictos' !important;
    content: "w" !important;
  }

.sheet-button.sheet-button--remove::before {
    font-family: 'Pictos' !important;
    content: "*" !important;
  }

/* -- textarea -------------------------------------------------------------- */

/* -- checkbox -------------------------------------------------------------- */

/* -- radio ----------------------------------------------------------------- */

/* -- label ----------------------------------------------------------------- */

/* Sheet wrapper */

.sheet-wrapper { min-width: 780px;
}

/* Panel classes */

.sheet-panel-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sheet-panel-container.sheet-panel-container--center { align-items: center;
  }

.sheet-panel {
  width: 100%;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}

/* View: player */

/* Quality grid */

.sheet-id-view-player .sheet-container-quality-headers,
	.sheet-id-view-player .sheet-container-quality {
    display: grid;
    grid-gap: 0.5rem;
    grid-gap: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    grid-template-columns: 1fr 10rem 0.5rem 9rem 0.5rem 9rem 0.5rem 9rem 0.5rem 8.5rem auto auto;
  }

.sheet-id-view-player .sheet-container-quality-headers { padding-left: 1rem; padding-right: 1rem;
  }

.sheet-id-view-player .sheet-container-quality {
    background-color: #f7fafc;
    padding: 1rem;
  }

.sheet-id-view-player .sheet-container-quality .sheet-id-label-out-of-scene { display: none;
    }

.sheet-id-view-player .sheet-container-quality .sheet-id-attr-quality-out-of-scene[value="true"] ~ .sheet-id-label-out-of-scene { display: inline;
    }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str { display: none;
    }

.sheet-id-view-player .sheet-container-quality .sheet-id-attr-quality-out-of-scene:not([value="true"]) ~ .sheet-id-container-roll-str { display: flex;
    }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str {
      height: 2.6rem;
    }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="downshifted"] ~ .sheet-id-label-roll-str { color: #c53030;
      }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="upshifted"] ~ .sheet-id-label-roll-str { color: #2f855a;
      }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="downshifted"] ~ .sheet-id-label-target-num { color: #c53030;
      }

.sheet-id-view-player .sheet-container-quality .sheet-id-container-roll-str .sheet-id-attr-quality-status[value="upshifted"] ~ .sheet-id-label-target-num { color: #2f855a;
      }/* Roll templates */

.sheet-rolltemplate-chat,
.sheet-rolltemplate-roll {
  /* -- styling ----------------------------------------------------------- */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  background-color: #fff;
}

/* -- tailwind utilities ------------------------------------------------ */

.sheet-rolltemplate-chat .sheet-flex, .sheet-rolltemplate-roll .sheet-flex {
    display: flex !important;
  }

.sheet-rolltemplate-chat .sheet-flex-row, .sheet-rolltemplate-roll .sheet-flex-row {
    flex-direction: row !important;
  }

.sheet-rolltemplate-chat .sheet-flex-no-wrap, .sheet-rolltemplate-roll .sheet-flex-no-wrap {
    flex-wrap: nowrap !important;
  }

.sheet-rolltemplate-chat .sheet-items-center, .sheet-rolltemplate-roll .sheet-items-center {
    align-items: center !important;
  }

.sheet-rolltemplate-chat .sheet-justify-between, .sheet-rolltemplate-roll .sheet-justify-between {
    justify-content: space-between !important;
  }

.sheet-rolltemplate-chat .sheet-flex-1, .sheet-rolltemplate-roll .sheet-flex-1 {
    flex: 1 1 0% !important;
  }

.sheet-rolltemplate-chat .sheet-flex-none, .sheet-rolltemplate-roll .sheet-flex-none {
    flex: none !important;
  }

.sheet-rolltemplate-chat .sheet-font-mono, .sheet-rolltemplate-roll .sheet-font-mono {
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  }

.sheet-rolltemplate-chat .sheet-font-bold, .sheet-rolltemplate-roll .sheet-font-bold {
    font-weight: 700 !important;
  }

.sheet-rolltemplate-chat .sheet-h-20, .sheet-rolltemplate-roll .sheet-h-20 {
    height: 5rem !important;
  }

.sheet-rolltemplate-chat .sheet-leading-none, .sheet-rolltemplate-roll .sheet-leading-none {
    line-height: 1 !important;
  }

.sheet-rolltemplate-chat .sheet-mb-0, .sheet-rolltemplate-roll .sheet-mb-0 {
    margin-bottom: 0 !important;
  }

.sheet-rolltemplate-chat .sheet-mr-2, .sheet-rolltemplate-roll .sheet-mr-2 {
    margin-right: 0.5rem !important;
  }

.sheet-rolltemplate-chat .sheet-mb-2, .sheet-rolltemplate-roll .sheet-mb-2 {
    margin-bottom: 0.5rem !important;
  }

.sheet-rolltemplate-chat .sheet-mr-3, .sheet-rolltemplate-roll .sheet-mr-3 {
    margin-right: 0.75rem !important;
  }

.sheet-rolltemplate-chat .sheet-mt-8, .sheet-rolltemplate-roll .sheet-mt-8 {
    margin-top: 2rem !important;
  }

.sheet-rolltemplate-chat .sheet-py-4, .sheet-rolltemplate-roll .sheet-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

.sheet-rolltemplate-chat .sheet-pr-4, .sheet-rolltemplate-roll .sheet-pr-4 {
    padding-right: 1rem !important;
  }

.sheet-rolltemplate-chat .sheet-absolute, .sheet-rolltemplate-roll .sheet-absolute {
    position: absolute !important;
  }

.sheet-rolltemplate-chat .sheet-relative, .sheet-rolltemplate-roll .sheet-relative {
    position: relative !important;
  }

.sheet-rolltemplate-chat .sheet-top-0, .sheet-rolltemplate-roll .sheet-top-0 {
    top: 0 !important;
  }

.sheet-rolltemplate-chat .sheet-bottom-0, .sheet-rolltemplate-roll .sheet-bottom-0 {
    bottom: 0 !important;
  }

.sheet-rolltemplate-chat .sheet-left-0, .sheet-rolltemplate-roll .sheet-left-0 {
    left: 0 !important;
  }

.sheet-rolltemplate-chat .sheet-text-center, .sheet-rolltemplate-roll .sheet-text-center {
    text-align: center !important;
  }

.sheet-rolltemplate-chat .sheet-text-right, .sheet-rolltemplate-roll .sheet-text-right {
    text-align: right !important;
  }

.sheet-rolltemplate-chat .sheet-text-red-700, .sheet-rolltemplate-roll .sheet-text-red-700 {
    color: #c53030 !important;
  }

.sheet-rolltemplate-chat .sheet-text-green-700, .sheet-rolltemplate-roll .sheet-text-green-700 {
    color: #2f855a !important;
  }

.sheet-rolltemplate-chat .sheet-text-xs, .sheet-rolltemplate-roll .sheet-text-xs {
    font-size: 0.875rem !important;
  }

.sheet-rolltemplate-chat .sheet-text-sm, .sheet-rolltemplate-roll .sheet-text-sm {
    font-size: 1.125rem !important;
  }

.sheet-rolltemplate-chat .sheet-text-xl, .sheet-rolltemplate-roll .sheet-text-xl {
    font-size: 1.9rem !important;
  }

.sheet-rolltemplate-chat .sheet-w-full, .sheet-rolltemplate-roll .sheet-w-full {
    width: 100% !important;
  }

.sheet-rolltemplate-chat .sheet-col-span-1, .sheet-rolltemplate-roll .sheet-col-span-1 {
    grid-column: span 1 / span 1 !important;
  }

.sheet-rolltemplate-chat .sheet-rt-header, .sheet-rolltemplate-roll .sheet-rt-header {
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #000;
  }

.sheet-rolltemplate-chat .sheet-rt-header .sheet-rt-header__title, .sheet-rolltemplate-roll .sheet-rt-header .sheet-rt-header__title { flex: 1 1 0%; font-size: 1.125rem; color: #fff; font-weight: 700;
    }

.sheet-rolltemplate-chat .sheet-rt-header .sheet-rt-header__subtitle, .sheet-rolltemplate-roll .sheet-rt-header .sheet-rt-header__subtitle { flex: none; font-size: 1.125rem; color: #e2e8f0; font-style: italic; margin-left: 1rem;
    }

.sheet-rolltemplate-chat .sheet-rt-grid, .sheet-rolltemplate-roll .sheet-rt-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-column-gap: 1rem;
    grid-column-gap: 1rem;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: center;
  }

.sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item {
      grid-column: span 3 / span 3;
      font-size: 1.125rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

.sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--1\/3, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--1\/3 { grid-column: span 4 / span 4;
      }

.sheet-rolltemplate-chat .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--2\/3, .sheet-rolltemplate-roll .sheet-rt-grid .sheet-rt-grid__item.sheet-rt-grid__item--2\/3 { grid-column: span 8 / span 8;
      }

.sheet-rolltemplate-chat .sheet-rt-separator, .sheet-rolltemplate-roll .sheet-rt-separator { flex: none; border-style: solid; border-width: 0; border-bottom-width: 1px; border-color: #cbd5e0;
  }

.sheet-rolltemplate-chat .sheet-rt-text, .sheet-rolltemplate-roll .sheet-rt-text { flex: none; font-size: 1.125rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
  }