mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
763 lines
10 KiB
CSS
763 lines
10 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Italianno&family=Merienda:wght@300..900&display=swap');
|
|
|
|
* {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.charname {
|
|
font-family: Charm, Tahoma;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.select_label {
|
|
font-family: Charm, Tahoma;
|
|
}
|
|
|
|
ul.nav-tabs.nav{
|
|
display: none;
|
|
}
|
|
|
|
.text_area {
|
|
font-size: 18px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.notes {
|
|
font-size: 16px;
|
|
line-height: normal;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.card_select {
|
|
font-family: Charm, serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
/*Configure the tab buttons*/
|
|
.sheet-character,
|
|
.sheet-journal {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
|
|
display: block;
|
|
}
|
|
|
|
.characterviewer {
|
|
width: 1120px;
|
|
}
|
|
|
|
div.sheet-character {
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Negocios_Infernales/images/sheet_background.png");
|
|
background-position: center 50px;
|
|
background-color: #e3e3e3;
|
|
height: 1200px;
|
|
width: 1100px;
|
|
z-index: 0;
|
|
background-size: 600px 928px;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.charname {
|
|
width: 380px;
|
|
font-size: 24px;
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 400px;
|
|
max-width: 350px;
|
|
max-height: 30px;
|
|
resize: none;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.sheet-charname {
|
|
width: 380px;
|
|
font-size: 24px;
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 400px;
|
|
}
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Motivation Seciton*/
|
|
/*==================*/
|
|
|
|
.motivation_section {
|
|
position: absolute;
|
|
top: 175px;
|
|
}
|
|
|
|
.sheet-motivation_section {
|
|
position: absolute;
|
|
top: 175px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_motivation {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_motivation {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
.motivation_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-motivation_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_motivation_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 40px;
|
|
}
|
|
|
|
.sheet-select_motivation_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 40px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.motivation_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-motivation_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
.motivation_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 300px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.sheet-motivation_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 300px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Magic Seciton*/
|
|
/*==================*/
|
|
|
|
|
|
.magic_section {
|
|
position: absolute;
|
|
top: 440px;
|
|
}
|
|
|
|
.sheet-magic_section {
|
|
position: absolute;
|
|
top: 440px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_magic {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_magic {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.magic_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-magic_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_magic_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 55px;
|
|
}
|
|
|
|
.sheet-select_magic_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 55px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.magic_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-magic_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
.magic_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 300px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.sheet-magic_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 300px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Role Seciton*/
|
|
/*==================*/
|
|
|
|
.role_section {
|
|
position: absolute;
|
|
top: 175px;
|
|
right: 60px;
|
|
}
|
|
|
|
.sheet-role_section {
|
|
position: absolute;
|
|
top: 175px;
|
|
right: 70px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_role {
|
|
position: relative;
|
|
left: 60px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_role {
|
|
position: relative;
|
|
left: 60px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.role_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-role_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_role_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 30px;
|
|
}
|
|
|
|
.sheet-select_role_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 30px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.role_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-role_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
.role_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
right: 240px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.sheet-role_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
right: 240px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Doom Seciton*/
|
|
/*==================*/
|
|
|
|
.doom_section {
|
|
position: absolute;
|
|
top: 440px;
|
|
right: 60px;
|
|
}
|
|
|
|
.sheet-doom_section {
|
|
position: absolute;
|
|
top: 440px;
|
|
right: 70px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_doom {
|
|
position: relative;
|
|
left: 60px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_doom {
|
|
position: relative;
|
|
left: 60px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.doom_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-doom_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
.select_doom_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 55px;
|
|
}
|
|
|
|
.sheet-select_doom_label {
|
|
color: black;
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
left: 55px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.doom_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-doom_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
.doom_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
right: 240px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.sheet-doom_text_area {
|
|
width: 240px;
|
|
height: 240px;
|
|
position: absolute;
|
|
right: 240px;
|
|
top: 50px;
|
|
resize: none;
|
|
max-width: 235px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Relationships Seciton*/
|
|
/*==================*/
|
|
|
|
|
|
.relationships_text_area {
|
|
width: 500px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 300px;
|
|
resize: none;
|
|
max-width: 490px;
|
|
min-height: 160px;
|
|
top: 755px;
|
|
}
|
|
|
|
.sheet-relationships_text_area {
|
|
width: 500px;
|
|
height: 240px;
|
|
position: absolute;
|
|
left: 310px;
|
|
resize: none;
|
|
max-width: 500px;
|
|
min-height: 200px;
|
|
top: 755px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Bottom Left Seciton*/
|
|
/*==================*/
|
|
|
|
.bottom_left_section {
|
|
position: absolute;
|
|
top: 730px;
|
|
}
|
|
|
|
.sheet-bottom_left_section {
|
|
position: absolute;
|
|
top: 775px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_bottom_left {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_bottom_left {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_left_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-bottom_left_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_left_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-bottom_left_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 60px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Bottom Mid Seciton*/
|
|
/*==================*/
|
|
|
|
.bottom_mid_section {
|
|
position: absolute;
|
|
left: 420px;
|
|
top: 940px;
|
|
}
|
|
|
|
.sheet-bottom_mid_section {
|
|
position: absolute;
|
|
left: 430px;
|
|
top: 940px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_bottom_mid {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_bottom_mid {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_mid_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-bottom-mid_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_mid_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 40px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-bottom_mid_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 40px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*==================*/
|
|
/*Bottom Right Seciton*/
|
|
/*==================*/
|
|
|
|
.bottom_right_section {
|
|
position: absolute;
|
|
top: 730px;
|
|
right: 60px;
|
|
}
|
|
|
|
.sheet-bottom_right_section {
|
|
position: absolute;
|
|
top: 775px;
|
|
right: 30px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.select_bottom_right {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sheet-select_bottom_right {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom_right_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-bottom_right_image_select {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
.bottom_right_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 20px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-bottom_right_image_display {
|
|
width: 180px;
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
display: block;
|
|
margin-left: 20px;
|
|
margin-top: -28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
|
|
.journal_text_area {
|
|
width: 99%;
|
|
}
|