roll20-character-sheets/CyberpunkRED_Gerdofal/CyberpunkRED.css

/*
Updated 10/10/2019
*/

/* Charsheet standard formatting and sizing */
/* Note that !important may be needed to override certain settings from roll20 */

.charsheet {
	min-width: 860px;
	max-width: 860px;
	width: 860px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	font-size: 1em; 
}

.sheet-sectionbox {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	background-color: white;
	padding: 3px;
	margin: 0px;
	text-align: center;
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 0px; 
    /* Firefox 1-3.6 */
    -moz-border-radius: 0px; 
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 0px 0px 0px 0px; 
	box-sizing: border-box;
	font-size: 1em;
	float: left; /* To make the divs spacing correct */
}

/* Various width definitions */

.sheet-widthpercent05 {width: calc(5% - 1px);}
.sheet-widthpercent10 {width: calc(10% - 1px);}
.sheet-widthpercent15 {width: calc(15% - 1px);}
.sheet-widthpercent20 {width: calc(20% - 1px);}
.sheet-widthpercent25 {width: calc(25% - 1px);}
.sheet-widthpercent30 {width: calc(30% - 1px);}
.sheet-widthpercent40 {width: calc(40% - 1px);}
.sheet-widthpercent50 {width: calc(50% - 1px);}
.sheet-widthpercent70 {width: calc(70% - 1px);}
.sheet-widthpercent33 {width: calc(33% - 1px);}
.sheet-widthpercent66 {width: calc(66% - 1px);}
.sheet-widthpercent85 {width: calc(85% - 1px);}
.sheet-widthpercent100 {width: calc(100% - 1px);}


/* Hide or display the GM view, which is completely disconnected from the rest of the character sheet. */

.sheet-hidable-playersection {
    display: block;
	box-sizing: border-box;	
}

.sheet-hidable-gmonlyview {
    display: none;
	box-sizing: border-box;
}

.sheet-gm-switch[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.sheet-hidable-gm-switch[type="checkbox"] {
    display: none;
}

.sheet-hidable-gm-switch:checked ~ .sheet-hidable-gmonlyview {
    display: block;
	box-sizing: border-box;	
}

.sheet-hidable-gm-switch:checked ~ .sheet-hidable-playersection {
    display: none;
	box-sizing: border-box;	
}

.sheet-hidable-gm-switch:not(:checked) ~ .sheet-hidable-playersection {
    display: block;
	box-sizing: border-box;	
}

.sheet-hidable-gm-switch:not(:checked) ~ .sheet-hidable-gmonlyview {
    display: none;
	box-sizing: border-box;	
}

/* Setup for roll section hide and show */
.sheet-hidden-checkbox {
	display: none;
}

div.sheet-role-netrunner {
	display: none;
}

.sheet-role-netrunner-checkbox:checked ~ div.sheet-role-netrunner {
    display: block;
	box-sizing: border-box;	
}

.sheet-role-netrunner-checkbox:not(:checked) ~ div.sheet-role-netrunner {
    display: none;
	box-sizing: border-box;	
}


/* Repeating hidable edit boxes for NPC section of the sheet*/

.sheet-repeating-hidable {
    display: none;
	box-sizing: border-box;
}

input[type="text"].sheet-npc-hidable,input[type="number"].sheet-npc-hidable, textarea.sheet-npc-hidable {
    background-color: aqua;
	text-align: center;
	border-bottom: none;
	border: none;
	border-radius: 0px;
	padding: 1px;
	width: 100%;
	box-sizing: border-box;
}

select.sheet-npc-hidable {
    background: aqua;
	color: black;
	text-align: center;
	border-bottom: none;
	border: none;
	border-radius: 0px;
	padding: 1px;
	width: 100%;
	box-sizing: border-box;
	height: 20px;
}

.sheet-npc-holder {
	display: inline-block;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    align-content:center;
    align-items:center;
    text-align:center;
    vertical-align: top;
	box-sizing: border-box;
}

.sheet-hidden-repeating-checkbox[type="checkbox"] {
    appearance: none;
    display: none;	
}

.sheet-hidden-repeating-checkbox:checked ~ .sheet-repeating-hidable {
    display: block;
	box-sizing: border-box;	
}

.sheet-hidden-repeating-checkbox:not(:checked) ~ .sheet-repeating-hidable {
    display: none;
	box-sizing: border-box;	
}


/* Input definitions */

input[type="text"], input[type="number"], select {
	background: transparent;
	border: none;
	border-bottom: 1px solid #000000;
	text-align: center;
}
input[type="number"] {
	width: 2em !important;
	text-align: center;
}
input[type="text"] {
	width: 10em;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

input:read-only {
	background-color: #FFD0CF;
}


label {
	font-weight: normal;
}

input.sheet-wordlist[type=checkbox] {
	position: absolute;
	left: -999px;
}

input.sheet-wordlist[type=checkbox]:checked + label {
    background-color: #A9FFA9;
	color: #004000;
	font-weight: bold;
}

input.sheet-wordlist[type=checkbox]:unchecked + label {
    background-color: transparent;
	font-weight: normal;
	color: #404040;
}


/* Radio Buttons for Tracking Damage */
/* Hide actual radio */
input[type="radio"].sheet-dmg {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio */
input[type="radio"].sheet-dmg + span::before {
    margin-right: 4px;
    border: solid 1px #a80000;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    content: "•";
	color: #f60000;
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked.sheet-dmg ~ input[type="radio"].sheet-dmg + span::before {    
    content: "";
}


/* Radio Buttons for Tracking Luck */
/* Hide actual radio */
input[type="radio"].sheet-luck {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio */
input[type="radio"].sheet-luck + span::before {
    margin-right: 4px;
    border: solid 1px #00a800;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    content: "•";
	color: #00f600;
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked.sheet-luck ~ input[type="radio"].sheet-luck + span::before {    
    content: "";
}

/* Changes the button icon to a d10 */

button[type="roll"].sheet-invisible-button {
	background-color: transparent;
    color: black;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
    margin: 0px;
    width: auto;
    font-weight: normal;
	font-size: 1em;
    text-align: left;
	display: inline-block;
}

button[type="roll"].sheet-invisible-button::before {
	content: none !important;
}

button[type="roll"].sheet-invisible-button:hover {
	color: red;
	font-weight: normal;
	background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
    margin: 0px;
    width: auto;
    font-size: 1em;
    text-align: left;
	display: inline-block;
}

button[type="roll"]::before {
	font-family: 'dicefontd10' !important;
	content: '0 ' !important;
}

button[type="roll"] {
	/* width: 20em; Removing width for this version as a usability test */
	border:0px solid #CA6D3F;
	-webkit-box-shadow: #B4B5B5 3px 3px 3px  ;
	-moz-box-shadow: #B4B5B5 3px 3px 3px ;
	box-shadow: #B4B5B5 3px 3px 3px  ;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 1em;
	font-family:arial, helvetica, sans-serif; 
	padding: 1px 1px 1px 1px; 
	text-decoration:none; 
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:normal; 
	color: #FFFFFF;
	background-color: #A90329; background-image: -webkit-gradient(linear, left top, left bottom, from(#A90329), to(#B35858));
	background-image: -webkit-linear-gradient(top, #A90329, #B35858);
	background-image: -moz-linear-gradient(top, #A90329, #B35858);
	background-image: -ms-linear-gradient(top, #A90329, #B35858);
	background-image: -o-linear-gradient(top, #A90329, #B35858);
	background-image: linear-gradient(to bottom, #A90329, #B35858);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#A90329, endColorstr=#B35858);
}

button[type="roll"]:hover {
	/* width: 20em; Removing width for this version as a usability test */
	border:0px solid #CA6D3F;
	background-color: #FA4646; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FA4646), to(#FF2E43));
	background-image: -webkit-linear-gradient(top, #FA4646, #FF2E43);
	background-image: -moz-linear-gradient(top, #FA4646, #FF2E43);
	background-image: -ms-linear-gradient(top, #FA4646, #FF2E43);
	background-image: -o-linear-gradient(top, #FA4646, #FF2E43);
	background-image: linear-gradient(to bottom, #FA4646, #FF2E43);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FA4646, endColorstr=#FF2E43);
}

textarea {
	background-attachment: local;
	background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px), repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
	line-height: 31px;
	padding: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: calc(50%-1px);
	resize: none;
}


/* Block element definitions */

span {
	display: inline-block;
	box-sizing: border-box;
}





/* Special Definitions for SKILL SECTION */

.sheet-skillname {
    float: left;
	display: inline-block;
	overflow: hidden;
	padding: 0px;
	vertical-align: middle;
	white-space: nowrap;
	width: calc(60% - 1px);
	box-sizing: border-box;	
}

.sheet-skillvalue {
    float: right;
	display: inline-block;
	overflow: hidden;
	padding: 0px;
	vertical-align: middle;
	white-space: nowrap;
	width: calc(30% - 1px);
	box-sizing: border-box;	
}

.sheet-skillflag {
    float: right;
	display: inline-block;
	overflow: hidden;
	padding: 0px;
	vertical-align: middle;
	white-space: nowrap;
	width: calc(10% - 1px);
	color: red;
	box-sizing: border-box;	
}

/* Borders */

.sheet-borderred {
	border: 10px ridge #FF1010;
	border-image-source: url("http://gerdofal.net/roll20include/crredborder.jpg?ver5"); /* source url */
	border-image-slice: 17 0 17 9;
	border-image-width: 17px 0px 17px 9px;
	border-image-outset: 0px;
	border-image-repeat: stretch;
}

.sheet-borderblue {
		border: 1px ridge #1010FF;
}

.sheet-borderblack {
		border: 1px ridge #101010;
}

.sheet-bordergray {
		border: 1px ridge #757575;
}

.sheet-borderbottom {
		border-bottom: 1px ridge #757575;
}

.sheet-borderleft {
		border-left: 1px ridge #757575;
}

.sheet-bordergreen {
		border: 1px ridge #10FF10;
}

.sheet-bordernone {
		border: none;
	  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
	  -webkit-border-radius: 0px; 
	  /* Firefox 1-3.6 */
	  -moz-border-radius: 0px; 
	  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	  border-radius: 0px;
}

/* Visual and formatting definitions */

.sheet-shadowed {
	border: 10px solid #FF1010;
	box-shadow: inset 0px 0px 6px 3px #DD1010;
}

.sheet-rounded {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 
  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

.sheet-nowrap {
	white-space: nowrap;
}
.sheet-divcenter { /* This won't always work */
	margin: 0 auto !important;
}
.sheet-textleft {
	text-align: left !important;
}
.sheet-textright {
	text-align: right !important;
}



/* Setup for tabbed content, works for up to 7 tabs at the current time */

div.sheet-tab-content {
	display: none;
}
input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, input.sheet-tab7:checked ~ div.sheet-tab7 {
	/* essential elements */
	display: block;
	box-sizing: border-box;
}
.charsheet input.sheet-tab {
	/* essential elements */
	width: 120px; /* must match span.sheet-tab below */
	position: relative;
	opacity: 0;
	z-index: 9999;
	height: 24px; /* change height to match span.sheet-tab below  */
	box-sizing: border-box;
}
.charsheet span.sheet-tab {
	/* essential elements */
	width: 120px; /* must match width of input above */
	margin-left: -120px; /* ditto */
	/* change box size: enter same height in input.sheet-tab above */
	font-size: 1.2em;
	height: 24px;
	font-weight: bold;
	/* make text centred */
	text-align: center;
	display: inline-block;
	/* add a nice border */
	border-radius: 4px;
	border: 1px solid;
	box-sizing: border-box;
}
input.sheet-tab[type="radio"]:checked + span.sheet-tab {
	/* reverse color of selected tab */
	color: white;
	background: black;
}

/* Roll Templates - JSK1*/

.sheet-rolltemplate-jsk1 .sheet-templatecontainer {
	background-color: transparent;
	border: none;
	color: black;
	font-weight: bolder;
    padding: 0px;
    width: 226px;
	text-align: center;
	box-sizing: border-box;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-redborderleft{
	padding: 6px 12px 6px 6px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redleft.png?ver5");
	background-repeat: repeat-y;
	background-position: left top;
	border: none;
	color: black;
	font-weight: normal;
	text-align: center;
	width: 226px;
}
.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-redbordertop {
	padding: 0px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redtop.png?ver5");
	background-repeat: no-repeat;
	border: none;
	color: black;
	font-weight: normal;
	text-align: center;
	height: 16px;
	width: 226px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-redborderbot {
	padding: 0px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redbot.png?ver5");
	background-repeat: no-repeat;
	border: none;
	color: black;
	font-weight: lighter;
	text-align: center;
	height: 17px;
	width: 226px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-header {
	display: inline-block;
	background-color: transparent;
	border: none;
	color: black;
	font-weight: normal;
	width: 50%;
	text-align: right;
	padding: 3px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-green {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: green;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-red {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: red;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-yellow {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: #B0B000;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-blue {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: blue;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-black {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: black;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-purple {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: purple;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-magenta {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: #FF00FF;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-charactername-bronze {
	padding: 3px;
	border: none;
	color: white;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: #7F6000;
}


.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-roll {
	display: inline-block;
	background-color: transparent;
	border: none;
	color: black;
	font-weight: bold;
	width: 30%;
	text-align: left;
	padding: 3px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-fail {
	background-color: transparent;
	border: none;
	color: red;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 3px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-crit {
	background-color: transparent;
	border: none;
	color: green;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 3px;
}

.sheet-rolltemplate-jsk1 .sheet-templatecontainer .sheet-footer {
	background-color: transparent;
	border: none;
	color: black;
	font-weight: normal;
	font-style: italic;
	width: 100%;
	text-align: center;
	padding: 6px 12px 6px 6px;
}


/* Roll Templates - JSKGM1*/

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer {
	background-color: transparent;
	border: none;
	color: #AF000A;
	font-weight: bolder;
    padding: 0px;
    width: 226px;
	text-align: center;
	box-sizing: border-box;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-redborderleft{
	padding: 6px 12px 6px 6px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redleft.png?ver5");
	background-repeat: repeat-y;
	background-position: left top;
	border: none;
	color: #AF000A;
	font-weight: normal;
	text-align: center;
	width: 226px;
}
.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-redbordertop {
	padding: 0px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redtop.png?ver5");
	background-repeat: no-repeat;
	border: none;
	color: #AF000A;
	font-weight: normal;
	text-align: center;
	height: 16px;
	width: 226px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-redborderbot {
	padding: 0px;
	background-color: transparent;
	background-image: url("http://gerdofal.net/roll20include/redbot.png?ver5");
	background-repeat: no-repeat;
	border: none;
	color: #AF000A;
	font-weight: lighter;
	text-align: center;
	height: 17px;
	width: 226px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-header {
	display: inline-block;
	background-color: transparent;
	border: none;
	color: #AF000A;
	font-weight: normal;
	width: 50%;
	text-align: right;
	padding: 3px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-charactername-gm {
	padding: 3px;
	border: none;
	color: #AF000A;
	font-weight: bolder;
	width: 80%;
	text-align: center;
	border-radius: 9px;
	display: inline-block;
	background-color: #FFDDDD;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-roll {
	display: inline-block;
	background-color: transparent;
	border: none;
	color: #AF000A;
	font-weight: bold;
	width: 30%;
	text-align: left;
	padding: 3px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-fail {
	background-color: transparent;
	border: none;
	color: red;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 3px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-crit {
	background-color: transparent;
	border: none;
	color: green;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 3px;
}

.sheet-rolltemplate-jskgm1 .sheet-gmtemplatecontainer .sheet-footer {
	background-color: transparent;
	border: none;
	color: #AF000A;
	font-weight: normal;
	font-style: italic;
	width: 100%;
	text-align: center;
	padding: 6px 12px 6px 6px;
}