mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 04:02:29 +00:00
412 lines
7.1 KiB
CSS
412 lines
7.1 KiB
CSS
input {
|
|
border: 1px solid transparent;
|
|
background-color: transparent;
|
|
}
|
|
|
|
textarea {
|
|
border: 0;
|
|
}
|
|
|
|
.sheet-character-sheet {
|
|
background-image: url("https://i.imgur.com/yVX26vG.png");
|
|
background-repeat: no-repeat;
|
|
width: 1000px;
|
|
height: 1400px;
|
|
}
|
|
|
|
/* Top section */
|
|
|
|
.sheet-main-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-character-name {
|
|
margin-left: 489px;
|
|
margin-top: 40px;
|
|
width: 323px;
|
|
}
|
|
|
|
.sheet-real-job {
|
|
margin-left: 584px;
|
|
margin-top: 1px;
|
|
width: 228px;
|
|
}
|
|
|
|
.sheet-fake-job {
|
|
width: 256px;
|
|
margin-left: 556px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
/* Bottom section */
|
|
|
|
.sheet-main-bottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* First column section */
|
|
|
|
.sheet-column-1 {
|
|
flex-basis: 384px;
|
|
}
|
|
|
|
.sheet-column-1-row {
|
|
border: 1px solid transparent;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(n + 5) {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(n + 12) {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(14) {
|
|
margin-top: 46px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(14) .sheet-left-value {
|
|
width: 43px;
|
|
height: 43px !important;
|
|
margin-left: 191px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(15) {
|
|
margin-top: 87px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(16),
|
|
.sheet-column-1-row:nth-child(17) {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(15) .sheet-left-value,
|
|
.sheet-column-1-row:nth-child(16) .sheet-left-value,
|
|
.sheet-column-1-row:nth-child(17) .sheet-left-value {
|
|
width: 180px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(15) .sheet-right-value,
|
|
.sheet-column-1-row:nth-child(16) .sheet-right-value,
|
|
.sheet-column-1-row:nth-child(17) .sheet-right-value {
|
|
margin-right: 63px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(18),
|
|
.sheet-column-1-row:nth-child(19),
|
|
.sheet-column-1-row:nth-child(21) {
|
|
margin-top: 68px;
|
|
padding: 1px 44px 0 34px;
|
|
height: 14px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(19) {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(21) {
|
|
margin-top: 39px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(20),
|
|
.sheet-column-1-row:nth-child(22) {
|
|
margin-top: 8px;
|
|
padding-left: 47px;
|
|
height: 13px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(21),
|
|
.sheet-column-1-row:nth-child(22),
|
|
.sheet-column-1-row:nth-child(23),
|
|
.sheet-column-1-row:nth-child(25) {
|
|
margin-top: 5px;
|
|
padding: 1px 44px 0 34px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(22) {
|
|
margin-top: 84px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(23) {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(23),
|
|
.sheet-column-1-row:nth-child(24),
|
|
.sheet-column-1-row:nth-child(25) {
|
|
height: 14px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(24) {
|
|
margin-top: 8px;
|
|
padding-left: 47px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(25) {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.sheet-column-1-row:nth-child(1) {
|
|
margin-top: 76px;
|
|
}
|
|
|
|
.sheet-left-value,
|
|
.sheet-right-value {
|
|
width: 27px;
|
|
height: 24px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-left-value {
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.sheet-right-value {
|
|
margin-right: 66px;
|
|
}
|
|
|
|
.sheet-column-2-row {
|
|
padding-left: 20px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(1) {
|
|
margin-top: 99px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(4) {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(9) {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(12) {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(n + 15) {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(n + 17) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(19) {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(21),
|
|
.sheet-column-2-row:nth-child(22),
|
|
.sheet-column-2-row:nth-child(23) {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.sheet-column-2-row:nth-child(24) {
|
|
margin-top: 44px;
|
|
}
|
|
|
|
.sheet-skill-value,
|
|
.sheet-skill-value-name {
|
|
text-align: center;
|
|
width: 25px;
|
|
margin-right: 158px;
|
|
}
|
|
|
|
.sheet-skill-name {
|
|
width: 148px;
|
|
margin-right: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.sheet-skill-value-name {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sheet-skill-pool {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.sheet-skill-pool:nth-child(2) {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sheet-contacts {
|
|
resize: none;
|
|
margin-left: 3px;
|
|
width: 251px;
|
|
height: 140px;
|
|
}
|
|
|
|
.sheet-column-3-row {
|
|
margin-left: 17px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.sheet-column-3-row:nth-child(1) {
|
|
margin-top: 99px;
|
|
}
|
|
|
|
.sheet-column-3-row:nth-child(5) {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.sheet-column-3-row:nth-child(7),
|
|
.sheet-column-3-row:nth-child(8),
|
|
.sheet-column-3-row:nth-child(9),
|
|
.sheet-column-3-row:nth-child(11),
|
|
.sheet-column-3-row:nth-child(13),
|
|
.sheet-column-3-row:nth-child(14),
|
|
.sheet-column-3-row:nth-child(15),
|
|
.sheet-column-3-row:nth-child(16),
|
|
.sheet-column-3-row:nth-child(17),
|
|
.sheet-column-3-row:nth-child(18),
|
|
.sheet-column-3-row:nth-child(19) {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.sheet-column-3-row:nth-child(12) {
|
|
margin-top: 53px;
|
|
}
|
|
|
|
.sheet-column-3-row:nth-child(18) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.sheet-column-3-row .sheet-skill-value {
|
|
margin-right: 162px;
|
|
}
|
|
|
|
.sheet-column-3-row .sheet-skill-pool:nth-child(2) {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sheet-container {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
padding: 0;
|
|
width: 12px;
|
|
}
|
|
|
|
/* Hide the browser's default radio button */
|
|
.sheet-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
width: 7px;
|
|
}
|
|
|
|
/* Create a custom radio button */
|
|
.sheet-checkmark {
|
|
position: absolute;
|
|
margin-top: -1px;
|
|
margin-left: -6px;
|
|
height: 12px;
|
|
width: 12px;
|
|
background-color: transparent;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* When the radio button is checked, add a blue background */
|
|
.sheet-container input:checked ~ .sheet-checkmark {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Create the indicator (the dot/circle - hidden when not checked) */
|
|
.sheet-checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the indicator (dot/circle) when checked */
|
|
.sheet-container input:checked ~ .sheet-checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-column-2-row,
|
|
.sheet-column-3-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sheet-checkbox-container {
|
|
width: 15px;
|
|
}
|
|
|
|
/* The container */
|
|
.sheet-checkbox-container {
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin-right: -4px;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
.sheet-checkbox-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.sheet-checkbox-checkmark {
|
|
position: absolute;
|
|
|
|
top: 7px;
|
|
left: 1px;
|
|
height: 14px;
|
|
width: 14px;
|
|
background-color: transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* When the checkbox is checked, add a blue background */
|
|
.sheet-checkbox-container input:checked ~ .sheet-checkbox-checkmark {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.sheet-checkbox-container input:checked ~ .sheet-checkbox-checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.sheet-checkbox-container .sheet-checkbox-checkmark:after {
|
|
top: 7px;
|
|
left: 1px;
|
|
height: 14px;
|
|
width: 14px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.sheet-skill-text-only {
|
|
margin-left: 30px;
|
|
width: 229px;
|
|
}
|