roll20-character-sheets/Cyberpunk Red/CyberpunkRed.css

.sheet-main {
  display: grid;
  /*width: 720px;*/
  height: 2000px;
  grid-gap: 4px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 140px 100px 100px;
  grid-auto-rows: min-content min-content min-content min-content min-content min-content;
  grid-template-areas:"header  header  common  common"
                      "stats   stats   stats   stats"
                      "hits    hits    hits    hits"
                      "skills  skills  armor   armor"
                      "skills  skills  weapons weapons"
                      "life    life    gear    gear";
}

/*----------------- GENERAL CSS ------------------*/

.sheet-skillinfo {
  display: none;
}

.sheet-skillinfocheck:checked ~ .sheet-skillinfo {
  display: block;
}

.sheet-flex-row {
  display: flex;
  flex-flow: col wrap;
  align-items: center;
}
div.sheet-tabledisplay {
    display:table;
    whitespace:nowrap;
}
div.sheet-celldisplay {
    display:table-cell;
    whitespace:nowrap;
}
textarea {
  width: 90%;
  height: 5em;
}

h1 {
  color :white;
}

label {
  color: white;
  display: block;
}

input.sheet-inputstats {
  margin-right: 20px;
}

.sheet-section {
    background-color: #dc4435;
    padding: 5px;
    border-style: solid;
    color: white;
    position:relative;
}

.sheet-rolltemplate-default caption {
    color:white;
    background: linear-gradient(135deg, transparent 10px, #dc4435 10px);
    padding:10px;
}

.sheet-rolltemplate-initiative .sheet-template-container {
    width:100%;
}

.sheet-rolltemplate-initiative .sheet-template-header {
    color:white;
	padding: 10px;
    background: linear-gradient(135deg, transparent 10px, #dc4435 10px);
}

.sheet-rolltemplate-initiative .sheet-roll {
    background-color: white;
    color:black;
	width: 100%;
}

.sheet-rolltemplate-initiative .sheet-normalroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: black;
	padding: 10px;
}

.sheet-rolltemplate-cprskill .sheet-template-container {
    width:100%;
}

.sheet-rolltemplate-cprskill .sheet-template-header {
    color:white;
	padding: 10px;
    background: linear-gradient(135deg, transparent 10px, #dc4435 10px);
}

.sheet-rolltemplate-cprskill .sheet-roll {
    background-color: white;
    color:black;
	width: 100%;
}

.sheet-rolltemplate-cprskill .sheet-normalroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: black;
	padding: 10px;
}

.sheet-rolltemplate-cprskill .sheet-critroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: green;
	padding: 10px;
}

.sheet-rolltemplate-cprskill .sheet-fumbleroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: red;
	padding: 10px;
}

.sheet-rolltemplate-cprskill .inlinerollresult.fullfail {
    border:none;
}

.sheet-rolltemplate-cprskill .inlinerollresult.fullcrit {
    border:none;
}

.sheet-rolltemplate-cprskill .sheet-critroll {
    color: green;
}

.sheet-rolltemplate-cprskill .sheet-fumbleroll {
    color: red;
}

/* -- death saves  */

.sheet-rolltemplate-cprdeathsave .sheet-template-container {
    width:100%;
}

.sheet-rolltemplate-cprdeathsave .sheet-template-header {
    color:white;
	padding: 10px;
    background: linear-gradient(135deg, transparent 10px, #dc4435 10px);
}

.sheet-rolltemplate-cprdeathsave .sheet-roll {
    background-color: white;
    color:black;
	width: 100%;
}

.sheet-rolltemplate-cprdeathsave .sheet-normalroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: black;
	padding: 10px;
}

.sheet-rolltemplate-cprdeathsave .sheet-critroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: green;
	padding: 10px;
}

.sheet-rolltemplate-cprdeathsave .sheet-fumbleroll .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: none;
	background-color: white;
	color: red;
	padding: 10px;
}

.sheet-rolltemplate-cprdeathsave .inlinerollresult.fullfail {
    border:none;
}

.sheet-rolltemplate-cprdeathsave .inlinerollresult.fullcrit {
    border:none;
}

.sheet-rolltemplate-cprdeathsave .sheet-critroll {
    color: green;
    padding: 10px;
}

.sheet-rolltemplate-cprdeathsave .sheet-fumbleroll {
    color: red;
    padding: 10px;
}

.sheet-rolltemplate-cprdeathsave .sheet-normalroll {
    padding: 10px;
}


/* -- end death saves -- */


.sheet-section:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  border-top: 15px solid white;
  border-left: 15px solid transparent;
}

.sheet-section:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 15px solid white;
  border-right: 15px solid transparent;
}

.sheet-flex-col {
  color: white;
  display: flex;
  flex-flow: row wrap;
  /*justify-content: flex-start;*/
}

.sheet-weapondamage {
  width: 4em;
}
.sheet-damageroll {
  vertical-align: top;
}

.sheet-armorname {
  font-weight: bold;
  margin-bottom: 10px;
  width:90%;
}

.sheet-flex-center {
  align-items: center;
  justify-content: center;
}

.sheet-skill {
  width: 12em;
}
.sheet-skillstat {
  width: 6em;
  vertical-align: top;
}
.sheet-skillroll {
  vertical-align: top;
}

/*------------- Section-specific CSS -------------*/

.sheet-header {
  grid-area: header;
  flex-direction: column;
}

.sheet-stats {
  grid-area: stats;
}

.sheet-common {
  grid-area: common;
}

.sheet-hits {
  grid-area: hits;
}

.sheet-skills {
  grid-area: skills;
  padding-bottom:15px;
}

.sheet-armor {
  grid-area: armor;
  padding-bottom: 15px;
}

.sheet-weapons {
  grid-area: weapons;
  padding-bottom: 15px;
}

.sheet-life {
  grid-area: life;
}

.sheet-equipment {
    grid-area: gear;
}

.sheet-cyberware {
    width:50%;
}

.sheet-gear {
    width:50%;
}

.sheet-misc {
  grid-area: misc;
}

.sheet-footer {
  grid-area: footer;
}