roll20-character-sheets/Aces-In-Space/aces_in_space.css

@import url("https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap|family=Orbitron");
/* === GENERAL === */

.sheet-hidden {
  display: none !important;
}

.charsheet {
  min-width: 850px;
}

.sheet-header {
  margin-bottom: 4px;
  padding: 2px 4px;
  background: black;
  color: white;
  font-weight: bold;
}

.sheet-section {
  float: left;
  width: 100%;
  margin: 4px 0;
  padding: 1px;
  box-sizing: border-box;
}

.sheet-half {
  max-width: 50%;
}

.sheet-half-left {
  max-width: 60.5%;
}

.sheet-half-right {
  max-width: 39.5%;
}

.sheet-break {
  clear: both;
}

label, select {
  margin: 0;
}

textarea {
  margin: 0;
  width: 100%;
  height: auto;
  resize: vertical;
  box-sizing: border-box;
}

.sheet-repitem, .repitem {
  margin-bottom: 2px;
}

/* Override Roll20 Button styling for something less conspicious */

button {
  height: 22px;
  line-height: 16px;
  margin: 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.repitem button {
  height: 28px;
  line-height: 20px;
}

textarea, span, label {
  box-sizing: border-box;
}

/* Inputs and echeckboxes */

input[type="number"], input[type="text"], textarea {
  border: none;
  font-family: inherit;
  background: transparent;
  box-shadow: none;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #333;
  border-radius: 0;
  transition: all 0.2s, height 0.4s;
}

input[type="checkbox"] {
  opacity: 0;
  z-index: 1;
  -moz-appearance: none;
  vertical-align: unset;
  position: relative;
}

input[type="checkbox"]+span {
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s, opacity 0s;
}

label input[type="checkbox"] {
  position: absolute;
}

label:hover input[type="checkbox"]+span {
  opacity: 0.7;
}

input[type="checkbox"].sheet-squarebox {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: -12px;
}

input[type="checkbox"].sheet-squarebox+span {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid black;
}

input[type="checkbox"].sheet-squarebox:hover+span {
  opacity: 0.7;
}

input[type="checkbox"].sheet-squarebox:last-child+span {
  margin-right: 0 !important;
}

input[type="checkbox"].sheet-squarebox+span {
  background: white;
}

input[type="checkbox"].sheet-squarebox:checked+span {
  background: #4e7d7f;
}

/* === Header of sheet === */

.sheet-logo {
  width: 190px;
  max-height: 100px;
  margin: 0 5px;
  float: left;
  grid-row: span 2;
}

.sheet-section-basic tr {
  margin-left: 5px;
}

.sheet-section-basic td {
  padding: 2px;
}

.sheet-section-basic input[type="number"] {
  width: 100px;
}

.sheet-section-basic .sheet-column {
  width: calc(50% - 200px);
}

.sheet-characterbox {
  display: grid;
  grid-template: auto/200px 3fr 1fr 1fr 1fr 1fr;
}

/* === Aces in Space style boxes === */

.sheet-ace-box {
  align-self: stretch;
  border: 1px solid black;
}

.sheet-characterbox .sheet-ace-box .sheet-content input {
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sheet-playbook {
  grid-column: span 2;
}

.sheet-callsign {
  grid-column: span 2;
}

.sheet-namepronouns {
  grid-column: span 2;
}

.sheet-description {
  grid-column: span 6;
}

.sheet-ace-box .sheet-title {
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Saira Stencil One";
  background-color: #e3e3e3;
  display: flex;
}

.sheet-ace-box .sheet-title label {
  color: #4e7d7f;
}

.sheet-ace-box .sheet-title span {
  color: #4e7d7f;
  width: 10px;
}

.sheet-ace-box .sheet-content {
  gap: 5px;
  padding-left: 5px;
  font-size: 12px;
}

.sheet-character-body {
  display: grid;
  grid-template: auto/50% 50%;
}

/* === SKILLS === */

.sheet-section-skills {
  min-width: 400px;
  grid-column: span 2;
}

.sheet-section-skills input {
  width: 58px;
  grid-column: span 1;
}

.sheet-section-skills td:first-child {
  text-align: right;
  font-weight: bold;
  padding: 0 4px;
}

.sheet-skill-on {
  border: 1px solid black;
}

.sheet-skill-off {
  background-color: #E3E3E3;
  border: 1px solid gray;
}

/* === ASPECTS === */

.sheet-section-aspects {
  grid-column: span 2;
}

.sheet-section-aspects .sheet-content label {
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Saira Stencil One";
  width: 130px;
  margin: 3px;
  color: #4e7d7f;
}

.sheet-section-aspects .sheet-content input {
  font-size: 16px;
  width: 100%;
  margin: 3px;
  color: #4e7d7f;
}

.sheet-section-aspects .sheet-aspectitem, .sheet-section-aspects .repitem {
  display: flex;
}

/* === STRESS === */

.sheet-section-stress input[type="checkbox"] {
  margin-left: 5px;
}

.sheet-stress-box {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: left;
}

.sheet-stress-element {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

.sheet-stress-element label{
  padding: 5px;
  width: 15px;
}

.sheet-stress-element .sheet-stress-restriction {
  font-style: italic;
  margin-top: 2px;
}

/* === CONSEQUENCES === */

.sheet-section-consequences {
  float: right;
  display: block;
}

.sheet-section-consequences .repitem {
  display: flex;
}

.sheet-section-consequences select {
  width: 130px;
  float: left;
}

.sheet-section-consequences input {
  margin-left: 10px;
  width: calc(100% - 132px);
}

/* Stunts */

.sheet-section-stunts input {
  color: #222;
  font-weight: bolder;
  width: 100%;
}

.sheet-bold input {
  color: #222;
  font-weight: bolder;
  width: 100%;
}

.charsheet .attr_stunt-name, .charsheet .attr_extras-name {
  color: #222;
  font-weight: bolder;
  width: 100%;
}

.charsheet .sheet-section-stress td, .charsheet .attr_extras-name td {
  display: inline-block;
}

.sheet-stress-small {
  font-size: 11px;
}

/* === Change default Skill box width === */

.sheet-section-skills input {
  width: 116px;
}

.sheet-description-long {
  width: 50%;
}

/* === Roll type displaying === */

button.sheet-roll_type_1, button.sheet-roll_type_2 {
  display: none;
}

input.sheet-roll_method_1:checked~div button.sheet-roll_type_1, input.sheet-roll_method_2:checked~div button.sheet-roll_type_2 {
  display: inline-block !important;
}

input.sheet-roll_method_1, input.sheet-roll_method_2 {
  background-color: #3f3f3f;
  width: 12px;
  text-align: right;
  display: inline;
  padding-left: 6em;
}

.sheet-section-skills {
  text-align: center;
}

/* === some fixing === */

.sheet-header {
  text-align: left;
}

td, .sheet-fullwidth {
  white-space: nowrap;
}

.charsheet input.sheet-sktab_1, .charsheet input.sheet-sktab_2 {
  background-color: #3f3f3f;
  width: 12px;
  text-align: right;
  display: inline;
  padding-left: 6em;
}

div.sheet-break-10 {
  clear: both;
  height: 10px;
}

.sheet-rank {
  width: 124px;
  background-color: #Fefefe;
  font-size: .9em;
  font-weight: bolder;
  padding: 1px;
  font-family: sans-serif;
  border: 0;
}

input.sheet-skill-dyn {
  width: 113px;
}

/* === SKILL TABS === */

div.sheet-sktab-content {
  display: none;
}

.sheet-skill-grid {
  display: grid;
  grid-template: auto / repeat(6, 1fr);
}

.sheet-skill-row {
  display: grid;
  grid-template: 1fr / repeat(6, 1fr);
}

input.sheet-sktab_1:checked~div.sheet-sktab_2, input.sheet-sktab_2:checked~div.sheet-sktab_1 {
  display: block;
}

/* === stunts and extra tabs === */

div.sheet-tab-content {
  display: block;
}

.charsheet input.sheet-tab2 {
  left: 286px;
  cursor: pointer;
}

.charsheet input.sheet-tab1+span::before, .charsheet input.sheet-tab2+span::before {
  content: attr(title);
  display: inline-block;
  width: 150px;
  color: #111;
  padding-left: 10px;
}

input.sheet-tab+span::before {
  left: 139px;
}

.charsheet input.sheet-tab2+span::before {
  left: 680px;
}

input.sheet-tab:not(:first-child)+span::before {
  border-left: none;
}

sheet-pos {
  z-index: initial;
}

/* ==== Advancements ==== */

.sheet-section-advancements .sheet-content {
  display: grid;
  grid-template: 1fr 2fr/1fr 1fr;
}

.sheet-section-advancements .sheet-triggers {
  grid-column: span 2;
}

/* ==== Vibes ==== */

.sheet-section-vibes .repitem {
  display: flex;
}

.sheet-section-vibes select {
  width: 45px;
  float: right;
}